@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.
- package/CHANGELOG.md +14 -0
- package/MIGRATION.md +130 -80
- package/USAGE.md +1 -1
- package/color/index.js +1 -1
- package/components/action-list/action-item.a2ui.json +3 -8
- package/components/action-list/action-item.yaml +10 -16
- package/components/action-list/action-list.class.js +5 -61
- package/components/action-list/action-list.d.ts +1 -3
- package/components/button/button.yaml +1 -1
- package/components/calendar-picker/calendar-picker.a2ui.json +1 -1
- package/components/calendar-picker/calendar-picker.class.js +2 -3
- package/components/calendar-picker/calendar-picker.css +16 -18
- package/components/calendar-picker/calendar-picker.yaml +2 -2
- package/components/card/card.css +3 -3
- package/components/chart/chart.a2ui.json +3 -18
- package/components/chart/chart.class.js +4 -44
- package/components/chart/chart.d.ts +3 -9
- package/components/chart/chart.yaml +6 -31
- package/components/chart-legend/chart-legend.a2ui.json +3 -12
- package/components/chart-legend/chart-legend.class.js +10 -54
- package/components/chart-legend/chart-legend.d.ts +1 -3
- package/components/chart-legend/chart-legend.yaml +9 -19
- package/components/check/check.css +9 -0
- package/components/color-area/color-area.a2ui.json +1 -1
- package/components/color-area/color-area.class.js +2 -2
- package/components/color-area/color-area.css +4 -7
- package/components/color-area/color-area.d.ts +1 -1
- package/components/color-area/color-area.yaml +3 -3
- package/components/color-input/color-input.a2ui.json +1 -1
- package/components/color-input/color-input.class.js +1 -1
- package/components/color-input/color-input.yaml +2 -2
- package/components/drilldown/drilldown.a2ui.json +3 -0
- package/components/drilldown/drilldown.css +8 -1
- package/components/drilldown/drilldown.yaml +2 -0
- package/components/field/field.class.js +5 -5
- package/components/index.js +0 -4
- package/components/input/input.a2ui.json +4 -4
- package/components/input/input.class.js +8 -0
- package/components/input/input.css +6 -0
- package/components/input/input.yaml +11 -8
- package/components/menu/menu-item.a2ui.json +3 -8
- package/components/menu/menu-item.yaml +13 -21
- package/components/menu/menu.class.js +5 -27
- package/components/menu/menu.d.ts +1 -3
- package/components/pane/pane.a2ui.json +2 -12
- package/components/pane/pane.class.js +5 -30
- package/components/pane/pane.d.ts +3 -5
- package/components/pane/pane.yaml +7 -19
- package/components/progress/progress.a2ui.json +1 -1
- package/components/progress/progress.class.js +2 -2
- package/components/progress/progress.d.ts +1 -1
- package/components/progress/progress.yaml +2 -2
- package/components/radio/radio.css +7 -0
- package/components/search/search.css +10 -1
- package/components/segment/segment.a2ui.json +1 -2
- package/components/segment/segment.css +10 -0
- package/components/segment/segment.yaml +1 -2
- package/components/segmented/segmented.a2ui.json +1 -3
- package/components/segmented/segmented.class.js +2 -2
- package/components/segmented/segmented.yaml +2 -4
- package/components/select/select.css +6 -0
- package/components/step-progress/step-progress.yaml +1 -1
- package/components/switch/switch.css +8 -0
- package/components/table-toolbar/table-toolbar.a2ui.json +42 -1
- package/components/table-toolbar/table-toolbar.class.js +151 -11
- package/components/table-toolbar/table-toolbar.css +46 -0
- package/components/table-toolbar/table-toolbar.d.ts +13 -1
- package/components/table-toolbar/table-toolbar.yaml +104 -14
- package/components/textarea/textarea.css +4 -0
- package/components/time-picker/time-picker.yaml +3 -2
- package/components/tree/tree.yaml +1 -1
- package/components/upload/upload.class.js +16 -0
- package/components/upload/upload.d.ts +7 -0
- package/components/upload/upload.yaml +7 -3
- package/core/icons.js +2 -5
- package/custom-elements.json +101 -597
- package/dist/host.min.css +1 -1
- package/dist/host.sheet.js +1 -1
- package/dist/theme-provider.min.js +1 -1
- package/dist/web-components.min.css +1 -1
- package/dist/web-components.min.js +92 -89
- package/dist/web-components.sheet.js +1 -1
- package/index.d.ts +0 -15
- package/package.json +1 -1
- package/patterns/chart-in-card/chart-in-card.examples.html +10 -10
- package/patterns/conversion-funnel/conversion-funnel.html +2 -2
- package/patterns/editor-shell/editor-shell.examples.html +3 -3
- package/styles/colors/semantics/features.css +8 -1
- package/styles/components.css +0 -4
- package/traits/arrow-grid-nav/arrow-grid-nav.js +1 -1
- package/traits/resize-observer/resize-observer.js +1 -1
- package/components/color-picker/color-picker.a2ui.json +0 -148
- package/components/color-picker/color-picker.class.js +0 -46
- package/components/color-picker/color-picker.css +0 -14
- package/components/color-picker/color-picker.d.ts +0 -99
- package/components/color-picker/color-picker.examples.md +0 -19
- package/components/color-picker/color-picker.js +0 -17
- package/components/color-picker/color-picker.yaml +0 -175
- package/components/datetime-picker/datetime-picker.a2ui.json +0 -256
- package/components/datetime-picker/datetime-picker.class.js +0 -58
- package/components/datetime-picker/datetime-picker.css +0 -11
- package/components/datetime-picker/datetime-picker.d.ts +0 -87
- package/components/datetime-picker/datetime-picker.examples.md +0 -25
- package/components/datetime-picker/datetime-picker.js +0 -17
- package/components/datetime-picker/datetime-picker.yaml +0 -254
- package/components/progress-row/progress-row.a2ui.json +0 -107
- package/components/progress-row/progress-row.class.js +0 -118
- package/components/progress-row/progress-row.css +0 -60
- package/components/progress-row/progress-row.d.ts +0 -24
- package/components/progress-row/progress-row.examples.md +0 -7
- package/components/progress-row/progress-row.js +0 -17
- package/components/progress-row/progress-row.yaml +0 -85
- package/components/toggle-group/toggle-group.a2ui.json +0 -148
- package/components/toggle-group/toggle-group.class.js +0 -195
- package/components/toggle-group/toggle-group.css +0 -127
- package/components/toggle-group/toggle-group.d.ts +0 -50
- package/components/toggle-group/toggle-group.examples.md +0 -33
- package/components/toggle-group/toggle-group.js +0 -18
- package/components/toggle-group/toggle-group.yaml +0 -135
- package/components/toggle-group/toggle-option.a2ui.json +0 -86
- 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>`
|
|
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
|
|
19
|
-
*
|
|
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) —
|
|
2
|
-
*
|
|
3
|
-
*
|
|
4
|
-
|
|
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>`
|
|
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>`
|
|
19
|
-
|
|
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
|
|
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>`,
|
|
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>`,
|
|
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>`,
|
|
16
|
-
|
|
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
|
-
'
|
|
283
|
-
//
|
|
284
|
-
//
|
|
285
|
-
// tags
|
|
286
|
-
'color-area-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
|
|
package/components/index.js
CHANGED
|
@@ -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),
|
|
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\": \"
|
|
169
|
-
"why": "Same gap as \"date\" — no native datetime picker rendered. Use\
|
|
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
|
|
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
|
-
|
|
37
|
-
ColorInput/
|
|
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
|
|
295
|
-
|
|
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
|
-
|
|
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": "
|
|
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
|
|
342
|
-
|
|
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`
|
|
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 (
|
|
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`
|
|
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
|
|
68
|
-
|
|
69
|
-
rename — this is a distinct,
|
|
59
|
+
`[description]` prop if not slotted (ADR-0063, gh#1563 — the
|
|
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/
|
|
102
|
-
trailing slot overrides) for inline, non-popover command
|
|
103
|
-
it instead when the surface isn't a <menu-ui> popover
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
`subtitle`
|
|
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) — `
|
|
262
|
-
// ~20-component-corpus outlier using `subtitle`
|
|
263
|
-
//
|
|
264
|
-
//
|
|
265
|
-
//
|
|
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 [
|
|
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)\
|
|
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.
|
|
41
|
-
* deprecated dual-read alias
|
|
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) — `
|
|
63
|
-
//
|
|
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
|
|