@adia-ai/web-components 0.7.9 → 0.7.10

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog — @adia-ai/web-components
 
+## [Unreleased]
+
+## [0.7.10] — 2026-06-03
+
+### Added
+
+- **New `<frame-ui>` layout primitive — sticky-header / scroll-body / sticky-footer frame.** The chrome-less app-shell skeleton: a flex column that fills its parent; native `<header>` / `<footer>` children pin (`flex: 0 0 auto`), `<section>` scrolls (`flex: 1; min-block-size: 0; overflow: auto`) — the only overflow region. Regions are positioned by tag + DOM order (Light DOM, no slot projection — ADR-0033). CSS-only `category: layout` component (no props). Common shape `<frame-ui><section>…</section><footer>…</footer></frame-ui>`; add `<header>` only for a panel title/toolbar. Distinct from `<card-ui>` (border + elevation + rich header grid), `<drawer-ui>` / `<modal-ui>` (backdrop + dismiss), and the page shells — those layer chrome over the same region contract (a future cut extracts the shared frame `@layer` they compose). Requires a definite-height parent. Files: `components/frame/{frame.yaml,frame.css,frame.class.js,frame.js,frame.html}`.
+
+### Changed
+
+- **`[verse]` register: bare-verse prose type bumped one tier (`sm` → `md`).** A bare `[verse]` context now resolves its prose type to the `md` tier instead of `sm` — `--a-display-size` / `--a-title-size` / `--a-heading-size` / `--a-section-size` re-point `sm`→`md` (display 18→23, title 16→19, heading 13→14, section 13→14px). `--a-radius-max` tightened `1rem`→`0.75rem` (12px). **Behavior change** — prose-ish text in a compact `[verse]` surface renders one tier larger; controls + the `[verse][size]` sub-tiers are unaffected. File: `styles/verse.css`.
+- **CDN bundles rebuilt** — `dist/web-components.min.css` + `dist/web-components.min.js` regenerated so `<frame-ui>` (CSS + registration), the `list-item-ui` grid fix, and the `[verse]` type bump reach `@adia-ai/web-components@0.7` CDN consumers.
+
+### Fixed
+
+- **`list-item-ui` description now spans the full content width.** `[slot="description"]` was pinned to `grid-column: 2`, so when a `[slot="action"]` was present (the 3-column `icon | content | action` grid) a multi-line description was boxed into the content column — it wrapped early and left dead space under the action. The grid is now a **header-row model**: `[slot="icon"]` · `[slot="text"]` · `[slot="action"]` align on row 1, and `[slot="description"]` spans `grid-column: 2 / -1` on row 2 (flowing under the action). The icon + action `grid-row` changed `1 / -1` → `1`, which is identical for single-row items (icon + text only) — so nav menus / simple lists are unchanged; only rows carrying a description are affected (e.g. `onboarding-checklist-ui` rows gain full-width descriptions + title-aligned action buttons). File: `components/list/list.css`.
+
 ## [0.7.9] — 2026-06-03
 
 ### Changed

package/components/frame/frame.a2ui.json

@@ -0,0 +1,85 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Frame.json",
+  "title": "Frame",
+  "description": "Sticky-header / scrolling-body / sticky-footer layout frame — the\nchrome-less app-shell skeleton. A flex column that fills its parent's\nblock size: a native <header> child pins to the top, a <footer> child\npins to the bottom, and the <section> child scrolls between them (the\nonly region with overflow). All three regions are OPTIONAL and positioned\nby tag + DOM order (Light DOM, no slot projection — ADR-0033), so the\ncommon shape is just <section> + <footer>. Use for tab / panel content\nwhere actions stay visible while the body scrolls. Distinct from <card-ui>\n(adds border + elevation + a rich header grid), <drawer-ui> / <modal-ui>\n(add a backdrop + dismiss), and the page shells (<admin-page> / <page-ui>) —\nthose layer chrome over this same region contract. Requires a definite-height\nparent (a flex/grid chain rooted at a viewport height) for the section to\nscroll; in a content-sized parent it collapses to its content (no scroll,\nnot broken).\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "Frame"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "layout",
+    "composes": [],
+    "events": {},
+    "examples": [
+      {
+        "description": "Scrolling body with a pinned footer action bar (no header).",
+        "a2ui": "[\n  { \"id\": \"root\", \"component\": \"Frame\", \"children\": [\"body\", \"actions\"] },\n  { \"id\": \"body\", \"component\": \"Section\", \"children\": [\"copy\"] },\n  { \"id\": \"copy\", \"component\": \"Text\", \"variant\": \"body\", \"textContent\": \"Scrollable panel content.\" },\n  { \"id\": \"actions\", \"component\": \"Footer\", \"children\": [\"save\"] },\n  { \"id\": \"save\", \"component\": \"Button\", \"text\": \"Save\", \"variant\": \"primary\" }\n]",
+        "name": "panel-with-footer"
+      }
+    ],
+    "keywords": [
+      "frame",
+      "panel",
+      "layout",
+      "scroll",
+      "sticky",
+      "footer",
+      "header",
+      "shell",
+      "app",
+      "sheet"
+    ],
+    "name": "UIFrame",
+    "related": [
+      "Card",
+      "Drawer",
+      "Modal",
+      "Col"
+    ],
+    "slots": {},
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "status": "stable",
+    "synonyms": {
+      "panel": [
+        "panel",
+        "frame",
+        "sheet"
+      ],
+      "scroll": [
+        "scroll",
+        "frame",
+        "body"
+      ],
+      "shell": [
+        "shell",
+        "frame",
+        "app"
+      ]
+    },
+    "tag": "frame-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/frame/frame.class.js

@@ -0,0 +1,31 @@
+/**
+ * Non-side-effect class export for `<frame-ui>`.
+ *
+ * Importing this file gives you the class without auto-registering the tag.
+ * The auto-register path is `@adia-ai/web-components/components/frame`
+ * (which imports this file + calls `defineIfFree()`).
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+import { UIElement } from '../../core/element.js';
+
+/**
+ * <frame-ui> — sticky-header / scroll-body / sticky-footer layout frame.
+ *
+ *   <frame-ui>
+ *     <header>…</header>   <!-- optional: pinned top -->
+ *     <section>…</section> <!-- scrolling body (the only overflow region) -->
+ *     <footer>…</footer>   <!-- optional: pinned bottom (actions) -->
+ *   </frame-ui>
+ *
+ * Pure-CSS layout container — no props, no template. Regions are native
+ * <header>/<section>/<footer> children positioned by tag + DOM order (Light
+ * DOM, no slot projection). The class exists only to register the tag; all
+ * behaviour is in frame.css. See <card-ui>/<drawer-ui>/<modal-ui> for the
+ * chrome'd variants that compose the same region contract.
+ */
+export class UIFrame extends UIElement {
+  static properties = {};
+  static template = () => null;
+}

package/components/frame/frame.css

@@ -0,0 +1,39 @@
+/**
+ * <frame-ui> — sticky-header / scroll-body / sticky-footer layout frame.
+ *
+ * The chrome-less app-shell skeleton: a flex column that fills its parent's
+ * block size. A native <header> child pins to the top, a <footer> child pins
+ * to the bottom, and the <section> child scrolls between them (the only region
+ * with overflow). All three regions are OPTIONAL and positioned by tag + DOM
+ * order — Light DOM, no slot projection (ADR-0033). <card-ui> / <drawer-ui> /
+ * <modal-ui> layer chrome (border / elevation / backdrop) over this same
+ * region contract.
+ *
+ * Height: frame-ui fills its parent, so the parent must establish a definite
+ * block size (a flex/grid chain rooted at a viewport height, or an explicit
+ * height). In a content-sized parent it collapses to its content and the
+ * <section> simply doesn't scroll (graceful, not broken).
+ */
+@scope (frame-ui) {
+  :where(:scope) {
+    display: flex;
+    flex-direction: column;
+    block-size: 100%;
+    min-block-size: 0;
+  }
+
+  /* Pinned rails — <header> tops, <footer> bottoms; fixed height, never scroll. */
+  :scope > :is(header, footer) {
+    flex: 0 0 auto;
+    min-block-size: 0;
+  }
+
+  /* The single scroll region. `min-block-size: 0` lets the flex item shrink
+     below its content's intrinsic size — the classic flex-scroll gotcha that
+     makes overflow:auto actually scroll inside a column. */
+  :scope > section {
+    flex: 1 1 auto;
+    min-block-size: 0;
+    overflow: auto;
+  }
+}

package/components/frame/frame.d.ts

@@ -0,0 +1,30 @@
+/**
+ * `<frame-ui>` — Sticky-header / scrolling-body / sticky-footer layout frame — the
+chrome-less app-shell skeleton. A flex column that fills its parent's
+block size: a native <header> child pins to the top, a <footer> child
+pins to the bottom, and the <section> child scrolls between them (the
+only region with overflow). All three regions are OPTIONAL and positioned
+by tag + DOM order (Light DOM, no slot projection — ADR-0033), so the
+common shape is just <section> + <footer>. Use for tab / panel content
+where actions stay visible while the body scrolls. Distinct from <card-ui>
+(adds border + elevation + a rich header grid), <drawer-ui> / <modal-ui>
+(add a backdrop + dismiss), and the page shells (<admin-page> / <page-ui>) —
+those layer chrome over this same region contract. Requires a definite-height
+parent (a flex/grid chain rooted at a viewport height) for the section to
+scroll; in a content-sized parent it collapses to its content (no scroll,
+not broken).
+
+ *
+ * @see https://ui-kit.exe.xyz/site/components/frame
+ *
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
+ * the component's `.a2ui.json` sidecar(s). Edit the source `.yaml`,
+ * run `npm run build:components`, then `npm run codegen:dts` to
+ * regenerate; or hand-author this file fully if rich event types are
+ * needed beyond what the yaml `events:` block can express.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export class UIFrame extends UIElement {
+}

package/components/frame/frame.js

@@ -0,0 +1,17 @@
+/**
+ * `<frame-ui>` — auto-registers the tag on import.
+ *
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
+ *
+ *   import { UIFrame } from '@adia-ai/web-components/components/frame/class';
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+import { defineIfFree } from '../../core/register.js';
+import { UIFrame } from './frame.class.js';
+
+defineIfFree('frame-ui', UIFrame);
+
+export { UIFrame };

package/components/frame/frame.yaml

@@ -0,0 +1,84 @@
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: UIFrame
+tag: frame-ui
+status: stable
+component: Frame
+category: layout
+version: 1
+description: |
+  Sticky-header / scrolling-body / sticky-footer layout frame — the
+  chrome-less app-shell skeleton. A flex column that fills its parent's
+  block size: a native <header> child pins to the top, a <footer> child
+  pins to the bottom, and the <section> child scrolls between them (the
+  only region with overflow). All three regions are OPTIONAL and positioned
+  by tag + DOM order (Light DOM, no slot projection — ADR-0033), so the
+  common shape is just <section> + <footer>. Use for tab / panel content
+  where actions stay visible while the body scrolls. Distinct from <card-ui>
+  (adds border + elevation + a rich header grid), <drawer-ui> / <modal-ui>
+  (add a backdrop + dismiss), and the page shells (<admin-page> / <page-ui>) —
+  those layer chrome over this same region contract. Requires a definite-height
+  parent (a flex/grid chain rooted at a viewport height) for the section to
+  scroll; in a content-sized parent it collapses to its content (no scroll,
+  not broken).
+props: {}
+events: {}
+slots: {}
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens: {}
+a2ui:
+  rules:
+    - rule: 'Use <frame-ui> for a scroll-body-with-pinned-footer panel — the <section> scrolls; <header> / <footer> stay fixed.'
+      reason: 'The chrome-less app-shell frame.'
+    - rule: 'Regions are native <header> / <section> / <footer> children, positioned by tag + DOM order. Do NOT add slot= attributes — slot is inert in Light DOM.'
+      reason: 'Light-DOM substrate (ADR-0033).'
+    - rule: 'Most panels need only <section> + <footer>; add <header> only when the panel has its own title or toolbar.'
+      reason: 'Header is optional.'
+    - rule: 'For a bordered/elevated surface use <card-ui>; for an overlay use <drawer-ui> / <modal-ui>; for routed page layout use <admin-page> / <page-ui>. frame-ui is the bare layout only.'
+      reason: 'Decision rule vs chrome siblings.'
+    - rule: 'frame-ui fills its parent — give the parent a definite height (a flex/grid chain to a viewport height) or the section will not scroll.'
+      reason: 'Scroll requires a bounded height.'
+anti_patterns: []
+examples:
+  - name: panel-with-footer
+    description: Scrolling body with a pinned footer action bar (no header).
+    a2ui: >-
+      [
+        { "id": "root", "component": "Frame", "children": ["body", "actions"] },
+        { "id": "body", "component": "Section", "children": ["copy"] },
+        { "id": "copy", "component": "Text", "variant": "body", "textContent": "Scrollable panel content." },
+        { "id": "actions", "component": "Footer", "children": ["save"] },
+        { "id": "save", "component": "Button", "text": "Save", "variant": "primary" }
+      ]
+keywords:
+  - frame
+  - panel
+  - layout
+  - scroll
+  - sticky
+  - footer
+  - header
+  - shell
+  - app
+  - sheet
+synonyms:
+  panel:
+    - panel
+    - frame
+    - sheet
+  scroll:
+    - scroll
+    - frame
+    - body
+  shell:
+    - shell
+    - frame
+    - app
+related:
+  - Card
+  - Drawer
+  - Modal
+  - Col

package/components/index.js

@@ -74,6 +74,7 @@ export { UIFields } from './fields/fields.js';
 export { UIRow }   from './row/row.js';
 export { UIGrid }  from './grid/grid.js';
 export { UIStack } from './stack/stack.js';
+export { UIFrame } from './frame/frame.js';
 export { UIChart } from './chart/chart.js';
 export { UIChartLegend } from './chart-legend/chart-legend.js';
 export { UIPopover } from './popover/popover.js';

package/components/list/list.css

@@ -106,10 +106,12 @@
     --list-item-desc-font-size: var(--a-ui-sm);
   }
 
-  /* Anatomy:
-     col 1 = icon (auto width; collapses to 0 when no icon)
-     col 2 = content stack (text on row 1, description on row 2)
-     The icon spans both rows + centers vertically with the stack.
+  /* Anatomy (header-row model):
+     row 1 = icon (col 1) · text/title (col 2) · action (col 3), all aligned
+     on the title row. row 2 = description, spanning col 2 / -1 (under the
+     action) so multi-line supporting text uses the full content width rather
+     than being boxed into col 2 beside the action. For icon+text-only items
+     there is a single row, so `grid-row: 1` is identical to the old `1 / -1`.
      `[slot="content"]` (used when consumer provides custom rendering)
      spans all columns. */
   :scope {
@@ -136,7 +138,7 @@
      authored children + template-engine-wrapped conditionals). */
   :scope [slot="icon"] {
     grid-column: 1;
-    grid-row: 1 / -1;
+    grid-row: 1;
     align-self: center;
     color: var(--list-item-icon-color);
   }
@@ -147,7 +149,7 @@
   }
 
   :scope [slot="description"] {
-    grid-column: 2;
+    grid-column: 2 / -1;
     grid-row: 2;
     color: var(--list-item-desc-color);
     font-size: var(--list-item-desc-font-size);
@@ -157,7 +159,8 @@
   /* When a [slot="action"] child is present, the grid becomes 3-column:
      icon | content | action. The :has() selector promotes the template
      only when an action exists, so 2-column layouts stay unaffected.
-     Action is right-aligned + vertically centered (spans both content rows).
+     Action is right-aligned on the title row (row 1) so a multi-line
+     description below can span the full width (col 2 / -1) beneath it.
      Used by onboarding-checklist-ui item rows + any consumer that needs an
      end-aligned action button on a list-item row.
      NOTE: NOT using `> [slot="action"]` (direct-child) — the template
@@ -171,7 +174,7 @@
   }
   :scope [slot="action"] {
     grid-column: 3;
-    grid-row: 1 / -1;
+    grid-row: 1;
     align-self: center;
     justify-self: end;
   }