@adia-ai/a2ui 0.8.42 → 0.8.44

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -22,7 +22,7 @@
22
22
  - For navigation entries (route-changing) use <nav-item-ui> instead.
23
23
  - Use [variant="danger"] exclusively for destructive/irreversible actions (Delete, Remove). Pair danger items with an explicit confirm flow when the action cannot be undone.
24
24
  - 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).
25
- - NOTE (ADR-0063, gh#1571): [subtitle] is now a deprecated alias for [description] kept as a dual-read compat shim (new-name precedence, one-time console.warn), removed at the 0.9.0 cut.
25
+ - 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.
26
26
 
27
27
  ## ActionList
28
28
  - Hosts <action-item-ui> children as a vertical command list inline in content surfaces.
@@ -133,7 +133,7 @@
133
133
  - Canonical clickable affordance — text + optional icon. Variant attribute sets primary/secondary/ghost/destructive intent.
134
134
  - Do not repeat the icon's glyph in text=. Icon provides the symbol; text= carries only the words.
135
135
  - For navigation (route-change) use <nav-item-ui> or anchor; button-ui is for actions only.
136
- - 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).
136
+ - 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).
137
137
 
138
138
  ## CalendarGrid
139
139
  - 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.
@@ -167,7 +167,8 @@
167
167
  ## ChartLegend
168
168
  - Standalone legend primitive — a row of <badge-ui>+<swatch-ui> chips that are keyboard-focusable and click-toggleable.
169
169
  - Pairs with <chart-ui> via [for] id-ref (auto-bidirectional series toggling) or via items= for standalone use.
170
- - position attribute (top|bottom|left|right) places legend relative to its chart; static= disables interactivity.
170
+ - position attribute (top|bottom|left|right) places legend relative to its chart; interactive="false" disables interactivity.
171
+ - ratio attribute (3:2|1:1|2:3, ADR-0074) selects the legend layout shape (row/grid/list); left unset it auto-mirrors a [for]-bound chart's own resolved ratio.
171
172
 
172
173
  ## Chart
173
174
  - Declarative SVG chart supporting 18 types via the type attribute (bar, line, pie, donut, radar, area, ...).
@@ -205,7 +206,7 @@
205
206
  ## ColorArea
206
207
  - OKLCH-native color picker with 2D color area + H/C/L sliders. Form-associated; emits OKLCH color strings.
207
208
  - For simple color swatches (read-only display) use <swatch-ui>; for hex/rgb text input use <color-input-ui>.
208
- - Renamed from <color-picker-ui> (ADR-0063, gh#1563); the old tag is a deprecated alias that still works new generation should reach for ColorArea directly.
209
+ - 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.
209
210
  - Output format defaults to oklch(); set format= to override (hex, rgb, hsl).
210
211
 
211
212
  ## ColorInput
@@ -215,10 +216,6 @@
215
216
  - 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>.
216
217
  - 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.
217
218
 
218
- ## ColorPicker
219
- - DEPRECATED — prefer `{"component": "ColorArea"}` over `{"component": "ColorPicker"}`. Both render and behave identically; ColorPicker is a thin compatibility alias.
220
- - For simple color swatches (read-only display) use <swatch-ui>; for hex/rgb text input use <color-input-ui>.
221
-
222
219
  ## Combobox
223
220
  - 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.
224
221
  - 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>.
@@ -244,12 +241,6 @@
244
241
  - presets array entries each require both `label` (string) and `range` (`{from, to}`). Empty preset arrays are valid (rail renders empty).
245
242
  - Use DateRangePicker for date ranges. Do NOT compose two adjacent `<calendar-picker-ui>` instances + JS synchronization — that is the pattern this primitive replaces.
246
243
 
247
- ## DatetimePicker
248
- - DEPRECATED — prefer `{"component": "CalendarPicker", "precision": "minute"}` (or `"second"`) over `{"component": "DatetimePicker"}`. Both render and behave identically; DatetimePicker is a thin compatibility alias.
249
- - `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`.
250
- - `min` and `max` MUST be parseable ISO 8601 datetimes if non-empty. If `value` falls outside, `invalid` fires and the value does not commit.
251
- - Per ADR-0025 NEVER wrap a native `<input type="datetime-local">` — the calendar pane + time pane composition + ElementInternals together provide form participation.
252
-
253
244
  ## DemoToggle
254
245
  - Demo-page-only — toggles between live and code views in component documentation surfaces.
255
246
  - Do not use in apps/ — restrict to packages/web-components/components/*/<name>.html demo pages and docs surfaces.
@@ -376,11 +367,11 @@
376
367
 
377
368
  ## Input
378
369
  - <input-ui> is the canonical single-line text input. The host IS the contenteditable surface — NEVER wrap a native <input>. The sole exception is type="password", which internally uses a real <input type="password"> for masking (per ADR-0025).
379
- - Wrap <input-ui> in <field-ui label="…" hint="…" error="…"> for the canonical stacked label / hint / error chrome. The inline [label] / [hint] / [error] props are also supported on the primitive for compact use.
370
+ - Wrap <input-ui> in <field-ui label="…" hint="…" error="…"> for the canonical stacked label / hint / error chrome. input-ui itself only supports inline [label] / [error] (gh#1669 [hint] is a field-ui-only prop; input-ui has no equivalent) use field-ui when a hint line is needed.
380
371
  - 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).
381
372
  - 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">.
382
373
  - 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.
383
- - 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.
374
+ - 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.
384
375
 
385
376
  ## Inspector
386
377
  - Developer-tools pane for A2UI runtime state — composes <tabs-ui> + <code-ui> internally.
@@ -453,7 +444,7 @@
453
444
  - 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.
454
445
  - 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`.
455
446
  - 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).
456
- - <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). NOTE (ADR-0063, gh#1563): <menu-item-ui>'s own `subtitle` PROP is now a deprecated alias for `description` <action-item-ui> still uses `subtitle` as its own primary spelling and was NOT renamed in this pass (flagged as a discovered follow-up candidate, not fixed here).
447
+ - <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.
457
448
 
458
449
  ## MenuLabel
459
450
  - <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.
@@ -533,10 +524,10 @@
533
524
  - Page-number range auto-truncates with ellipsis for high counts; set siblings= to control visible window size.
534
525
 
535
526
  ## Pane
536
- - 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.
527
+ - 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.
537
528
  - 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>.
538
529
  - 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.
539
- - 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.
530
+ - 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.
540
531
 
541
532
  ## PasswordStrength
542
533
  - 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.
@@ -561,10 +552,6 @@
561
552
  - 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.
562
553
  - 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.
563
554
 
564
- ## ProgressRow
565
- - DEPRECATED — do not generate ProgressRow. Set `label` (and optional `meta`) directly on <progress-ui> instead; label present activates the identical row layout.
566
- - For standalone progress bars without a row context use <progress-ui> directly (no `label`).
567
-
568
555
  ## Progress
569
556
  - Use for in-progress task feedback with known or indeterminate state. Value < 0 = indeterminate animation.
570
557
  - 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.
@@ -625,12 +612,12 @@
625
612
 
626
613
  ## Segment
627
614
  - 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.
628
- - <toggle-option-ui> (deprecated, gh#1369) is the same concept — use segment-ui inside <segmented-ui multiple> instead.
615
+ - <toggle-option-ui> (cut in 0.8.43, gh#1617, gh#1369) was the same concept — use segment-ui inside <segmented-ui multiple> instead.
629
616
  - 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.
630
617
 
631
618
  ## Segmented
632
619
  - Single-select by default. Hosts <segment-ui> children; exactly one selected at a time.
633
- - 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).
620
+ - 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).
634
621
  - 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>.
635
622
 
636
623
  ## Select
@@ -677,7 +664,7 @@
677
664
  ## StepProgress
678
665
  - Compact step indicator — N dots/segments showing current step out of total.
679
666
  - Different from <stepper-ui> (labeled, expanded) — step-progress is dense and label-free.
680
- - 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).
667
+ - 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).
681
668
 
682
669
  ## StepperItem
683
670
  - Child of <stepper-ui> — one numbered step with label + complete/current/upcoming state.
@@ -718,7 +705,12 @@
718
705
  - 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.
719
706
  - 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).
720
707
  - 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.).
721
- - 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.
708
+ - 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.
709
+ - 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.
710
+ - Use [slot="actions-leading"] (gh#1649) for app-owned trigger buttons that must land BEFORE the page-size select — e.g. custom Filter / Columns triggers that open the consumer's own drawer instead of the native filter/columns popovers (drop [no-filter] [no-columns] to hide the native ones when doing this). [slot="actions"] stays the trailing region AFTER the page-size select, for a primary CTA.
711
+ - Use [chrome-only] (ADR-0076, ADIA2-9123) instead of stacking [no-filter] [no-sort] [no-columns] [no-search] individually when an app owns ALL FOUR affordances itself (its own drawer/menu). Pure OR, absolute while set — clearing an individual no-* attribute does NOT re-enable that one control; drop [chrome-only] entirely and set the three you still want off explicitly instead. Combine with [slot="actions-leading"] for the app's own Filter/Columns triggers.
712
+ - Use <span slot="empty"> (or any markup) inside a table-toolbar-ui that also sets [range-total="0"] to show a "no results" message in the range-summary's own position, without a layout shift versus the normal "Showing X-Y of N" text (ADR-0076, REQ-E). Only fires on an EXPLICIT range-total="0" — omitting range-* entirely (loading) never shows it.
713
+ - Read the host's [data-stage-resolved] attribute (ADR-0076 REQ-M-005, ADIA2-9123 S4-ii) to compact a consumer's own [slot="actions-leading"] content in sympathy with table-toolbar's native regions, without re-deriving the same breakpoints yourself. Informational only — mirrors the CSS-decided compaction stage (full | search-tight | icon-only | overflow), never drives table-toolbar's own rendering. Reports the pinned [stage] value when set, the live width classification otherwise; updates on both a live resize and a [stage] attribute change.
722
714
 
723
715
  ## Table
724
716
  - 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).
@@ -782,7 +774,7 @@
782
774
  - `step` is in seconds. 60 = minute precision (default); 900 = 15-minute precision (meeting-time common); 1 = second precision (requires `precision="second"`).
783
775
  - `precision="second"` exposes the seconds segment AND emits `HH:mm:ss`. Default `precision="minute"` emits `HH:mm`.
784
776
  - `hour-cycle` overrides locale-derived behavior. Set explicitly (`h12` / `h23`) when the surface needs a specific cycle (cron editors, log queries, system surfaces).
785
- - For datetime selection use `<datetime-picker-ui>` (SPEC-038) — it composes this primitive as its time pane.
777
+ - 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.
786
778
 
787
779
  ## TimelineItem
788
780
  - Child of <timeline-ui> — one chronological event with timestamp + content + optional icon dot.
@@ -806,17 +798,6 @@
806
798
  - Headings missing an [id] receive an auto-generated slug from their text content. Existing ids are preserved.
807
799
  - 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.
808
800
 
809
- ## ToggleGroup
810
- - 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.
811
- - Multi-select button cluster — hosts <toggle-option-ui> children, each independently toggleable.
812
- - Use for filter chips, multi-flag toggles, day-of-week pickers; for binary on/off use <switch-ui>.
813
- - 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.
814
-
815
- ## ToggleOption
816
- - 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.
817
- - Child of <toggle-group-ui> — one independently-toggleable button in a multi-select cluster.
818
- - 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.
819
-
820
801
  ## ToggleScheme
821
802
  - 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.
822
803
  - 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.
@@ -860,7 +841,7 @@
860
841
 
861
842
  ## Tree
862
843
  - 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>.
863
- - 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").
844
+ - 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").
864
845
  - 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).
865
846
  - 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}.
866
847
  - 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>.
@@ -869,6 +850,7 @@
869
850
  - File-upload input with drop zone + browse button. Form-associated; emits file-list change events.
870
851
  - Multiple attribute enables multi-file selection; accept= constrains file types.
871
852
  - 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.
853
+ - A consumer's own Clear/Reset action empties the selection through the public .clear() method — it also runs automatically on native form reset.
872
854
  - For agent chat attachments use <chat-composer-ui>'s built-in upload affordance instead.
873
855
 
874
856
  ## VisuallyHidden
@@ -1,14 +1,14 @@
1
1
  {
2
- "catalogId": "adia.tiers@0.8.42",
2
+ "catalogId": "adia.tiers@0.8.44",
3
3
  "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.",
4
4
  "extends": {
5
5
  "catalogId": "adia.base",
6
- "version": "0.8.42"
6
+ "version": "0.8.44"
7
7
  },
8
8
  "tiers": {
9
9
  "L0": {
10
10
  "composesTier": null,
11
- "count": 194,
11
+ "count": 189,
12
12
  "entries": {
13
13
  "A2UIRoot": {
14
14
  "category": "container",
@@ -364,12 +364,6 @@
364
364
  "origin": "primitive",
365
365
  "tag": "color-input-ui"
366
366
  },
367
- "ColorPicker": {
368
- "category": "input",
369
- "composes": [],
370
- "origin": "primitive",
371
- "tag": "color-picker-ui"
372
- },
373
367
  "Combobox": {
374
368
  "category": "input",
375
369
  "composes": [],
@@ -412,12 +406,6 @@
412
406
  "origin": "module",
413
407
  "tag": "date-range-selector-ui"
414
408
  },
415
- "DatetimePicker": {
416
- "category": "input",
417
- "composes": [],
418
- "origin": "primitive",
419
- "tag": "datetime-picker-ui"
420
- },
421
409
  "DemoToggle": {
422
410
  "category": "container",
423
411
  "composes": [],
@@ -826,12 +814,6 @@
826
814
  "origin": "primitive",
827
815
  "tag": "progress-ui"
828
816
  },
829
- "ProgressRow": {
830
- "category": "feedback",
831
- "composes": [],
832
- "origin": "primitive",
833
- "tag": "progress-row-ui"
834
- },
835
817
  "QRCode": {
836
818
  "category": "display",
837
819
  "composes": [],
@@ -1096,18 +1078,6 @@
1096
1078
  "origin": "primitive",
1097
1079
  "tag": "toast-ui"
1098
1080
  },
1099
- "ToggleGroup": {
1100
- "category": "navigation",
1101
- "composes": [],
1102
- "origin": "primitive",
1103
- "tag": "toggle-group-ui"
1104
- },
1105
- "ToggleOption": {
1106
- "category": "form",
1107
- "composes": [],
1108
- "origin": "primitive",
1109
- "tag": "toggle-option-ui"
1110
- },
1111
1081
  "ToggleScheme": {
1112
1082
  "category": "action",
1113
1083
  "composes": [],
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@adia-ai/a2ui",
3
- "version": "0.8.42",
3
+ "version": "0.8.44",
4
4
  "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).",
5
5
  "type": "module",
6
6
  "exports": {
package/prop-apply.js CHANGED
@@ -25,7 +25,16 @@
25
25
 
26
26
  // Props components read as a JS property (array/object), never a markup
27
27
  // string — see #JS_PROPS in renderer.js (kept in sync; this IS that set now).
28
- const JS_PROPS = new Set(['data', 'columns', 'options', 'itemRenderer', 'textContent']);
28
+ // gh#1615 `pageSizeOptions` (table-toolbar-ui) is the same dynamic
29
+ // array-typed-prop shape as `data`/`columns` (a JSON-array attribute for
30
+ // static HTML, a real JS array for the property setter): omitting it here
31
+ // sent `String([10,25,50,100])` — `"10,25,50,100"`, Array.prototype.toString
32
+ // joining with commas and no brackets — through the generic setAttribute
33
+ // branch below, which table-toolbar-ui's own JSON.parse hydration then
34
+ // silently rejected (caught by its own try/catch), leaving the page-size
35
+ // select hidden with no error. Caught rendering table-toolbar-ui's own
36
+ // docs-site demo through this exact runtime.
37
+ const JS_PROPS = new Set(['data', 'columns', 'options', 'itemRenderer', 'textContent', 'pageSizeOptions']);
29
38
 
30
39
  // Tags where `el.textContent = value` is safe — pure text-bearing leaves.
31
40
  // On a container, textContent would wipe slotted + appended children.
package/registry.js CHANGED
@@ -32,9 +32,11 @@ export const registry = new Map([
32
32
  ['Avatar', 'avatar-ui'],
33
33
  ['AvatarGroup', 'avatar-group-ui'],
34
34
  ['Progress', 'progress-ui'],
35
- ['ProgressRow', 'progress-row-ui'],
35
+ // ProgressRow/progress-row-ui cut in 0.8.43 (gh#1617, gh#1373) — absorbed
36
+ // into Progress/progress-ui's own label/meta props.
36
37
  ['DateRangePicker', 'date-range-picker-ui'],
37
- ['DatetimePicker', 'datetime-picker-ui'],
38
+ // DatetimePicker/datetime-picker-ui cut in 0.8.43 (gh#1617, gh#1372) —
39
+ // folded into CalendarPicker/calendar-picker-ui's precision axis.
38
40
  ['CalendarGrid', 'calendar-grid-ui'],
39
41
  ['CalendarPicker', 'calendar-picker-ui'],
40
42
  ['Combobox', 'combobox-ui'],
@@ -66,7 +68,8 @@ export const registry = new Map([
66
68
  ['DateTimeInput', 'calendar-picker-ui'],
67
69
  ['CalendarPicker', 'calendar-picker-ui'],
68
70
  ['ColorArea', 'color-area-ui'],
69
- ['ColorPicker', 'color-picker-ui'],
71
+ // ColorPicker/color-picker-ui cut in 0.8.43 (gh#1617, ADR-0063) — the
72
+ // component was a thin compat alias of ColorArea/color-area-ui.
70
73
  // Search deprecated — use Input type="search" prefix="magnifying-glass"
71
74
  ['Upload', 'upload-ui'],
72
75
  ['OtpInput', 'otp-input-ui'],
@@ -125,7 +128,9 @@ export const registry = new Map([
125
128
  ['Pagination', 'pagination-ui'],
126
129
  ['SegmentedControl', 'segmented-ui'],
127
130
  ['Segment', 'segment-ui'],
128
- ['ToggleGroup', 'toggle-group-ui'],
131
+ // ToggleGroup/toggle-group-ui + ToggleOption/toggle-option-ui cut in
132
+ // 0.8.43 (gh#1617, gh#1369) — superseded by SegmentedControl[multiple]
133
+ // + Segment.
129
134
 
130
135
  // Utility
131
136
  ['Command', 'command-ui'],
@@ -189,7 +194,6 @@ export const registry = new Map([
189
194
  ['command-ui', 'command-ui'],
190
195
  ['calendar-picker-ui', 'calendar-picker-ui'],
191
196
  ['color-area-ui', 'color-area-ui'],
192
- ['color-picker-ui', 'color-picker-ui'],
193
197
  ['kbd-ui', 'kbd-ui'],
194
198
  ['toolbar-ui', 'toolbar-ui'],
195
199
  ['otp-input-ui', 'otp-input-ui'],
@@ -346,7 +350,6 @@ export const registry = new Map([
346
350
  // surfaces above (GenRoot, SimpleShell, ThemePanel).
347
351
  ['ThemeProvider', 'theme-provider'],
348
352
  ['TimePicker', 'time-picker-ui'],
349
- ['ToggleOption', 'toggle-option-ui'],
350
353
  ['ToggleScheme', 'toggle-scheme-ui'],
351
354
  ['Tree', 'tree-ui'],
352
355
  ['TreeItem', 'tree-item-ui'],
@@ -559,7 +559,7 @@ function checkComponentsHaveRenderableContent(components) {
559
559
  'CheckBox', 'Check', 'Toggle', 'Switch', 'Radio',
560
560
  'Select', 'ChoicePicker', 'Slider', 'Range', 'Rating',
561
561
  'Search', 'OtpInput', 'CalendarPicker', 'DateTimeInput',
562
- 'ColorPicker', 'Upload',
562
+ 'ColorArea', 'Upload',
563
563
  ]);
564
564
  // Content-bearing props that satisfy the "renderable" requirement.
565
565
  const CONTENT_PROPS = ['label', 'placeholder', 'text', 'aria-label',
@@ -849,7 +849,7 @@ function checkIntentAlignment(components, intent) {
849
849
  'carousel': ['Swiper'],
850
850
  'swiper': ['Swiper'],
851
851
  'calendar': ['CalendarPicker'],
852
- 'color picker': ['ColorPicker'],
852
+ 'color picker': ['ColorArea'],
853
853
  'otp': ['OtpInput'],
854
854
  'code': ['Code'],
855
855
  'image': ['Image'],