@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
@@ -1,175 +0,0 @@
1
- # Generated by scripts/migrate-yamls-to-v1.mjs — migrated to v1 contract.
2
- # Edit this file; run `npm run build:components` to regenerate a2ui.json.
3
- $schema: ../../../../scripts/schemas/component.yaml.schema.json
4
- name: UIColorPicker
5
- tag: color-picker-ui
6
- status: deprecated
7
- component: ColorPicker
8
- category: input
9
- version: 2
10
- description: >-
11
- DEPRECATED (ADR-0063, gh#1563, gh#1377 B11) — `-picker` is reserved for
12
- the outer, trigger + popover, form-associated composite shape
13
- (`calendar-picker-ui` / `date-range-picker-ui` / `datetime-picker-ui` /
14
- `time-picker-ui`); `color-picker-ui` was the sole violator, playing
15
- `calendar-grid-ui`'s inline-substrate role under a `-picker` name.
16
- `<color-picker-ui>` is now a thin `UIColorArea` subclass (see
17
- color-picker.class.js) rather than an independent implementation — every
18
- prop/event/token is inherited unchanged from `<color-area-ui>`. Existing
19
- markup keeps working, but new markup should reach for `<color-area-ui>`
20
- directly. See `<color-area-ui>` for the full contract.
21
- # Per ADR-0027 — primitives that programmatically create other primitives
22
- # do NOT auto-import them. Consumer (or demo shell) must explicitly import
23
- # the slider-ui module (same one <color-area-ui> itself needs — this alias
24
- # inherits its render(), not just its class).
25
- composes:
26
- - slider-ui
27
- props:
28
- # Every prop below is inherited VERBATIM from <color-area-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/gh#1563) resolves this against <color-area-ui>'s
34
- # own yaml, so re-declaring the inherited names here is documentation,
35
- # not a second runtime contract. Nothing overrides a default here (the
36
- # alias is byte-identical behavior; only the class/tag/component names
37
- # differ), unlike datetime-picker-ui's own two overridden defaults.
38
- name:
39
- description: Form field name
40
- type: string
41
- default: ""
42
- disabled:
43
- description: Disables all interaction
44
- type: boolean
45
- default: false
46
- reflect: true
47
- format:
48
- description: Output format for the value property
49
- type: string
50
- default: hex
51
- enum:
52
- - hex
53
- - oklch
54
- value:
55
- description: Current color as hex string
56
- type: string
57
- default: "#3b82f6"
58
- maxChroma:
59
- description: |
60
- Generation constraint (v0.4.9 §99h, FEEDBACK-02 #7) — clamp the
61
- OKLCH chroma channel to at most this value before commit. Out-of-
62
- bound mutations round-trip to the nearest in-bound equivalent +
63
- fire `constraint-clamp`. Default Infinity (no constraint).
64
- type: number
65
- default: Infinity
66
- reflect: true
67
- maxL:
68
- description: Generation constraint — clamp OKLCH lightness to at most this value (0..1). Default 1 (no constraint).
69
- type: number
70
- default: 1
71
- reflect: true
72
- minL:
73
- description: Generation constraint — clamp OKLCH lightness to at least this value (0..1). Default 0 (no constraint).
74
- type: number
75
- default: 0
76
- reflect: true
77
- hueDriftMax:
78
- description: |
79
- Generation constraint — maximum allowed signed-shortest-path hue
80
- deviation (degrees) from [base-hue] (or the first-committed hue
81
- if [base-hue] is unset). Default NaN (no constraint). Wrap-aware
82
- so a drift of 350 degrees resolves as -10.
83
- type: number
84
- default: NaN
85
- reflect: true
86
- baseHue:
87
- description: |
88
- Reference hue (degrees) for the [hue-drift-max] constraint. Default
89
- NaN — falls back to the picker's hue at first commit so the consumer
90
- can pre-seed the picker and constrain drift from that initial value.
91
- type: number
92
- default: NaN
93
- reflect: true
94
- events:
95
- change:
96
- description: Fired on every color change
97
- input:
98
- description: Fired during continuous interaction (drag)
99
- constraint-clamp:
100
- description: |
101
- Fired immediately before `change` / `input` when one or more
102
- consumer-declared constraints (max-chroma / max-l / min-l /
103
- hue-drift-max) clamped a channel away from the user-requested
104
- value. detail.clamps is an array of axis-specific clamp records.
105
- detail:
106
- clamps:
107
- type: array
108
- description: |
109
- Array of `{ axis, requested, clamped, reason }` objects. axis is
110
- one of "l" / "c" / "h". reason names the triggering constraint
111
- prop. Empty arrays are never emitted.
112
- slots: {}
113
- states:
114
- - name: idle
115
- description: Default, ready for interaction.
116
- - name: disabled
117
- description: Non-interactive; dimmed.
118
- attribute: disabled
119
- traits: []
120
- tokens: {} # No component-owned tokens — styling flows entirely through
121
- # <color-area-ui>'s own --color-area-* custom properties.
122
- requiredIcons:
123
- - copy
124
- - check
125
- - warning
126
- a2ui:
127
- rules:
128
- - rule: 'DEPRECATED — prefer `{"component": "ColorArea"}` over `{"component": "ColorPicker"}`. Both render and behave identically; ColorPicker is a thin compatibility alias.'
129
- reason: 'ADR-0063/gh#1377 B11 fold — steer new generation at the canonical primitive.'
130
- - rule: 'For simple color swatches (read-only display) use <swatch-ui>; for hex/rgb text input use <color-input-ui>.'
131
- reason: 'Surface boundary.'
132
- anti_patterns:
133
- - wrong: |
134
- {"component": "ColorPicker", "name": "brand"}
135
- why: |
136
- ColorPicker is deprecated (ADR-0063, gh#1563) — new generation should
137
- reach for ColorArea instead.
138
- fix: |
139
- {"component": "ColorArea", "name": "brand"}
140
- examples:
141
- - name: color-picker-legacy
142
- description: Deprecated tag — prefer ColorArea's own "color-area-demo" example for NEW markup.
143
- a2ui: >-
144
- [
145
- {
146
- "id": "root",
147
- "component": "Card",
148
- "children": [
149
- "sec"
150
- ]
151
- },
152
- {
153
- "id": "sec",
154
- "component": "Section",
155
- "children": [
156
- "cp"
157
- ]
158
- },
159
- {
160
- "id": "cp",
161
- "component": "ColorPicker",
162
- "value": "#3b82f6"
163
- }
164
- ]
165
- keywords:
166
- - colorpicker
167
- - color-picker
168
- - color
169
- - picker
170
- synonyms:
171
- color-picker: [color-canvas, color-surface, swatch-picker, color-area]
172
- related:
173
- - color-area
174
- - grid
175
- - button
@@ -1,256 +0,0 @@
1
- {
2
- "$schema": "https://json-schema.org/draft/2020-12/schema",
3
- "$id": "https://adiaui.dev/a2ui/v0_9/components/DatetimePicker.json",
4
- "title": "DatetimePicker",
5
- "description": "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.",
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
- "required": {
17
- "description": "Required for validation when inside a `<form>`.",
18
- "type": "boolean",
19
- "default": false
20
- },
21
- "component": {
22
- "const": "DatetimePicker"
23
- },
24
- "disabled": {
25
- "description": "Block all interaction. Trigger remains rendered but does not open the popover.",
26
- "type": "boolean",
27
- "default": false
28
- },
29
- "format": {
30
- "description": "Trigger button date format. `short`: `Jan 1, 2026 14:30`; `long`: `January 1, 2026 14:30`; `iso`: full ISO string.",
31
- "type": "string",
32
- "enum": [
33
- "short",
34
- "long",
35
- "iso"
36
- ],
37
- "default": "short"
38
- },
39
- "hourcycle": {
40
- "description": "Hour cycle for the time pane. Empty (default) derives from the\ndocument locale. `h12` forces a 12-hour cycle with an AM/PM\n(meridiem) segment; `h23` forces 24-hour cycle.\n",
41
- "type": "string",
42
- "enum": [
43
- "",
44
- "h12",
45
- "h23"
46
- ],
47
- "default": ""
48
- },
49
- "locale": {
50
- "description": "BCP-47 locale tag used to derive hour-cycle when `hour-cycle` is empty. Falls back to `<html lang>` then to browser default.",
51
- "type": "string",
52
- "default": ""
53
- },
54
- "max": {
55
- "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.",
56
- "type": "string",
57
- "default": ""
58
- },
59
- "min": {
60
- "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.",
61
- "type": "string",
62
- "default": ""
63
- },
64
- "name": {
65
- "description": "Form field name. The ISO 8601 datetime is submitted under this key when the picker is inside a `<form>`.",
66
- "type": "string",
67
- "default": ""
68
- },
69
- "open": {
70
- "description": "Whether the popover is currently open.",
71
- "type": "boolean",
72
- "default": false
73
- },
74
- "placeholder": {
75
- "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>`).",
76
- "type": "string",
77
- "default": "Select date and time"
78
- },
79
- "placement": {
80
- "description": "Popover placement relative to the trigger. Default `bottom` centers the calendar+time panel under the trigger (ADR-0034 Rule 2 — ~600px panel >> trigger).",
81
- "type": "string",
82
- "enum": [
83
- "top",
84
- "bottom",
85
- "left",
86
- "right",
87
- "top-start",
88
- "top-end",
89
- "bottom-start",
90
- "bottom-end"
91
- ],
92
- "default": "bottom"
93
- },
94
- "precision": {
95
- "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).",
96
- "type": "string",
97
- "enum": [
98
- "date",
99
- "minute",
100
- "second"
101
- ],
102
- "default": "minute"
103
- },
104
- "readonly": {
105
- "description": "Block edits; allow keyboard navigation for screen-reader inspection.",
106
- "type": "boolean",
107
- "default": false
108
- },
109
- "step": {
110
- "description": "Per-Arrow-keypress increment in seconds for the time pane. 60 = minute precision (default), 900 = 15-minute, 1 = second precision.",
111
- "type": "number",
112
- "default": 60
113
- },
114
- "value": {
115
- "description": "Current value as ISO 8601 datetime (\"YYYY-MM-DDTHH:mm\" or \"YYYY-MM-DDTHH:mm:ss\"). Empty when no value selected.",
116
- "$ref": "common_types.json#/$defs/DynamicString"
117
- }
118
- },
119
- "required": [
120
- "component"
121
- ],
122
- "unevaluatedProperties": false,
123
- "x-adiaui": {
124
- "anti_patterns": [
125
- {
126
- "fix": "{\"component\": \"DatetimePicker\", \"value\": \"2026-05-24T00:00\"}\n",
127
- "why": "`value` is a date-only string — no time component. The contract requires\na full ISO 8601 datetime including the `T` and time segment.\n",
128
- "wrong": "{\"component\": \"DatetimePicker\", \"value\": \"2026-05-24\"}\n"
129
- },
130
- {
131
- "fix": "{\"component\": \"CalendarPicker\", \"precision\": \"minute\", \"name\": \"appointment\"}\n",
132
- "why": "DatetimePicker is deprecated (gh#1372) — new generation should reach\nfor CalendarPicker's widened precision axis instead.\n",
133
- "wrong": "{\"component\": \"DatetimePicker\", \"name\": \"appointment\"}\n"
134
- }
135
- ],
136
- "category": "input",
137
- "composes": [
138
- "calendar-grid-ui",
139
- "time-picker-ui",
140
- "divider-ui"
141
- ],
142
- "events": {
143
- "change": {
144
- "description": "Fired when the value commits (date picked + time edited, OR Apply clicked in explicit-commit mode).",
145
- "detail": {
146
- "value": "string"
147
- }
148
- },
149
- "close": {
150
- "description": "Popover closed (without commit, or after commit).",
151
- "detail": {
152
- "reason": "string"
153
- }
154
- },
155
- "input": {
156
- "description": "Fired during partial selection (date picked but time still pending, or vice versa).",
157
- "detail": {
158
- "value": "string"
159
- }
160
- },
161
- "invalid": {
162
- "description": "A constraint failed (out of range, parse error).",
163
- "detail": {
164
- "reason": "string",
165
- "value": "string"
166
- }
167
- },
168
- "open": {
169
- "description": "Popover opened (user clicked the trigger or pressed Enter / Space).",
170
- "detail": {
171
- "trigger": "string"
172
- }
173
- }
174
- },
175
- "examples": [
176
- {
177
- "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.",
178
- "a2ui": "[\n {\n \"id\": \"field\",\n \"component\": \"Field\",\n \"label\": \"Appointment\",\n \"children\": [\"dt\"]\n },\n {\n \"id\": \"dt\",\n \"component\": \"DatetimePicker\",\n \"name\": \"appointment\",\n \"min\": \"2026-01-01T00:00\",\n \"max\": \"2026-12-31T23:59\"\n }\n]\n",
179
- "name": "canonical"
180
- }
181
- ],
182
- "keywords": [
183
- "datetimepicker",
184
- "datetime-picker",
185
- "datetime",
186
- "date-time",
187
- "dateandtime",
188
- "appointment",
189
- "schedule",
190
- "timestamp"
191
- ],
192
- "name": "UIDatetimePicker",
193
- "parts": {},
194
- "related": [
195
- "calendar-picker",
196
- "time-picker",
197
- "date-range-picker",
198
- "popover",
199
- "field",
200
- "button"
201
- ],
202
- "slots": {
203
- "footer": {
204
- "description": "Optional Apply / Cancel buttons for explicit-commit flows. Spans both panes below the calendar + time area."
205
- },
206
- "trigger": {
207
- "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)."
208
- }
209
- },
210
- "states": [
211
- {
212
- "description": "Closed, no pending selection.",
213
- "name": "idle"
214
- },
215
- {
216
- "description": "Popover open.",
217
- "attribute": "open",
218
- "name": "open"
219
- },
220
- {
221
- "description": "Non-interactive; dimmed.",
222
- "attribute": "disabled",
223
- "name": "disabled"
224
- },
225
- {
226
- "description": "Read-only; trigger keyboard-focusable but popover does not open.",
227
- "attribute": "readonly",
228
- "name": "readonly"
229
- }
230
- ],
231
- "status": "deprecated",
232
- "synonyms": {
233
- "appointment": [
234
- "datetime",
235
- "meeting",
236
- "schedule"
237
- ],
238
- "datetime": [
239
- "date-time",
240
- "timestamp",
241
- "appointment",
242
- "schedule"
243
- ],
244
- "tags": [
245
- "DateTimePicker",
246
- "DateTimeInput",
247
- "DatetimeInput",
248
- "Timestamp"
249
- ]
250
- },
251
- "tag": "datetime-picker-ui",
252
- "tokens": {},
253
- "traits": [],
254
- "version": 2
255
- }
256
- }
@@ -1,58 +0,0 @@
1
- /**
2
- * Non-side-effect class export for `<datetime-picker-ui>`.
3
- *
4
- * Importing this file gives you the class 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/datetime-picker`
9
- * (which imports this file + calls `defineIfFree()`).
10
- *
11
- * @see ../../USAGE.md#registration--auto-vs-explicit
12
- */
13
-
14
- /**
15
- * <datetime-picker-ui> — DEPRECATED (gh#1372, #1363 C3c).
16
- *
17
- * `<datetime-picker-ui>`'s full surface — trigger + popover, a
18
- * `<calendar-grid-ui>` date pane + `<divider-ui>` + `<time-picker-ui>` time
19
- * pane, form participation, constraint validation, the
20
- * open/close/input/invalid event set — folded into `<calendar-picker-ui>`
21
- * behind its widened `precision` axis (`date` | `minute` | `second`).
22
- * `<datetime-picker-ui>` is now a thin compatibility alias per ADR-0057
23
- * (`status: deprecated`): it subclasses `UICalendarPicker` directly rather
24
- * than re-implementing any of that behavior, and only overrides the two
25
- * defaults that made it feel like a distinct primitive — `precision`
26
- * defaults to `"minute"` (not `"date"`) and `placeholder` defaults to
27
- * `"Select date and time"`.
28
- *
29
- * Migrate: `<datetime-picker-ui>` → `<calendar-picker-ui precision="minute">`
30
- * (or `precision="second"` for the former second-precision mode). This tag
31
- * keeps working — it IS `<calendar-picker-ui>` under the hood — but will be
32
- * removed in a future major; new markup should reach for
33
- * `<calendar-picker-ui>` directly.
34
- *
35
- * @see ../calendar-picker/calendar-picker.class.js
36
- */
37
-
38
- import { UICalendarPicker } from '../calendar-picker/calendar-picker.class.js';
39
-
40
- export class UIDatetimePicker extends UICalendarPicker {
41
- // static labelDeprecated is inherited unchanged from UICalendarPicker —
42
- // this subclass adds no authored [label] attribute handling of its own.
43
-
44
- // Same value as UICalendarPicker's — the alias stamps no icon of its own —
45
- // but restated literally because scripts/release/check-required-icons.mjs
46
- // text-scans each component's own class.js and cannot resolve inheritance
47
- // (gh#1503).
48
- static requiredIcons = ['calendar'];
49
-
50
- static properties = {
51
- ...UICalendarPicker.properties,
52
- // The only two defaults that differ from the folded-into base class —
53
- // everything else (min/max/step/hourcycle/locale/open/format/
54
- // placement/readonly/etc.) is inherited unchanged.
55
- precision: { type: String, default: 'minute', reflect: true },
56
- placeholder: { type: String, default: 'Select date and time', reflect: true },
57
- };
58
- }
@@ -1,11 +0,0 @@
1
- /* `<datetime-picker-ui>` is DEPRECATED (gh#1372, #1363 C3c) — a thin
2
- * `UICalendarPicker` subclass (see datetime-picker.class.js), never its own
3
- * independent implementation. Its visual contract lives entirely in
4
- * ../calendar-picker/calendar-picker.css, whose `@scope (calendar-picker-ui,
5
- * datetime-picker-ui)` root and `:is(calendar-picker-ui, datetime-picker-ui)`
6
- * popover/pane selectors already cover this tag — one styling source, not
7
- * two files drifting apart. This file intentionally carries no rules of its
8
- * own; `packages/web-components/index.css` still imports it so the barrel's
9
- * per-component import list stays complete and mechanical (no special-cased
10
- * skip for a deprecated-but-still-shipping tag).
11
- */
@@ -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
- }
@@ -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
- ```
@@ -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 };