Skip to content

v0.5.106

Choose a tag to compare

@jaspertey jaspertey released this 30 Oct 15:48
c22c638

Upgrading

  • Run kit:update plan|apply for core (re-pinned sha256:a2b97a31…95c1 → sha256:e4156a8f…2695): Kit/Action/actionPlacement.ts, Kit/Action/ActionMenuItems.vue, Kit/Workbench/Workbench.vue, Kit/Workbench/WorkbenchNavigator.vue and Kit/Workbench/workbench.ts take the checkbox menu items and #navigator-item below. ActionMenuItems now imports DropdownMenuCheckboxItem from the host's shadcn-vue dropdown-menu (DataTable already did). A descriptor without checked and a Workbench without #navigator-item render as before.
  • Run kit:update plan|apply for core (re-pinned sha256:e4156a8f…2695 → sha256:63781198…377f): Kit/Form/SegmentedToggle.vue is new, and Kit/index.ts, Kit/contract.ts and Kit/Layout/PaneTabs.vue take the changes below. PaneTabs looks different: its pressed pane is no longer a primary-filled button but a neutral raised segment in a muted track. Its semantics, props and events are unchanged. A host that styled around the old primary button, or asserted its classes, should check its phone tabs.
  • Run kit:update plan|apply for core (re-pinned sha256:63781198…377f → sha256:f61ee0bf…fa41): Kit/Workbench/WorkbenchNavigator.vue, Kit/Workbench/Workbench.vue and Kit/Workbench/workbench.ts take the thumbnails and filmstrip layout below. An item without thumbnail in the default list layout renders as before. A host that copies types/kit.d.ts re-copies it: WorkbenchItem has thumbnail, and WorkbenchThumbnail is new.
  • Run kit:update plan|apply for core (re-pinned sha256:f61ee0bf…fa41 → sha256:d8054e8f…525e): this adds Kit/Data/DateTime.vue, dateTime.ts and useTimezone.ts.
  • Run kit:update plan|apply for core (re-pinned sha256:d8054e8f…525e → sha256:9ea138b7…a9e7): this adds the pickers (Kit/Form/InputDate.vue, InputDateRange.vue, InputMonth.vue, InputYear.vue, InputTime.vue, InputTimeRange.vue, PeriodPicker.vue and dateInput.ts), and css/kit.css gains their phone-sheet rule. core now declares @internationalized/date (^3.5.0, already installed with reka-ui) in its npm requirements.
  • Run kit:update plan|apply for core (re-pinned sha256:9ea138b7…a9e7 → sha256:0b44195c…21f1): Kit/Form/Slider.vue is new, Kit/Form/RadioCardGroup.vue gains the option slot, image tiles and columns, and Kit/contract.ts and Kit/index.ts export them. RadioCardOption now needs a label or an image (with alt); an option with a label is unchanged.

Added

  • The adoption inventory reads Blade, Livewire and Filament apps (tey/standards 0.11.50 or later). Every template-tag signal reads Blade views as well as Vue ("in": ["vue", "blade"]). Filament resources under app/Filament/** count as hand-rolled through class references: TextInput, Select and Textarea for form.inputs, FileUpload for form.files, Table and TextColumn for data.table, DeleteAction for action.confirm and Notification for feedback.toast, mirrored into the has-forms, has-file-uploads and has-index-pages facts. A new has-filament-destructive-actions fact lets action.confirm apply to a Filament app with no delete route. Blade views count for shell.workspace (the conventional app layout files), layout.page (<x-app-layout>, <x-layouts.app>), action.button (<button>, <x-button> and the Breeze button components), feedback.toast (toast, flash and action-message views) and appearance.theme (theme-toggle, dark-mode and appearance views). platform.timezone gains nothing: no signal kind expresses hand-rolled timezone handling in PHP or Blade without guessing.
  • Checkbox menu items (docs/workbench.md › Item menus). An action descriptor with checked (true or false) renders in ActionMenuItems, and so in every kit menu built on it including the Workbench row menu, as role="menuitemcheckbox" with aria-checked and the host's check indicator (shadcn-vue's DropdownMenuCheckboxItem). Choosing it emits the action as today; the host flips checked. Without checked, or with null, the row stays a plain menuitem. The PHP Action takes checked (nullable bool, default null), and types/kit.d.ts is regenerated. A row menu opened from the item focuses its first row, checkbox rows included.
  • Workbench #navigator-item slot (docs/workbench.md › Custom rows). The Workbench forwards WorkbenchNavigator's item slot as #navigator-item ({ item, selected, index }, typed as WorkbenchNavigatorItemSlotProps) in every layout: columns, the lg drawer layout, phone tabs and the overlay navigator. A host customises row content without replacing the navigator. The kit keeps the role="option" row, its keys and the row menus outside the listbox; the slot holds content only. WorkbenchNavigator now declares its item slot with defineSlots. The browser job checks a row menu with a checked and an unchecked item and a Workbench using #navigator-item, with axe clean on both.
  • SegmentedToggle, a neutral view switch (docs/segmented-toggle.md). Kit/Form/SegmentedToggle.vue picks one of a few views ("Slides | Outline", grid or list) with v-model, options ({ value, label, icon?, disabled? }), label and size. Its selected segment is a bordered bg-background surface in a bg-muted track, never brand-filled. It's a role="radiogroup" of role="radio" buttons with one tab stop: the arrows move and select, Home and End jump, and disabled options are skipped. The selected border keeps 3:1 against the track and the segment in light and dark. tests/js/segmented-toggle.test.mjs checks the source and the ratios; the browser job drives the keys, compares the selected background with the primary colour and runs axe with colour contrast, light and dark.
  • Workbench navigator thumbnails and a filmstrip layout (backported from main). A navigator item takes an optional thumbnail ({ src, alt }, exported as WorkbenchThumbnail; alt is required, '' for a decorative image that repeats the label), rendered as a lazy, async-decoded <img> inside the item's role="option" row in a fixed-aspect box, so the row doesn't shift when it loads. navigator-layout="filmstrip" on the Workbench (layout on WorkbenchNavigator) lists the items as a Slides-like editor's left rail: the item's number, a 16:9 thumbnail (an empty placeholder box without one) and the label; list stays the default. The listbox semantics, keys, Alt+↑/↓ reorder, drag, filter, F6, WorkbenchNavigator's item slot (the label part) and the row menus beside the listbox are unchanged. The PHP WorkbenchItem takes thumbnail (a new WorkbenchThumbnail data class, default null) and types/kit.d.ts is regenerated; the MCP WorkbenchReadTool still gives exactly { id, label, type, description }, leaving the thumbnail out. composer test:workbench-item-parity covers the new key through the Inertia round trip, and the browser job checks a filmstrip: images inside the options with their alt, nothing focusable in the listbox, Alt+↓ reorder, filter and F6, axe clean with color-contrast, and each thumbnail box sized before its image loads.
  • DateTime, dates and times for the viewer (backported from main; docs/date-time.md). It renders a <time> with the machine value and the full date in its title, in the formats relative, local, date, time, ymd and datetime. A calendar date (YYYY-MM-DD) is never converted between zones, so it never shifts across midnight or DST. An instant (RFC 3339 with its offset) shows in the viewer's timezone, and one without an offset is shown as given, never guessed. live re-renders relative times on one shared minute ticker. formatDateTime(), fullDateTime() and useTimezone() are exported too. It uses Intl only, with no date library.
  • session-ui shares kitTimezone, the viewer's zone (the tz cookie, then the person's saved zone, then the workspace's, then UTC), through KitShares, so it survives a flush.
  • Date and time pickers (backported from main; docs/date-pickers.md): InputDate, InputDateRange, InputMonth, InputYear, InputTime and InputTimeRange, on reka-ui. Each submits plain ISO strings (2026-11-01, 2026-11, 2026, 09:30; a range as name[start] and name[end]). A date, month, year or time is a wall value, never converted between zones; kitTimezone only decides today. The calendars use the APG date picker keys and the month and year grids the APG grid keys; on phones they open as a bottom sheet, and in a locked LockedForm they stay shut. A half-filled or reversed range blocks the native submit. toInstant() and fromInstant() join a date and time into an RFC 3339 instant with the viewer zone's offset (DST gaps move forward, repeated hours take the earlier moment).
  • Tey\Kit\Validation\IsoDate and IsoRange, the server rules for those values: IsoDate::date(), month(), year(), time() and instant() (an offset required) with inclusive bounds, and IsoRange::dates() and times() for {start, end}.
  • <RadioCardGroup> tiles (docs/radio-card.md). The option slot ({ option, checked, disabled }) replaces a card's body while the native radio, its label and the focus ring stay the kit's. An option with image: { src, alt } is an image tile: a lazy, async image in a square object-cover box, so ~100 tiles load without layout shift, named by its label or its image's alt. A checked image or slot tile shows the primary ring and an aria-hidden check mark, so the state isn't colour alone. columns (2, 3, 4, 6 or auto, at least 7rem a tile) lays the cards in a grid. A disabled option stays a native disabled radio the arrow keys skip.
  • <Slider> (docs/slider.md), a native range input: v-model number, min, max, step, disabled, invalid, valueText for aria-valuetext, input emitted live and change on release, and show-value for a visible <output> linked by for. Caller attributes land on the input; in a Field it is described by the Field's description and error; in a locked LockedForm it is read-only.
  • The adoption inventory counts Slider under form.inputs, and a raw <input type="range"> in a Vue or Blade template as hand-rolled (it also marks the app has-forms).

Changed

  • PaneTabs' pressed pane is neutral. The Workbench's phone tabs (Kit/Layout/PaneTabs.vue) took the primary button for the pressed pane, so it read as a second primary action. They now take SegmentedToggle's look: a bordered raised segment in a muted track. They stay a single-choice toggle group (role="group", aria-pressed).

What's Changed

  • Read Blade, Livewire and Filament apps in the adoption inventory (0.5.x) by @jaspertey in #436
  • Checkbox menu items and a #navigator-item slot for the Workbench (0.5.x) by @jaspertey in #389
  • A neutral SegmentedToggle, and PaneTabs without a primary fill (0.5.x) by @jaspertey in #395
  • Workbench navigator thumbnails and a filmstrip layout (0.5.x) by @jaspertey in #408
  • [0.5.x] DateTime and the kitTimezone share (backport of #387) by @jaspertey in #388
  • Pickers backport to 0.5.x: InputDate, InputDateRange, InputMonth, InputYear, InputTime, InputTimeRange by @jaspertey in #394
  • Add RadioCardGroup option slot, image tiles and columns, and a Slider (0.5.x) by @jaspertey in #440
  • Release v0.5.106 by @jaspertey in #487

Full Changelog: v0.5.105...v0.5.106