@adia-ai/web-components 0.8.39 → 0.8.41

package/components/segmented/segmented.yaml

@@ -5,14 +5,19 @@ status: stable
 component: Segmented
 category: navigation
 version: 1
-description: Single-select toggle group with an animated sliding indicator. Children must be segment-ui elements.
+description: Toggle group with an animated sliding indicator (single-select) or independently-toggleable segments (multi-select via [multiple]). Children must be segment-ui elements.
 props:
   value:
-    description: Value of the currently selected segment.
+    description: Value of the currently selected segment. Under [multiple], a comma-separated set of selected values (same encoding as select-ui[multiple]).
     type: string
     default: ''
+  multiple:
+    description: "Enables multi-select — value becomes a comma-separated set, the sliding indicator is suppressed (each selected segment carries its own background instead), and Space/Enter toggles a focused segment instead of arrow-move selecting it. Positive polarity, matching select-ui[multiple]. Absorbs the role of the deprecated <toggle-group-ui> + <toggle-option-ui> pair (gh#1369, #1363 C1). Unlike <toggle-group-ui single>, re-clicking an already-selected segment does NOT clear the selection — segmented-ui's single-select is standard radiogroup semantics (always exactly one selected once a value is set)."
+    type: boolean
+    default: false
+    reflect: true
   allowEmpty:
-    description: Suppresses the connect-time self-select of the first enabled segment when value is falsy. Without it, an empty value silently selects the first segment; with it, a falsy value renders every segment unselected until a real value arrives — for path-bound consumers whose bound value can be a genuine empty state.
+    description: Suppresses the connect-time self-select of the first enabled segment when value is falsy. Without it, an empty value silently selects the first segment; with it, a falsy value renders every segment unselected until a real value arrives — for path-bound consumers whose bound value can be a genuine empty state. No effect under [multiple] — multi-select never self-selects (empty value already means "nothing chosen").
     type: boolean
     default: false
     attribute: allow-empty
@@ -22,20 +27,27 @@ events:
 slots:
   default:
     description: Child segment-ui elements that form the toggle group. Children MUST be segment-ui — bare segment tags render text but are silently ignored for the sliding indicator and role/aria-checked state.
+parts:
   indicator:
-    description: Auto-created sliding indicator element prepended on first render.
+    description: >-
+      Auto-created sliding indicator element prepended on first render —
+      template-owned anatomy part, not a light-DOM insertion point
+      (gh#1454). Lazily created once via an internal-field guard, never
+      adopted from a consumer-authored element.
 states:
 - name: idle
   description: Default, ready for interaction.
 traits: []
 tokens: {}
 a2ui:
+  allowedChildren:
+    - Segment
   rules:
-    - rule: 'Single-select segmented control. Hosts <segment-ui> children; exactly one selected at a time.'
+    - rule: 'Single-select by default. Hosts <segment-ui> children; exactly one selected at a time.'
       reason: 'Single-select cluster contract.'
-    - rule: 'For multi-select use <toggle-group-ui> + <toggle-option-ui> instead.'
-      reason: 'Selection model boundary.'
-    - rule: 'Use for view-mode switches (grid/list, light/dark) or short filter sets (3-5 options); for longer sets use <tabs-ui> or <select-ui>.'
+    - rule: 'For multi-select (filter chips, multi-flag toggles, day-of-week pickers), set [multiple] instead of using a separate component — value becomes a comma-separated set of selected segment values. <toggle-group-ui>/<toggle-option-ui> are deprecated; use <segmented-ui multiple> + <segment-ui> instead (gh#1369, #1363 C1).'
+      reason: 'Selection model axis — multiple absorbs the deprecated multi-select pair.'
+    - rule: 'Use for view-mode switches (grid/list, light/dark) or short filter sets (3-5 options); for longer sets use <tabs-ui> or <select-ui multiple>.'
       reason: 'Capacity guidance.'
 anti_patterns: []
 examples:
@@ -86,6 +98,54 @@ examples:
         "text": "Monthly"
       }
     ]
+- name: multi-select-filter-chips
+  description: Multi-select segmented control (gh#1369) for filter chips — [multiple] set, value is a comma-separated set of active segments.
+  a2ui: >-
+    [
+      {
+        "id": "root",
+        "component": "Card",
+        "children": [
+          "sec"
+        ]
+      },
+      {
+        "id": "sec",
+        "component": "Section",
+        "children": [
+          "comp"
+        ]
+      },
+      {
+        "id": "comp",
+        "component": "Segmented",
+        "multiple": true,
+        "value": "bold,italic",
+        "children": [
+          "s1",
+          "s2",
+          "s3"
+        ]
+      },
+      {
+        "id": "s1",
+        "component": "Segment",
+        "value": "bold",
+        "text": "Bold"
+      },
+      {
+        "id": "s2",
+        "component": "Segment",
+        "value": "italic",
+        "text": "Italic"
+      },
+      {
+        "id": "s3",
+        "component": "Segment",
+        "value": "underline",
+        "text": "Underline"
+      }
+    ]
 keywords:
 - segmented
 - options
@@ -95,6 +155,9 @@ keywords:
 - tab
 - tabs
 - button-group
+- filter
+- multi-select
+- filter-chips
 synonyms:
   button-group:
   - toolbar
@@ -125,11 +188,20 @@ synonyms:
   - segmented
   - radio
   - settings
+  filter:
+  - segmented
+  - toggle-group
+  - filter-chips
+  multi-select:
+  - segmented
+  - toggle-group
+  - select
   tags:
   - SegmentedControl
   - Segmented
 related:
   - Segment
   - ToggleGroup
+  - ToggleOption
   - Tabs
   - Radio

package/components/select/select.a2ui.json

@@ -83,7 +83,10 @@
     },
     "maxlength": {
       "description": "Maximum character length for validation",
-      "type": "number",
+      "type": [
+        "number",
+        "null"
+      ],
       "default": null
     },
     "min": {
@@ -93,7 +96,10 @@
     },
     "minlength": {
       "description": "Minimum character length for validation",
-      "type": "number",
+      "type": [
+        "number",
+        "null"
+      ],
       "default": null
     },
     "multiple": {
@@ -158,7 +164,7 @@
     "summary-label": {
       "description": "Multi-select only (gh#442). Replaces the chip trigger with one\ntext line: a single selection shows its own label; N > 1 shows\n\"<summary-label> (N)\" — e.g. \"Organizations (2)\"; none shows the\nplaceholder. Popover checkbox rows, Backspace-removes-last, the\ncomma-separated form value, [select-all], and [clearable] are\nunchanged. Absent (default) = tag-ui chip trigger. Prefer this\nform for narrow triggers (filter bars) where wrapping chips\nwould balloon the control.\n",
       "type": "string",
-      "default": null
+      "default": ""
     },
     "value": {
       "description": "Currently selected option value. With declarative <option> children, a child carrying the native `selected` attribute sets the initial value when this attribute is absent (native <select> parity).",
@@ -226,6 +232,14 @@
       "picker"
     ],
     "name": "UISelect",
+    "parts": {
+      "hint": {
+        "description": "Override slot for hint markup richer than the plain [hint] attribute string (inline links, code spans). Renders beneath the trigger at body-subtle typography. Mutually exclusive with [hint] per this description, but template-owned in practice (gh#1454): the trigger stamp is an unconditional `this.innerHTML = …` with no capture-before-wipe for `hint` (unlike `leading`/`trailing` on input-ui), so any pre-existing [slot=\"hint\"] content is discarded, not adopted, on first render."
+      },
+      "listbox": {
+        "description": "Popover container for options (role=listbox) — template-owned anatomy part, not a light-DOM insertion point (gh#1454). Its contents are always wiped (`innerHTML = ''`) and rebuilt wholesale from `.options`/ parsed `<option>` children on every options render."
+      }
+    },
     "related": [
       "image",
       "button",
@@ -234,17 +248,8 @@
       "upload"
     ],
     "slots": {
-      "hint": {
-        "description": "Override slot for hint markup richer than the plain [hint] attribute string (inline links, code spans). Renders beneath the trigger at body-subtle typography. Mutually exclusive with [hint]."
-      },
-      "label": {
-        "description": "Label element above the trigger"
-      },
-      "listbox": {
-        "description": "Popover container for options (role=listbox)"
-      },
       "trigger": {
-        "description": "Button that opens the listbox"
+        "description": "Button that opens the listbox. Stamped only if no consumer-authored [slot=\"trigger\"] is already present at first render (adopt-or-stamp) — a genuine light-DOM insertion point."
       }
     },
     "states": [

package/components/select/select.class.js

@@ -399,8 +399,7 @@ export class UISelect extends UIFormElement {
         this.#parseOptions();
         if (this.#options.length) {
           this.#renderOptions();
-          const display = this.querySelector('[slot="display"]');
-          if (display) display.textContent = this.#displayText();
+          this.#syncDisplayText();
         }
       });
     }
@@ -410,12 +409,13 @@ export class UISelect extends UIFormElement {
   render() {
     // SPEC-040 — in multi-select mode the trigger needs to host chips +
     // optional clear-x + optional "+N more" pill alongside the usual
-    // leading / display / caret. We toggle host attribute [data-multi-chips]
-    // so CSS can switch layout from single-line text to flex-wrap chip row.
+    // leading / display / caret. CSS switches layout from single-line
+    // text to flex-wrap chip row off the compound selector
+    // [multiple]:not([summary-label]) — both already-declared, reflected
+    // props, so no private data-* mirror is needed here (gh#1332
+    // Category A; dropped [data-multi-chips]).
     // gh#442 — [summary-label] keeps the single-line text layout: the
     // summary renders through [slot="display"], no chip row.
-    if (this.multiple && !this.summaryLabel) this.setAttribute('data-multi-chips', '');
-    else this.removeAttribute('data-multi-chips');
 
     // A11y (FB-88): name a placeholder-only select from its placeholder, like
     // input-ui, so it isn't unnamed for assistive tech (WCAG 4.1.2).
@@ -495,34 +495,7 @@ export class UISelect extends UIFormElement {
       // Re-attach listbox after trigger is stamped
       if (lb) this.appendChild(lb);
     } else {
-      const display = this.querySelector('[slot="display"]');
-      if (display && !this.multiple) {
-        // Single-select: keep the canonical text-rendering path.
-        if (display.hasAttribute('contenteditable')) {
-          // Only update text when not actively editing (no active query)
-          if (!this.#query) {
-            const text = this.#displayText() === this.placeholder ? '' : this.#displayText();
-            display.textContent = text;
-            display.toggleAttribute('data-empty', !text);
-          }
-        } else {
-          display.textContent = this.#displayText();
-        }
-      } else if (display && this.multiple) {
-        // Multi-select: display element holds the placeholder ONLY when
-        // no chips are present (otherwise the chip row IS the display).
-        const hasChips = this.#values().length > 0;
-        if (display.hasAttribute('contenteditable')) {
-          // search input — keep placeholder; never inject the value text.
-          display.setAttribute('data-placeholder', hasChips ? '' : (this.placeholder || ''));
-          if (!this.#query) {
-            display.textContent = '';
-            display.toggleAttribute('data-empty', true);
-          }
-        } else {
-          display.textContent = hasChips ? '' : (this.placeholder || '');
-        }
-      }
+      this.#syncDisplayText();
     }
 
     // Reflect the selected option's mark/avatar/icon in the trigger leading.
@@ -597,6 +570,57 @@ export class UISelect extends UIFormElement {
     }
   }
 
+  /**
+   * Reconcile the trigger's text with its [data-empty] flag — ALWAYS together.
+   *
+   * ADIA2-8927. For a searchable trigger the placeholder paints from
+   * `[slot="display"][contenteditable][data-empty]::before` (select.css), so
+   * text and flag are two halves of ONE state, not two independent writes:
+   * set the text and leave the flag and the label renders on top of the
+   * placeholder in the same box. `#displayText()` also falls back to
+   * `placeholder` when nothing is selected, and that string must never land in
+   * the editable surface as real content — the pseudo owns it, so writing it
+   * paints the placeholder twice, over itself.
+   *
+   * This lived inline in render()'s else-branch while `set options` and the
+   * FB-98 observer kept their own text-only writes, which is exactly how both
+   * drifted: a programmatically populated searchable select showed the overlap
+   * until the first click re-entered render() and repaired it. One caller-
+   * agnostic method is what keeps a third write site from repeating it.
+   */
+  #syncDisplayText() {
+    const display = this.querySelector('[slot="display"]');
+    if (!display) return;                                        // trigger not stamped yet
+
+    if (!this.multiple) {
+      // Single-select: keep the canonical text-rendering path.
+      if (display.hasAttribute('contenteditable')) {
+        // Only update text when not actively editing (no active query)
+        if (!this.#query) {
+          const text = this.#displayText() === this.placeholder ? '' : this.#displayText();
+          display.textContent = text;
+          display.toggleAttribute('data-empty', !text);
+        }
+      } else {
+        display.textContent = this.#displayText();
+      }
+    } else {
+      // Multi-select: display element holds the placeholder ONLY when
+      // no chips are present (otherwise the chip row IS the display).
+      const hasChips = this.#values().length > 0;
+      if (display.hasAttribute('contenteditable')) {
+        // search input — keep placeholder; never inject the value text.
+        display.setAttribute('data-placeholder', hasChips ? '' : (this.placeholder || ''));
+        if (!this.#query) {
+          display.textContent = '';
+          display.toggleAttribute('data-empty', true);
+        }
+      } else {
+        display.textContent = hasChips ? '' : (this.placeholder || '');
+      }
+    }
+  }
+
   /** Parse <option> and <optgroup> children into internal model. */
   // FB-98: collect declarative <option>/<optgroup> children — direct OR nested
   // inside the template engine's display:contents wrapper spans (which carry
@@ -689,8 +713,7 @@ export class UISelect extends UIFormElement {
         }
       }
       this.#renderOptions();
-      const display = this.querySelector('[slot="display"]');
-      if (display) display.textContent = this.#displayText();
+      this.#syncDisplayText();
       // Pre-existing gap surfaced while adding mark (gh#339): #renderOptions()
       // only rebuilds the LISTBOX rows — the trigger's leading visual
       // (icon/avatar/mark) was only ever reconciled from render()'s call to
@@ -975,7 +998,8 @@ export class UISelect extends UIFormElement {
         return `${this.summaryLabel} (${values.length})`;
       }
       // SPEC-040 — chips render the selection; display element holds the
-      // placeholder when empty and is otherwise empty (CSS sees [data-multi-chips]).
+      // placeholder when empty and is otherwise empty (CSS sees
+      // [multiple]:not([summary-label])).
       return this.value ? '' : this.placeholder;
     }
     const flat = this.#options.flatMap(o => o.options || [o]);

package/components/select/select.css

@@ -91,7 +91,7 @@
     border: 1px solid var(--select-border);
     border-radius: var(--select-radius);
     background: var(--select-bg);
-    line-height: 1;
+    line-height: var(--a-font-leading-none);
     cursor: pointer;
     /* Match every property the hover / focus / invalid states change. */
     transition:
@@ -130,7 +130,7 @@
     display: inline-flex;
     align-items: center;
     flex-shrink: 0;
-    line-height: 1;
+    line-height: var(--a-font-leading-none);
     --a-icon-size: var(--select-font-size);
     color: var(--select-fg-muted);
   }
@@ -215,11 +215,13 @@
   }
 
   /* ── SPEC-040 — Multi-select chip trigger ──
-     [data-multi-chips] is set on the host by render() when [multiple] is
-     active. Layout switches from inline-text trigger to wrap-flex chip row.
-     Tag-ui chips inside [data-chips] inherit the host's tag-ui token set;
-     the +more pill is a CSS-only button styled to match. */
-  :scope[data-multi-chips] [slot="trigger"] {
+     [multiple]:not([summary-label]) — both already-declared, reflected
+     props; no private stamp needed (dropped the redundant [data-multi-chips]
+     mirror, gh#1332 Category A). Layout switches from inline-text trigger
+     to wrap-flex chip row. Tag-ui chips inside [data-chips] inherit the
+     host's tag-ui token set; the +more pill is a CSS-only button styled
+     to match. */
+  :scope[multiple]:not([summary-label]) [slot="trigger"] {
     flex-wrap: wrap;
     align-items: center;
     /* Pack chips left with a small gap — override the base trigger's
@@ -232,17 +234,17 @@
        it to grow as chips overflow. */
     padding-block: calc(var(--select-py, var(--a-space-1)));
   }
-  :scope[data-multi-chips] [data-chips] {
+  :scope[multiple]:not([summary-label]) [data-chips] {
     display: contents; /* let chips participate in the trigger's flex line */
   }
-  :scope[data-multi-chips] [data-chips] tag-ui {
+  :scope[multiple]:not([summary-label]) [data-chips] tag-ui {
     /* Chip styling tracks the active variant via tag-ui's own tokens. */
     --tag-size: var(--a-ui-tiny);
   }
   /* "+N more" overflow pill — a stamped <button-ui variant="ghost" size="sm">
      (gh issue 276: no native <button> in stamped DOM); pill shape + chip-row
      height via button token re-points, chrome stays button-ui's own. */
-  :scope[data-multi-chips] [data-chips] [data-more] {
+  :scope[multiple]:not([summary-label]) [data-chips] [data-more] {
     --button-radius: var(--a-radius-full);
     --button-height: calc(var(--a-size) - var(--a-space-3));
     --button-fg: var(--select-fg-muted);
@@ -252,7 +254,7 @@
 
   /* Clear-all `x` affordance — stamped <button-ui variant="ghost" size="sm"
      icon="x"> (gh issue 276). Visible only when [clearable] AND chips. */
-  :scope[data-multi-chips] [data-clear-all] {
+  :scope[multiple]:not([summary-label]) [data-clear-all] {
     --button-radius: var(--a-radius-full);
     --button-height: calc(var(--a-size) - var(--a-space-3));
     --button-fg: var(--select-fg-muted);
@@ -263,16 +265,16 @@
   }
   /* button-ui's own :scope display wins over the UA [hidden] rule —
      keep the explicit guard. */
-  :scope[data-multi-chips] [data-clear-all][hidden] { display: none; }
+  :scope[multiple]:not([summary-label]) [data-clear-all][hidden] { display: none; }
 
   /* In multi-select with chips present, the trigger display element is
      the rest-of-row slot — make it flex-grow but not push chips off. */
-  :scope[data-multi-chips] [slot="display"] {
+  :scope[multiple]:not([summary-label]) [slot="display"] {
     flex: 1;
     min-width: 4ch;
   }
   /* Hide the display when empty in multi-mode (chips fill the slot). */
-  :scope[data-multi-chips] [slot="display"]:empty {
+  :scope[multiple]:not([summary-label]) [slot="display"]:empty {
     flex: 0 0 0;
     padding: 0;
   }
@@ -414,7 +416,7 @@ select-ui [role="group"] [slot="group-label"] {
   font-weight: var(--a-ui-weight);
   color: var(--select-fg-muted);
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: var(--a-font-tracking-wide);
   white-space: nowrap;
 }
 
@@ -432,7 +434,7 @@ select-ui [slot="hint"] {
   margin-top: var(--select-hint-mt, var(--a-space-1));
   font-size: var(--select-hint-size, var(--a-ui-xs));
   color: var(--select-hint-fg, var(--select-fg-muted));
-  line-height: var(--select-hint-lh, 1.4);
+  line-height: var(--select-hint-lh, var(--a-font-leading-normal));
 }
 
 /* ── SPEC-040 — Multi-select popover affordances ──

package/components/select/select.yaml

@@ -147,7 +147,7 @@ props:
       form for narrow triggers (filter bars) where wrapping chips
       would balloon the control.
     type: string
-    default: null
+    default: ''
     reflect: true
   min:
     description: |
@@ -251,17 +251,28 @@ usage: |-
   </script>
   ```
 slots:
-  label:
-    description: Label element above the trigger
-  listbox:
-    description: Popover container for options (role=listbox)
   trigger:
-    description: Button that opens the listbox
+    description: >-
+      Button that opens the listbox. Stamped only if no consumer-authored
+      [slot="trigger"] is already present at first render (adopt-or-stamp) —
+      a genuine light-DOM insertion point.
+parts:
+  listbox:
+    description: >-
+      Popover container for options (role=listbox) — template-owned anatomy
+      part, not a light-DOM insertion point (gh#1454). Its contents are
+      always wiped (`innerHTML = ''`) and rebuilt wholesale from `.options`/
+      parsed `<option>` children on every options render.
   hint:
     description: >-
       Override slot for hint markup richer than the plain [hint] attribute
       string (inline links, code spans). Renders beneath the trigger at
-      body-subtle typography. Mutually exclusive with [hint].
+      body-subtle typography. Mutually exclusive with [hint] per this
+      description, but template-owned in practice (gh#1454): the trigger
+      stamp is an unconditional `this.innerHTML = …` with no
+      capture-before-wipe for `hint` (unlike `leading`/`trailing` on
+      input-ui), so any pre-existing [slot="hint"] content is discarded, not
+      adopted, on first render.
 states:
   - name: idle
     description: Default, ready for interaction.

package/components/skeleton/skeleton.a2ui.json

@@ -16,13 +16,8 @@
     "component": {
       "const": "Skeleton"
     },
-    "height": {
-      "description": "Height of the placeholder.",
-      "type": "string",
-      "default": "1.2em"
-    },
-    "radius": {
-      "description": "Border radius",
+    "cornerRadius": {
+      "description": "Border radius. Renamed from `[radius]` (gh#1335) — a preset-enum can't share a name with the global Enum·preset `[radius]` attribute (`sharp`/`rounded`/`round`), whose vocabulary is unrelated (ADR-0053); mirrors chart-ui's own `[corner-radius]` fix (ADR-0054).",
       "type": "string",
       "enum": [
         "none",
@@ -33,6 +28,11 @@
       ],
       "default": "sm"
     },
+    "height": {
+      "description": "Height of the placeholder.",
+      "type": "string",
+      "default": "1.2em"
+    },
     "static": {
       "description": "When true, suppress the shimmer animation.",
       "type": "boolean",
@@ -68,6 +68,7 @@
       "shimmer"
     ],
     "name": "UISkeleton",
+    "parts": {},
     "related": [
       "EmptyState",
       "Card",

package/components/skeleton/skeleton.class.js

@@ -12,8 +12,8 @@
  */
 
 /**
- * <skeleton-ui width="200px" height="1.2em" radius="sm"></skeleton-ui>
- * <skeleton-ui width="100%" height="3rem" radius="md" static></skeleton-ui>
+ * <skeleton-ui width="200px" height="1.2em" corner-radius="sm"></skeleton-ui>
+ * <skeleton-ui width="100%" height="3rem" corner-radius="md" static></skeleton-ui>
  *
  * Placeholder shimmer for loading states.
  * Purely presentational — no DOM stamping needed.
@@ -21,17 +21,18 @@
  * Props (attributes):
  *   static — suppress the shimmer animation (default: false — shimmer on)
  *
- * Radius: none, sm (default), md, lg, full
+ * Corner radius: none, sm (default), md, lg, full. Renamed from `[radius]`
+ * (gh#1335) — see skeleton.yaml.
  */
 
 import { UIElement } from '../../core/element.js';
 
 export class UISkeleton extends UIElement {
   static properties = {
-    width:  { type: String,  default: '100%',  reflect: true },
-    height: { type: String,  default: '1.2em', reflect: true },
-    radius: { type: String,  default: 'sm',    reflect: true },
-    static: { type: Boolean, default: false,   reflect: true },
+    width:        { type: String,  default: '100%',  reflect: true },
+    height:       { type: String,  default: '1.2em', reflect: true },
+    cornerRadius: { type: String,  default: 'sm',    reflect: true, attribute: 'corner-radius' },
+    static:       { type: Boolean, default: false,   reflect: true },
   };
 
   static template = () => null;

package/components/skeleton/skeleton.css

@@ -18,12 +18,27 @@
     border-radius: var(--skeleton-radius);
   }
 
-  /* ── Radius variants ── */
-  :scope[radius="none"] { --skeleton-radius: 0; }
-  :scope[radius="sm"]   { --skeleton-radius: var(--a-radius-sm); }
-  :scope[radius="md"]   { --skeleton-radius: var(--a-radius-md); }
-  :scope[radius="lg"]   { --skeleton-radius: var(--a-radius-lg); }
-  :scope[radius="full"] { --skeleton-radius: var(--a-radius-full); }
+  /* ── Overlay mode (gh#1362) ──
+     Set by a composing parent (e.g. image-ui) that wants this element
+     positioned absolutely over itself. Declared here, inside skeleton-ui's
+     OWN `@scope` block, so it competes at skeleton-ui's own proximity (0)
+     against the base `:scope { position: relative }` rule above — an
+     equal-proximity tie the higher-specificity attribute selector wins
+     outright. A parent's own `@scope` overlay rule (image-ui's included)
+     can NEVER win this by raising its own specificity: `@scope` proximity
+     is resolved before specificity, and that parent's scoping root is one
+     level further away (proximity 1) — see CSS Cascade & Inheritance L6. */
+  :scope[data-overlay] {
+    position: absolute;
+    inset: 0;
+  }
+
+  /* ── Corner-radius variants (attribute renamed from [radius], gh#1335) ── */
+  :scope[corner-radius="none"] { --skeleton-radius: 0; }
+  :scope[corner-radius="sm"]   { --skeleton-radius: var(--a-radius-sm); }
+  :scope[corner-radius="md"]   { --skeleton-radius: var(--a-radius-md); }
+  :scope[corner-radius="lg"]   { --skeleton-radius: var(--a-radius-lg); }
+  :scope[corner-radius="full"] { --skeleton-radius: var(--a-radius-full); }
 
   /* ── Shimmer animation (default; suppress with [static]) ── */
   :scope:not([static])::after {

package/components/skeleton/skeleton.d.ts

@@ -13,10 +13,10 @@
 import { UIElement } from '../../core/element.js';
 
 export class UISkeleton extends UIElement {
+  /** Border radius. Renamed from `[radius]` (gh#1335) — a preset-enum can't share a name with the global Enum·preset `[radius]` attribute (`sharp`/`rounded`/`round`), whose vocabulary is unrelated (ADR-0053); mirrors chart-ui's own `[corner-radius]` fix (ADR-0054). */
+  cornerRadius: 'none' | 'sm' | 'md' | 'lg' | 'full';
   /** Height of the placeholder. */
   height: string;
-  /** Border radius */
-  radius: 'none' | 'sm' | 'md' | 'lg' | 'full';
   /** When true, suppress the shimmer animation. */
   static: boolean;
   /** Width of the placeholder. */

package/components/skeleton/skeleton.examples.md

@@ -6,10 +6,10 @@
 <skeleton-ui width="100px" height="1em"></skeleton-ui>
 ```
 
-## radius
+## corner-radius
 
 ```html
-<skeleton-ui width="120px" height="2em" radius="none"></skeleton-ui>
+<skeleton-ui width="120px" height="2em" corner-radius="none"></skeleton-ui>
 ```
 
 ## static

package/components/skeleton/skeleton.yaml

@@ -17,10 +17,11 @@ props:
     description: Height of the placeholder.
     type: string
     default: 1.2em
-  radius:
-    description: Border radius
+  cornerRadius:
+    description: Border radius. Renamed from `[radius]` (gh#1335) — a preset-enum can't share a name with the global Enum·preset `[radius]` attribute (`sharp`/`rounded`/`round`), whose vocabulary is unrelated (ADR-0053); mirrors chart-ui's own `[corner-radius]` fix (ADR-0054).
     type: string
     default: sm
+    attribute: corner-radius
     enum:
       - none
       - sm

package/components/skip-nav/skip-nav.a2ui.json

@@ -58,6 +58,7 @@
       "keyboard-navigation"
     ],
     "name": "UISkipNav",
+    "parts": {},
     "related": [
       "visually-hidden"
     ],