@adia-ai/web-components 0.6.22 → 0.6.23

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog — @adia-ai/web-components
 
+## [0.6.23] — 2026-05-22
+
+### Added — `row-ui` `wrap-at="bp"` responsive wrap (`components/row/`)
+
+- **`wrap-at="bp"`** enables `flex-wrap: wrap` from the named breakpoint upward (`xs/sm/md/lg/xl`). Complements the boolean `[wrap]` (always-wrap, unchanged) for the common "single row on desktop, wraps on mobile" toolbar pattern: `<row-ui gap="2 3@md" wrap-at="sm">`. Uses inline `flex-wrap` to avoid reactive re-entrancy from toggling the boolean attribute inside `render()`. File: `components/row/row.js` + `components/row/row.yaml`.
+
+### Added — `--a-ui-2xs: 11px;` UI typography scale slot (`styles/typography.css`)
+
+- **`--a-ui-2xs`** (11px) slots cleanly into the existing UI scale between `--a-ui-tiny` (10px) and `--a-ui-xs` (12px). Currently unused — pre-staged for upcoming responsive UI-text variants that need a denser-than-`xs` step. File: `styles/typography.css`.
+
+### Documentation — `components/` examples third sweep (§428/§432)
+
+- **22 `components/*/*.examples.html` files** updated with @bp annotations + missing prop / token tables across the docs sweep arc (badge, block, button, card, check, code, col, fields, grid, image, link, list, modal, nav family, pane, select, stat, stream, table, tabs, tag, text-ui, toggle-group, tooltip, tree). Picks up the v0.6.22 `@bp` substrate in living demos so consumers see responsive composition shapes inline. Source journal sections: §428 (third sweep + token tables) + §432 (collision fix).
+
 ## [0.6.22] — 2026-05-22
 
 ### Added — `@bp` responsive attribute system (`core/responsive.js`)

package/components/row/class.js

@@ -20,7 +20,7 @@
 
 import { UIElement } from '../../core/element.js';
 import { draggable } from '../../traits/draggable/draggable.js';
-import { parseResponsive, breakpoint } from '../../core/responsive.js';
+import { parseResponsive, breakpoint, BP_NAMES } from '../../core/responsive.js';
 
 export class UIRow extends UIElement {
   static properties = {
@@ -29,6 +29,9 @@ export class UIRow extends UIElement {
     gap:       { type: String,  default: 'md',     reflect: true },
     grow:      { type: Boolean, default: false,    reflect: true },
     wrap:      { type: Boolean, default: false,    reflect: true },
+    // wrap-at="sm" = enable flex-wrap from sm upward; complements the
+    // boolean [wrap] (always-wrap) without modifying it.
+    wrapAt:    { type: String,  default: '',       reflect: true, attribute: 'wrap-at' },
     draggable: { type: Boolean, default: false,    reflect: true },
   };
   static template = () => null;
@@ -53,7 +56,8 @@ export class UIRow extends UIElement {
     const gap     = this.gap;
     const align   = this.align;
     const justify = this.justify;
-    const anyR    = gap?.includes('@') || align?.includes('@') || justify?.includes('@');
+    const wrapAt  = this.wrapAt;
+    const anyR    = gap?.includes('@') || align?.includes('@') || justify?.includes('@') || !!wrapAt;
     const bp      = anyR ? breakpoint.value : '';
 
     if (gap?.includes('@')) {
@@ -73,6 +77,18 @@ export class UIRow extends UIElement {
     } else {
       this.style.removeProperty('--row-justify');
     }
+
+    // wrap-at="sm" enables flex-wrap from the named breakpoint upward.
+    // Uses inline style rather than toggling the [wrap] attribute to avoid
+    // reactive re-entrancy. Falls back to '' (CSS [wrap] handles the
+    // always-wrap case; this only fires when wrap-at is set).
+    if (wrapAt) {
+      const activeIdx = BP_NAMES.indexOf(bp);
+      const targetIdx = BP_NAMES.indexOf(wrapAt);
+      this.style.flexWrap = (targetIdx !== -1 && activeIdx >= targetIdx) ? 'wrap' : '';
+    } else {
+      this.style.flexWrap = '';
+    }
   }
 }
 

package/components/row/row.a2ui.json

@@ -42,9 +42,14 @@
       "default": "start"
     },
     "wrap": {
-      "description": "Enable flex wrap",
+      "description": "Enable flex-wrap unconditionally. For viewport-responsive wrapping use [wrap-at] instead.",
       "type": "boolean",
       "default": false
+    },
+    "wrapAt": {
+      "description": "Enable flex-wrap from the named breakpoint upward (xs/sm/md/lg/xl). `wrap-at=\"sm\"` = no-wrap on xs, wrap from sm up. Complements the boolean [wrap] (always-wrap) without conflicting with it.",
+      "type": "string",
+      "default": ""
     }
   },
   "required": [

package/components/row/row.d.ts

@@ -30,6 +30,8 @@ export class UIRow extends UIElement {
   grow: boolean;
   /** Main-axis justify (start/center/end/between/space-between/space-around). Accepts `@bp` notation: justify="start between@md". */
   justify: string;
-  /** Enable flex wrap */
+  /** Enable flex-wrap unconditionally. For viewport-responsive wrapping use [wrap-at] instead. */
   wrap: boolean;
+  /** Enable flex-wrap from the named breakpoint upward (xs/sm/md/lg/xl). `wrap-at="sm"` = no-wrap on xs, wrap from sm up. Complements the boolean [wrap] (always-wrap) without conflicting with it. */
+  wrapAt: string;
 }

package/components/row/row.yaml

@@ -44,9 +44,19 @@ props:
     type: string
     default: start
   wrap:
-    description: Enable flex wrap
+    description: >-
+      Enable flex-wrap unconditionally. For viewport-responsive wrapping use
+      [wrap-at] instead.
     type: boolean
     default: false
+  wrapAt:
+    description: >-
+      Enable flex-wrap from the named breakpoint upward (xs/sm/md/lg/xl).
+      `wrap-at="sm"` = no-wrap on xs, wrap from sm up. Complements the
+      boolean [wrap] (always-wrap) without conflicting with it.
+    type: string
+    default: ""
+    attribute: wrap-at
 events: {}
 slots:
   default:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.6.22",
+  "version": "0.6.23",
   "description": "AdiaUI web components \u2014 vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-runtime.",
   "type": "module",
   "types": "./index.d.ts",

package/styles/typography.css

@@ -313,6 +313,7 @@
   --a-ui-family: var(--a-font-family-ui);
   --a-ui-weight: var(--a-weight-medium);
   --a-ui-tiny: 10px;
+  --a-ui-2xs: 11px;
   --a-ui-xs: 12px;
   --a-ui-sm: 13px;
   --a-ui-md: 14px;