@adia-ai/web-components 0.8.42 → 0.8.43

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.
Files changed (121) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/MIGRATION.md +130 -80
  3. package/USAGE.md +1 -1
  4. package/color/index.js +1 -1
  5. package/components/action-list/action-item.a2ui.json +3 -8
  6. package/components/action-list/action-item.yaml +10 -16
  7. package/components/action-list/action-list.class.js +5 -61
  8. package/components/action-list/action-list.d.ts +1 -3
  9. package/components/button/button.yaml +1 -1
  10. package/components/calendar-picker/calendar-picker.a2ui.json +1 -1
  11. package/components/calendar-picker/calendar-picker.class.js +2 -3
  12. package/components/calendar-picker/calendar-picker.css +16 -18
  13. package/components/calendar-picker/calendar-picker.yaml +2 -2
  14. package/components/card/card.css +3 -3
  15. package/components/chart/chart.a2ui.json +3 -18
  16. package/components/chart/chart.class.js +4 -44
  17. package/components/chart/chart.d.ts +3 -9
  18. package/components/chart/chart.yaml +6 -31
  19. package/components/chart-legend/chart-legend.a2ui.json +3 -12
  20. package/components/chart-legend/chart-legend.class.js +10 -54
  21. package/components/chart-legend/chart-legend.d.ts +1 -3
  22. package/components/chart-legend/chart-legend.yaml +9 -19
  23. package/components/check/check.css +9 -0
  24. package/components/color-area/color-area.a2ui.json +1 -1
  25. package/components/color-area/color-area.class.js +2 -2
  26. package/components/color-area/color-area.css +4 -7
  27. package/components/color-area/color-area.d.ts +1 -1
  28. package/components/color-area/color-area.yaml +3 -3
  29. package/components/color-input/color-input.a2ui.json +1 -1
  30. package/components/color-input/color-input.class.js +1 -1
  31. package/components/color-input/color-input.yaml +2 -2
  32. package/components/drilldown/drilldown.a2ui.json +3 -0
  33. package/components/drilldown/drilldown.css +8 -1
  34. package/components/drilldown/drilldown.yaml +2 -0
  35. package/components/field/field.class.js +5 -5
  36. package/components/index.js +0 -4
  37. package/components/input/input.a2ui.json +4 -4
  38. package/components/input/input.class.js +8 -0
  39. package/components/input/input.css +6 -0
  40. package/components/input/input.yaml +11 -8
  41. package/components/menu/menu-item.a2ui.json +3 -8
  42. package/components/menu/menu-item.yaml +13 -21
  43. package/components/menu/menu.class.js +5 -27
  44. package/components/menu/menu.d.ts +1 -3
  45. package/components/pane/pane.a2ui.json +2 -12
  46. package/components/pane/pane.class.js +5 -30
  47. package/components/pane/pane.d.ts +3 -5
  48. package/components/pane/pane.yaml +7 -19
  49. package/components/progress/progress.a2ui.json +1 -1
  50. package/components/progress/progress.class.js +2 -2
  51. package/components/progress/progress.d.ts +1 -1
  52. package/components/progress/progress.yaml +2 -2
  53. package/components/radio/radio.css +7 -0
  54. package/components/search/search.css +10 -1
  55. package/components/segment/segment.a2ui.json +1 -2
  56. package/components/segment/segment.css +10 -0
  57. package/components/segment/segment.yaml +1 -2
  58. package/components/segmented/segmented.a2ui.json +1 -3
  59. package/components/segmented/segmented.class.js +2 -2
  60. package/components/segmented/segmented.yaml +2 -4
  61. package/components/select/select.css +6 -0
  62. package/components/step-progress/step-progress.yaml +1 -1
  63. package/components/switch/switch.css +8 -0
  64. package/components/table-toolbar/table-toolbar.a2ui.json +42 -1
  65. package/components/table-toolbar/table-toolbar.class.js +151 -11
  66. package/components/table-toolbar/table-toolbar.css +46 -0
  67. package/components/table-toolbar/table-toolbar.d.ts +13 -1
  68. package/components/table-toolbar/table-toolbar.yaml +104 -14
  69. package/components/textarea/textarea.css +4 -0
  70. package/components/time-picker/time-picker.yaml +3 -2
  71. package/components/tree/tree.yaml +1 -1
  72. package/components/upload/upload.class.js +16 -0
  73. package/components/upload/upload.d.ts +7 -0
  74. package/components/upload/upload.yaml +7 -3
  75. package/core/icons.js +2 -5
  76. package/custom-elements.json +101 -597
  77. package/dist/host.min.css +1 -1
  78. package/dist/host.sheet.js +1 -1
  79. package/dist/theme-provider.min.js +1 -1
  80. package/dist/web-components.min.css +1 -1
  81. package/dist/web-components.min.js +92 -89
  82. package/dist/web-components.sheet.js +1 -1
  83. package/index.d.ts +0 -15
  84. package/package.json +1 -1
  85. package/patterns/chart-in-card/chart-in-card.examples.html +10 -10
  86. package/patterns/conversion-funnel/conversion-funnel.html +2 -2
  87. package/patterns/editor-shell/editor-shell.examples.html +3 -3
  88. package/styles/colors/semantics/features.css +8 -1
  89. package/styles/components.css +0 -4
  90. package/traits/arrow-grid-nav/arrow-grid-nav.js +1 -1
  91. package/traits/resize-observer/resize-observer.js +1 -1
  92. package/components/color-picker/color-picker.a2ui.json +0 -148
  93. package/components/color-picker/color-picker.class.js +0 -46
  94. package/components/color-picker/color-picker.css +0 -14
  95. package/components/color-picker/color-picker.d.ts +0 -99
  96. package/components/color-picker/color-picker.examples.md +0 -19
  97. package/components/color-picker/color-picker.js +0 -17
  98. package/components/color-picker/color-picker.yaml +0 -175
  99. package/components/datetime-picker/datetime-picker.a2ui.json +0 -256
  100. package/components/datetime-picker/datetime-picker.class.js +0 -58
  101. package/components/datetime-picker/datetime-picker.css +0 -11
  102. package/components/datetime-picker/datetime-picker.d.ts +0 -87
  103. package/components/datetime-picker/datetime-picker.examples.md +0 -25
  104. package/components/datetime-picker/datetime-picker.js +0 -17
  105. package/components/datetime-picker/datetime-picker.yaml +0 -254
  106. package/components/progress-row/progress-row.a2ui.json +0 -107
  107. package/components/progress-row/progress-row.class.js +0 -118
  108. package/components/progress-row/progress-row.css +0 -60
  109. package/components/progress-row/progress-row.d.ts +0 -24
  110. package/components/progress-row/progress-row.examples.md +0 -7
  111. package/components/progress-row/progress-row.js +0 -17
  112. package/components/progress-row/progress-row.yaml +0 -85
  113. package/components/toggle-group/toggle-group.a2ui.json +0 -148
  114. package/components/toggle-group/toggle-group.class.js +0 -195
  115. package/components/toggle-group/toggle-group.css +0 -127
  116. package/components/toggle-group/toggle-group.d.ts +0 -50
  117. package/components/toggle-group/toggle-group.examples.md +0 -33
  118. package/components/toggle-group/toggle-group.js +0 -18
  119. package/components/toggle-group/toggle-group.yaml +0 -135
  120. package/components/toggle-group/toggle-option.a2ui.json +0 -86
  121. package/components/toggle-group/toggle-option.yaml +0 -75
@@ -17,6 +17,14 @@ check-ui[indeterminate] [slot="box"] {
17
17
  background: var(--check-bg-checked);
18
18
  border-color: var(--check-border-checked);
19
19
  }
20
+ /* gh#1596 — a checked/indeterminate box kept its full primary fill when
21
+ disabled (only the label fg dimmed); higher specificity (2 attrs) than
22
+ the rule above wins without reordering. */
23
+ check-ui[checked][disabled] [slot="box"],
24
+ check-ui[indeterminate][disabled] [slot="box"] {
25
+ background: var(--check-bg-checked-disabled);
26
+ border-color: var(--check-bg-checked-disabled);
27
+ }
20
28
  check-ui[checked] {
21
29
  --_icon-w: calc(var(--check-size) * 0.3);
22
30
  --_icon-h: calc(var(--check-size) * 0.55);
@@ -61,6 +69,7 @@ check-ui[indeterminate] {
61
69
 
62
70
  /* ── State: disabled ── */
63
71
  --check-fg-disabled: var(--a-ui-text-disabled);
72
+ --check-bg-checked-disabled: var(--a-ui-bg-disabled);
64
73
 
65
74
  /* ── Check icon (CSS border trick, no SVG) ── */
66
75
  --_icon-w: 0;
@@ -2,7 +2,7 @@
2
2
  "$schema": "https://json-schema.org/draft/2020-12/schema",
3
3
  "$id": "https://adiaui.dev/a2ui/v0_9/components/ColorArea.json",
4
4
  "title": "ColorArea",
5
- "description": "OKLCH-native color picker with 2D area and H/C/L sliders. Form-associated input emitting OKLCH color strings; canonical color authoring surface in the AdiaUI token system. Use for color input in design tools or theming UIs; for simple color swatches use <swatch-ui> or <color-input-ui> instead. Renamed from `<color-picker-ui>` (ADR-0063, gh#1563 — `-picker` is reserved for the outer trigger + popover composite shape; this is the inline substrate, mirroring <calendar-grid-ui>'s naming precedent). `<color-picker-ui>` is now a thin deprecated alias subclassing this component.",
5
+ "description": "OKLCH-native color picker with 2D area and H/C/L sliders. Form-associated input emitting OKLCH color strings; canonical color authoring surface in the AdiaUI token system. Use for color input in design tools or theming UIs; for simple color swatches use <swatch-ui> or <color-input-ui> instead. Renamed from `<color-picker-ui>` (ADR-0063, gh#1563 — `-picker` is reserved for the outer trigger + popover composite shape; this is the inline substrate, mirroring <calendar-grid-ui>'s naming precedent). `<color-picker-ui>` was cut in 0.8.43 (gh#1617) this is the sole tag now.",
6
6
  "type": "object",
7
7
  "allOf": [
8
8
  {
@@ -15,8 +15,8 @@
15
15
  * <color-area-ui value="#3b82f6" format="hex"></color-area-ui>
16
16
  *
17
17
  * OKLCH-native color picker with 2D area + H/C/L sliders (ADR-0063,
18
- * gh#1563 — renamed from `<color-picker-ui>`, which is now a thin
19
- * deprecated alias subclassing this class; see ../color-picker/color-picker.class.js).
18
+ * gh#1563 — renamed from `<color-picker-ui>`, which was cut in 0.8.43,
19
+ * gh#1617; this is the sole tag now).
20
20
  *
21
21
  * Layout:
22
22
  * [═══════════ color area (chroma x lightness) ═══════════]
@@ -1,10 +1,7 @@
1
- /* ADR-0063 (gh#1563) — `@scope` matches by literal tag name, not JS
2
- * prototype chain: `<color-picker-ui>` subclasses `UIColorArea` (see
3
- * ../color-picker/color-picker.class.js) but needs its OWN tag named in
4
- * this scope root to actually receive the styling — same shape as
5
- * calendar-picker.css's `@scope (calendar-picker-ui, datetime-picker-ui)`
6
- * for its own deprecated alias. */
7
- @scope (color-area-ui, color-picker-ui) {
1
+ /* ADR-0063 (gh#1563) — `color-picker-ui` was a thin alias subclassing
2
+ * `UIColorArea`; cut in 0.8.43 (gh#1617). `color-area-ui` is the sole tag
3
+ * now. */
4
+ @scope (color-area-ui) {
8
5
  :where(:scope) {
9
6
  /* ── Tokens ── */
10
7
  --color-area-gap: var(--a-space-2);
@@ -1,5 +1,5 @@
1
1
  /**
2
- * `<color-area-ui>` — OKLCH-native color picker with 2D area and H/C/L sliders. Form-associated input emitting OKLCH color strings; canonical color authoring surface in the AdiaUI token system. Use for color input in design tools or theming UIs; for simple color swatches use <swatch-ui> or <color-input-ui> instead. Renamed from `<color-picker-ui>` (ADR-0063, gh#1563 — `-picker` is reserved for the outer trigger + popover composite shape; this is the inline substrate, mirroring <calendar-grid-ui>'s naming precedent). `<color-picker-ui>` is now a thin deprecated alias subclassing this component.
2
+ * `<color-area-ui>` — OKLCH-native color picker with 2D area and H/C/L sliders. Form-associated input emitting OKLCH color strings; canonical color authoring surface in the AdiaUI token system. Use for color input in design tools or theming UIs; for simple color swatches use <swatch-ui> or <color-input-ui> instead. Renamed from `<color-picker-ui>` (ADR-0063, gh#1563 — `-picker` is reserved for the outer trigger + popover composite shape; this is the inline substrate, mirroring <calendar-grid-ui>'s naming precedent). `<color-picker-ui>` was cut in 0.8.43 (gh#1617) this is the sole tag now.
3
3
  *
4
4
  * @see https://ui-kit.exe.xyz/site/components/color-area
5
5
  *
@@ -15,8 +15,8 @@ description: >-
15
15
  or <color-input-ui> instead. Renamed from `<color-picker-ui>`
16
16
  (ADR-0063, gh#1563 — `-picker` is reserved for the outer trigger +
17
17
  popover composite shape; this is the inline substrate, mirroring
18
- <calendar-grid-ui>'s naming precedent). `<color-picker-ui>` is now a
19
- thin deprecated alias subclassing this component.
18
+ <calendar-grid-ui>'s naming precedent). `<color-picker-ui>` was cut in
19
+ 0.8.43 (gh#1617) this is the sole tag now.
20
20
  # Per ADR-0027 — primitives that programmatically create other primitives
21
21
  # do NOT auto-import them. Consumer (or demo shell) must explicitly import.
22
22
  composes:
@@ -115,7 +115,7 @@ a2ui:
115
115
  reason: 'Canonical color-authoring surface.'
116
116
  - rule: 'For simple color swatches (read-only display) use <swatch-ui>; for hex/rgb text input use <color-input-ui>.'
117
117
  reason: 'Surface boundary.'
118
- - rule: '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.'
118
+ - rule: '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.'
119
119
  reason: 'Picker-naming convention: -picker names the outer trigger+popover composite, never the inline substrate.'
120
120
  - rule: 'Output format defaults to oklch(); set format= to override (hex, rgb, hsl).'
121
121
  reason: 'Format knob.'
@@ -2,7 +2,7 @@
2
2
  "$schema": "https://json-schema.org/draft/2020-12/schema",
3
3
  "$id": "https://adiaui.dev/a2ui/v0_9/components/ColorInput.json",
4
4
  "title": "ColorInput",
5
- "description": "Compact form-bearing color input — opens a popover-anchored\n`<color-area-ui>` from an inline swatch button. §302 (v0.5.12,\nFEEDBACK-29 re-bucket from v0.6.0). Canonicalizes the USAGE.md §221f\nOption B recipe (popover + button + color-area) into a single\nform-associated tag for inline form contexts (settings drawer \"source\ncolor\" field, swatch-row inline-edit, etc.). Composes `<color-area-ui>`\n(ADR-0063, gh#1563 — renamed from `<color-picker-ui>`, which is now a\ndeprecated alias); `color-input-ui`'s own tag/name is unaffected.",
5
+ "description": "Compact form-bearing color input — opens a popover-anchored\n`<color-area-ui>` from an inline swatch button. §302 (v0.5.12,\nFEEDBACK-29 re-bucket from v0.6.0). Canonicalizes the USAGE.md §221f\nOption B recipe (popover + button + color-area) into a single\nform-associated tag for inline form contexts (settings drawer \"source\ncolor\" field, swatch-row inline-edit, etc.). Composes `<color-area-ui>`\n(ADR-0063, gh#1563 — renamed from `<color-picker-ui>`, cut in 0.8.43,\ngh#1617); `color-input-ui`'s own tag/name is unaffected.",
6
6
  "type": "object",
7
7
  "allOf": [
8
8
  {
@@ -32,7 +32,7 @@
32
32
  * </color-input-ui>
33
33
  *
34
34
  * Composes `<color-area-ui>` (ADR-0063, gh#1563 — renamed from
35
- * `<color-picker-ui>`, which is now a deprecated alias).
35
+ * `<color-picker-ui>`, cut in 0.8.43, gh#1617).
36
36
  *
37
37
  * Form-associated via UIFormElement + ElementInternals.
38
38
  */
@@ -12,8 +12,8 @@ description: |-
12
12
  Option B recipe (popover + button + color-area) into a single
13
13
  form-associated tag for inline form contexts (settings drawer "source
14
14
  color" field, swatch-row inline-edit, etc.). Composes `<color-area-ui>`
15
- (ADR-0063, gh#1563 — renamed from `<color-picker-ui>`, which is now a
16
- deprecated alias); `color-input-ui`'s own tag/name is unaffected.
15
+ (ADR-0063, gh#1563 — renamed from `<color-picker-ui>`, cut in 0.8.43,
16
+ gh#1617); `color-input-ui`'s own tag/name is unaffected.
17
17
  # Per ADR-0027 — primitives that programmatically create other primitives
18
18
  # do NOT auto-import them. The consumer (or demo shell) explicitly imports
19
19
  # the composed primitives. This element creates `<button-ui>` +
@@ -236,6 +236,9 @@
236
236
  "--drilldown-row-px": {
237
237
  "description": "Inline padding of each row."
238
238
  },
239
+ "--drilldown-row-py": {
240
+ "description": "Block padding of each row (grows a row past --drilldown-row-height once content, e.g. a two-line label+meta row, exceeds it)."
241
+ },
239
242
  "--drilldown-row-radius": {
240
243
  "description": "Border radius of each row."
241
244
  }
@@ -4,6 +4,7 @@
4
4
  --drilldown-row-height: var(--a-size, 2.25rem);
5
5
  --drilldown-row-radius: var(--a-radius-sm);
6
6
  --drilldown-row-px: var(--a-space-2);
7
+ --drilldown-row-py: var(--a-space-1-5);
7
8
  --drilldown-row-gap: var(--a-space-2);
8
9
  --drilldown-header-px: var(--a-space-3);
9
10
  --drilldown-header-py: var(--a-space-2);
@@ -189,13 +190,19 @@
189
190
  to { transform: none; opacity: 1; }
190
191
  }
191
192
 
192
- /* ── Rows ── */
193
+ /* ── Rows ──
194
+ min-height sets the single-line floor; padding-block (--drilldown-row-py,
195
+ matching menu-item-ui/action-item-ui's own row-density token) only grows
196
+ the row once content (e.g. a two-line label+meta row, gh#1591) exceeds
197
+ that floor — the two never stack into a taller one-liner because a
198
+ single-line row's content-box is shorter than the min-height already. */
193
199
  [role="option"] {
194
200
  display: flex;
195
201
  align-items: center;
196
202
  gap: var(--drilldown-row-gap);
197
203
  min-height: var(--drilldown-row-height);
198
204
  padding-inline: var(--drilldown-row-px);
205
+ padding-block: var(--drilldown-row-py);
199
206
  border-radius: var(--drilldown-row-radius);
200
207
  cursor: pointer;
201
208
  outline: none;
@@ -194,6 +194,8 @@ tokens:
194
194
  description: Border radius of each row.
195
195
  --drilldown-row-px:
196
196
  description: Inline padding of each row.
197
+ --drilldown-row-py:
198
+ description: Block padding of each row (grows a row past --drilldown-row-height once content, e.g. a two-line label+meta row, exceeds it).
197
199
  --drilldown-row-gap:
198
200
  description: Gap between row elements (dot / main / counts / chevron).
199
201
  --drilldown-bg-hover:
@@ -279,11 +279,11 @@ export class UIField extends UIElement {
279
279
  'input-ui', 'textarea-ui', 'select-ui', 'combobox-ui', 'search-ui',
280
280
  'check-ui', 'radio-ui', 'switch-ui', 'slider-ui', 'range-ui',
281
281
  'otp-input-ui', 'tags-input-ui', 'chat-input-ui', 'autocomplete-input-ui',
282
- 'datetime-picker-ui', 'date-range-picker-ui', 'calendar-picker-ui',
283
- // ADR-0063 (gh#1563) color-picker-ui's real implementation moved to
284
- // color-area-ui; color-picker-ui is now a thin deprecated alias. Both
285
- // tags need to resolve here since either may be the one actually used.
286
- 'color-area-ui', 'color-picker-ui', 'upload-ui', 'rating-ui', 'segmented-ui',
282
+ 'date-range-picker-ui', 'calendar-picker-ui',
283
+ // datetime-picker-ui / color-picker-ui cut in 0.8.43 (gh#1617,
284
+ // ADR-0063/gh#1372) — calendar-picker-ui / color-area-ui are the
285
+ // sole tags now.
286
+ 'color-area-ui', 'upload-ui', 'rating-ui', 'segmented-ui',
287
287
  'input', 'textarea', 'select',
288
288
  ]);
289
289
 
@@ -51,7 +51,6 @@ export { UIBadge } from './badge/badge.js';
51
51
  export { UIBreadcrumb } from './breadcrumb/breadcrumb.js';
52
52
  export { UICommand } from './command/command.js';
53
53
  export { UIColorArea } from './color-area/color-area.js';
54
- export { UIColorPicker } from './color-picker/color-picker.js';
55
54
  export { UIColorInput } from './color-input/color-input.js';
56
55
  export { UINoodles } from './noodles/noodles.js';
57
56
  export { UITable } from './table/table.js';
@@ -115,18 +114,15 @@ export { UISearch } from './search/search.js';
115
114
  export { UICombobox } from './combobox/combobox.js';
116
115
  export { UITagsInput } from './tags-input/tags-input.js';
117
116
  export { UIStat } from './stat/stat.js';
118
- export { UIProgressRow } from './progress-row/progress-row.js';
119
117
  export { UIActionList, UIActionItem } from './action-list/action-list.js';
120
118
  export { UIEmptyState } from './empty-state/empty-state.js';
121
119
  export { UICalendarGrid } from './calendar-grid/calendar-grid.js';
122
120
  export { UICalendarPicker } from './calendar-picker/calendar-picker.js';
123
121
  export { UIDateRangePicker } from './date-range-picker/date-range-picker.js';
124
122
  export { UITimePicker } from './time-picker/time-picker.js';
125
- export { UIDatetimePicker } from './datetime-picker/datetime-picker.js';
126
123
  export { UIEmbed } from './embed/embed.js';
127
124
  export { UIBlock } from './block/block.js';
128
125
  export { UIText } from './text/text.js';
129
- export { UIToggleGroup, UIToggleOption } from './toggle-group/toggle-group.js';
130
126
  export { UIToggleScheme } from './toggle-scheme/toggle-scheme.js';
131
127
  export { UIDemoToggle } from './demo-toggle/demo-toggle.js';
132
128
  export { UIRichText } from './richtext/richtext.js';
@@ -14,7 +14,7 @@
14
14
  ],
15
15
  "properties": {
16
16
  "type": {
17
- "description": "Input type. `password` wraps a native `<input>` for disc masking; `number` renders a contenteditable + stepper buttons (no native input). `text`/`email`/`tel`/`url` use plain contenteditable. input-ui does NOT implement date/time/color/search affordances — those HTML5 type values render as a plain contenteditable with no calendar, clock, swatch, or search affordance (first-pass-VALID against this enum historically, but functionally broken generation output). Use the owning primitive instead — CalendarPicker for date (+ month/week, no dedicated granularity primitive exists), DatetimePicker for datetime-local, TimePicker for time, ColorInput/ColorPicker for color, Search for search. See anti_patterns.",
17
+ "description": "Input type. `password` wraps a native `<input>` for disc masking; `number` renders a contenteditable + stepper buttons (no native input). `text`/`email`/`tel`/`url` use plain contenteditable. input-ui does NOT implement date/time/color/search affordances — those HTML5 type values render as a plain contenteditable with no calendar, clock, swatch, or search affordance (first-pass-VALID against this enum historically, but functionally broken generation output). Use the owning primitive instead — CalendarPicker for date (+ month/week, no dedicated granularity primitive exists), CalendarPicker precision=\"minute\" for datetime-local, TimePicker for time, ColorInput/ColorArea for color, Search for search. See anti_patterns.",
18
18
  "type": "string",
19
19
  "enum": [
20
20
  "text",
@@ -165,8 +165,8 @@
165
165
  "wrong": "{\"component\": \"Input\", \"type\": \"date\"}\n"
166
166
  },
167
167
  {
168
- "fix": "{\"component\": \"DatetimePicker\"}\n",
169
- "why": "Same gap as \"date\" — no native datetime picker rendered. Use\nDatetimePicker for combined date + time input.\n",
168
+ "fix": "{\"component\": \"CalendarPicker\", \"precision\": \"minute\"}\n",
169
+ "why": "Same gap as \"date\" — no native datetime picker rendered. Use\nCalendarPicker with precision=\"minute\" for combined date + time\ninput (DatetimePicker was a deprecated thin alias, cut in 0.8.43,\ngh#1617 — CalendarPicker is the sole tag now).\n",
170
170
  "wrong": "{\"component\": \"Input\", \"type\": \"datetime-local\"}\n"
171
171
  },
172
172
  {
@@ -186,7 +186,7 @@
186
186
  },
187
187
  {
188
188
  "fix": "{\"component\": \"ColorInput\"}\n",
189
- "why": "No native color swatch/picker rendered — just a plain text\nsurface. Use ColorInput for a compact form-bearing swatch +\npopover, or ColorPicker directly for the full OKLCH picker\nsurface.\n",
189
+ "why": "No native color swatch/picker rendered — just a plain text\nsurface. Use ColorInput for a compact form-bearing swatch +\npopover, or ColorArea directly for the full OKLCH picker surface\n(ColorPicker was a deprecated thin alias, cut in 0.8.43, gh#1617 —\nColorArea is the sole tag now).\n",
190
190
  "wrong": "{\"component\": \"Input\", \"type\": \"color\"}\n"
191
191
  },
192
192
  {
@@ -272,11 +272,19 @@ export class UIInput extends UIFormElement {
272
272
  `;
273
273
  }
274
274
 
275
+ // Suppress browser-native suggestion/autofill affordances on the
276
+ // contenteditable surface (gh#1593) — a bespoke editable, not a real
277
+ // form <input>, so a browser's saved-values dropdown or spellcheck
278
+ // suggestion strip is always noise here, never a wanted feature.
279
+ // aria-autocomplete="none" documents the same intent for AT users.
275
280
  const editable = `
276
281
  <span slot="text" contenteditable="plaintext-only" tabindex="0"
277
282
  ${this.value ? '' : 'data-empty=""'}
278
283
  ${labelby}
279
284
  data-placeholder="${this.placeholder}"
285
+ autocomplete="off" aria-autocomplete="none"
286
+ autocorrect="off" autocapitalize="off" spellcheck="false"
287
+ data-lpignore="true" data-1p-ignore="true"
280
288
  ${this.#isNumberMode ? 'inputmode="decimal"' : ''}></span>`;
281
289
 
282
290
  const controls = this.#isNumberMode ? `
@@ -51,6 +51,11 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
51
51
  /* ── State: disabled ── */
52
52
  --input-bg-disabled: var(--a-ui-bg-disabled);
53
53
  --input-fg-disabled: var(--a-ui-text-disabled);
54
+ /* gh#1595 — border kept full contrast on disabled; otp-input.css /
55
+ upload.css already alias this exact role for their own disabled
56
+ border, so this follows that sibling pattern rather than inventing
57
+ a new one. */
58
+ --input-border-disabled: var(--a-ui-border-disabled);
54
59
  text-align: start; /* §text-align-reset — blocks inheritance from centered ancestors */
55
60
  }
56
61
 
@@ -381,6 +386,7 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
381
386
  :scope[disabled] [slot="field"] {
382
387
  background: var(--input-bg-disabled);
383
388
  color: var(--input-fg-disabled);
389
+ border-color: var(--input-border-disabled);
384
390
  cursor: not-allowed;
385
391
  }
386
392
 
@@ -33,8 +33,8 @@ props:
33
33
  against this enum historically, but functionally broken generation
34
34
  output). Use the owning primitive instead — CalendarPicker for date
35
35
  (+ month/week, no dedicated granularity primitive exists),
36
- DatetimePicker for datetime-local, TimePicker for time,
37
- ColorInput/ColorPicker for color, Search for search. See
36
+ CalendarPicker precision="minute" for datetime-local, TimePicker
37
+ for time, ColorInput/ColorArea for color, Search for search. See
38
38
  anti_patterns.
39
39
  type: string
40
40
  default: text
@@ -291,8 +291,8 @@ a2ui:
291
291
  — text/email/password/number/tel/url (gh#1363 B10). Never
292
292
  set [type] to an HTML5 value input-ui doesn't render — route
293
293
  date/time/color/search intents to the owning primitive instead:
294
- CalendarPicker, DatetimePicker, TimePicker, ColorInput (or
295
- ColorPicker directly), Search. See anti_patterns.
294
+ CalendarPicker (precision="minute" for datetime-local), TimePicker,
295
+ ColorInput (or ColorArea directly), Search. See anti_patterns.
296
296
  anti_patterns:
297
297
  - wrong: |
298
298
  {"component": "Input", "type": "date"}
@@ -307,9 +307,11 @@ anti_patterns:
307
307
  {"component": "Input", "type": "datetime-local"}
308
308
  why: |
309
309
  Same gap as "date" — no native datetime picker rendered. Use
310
- DatetimePicker for combined date + time input.
310
+ CalendarPicker with precision="minute" for combined date + time
311
+ input (DatetimePicker was a deprecated thin alias, cut in 0.8.43,
312
+ gh#1617 — CalendarPicker is the sole tag now).
311
313
  fix: |
312
- {"component": "DatetimePicker"}
314
+ {"component": "CalendarPicker", "precision": "minute"}
313
315
  - wrong: |
314
316
  {"component": "Input", "type": "time"}
315
317
  why: |
@@ -338,8 +340,9 @@ anti_patterns:
338
340
  why: |
339
341
  No native color swatch/picker rendered — just a plain text
340
342
  surface. Use ColorInput for a compact form-bearing swatch +
341
- popover, or ColorPicker directly for the full OKLCH picker
342
- surface.
343
+ popover, or ColorArea directly for the full OKLCH picker surface
344
+ (ColorPicker was a deprecated thin alias, cut in 0.8.43, gh#1617 —
345
+ ColorArea is the sole tag now).
343
346
  fix: |
344
347
  {"component": "ColorInput"}
345
348
  - wrong: |
@@ -2,7 +2,7 @@
2
2
  "$schema": "https://json-schema.org/draft/2020-12/schema",
3
3
  "$id": "https://adiaui.dev/a2ui/v0_9/components/MenuItem.json",
4
4
  "title": "MenuItem",
5
- "description": "Child of `<menu-ui>`. One actionable row inside a menu, with optional leading icon + label + description + value. (`subtitle` is a deprecated alias for `description` — ADR-0063, gh#1563.)",
5
+ "description": "Child of `<menu-ui>`. One actionable row inside a menu, with optional leading icon + label + description + value. (The deprecated `subtitle` prop alias for `description` was cut in 0.8.43 — ADR-0063, gh#1563/gh#1617.)",
6
6
  "type": "object",
7
7
  "allOf": [
8
8
  {
@@ -14,7 +14,7 @@
14
14
  ],
15
15
  "properties": {
16
16
  "description": {
17
- "description": "Optional secondary description line rendered under the label. Canonical spelling (ADR-0063, gh#1563) replacing `subtitle` — converges menu-item onto the ~20-component corpus majority that already names this concept `description`.",
17
+ "description": "Optional secondary description line rendered under the label. Canonical spelling (ADR-0063, gh#1563) replacing `subtitle` — converges menu-item onto the ~20-component corpus majority that already names this concept `description`. The deprecated `subtitle` prop alias was cut in 0.8.43 (gh#1617).",
18
18
  "type": "string",
19
19
  "default": ""
20
20
  },
@@ -31,11 +31,6 @@
31
31
  "type": "string",
32
32
  "default": ""
33
33
  },
34
- "subtitle": {
35
- "description": "DEPRECATED (ADR-0063, gh#1563) — use `description` instead. Same type/default/rendered position; kept working as a dual-read compat shim (one-time console.warn when it's the name that resolves). Removed in 0.9.0. (The `subtitle` SLOT below is a separate surface, deliberately left unrenamed in this pass — see its own description.)",
36
- "type": "string",
37
- "default": ""
38
- },
39
34
  "text": {
40
35
  "description": "Item label text.",
41
36
  "type": "string",
@@ -86,7 +81,7 @@
86
81
  "description": "Custom leading element override; falls through to `[icon]` prop if not slotted."
87
82
  },
88
83
  "subtitle": {
89
- "description": "Custom secondary-line content override; falls through to the `[description]` prop (or its deprecated `[subtitle]` alias ADR-0063, gh#1563) if not slotted. The slot's own name is unchanged by that rename — this is a distinct, deliberately-unrenamed surface."
84
+ "description": "Custom secondary-line content override; falls through to the `[description]` prop if not slotted (ADR-0063, gh#1563 — the deprecated `[subtitle]` prop alias was cut in 0.8.43, gh#1617). The slot's own name is unchanged by that rename — this is a distinct, deliberately-unrenamed surface."
90
85
  },
91
86
  "text": {
92
87
  "description": "Custom label content; falls through to `[text]` prop if not slotted."
@@ -13,7 +13,7 @@ component: MenuItem
13
13
  category: navigation
14
14
  version: 1
15
15
  description: |-
16
- Child of `<menu-ui>`. One actionable row inside a menu, with optional leading icon + label + description + value. (`subtitle` is a deprecated alias for `description` — ADR-0063, gh#1563.)
16
+ Child of `<menu-ui>`. One actionable row inside a menu, with optional leading icon + label + description + value. (The deprecated `subtitle` prop alias for `description` was cut in 0.8.43 — ADR-0063, gh#1563/gh#1617.)
17
17
 
18
18
  props:
19
19
  icon:
@@ -24,21 +24,13 @@ props:
24
24
  description: Item label text.
25
25
  type: string
26
26
  default: ""
27
- subtitle:
28
- description: >-
29
- DEPRECATED (ADR-0063, gh#1563) — use `description` instead. Same
30
- type/default/rendered position; kept working as a dual-read compat
31
- shim (one-time console.warn when it's the name that resolves).
32
- Removed in 0.9.0. (The `subtitle` SLOT below is a separate surface,
33
- deliberately left unrenamed in this pass — see its own description.)
34
- type: string
35
- default: ""
36
27
  description:
37
28
  description: >-
38
29
  Optional secondary description line rendered under the label.
39
30
  Canonical spelling (ADR-0063, gh#1563) replacing `subtitle` —
40
31
  converges menu-item onto the ~20-component corpus majority that
41
- already names this concept `description`.
32
+ already names this concept `description`. The deprecated `subtitle`
33
+ prop alias was cut in 0.8.43 (gh#1617).
42
34
  type: string
43
35
  default: ""
44
36
  value:
@@ -64,9 +56,10 @@ slots:
64
56
  subtitle:
65
57
  description: >-
66
58
  Custom secondary-line content override; falls through to the
67
- `[description]` prop (or its deprecated `[subtitle]` aliasADR-0063,
68
- gh#1563) if not slotted. The slot's own name is unchanged by that
69
- rename — this is a distinct, deliberately-unrenamed surface.
59
+ `[description]` prop if not slotted (ADR-0063, gh#1563the
60
+ deprecated `[subtitle]` prop alias was cut in 0.8.43, gh#1617). The
61
+ slot's own name is unchanged by that rename — this is a distinct,
62
+ deliberately-unrenamed surface.
70
63
  trailing:
71
64
  description: Trailing element pinned to the far edge (shortcut hint, check mark).
72
65
 
@@ -98,13 +91,12 @@ a2ui:
98
91
  hint).
99
92
  - >-
100
93
  <action-item-ui> (child of <action-list-ui>) shares this row contract
101
- (icon/text/subtitle/value/variant/disabled props, icon/text/subtitle/
102
- trailing slot overrides) for inline, non-popover command rows — use
103
- it instead when the surface isn't a <menu-ui> popover (#1363 C5).
104
- NOTE (ADR-0063, gh#1563): <menu-item-ui>'s own `subtitle` PROP is now
105
- a deprecated alias for `description` — <action-item-ui> still uses
106
- `subtitle` as its own primary spelling and was NOT renamed in this
107
- pass (flagged as a discovered follow-up candidate, not fixed here).
94
+ (icon/text/description/value/variant/disabled props, icon/text/
95
+ subtitle/trailing slot overrides) for inline, non-popover command
96
+ rows — use it instead when the surface isn't a <menu-ui> popover
97
+ (#1363 C5). Both components' deprecated `subtitle` PROP aliases for
98
+ `description` were cut in 0.8.43 (ADR-0063, gh#1563/gh#1571,
99
+ gh#1617); the `subtitle` SLOT on both is unchanged.
108
100
 
109
101
  keywords:
110
102
  - menu-item
@@ -258,13 +258,11 @@ export class UIMenuItem extends UIElement {
258
258
  static properties = {
259
259
  icon: { type: String, default: '', reflect: true },
260
260
  text: { type: String, default: '', reflect: true },
261
- // ADR-0063 (gh#1563) — `subtitle` is DEPRECATED (menu-item was the sole
262
- // ~20-component-corpus outlier using `subtitle` where every sibling
263
- // uses `description`); `description` is canonical. `subtitle` stays
264
- // declared (dual-read compat, 0.8.42). The `subtitle` SLOT (a separate
265
- // surface — see menu-item.yaml) is deliberately unchanged; only the
266
- // PROP renames.
267
- subtitle: { type: String, default: '', reflect: true },
261
+ // ADR-0063 (gh#1563) — `description` is canonical (menu-item was the
262
+ // sole ~20-component-corpus outlier using `subtitle`); the deprecated
263
+ // `subtitle` PROP dual-read shim was cut in 0.8.43 (gh#1617). The
264
+ // `subtitle` SLOT (a separate surface — see menu-item.yaml) is
265
+ // deliberately unchanged.
268
266
  description: { type: String, default: '', reflect: true },
269
267
  value: { type: String, default: '', reflect: true },
270
268
  variant: { type: String, default: 'default', reflect: true },
@@ -273,32 +271,12 @@ export class UIMenuItem extends UIElement {
273
271
 
274
272
  static template = () => null;
275
273
 
276
- // ADR-0063 (gh#1563) one-shot-per-class deprecation warn for [subtitle].
277
- static #warnedSubtitle = false;
278
-
279
274
  // Set when connected() stamped role="menuitem" itself; a consumer-provided
280
275
  // role (e.g. admin-roster's role="menuitemradio", gh#616) is never touched
281
276
  // — that consumer also owns tabindex and any checked-state aria.
282
277
  #roleStamped = false;
283
278
 
284
279
  connected() {
285
- // ADR-0063 (gh#1563) compat shim — resolve BEFORE #stamp() reads
286
- // `this.description`, so there's no wrong-then-right flash. New-name
287
- // precedence: [description] wins outright when present; only fall
288
- // back to (and mirror) [subtitle] when [description] is absent.
289
- if (!this.hasAttribute('description') && this.hasAttribute('subtitle')) {
290
- this.description = this.subtitle;
291
- if (!UIMenuItem.#warnedSubtitle) {
292
- UIMenuItem.#warnedSubtitle = true;
293
- // eslint-disable-next-line no-console
294
- console.warn(
295
- '[AdiaUI] <menu-item-ui [subtitle]> is deprecated — use ' +
296
- '[description] instead (ADR-0063, gh#1563). Kept working as-is; ' +
297
- 'no behavior change.',
298
- );
299
- }
300
- }
301
-
302
280
  // role="menuitem" ONLY when actually inside a menu container. A menu-ui
303
281
  // closes by moving its items back into its own light DOM (see #hide()),
304
282
  // where there is no role="menu"/menubar ancestor — a bare role="menuitem"
@@ -41,14 +41,12 @@ export class UIMenuDivider extends UIElement {
41
41
  }
42
42
 
43
43
  export class UIMenuItem extends UIElement {
44
- /** Optional secondary description line rendered under the label. Canonical spelling (ADR-0063, gh#1563) replacing `subtitle` — converges menu-item onto the ~20-component corpus majority that already names this concept `description`. */
44
+ /** Optional secondary description line rendered under the label. Canonical spelling (ADR-0063, gh#1563) replacing `subtitle` — converges menu-item onto the ~20-component corpus majority that already names this concept `description`. The deprecated `subtitle` prop alias was cut in 0.8.43 (gh#1617). */
45
45
  description: string;
46
46
  /** Disabled state — blocks pointer + keyboard activation. */
47
47
  disabled: boolean;
48
48
  /** Optional leading Phosphor icon name. */
49
49
  icon: string;
50
- /** DEPRECATED (ADR-0063, gh#1563) — use `description` instead. Same type/default/rendered position; kept working as a dual-read compat shim (one-time console.warn when it's the name that resolves). Removed in 0.9.0. (The `subtitle` SLOT below is a separate surface, deliberately left unrenamed in this pass — see its own description.) */
51
- subtitle: string;
52
50
  /** Item label text. */
53
51
  text: string;
54
52
  /** Stable identifier emitted via the parent menu's `select` event. */
@@ -2,7 +2,7 @@
2
2
  "$schema": "https://json-schema.org/draft/2020-12/schema",
3
3
  "$id": "https://adiaui.dev/a2ui/v0_9/components/Pane.json",
4
4
  "title": "Pane",
5
- "description": "Collapsible, resizable content panel — drag-resize handle on the\ninner edge when [side=\"leading\"] / [side=\"trailing\"], [resizable]\nopt-in. Used standalone for resizable two-pane layouts, or wrapped\nby <editor-sidebar> / <admin-sidebar> which DELEGATE drag to the\ninner pane-ui rather than reimplementing it. See pane.yaml's\na2ui.rules for the full composition contract.\n",
5
+ "description": "Collapsible, resizable content panel — drag-resize handle on the\ninner edge when [edge=\"leading\"] / [edge=\"trailing\"], [resizable]\nopt-in. Used standalone for resizable two-pane layouts, or wrapped\nby <editor-sidebar> / <admin-sidebar> which DELEGATE drag to the\ninner pane-ui rather than reimplementing it. See pane.yaml's\na2ui.rules for the full composition contract.\n",
6
6
  "type": "object",
7
7
  "allOf": [
8
8
  {
@@ -22,7 +22,7 @@
22
22
  "const": "Pane"
23
23
  },
24
24
  "edge": {
25
- "description": "Opts a pane into horizontal-sibling chrome: suppresses the default\nfour-sided border and moves the resize grabber to the inner edge\n(right edge for `leading`, left edge for `trailing`). Also flips the\nresize-drag direction so `trailing` panes grow when dragged leftward.\nUnset keeps the pane-intrinsic chrome (full border, right-edge\ngrabber when resizable). Canonical spelling (ADR-0063, gh#1563)\nreplacing `side`.\n",
25
+ "description": "Opts a pane into horizontal-sibling chrome: suppresses the default\nfour-sided border and moves the resize grabber to the inner edge\n(right edge for `leading`, left edge for `trailing`). Also flips the\nresize-drag direction so `trailing` panes grow when dragged leftward.\nUnset keeps the pane-intrinsic chrome (full border, right-edge\ngrabber when resizable). Canonical spelling (ADR-0063, gh#1563) — the\ndeprecated `side` dual-read alias was cut in 0.8.43 (gh#1617).\n",
26
26
  "type": "string",
27
27
  "enum": [
28
28
  "",
@@ -45,16 +45,6 @@
45
45
  "description": "Component property: resizable.",
46
46
  "type": "boolean",
47
47
  "default": false
48
- },
49
- "side": {
50
- "description": "DEPRECATED (ADR-0063, gh#1563) — use `edge` instead. Same type/default/enum; kept working as a dual-read compat shim (one-time console.warn when it's the name that resolves). Removed in 0.9.0.",
51
- "type": "string",
52
- "enum": [
53
- "",
54
- "leading",
55
- "trailing"
56
- ],
57
- "default": ""
58
48
  }
59
49
  },
60
50
  "required": [
@@ -37,8 +37,9 @@
37
37
  * four-sided border is suppressed, only the inner-edge
38
38
  * border is drawn, the resize grabber moves to that
39
39
  * inner edge, and the resize-drag direction flips so
40
- * trailing panes grow when dragged leftward. `side` is a
41
- * deprecated dual-read alias (ADR-0063, gh#1563).
40
+ * trailing panes grow when dragged leftward. The
41
+ * deprecated `side` dual-read alias was cut in 0.8.43
42
+ * (gh#1617, ADR-0063).
42
43
  *
43
44
  * JS API:
44
45
  * pane.collapsed = true/false
@@ -59,20 +60,13 @@ export class UIPane extends UIElement {
59
60
  resizable: { type: Boolean, default: false, reflect: true },
60
61
  minWidth: { type: Number, default: 200, attribute: 'min-width', reflect: true },
61
62
  maxWidth: { type: Number, default: 9999, attribute: 'max-width', reflect: true },
62
- // ADR-0063 (gh#1563) — `side` is DEPRECATED; `edge` is the canonical
63
- // spelling (same type/default/enum). `side` stays declared (dual-read
64
- // compat, 0.8.42); `#resolveEdge()` (called from connected()) mirrors
65
- // an old-only value onto `edge` + warns once. Internal usage below
66
- // reads `edge` exclusively.
67
- side: { type: String, default: '', reflect: true },
63
+ // ADR-0063 (gh#1563) — `edge` is the canonical spelling; the deprecated
64
+ // `side` dual-read alias was cut in 0.8.43 (gh#1617).
68
65
  edge: { type: String, default: '', reflect: true },
69
66
  };
70
67
 
71
68
  static template = () => null;
72
69
 
73
- // ADR-0063 (gh#1563) one-shot-per-class deprecation warn for [side].
74
- static #warnedSide = false;
75
-
76
70
  #resizeEl = null;
77
71
  #dragging = false;
78
72
  #startX = 0;
@@ -82,25 +76,6 @@ export class UIPane extends UIElement {
82
76
  #bound = false;
83
77
 
84
78
  connected() {
85
- // ADR-0063 (gh#1563) compat shim — resolve BEFORE the first render so
86
- // there's no wrong-then-right flash. New-name precedence: [edge] wins
87
- // outright when present; only fall back to (and mirror) [side] when
88
- // [edge] is absent from markup. `edge` defaults `''` (not a
89
- // true-default Boolean), so a live hasAttribute() check here is
90
- // reliable — no gh#961 self-stamp interference (see chart-legend.class.js
91
- // for that failure mode with a true-default Boolean).
92
- if (!this.hasAttribute('edge') && this.hasAttribute('side')) {
93
- this.edge = this.side;
94
- if (!UIPane.#warnedSide) {
95
- UIPane.#warnedSide = true;
96
- // eslint-disable-next-line no-console
97
- console.warn(
98
- '[AdiaUI] <pane-ui [side]> is deprecated — use [edge] instead ' +
99
- '(ADR-0063, gh#1563). Kept working as-is; no behavior change.',
100
- );
101
- }
102
- }
103
-
104
79
  if (!this.#bound) {
105
80
  this.#bound = true;
106
81