@adia-ai/web-components 0.0.23 → 0.0.25

package/components/aside/aside.yaml

@@ -0,0 +1,100 @@
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: AdiaAside
+tag: aside-ui
+component: Aside
+category: container
+version: 1
+description: |
+  Side region — styled by closest container parent (AppShell / Drawer / Card).
+  Holds nav rails, secondary actions, or supplementary content. CSS-only slot
+  stub: no own behavior; the container parent reads `[collapsible]` and
+  `[width]` to wire collapse + width. For interactive resize / collapse
+  behavior, compose with `<pane-ui>` inside: aside = semantic role,
+  pane = resizable / collapsible primitive.
+props:
+  collapsible:
+    description: |
+      Marks the aside as collapsible. The container parent (AppShell, Drawer)
+      reads this and wires the toggle affordance + ARIA + state. The aside
+      itself ships no collapse logic.
+    type: boolean
+    default: false
+    reflect: true
+  width:
+    description: |
+      Token-bound width hint. The container parent reads this to set the
+      aside column width — `rail` (compact icon-only nav), `panel` (full
+      nav text), `wide` (workspace pane). Empty string defers to parent default.
+    type: string
+    default: ""
+    enum:
+      - ""
+      - rail
+      - panel
+      - wide
+    reflect: true
+events: {}
+slots:
+  default:
+    description: "Default slot — primary child content (typically `<list-ui>`, `<tree-ui>`, or app-nav primitives)."
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: card-with-side-nav
+    description: Card laid out as a header / aside / section, with the aside holding a nav list.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": ["hdr", "side", "main"]
+        },
+        {
+          "id": "hdr",
+          "component": "Header",
+          "children": ["title"]
+        },
+        {
+          "id": "title",
+          "component": "Text",
+          "slot": "heading",
+          "textContent": "Settings"
+        },
+        {
+          "id": "side",
+          "component": "Aside",
+          "width": "rail",
+          "children": ["nav"]
+        },
+        {
+          "id": "nav",
+          "component": "List",
+          "children": []
+        },
+        {
+          "id": "main",
+          "component": "Section",
+          "children": []
+        }
+      ]
+keywords:
+  - aside
+  - sidebar
+  - rail
+  - panel
+  - side-region
+  - nav-rail
+synonyms: {}
+related:
+  - app-shell
+  - drawer
+  - pane
+  - section
+  - header

package/components/button/button.css

@@ -1,7 +1,9 @@
-/* Safari 17.x bug: `:scope[attr]:hover` inside `@scope` doesn't match the
-   scope root. Plain selectors outside the @scope work — custom-property
-   tokens still resolve via inheritance. Specificity (0,1,1 / 0,2,1) is
-   preserved. See docs/BROWSER-COMPAT.md §3a. */
+/* Safari 17.x bug: `:scope:state` and `:scope[attr]:state` inside `@scope`
+   don't match the scope root. Plain selectors outside the @scope work —
+   custom-property tokens still resolve via inheritance. Specificity
+   (0,1,1 / 0,2,1) is preserved. See docs/BROWSER-COMPAT.md §3a. */
+button-ui:active { transform: scale(0.97); }
+
 button-ui:not([disabled]):hover,
 button-ui[variant="primary"]:not([disabled]):hover {
   --button-bg: var(--button-bg-hover);
@@ -118,7 +120,7 @@ button-ui[color="danger"]:not([disabled]):hover {
     line-height: 1;
   }
 
-  :scope:active { transform: scale(0.97); }
+  /* :scope:active moved outside @scope — see Safari 17.x bug note at top. */
   :scope:focus-visible { outline: none; box-shadow: var(--button-focus-ring); }
 
   /* ── Variants (rest state) ── */

package/components/check/check.css

@@ -1,7 +1,8 @@
-/* Safari 17.x bug: `:scope*:hover` inside `@scope` doesn't match the
-   scope root. The `:scope:hover [slot="box"]` shape — `:hover` on the
-   scope root, descendant selector — is also affected; the entire selector
-   moves out together. See docs/BROWSER-COMPAT.md §3a. */
+/* Safari 17.x bug: `:scope*:hover` and `:scope[dyn-attr]` inside `@scope`
+   don't match (Flavor A) or don't restyle on attribute removal (Flavor B).
+   For [checked] / [indeterminate], when JS toggles the attribute off,
+   Safari leaves the visual stuck — selectors moved out as plain
+   `tagname[attr]` rules. See docs/BROWSER-COMPAT.md §3a. */
 check-ui:not([disabled]):hover [slot="box"] {
   border-color: var(--check-border-hover);
   background: var(--check-bg-hover);
@@ -11,6 +12,23 @@ check-ui[indeterminate]:not([disabled]):hover [slot="box"] {
   background: var(--check-bg-checked-hover);
   border-color: var(--check-bg-checked-hover);
 }
+check-ui[checked] [slot="box"],
+check-ui[indeterminate] [slot="box"] {
+  background: var(--check-bg-checked);
+  border-color: var(--check-border-checked);
+}
+check-ui[checked] {
+  --_icon-w:         calc(var(--check-size) * 0.3);
+  --_icon-h:         calc(var(--check-size) * 0.55);
+  --_icon-border:    solid var(--check-fg-checked);
+  --_icon-bw:        0 calc(var(--check-size) * 0.12) calc(var(--check-size) * 0.12) 0;
+  --_icon-transform: rotate(45deg) translate(-1px, -1px);
+}
+check-ui[indeterminate] {
+  --_dash-bg: var(--check-fg-checked);
+  --_icon-w:  calc(var(--check-size) * 0.5);
+  --_icon-h:  calc(var(--check-size) * 0.12);
+}
 
 @scope (check-ui) {
   :where(:scope) {
@@ -97,29 +115,8 @@ check-ui[indeterminate]:not([disabled]):hover [slot="box"] {
     background: var(--_dash-bg);
   }
 
-  /* hover rules moved outside @scope — see Safari 17.x bug note at top. */
-
-  /* Checked — CSS border checkmark */
-  :scope[checked] [slot="box"],
-  :scope[indeterminate] [slot="box"] {
-    background: var(--check-bg-checked);
-    border-color: var(--check-border-checked);
-  }
-
-  :scope[checked] {
-    --_icon-w:         calc(var(--check-size) * 0.3);
-    --_icon-h:         calc(var(--check-size) * 0.55);
-    --_icon-border:    solid var(--check-fg-checked);
-    --_icon-bw:        0 calc(var(--check-size) * 0.12) calc(var(--check-size) * 0.12) 0;
-    --_icon-transform: rotate(45deg) translate(-1px, -1px);
-  }
-
-  /* Indeterminate — horizontal dash */
-  :scope[indeterminate] {
-    --_dash-bg: var(--check-fg-checked);
-    --_icon-w:  calc(var(--check-size) * 0.5);
-    --_icon-h:  calc(var(--check-size) * 0.12);
-  }
+  /* hover rules + [checked]/[indeterminate] state rules moved outside @scope —
+     see Safari 17.x bug note at top. */
 
   /* Label */
   :scope[label]::after { content: attr(label); }