@adia-ai/web-components 0.6.36 → 0.6.38

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 (159) hide show
  1. package/CHANGELOG.md +48 -1
  2. package/components/accordion/accordion-item.a2ui.json +3 -0
  3. package/components/accordion/accordion-item.yaml +5 -0
  4. package/components/action-list/action-item.a2ui.json +5 -1
  5. package/components/action-list/action-item.yaml +7 -0
  6. package/components/badge/badge.a2ui.json +10 -0
  7. package/components/badge/badge.css +70 -0
  8. package/components/badge/badge.yaml +20 -0
  9. package/components/blockquote/blockquote.a2ui.json +121 -0
  10. package/components/blockquote/blockquote.class.js +68 -0
  11. package/components/blockquote/blockquote.css +46 -0
  12. package/components/blockquote/blockquote.d.ts +31 -0
  13. package/components/blockquote/blockquote.js +17 -0
  14. package/components/blockquote/blockquote.yaml +124 -0
  15. package/components/button/button.css +11 -3
  16. package/components/calendar-picker/calendar-picker.a2ui.json +15 -0
  17. package/components/calendar-picker/calendar-picker.class.js +7 -1
  18. package/components/calendar-picker/calendar-picker.yaml +14 -0
  19. package/components/card/card.a2ui.json +17 -1
  20. package/components/card/card.yaml +24 -1
  21. package/components/color-input/color-input.a2ui.json +2 -2
  22. package/components/color-input/color-input.class.js +9 -2
  23. package/components/color-input/color-input.yaml +2 -2
  24. package/components/combobox/combobox.class.js +4 -0
  25. package/components/context-menu/context-menu.a2ui.json +159 -0
  26. package/components/context-menu/context-menu.class.js +275 -0
  27. package/components/context-menu/context-menu.css +56 -0
  28. package/components/context-menu/context-menu.d.ts +70 -0
  29. package/components/context-menu/context-menu.js +17 -0
  30. package/components/context-menu/context-menu.yaml +136 -0
  31. package/components/date-range-picker/date-range-picker.a2ui.json +15 -0
  32. package/components/date-range-picker/date-range-picker.class.js +2 -0
  33. package/components/date-range-picker/date-range-picker.yaml +14 -0
  34. package/components/datetime-picker/datetime-picker.a2ui.json +15 -0
  35. package/components/datetime-picker/datetime-picker.class.js +3 -1
  36. package/components/datetime-picker/datetime-picker.d.ts +2 -0
  37. package/components/datetime-picker/datetime-picker.yaml +14 -0
  38. package/components/empty-state/empty-state.a2ui.json +9 -0
  39. package/components/empty-state/empty-state.class.js +2 -0
  40. package/components/empty-state/empty-state.yaml +15 -0
  41. package/components/feed/feed-item.a2ui.json +5 -0
  42. package/components/feed/feed-item.yaml +10 -0
  43. package/components/feed/feed.class.js +13 -5
  44. package/components/feed/feed.css +14 -0
  45. package/components/field/field.a2ui.json +6 -0
  46. package/components/field/field.yaml +10 -0
  47. package/components/index.js +11 -0
  48. package/components/inline-edit/inline-edit.a2ui.json +159 -0
  49. package/components/inline-edit/inline-edit.class.js +184 -0
  50. package/components/inline-edit/inline-edit.css +62 -0
  51. package/components/inline-edit/inline-edit.d.ts +52 -0
  52. package/components/inline-edit/inline-edit.js +12 -0
  53. package/components/inline-edit/inline-edit.yaml +125 -0
  54. package/components/integration-card/integration-card.class.js +9 -0
  55. package/components/integration-card/integration-card.test.js +4 -3
  56. package/components/list/list-item.a2ui.json +8 -1
  57. package/components/list/list-item.yaml +12 -0
  58. package/components/list/list.css +36 -6
  59. package/components/mark/mark.a2ui.json +109 -0
  60. package/components/mark/mark.class.js +22 -0
  61. package/components/mark/mark.css +39 -0
  62. package/components/mark/mark.d.ts +27 -0
  63. package/components/mark/mark.js +12 -0
  64. package/components/mark/mark.yaml +87 -0
  65. package/components/modal/modal.a2ui.json +9 -0
  66. package/components/modal/modal.yaml +14 -0
  67. package/components/nav-group/nav-group.a2ui.json +3 -0
  68. package/components/nav-group/nav-group.css +7 -1
  69. package/components/nav-group/nav-group.yaml +5 -0
  70. package/components/nav-item/nav-item.a2ui.json +3 -0
  71. package/components/nav-item/nav-item.yaml +5 -0
  72. package/components/number-format/number-format.a2ui.json +180 -0
  73. package/components/number-format/number-format.class.js +96 -0
  74. package/components/number-format/number-format.css +18 -0
  75. package/components/number-format/number-format.d.ts +68 -0
  76. package/components/number-format/number-format.js +17 -0
  77. package/components/number-format/number-format.yaml +204 -0
  78. package/components/pagination/pagination.a2ui.json +19 -2
  79. package/components/pagination/pagination.class.js +90 -37
  80. package/components/pagination/pagination.css +32 -127
  81. package/components/pagination/pagination.d.ts +8 -2
  82. package/components/pagination/pagination.test.js +195 -0
  83. package/components/pagination/pagination.yaml +22 -1
  84. package/components/password-strength/password-strength.a2ui.json +152 -0
  85. package/components/password-strength/password-strength.class.js +157 -0
  86. package/components/password-strength/password-strength.css +80 -0
  87. package/components/password-strength/password-strength.d.ts +59 -0
  88. package/components/password-strength/password-strength.js +17 -0
  89. package/components/password-strength/password-strength.yaml +153 -0
  90. package/components/popover/popover.css +43 -23
  91. package/components/popover/popover.yaml +8 -4
  92. package/components/qr-code/QR-TEST.svg +4 -0
  93. package/components/qr-code/qr-code.a2ui.json +154 -0
  94. package/components/qr-code/qr-code.class.js +129 -0
  95. package/components/qr-code/qr-code.css +41 -0
  96. package/components/qr-code/qr-code.d.ts +83 -0
  97. package/components/qr-code/qr-code.js +17 -0
  98. package/components/qr-code/qr-code.yaml +203 -0
  99. package/components/qr-code/qr-encoder.js +633 -0
  100. package/components/relative-time/relative-time.a2ui.json +120 -0
  101. package/components/relative-time/relative-time.class.js +136 -0
  102. package/components/relative-time/relative-time.css +22 -0
  103. package/components/relative-time/relative-time.d.ts +51 -0
  104. package/components/relative-time/relative-time.js +17 -0
  105. package/components/relative-time/relative-time.yaml +133 -0
  106. package/components/segmented/segmented.class.js +15 -3
  107. package/components/select/select.a2ui.json +3 -0
  108. package/components/select/select.class.js +4 -0
  109. package/components/select/select.yaml +5 -0
  110. package/components/skip-nav/skip-nav.a2ui.json +92 -0
  111. package/components/skip-nav/skip-nav.class.js +45 -0
  112. package/components/skip-nav/skip-nav.css +54 -0
  113. package/components/skip-nav/skip-nav.d.ts +27 -0
  114. package/components/skip-nav/skip-nav.js +12 -0
  115. package/components/skip-nav/skip-nav.yaml +68 -0
  116. package/components/slider/slider.a2ui.json +22 -1
  117. package/components/slider/slider.class.js +264 -122
  118. package/components/slider/slider.css +82 -2
  119. package/components/slider/slider.d.ts +19 -3
  120. package/components/slider/slider.test.js +55 -0
  121. package/components/slider/slider.yaml +38 -6
  122. package/components/stat/stat.css +18 -14
  123. package/components/stepper/stepper-item.a2ui.json +3 -0
  124. package/components/stepper/stepper-item.yaml +5 -0
  125. package/components/table/table.class.js +29 -6
  126. package/components/table/table.css +31 -4
  127. package/components/table-toolbar/table-toolbar.class.js +3 -1
  128. package/components/tag/tag.a2ui.json +3 -2
  129. package/components/tag/tag.css +35 -11
  130. package/components/tag/tag.d.ts +14 -0
  131. package/components/tag/tag.test.js +35 -11
  132. package/components/tag/tag.yaml +13 -7
  133. package/components/timeline/timeline-item.a2ui.json +8 -1
  134. package/components/timeline/timeline-item.yaml +12 -0
  135. package/components/toast/toast.class.js +12 -4
  136. package/components/toc/toc.a2ui.json +159 -0
  137. package/components/toc/toc.class.js +222 -0
  138. package/components/toc/toc.css +92 -0
  139. package/components/toc/toc.d.ts +61 -0
  140. package/components/toc/toc.js +17 -0
  141. package/components/toc/toc.yaml +180 -0
  142. package/components/toolbar/toolbar.class.js +3 -0
  143. package/components/tree/tree-item.a2ui.json +5 -1
  144. package/components/tree/tree-item.yaml +7 -0
  145. package/components/tree/tree.a2ui.json +3 -0
  146. package/components/tree/tree.yaml +5 -0
  147. package/components/visually-hidden/visually-hidden.a2ui.json +71 -0
  148. package/components/visually-hidden/visually-hidden.class.js +14 -0
  149. package/components/visually-hidden/visually-hidden.css +25 -0
  150. package/components/visually-hidden/visually-hidden.d.ts +26 -0
  151. package/components/visually-hidden/visually-hidden.js +12 -0
  152. package/components/visually-hidden/visually-hidden.yaml +54 -0
  153. package/core/anchor.js +19 -3
  154. package/dist/web-components.min.css +1 -1
  155. package/dist/web-components.min.js +100 -89
  156. package/package.json +1 -1
  157. package/styles/colors/semantics.css +11 -2
  158. package/styles/components.css +11 -0
  159. package/styles/resets.css +10 -0
package/components/skip-nav/skip-nav.class.js ADDED
@@ -0,0 +1,45 @@
1
+ /**
2
+ * `<skip-nav-ui>` — keyboard skip-link for WCAG 2.4.1 (Bypass Blocks).
3
+ *
4
+ * Renders an <a href="[target]"> that's visually hidden until focused,
5
+ * then pops to the top-left of the viewport. On click, the browser
6
+ * navigates to the target hash AND we move focus programmatically (the
7
+ * native hash-jump doesn't always move focus; per spec it should land
8
+ * on the target so a screen-reader resumes there).
9
+ */
10
+
11
+ import { UIElement, html } from '../../core/element.js';
12
+
13
+ export class UISkipNav extends UIElement {
14
+ static properties = {
15
+ target: { type: String, default: '#main', reflect: true },
16
+ text: { type: String, default: 'Skip to main content', reflect: true },
17
+ };
18
+
19
+ static template = ({ target, text }) => html`<a href="${target}" data-skip-link>${text}</a>`;
20
+
21
+ connected() {
22
+ super.connected();
23
+ this.addEventListener('click', this.#onClick);
24
+ }
25
+
26
+ disconnected() {
27
+ super.disconnected();
28
+ this.removeEventListener('click', this.#onClick);
29
+ }
30
+
31
+ #onClick = (e) => {
32
+ const link = e.target.closest('[data-skip-link]');
33
+ if (!link) return;
34
+ const id = this.target.replace(/^#/, '');
35
+ const tgt = document.getElementById(id);
36
+ if (!tgt) return;
37
+ // Don't preventDefault — browser still updates the hash for the
38
+ // back-button. But we ALSO focus the target so AT cursor moves there
39
+ // (browser hash-jump scrolls but doesn't always move focus).
40
+ queueMicrotask(() => {
41
+ if (!tgt.hasAttribute('tabindex')) tgt.setAttribute('tabindex', '-1');
42
+ tgt.focus({ preventScroll: false });
43
+ });
44
+ };
45
+ }
package/components/skip-nav/skip-nav.css ADDED
@@ -0,0 +1,54 @@
1
+ @scope (skip-nav-ui) {
2
+ :where(:scope) {
3
+ --skip-nav-bg-default: var(--a-accent-bg);
4
+ --skip-nav-fg-default: var(--a-accent-fg);
5
+ }
6
+
7
+ /* Host renders nothing in flow — pure behavioral wrapper. The inner
8
+ <a> is position:fixed (anchored to viewport) and sr-only by default;
9
+ becomes visible only on keyboard focus. */
10
+ :scope {
11
+ display: contents;
12
+ }
13
+
14
+ :scope a {
15
+ /* sr-only — same canonical pattern as visually-hidden-ui. */
16
+ position: fixed;
17
+ top: 0;
18
+ left: 0;
19
+ z-index: 9999;
20
+ width: 1px;
21
+ height: 1px;
22
+ padding: 0;
23
+ margin: -1px;
24
+ overflow: hidden;
25
+ clip: rect(0, 0, 0, 0);
26
+ clip-path: inset(100%);
27
+ white-space: nowrap;
28
+ border: 0;
29
+ /* Visible-state colors set here so the focus rule doesn't have to
30
+ re-set them; UA's default <a> color is overridden either way. */
31
+ background: var(--skip-nav-bg, var(--skip-nav-bg-default));
32
+ color: var(--skip-nav-fg, var(--skip-nav-fg-default));
33
+ text-decoration: none;
34
+ border-radius: var(--a-radius-md);
35
+ font-weight: var(--a-weight-medium);
36
+ }
37
+
38
+ :scope a:focus-visible,
39
+ :scope a:focus {
40
+ /* Reveal — drop the sr-only clip + restore intrinsic size + nudge
41
+ down/right from the viewport edge so it doesn't kiss the corner. */
42
+ top: var(--a-space-2);
43
+ left: var(--a-space-2);
44
+ width: auto;
45
+ height: auto;
46
+ padding: var(--a-space-2) var(--a-space-3);
47
+ margin: 0;
48
+ overflow: visible;
49
+ clip: auto;
50
+ clip-path: none;
51
+ outline: 2px solid var(--a-accent-bg);
52
+ outline-offset: 2px;
53
+ }
54
+ }
package/components/skip-nav/skip-nav.d.ts ADDED
@@ -0,0 +1,27 @@
1
+ /**
2
+ * `<skip-nav-ui>` — Accessibility utility — visually-hidden link that becomes visible on
3
+ keyboard focus, letting keyboard users skip past repetitive navigation
4
+ to the main content. WCAG 2.1 Success Criterion 2.4.1 "Bypass Blocks".
5
+
6
+ Place as the FIRST focusable element on the page (typically inside
7
+ `<body>` before any nav / shell chrome). Target an `id` on your main
8
+ content region (commonly `#main` / `#main-content`).
9
+
10
+ *
11
+ * @see https://ui-kit.exe.xyz/site/components/skip-nav
12
+ *
13
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
14
+ * the component's `.a2ui.json` sidecar(s). Edit the source `.yaml`,
15
+ * run `npm run build:components`, then `npm run codegen:dts` to
16
+ * regenerate; or hand-author this file fully if rich event types are
17
+ * needed beyond what the yaml `events:` block can express.
18
+ */
19
+
20
+ import { UIElement } from '../../core/element.js';
21
+
22
+ export class UISkipNav extends UIElement {
23
+ /** CSS id (with leading `#`) of the main content region the link skips to. */
24
+ target: string;
25
+ /** Link label. Defaults to "Skip to main content"; localize per site. */
26
+ text: string;
27
+ }
package/components/skip-nav/skip-nav.js ADDED
@@ -0,0 +1,12 @@
1
+ /**
2
+ * `<skip-nav-ui>` — auto-registers the tag on import.
3
+ *
4
+ * @see ../../USAGE.md#registration--auto-vs-explicit
5
+ */
6
+
7
+ import { defineIfFree } from '../../core/register.js';
8
+ import { UISkipNav } from './skip-nav.class.js';
9
+
10
+ defineIfFree('skip-nav-ui', UISkipNav);
11
+
12
+ export { UISkipNav };
package/components/skip-nav/skip-nav.yaml ADDED
@@ -0,0 +1,68 @@
1
+ $schema: ../../../../scripts/schemas/component.yaml.schema.json
2
+ name: UISkipNav
3
+ tag: skip-nav-ui
4
+ status: stable
5
+ component: SkipNav
6
+ category: utility
7
+ version: 1
8
+ description: |
9
+ Accessibility utility — visually-hidden link that becomes visible on
10
+ keyboard focus, letting keyboard users skip past repetitive navigation
11
+ to the main content. WCAG 2.1 Success Criterion 2.4.1 "Bypass Blocks".
12
+
13
+ Place as the FIRST focusable element on the page (typically inside
14
+ `<body>` before any nav / shell chrome). Target an `id` on your main
15
+ content region (commonly `#main` / `#main-content`).
16
+ props:
17
+ target:
18
+ description: 'CSS id (with leading `#`) of the main content region the link skips to.'
19
+ type: string
20
+ default: "#main"
21
+ reflect: true
22
+ text:
23
+ description: 'Link label. Defaults to "Skip to main content"; localize per site.'
24
+ type: string
25
+ default: "Skip to main content"
26
+ reflect: true
27
+ events: {}
28
+ slots: {}
29
+ states:
30
+ - name: idle
31
+ description: Default — link is visually hidden but focusable.
32
+ - name: focused
33
+ description: Link is focused via keyboard and visible at the top of the viewport.
34
+ attribute: ':focus-within'
35
+ traits: []
36
+ tokens:
37
+ --skip-nav-bg:
38
+ description: Background of the visible (focused) skip link.
39
+ default: var(--a-accent-bg)
40
+ --skip-nav-fg:
41
+ description: Foreground of the visible (focused) skip link.
42
+ default: var(--a-accent-fg)
43
+ a2ui:
44
+ rules:
45
+ - rule: 'Place as the FIRST focusable element on the page — inside <body> before any nav / shell chrome. Otherwise keyboard users still tab through the nav before hitting the skip link.'
46
+ reason: 'WCAG 2.4.1 — the bypass must come BEFORE the block being bypassed.'
47
+ - rule: 'Target [#main] (or whatever id wraps the routed content). The target element should have tabindex="-1" so focus lands on it after the link is activated (otherwise focus may move to nothing perceptible).'
48
+ reason: 'Programmatic focus needs a focusable target.'
49
+ anti_patterns:
50
+ - wrong: '<header>…nav…</header><skip-nav-ui></skip-nav-ui><main id="main">…</main>'
51
+ why: 'The skip link comes AFTER the nav — keyboard users have already tabbed through everything you wanted them to skip.'
52
+ fix: '<body><skip-nav-ui></skip-nav-ui><header>…nav…</header><main id="main" tabindex="-1">…</main></body>'
53
+ examples:
54
+ - name: default
55
+ description: Standard skip-nav at the top of the page.
56
+ a2ui: |
57
+ [
58
+ { "id": "skip", "component": "SkipNav", "target": "#main" }
59
+ ]
60
+ keywords:
61
+ - skip-nav
62
+ - skip-link
63
+ - bypass-blocks
64
+ - a11y
65
+ - accessibility
66
+ - keyboard-navigation
67
+ related:
68
+ - visually-hidden
package/components/slider/slider.a2ui.json CHANGED
@@ -26,6 +26,11 @@
26
26
  "type": "boolean",
27
27
  "default": false
28
28
  },
29
+ "dual": {
30
+ "description": "Two-thumb range slider mode. When enabled, [lower-value] and\n[upper-value] are authoritative and [value] is ignored. The fill\nrenders between the two thumbs (not from left to thumb). Form-data\nunder [name] serializes as \"<lower>,<upper>\". Use for price filters,\ndate ranges, audio range gates, etc.",
31
+ "type": "boolean",
32
+ "default": false
33
+ },
29
34
  "error": {
30
35
  "description": "Validation error",
31
36
  "type": "string",
@@ -41,6 +46,11 @@
41
46
  "type": "string",
42
47
  "default": ""
43
48
  },
49
+ "lowerValue": {
50
+ "description": "Lower thumb value (dual mode only; clamped to ≤ [upper-value]).",
51
+ "type": "number",
52
+ "default": 0
53
+ },
44
54
  "max": {
45
55
  "description": "Maximum slider value",
46
56
  "type": "number",
@@ -71,8 +81,13 @@
71
81
  "type": "number",
72
82
  "default": 0
73
83
  },
84
+ "upperValue": {
85
+ "description": "Upper thumb value (dual mode only; clamped to ≥ [lower-value]).",
86
+ "type": "number",
87
+ "default": 100
88
+ },
74
89
  "value": {
75
- "description": "Current slider value",
90
+ "description": "Current slider value (single-thumb mode; ignored when [dual] is set)",
76
91
  "type": "number",
77
92
  "default": 50
78
93
  }
@@ -118,6 +133,12 @@
118
133
  "embed"
119
134
  ],
120
135
  "slots": {
136
+ "header": {
137
+ "description": "Wholesale override of the stamped label + value-readout header row. Use only when full custom-header markup is needed; otherwise prefer the granular `label` / `value` slots and the [label] attribute."
138
+ },
139
+ "hint": {
140
+ "description": "Override slot for hint markup richer than the plain [hint] attribute string (inline links, code spans). Renders beneath the slider at body-subtle typography. Mutually exclusive with [hint]."
141
+ },
121
142
  "input": {
122
143
  "description": "Native range input element"
123
144
  },