@adia-ai/web-components 0.8.37 → 0.8.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.
- package/CHANGELOG.md +18 -0
- package/MIGRATION.md +6 -5
- package/README.md +3 -3
- package/bin/doc.mjs +27 -5
- package/components/card/card.css +1 -1
- package/components/drilldown/drilldown.a2ui.json +242 -0
- package/components/drilldown/drilldown.class.js +542 -0
- package/components/drilldown/drilldown.css +305 -0
- package/components/drilldown/drilldown.d.ts +68 -0
- package/components/drilldown/drilldown.examples.md +20 -0
- package/components/drilldown/drilldown.js +17 -0
- package/components/drilldown/drilldown.yaml +271 -0
- package/components/index.js +1 -0
- package/components/nav/nav.class.js +11 -8
- package/components/nav-item/nav-item.class.js +9 -6
- package/components/page/page.a2ui.json +13 -1
- package/components/page/page.css +113 -0
- package/components/page/page.yaml +30 -3
- package/custom-elements.json +183 -26
- package/dist/theme-provider.min.js +1 -1
- package/dist/web-components.min.css +1 -1
- package/dist/web-components.min.js +103 -84
- package/dist/web-components.sheet.js +1 -1
- package/package.json +1 -1
- package/patterns/bulk-action-toolbar/bulk-action-toolbar.examples.html +1 -1
- package/styles/components.css +1 -0
- package/traits/view-transition/view-transition.js +7 -0
package/custom-elements.json
CHANGED
|
@@ -241,7 +241,7 @@
|
|
|
241
241
|
"declarations": [
|
|
242
242
|
{
|
|
243
243
|
"kind": "class",
|
|
244
|
-
"description": "The Adia brand mark — a rounded square with the \"Adia\" wordmark cut out in a contrasting color. Token-driven: the background always reads as the current scheme's inverse surface, and the wordmark always reads as the current scheme's inverse foreground, so a single asset replaces separate light/dark/transparent static exports (gh `icon-ui` registry entry — icon-ui is the Phosphor-glyph registry only; this is a fixed, one-off brand image, a separate delivery shape.",
|
|
244
|
+
"description": "The Adia brand mark — a rounded square with the \"Adia\" wordmark cut out in a contrasting color. Token-driven: the background always reads as the current scheme's inverse surface, and the wordmark always reads as the current scheme's inverse foreground, so a single asset replaces separate light/dark/transparent static exports (gh#283). Not an `icon-ui` registry entry — icon-ui is the Phosphor-glyph registry only; this is a fixed, one-off brand image, a separate delivery shape.",
|
|
245
245
|
"name": "UIAdiaMark",
|
|
246
246
|
"tagName": "adia-mark-ui",
|
|
247
247
|
"superclass": {
|
|
@@ -285,7 +285,7 @@
|
|
|
285
285
|
"declarations": [
|
|
286
286
|
{
|
|
287
287
|
"kind": "class",
|
|
288
|
-
"description": "The Adia wordmark — the \"Adia\" text logotype rendered as inline SVG. Unlike `adia-mark-ui` (gh this is a standalone mark meant to sit directly on a surface: its fill defaults to the current scheme's on-surface foreground token (`--a-fg-strong`) rather than a fixed inverse pairing, so it reads correctly wherever it's placed — a login header, a footer, a splash screen — without needing a background chip (gh",
|
|
288
|
+
"description": "The Adia wordmark — the \"Adia\" text logotype rendered as inline SVG. Unlike `adia-mark-ui` (gh#283's fixed inverse-on-inverse square tile), this is a standalone mark meant to sit directly on a surface: its fill defaults to the current scheme's on-surface foreground token (`--a-fg-strong`) rather than a fixed inverse pairing, so it reads correctly wherever it's placed — a login header, a footer, a splash screen — without needing a background chip (gh#390).",
|
|
289
289
|
"name": "UIAdiaWordmark",
|
|
290
290
|
"tagName": "adia-wordmark-ui",
|
|
291
291
|
"superclass": {
|
|
@@ -884,7 +884,7 @@
|
|
|
884
884
|
"slots": [
|
|
885
885
|
{
|
|
886
886
|
"name": "content",
|
|
887
|
-
"description": "Alert body. For single-line text use the `text=` attribute (alert.js stamps a `<span slot=\"content\">` automatically). For structured banners use card-ui's section rhythm INSIDE the content element (gh `<footer>` (actions — right-aligned with its own step of air) children of the slotted wrapper; the component owns the gaps (`--alert-section-gap`, `--alert-footer-gap`), so spacing balances without per-banner col-ui/row-ui improvisation. Free-form content without those children lays out exactly as before."
|
|
887
|
+
"description": "Alert body. For single-line text use the `text=` attribute (alert.js stamps a `<span slot=\"content\">` automatically). For structured banners use card-ui's section rhythm INSIDE the content element (gh#507): semantic `<header>` (title), `<section>` (body), and `<footer>` (actions — right-aligned with its own step of air) children of the slotted wrapper; the component owns the gaps (`--alert-section-gap`, `--alert-footer-gap`), so spacing balances without per-banner col-ui/row-ui improvisation. Free-form content without those children lays out exactly as before."
|
|
888
888
|
},
|
|
889
889
|
{
|
|
890
890
|
"name": "leading",
|
|
@@ -938,7 +938,7 @@
|
|
|
938
938
|
"declarations": [
|
|
939
939
|
{
|
|
940
940
|
"kind": "class",
|
|
941
|
-
"description": "Persistent, anchored, elevated surface for chrome that must stay visible while a condition holds — floating bulk-action toolbars, undo bars, sticky wizard/commit footers. Distinct from <toast-ui> (auto-dismissing, notification semantics) and <modal-ui>/<drawer-ui> (blocking overlays with backdrop + focus-trap semantics). Default mode anchors [anchor] to the nearest scroll container via `position: sticky` — the shape gh bulk-action-toolbar pattern hand-rolled with card-ui + position:sticky. Opt into [viewport] for a surface that anchors to the browser viewport instead, promoted to the top layer via the Popover API (`popover=\"manual\"`) so it wins stacking over shell chrome without a z-index war. Visibility is [open] (default false, no auto-dismiss timer) — arbitrary content (typically <toolbar-ui> or <text-ui> + <button-ui>) rides the default slot.",
|
|
941
|
+
"description": "Persistent, anchored, elevated surface for chrome that must stay visible while a condition holds — floating bulk-action toolbars, undo bars, sticky wizard/commit footers. Distinct from <toast-ui> (auto-dismissing, notification semantics) and <modal-ui>/<drawer-ui> (blocking overlays with backdrop + focus-trap semantics). Default mode anchors [anchor] to the nearest scroll container via `position: sticky` — the shape gh#494's bulk-action-toolbar pattern hand-rolled with card-ui + position:sticky. Opt into [viewport] for a surface that anchors to the browser viewport instead, promoted to the top layer via the Popover API (`popover=\"manual\"`) so it wins stacking over shell chrome without a z-index war. Visibility is [open] (default false, no auto-dismiss timer) — arbitrary content (typically <toolbar-ui> or <text-ui> + <button-ui>) rides the default slot.",
|
|
942
942
|
"name": "UIAnchorBar",
|
|
943
943
|
"tagName": "anchor-bar-ui",
|
|
944
944
|
"superclass": {
|
|
@@ -1134,7 +1134,7 @@
|
|
|
1134
1134
|
"declarations": [
|
|
1135
1135
|
{
|
|
1136
1136
|
"kind": "class",
|
|
1137
|
-
"description": "Inline pill-shaped badge — READ-ONLY status flag, count, or notification dot. Text rendered via CSS `attr(text)`. Distinct from <tag-ui>, which is INTERACTIVE / removable and fires a `remove` event. Use badge-ui for status flags (Beta / New / Deprecated), notification counts, and unread indicators; use tag-ui for filter chips or user-managed labels. REGISTER (gh issue 845; weight revised gh the same geometry family — pill radius (`--a-radius-full`) and padding token rhythm are identical, so shape is NOT how you tell them apart. Typography is: badge is UPPERCASE, mono (kbd-ui's `--a-font-family-code` stack), medium weight, wide-tracked (`--a-font-tracking-wider`, 0.06em), tabular numerals for counts. Tag stays proportional sentence-case, also weight 500 — weight no longer distinguishes the two (gh the register split now. Neither component exposes a prop that crosses this line; the registers cannot be mixed à la carte. Remaining distinctions: badge is non-interactive and carries the semantic-color voice (status tones ARE the message, solid by default — gh default for family variants (gh family-less variant (gh",
|
|
1137
|
+
"description": "Inline pill-shaped badge — READ-ONLY status flag, count, or notification dot. Text rendered via CSS `attr(text)`. Distinct from <tag-ui>, which is INTERACTIVE / removable and fires a `remove` event. Use badge-ui for status flags (Beta / New / Deprecated), notification counts, and unread indicators; use tag-ui for filter chips or user-managed labels. REGISTER (gh issue 845; weight revised gh#866): badge and tag share the same geometry family — pill radius (`--a-radius-full`) and padding token rhythm are identical, so shape is NOT how you tell them apart. Typography is: badge is UPPERCASE, mono (kbd-ui's `--a-font-family-code` stack), medium weight, wide-tracked (`--a-font-tracking-wider`, 0.06em), tabular numerals for counts. Tag stays proportional sentence-case, also weight 500 — weight no longer distinguishes the two (gh#866); case + tracking + mono carry the register split now. Neither component exposes a prop that crosses this line; the registers cannot be mixed à la carte. Remaining distinctions: badge is non-interactive and carries the semantic-color voice (status tones ARE the message, solid by default — gh#864); tag is interactive/removable, muted/tinted by default for family variants (gh#864), solid by default for the family-less variant (gh#794, unaffected by gh#864).",
|
|
1138
1138
|
"name": "UIBadge",
|
|
1139
1139
|
"tagName": "badge-ui",
|
|
1140
1140
|
"superclass": {
|
|
@@ -1192,7 +1192,7 @@
|
|
|
1192
1192
|
"text": "string"
|
|
1193
1193
|
},
|
|
1194
1194
|
"default": "solid",
|
|
1195
|
-
"description": "Fill style — orthogonal to [variant]. Badge defaults to `solid` (gh default formulas; this restores badge's own). Three values: - `solid` (default) — saturated bg + on-strong text. The badge IS the state (status stamp). `primary` is badge's sole brand-emphasis variant (`accent` retired, gh - `muted` — tinted bg + scheme-paired text. Use for quiet metadata — counts, IDs, status pills in dense rows. Family-tinted `muted` (e.g. `variant=\"info\" tone=\"muted\"`) shares `<tag-ui>`'s `[tone=\"muted\"]` shape; family-less `tone=\"muted\"` does NOT (gh `<tag-ui>`'s family-less muted stays on the lighter `--a-bg-muted` pair (gh - `outline` — transparent bg + family-colored border + family- colored text. Lightest visual weight; good in dense data rows. Vocabulary mirrors `<tag-ui>` (which now defaults to `muted` for its family variants, gh autocomplete chip)."
|
|
1195
|
+
"description": "Fill style — orthogonal to [variant]. Badge defaults to `solid` (gh#864 — badge and tag were swapped relative to their reported default formulas; this restores badge's own). Three values: - `solid` (default) — saturated bg + on-strong text. The badge IS the state (status stamp). `primary` is badge's sole brand-emphasis variant (`accent` retired, gh#874). - `muted` — tinted bg + scheme-paired text. Use for quiet metadata — counts, IDs, status pills in dense rows. Family-tinted `muted` (e.g. `variant=\"info\" tone=\"muted\"`) shares `<tag-ui>`'s `[tone=\"muted\"]` shape; family-less `tone=\"muted\"` does NOT (gh#873) — it renders the stronger `neutral-low` fill, while `<tag-ui>`'s family-less muted stays on the lighter `--a-bg-muted` pair (gh#778 dense-list rationale). - `outline` — transparent bg + family-colored border + family- colored text. Lightest visual weight; good in dense data rows. Vocabulary mirrors `<tag-ui>` (which now defaults to `muted` for its family variants, gh#864 — different role as filter / autocomplete chip)."
|
|
1196
1196
|
}
|
|
1197
1197
|
]
|
|
1198
1198
|
}
|
|
@@ -2056,14 +2056,14 @@
|
|
|
2056
2056
|
"text": "string"
|
|
2057
2057
|
},
|
|
2058
2058
|
"default": "all",
|
|
2059
|
-
"description": "Marker (dot) visibility for line and multi-line series. `all` draws a circle[data-dot] on every datum (default — matches pre-gh behavior). `none` hides all dots so a dense series reads as a clean line. `hover` shows only the currently-hovered datum's dot. `last` shows only the terminal point per series (sparkline convention). Tooltip hit targets ([data-hit]) are a separate always-rendered layer — every mode keeps hover/click working along the whole line."
|
|
2059
|
+
"description": "Marker (dot) visibility for line and multi-line series. `all` draws a circle[data-dot] on every datum (default — matches pre-gh#561 behavior). `none` hides all dots so a dense series reads as a clean line. `hover` shows only the currently-hovered datum's dot. `last` shows only the terminal point per series (sparkline convention). Tooltip hit targets ([data-hit]) are a separate always-rendered layer — every mode keeps hover/click working along the whole line."
|
|
2060
2060
|
},
|
|
2061
2061
|
{
|
|
2062
2062
|
"name": "seriesEmphasis",
|
|
2063
2063
|
"type": {
|
|
2064
2064
|
"text": "string"
|
|
2065
2065
|
},
|
|
2066
|
-
"description": "Multi-line only. Names one series key (matching a `y` key) to render at full strength — area fill + full-opacity line. Every other series drops its area fill and renders line-only at --chart-deemphasized-opacity. Empty (default) applies full treatment to every series, unchanged from pre-gh"
|
|
2066
|
+
"description": "Multi-line only. Names one series key (matching a `y` key) to render at full strength — area fill + full-opacity line. Every other series drops its area fill and renders line-only at --chart-deemphasized-opacity. Empty (default) applies full treatment to every series, unchanged from pre-gh#561 behavior."
|
|
2067
2067
|
},
|
|
2068
2068
|
{
|
|
2069
2069
|
"name": "loading",
|
|
@@ -2367,7 +2367,7 @@
|
|
|
2367
2367
|
"text": "boolean"
|
|
2368
2368
|
},
|
|
2369
2369
|
"default": "false",
|
|
2370
|
-
"description": "When true, [label] still sets the accessible name (aria-label) but the visible text is suppressed via the canonical sr-only technique (gh visually (e.g. a title next to a check-ui used as a list-item icon) and the plain-visible label would paint it twice."
|
|
2370
|
+
"description": "When true, [label] still sets the accessible name (aria-label) but the visible text is suppressed via the canonical sr-only technique (gh#1010). Use when a sibling element already shows the same name visually (e.g. a title next to a check-ui used as a list-item icon) and the plain-visible label would paint it twice."
|
|
2371
2371
|
},
|
|
2372
2372
|
{
|
|
2373
2373
|
"name": "value",
|
|
@@ -2665,7 +2665,7 @@
|
|
|
2665
2665
|
"text": "string"
|
|
2666
2666
|
},
|
|
2667
2667
|
"default": "hex",
|
|
2668
|
-
"description": "Output format for the value property + event detail. Hex (`"
|
|
2668
|
+
"description": "Output format for the value property + event detail. Hex (`#rrggbb`) or OKLCH (`oklch(L C H)`)."
|
|
2669
2669
|
},
|
|
2670
2670
|
{
|
|
2671
2671
|
"name": "disabled",
|
|
@@ -4065,6 +4065,147 @@
|
|
|
4065
4065
|
}
|
|
4066
4066
|
]
|
|
4067
4067
|
},
|
|
4068
|
+
{
|
|
4069
|
+
"kind": "javascript-module",
|
|
4070
|
+
"path": "components/drilldown/drilldown.js",
|
|
4071
|
+
"declarations": [
|
|
4072
|
+
{
|
|
4073
|
+
"kind": "class",
|
|
4074
|
+
"description": "Single-panel, multi-level drill-in menu. One list panel slides between levels (a level header with back navigation replaces stacking a column per level) — for hierarchical data where miller columns don't fit the viewport (>2 levels, >12 top-level entries, or narrow layouts). Rows compose a leading dot/icon, primary label, optional meta line, and trailing row-native count chips (not full <badge-ui>, which reads oversized at row density) — plus a drill-in chevron on branch items. Set `.items` to a tree of `{value, label, meta?, dot?, counts?, children?}` nodes; `children` may be an array (sync) or a function returning an array/Promise (lazy, fetched on drill-in — a loading level is shown via <skeleton-ui> while it resolves). Distinct from <tree-ui> (inline expand/collapse — right for file-tree shapes, wrong for wide/deep data where the expanded tree becomes a wall of rows), <nav-ui> (flat app navigation, not hierarchical drill-in), and <context-menu> (transient popover submenus, not a persistent content panel).",
|
|
4075
|
+
"name": "UIDrilldown",
|
|
4076
|
+
"tagName": "drilldown-ui",
|
|
4077
|
+
"superclass": {
|
|
4078
|
+
"name": "UIElement",
|
|
4079
|
+
"module": "/core/element.js"
|
|
4080
|
+
},
|
|
4081
|
+
"attributes": [
|
|
4082
|
+
{
|
|
4083
|
+
"name": "items",
|
|
4084
|
+
"type": {
|
|
4085
|
+
"text": "array"
|
|
4086
|
+
},
|
|
4087
|
+
"default": "[]",
|
|
4088
|
+
"description": "Root-level array of node objects: {value, label, meta?, dot?, counts?, children?, leaf?}. `value` is the stable id used in `path` and event details. `dot` names a semantic tone (info, success, warning, danger, primary, neutral) rendered as a small leading color swatch. `counts` is an array of {variant?, value} rendered as compact trailing chips. `children` is either an array of child nodes (resolved synchronously) or a function `(item) => array | Promise<array>` for lazy per-level fetch — a loading level renders while the promise is pending. `leaf: true` forces no drill chevron even when `children` is present (rare — normally omit `children` instead)."
|
|
4089
|
+
},
|
|
4090
|
+
{
|
|
4091
|
+
"name": "path",
|
|
4092
|
+
"type": {
|
|
4093
|
+
"text": "array"
|
|
4094
|
+
},
|
|
4095
|
+
"default": "[]",
|
|
4096
|
+
"description": "Current drilled-in level, as an array of ancestor item `value`s (root = `[]`). Setting `.path` restores directly to that nested level without animating through every intermediate level — the deep-link/URL-restore path. Hand-managed (not the generic `reflect:` mechanism, which can't JSON-encode arrays) — it still genuinely reflects to a JSON-encoded `path` attribute both ways (property → attribute and attribute → property), unlike most array props on this kit."
|
|
4097
|
+
},
|
|
4098
|
+
{
|
|
4099
|
+
"name": "rootLabel",
|
|
4100
|
+
"type": {
|
|
4101
|
+
"text": "string"
|
|
4102
|
+
},
|
|
4103
|
+
"description": "Level-header title shown at the root level (depth 0). Empty by default (no title row)."
|
|
4104
|
+
},
|
|
4105
|
+
{
|
|
4106
|
+
"name": "filterable",
|
|
4107
|
+
"type": {
|
|
4108
|
+
"text": "boolean"
|
|
4109
|
+
},
|
|
4110
|
+
"default": "false",
|
|
4111
|
+
"description": "Show a filter input pinned above the list, filtering the current level's rows by label/meta."
|
|
4112
|
+
},
|
|
4113
|
+
{
|
|
4114
|
+
"name": "placeholder",
|
|
4115
|
+
"type": {
|
|
4116
|
+
"text": "string"
|
|
4117
|
+
},
|
|
4118
|
+
"default": "Filter…",
|
|
4119
|
+
"description": "Placeholder text for the filter input (only rendered when `[filterable]`)."
|
|
4120
|
+
},
|
|
4121
|
+
{
|
|
4122
|
+
"name": "selectOnDrill",
|
|
4123
|
+
"type": {
|
|
4124
|
+
"text": "boolean"
|
|
4125
|
+
},
|
|
4126
|
+
"default": "false",
|
|
4127
|
+
"description": "When true, clicking/activating a branch item (one with children) BOTH fires `select` and drills into it — the Schema Manager shape, where picking a namespace is both a selection and a navigation. Default false: branch activation only drills in; only leaf activation fires `select`."
|
|
4128
|
+
},
|
|
4129
|
+
{
|
|
4130
|
+
"name": "static",
|
|
4131
|
+
"type": {
|
|
4132
|
+
"text": "boolean"
|
|
4133
|
+
},
|
|
4134
|
+
"default": "false",
|
|
4135
|
+
"description": "Suppress the horizontal slide transition between levels — instant swap. Also honored automatically under `prefers-reduced-motion: reduce`."
|
|
4136
|
+
}
|
|
4137
|
+
],
|
|
4138
|
+
"slots": [
|
|
4139
|
+
{
|
|
4140
|
+
"name": "breadcrumb",
|
|
4141
|
+
"description": "Optional slot for a consumer-supplied <breadcrumb-ui> in the level header, for deep hierarchies. Not managed by drilldown-ui — the consumer wires jump clicks to `.path = [...]` itself."
|
|
4142
|
+
},
|
|
4143
|
+
{
|
|
4144
|
+
"name": "header",
|
|
4145
|
+
"description": "Auto-stamped level-header container (back affordance + breadcrumb + title/count). Structural — not consumer-overridable."
|
|
4146
|
+
},
|
|
4147
|
+
{
|
|
4148
|
+
"name": "back",
|
|
4149
|
+
"description": "Auto-stamped back-affordance <button> (chevron + parent-level label). Hidden at the root level."
|
|
4150
|
+
},
|
|
4151
|
+
{
|
|
4152
|
+
"name": "title",
|
|
4153
|
+
"description": "Auto-stamped title cluster (current-level label + item count) inside the header."
|
|
4154
|
+
},
|
|
4155
|
+
{
|
|
4156
|
+
"name": "filter",
|
|
4157
|
+
"description": "Auto-stamped filter-input row, shown only when `[filterable]` is set."
|
|
4158
|
+
},
|
|
4159
|
+
{
|
|
4160
|
+
"name": "viewport",
|
|
4161
|
+
"description": "Auto-stamped clipping container for the current level's panel (hosts the slide-transition overflow clip)."
|
|
4162
|
+
},
|
|
4163
|
+
{
|
|
4164
|
+
"name": "dot",
|
|
4165
|
+
"description": "Auto-stamped per-row leading color swatch, rendered when the row's data item declares a `dot` tone."
|
|
4166
|
+
},
|
|
4167
|
+
{
|
|
4168
|
+
"name": "main",
|
|
4169
|
+
"description": "Auto-stamped per-row content column (label + optional meta line)."
|
|
4170
|
+
},
|
|
4171
|
+
{
|
|
4172
|
+
"name": "meta",
|
|
4173
|
+
"description": "Auto-stamped per-row secondary meta line, rendered when the row's data item declares `meta`."
|
|
4174
|
+
},
|
|
4175
|
+
{
|
|
4176
|
+
"name": "counts",
|
|
4177
|
+
"description": "Auto-stamped per-row trailing count-chip cluster, rendered when the row's data item declares `counts`."
|
|
4178
|
+
}
|
|
4179
|
+
],
|
|
4180
|
+
"events": [
|
|
4181
|
+
{
|
|
4182
|
+
"name": "select",
|
|
4183
|
+
"type": {
|
|
4184
|
+
"text": "CustomEvent"
|
|
4185
|
+
},
|
|
4186
|
+
"description": "Fired when a leaf item is activated (click/Enter), or when a branch item is activated with `[select-on-drill]` set. detail: { path, item }. `path` is the drilled-in level the item lives at (the current `.path` at the time of activation); `item` is the raw node object."
|
|
4187
|
+
},
|
|
4188
|
+
{
|
|
4189
|
+
"name": "navigate",
|
|
4190
|
+
"type": {
|
|
4191
|
+
"text": "CustomEvent"
|
|
4192
|
+
},
|
|
4193
|
+
"description": "Fired whenever the shown level changes — drill-in, back, breadcrumb jump, or a programmatic `.path` assignment. detail: { path }. Hosts mirror this to the URL instead of listening to `select`."
|
|
4194
|
+
}
|
|
4195
|
+
]
|
|
4196
|
+
}
|
|
4197
|
+
],
|
|
4198
|
+
"exports": [
|
|
4199
|
+
{
|
|
4200
|
+
"kind": "custom-element-definition",
|
|
4201
|
+
"name": "drilldown-ui",
|
|
4202
|
+
"declaration": {
|
|
4203
|
+
"name": "UIDrilldown",
|
|
4204
|
+
"module": "./components/drilldown/drilldown.js"
|
|
4205
|
+
}
|
|
4206
|
+
}
|
|
4207
|
+
]
|
|
4208
|
+
},
|
|
4068
4209
|
{
|
|
4069
4210
|
"kind": "javascript-module",
|
|
4070
4211
|
"path": "components/embed/embed.js",
|
|
@@ -4253,7 +4394,7 @@
|
|
|
4253
4394
|
"text": "string"
|
|
4254
4395
|
},
|
|
4255
4396
|
"default": "default",
|
|
4256
|
-
"description": "Semantic variant — `default | info | success | warning | danger | primary`. `primary` is the brand-emphasis fill (accent-filled bg + on-accent text), ported from toast.css's `primary` variant (gh posted toasts."
|
|
4397
|
+
"description": "Semantic variant — `default | info | success | warning | danger | primary`. `primary` is the brand-emphasis fill (accent-filled bg + on-accent text), ported from toast.css's `primary` variant (gh#1104) now that feed-item-ui is the real paint site for posted toasts."
|
|
4257
4398
|
},
|
|
4258
4399
|
{
|
|
4259
4400
|
"name": "duration",
|
|
@@ -5517,7 +5658,7 @@
|
|
|
5517
5658
|
"declarations": [
|
|
5518
5659
|
{
|
|
5519
5660
|
"kind": "class",
|
|
5520
|
-
"description": "Inline navigation primitive — semantic `<a href>` wrapper. Use for cross-page navigation, footer / Terms-of-Service / Privacy-Policy inline references, \"Sign in\" / \"Sign up\" cross-page links, and any affordance whose purpose is to take the user somewhere (not to perform an action). Sibling of `<button-ui>` — they have separate semantics and must not be substituted for each other: | Affordance | Use | |---------------------------|----------------| | Submit form | `<button-ui>` | | Trigger action / modal | `<button-ui>` | | Copy to clipboard | `<button-ui>` | | Open modal / drawer | `<button-ui>` | | Navigate to another page | `<link-ui>` | | Open external URL | `<link-ui>` | | Anchor jump ( | Inline reference in prose | `<link-ui>` | Renders `<a href=\"…\">` internally so middle-click open-in-new-tab, right-click context menu, hover URL preview, search-engine crawlability, and bookmark-ability all work without any custom wiring. ARIA role is \"link\" (set automatically by `<a>` element).",
|
|
5661
|
+
"description": "Inline navigation primitive — semantic `<a href>` wrapper. Use for cross-page navigation, footer / Terms-of-Service / Privacy-Policy inline references, \"Sign in\" / \"Sign up\" cross-page links, and any affordance whose purpose is to take the user somewhere (not to perform an action). Sibling of `<button-ui>` — they have separate semantics and must not be substituted for each other: | Affordance | Use | |---------------------------|----------------| | Submit form | `<button-ui>` | | Trigger action / modal | `<button-ui>` | | Copy to clipboard | `<button-ui>` | | Open modal / drawer | `<button-ui>` | | Navigate to another page | `<link-ui>` | | Open external URL | `<link-ui>` | | Anchor jump (#section) | `<link-ui>` | | Inline reference in prose | `<link-ui>` | Renders `<a href=\"…\">` internally so middle-click open-in-new-tab, right-click context menu, hover URL preview, search-engine crawlability, and bookmark-ability all work without any custom wiring. ARIA role is \"link\" (set automatically by `<a>` element).",
|
|
5521
5662
|
"name": "UILink",
|
|
5522
5663
|
"tagName": "link-ui",
|
|
5523
5664
|
"superclass": {
|
|
@@ -5811,7 +5952,7 @@
|
|
|
5811
5952
|
"slots": [
|
|
5812
5953
|
{
|
|
5813
5954
|
"name": "text",
|
|
5814
|
-
"description": "Override slot for richer primary-text markup than the plain [text] attribute string. Styled by `:scope [slot=\"text\"]` (list.css) and honored by UIListItem's stamping logic — a consumer-provided [slot=\"text\"] child is never overwritten (only component-stamped ones are). Undeclared until gh"
|
|
5955
|
+
"description": "Override slot for richer primary-text markup than the plain [text] attribute string. Styled by `:scope [slot=\"text\"]` (list.css) and honored by UIListItem's stamping logic — a consumer-provided [slot=\"text\"] child is never overwritten (only component-stamped ones are). Undeclared until gh#653; the element source always supported it."
|
|
5815
5956
|
},
|
|
5816
5957
|
{
|
|
5817
5958
|
"name": "content",
|
|
@@ -7096,7 +7237,23 @@
|
|
|
7096
7237
|
"slots": [
|
|
7097
7238
|
{
|
|
7098
7239
|
"name": "default",
|
|
7099
|
-
"description": "Composes from the slot primitives — `<header-ui>` (page header), `<section-ui>` (main content), optional `<footer-ui>`. Native `<header>` / `<section>` / `<footer>` also work; the @scope rules target both via `:where(header, header-ui)`."
|
|
7240
|
+
"description": "Composes from the slot primitives — `<header-ui>` (page header), `<section-ui>` (main content), optional `<footer-ui>`. Native `<header>` / `<section>` / `<footer>` also work; the @scope rules target both via `:where(header, header-ui)`. The page header also activates the named slot-gated grid (`slot=\"icon\"` / `slot=\"heading\"` / `slot=\"description\"` / `slot=\"action\"`) once any DIRECT header child carries a `slot` attribute — same contract as `<card-ui>`'s header (gh#1253)."
|
|
7241
|
+
},
|
|
7242
|
+
{
|
|
7243
|
+
"name": "icon",
|
|
7244
|
+
"description": "Leading icon for the page header — status, brand, or type marker. Placed in column 1 of the header grid when present; heading + description shift to column 2. Direct child of `<header>` / `<header-ui>` only, per the :has(> [slot=\"icon\"]) gate."
|
|
7245
|
+
},
|
|
7246
|
+
{
|
|
7247
|
+
"name": "heading",
|
|
7248
|
+
"description": "Primary title — grid row 1 inside the page header. Also accepts bare `<h1>`–`<h6>` tags (or A2UI's transpiled display/title/heading/subsection `<text-ui>` variants) as direct children without slot=\"heading\". A slot=\"heading\" wrapper can contain inline badges or metadata alongside the title text."
|
|
7249
|
+
},
|
|
7250
|
+
{
|
|
7251
|
+
"name": "description",
|
|
7252
|
+
"description": "Secondary metadata — grid row 2 beneath the heading inside the page header. Also accepts bare `<p>` / `<small>` / body-variant `<text-ui>` as direct children without slot=\"description\"."
|
|
7253
|
+
},
|
|
7254
|
+
{
|
|
7255
|
+
"name": "action",
|
|
7256
|
+
"description": "Trailing control cluster inside the page header (icon-buttons, menu trigger, scheme toggle, more-options). Aligns to the flex-end edge — the fix for gh#1253's dropped `<toggle-scheme-ui>`."
|
|
7100
7257
|
}
|
|
7101
7258
|
]
|
|
7102
7259
|
}
|
|
@@ -7719,14 +7876,14 @@
|
|
|
7719
7876
|
"type": {
|
|
7720
7877
|
"text": "string"
|
|
7721
7878
|
},
|
|
7722
|
-
"description": "Foreground (dark-cell) color. Any CSS color string (hex, rgb, token reference). **Empty defaults to ` for guaranteed scanability** (theme-aware `currentColor` would produce light-on-dark in dark mode, which most phone scanners refuse to decode). Override for branded QRs only when you've verified the chosen color/background pair scans on the target devices."
|
|
7879
|
+
"description": "Foreground (dark-cell) color. Any CSS color string (hex, rgb, token reference). **Empty defaults to `#000000` — hardcoded black for guaranteed scanability** (theme-aware `currentColor` would produce light-on-dark in dark mode, which most phone scanners refuse to decode). Override for branded QRs only when you've verified the chosen color/background pair scans on the target devices."
|
|
7723
7880
|
},
|
|
7724
7881
|
{
|
|
7725
7882
|
"name": "background",
|
|
7726
7883
|
"type": {
|
|
7727
7884
|
"text": "string"
|
|
7728
7885
|
},
|
|
7729
|
-
"description": "Background (light-cell) color. **Empty defaults to ` hardcoded white** alongside the black foreground, for guaranteed scanability. Override only when paired with an explicit [color] (the contrast pair must scan)."
|
|
7886
|
+
"description": "Background (light-cell) color. **Empty defaults to `#ffffff` — hardcoded white** alongside the black foreground, for guaranteed scanability. Override only when paired with an explicit [color] (the contrast pair must scan)."
|
|
7730
7887
|
},
|
|
7731
7888
|
{
|
|
7732
7889
|
"name": "label",
|
|
@@ -7756,7 +7913,7 @@
|
|
|
7756
7913
|
"declarations": [
|
|
7757
7914
|
{
|
|
7758
7915
|
"kind": "class",
|
|
7759
|
-
"description": "Groups a set of bare <radio-ui label=\"…\"> children under one accessible name — role=\"radiogroup\" on the host plus aria-labelledby pointing at its own [label]. Radio-ui already supports ancestor fieldset/[role=radiogroup] grouping for exclusivity + arrow-key navigation (unchanged by this wrapper); a plain layout container (Column) can carry neither the role nor the label association, which left the canonical questionnaire shape (radio.yaml's own example) with no programmatic question↔group link (gh mutually-exclusive radio-ui options — it is the ONLY primitive that carries the group's accessible name; radio-ui itself stays self-labeling per-option.",
|
|
7916
|
+
"description": "Groups a set of bare <radio-ui label=\"…\"> children under one accessible name — role=\"radiogroup\" on the host plus aria-labelledby pointing at its own [label]. Radio-ui already supports ancestor fieldset/[role=radiogroup] grouping for exclusivity + arrow-key navigation (unchanged by this wrapper); a plain layout container (Column) can carry neither the role nor the label association, which left the canonical questionnaire shape (radio.yaml's own example) with no programmatic question↔group link (gh#729). Use this wherever a question/prompt introduces a set of mutually-exclusive radio-ui options — it is the ONLY primitive that carries the group's accessible name; radio-ui itself stays self-labeling per-option.",
|
|
7760
7917
|
"name": "UIRadioGroup",
|
|
7761
7918
|
"tagName": "radio-group-ui",
|
|
7762
7919
|
"superclass": {
|
|
@@ -8651,7 +8808,7 @@
|
|
|
8651
8808
|
"text": "boolean"
|
|
8652
8809
|
},
|
|
8653
8810
|
"default": "false",
|
|
8654
|
-
"description": "Suppress the single-select radio indicator on option rows (gh For menu-shaped switchers — workspace or user identity menus — where the trigger already shows the committed value and a per-row radio reads as redundant selection language. Rows keep their layout and aria-selected state; the trigger and selected-row weight carry the signal. No effect under [multiple]. IMPLIED by [mark] — a mark declares an identity switcher, which is always menu-shaped (gh"
|
|
8811
|
+
"description": "Suppress the single-select radio indicator on option rows (gh#498). For menu-shaped switchers — workspace or user identity menus — where the trigger already shows the committed value and a per-row radio reads as redundant selection language. Rows keep their layout and aria-selected state; the trigger and selected-row weight carry the signal. No effect under [multiple]. IMPLIED by [mark] — a mark declares an identity switcher, which is always menu-shaped (gh#498 reopen: per-instance opt-outs proved forgettable)."
|
|
8655
8812
|
},
|
|
8656
8813
|
{
|
|
8657
8814
|
"name": "error",
|
|
@@ -8727,7 +8884,7 @@
|
|
|
8727
8884
|
"text": "string"
|
|
8728
8885
|
},
|
|
8729
8886
|
"default": "null",
|
|
8730
|
-
"description": "Multi-select only (gh text line: a single selection shows its own label; N > 1 shows \"<summary-label> (N)\" — e.g. \"Organizations (2)\"; none shows the placeholder. Popover checkbox rows, Backspace-removes-last, the comma-separated form value, [select-all], and [clearable] are unchanged. Absent (default) = tag-ui chip trigger. Prefer this form for narrow triggers (filter bars) where wrapping chips would balloon the control."
|
|
8887
|
+
"description": "Multi-select only (gh#442). Replaces the chip trigger with one text line: a single selection shows its own label; N > 1 shows \"<summary-label> (N)\" — e.g. \"Organizations (2)\"; none shows the placeholder. Popover checkbox rows, Backspace-removes-last, the comma-separated form value, [select-all], and [clearable] are unchanged. Absent (default) = tag-ui chip trigger. Prefer this form for narrow triggers (filter bars) where wrapping chips would balloon the control."
|
|
8731
8888
|
},
|
|
8732
8889
|
{
|
|
8733
8890
|
"name": "min",
|
|
@@ -8929,7 +9086,7 @@
|
|
|
8929
9086
|
"declarations": [
|
|
8930
9087
|
{
|
|
8931
9088
|
"kind": "class",
|
|
8932
|
-
"description": "Accessibility utility — visually-hidden link that becomes visible on keyboard focus, letting keyboard users skip past repetitive navigation to the main content. WCAG 2.1 Success Criterion 2.4.1 \"Bypass Blocks\". Place as the FIRST focusable element on the page (typically inside `<body>` before any nav / shell chrome). Target an `id` on your main content region (commonly `",
|
|
9089
|
+
"description": "Accessibility utility — visually-hidden link that becomes visible on keyboard focus, letting keyboard users skip past repetitive navigation to the main content. WCAG 2.1 Success Criterion 2.4.1 \"Bypass Blocks\". Place as the FIRST focusable element on the page (typically inside `<body>` before any nav / shell chrome). Target an `id` on your main content region (commonly `#main` / `#main-content`).",
|
|
8933
9090
|
"name": "UISkipNav",
|
|
8934
9091
|
"tagName": "skip-nav-ui",
|
|
8935
9092
|
"superclass": {
|
|
@@ -9523,7 +9680,7 @@
|
|
|
9523
9680
|
"text": "boolean"
|
|
9524
9681
|
},
|
|
9525
9682
|
"default": "false",
|
|
9526
|
-
"description": "Opt into click-to-navigate + roving-tabindex keyboard nav (arrow keys / Home / End / Enter / Space). Absent by default — a bare stepper is a read-only progress display, not a nav control (gh"
|
|
9683
|
+
"description": "Opt into click-to-navigate + roving-tabindex keyboard nav (arrow keys / Home / End / Enter / Space). Absent by default — a bare stepper is a read-only progress display, not a nav control (gh#711 S1)."
|
|
9527
9684
|
}
|
|
9528
9685
|
],
|
|
9529
9686
|
"slots": [
|
|
@@ -9538,7 +9695,7 @@
|
|
|
9538
9695
|
"type": {
|
|
9539
9696
|
"text": "CustomEvent"
|
|
9540
9697
|
},
|
|
9541
|
-
"description": "Cancelable — fires BEFORE [step] mutates, on a click or keyboard navigation. call preventDefault() to veto: the step does not change, [change] does not fire, and focus/roving-tabindex stay exactly where they were. A host that never listens for this event keeps the pre-veto uncontrolled behavior unchanged (gh"
|
|
9698
|
+
"description": "Cancelable — fires BEFORE [step] mutates, on a click or keyboard navigation. call preventDefault() to veto: the step does not change, [change] does not fire, and focus/roving-tabindex stay exactly where they were. A host that never listens for this event keeps the pre-veto uncontrolled behavior unchanged (gh#711 S1 review)."
|
|
9542
9699
|
},
|
|
9543
9700
|
{
|
|
9544
9701
|
"name": "change",
|
|
@@ -10205,7 +10362,7 @@
|
|
|
10205
10362
|
"text": "array"
|
|
10206
10363
|
},
|
|
10207
10364
|
"default": "[]",
|
|
10208
|
-
"description": "JS property (set programmatically — `el.data = [...]`) — row records, an array of plain objects keyed to columns[].key. May also be supplied declaratively as a JSON-array `data=\"[…]\"` attribute, hydrated once at connect (gh Custom accessor on the element class, not a reflected attribute."
|
|
10365
|
+
"description": "JS property (set programmatically — `el.data = [...]`) — row records, an array of plain objects keyed to columns[].key. May also be supplied declaratively as a JSON-array `data=\"[…]\"` attribute, hydrated once at connect (gh#288) — the same pattern chart-ui's `data` attribute uses. Custom accessor on the element class, not a reflected attribute."
|
|
10209
10366
|
},
|
|
10210
10367
|
{
|
|
10211
10368
|
"name": "density",
|
|
@@ -10284,7 +10441,7 @@
|
|
|
10284
10441
|
"text": "boolean"
|
|
10285
10442
|
},
|
|
10286
10443
|
"default": "false",
|
|
10287
|
-
"description": "Drop the table's outer 1px perimeter and nothing else (gh#511) — row dividers are untouched (the perimeter is split onto its own --table-perimeter token, defaulting to --table-border). For card-composed tables: the card owns the frame, so the table's square perimeter otherwise renders a doubled edge (flush bleed) or a stray inner box (with content above). Standalone tables keep their chrome by default. Theming path without the attribute: set --table-perimeter to transparent per instance. Note: `<card-ui><section bleed>` already drops a direct-child table-ui's chrome automatically (card.css, gh instance still applies and is honored, but is no longer required just to avoid the doubled-edge look in that composition."
|
|
10444
|
+
"description": "Drop the table's outer 1px perimeter and nothing else (gh#511) — row dividers are untouched (the perimeter is split onto its own --table-perimeter token, defaulting to --table-border). For card-composed tables: the card owns the frame, so the table's square perimeter otherwise renders a doubled edge (flush bleed) or a stray inner box (with content above). Standalone tables keep their chrome by default. Theming path without the attribute: set --table-perimeter to transparent per instance. Note: `<card-ui><section bleed>` already drops a direct-child table-ui's chrome automatically (card.css, gh#796) — `frameless`/`raw` on the instance still applies and is honored, but is no longer required just to avoid the doubled-edge look in that composition."
|
|
10288
10445
|
},
|
|
10289
10446
|
{
|
|
10290
10447
|
"name": "valign",
|
|
@@ -10292,7 +10449,7 @@
|
|
|
10292
10449
|
"text": "string"
|
|
10293
10450
|
},
|
|
10294
10451
|
"default": "center",
|
|
10295
|
-
"description": "Vertical alignment of body-cell content. 'center' (default) keeps today's behavior — every cell centers on the row's cross-axis, which reads well for single-line rows. 'top' aligns each cell's content to the top of its padding box instead, so tall/wrapped rows (a [wrap] title column, a stacked identity cell) share one first-line scan anchor across the row rather than each cell floating at a different vertical center (gh (or <col-def valign=\"…\">) overrides the host per-column — e.g. keep a checkbox column centered while data cells top-align. Header cells always stay centered regardless of this prop (single-line by contract) — the checkbox/expand structural columns also default to centered under [valign=\"top\"] since they're not part of columns[]."
|
|
10452
|
+
"description": "Vertical alignment of body-cell content. 'center' (default) keeps today's behavior — every cell centers on the row's cross-axis, which reads well for single-line rows. 'top' aligns each cell's content to the top of its padding box instead, so tall/wrapped rows (a [wrap] title column, a stacked identity cell) share one first-line scan anchor across the row rather than each cell floating at a different vertical center (gh#505). Per-column `valign` in the columns[] array (or <col-def valign=\"…\">) overrides the host per-column — e.g. keep a checkbox column centered while data cells top-align. Header cells always stay centered regardless of this prop (single-line by contract) — the checkbox/expand structural columns also default to centered under [valign=\"top\"] since they're not part of columns[]."
|
|
10296
10453
|
},
|
|
10297
10454
|
{
|
|
10298
10455
|
"name": "wrap",
|
|
@@ -10573,7 +10730,7 @@
|
|
|
10573
10730
|
"text": "string"
|
|
10574
10731
|
},
|
|
10575
10732
|
"default": "muted",
|
|
10576
|
-
"description": "Fill style — orthogonal to [variant]. Three values: - `muted` (default for the family variants — info/success/warning/ danger/primary — gh their reported default formulas; this restores tag's own) — tinted bg with scheme-paired text. Matches <badge-ui>'s `[tone=\"muted\"]` look. Use on metadata / citation chips in dense lists or tables where a saturated fill would compete for attention (gh the family-less `default` variant, which stays solid unconditionally (gh `<tag-ui text=\"…\">` still renders that solid look with no attributes at all. - `solid` — saturated bg + on-strong (near-white) text. The chip IS the state. Opt in explicitly for a family variant (gh or it's already the unconditional look for the family-less `default` variant (gh - `outline` — transparent bg + family-colored border + family-colored text. The lightest visual weight; good in dense data tables or faceted filter rows where multiple chips would otherwise compete. `tone` is a declarative presentational attribute (not a reactive prop — see tag.class.js) so its schema `default` here is documentation of the rendered-by-default look, not a reflected attribute value."
|
|
10733
|
+
"description": "Fill style — orthogonal to [variant]. Three values: - `muted` (default for the family variants — info/success/warning/ danger/primary — gh#864: tag and badge were swapped relative to their reported default formulas; this restores tag's own) — tinted bg with scheme-paired text. Matches <badge-ui>'s `[tone=\"muted\"]` look. Use on metadata / citation chips in dense lists or tables where a saturated fill would compete for attention (gh#778's oversized-pill concern). Does NOT apply to the family-less `default` variant, which stays solid unconditionally (gh#794, unaffected by gh#864) — a bare `<tag-ui text=\"…\">` still renders that solid look with no attributes at all. - `solid` — saturated bg + on-strong (near-white) text. The chip IS the state. Opt in explicitly for a family variant (gh#864), or it's already the unconditional look for the family-less `default` variant (gh#794). - `outline` — transparent bg + family-colored border + family-colored text. The lightest visual weight; good in dense data tables or faceted filter rows where multiple chips would otherwise compete. `tone` is a declarative presentational attribute (not a reactive prop — see tag.class.js) so its schema `default` here is documentation of the rendered-by-default look, not a reflected attribute value."
|
|
10577
10734
|
}
|
|
10578
10735
|
],
|
|
10579
10736
|
"events": [
|