@adia-ai/a2ui 0.8.41 → 0.8.43

package/catalog/catalog-a2ui_0_9_rules.txt

@@ -17,11 +17,12 @@
 - Set variant="contained" for a bounded per-item surface (background, border, radius, and an open-state divider) — the composition to reach for when nesting inside <card-ui>. Default variant="flat" (no chrome) suits settings pages and FAQ blocks sitting on the page canvas.
 
 ## ActionItem
-- Child of <action-list-ui> — one inline-action row with icon + label + optional subtitle + optional trailing shortcut/badge.
+- Child of <action-list-ui> — one inline-action row with icon + label + optional description + optional trailing shortcut/badge.
 - Different from <menu-item-ui>: action-items live inline in content surfaces; menu-items live inside <menu-ui> popovers.
 - For navigation entries (route-changing) use <nav-item-ui> instead.
 - Use [variant="danger"] exclusively for destructive/irreversible actions (Delete, Remove). Pair danger items with an explicit confirm flow when the action cannot be undone.
-- Prefer [icon]/[text]/[subtitle] props over slotted markup; use slot="icon"/"text"/"subtitle"/"trailing" only for custom markup (e.g. a slotted <kbd> shortcut hint).
+- Prefer [icon]/[text]/[description] props over slotted markup; use slot="icon"/"text"/"subtitle"/"trailing" only for custom markup (e.g. a slotted <kbd> shortcut hint).
+- NOTE (ADR-0063, gh#1571): the deprecated [subtitle] prop alias for [description] was cut in 0.8.43 (gh#1617) — [description] is the sole prop now.
 
 ## ActionList
 - Hosts <action-item-ui> children as a vertical command list inline in content surfaces.
@@ -132,7 +133,7 @@
 - Canonical clickable affordance — text + optional icon. Variant attribute sets primary/secondary/ghost/destructive intent.
 - Do not repeat the icon's glyph in text=. Icon provides the symbol; text= carries only the words.
 - For navigation (route-change) use <nav-item-ui> or anchor; button-ui is for actions only.
-- For toggleable on/off state use <switch-ui>; for multi-select clusters use <segmented-ui multiple> + <segment-ui> (gh#1369 — <toggle-group-ui>/<toggle-option-ui> are deprecated).
+- For toggleable on/off state use <switch-ui>; for multi-select clusters use <segmented-ui multiple> + <segment-ui> (<toggle-group-ui>/<toggle-option-ui> were cut in 0.8.43, gh#1617, gh#1369).
 
 ## CalendarGrid
 - Use <CalendarGrid> only as a substrate primitive composed inside a higher-level component (date-range picker, datetime picker, custom date affordance). For a full single-date input, use <CalendarPicker> — it adds a trigger button, popover surface, and form-association.
@@ -166,7 +167,7 @@
 ## ChartLegend
 - Standalone legend primitive — a row of <badge-ui>+<swatch-ui> chips that are keyboard-focusable and click-toggleable.
 - Pairs with <chart-ui> via [for] id-ref (auto-bidirectional series toggling) or via items= for standalone use.
-- position attribute (top|bottom|left|right) places legend relative to its chart; static= disables interactivity.
+- position attribute (top|bottom|left|right) places legend relative to its chart; interactive="false" disables interactivity.
 
 ## Chart
 - Declarative SVG chart supporting 18 types via the type attribute (bar, line, pie, donut, radar, area, ...).
@@ -201,18 +202,19 @@
 - Pair with <row-ui> for horizontal layouts; both share the same gap-token contract.
 - Set align/justify attributes for cross-axis / main-axis alignment; default is start/start.
 
-## ColorInput
-- Use <color-input-ui> for any form-row color field — it canonicalizes the popover + button + color-picker recipe and is the only form-bearing color primitive. Do not hand-roll the composition; reach for color-input-ui directly.
-- Set [format="oklch"] when the persisted value feeds CSS tokens or perceptual math; [format="hex"] for legacy / design-tool interop. Event detail (`change` / `input`) carries BOTH `hex` and `oklch` views regardless of [format], plus parsed `{l, c, h}` channel scalars.
-- For brand-palette constraints, set [maxChroma] / [minL] / [maxL] / [hueDriftMax] (with [baseHue]) on the host — they forward to the inner <color-picker-ui> and clamp generation. Useful for Tokens-Studio-style guarded color generation.
-- Use <color-picker-ui> DIRECTLY (no color-input-ui wrapper) only for full-surface editors where the picker IS the page (e.g. Tokens Studio main canvas). For inline form-row use, always reach for <color-input-ui>.
-- Per ADR-0027 (cross-primitive composition imports), consumer pages MUST explicitly import <button-ui>, <popover-ui>, and <color-picker-ui> before <color-input-ui>. The primitive composes them but does NOT auto-register them.
-
-## ColorPicker
+## ColorArea
 - OKLCH-native color picker with 2D color area + H/C/L sliders. Form-associated; emits OKLCH color strings.
 - For simple color swatches (read-only display) use <swatch-ui>; for hex/rgb text input use <color-input-ui>.
+- Renamed from <color-picker-ui> (ADR-0063, gh#1563); the old tag was cut in 0.8.43 (gh#1617) — ColorArea is the sole tag now.
 - Output format defaults to oklch(); set format= to override (hex, rgb, hsl).
 
+## ColorInput
+- Use <color-input-ui> for any form-row color field — it canonicalizes the popover + button + color-area recipe and is the only form-bearing color primitive. Do not hand-roll the composition; reach for color-input-ui directly.
+- Set [format="oklch"] when the persisted value feeds CSS tokens or perceptual math; [format="hex"] for legacy / design-tool interop. Event detail (`change` / `input`) carries BOTH `hex` and `oklch` views regardless of [format], plus parsed `{l, c, h}` channel scalars.
+- For brand-palette constraints, set [maxChroma] / [minL] / [maxL] / [hueDriftMax] (with [baseHue]) on the host — they forward to the inner <color-area-ui> and clamp generation. Useful for Tokens-Studio-style guarded color generation.
+- Use <color-area-ui> DIRECTLY (no color-input-ui wrapper) only for full-surface editors where the picker IS the page (e.g. Tokens Studio main canvas). For inline form-row use, always reach for <color-input-ui>.
+- Per ADR-0027 (cross-primitive composition imports), consumer pages MUST explicitly import <button-ui>, <popover-ui>, and <color-area-ui> before <color-input-ui>. The primitive composes them but does NOT auto-register them.
+
 ## Combobox
 - Use <combobox-ui> for typeahead-filterable single-select with a constrained-choice value model. `value` MUST be one of `options[].value` unless `[free-text]` is set. For ≤ 4 options, use <segmented-ui> or <radio-ui> instead.
 - For free-form text entry with suggestions, use <autocomplete-input-ui> (SPEC-035) — combobox is constrained-choice. For button-first dropdowns where the trigger should be closed by default, use <select-ui searchable>.
@@ -238,12 +240,6 @@
 - presets array entries each require both `label` (string) and `range` (`{from, to}`). Empty preset arrays are valid (rail renders empty).
 - Use DateRangePicker for date ranges. Do NOT compose two adjacent `<calendar-picker-ui>` instances + JS synchronization — that is the pattern this primitive replaces.
 
-## DatetimePicker
-- DEPRECATED — prefer `{"component": "CalendarPicker", "precision": "minute"}` (or `"second"`) over `{"component": "DatetimePicker"}`. Both render and behave identically; DatetimePicker is a thin compatibility alias.
-- `DatetimePicker.value` MUST be ISO 8601 datetime (`YYYY-MM-DDTHH:mm` or `YYYY-MM-DDTHH:mm:ss`) OR empty string. Date-only or time-only strings fire `invalid`.
-- `min` and `max` MUST be parseable ISO 8601 datetimes if non-empty. If `value` falls outside, `invalid` fires and the value does not commit.
-- Per ADR-0025 NEVER wrap a native `<input type="datetime-local">` — the calendar pane + time pane composition + ElementInternals together provide form participation.
-
 ## DemoToggle
 - Demo-page-only — toggles between live and code views in component documentation surfaces.
 - Do not use in apps/ — restrict to packages/web-components/components/*/<name>.html demo pages and docs surfaces.
@@ -374,7 +370,7 @@
 - Form participation is implicit via UIFormElement. Set [name] for FormData submission; [required] / [disabled] / [readonly] reflect; listen for `change` (blur or Enter commit) and `input` (per keystroke). `submit` event fires when Enter commits the value (used by <chat-composer>'s `composer-submit` forwarding).
 - For numeric input use [type="number"] with [min] [max] [step] [precision] [prefix] / [suffix] — this stamps a contenteditable surface + <button-ui> / <icon-ui> stepper column with ARIA spinbutton semantics. Read `el.valueAsNumber` for the parsed Number. Never substitute a native <input type="number">.
 - Inside <chat-composer>, the canonical inner input is <chat-input-ui> (chat variant subclass — adds the send button + model picker + paste-to-attach plumbing). The plain <input-ui> primitive ALSO fires a bubbling `submit` event on Enter (unconditional, no opt-in attribute); <chat-input-ui> simply builds on that semantic.
-- input-ui's `type` enum covers only the modes it actually implements — text/email/password/number/tel/url (gh#1363 B10). Never set [type] to an HTML5 value input-ui doesn't render — route date/time/color/search intents to the owning primitive instead: CalendarPicker, DatetimePicker, TimePicker, ColorInput (or ColorPicker directly), Search. See anti_patterns.
+- input-ui's `type` enum covers only the modes it actually implements — text/email/password/number/tel/url (gh#1363 B10). Never set [type] to an HTML5 value input-ui doesn't render — route date/time/color/search intents to the owning primitive instead: CalendarPicker (precision="minute" for datetime-local), TimePicker, ColorInput (or ColorArea directly), Search. See anti_patterns.
 
 ## Inspector
 - Developer-tools pane for A2UI runtime state — composes <tabs-ui> + <code-ui> internally.
@@ -447,7 +443,7 @@
 - Use [variant="danger"] exclusively for destructive / irreversible actions (Delete, Remove). "Sign out" is NOT danger. Pair danger items with an explicit confirm flow (<modal-ui> destructive-confirm pattern) when the action cannot be undone.
 - Set [disabled] (not [hidden]) when an action is contextually unavailable — disabled items remain visible for affordance discoverability but skip roving focus + don't fire `action`.
 - Prefer [icon] + [text] props over slotted markup for consistency. Use slot="icon" / slot="text" only when you need custom markup (e.g. <avatar-ui slot="icon">, <kbd slot="trailing"> shortcut hint).
-- <action-item-ui> (child of <action-list-ui>) shares this row contract (icon/text/subtitle/value/variant/disabled props, icon/text/subtitle/ trailing slot overrides) for inline, non-popover command rows — use it instead when the surface isn't a <menu-ui> popover (#1363 C5).
+- <action-item-ui> (child of <action-list-ui>) shares this row contract (icon/text/description/value/variant/disabled props, icon/text/ subtitle/trailing slot overrides) for inline, non-popover command rows — use it instead when the surface isn't a <menu-ui> popover (#1363 C5). Both components' deprecated `subtitle` PROP aliases for `description` were cut in 0.8.43 (ADR-0063, gh#1563/gh#1571, gh#1617); the `subtitle` SLOT on both is unchanged.
 
 ## MenuLabel
 - <menu-label-ui> MUST be a direct child of <menu-ui>; like menu-item-ui and menu-divider-ui it is hoisted into the top-layer popover via <menu-ui>'s direct-descendant query — a label nested elsewhere renders outside the popover.
@@ -527,10 +523,10 @@
 - Page-number range auto-truncates with ellipsis for high counts; set siblings= to control visible window size.
 
 ## Pane
-- pane-ui is a resizable / collapsible content panel. As a standalone primitive (no [side] attribute), it carries its own four-sided chrome and a right-edge resize grabber. As a horizontal-sibling child of a layout container (set [side="leading"] or [side="trailing"]), the chrome and grabber move to the inner edge so adjacent panes share a single seam.
+- pane-ui is a resizable / collapsible content panel. As a standalone primitive (no [edge] attribute), it carries its own four-sided chrome and a right-edge resize grabber. As a horizontal-sibling child of a layout container (set [edge="leading"] or [edge="trailing"]), the chrome and grabber move to the inner edge so adjacent panes share a single seam.
 - Wrapped by <editor-sidebar slot="leading|trailing"> inside <editor-shell>, and by <admin-sidebar slot="leading|trailing"> inside <admin-shell>. The bespoke sidebar owns [collapsed] / [resizing] reflected state + localStorage persistence; the inner pane-ui owns the physical drag. Don't reimplement drag in the bespoke sidebar — delegate to <pane-ui resizable>.
 - Inner shape inside a pane-ui is the conventional <header> + <section> + optional <footer> slot pattern. Headers carry [slot="action"] button clusters; sections hold the navigator tree, inspector form rows, or other primary content.
-- For a standalone resizable two-pane layout (no shell), nest panes directly inside a flex row — both with [side]-typed chrome — and the resize handle will live on the seam between them. For a non-resizable summary pane (a fixed-width detail rail), drop [resizable] and pane-ui collapses to a static container.
+- For a standalone resizable two-pane layout (no shell), nest panes directly inside a flex row — both with [edge]-typed chrome — and the resize handle will live on the seam between them. For a non-resizable summary pane (a fixed-width detail rail), drop [resizable] and pane-ui collapses to a static container.
 
 ## PasswordStrength
 - Pair with <input-ui type=password> via a JS listener (input.addEventListener('input', e => meter.value = e.target.value)). The meter does NOT participate in form data — it is a display indicator.
@@ -555,10 +551,6 @@
 - Author the slotted markup as plain AdiaUI HTML with attributes only — no inline `style=`, no `<script>` wiring. If a sample needs inline styles to look right, the component is missing an attribute; fix the component, not the demo.
 - Side-by-side ([layout="split"]) is the default. Set [layout="stack"] for wide self-framing examples (a full card / shell / table reads cramped at half width). Use [code-first] when the code is the teaching point and the render is confirmation.
 
-## ProgressRow
-- DEPRECATED — do not generate ProgressRow. Set `label` (and optional `meta`) directly on <progress-ui> instead; label present activates the identical row layout.
-- For standalone progress bars without a row context use <progress-ui> directly (no `label`).
-
 ## Progress
 - Use for in-progress task feedback with known or indeterminate state. Value < 0 = indeterminate animation.
 - For labeled task lists (multiple progress bars with row labels, e.g. storage/capacity breakdowns), set `label` (and optional `meta`) directly on <progress-ui> — no separate component needed.
@@ -619,12 +611,12 @@
 
 ## Segment
 - Child of <segmented-ui> — one selectable option button; the parent's [multiple] axis decides single- or multi-select, segment-ui itself is unchanged either way.
-- <toggle-option-ui> (deprecated, gh#1369) is the same concept — use segment-ui inside <segmented-ui multiple> instead.
+- <toggle-option-ui> (cut in 0.8.43, gh#1617, gh#1369) was the same concept — use segment-ui inside <segmented-ui multiple> instead.
 - Selected state managed by the parent <segmented-ui> — it syncs the selected attribute onto every child whose value is in its own value (single value, or the [multiple] comma-separated set); do not set selected directly on segment.
 
 ## Segmented
 - Single-select by default. Hosts <segment-ui> children; exactly one selected at a time.
-- For multi-select (filter chips, multi-flag toggles, day-of-week pickers), set [multiple] instead of using a separate component — value becomes a comma-separated set of selected segment values. <toggle-group-ui>/<toggle-option-ui> are deprecated; use <segmented-ui multiple> + <segment-ui> instead (gh#1369, #1363 C1).
+- For multi-select (filter chips, multi-flag toggles, day-of-week pickers), set [multiple] instead of using a separate component — value becomes a comma-separated set of selected segment values. <toggle-group-ui>/<toggle-option-ui> were cut in 0.8.43 (gh#1617); use <segmented-ui multiple> + <segment-ui> instead (gh#1369, #1363 C1).
 - Use for view-mode switches (grid/list, light/dark) or short filter sets (3-5 options); for longer sets use <tabs-ui> or <select-ui multiple>.
 
 ## Select
@@ -671,7 +663,7 @@
 ## StepProgress
 - Compact step indicator — N dots/segments showing current step out of total.
 - Different from <stepper-ui> (labeled, expanded) — step-progress is dense and label-free.
-- For multi-task progress bars (multiple labeled rows) use a stack of <progress-ui> with `label` set (absorbed the row layout from the now-deprecated progress-row-ui).
+- For multi-task progress bars (multiple labeled rows) use a stack of <progress-ui> with `label` set (absorbed the row layout from progress-row-ui, which was cut in 0.8.43, gh#1617).
 
 ## StepperItem
 - Child of <stepper-ui> — one numbered step with label + complete/current/upcoming state.
@@ -693,7 +685,7 @@
 - For static (post-stream) display use <text-ui> or <richtext-ui>; stream-ui assumes live token feed.
 
 ## Swatch
-- Use to display a single color sample with optional label. For interactive color picking use <color-picker-ui>.
+- Use to display a single color sample with optional label. For interactive color picking use <color-area-ui>.
 - Inside design-token displays or palette grids; not for general decoration.
 - Color value accepts hex, rgb, hsl, or oklch; oklch preferred for AdiaUI token alignment.
 
@@ -712,7 +704,8 @@
 - All four affordances (search, filter, sort, columns) default ON. Opt out individually via [no-search] / [no-filter] / [no-sort] / [no-columns]. The previous [searchable] / [filterable] attributes are deprecated — do NOT emit them.
 - Place the toolbar ABOVE the <card-ui> containing the table-ui, or use [variant="card"] when standing alone outside a card-ui parent (the variant wraps the toolbar in card-style chrome).
 - Use slot="action" (or [slot="actions"]) for trailing primary buttons (Invite, Export, +New). Use [text] / [count] props for the left cluster, or slotted [slot="title"] / [slot="count"] when content is markup (a <span> + <badge-ui>, etc.).
-- Listen for toolbar events (`search`, `filter-change`, `sort-change`, `columns-change`) only to mirror state to URL / persistence / analytics. The toolbar already wires its changes into the bound table — you don't need to manually update the table.
+- Listen for toolbar events (`search`, `filter-change`, `sort-change`, `columns-change`, `page-size-change`) only to mirror state to URL / persistence / analytics. The toolbar already wires its changes into the bound table — you don't need to manually update the table.
+- Use [slot="scope"] for a leading scope/view switcher (an org's teams, a saved view) rendered before [text]/[count]. Use [range-start] / [range-end] / [range-total] together for a "Showing X–Y of N" summary — it renders independently of, and alongside, [text]/[count], never in place of them. Use [page-size] + [page-size-options] for a rows-per-page select; it applies directly to the bound table's [paginate] prop the same way filter/sort/columns changes apply directly to the target.
 
 ## Table
 - Canonical composition: wrap <table-ui> in <card-ui><section bleed> for edge-to-edge tables. The [bleed] removes section padding so columns span the full card width (see apps/saas/members, billing, admin-dashboard).
@@ -776,7 +769,7 @@
 - `step` is in seconds. 60 = minute precision (default); 900 = 15-minute precision (meeting-time common); 1 = second precision (requires `precision="second"`).
 - `precision="second"` exposes the seconds segment AND emits `HH:mm:ss`. Default `precision="minute"` emits `HH:mm`.
 - `hour-cycle` overrides locale-derived behavior. Set explicitly (`h12` / `h23`) when the surface needs a specific cycle (cron editors, log queries, system surfaces).
-- For datetime selection use `<datetime-picker-ui>` (SPEC-038) — it composes this primitive as its time pane.
+- For datetime selection use `<calendar-picker-ui precision="minute">` (SPEC-038; the former `<datetime-picker-ui>` thin alias was cut in 0.8.43, gh#1617) — it composes this primitive as its time pane.
 
 ## TimelineItem
 - Child of <timeline-ui> — one chronological event with timestamp + content + optional icon dot.
@@ -800,17 +793,6 @@
 - Headings missing an [id] receive an auto-generated slug from their text content. Existing ids are preserved.
 - Smooth-scroll on click is handled by the global `scroll-behavior: smooth` in resets.css (gated by prefers-reduced-motion). Do NOT add per-toc-ui smooth-scroll JS — the global wins.
 
-## ToggleGroup
-- DEPRECATED (gh#1369, #1363 C1) — generate <segmented-ui multiple> + <segment-ui> children instead when [single] is false/absent (the default, multi-select). When [single] is true, generate plain <segmented-ui> (no [multiple]) instead — single-select toggle-group maps to segmented's own single-select mode, not the multiple axis; note segmented-ui single-select never clears on re-click (toggle-group[single] does). Same comma-separated value encoding either way; toggle-group is kept working for existing consumers but should not appear in new generated output.
-- Multi-select button cluster — hosts <toggle-option-ui> children, each independently toggleable.
-- Use for filter chips, multi-flag toggles, day-of-week pickers; for binary on/off use <switch-ui>.
-- Sets the child <toggle-option-ui>'s declared [selected] prop to reflect the group value (ADR-0056) — do not author [selected] directly in generated markup; author the group's value instead.
-
-## ToggleOption
-- DEPRECATED (gh#1369, #1363 C1) — generate <segment-ui> instead, as a child of <segmented-ui multiple> (or plain <segmented-ui>, no [multiple], if the parent toggle-group had [single] — see toggle-group.yaml). toggle-option is kept working for existing consumers but should not appear in new generated output.
-- Child of <toggle-group-ui> — one independently-toggleable button in a multi-select cluster.
-- Selected state exposed via its own declared [selected] reflected prop, set by the parent <toggle-group-ui> (ADR-0056) — mirrors <segment-ui>'s convention. Do not set [selected] directly; drive the group's value instead.
-
 ## ToggleScheme
 - Place toggle-scheme-ui in the shell topbar's trailing action cluster — slot="action" inside <admin-topbar slot="header"> of <admin-content>. It is a persistent, app-wide preference control; never put it in a sidebar footer / <admin-statusbar>, which hosts user-account items only.
 - Stores user override in localStorage and writes color-scheme inline-style to the target; falls back to prefers-color-scheme if no override is set.
@@ -854,7 +836,7 @@
 
 ## Tree
 - Use <tree-ui> only when data is hierarchical with arbitrary nesting AND a single selected node is meaningful. For flat lists use <list-ui>; for flat sidebar navigation use <nav-ui>; for one-level collapsible groups use <accordion-ui>.
-- Canonical mount: inside <editor-sidebar slot="leading"> → <pane-ui side="leading" resizable> → <section> → <tree-ui id="…"> as the structure / navigator pane of the three-pane editor shell. Pair with a <header> in the same pane (e.g. "Structure", "Layers", "Files").
+- Canonical mount: inside <editor-sidebar slot="leading"> → <pane-ui edge="leading" resizable> → <section> → <tree-ui id="…"> as the structure / navigator pane of the three-pane editor shell. Pair with a <header> in the same pane (e.g. "Structure", "Layers", "Files").
 - Direct children of <tree-ui> MUST be <tree-item-ui>. No other element types in the default slot. <tree-ui> manages single-selection across the whole subtree and implements WAI-ARIA tree-view keyboard navigation (Arrow keys, Enter / Space, Home / End).
 - Listen for `tree-select` on the <tree-ui>, NOT on individual rows — selection is managed by the parent and bubbles once. Detail = {item, text, value, ctrlKey, metaKey, shiftKey}.
 - Per ADR-0027, <tree-ui> composes <icon-ui> (for carets) but does NOT auto-import its children. Consumer pages must explicitly import both <tree-ui> and <tree-item-ui>.
@@ -863,6 +845,7 @@
 - File-upload input with drop zone + browse button. Form-associated; emits file-list change events.
 - Multiple attribute enables multi-file selection; accept= constrains file types.
 - compact renders an icon-only trigger (no drop-zone chrome) — use in toolbars/dense rows; label becomes the trigger's aria-label. Programmatic triggering goes through the public .open() method, never the internal [data-dropzone] part.
+- A consumer's own Clear/Reset action empties the selection through the public .clear() method — it also runs automatically on native form reset.
 - For agent chat attachments use <chat-composer-ui>'s built-in upload affordance instead.
 
 ## VisuallyHidden
@@ -1186,7 +1169,7 @@ inside <grid-ui>; reach for the page composite only when search
 - admin-shell takes bespoke admin-* children only. The canonical composition is <admin-topbar> + <admin-sidebar slot="leading"> + <admin-content> + <admin-sidebar slot="trailing"> + <admin-command> + optional <admin-statusbar>. The shell's CSS grid reads child tag selectors to place them.
 - Don't nest col-ui / row-ui or generic layout primitives directly inside admin-shell — app-shell.css handles grid layout based on bespoke child tags. Generic layout goes inside <admin-content> or inside <admin-page-body>.
 - Click forwarding patterns — [data-sidebar-toggle="<name>"] on a button forwards to <admin-sidebar[slot="<name>"]>.toggle(); [data-command-trigger] on a button forwards to <admin-command>.show(). The shell doesn't need to know about the buttons; the bespoke children own the behavior.
-- Legacy data-attribute shapes were retired in v0.4.0 per ADR-0024. Do not author <aside data-sidebar>, <dialog data-command>, [data-resize], <aside-ui slot=>, <span data-spacer>, or <div data-actions> inside admin-shell.
+- Legacy data-attribute shapes were retired in v0.4.0 per ADR-0024. Do not author <aside data-sidebar>, <dialog data-command>, [data-sidebar-resize], <aside-ui slot=>, <span data-spacer>, or <div data-actions> inside admin-shell.
 
 ## AdminSidebar
 - admin-sidebar is the bespoke replacement for legacy <aside data-sidebar>. Use slot="leading" or slot="trailing" to position. Add resizable + collapsible attributes to opt in to interactive behaviors.

package/catalog/tier-index.json

@@ -1,14 +1,14 @@
 {
-  "catalogId": "adia.tiers@0.8.41",
+  "catalogId": "adia.tiers@0.8.43",
   "description": "Tier index of the AdiaUI catalog contract (ADR-0050). L0-L4 ladder; every tier-N entry is a declared composition of tier-(N-1) entries. L1 `composes` edges speak A2UI component TYPE names — the R-C7 catalogs’ `components` keys (genui-system SPEC R-C13). Derived — regenerate with `npm run build:catalog-tiers`, never hand-edit.",
   "extends": {
     "catalogId": "adia.base",
-    "version": "0.8.41"
+    "version": "0.8.43"
   },
   "tiers": {
     "L0": {
       "composesTier": null,
-      "count": 193,
+      "count": 189,
       "entries": {
         "A2UIRoot": {
           "category": "container",
@@ -352,17 +352,17 @@
           "origin": "primitive",
           "tag": "col-ui"
         },
-        "ColorInput": {
+        "ColorArea": {
           "category": "input",
           "composes": [],
           "origin": "primitive",
-          "tag": "color-input-ui"
+          "tag": "color-area-ui"
         },
-        "ColorPicker": {
+        "ColorInput": {
           "category": "input",
           "composes": [],
           "origin": "primitive",
-          "tag": "color-picker-ui"
+          "tag": "color-input-ui"
         },
         "Combobox": {
           "category": "input",
@@ -406,12 +406,6 @@
           "origin": "module",
           "tag": "date-range-selector-ui"
         },
-        "DatetimePicker": {
-          "category": "input",
-          "composes": [],
-          "origin": "primitive",
-          "tag": "datetime-picker-ui"
-        },
         "DemoToggle": {
           "category": "container",
           "composes": [],
@@ -820,12 +814,6 @@
           "origin": "primitive",
           "tag": "progress-ui"
         },
-        "ProgressRow": {
-          "category": "feedback",
-          "composes": [],
-          "origin": "primitive",
-          "tag": "progress-row-ui"
-        },
         "QRCode": {
           "category": "display",
           "composes": [],
@@ -1090,18 +1078,6 @@
           "origin": "primitive",
           "tag": "toast-ui"
         },
-        "ToggleGroup": {
-          "category": "navigation",
-          "composes": [],
-          "origin": "primitive",
-          "tag": "toggle-group-ui"
-        },
-        "ToggleOption": {
-          "category": "form",
-          "composes": [],
-          "origin": "primitive",
-          "tag": "toggle-option-ui"
-        },
         "ToggleScheme": {
           "category": "action",
           "composes": [],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/a2ui",
-  "version": "0.8.41",
+  "version": "0.8.43",
   "description": "The A2UI protocol — runtime (renderer, registry, streams, surface manifest, wiring primitives, dockable base classes) plus protocol-side validation. Framework-agnostic and dependency-free; pairs with any A2UI-conformant component set. Folded from @adia-ai/a2ui-runtime + the protocol half of @adia-ai/a2ui-validator (ADR-0048).",
   "type": "module",
   "exports": {

package/prop-apply.js

@@ -25,7 +25,16 @@
 
 // Props components read as a JS property (array/object), never a markup
 // string — see #JS_PROPS in renderer.js (kept in sync; this IS that set now).
-const JS_PROPS = new Set(['data', 'columns', 'options', 'itemRenderer', 'textContent']);
+// gh#1615 — `pageSizeOptions` (table-toolbar-ui) is the same dynamic
+// array-typed-prop shape as `data`/`columns` (a JSON-array attribute for
+// static HTML, a real JS array for the property setter): omitting it here
+// sent `String([10,25,50,100])` — `"10,25,50,100"`, Array.prototype.toString
+// joining with commas and no brackets — through the generic setAttribute
+// branch below, which table-toolbar-ui's own JSON.parse hydration then
+// silently rejected (caught by its own try/catch), leaving the page-size
+// select hidden with no error. Caught rendering table-toolbar-ui's own
+// docs-site demo through this exact runtime.
+const JS_PROPS = new Set(['data', 'columns', 'options', 'itemRenderer', 'textContent', 'pageSizeOptions']);
 
 // Tags where `el.textContent = value` is safe — pure text-bearing leaves.
 // On a container, textContent would wipe slotted + appended children.

package/registry.js

@@ -32,9 +32,11 @@ export const registry = new Map([
   ['Avatar',           'avatar-ui'],
   ['AvatarGroup',      'avatar-group-ui'],
   ['Progress',         'progress-ui'],
-  ['ProgressRow',      'progress-row-ui'],
+  // ProgressRow/progress-row-ui cut in 0.8.43 (gh#1617, gh#1373) — absorbed
+  // into Progress/progress-ui's own label/meta props.
   ['DateRangePicker',  'date-range-picker-ui'],
-  ['DatetimePicker',   'datetime-picker-ui'],
+  // DatetimePicker/datetime-picker-ui cut in 0.8.43 (gh#1617, gh#1372) —
+  // folded into CalendarPicker/calendar-picker-ui's precision axis.
   ['CalendarGrid',     'calendar-grid-ui'],
   ['CalendarPicker',   'calendar-picker-ui'],
   ['Combobox',         'combobox-ui'],
@@ -65,7 +67,9 @@ export const registry = new Map([
   ['RadioGroup',       'radio-group-ui'],
   ['DateTimeInput',    'calendar-picker-ui'],
   ['CalendarPicker',   'calendar-picker-ui'],
-  ['ColorPicker',      'color-picker-ui'],
+  ['ColorArea',        'color-area-ui'],
+  // ColorPicker/color-picker-ui cut in 0.8.43 (gh#1617, ADR-0063) — the
+  // component was a thin compat alias of ColorArea/color-area-ui.
   // Search deprecated — use Input type="search" prefix="magnifying-glass"
   ['Upload',           'upload-ui'],
   ['OtpInput',         'otp-input-ui'],
@@ -124,7 +128,9 @@ export const registry = new Map([
   ['Pagination',       'pagination-ui'],
   ['SegmentedControl', 'segmented-ui'],
   ['Segment',          'segment-ui'],
-  ['ToggleGroup',      'toggle-group-ui'],
+  // ToggleGroup/toggle-group-ui + ToggleOption/toggle-option-ui cut in
+  // 0.8.43 (gh#1617, gh#1369) — superseded by SegmentedControl[multiple]
+  // + Segment.
 
   // Utility
   ['Command',          'command-ui'],
@@ -187,7 +193,7 @@ export const registry = new Map([
   ['segment-ui',       'segment-ui'],
   ['command-ui',       'command-ui'],
   ['calendar-picker-ui', 'calendar-picker-ui'],
-  ['color-picker-ui',  'color-picker-ui'],
+  ['color-area-ui',    'color-area-ui'],
   ['kbd-ui',           'kbd-ui'],
   ['toolbar-ui',       'toolbar-ui'],
   ['otp-input-ui',     'otp-input-ui'],
@@ -344,7 +350,6 @@ export const registry = new Map([
   // surfaces above (GenRoot, SimpleShell, ThemePanel).
   ['ThemeProvider',     'theme-provider'],
   ['TimePicker',        'time-picker-ui'],
-  ['ToggleOption',      'toggle-option-ui'],
   ['ToggleScheme',      'toggle-scheme-ui'],
   ['Tree',              'tree-ui'],
   ['TreeItem',          'tree-item-ui'],

package/validate/validator.js

@@ -559,7 +559,7 @@ function checkComponentsHaveRenderableContent(components) {
     'CheckBox', 'Check', 'Toggle', 'Switch', 'Radio',
     'Select', 'ChoicePicker', 'Slider', 'Range', 'Rating',
     'Search', 'OtpInput', 'CalendarPicker', 'DateTimeInput',
-    'ColorPicker', 'Upload',
+    'ColorArea', 'Upload',
   ]);
   // Content-bearing props that satisfy the "renderable" requirement.
   const CONTENT_PROPS = ['label', 'placeholder', 'text', 'aria-label',
@@ -849,7 +849,7 @@ function checkIntentAlignment(components, intent) {
     'carousel':     ['Swiper'],
     'swiper':       ['Swiper'],
     'calendar':     ['CalendarPicker'],
-    'color picker': ['ColorPicker'],
+    'color picker': ['ColorArea'],
     'otp':          ['OtpInput'],
     'code':         ['Code'],
     'image':        ['Image'],