@adia-ai/web-components 0.5.11 → 0.5.13

package/components/swatch/swatch.a2ui.json

@@ -14,7 +14,7 @@
   ],
   "properties": {
     "autoContrast": {
-      "description": "When set, computes the swatch color's OKLab L and switches the label /\ndetail color between light + dark so it remains legible against the\ntile background. Only applies to shape=\"block\" (where the label sits\nON the tile). Uses a 1px canvas probe to handle any CSS color form\n(oklch / hex / hsl / named / var() references).\n",
+      "description": "When set, computes the swatch color's OKLab L and switches the label /\ndetail color between light + dark so it remains legible against the\ntile background. Active when `label-position=\"overlay\"` (where the\nlabel sits ON the tile). Uses a 1px canvas probe to handle any CSS\ncolor form (oklch / hex / hsl / named / var() references).\n",
       "type": "boolean",
       "default": false
     },
@@ -51,6 +51,15 @@
       "type": "string",
       "default": ""
     },
+    "labelPosition": {
+      "description": "§253 (v0.5.12, FB-23 §1). Position the label relative to the tile.\n`below` (default) stacks label under the tile (current shape=\"block\"\nlayout — `flex-direction: column`). `overlay` renders the label\nINSIDE the tile via absolute positioning; pair with `[auto-contrast]`\nto keep the label legible against the tile color (`data-on-light` /\n`data-on-dark` classes auto-stamped per OKLab-L probe). Only meaningful\nwhen `shape=\"block\"` (other shapes are too small for in-tile labels).\nUnblocks Tokens Studio's C1.3 dogfood migration (label-inside-the-tile\npattern; blocked 3 cycles on this design call).",
+      "type": "string",
+      "enum": [
+        "below",
+        "overlay"
+      ],
+      "default": "below"
+    },
     "selectable": {
       "description": "When set, makes the swatch keyboard-focusable + clickable. Sets role=\"button\" + tabindex=\"0\". Dispatches a \"select\" event on activation (click / Enter / Space).",
       "type": "boolean",
@@ -140,7 +149,10 @@
     ],
     "slots": {
       "default": {
-        "description": "Optional rich label content. When present, replaces the [label] attribute's text."
+        "description": "Optional rich label content. When present, replaces the [label]\nattribute's text. Consumer chrome positioned absolutely against the\nswatch tile should use `[slot=\"chrome\"]` instead — default-slot\nchildren are funneled into the label region.\n"
+      },
+      "chrome": {
+        "description": "§-TBD (v0.5.13, FB-34 §1). Sibling-of-tile chrome — gamut badges,\noverride/tracked dots, custom indicators — that survives stamping as\na direct host sibling rather than being funneled into the label. Pair\nwith consumer-authored CSS `position: absolute` against the host\n(the host carries `position: relative` when `shape=\"block\"`, so\n`top/right/bottom/left` offsets anchor to the tile's geometry).\nCloses the C1.3 dogfood chrome-overlay composition gap.\n"
       }
     },
     "states": [

package/components/swatch/swatch.css

@@ -141,6 +141,38 @@
     white-space: nowrap;
   }
 
+  /* ═══════ §253 (v0.5.12, FB-23 §1): label-position="overlay" ═══════
+     Renders the label INSIDE the block tile via absolute positioning.
+     Pair with [auto-contrast] for OKLab-L-driven legibility (existing
+     `data-on-light` / `data-on-dark` classes stamp on the label per
+     the OKLab-L probe; see auto-contrast rules below).
+
+     The host becomes the positioning context (default flex-column flow
+     for the tile + detail line remains); the label is pulled out of
+     flow + absolutely positioned to overlap the tile's full bounds
+     (`top: 0; height: var(--_block-h)`). Tile is the first flex child
+     with the same height, so the absolute label aligns exactly to it.
+
+     Only meaningful when `shape="block"` (other shapes are too small
+     for in-tile labels). Unblocks Tokens Studio's C1.3 dogfood
+     migration (label-inside-the-tile pattern; blocked 3 cycles on this
+     design call). */
+  :scope[shape="block"][label-position="overlay"] {
+    position: relative;
+  }
+  :scope[shape="block"][label-position="overlay"] > [data-label] {
+    position: absolute;
+    top: 0;
+    inset-inline: 0;
+    height: var(--_block-h, var(--swatch-tile-lg));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-block-start: 0;        /* override the below-tile margin */
+    padding: var(--a-space-1) var(--a-space-2);
+    pointer-events: none;          /* don't intercept clicks on the tile */
+  }
+
   /* ═══════ Sizes ═══════
      Override the dot/square diameter (`--_size`) and the block-shape
      height (`--_block-h`) for each size preset. Line/dashed widths use

package/components/swatch/swatch.d.ts

@@ -31,9 +31,9 @@ export type SwatchSelectEvent = CustomEvent<SwatchSelectEventDetail>;
 export class UISwatch extends UIElement {
   /** When set, computes the swatch color's OKLab L and switches the label /
 detail color between light + dark so it remains legible against the
-tile background. Only applies to shape="block" (where the label sits
-ON the tile). Uses a 1px canvas probe to handle any CSS color form
-(oklch / hex / hsl / named / var() references).
+tile background. Active when `label-position="overlay"` (where the
+label sits ON the tile). Uses a 1px canvas probe to handle any CSS
+color form (oklch / hex / hsl / named / var() references).
  */
   autoContrast: boolean;
   /** Optional marker(s) rendered in the upper-right of the tile. Single value
@@ -54,6 +54,16 @@ are silently dropped.
   detail: string;
   /** Optional label rendered next to (or below, for shape="block") the swatch. Use the default slot for richer content. */
   label: string;
+  /** §253 (v0.5.12, FB-23 §1). Position the label relative to the tile.
+`below` (default) stacks label under the tile (current shape="block"
+layout — `flex-direction: column`). `overlay` renders the label
+INSIDE the tile via absolute positioning; pair with `[auto-contrast]`
+to keep the label legible against the tile color (`data-on-light` /
+`data-on-dark` classes auto-stamped per OKLab-L probe). Only meaningful
+when `shape="block"` (other shapes are too small for in-tile labels).
+Unblocks Tokens Studio's C1.3 dogfood migration (label-inside-the-tile
+pattern; blocked 3 cycles on this design call). */
+  labelPosition: 'below' | 'overlay';
   /** When set, makes the swatch keyboard-focusable + clickable. Sets role="button" + tabindex="0". Dispatches a "select" event on activation (click / Enter / Space). */
   selectable: boolean;
   /** Reflected visual selected state. Pair with [selectable] to make the swatch behave like a radio-style picker. Sets aria-pressed. */

package/components/swatch/swatch.yaml

@@ -80,12 +80,30 @@ props:
     description: |
       When set, computes the swatch color's OKLab L and switches the label /
       detail color between light + dark so it remains legible against the
-      tile background. Only applies to shape="block" (where the label sits
-      ON the tile). Uses a 1px canvas probe to handle any CSS color form
-      (oklch / hex / hsl / named / var() references).
+      tile background. Active when `label-position="overlay"` (where the
+      label sits ON the tile). Uses a 1px canvas probe to handle any CSS
+      color form (oklch / hex / hsl / named / var() references).
     type: boolean
     default: false
     reflect: true
+  labelPosition:
+    description: |-
+      §253 (v0.5.12, FB-23 §1). Position the label relative to the tile.
+      `below` (default) stacks label under the tile (current shape="block"
+      layout — `flex-direction: column`). `overlay` renders the label
+      INSIDE the tile via absolute positioning; pair with `[auto-contrast]`
+      to keep the label legible against the tile color (`data-on-light` /
+      `data-on-dark` classes auto-stamped per OKLab-L probe). Only meaningful
+      when `shape="block"` (other shapes are too small for in-tile labels).
+      Unblocks Tokens Studio's C1.3 dogfood migration (label-inside-the-tile
+      pattern; blocked 3 cycles on this design call).
+    type: string
+    default: below
+    reflect: true
+    attribute: label-position
+    enum:
+      - below
+      - overlay
 events:
   select:
     description: Fired when a selectable swatch is activated (click / Enter / Space). detail carries the swatch's value, color, and label.
@@ -101,7 +119,20 @@ events:
         description: The [label] attribute value.
 slots:
   default:
-    description: Optional rich label content. When present, replaces the [label] attribute's text.
+    description: |
+      Optional rich label content. When present, replaces the [label]
+      attribute's text. Consumer chrome positioned absolutely against the
+      swatch tile should use `[slot="chrome"]` instead — default-slot
+      children are funneled into the label region.
+  chrome:
+    description: |
+      §-TBD (v0.5.13, FB-34 §1). Sibling-of-tile chrome — gamut badges,
+      override/tracked dots, custom indicators — that survives stamping as
+      a direct host sibling rather than being funneled into the label. Pair
+      with consumer-authored CSS `position: absolute` against the host
+      (the host carries `position: relative` when `shape="block"`, so
+      `top/right/bottom/left` offsets anchor to the tile's geometry).
+      Closes the C1.3 dogfood chrome-overlay composition gap.
 states:
   - name: idle
     description: Default, ready for display.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.5.11",
+  "version": "0.5.13",
   "description": "AdiaUI web components — vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-runtime.",
   "type": "module",
   "types": "./index.d.ts",
@@ -23,6 +23,14 @@
       "types": "./components/*/*.d.ts",
       "default": "./components/*/*.js"
     },
+    "./components/stat": {
+      "types": "./components/stat/stat-ui.d.ts",
+      "default": "./components/stat/stat-ui.js"
+    },
+    "./components/stat/stat-ui.js": {
+      "types": "./components/stat/stat-ui.d.ts",
+      "default": "./components/stat/stat-ui.js"
+    },
     "./components/*/class": {
       "types": "./components/*/*.d.ts",
       "default": "./components/*/class.js"
@@ -33,10 +41,15 @@
     "./styles/*": "./styles/*",
     "./traits": "./traits/index.js",
     "./traits/*": "./traits/*.js",
+    "./color": {
+      "types": "./color/index.d.ts",
+      "default": "./color/index.js"
+    },
     "./package.json": "./package.json"
   },
   "files": [
     "core/",
+    "color/",
     "components/",
     "!components/**/*.html",
     "!components/**/*.examples.js",
@@ -50,7 +63,9 @@
     "index.js",
     "index.css",
     "index.d.ts",
-    "USAGE.md"
+    "USAGE.md",
+    "README.md",
+    "CHANGELOG.md"
   ],
   "sideEffects": [
     "*.css",

package/styles/components.css

@@ -40,6 +40,7 @@
 @import "../components/breadcrumb/breadcrumb.css";
 @import "../components/command/command.css";
 @import "../components/color-picker/color-picker.css";
+@import "../components/color-input/color-input.css";
 @import "../components/noodles/noodles.css";
 @import "../components/table/table.css";
 @import "../components/table-toolbar/table-toolbar.css";