@adia-ai/web-components 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.
Files changed (186) hide show
  1. package/CHANGELOG.md +44 -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/avatar/avatar.class.js +12 -1
  10. package/components/button/button.d.ts +4 -0
  11. package/components/button/button.yaml +1 -1
  12. package/components/calendar-picker/calendar-picker.a2ui.json +1 -1
  13. package/components/calendar-picker/calendar-picker.class.js +2 -3
  14. package/components/calendar-picker/calendar-picker.css +16 -18
  15. package/components/calendar-picker/calendar-picker.yaml +2 -2
  16. package/components/card/card.css +3 -3
  17. package/components/chart/chart.a2ui.json +29 -18
  18. package/components/chart/chart.class.js +1308 -266
  19. package/components/chart/chart.css +151 -1
  20. package/components/chart/chart.d.ts +9 -9
  21. package/components/chart/chart.yaml +63 -31
  22. package/components/chart-legend/chart-legend.a2ui.json +20 -14
  23. package/components/chart-legend/chart-legend.class.js +79 -58
  24. package/components/chart-legend/chart-legend.css +65 -1
  25. package/components/chart-legend/chart-legend.d.ts +5 -5
  26. package/components/chart-legend/chart-legend.examples.md +4 -4
  27. package/components/chart-legend/chart-legend.yaml +50 -20
  28. package/components/check/check.css +9 -0
  29. package/components/color-area/color-area.a2ui.json +1 -1
  30. package/components/color-area/color-area.class.js +2 -2
  31. package/components/color-area/color-area.css +4 -7
  32. package/components/color-area/color-area.d.ts +1 -1
  33. package/components/color-area/color-area.yaml +3 -3
  34. package/components/color-input/color-input.a2ui.json +1 -1
  35. package/components/color-input/color-input.class.js +1 -1
  36. package/components/color-input/color-input.yaml +2 -2
  37. package/components/combobox/combobox.a2ui.json +3 -0
  38. package/components/combobox/combobox.class.js +9 -8
  39. package/components/combobox/combobox.css +25 -4
  40. package/components/combobox/combobox.yaml +6 -0
  41. package/components/command/command.css +17 -1
  42. package/components/context-menu/context-menu.d.ts +2 -0
  43. package/components/drilldown/drilldown.a2ui.json +3 -0
  44. package/components/drilldown/drilldown.css +8 -1
  45. package/components/drilldown/drilldown.yaml +2 -0
  46. package/components/field/field.class.js +5 -5
  47. package/components/heatmap/heatmap.a2ui.json +5 -0
  48. package/components/heatmap/heatmap.d.ts +2 -0
  49. package/components/heatmap/heatmap.yaml +8 -0
  50. package/components/index.js +0 -4
  51. package/components/input/input.a2ui.json +4 -4
  52. package/components/input/input.class.js +20 -7
  53. package/components/input/input.css +6 -0
  54. package/components/input/input.yaml +15 -11
  55. package/components/integration-card/integration-card.d.ts +2 -0
  56. package/components/menu/menu-item.a2ui.json +3 -8
  57. package/components/menu/menu-item.yaml +13 -21
  58. package/components/menu/menu.class.js +5 -27
  59. package/components/menu/menu.d.ts +1 -3
  60. package/components/noodles/noodles.a2ui.json +0 -15
  61. package/components/noodles/noodles.yaml +0 -12
  62. package/components/number-format/number-format.class.js +10 -0
  63. package/components/pagination/pagination.class.js +88 -4
  64. package/components/pane/pane.a2ui.json +2 -12
  65. package/components/pane/pane.class.js +5 -30
  66. package/components/pane/pane.d.ts +3 -5
  67. package/components/pane/pane.yaml +7 -19
  68. package/components/popover/popover.d.ts +2 -0
  69. package/components/progress/progress.a2ui.json +1 -1
  70. package/components/progress/progress.class.js +13 -8
  71. package/components/progress/progress.d.ts +1 -1
  72. package/components/progress/progress.yaml +2 -2
  73. package/components/radio/radio.css +7 -0
  74. package/components/range/range.class.js +9 -1
  75. package/components/search/search.css +10 -1
  76. package/components/segment/segment.a2ui.json +1 -2
  77. package/components/segment/segment.css +10 -0
  78. package/components/segment/segment.yaml +1 -2
  79. package/components/segmented/segmented.a2ui.json +1 -3
  80. package/components/segmented/segmented.class.js +2 -2
  81. package/components/segmented/segmented.yaml +2 -4
  82. package/components/select/select.a2ui.json +5 -1
  83. package/components/select/select.class.js +14 -14
  84. package/components/select/select.css +20 -1
  85. package/components/select/select.yaml +7 -1
  86. package/components/step-progress/step-progress.yaml +1 -1
  87. package/components/stream/stream.d.ts +2 -0
  88. package/components/switch/switch.css +8 -0
  89. package/components/table/table.a2ui.json +6 -1
  90. package/components/table/table.class.js +18 -1
  91. package/components/table/table.css +31 -6
  92. package/components/table/table.d.ts +3 -1
  93. package/components/table/table.examples.md +2 -2
  94. package/components/table/table.yaml +9 -1
  95. package/components/table-toolbar/table-toolbar.a2ui.json +67 -2
  96. package/components/table-toolbar/table-toolbar.class.js +492 -17
  97. package/components/table-toolbar/table-toolbar.css +311 -0
  98. package/components/table-toolbar/table-toolbar.d.ts +17 -1
  99. package/components/table-toolbar/table-toolbar.yaml +220 -15
  100. package/components/tag/tag.class.js +13 -1
  101. package/components/text/text.a2ui.json +3 -3
  102. package/components/text/text.d.ts +5 -3
  103. package/components/text/text.yaml +3 -3
  104. package/components/textarea/textarea.class.js +9 -1
  105. package/components/textarea/textarea.css +4 -0
  106. package/components/time-picker/time-picker.yaml +3 -2
  107. package/components/tour/tour.d.ts +10 -0
  108. package/components/tree/tree.yaml +1 -1
  109. package/components/upload/upload.class.js +16 -0
  110. package/components/upload/upload.d.ts +7 -0
  111. package/components/upload/upload.yaml +7 -3
  112. package/core/a11y.d.ts +22 -0
  113. package/core/a11y.js +64 -0
  114. package/core/anchor.js +9 -5
  115. package/core/element.js +1 -1
  116. package/core/icons.js +2 -5
  117. package/custom-elements.json +142 -594
  118. package/dist/host.min.css +1 -1
  119. package/dist/host.sheet.js +1 -1
  120. package/dist/theme-provider.min.js +1 -1
  121. package/dist/web-components.min.css +1 -1
  122. package/dist/web-components.min.js +122 -119
  123. package/dist/web-components.sheet.js +1 -1
  124. package/index.d.ts +0 -15
  125. package/package.json +1 -1
  126. package/patterns/access-requests/access-requests.examples.html +1 -1
  127. package/patterns/admin-keys-and-export/admin-keys-and-export.examples.html +7 -7
  128. package/patterns/agent-cost/agent-cost.examples.html +6 -6
  129. package/patterns/agent-memory/agent-memory.examples.html +3 -3
  130. package/patterns/agent-prompt-library/agent-prompt-library.examples.html +8 -8
  131. package/patterns/agent-tool-call/agent-tool-call.examples.html +1 -1
  132. package/patterns/approvals/approvals.examples.html +6 -6
  133. package/patterns/audit-log/audit-log.examples.html +1 -1
  134. package/patterns/bulk-action-toolbar/bulk-action-toolbar.examples.html +4 -4
  135. package/patterns/chart-in-card/chart-in-card.examples.html +124 -10
  136. package/patterns/chart-in-card/chart-in-card.examples.js +37 -0
  137. package/patterns/comments-and-collaboration/comments-and-collaboration.examples.html +5 -5
  138. package/patterns/conversion-funnel/conversion-funnel.html +2 -2
  139. package/patterns/data-tables-inline-edit-and-tree/data-tables-inline-edit-and-tree.examples.html +2 -2
  140. package/patterns/diff-review/diff-review.examples.html +6 -6
  141. package/patterns/editor-shell/editor-shell.examples.html +3 -3
  142. package/patterns/export-flow/export-flow.examples.html +2 -2
  143. package/patterns/filter-bar/filter-bar.examples.html +2 -2
  144. package/patterns/forms-conditional-and-autocomplete/forms-conditional-and-autocomplete.examples.html +2 -2
  145. package/patterns/inline-dialog/inline-dialog.examples.html +2 -2
  146. package/patterns/marketing-engagement/marketing-engagement.examples.html +4 -4
  147. package/patterns/notifications-bell-and-digest/notifications-bell-and-digest.examples.html +1 -1
  148. package/patterns/permissions-matrix/permissions-matrix.examples.html +1 -1
  149. package/patterns/permissions-sharing/permissions-sharing.examples.html +2 -2
  150. package/patterns/profile-public-and-verification/profile-public-and-verification.examples.html +4 -4
  151. package/patterns/search-discovery/search-discovery.examples.html +2 -2
  152. package/styles/colors/semantics/features.css +8 -1
  153. package/styles/components.css +0 -4
  154. package/styles/type/roles.css +29 -9
  155. package/traits/arrow-grid-nav/arrow-grid-nav.js +1 -1
  156. package/traits/resize-observer/resize-observer.js +1 -1
  157. package/components/color-picker/color-picker.a2ui.json +0 -148
  158. package/components/color-picker/color-picker.class.js +0 -46
  159. package/components/color-picker/color-picker.css +0 -14
  160. package/components/color-picker/color-picker.d.ts +0 -99
  161. package/components/color-picker/color-picker.examples.md +0 -19
  162. package/components/color-picker/color-picker.js +0 -17
  163. package/components/color-picker/color-picker.yaml +0 -175
  164. package/components/datetime-picker/datetime-picker.a2ui.json +0 -256
  165. package/components/datetime-picker/datetime-picker.class.js +0 -58
  166. package/components/datetime-picker/datetime-picker.css +0 -11
  167. package/components/datetime-picker/datetime-picker.d.ts +0 -87
  168. package/components/datetime-picker/datetime-picker.examples.md +0 -25
  169. package/components/datetime-picker/datetime-picker.js +0 -17
  170. package/components/datetime-picker/datetime-picker.yaml +0 -254
  171. package/components/progress-row/progress-row.a2ui.json +0 -107
  172. package/components/progress-row/progress-row.class.js +0 -118
  173. package/components/progress-row/progress-row.css +0 -60
  174. package/components/progress-row/progress-row.d.ts +0 -24
  175. package/components/progress-row/progress-row.examples.md +0 -7
  176. package/components/progress-row/progress-row.js +0 -17
  177. package/components/progress-row/progress-row.yaml +0 -85
  178. package/components/toggle-group/toggle-group.a2ui.json +0 -148
  179. package/components/toggle-group/toggle-group.class.js +0 -195
  180. package/components/toggle-group/toggle-group.css +0 -127
  181. package/components/toggle-group/toggle-group.d.ts +0 -50
  182. package/components/toggle-group/toggle-group.examples.md +0 -33
  183. package/components/toggle-group/toggle-group.js +0 -18
  184. package/components/toggle-group/toggle-group.yaml +0 -135
  185. package/components/toggle-group/toggle-option.a2ui.json +0 -86
  186. package/components/toggle-group/toggle-option.yaml +0 -75
package/components/datetime-picker/datetime-picker.d.ts DELETED
@@ -1,87 +0,0 @@
1
- /**
2
- * `<datetime-picker-ui>` — DEPRECATED (gh#1372, #1363 C3c) — folded into <calendar-picker-ui>'s widened `precision` axis. `<datetime-picker-ui>` is now a thin `UICalendarPicker` subclass (see datetime-picker.class.js) rather than an independent implementation: `precision` defaults to `"minute"` (not `"date"`) and `placeholder` defaults to `"Select date and time"`; every other prop/event/token is inherited unchanged from <calendar-picker-ui>. Existing markup keeps working, but new markup should reach for `<calendar-picker-ui precision="minute">` (or `precision="second"`) directly. See <calendar-picker-ui> for the full contract.
3
- *
4
- * @see https://ui-kit.exe.xyz/site/components/datetime-picker
5
- *
6
- * Type declarations generated by scripts/build/dts-codegen.mjs from
7
- * the component's `.a2ui.json` sidecar(s). Edit the source `.yaml`,
8
- * run `npm run build:components`, then `npm run codegen:dts` to
9
- * regenerate; or hand-author this file fully if rich event types are
10
- * needed beyond what the yaml `events:` block can express.
11
- */
12
-
13
- import { UIElement } from '../../core/element.js';
14
-
15
- export interface DatetimePickerChangeEventDetail {
16
- value: string;
17
- }
18
-
19
- export type DatetimePickerChangeEvent = CustomEvent<DatetimePickerChangeEventDetail>;
20
- export interface DatetimePickerCloseEventDetail {
21
- reason: string;
22
- }
23
-
24
- export type DatetimePickerCloseEvent = CustomEvent<DatetimePickerCloseEventDetail>;
25
- export interface DatetimePickerInputEventDetail {
26
- value: string;
27
- }
28
-
29
- export type DatetimePickerInputEvent = CustomEvent<DatetimePickerInputEventDetail>;
30
- export interface DatetimePickerInvalidEventDetail {
31
- reason: string;
32
- value: string;
33
- }
34
-
35
- export type DatetimePickerInvalidEvent = CustomEvent<DatetimePickerInvalidEventDetail>;
36
- export interface DatetimePickerOpenEventDetail {
37
- trigger: string;
38
- }
39
-
40
- export type DatetimePickerOpenEvent = CustomEvent<DatetimePickerOpenEventDetail>;
41
-
42
- export class UIDatetimePicker extends UIElement {
43
- /** Required for validation when inside a `<form>`. */
44
- required: boolean;
45
- /** Block all interaction. Trigger remains rendered but does not open the popover. */
46
- disabled: boolean;
47
- /** Trigger button date format. `short`: `Jan 1, 2026 14:30`; `long`: `January 1, 2026 14:30`; `iso`: full ISO string. */
48
- format: 'short' | 'long' | 'iso';
49
- /** Hour cycle for the time pane. Empty (default) derives from the
50
- document locale. `h12` forces a 12-hour cycle with an AM/PM
51
- (meridiem) segment; `h23` forces 24-hour cycle.
52
- */
53
- hourcycle: '' | 'h12' | 'h23';
54
- /** BCP-47 locale tag used to derive hour-cycle when `hour-cycle` is empty. Falls back to `<html lang>` then to browser default. */
55
- locale: string;
56
- /** Latest selectable ISO 8601 datetime (inclusive). Days after are disabled in the calendar pane; times after are rejected by the time pane on the same day. */
57
- max: string;
58
- /** Earliest selectable ISO 8601 datetime (inclusive). Days before are disabled in the calendar pane; times before are rejected by the time pane on the same day. */
59
- min: string;
60
- /** Form field name. The ISO 8601 datetime is submitted under this key when the picker is inside a `<form>`. */
61
- name: string;
62
- /** Whether the popover is currently open. */
63
- open: boolean;
64
- /** Text shown in the trigger when the value is empty. Defaults to "Select date and time" HERE (vs. "Select date..." on the base `<calendar-picker-ui>`). */
65
- placeholder: string;
66
- /** Popover placement relative to the trigger. Default `bottom` centers the calendar+time panel under the trigger (ADR-0034 Rule 2 — ~600px panel >> trigger). */
67
- placement: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
68
- /** Time-pane precision. `minute` (default HERE — `date` on the base `<calendar-picker-ui>`) emits `HH:mm`; `second` exposes the seconds segment and emits `HH:mm:ss`; `date` drops the time pane entirely (identical to the base class's own default). */
69
- precision: 'date' | 'minute' | 'second';
70
- /** Block edits; allow keyboard navigation for screen-reader inspection. */
71
- readonly: boolean;
72
- /** Per-Arrow-keypress increment in seconds for the time pane. 60 = minute precision (default), 900 = 15-minute, 1 = second precision. */
73
- step: number;
74
- /** Current value as ISO 8601 datetime ("YYYY-MM-DDTHH:mm" or "YYYY-MM-DDTHH:mm:ss"). Empty when no value selected. */
75
- value: string;
76
-
77
- addEventListener(type: 'change', listener: (ev: DatetimePickerChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
78
- addEventListener(type: 'close', listener: (ev: DatetimePickerCloseEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
79
- addEventListener(type: 'input', listener: (ev: DatetimePickerInputEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
80
- addEventListener(type: 'invalid', listener: (ev: DatetimePickerInvalidEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
81
- addEventListener(type: 'open', listener: (ev: DatetimePickerOpenEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
82
- addEventListener<K extends keyof HTMLElementEventMap>(
83
- type: K,
84
- listener: (this: UIDatetimePicker, ev: HTMLElementEventMap[K]) => unknown,
85
- options?: boolean | AddEventListenerOptions,
86
- ): void;
87
- }
package/components/datetime-picker/datetime-picker.examples.md DELETED
@@ -1,25 +0,0 @@
1
- # datetime-picker — Examples
2
-
3
- ## Canonical
4
-
5
- ```html
6
- <field-ui label="Appointment">
7
- <datetime-picker-ui name="appointment" min="2026-01-01T00:00" max="2026-12-31T23:59"></datetime-picker-ui>
8
- </field-ui>
9
- ```
10
-
11
- ## Pre-selected
12
-
13
- ```html
14
- <field-ui label="Meeting start">
15
- <datetime-picker-ui value="2026-05-24T14:30"></datetime-picker-ui>
16
- </field-ui>
17
- ```
18
-
19
- ## precision
20
-
21
- ```html
22
- <field-ui label="Minute precision">
23
- <datetime-picker-ui value="2026-05-24T14:30"></datetime-picker-ui>
24
- </field-ui>
25
- ```
package/components/datetime-picker/datetime-picker.js DELETED
@@ -1,17 +0,0 @@
1
- /**
2
- * `<datetime-picker-ui>` — auto-registers the tag on import.
3
- *
4
- * For non-side-effect class import (test isolation, tag override), use
5
- * the `class` subpath:
6
- *
7
- * import { UIDatetimePicker } from '@adia-ai/web-components/components/datetime-picker/class';
8
- *
9
- * @see ../../USAGE.md#registration--auto-vs-explicit
10
- */
11
-
12
- import { defineIfFree } from '../../core/register.js';
13
- import { UIDatetimePicker } from './datetime-picker.class.js';
14
-
15
- defineIfFree('datetime-picker-ui', UIDatetimePicker);
16
-
17
- export { UIDatetimePicker };
package/components/datetime-picker/datetime-picker.yaml DELETED
@@ -1,254 +0,0 @@
1
- $schema: ../../../../scripts/schemas/component.yaml.schema.json
2
- name: UIDatetimePicker
3
- tag: datetime-picker-ui
4
- status: deprecated
5
- component: DatetimePicker
6
- category: input
7
- version: 2
8
- description: >-
9
- DEPRECATED (gh#1372, #1363 C3c) — folded into <calendar-picker-ui>'s
10
- widened `precision` axis. `<datetime-picker-ui>` is now a thin
11
- `UICalendarPicker` subclass (see datetime-picker.class.js) rather than an
12
- independent implementation: `precision` defaults to `"minute"` (not
13
- `"date"`) and `placeholder` defaults to `"Select date and time"`; every
14
- other prop/event/token is inherited unchanged from <calendar-picker-ui>.
15
- Existing markup keeps working, but new markup should reach for
16
- `<calendar-picker-ui precision="minute">` (or `precision="second"`)
17
- directly. See <calendar-picker-ui> for the full contract.
18
- # Per ADR-0027 — primitives that programmatically create other primitives
19
- # do NOT auto-import them. Consumer (or demo shell) must explicitly import
20
- # the calendar-grid, time-picker, divider modules (same set
21
- # <calendar-picker-ui precision="minute"> itself needs — this alias
22
- # inherits its render(), not just its class).
23
- composes:
24
- - calendar-grid-ui # the date pane — substrate primitive (inherited from calendar-picker-ui)
25
- - time-picker-ui # the time pane (SPEC-043)
26
- - divider-ui # separator between panes
27
- props:
28
- # Every prop below is inherited VERBATIM from <calendar-picker-ui> —
29
- # documented here too (not just "see the base class") because a
30
- # consumer scanning THIS tag's own catalog entry, or the a2ui pipeline
31
- # generating THIS tag by name, needs the full contract without a second
32
- # hop. audit-static-properties-vs-yaml.mjs's component-extends-component
33
- # exemption (gh#1372) resolves this against <calendar-picker-ui>'s own
34
- # yaml, so re-declaring the inherited names here is documentation, not a
35
- # second runtime contract. `precision` and `placeholder` are the only
36
- # two whose DEFAULT actually differs from the base class.
37
- name:
38
- description: Form field name. The ISO 8601 datetime is submitted under this key when the picker is inside a `<form>`.
39
- type: string
40
- default: ''
41
- reflect: true
42
- value:
43
- description: 'Current value as ISO 8601 datetime ("YYYY-MM-DDTHH:mm" or "YYYY-MM-DDTHH:mm:ss"). Empty when no value selected.'
44
- type: string
45
- default: ''
46
- dynamic: true
47
- min:
48
- description: Earliest selectable ISO 8601 datetime (inclusive). Days before are disabled in the calendar pane; times before are rejected by the time pane on the same day.
49
- type: string
50
- default: ''
51
- reflect: true
52
- max:
53
- description: Latest selectable ISO 8601 datetime (inclusive). Days after are disabled in the calendar pane; times after are rejected by the time pane on the same day.
54
- type: string
55
- default: ''
56
- reflect: true
57
- step:
58
- description: Per-Arrow-keypress increment in seconds for the time pane. 60 = minute precision (default), 900 = 15-minute, 1 = second precision.
59
- type: number
60
- default: 60
61
- reflect: true
62
- precision:
63
- description: Time-pane precision. `minute` (default HERE — `date` on the base `<calendar-picker-ui>`) emits `HH:mm`; `second` exposes the seconds segment and emits `HH:mm:ss`; `date` drops the time pane entirely (identical to the base class's own default).
64
- type: string
65
- default: minute
66
- enum:
67
- - date
68
- - minute
69
- - second
70
- reflect: true
71
- hourcycle:
72
- description: |
73
- Hour cycle for the time pane. Empty (default) derives from the
74
- document locale. `h12` forces a 12-hour cycle with an AM/PM
75
- (meridiem) segment; `h23` forces 24-hour cycle.
76
- type: string
77
- default: ''
78
- enum:
79
- - ''
80
- - h12
81
- - h23
82
- reflect: true
83
- attribute: hour-cycle
84
- disabled:
85
- description: Block all interaction. Trigger remains rendered but does not open the popover.
86
- type: boolean
87
- default: false
88
- reflect: true
89
- readonly:
90
- description: Block edits; allow keyboard navigation for screen-reader inspection.
91
- type: boolean
92
- default: false
93
- reflect: true
94
- required:
95
- description: Required for validation when inside a `<form>`.
96
- type: boolean
97
- default: false
98
- reflect: true
99
- open:
100
- description: Whether the popover is currently open.
101
- type: boolean
102
- default: false
103
- reflect: true
104
- placeholder:
105
- description: Text shown in the trigger when the value is empty. Defaults to "Select date and time" HERE (vs. "Select date..." on the base `<calendar-picker-ui>`).
106
- type: string
107
- default: Select date and time
108
- reflect: true
109
- format:
110
- description: 'Trigger button date format. `short`: `Jan 1, 2026 14:30`; `long`: `January 1, 2026 14:30`; `iso`: full ISO string.'
111
- type: string
112
- default: short
113
- enum:
114
- - short
115
- - long
116
- - iso
117
- locale:
118
- description: BCP-47 locale tag used to derive hour-cycle when `hour-cycle` is empty. Falls back to `<html lang>` then to browser default.
119
- type: string
120
- default: ''
121
- placement:
122
- description: Popover placement relative to the trigger. Default `bottom` centers the calendar+time panel under the trigger (ADR-0034 Rule 2 — ~600px panel >> trigger).
123
- type: string
124
- default: bottom
125
- reflect: true
126
- enum:
127
- - top
128
- - bottom
129
- - left
130
- - right
131
- - top-start
132
- - top-end
133
- - bottom-start
134
- - bottom-end
135
- events:
136
- change:
137
- description: Fired when the value commits (date picked + time edited, OR Apply clicked in explicit-commit mode).
138
- detail:
139
- value: string
140
- input:
141
- description: Fired during partial selection (date picked but time still pending, or vice versa).
142
- detail:
143
- value: string
144
- open:
145
- description: Popover opened (user clicked the trigger or pressed Enter / Space).
146
- detail:
147
- trigger: string
148
- close:
149
- description: Popover closed (without commit, or after commit).
150
- detail:
151
- reason: string
152
- invalid:
153
- description: A constraint failed (out of range, parse error).
154
- detail:
155
- value: string
156
- reason: string
157
- slots:
158
- trigger:
159
- description: Custom trigger replacement. When omitted, a default trigger is stamped (a plain clickable span, per the base `<calendar-picker-ui>` — NOT the old standalone datetime-picker's `<button-ui>` trigger; see the Consequences note below).
160
- footer:
161
- description: Optional Apply / Cancel buttons for explicit-commit flows. Spans both panes below the calendar + time area.
162
- states:
163
- - name: idle
164
- description: Closed, no pending selection.
165
- - name: open
166
- description: Popover open.
167
- attribute: open
168
- - name: disabled
169
- description: Non-interactive; dimmed.
170
- attribute: disabled
171
- - name: readonly
172
- description: Read-only; trigger keyboard-focusable but popover does not open.
173
- attribute: readonly
174
- tokens: {} # No component-owned tokens — styling flows entirely through
175
- # <calendar-picker-ui>'s own --calendar-picker-* custom
176
- # properties (gh#1372; the old --datetime-picker-* tokens are
177
- # a genuine breaking removal — see the MIGRATION GUIDE entry).
178
- requiredIcons:
179
- - calendar
180
- a2ui:
181
- rules:
182
- - rule: 'DEPRECATED — prefer `{"component": "CalendarPicker", "precision": "minute"}` (or `"second"`) over `{"component": "DatetimePicker"}`. Both render and behave identically; DatetimePicker is a thin compatibility alias.'
183
- reason: 'gh#1372 (#1363 C3c) fold — steer new generation at the canonical primitive.'
184
- - rule: '`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`.'
185
- reason: 'Datetime contract — both halves must be present (or both empty).'
186
- - rule: '`min` and `max` MUST be parseable ISO 8601 datetimes if non-empty. If `value` falls outside, `invalid` fires and the value does not commit.'
187
- reason: 'Constraint contract.'
188
- - rule: 'Per ADR-0025 NEVER wrap a native `<input type="datetime-local">` — the calendar pane + time pane composition + ElementInternals together provide form participation.'
189
- reason: 'No native form controls.'
190
- anti_patterns:
191
- - wrong: |
192
- {"component": "DatetimePicker", "value": "2026-05-24"}
193
- why: |
194
- `value` is a date-only string — no time component. The contract requires
195
- a full ISO 8601 datetime including the `T` and time segment.
196
- fix: |
197
- {"component": "DatetimePicker", "value": "2026-05-24T00:00"}
198
- - wrong: |
199
- {"component": "DatetimePicker", "name": "appointment"}
200
- why: |
201
- DatetimePicker is deprecated (gh#1372) — new generation should reach
202
- for CalendarPicker's widened precision axis instead.
203
- fix: |
204
- {"component": "CalendarPicker", "precision": "minute", "name": "appointment"}
205
- examples:
206
- - name: canonical
207
- description: Form-field-wrapped picker with min/max bounds. Prefer the CalendarPicker[precision] form for NEW markup — see calendar-picker-ui's own "datetime-picker" example.
208
- a2ui: |
209
- [
210
- {
211
- "id": "field",
212
- "component": "Field",
213
- "label": "Appointment",
214
- "children": ["dt"]
215
- },
216
- {
217
- "id": "dt",
218
- "component": "DatetimePicker",
219
- "name": "appointment",
220
- "min": "2026-01-01T00:00",
221
- "max": "2026-12-31T23:59"
222
- }
223
- ]
224
- keywords:
225
- - datetimepicker
226
- - datetime-picker
227
- - datetime
228
- - date-time
229
- - dateandtime
230
- - appointment
231
- - schedule
232
- - timestamp
233
- synonyms:
234
- tags:
235
- - DateTimePicker
236
- - DateTimeInput
237
- - DatetimeInput
238
- - Timestamp
239
- datetime:
240
- - date-time
241
- - timestamp
242
- - appointment
243
- - schedule
244
- appointment:
245
- - datetime
246
- - meeting
247
- - schedule
248
- related:
249
- - calendar-picker
250
- - time-picker
251
- - date-range-picker
252
- - popover
253
- - field
254
- - button
package/components/progress-row/progress-row.a2ui.json DELETED
@@ -1,107 +0,0 @@
1
- {
2
- "$schema": "https://json-schema.org/draft/2020-12/schema",
3
- "$id": "https://adiaui.dev/a2ui/v0_9/components/ProgressRow.json",
4
- "title": "ProgressRow",
5
- "description": "DEPRECATED (gh#1363 C4) — absorbed into <progress-ui>: set `label` (and optional `meta`) directly on <progress-ui> instead, which activates the identical row layout in place. progress-row-ui keeps working (still composes <progress-ui> internally, unchanged behavior) for existing back-compat markup, but is no longer taught or generated for new work. Was: inline labeled progress row with label, progress bar, and meta text — storage quotas, capacity breakdowns, usage indicators.",
6
- "type": "object",
7
- "allOf": [
8
- {
9
- "$ref": "common_types.json#/$defs/ComponentCommon"
10
- },
11
- {
12
- "$ref": "common_types.json#/$defs/CatalogComponentCommon"
13
- }
14
- ],
15
- "properties": {
16
- "component": {
17
- "const": "ProgressRow"
18
- },
19
- "label": {
20
- "description": "Left-hand label text",
21
- "type": "string",
22
- "default": ""
23
- },
24
- "meta": {
25
- "description": "Right-hand meta text (e.g. '32 GB', '4.2k / 10k')",
26
- "type": "string",
27
- "default": ""
28
- },
29
- "value": {
30
- "description": "Progress value 0-100 (null = indeterminate; legacy -1 accepted for back-compat)",
31
- "type": [
32
- "number",
33
- "null"
34
- ],
35
- "default": null
36
- },
37
- "variant": {
38
- "description": "Color variant for the progress fill",
39
- "type": "string",
40
- "enum": [
41
- "default",
42
- "success",
43
- "warning",
44
- "danger"
45
- ],
46
- "default": "default"
47
- }
48
- },
49
- "required": [
50
- "component"
51
- ],
52
- "unevaluatedProperties": false,
53
- "x-adiaui": {
54
- "anti_patterns": [
55
- {
56
- "fix": "{\"component\": \"Progress\", \"label\": \"CPU\", \"value\": 92}\n",
57
- "why": "ProgressRow is deprecated — its row layout was absorbed\ninto Progress directly.\n",
58
- "wrong": "{\"component\": \"ProgressRow\", \"label\": \"CPU\", \"value\": 92}\n"
59
- }
60
- ],
61
- "category": "feedback",
62
- "composes": [
63
- "progress-ui"
64
- ],
65
- "events": {},
66
- "examples": [],
67
- "keywords": [
68
- "progressrow",
69
- "progress-row",
70
- "progress",
71
- "row"
72
- ],
73
- "name": "UIProgressRow",
74
- "parts": {},
75
- "related": [
76
- "Progress",
77
- "StepProgress",
78
- "List"
79
- ],
80
- "slots": {
81
- "label": {
82
- "description": "Label region — control label."
83
- },
84
- "meta": {
85
- "description": "Child content region for the `meta` slot."
86
- }
87
- },
88
- "states": [
89
- {
90
- "description": "Default, ready for interaction.",
91
- "name": "idle"
92
- }
93
- ],
94
- "status": "deprecated",
95
- "synonyms": {
96
- "progress-row": [
97
- "task-row",
98
- "progress-line",
99
- "labeled-progress"
100
- ]
101
- },
102
- "tag": "progress-row-ui",
103
- "tokens": {},
104
- "traits": [],
105
- "version": 1
106
- }
107
- }
package/components/progress-row/progress-row.class.js DELETED
@@ -1,118 +0,0 @@
1
- /**
2
- * Non-side-effect class export for `<progress-row-ui>`.
3
- *
4
- * Importing this file gives you the class(es) without auto-registering the tag.
5
- * Useful for test isolation, subclassing with tag-name override, or selective
6
- * composition.
7
- *
8
- * The auto-register path stays at `@adia-ai/web-components/components/progress-row`
9
- * (which imports this file + calls `defineIfFree()`).
10
- *
11
- * @see ../../USAGE.md#registration--auto-vs-explicit
12
- */
13
-
14
- /**
15
- * <progress-row-ui label="Documents" value="42" meta="32 GB"></progress-row-ui>
16
- *
17
- * Inline labeled progress row. Used for storage quotas, capacity
18
- * breakdowns, budget/usage indicators.
19
- *
20
- * Layout:
21
- * ┌──────────────────────────────────────┐
22
- * │ Label Meta │ ← flex row, space-between
23
- * │ ████████░░░░░░░░░░░░░░░░ │ ← progress bar below
24
- * └──────────────────────────────────────┘
25
- *
26
- * Properties:
27
- * label — left-hand label text
28
- * value — 0-100 progress value (null or -1 = indeterminate)
29
- * meta — right-hand meta text (e.g. "32 GB", "4.2k / 10k")
30
- * variant — success | warning | danger (colors the fill; inherits otherwise)
31
- */
32
-
33
- import { UIElement } from '../../core/element.js';
34
-
35
- export class UIProgressRow extends UIElement {
36
- static properties = {
37
- label: { type: String, default: '', reflect: true },
38
- value: { type: Number, default: null, reflect: true },
39
- meta: { type: String, default: '', reflect: true },
40
- variant: { type: String, default: 'default', reflect: true },
41
- };
42
-
43
- static template = () => null;
44
-
45
- #labelEl = null;
46
- #metaEl = null;
47
- #progressEl = null;
48
-
49
- connected() {
50
- this.setAttribute('role', 'group');
51
-
52
- this.#labelEl = this.querySelector(':scope > [slot="label"]');
53
- if (!this.#labelEl) {
54
- this.#labelEl = document.createElement('span');
55
- this.#labelEl.setAttribute('slot', 'label');
56
- this.appendChild(this.#labelEl);
57
- }
58
-
59
- this.#metaEl = this.querySelector(':scope > [slot="meta"]');
60
- if (!this.#metaEl) {
61
- this.#metaEl = document.createElement('span');
62
- this.#metaEl.setAttribute('slot', 'meta');
63
- this.appendChild(this.#metaEl);
64
- }
65
-
66
- this.#progressEl = this.querySelector(':scope > progress-ui');
67
- if (!this.#progressEl) {
68
- this.#progressEl = document.createElement('progress-ui');
69
- // Pre-set value BEFORE append so progress-ui's first paint is
70
- // determinate at the target value — `@starting-style { width: 0 }`
71
- // in progress.css then transitions 0 → value on mount. Without this,
72
- // the bar mounts indeterminate (width: 100% from the shimmer rule),
73
- // and `render()` setting value: N triggers a backwards 100% → N
74
- // animation, which reads as the bar shrinking right-to-left.
75
- if (this.value != null && this.value >= 0) {
76
- this.#progressEl.setAttribute('value', String(this.value));
77
- }
78
- this.appendChild(this.#progressEl);
79
- }
80
- }
81
-
82
- disconnected() {
83
- this.#labelEl = null;
84
- this.#metaEl = null;
85
- this.#progressEl = null;
86
- }
87
-
88
- render() {
89
- if (!this.#labelEl) return;
90
-
91
- this.#labelEl.textContent = this.label;
92
- this.#labelEl.hidden = !this.label;
93
-
94
- // The [meta] ATTR owns the text when set. When it's absent, authored
95
- // [slot="meta"] content — e.g. meta text with a trailing delta badge
96
- // (gh#502) — is left intact instead of being wiped + hidden; only a
97
- // genuinely empty meta element hides.
98
- if (this.meta) {
99
- this.#metaEl.textContent = this.meta;
100
- this.#metaEl.hidden = false;
101
- } else {
102
- this.#metaEl.hidden = !this.#metaEl.hasChildNodes();
103
- }
104
-
105
- if (this.value != null && this.value >= 0) {
106
- this.#progressEl.setAttribute('value', String(this.value));
107
- } else {
108
- this.#progressEl.removeAttribute('value');
109
- }
110
-
111
- // ARIA: label the group so screen readers announce "Documents, 42 percent"
112
- if (this.label) {
113
- this.setAttribute('aria-label', this.meta ? `${this.label}, ${this.meta}` : this.label);
114
- } else {
115
- this.removeAttribute('aria-label');
116
- }
117
- }
118
- }
package/components/progress-row/progress-row.css DELETED
@@ -1,60 +0,0 @@
1
- @scope (progress-row-ui) {
2
- :where(:scope) {
3
- /* ── Tokens ── */
4
- /* Row-gap between the label/meta row and the bar. Bumped --a-space-1 →
5
- --a-space-2 so the bar isn't crammed under the label. (bug-42) */
6
- --progress-row-gap: var(--a-space-2);
7
- --progress-row-column-gap: var(--a-space-2);
8
- --progress-row-label-size: var(--a-ui-size);
9
- --progress-row-label-fg: var(--md-sys-color-neutral-on-surface);
10
- --progress-row-meta-size: var(--a-ui-sm);
11
- --progress-row-meta-fg: var(--a-fg-muted);
12
-
13
- /* Fill color piped into nested progress-ui via its own token */
14
- --progress-row-fill-bg: var(--a-primary-bg);
15
- text-align: start; /* §text-align-reset — blocks inheritance from centered ancestors */
16
- }
17
-
18
- :scope {
19
- box-sizing: border-box;
20
- display: grid;
21
- grid-template-columns: minmax(0, 1fr) auto;
22
- grid-template-areas:
23
- "label meta"
24
- "bar bar";
25
- column-gap: var(--progress-row-column-gap);
26
- row-gap: var(--progress-row-gap);
27
- align-items: baseline;
28
- }
29
-
30
- [slot="label"] {
31
- grid-area: label;
32
- font-size: var(--progress-row-label-size);
33
- color: var(--progress-row-label-fg);
34
- line-height: var(--a-font-leading-normal);
35
- min-width: 0;
36
- overflow: hidden;
37
- text-overflow: ellipsis;
38
- white-space: nowrap;
39
- }
40
-
41
- [slot="meta"] {
42
- grid-area: meta;
43
- font-size: var(--progress-row-meta-size);
44
- color: var(--progress-row-meta-fg);
45
- font-variant-numeric: tabular-nums;
46
- justify-self: end;
47
- line-height: var(--a-font-leading-normal);
48
- }
49
-
50
- progress-ui {
51
- grid-area: bar;
52
- /* Pipe our component token into the nested progress component's token */
53
- --progress-fill-bg: var(--progress-row-fill-bg);
54
- }
55
-
56
- /* Variants — remap own tokens only; the nested progress inherits via --progress-row-fill-bg. */
57
- :scope[variant="success"] { --progress-row-fill-bg: var(--a-success-bg); }
58
- :scope[variant="warning"] { --progress-row-fill-bg: var(--a-warning-bg); }
59
- :scope[variant="danger"] { --progress-row-fill-bg: var(--a-danger-bg); }
60
- }