@threadlabs/looma 0.33.1 → 0.34.0

package/docs/catalog.json

@@ -85,6 +85,11 @@
       "package": "@threadlabs/looma",
       "resource": "@threadlabs/looma/components/ui-cover/ui-cover.html"
     },
+    {
+      "tag": "ui-curve-editor",
+      "package": "@threadlabs/looma",
+      "resource": "@threadlabs/looma/components/ui-curve-editor/ui-curve-editor.html"
+    },
     {
       "tag": "ui-description-item",
       "package": "@threadlabs/looma",
@@ -280,6 +285,11 @@
       "package": "@threadlabs/looma",
       "resource": "@threadlabs/looma/components/ui-nav-item/ui-nav-item.html"
     },
+    {
+      "tag": "ui-number-input",
+      "package": "@threadlabs/looma",
+      "resource": "@threadlabs/looma/components/ui-number-input/ui-number-input.html"
+    },
     {
       "tag": "ui-page-header",
       "package": "@threadlabs/looma",
@@ -340,6 +350,11 @@
       "package": "@threadlabs/looma",
       "resource": "@threadlabs/looma/components/ui-sidebar/ui-sidebar.html"
     },
+    {
+      "tag": "ui-slider",
+      "package": "@threadlabs/looma",
+      "resource": "@threadlabs/looma/components/ui-slider/ui-slider.html"
+    },
     {
       "tag": "ui-spinner",
       "package": "@threadlabs/looma",
@@ -423,7 +438,7 @@
   ],
   "schemaVersion": 1,
   "package": "@threadlabs/looma",
-  "version": "0.33.1",
+  "version": "0.34.0",
   "groups": [
     {
       "id": "layout",
@@ -2154,9 +2169,18 @@
           {
             "name": "--ui-danger"
           },
+          {
+            "name": "--ui-danger-active",
+            "fallbacks": [
+              "var(--ui-danger-hover)"
+            ]
+          },
           {
             "name": "--ui-danger-hover"
           },
+          {
+            "name": "--ui-danger-subtle-text"
+          },
           {
             "name": "--ui-disabled-border"
           },
@@ -2202,6 +2226,18 @@
           {
             "name": "--ui-info"
           },
+          {
+            "name": "--ui-info-active"
+          },
+          {
+            "name": "--ui-info-hover"
+          },
+          {
+            "name": "--ui-info-on-strong"
+          },
+          {
+            "name": "--ui-info-subtle-text"
+          },
           {
             "name": "--ui-line-height-tight"
           },
@@ -2265,6 +2301,18 @@
           {
             "name": "--ui-success"
           },
+          {
+            "name": "--ui-success-active"
+          },
+          {
+            "name": "--ui-success-hover"
+          },
+          {
+            "name": "--ui-success-on-strong"
+          },
+          {
+            "name": "--ui-success-subtle-text"
+          },
           {
             "name": "--ui-surface"
           },
@@ -2282,6 +2330,18 @@
           },
           {
             "name": "--ui-warning"
+          },
+          {
+            "name": "--ui-warning-active"
+          },
+          {
+            "name": "--ui-warning-hover"
+          },
+          {
+            "name": "--ui-warning-on-strong"
+          },
+          {
+            "name": "--ui-warning-subtle-text"
           }
         ]
       },
@@ -2335,6 +2395,20 @@
           "type": "boolean",
           "default": false
         },
+        {
+          "name": "preset",
+          "property": "preset",
+          "description": "A shortcut that sets appearance and tone together: primary is solid accent, standard is solid neutral, quiet is ghost neutral, and destructive is solid danger. A named preset takes precedence over variant and tone. Leave it at none to choose variant and tone independently.",
+          "type": "keyword",
+          "default": "none",
+          "options": [
+            "none",
+            "primary",
+            "standard",
+            "quiet",
+            "destructive"
+          ]
+        },
         {
           "name": "rel",
           "property": "rel",
@@ -2466,6 +2540,19 @@
           "type": "boolean",
           "default": false
         },
+        {
+          "name": "preset",
+          "description": "A shortcut that sets appearance and tone together: primary is solid accent, standard is solid neutral, quiet is ghost neutral, and destructive is solid danger. A named preset takes precedence over variant and tone. Leave it at none to choose variant and tone independently.",
+          "type": "\"none\" | \"primary\" | \"standard\" | \"quiet\" | \"destructive\"",
+          "default": "none",
+          "options": [
+            "none",
+            "primary",
+            "standard",
+            "quiet",
+            "destructive"
+          ]
+        },
         {
           "name": "rel",
           "description": "The link's relationship to its destination, as on a native link. Only meaningful with as=\"a\".",
@@ -2587,8 +2674,8 @@
           "id": "@threadlabs/looma/ui-button/02-variant",
           "name": "02-variant",
           "title": "variant",
-          "description": "Solid, outline (the default), ghost, and danger cover the common emphasis and intent levels.",
-          "markup": "<ui-cluster gap=\"s\">\n  <ui-button variant=\"solid\">Solid</ui-button>\n  <ui-button variant=\"outline\">Outline</ui-button>\n  <ui-button variant=\"ghost\">Ghost</ui-button>\n  <ui-button variant=\"danger\">Danger</ui-button>\n</ui-cluster>",
+          "description": "Appearance sets emphasis independently from tone: solid neutral is a standard action, and danger can be an outline. Named presets combine those shared choices.",
+          "markup": "<ui-cluster gap=\"s\">\n  <ui-button variant=\"solid\">Solid</ui-button>\n  <ui-button variant=\"outline\">Outline</ui-button>\n  <ui-button variant=\"ghost\">Ghost</ui-button>\n  <ui-button variant=\"danger\">Danger</ui-button>\n  <ui-button variant=\"solid\" tone=\"neutral\">Solid neutral</ui-button>\n  <ui-button variant=\"outline\" tone=\"danger\">Danger outline</ui-button>\n  <ui-button preset=\"primary\">Primary</ui-button>\n  <ui-button preset=\"standard\">Standard</ui-button>\n  <ui-button preset=\"quiet\">Quiet</ui-button>\n  <ui-button preset=\"destructive\">Destructive</ui-button>\n</ui-cluster>",
           "resizable": false,
           "bindings": "",
           "frameworks": {}
@@ -2692,6 +2779,16 @@
           "resizable": false,
           "bindings": "",
           "frameworks": {}
+        },
+        {
+          "id": "@threadlabs/looma/ui-button/12-tones",
+          "name": "12-tones",
+          "title": "Appearance and tone",
+          "description": "Appearance controls emphasis; tone expresses intent. The same six tones work as solid, outline and quiet actions, including solid neutral. Icon actions use the same palette.",
+          "markup": "<ui-stack>\n  <ui-cluster>\n    <ui-button variant=\"solid\" tone=\"accent\">Send memo</ui-button>\n    <ui-button variant=\"solid\" tone=\"neutral\">File notes</ui-button>\n    <ui-button variant=\"solid\" tone=\"danger\">Delete draft</ui-button>\n    <ui-button variant=\"solid\" tone=\"success\">Approve leave</ui-button>\n    <ui-button variant=\"solid\" tone=\"warning\">Review route</ui-button>\n    <ui-button variant=\"solid\" tone=\"info\">See briefing</ui-button>\n  </ui-cluster>\n  <ui-cluster>\n    <ui-button variant=\"outline\" tone=\"accent\">Send memo</ui-button>\n    <ui-button variant=\"outline\" tone=\"neutral\">File notes</ui-button>\n    <ui-button variant=\"outline\" tone=\"danger\">Delete draft</ui-button>\n    <ui-button variant=\"outline\" tone=\"success\">Approve leave</ui-button>\n    <ui-button variant=\"outline\" tone=\"warning\">Review route</ui-button>\n    <ui-button variant=\"outline\" tone=\"info\">See briefing</ui-button>\n  </ui-cluster>\n  <ui-cluster>\n    <ui-button variant=\"ghost\" tone=\"accent\">Send memo</ui-button>\n    <ui-button variant=\"ghost\" tone=\"neutral\">File notes</ui-button>\n    <ui-button variant=\"ghost\" tone=\"danger\">Delete draft</ui-button>\n    <ui-button variant=\"ghost\" tone=\"success\">Approve leave</ui-button>\n    <ui-button variant=\"ghost\" tone=\"warning\">Review route</ui-button>\n    <ui-button variant=\"ghost\" tone=\"info\">See briefing</ui-button>\n  </ui-cluster>\n  <ui-cluster>\n    <ui-icon-button preset=\"primary\" match-button label=\"Send memo\"><ui-icon name=\"check\"></ui-icon></ui-icon-button>\n    <ui-icon-button preset=\"standard\" match-button label=\"File notes\"><ui-icon name=\"check\"></ui-icon></ui-icon-button>\n    <ui-icon-button preset=\"destructive\" match-button label=\"Delete draft\"><ui-icon name=\"check\"></ui-icon></ui-icon-button>\n    <ui-icon-button variant=\"solid\" tone=\"success\" match-button label=\"Approve leave\"><ui-icon name=\"check\"></ui-icon></ui-icon-button>\n    <ui-icon-button variant=\"solid\" tone=\"warning\" match-button label=\"Review route\"><ui-icon name=\"check\"></ui-icon></ui-icon-button>\n    <ui-icon-button variant=\"solid\" tone=\"info\" match-button label=\"See briefing\"><ui-icon name=\"check\"></ui-icon></ui-icon-button>\n  </ui-cluster>\n</ui-stack>",
+          "resizable": false,
+          "bindings": "",
+          "frameworks": {}
         }
       ]
     },
@@ -2967,7 +3064,7 @@
       "tag": "ui-card",
       "package": "@threadlabs/looma",
       "root": "div",
-      "description": "A surface that groups content, with even space between its children. `outlined` (the default) is a bordered panel; `subtle` is a quiet filled one for supporting details; `elevated` floats a view's one card, such as sign-in. `padding` is `sm`, `md`, or `lg`. For a titled group of settings, use a Section with `variant=\"card\"`.",
+      "description": "A surface that groups content with shared spacing, corners and material. Choose outlined, subtle, elevated or glass; content stays readable as the surrounding material changes.",
       "designTokens": {
         "sources": [
           "packages/looma/src/components/ui-card/ui-card.html"
@@ -2998,9 +3095,27 @@
           {
             "name": "--ui-danger-soft"
           },
+          {
+            "name": "--ui-glassiness",
+            "fallbacks": [
+              "0"
+            ]
+          },
           {
             "name": "--ui-info"
           },
+          {
+            "name": "--ui-material-edge",
+            "fallbacks": [
+              "var(--ui-border-strong)"
+            ]
+          },
+          {
+            "name": "--ui-material-glass",
+            "fallbacks": [
+              "var(--ui-surface-raised)"
+            ]
+          },
           {
             "name": "--ui-radius-lg"
           },
@@ -3037,6 +3152,12 @@
           {
             "name": "--ui-surface-raised"
           },
+          {
+            "name": "--ui-surface-separation",
+            "fallbacks": [
+              "0"
+            ]
+          },
           {
             "name": "--ui-text-primary"
           },
@@ -3103,13 +3224,14 @@
         {
           "name": "variant",
           "property": "variant",
-          "description": "The surface. outlined is a bordered panel on the page; subtle is a quiet filled one with no border, for supporting details set apart from the flow; elevated floats above the page with a shadow, for a view's one card, such as sign-in.",
+          "description": "The surface. outlined is a bordered panel on the page; subtle is a quiet filled one with no border, for supporting details set apart from the flow; elevated floats above the page with a shadow, for a view's one card, such as sign-in. glass frames an opaque readable content plane with frosted material; shared glassiness and surface separation govern its treatment.",
           "type": "keyword",
           "default": "outlined",
           "options": [
             "outlined",
             "subtle",
-            "elevated"
+            "elevated",
+            "glass"
           ]
         }
       ],
@@ -3166,13 +3288,14 @@
         },
         {
           "name": "variant",
-          "description": "The surface. outlined is a bordered panel on the page; subtle is a quiet filled one with no border, for supporting details set apart from the flow; elevated floats above the page with a shadow, for a view's one card, such as sign-in.",
-          "type": "\"outlined\" | \"subtle\" | \"elevated\"",
+          "description": "The surface. outlined is a bordered panel on the page; subtle is a quiet filled one with no border, for supporting details set apart from the flow; elevated floats above the page with a shadow, for a view's one card, such as sign-in. glass frames an opaque readable content plane with frosted material; shared glassiness and surface separation govern its treatment.",
+          "type": "\"outlined\" | \"subtle\" | \"elevated\" | \"glass\"",
           "default": "outlined",
           "options": [
             "outlined",
             "subtle",
-            "elevated"
+            "elevated",
+            "glass"
           ]
         }
       ],
@@ -3221,6 +3344,16 @@
           "resizable": false,
           "bindings": "",
           "frameworks": {}
+        },
+        {
+          "id": "@threadlabs/looma/ui-card/04-glass",
+          "name": "04-glass",
+          "title": "Glass panel",
+          "description": "Glassiness and surface separation shape the frame while the content plane stays readable. Choose Bookish in the customizer to see the frosted edge.",
+          "markup": "<ui-card variant=\"glass\">\n  <ui-text variant=\"eyebrow\" tone=\"secondary\">Fellowship office</ui-text>\n  <ui-text variant=\"heading\" as=\"h2\">Second breakfast briefing</ui-text>\n  <ui-text>Sam has prepared the agenda. Frodo is bringing the maps, and Sméagol has volunteered to take minutes.</ui-text>\n  <ui-cluster><ui-button preset=\"primary\">Join briefing</ui-button><ui-button preset=\"quiet\">Read agenda</ui-button></ui-cluster>\n</ui-card>",
+          "resizable": false,
+          "bindings": "",
+          "frameworks": {}
         }
       ]
     },
@@ -3556,7 +3689,7 @@
           "name": "01-default",
           "title": "Default",
           "description": "With no state properties supplied, Checkbox starts unchecked and enabled.",
-          "markup": "<ui-checkbox>Checkbox</ui-checkbox>",
+          "markup": "<ui-checkbox>Notify Sam</ui-checkbox>",
           "resizable": false,
           "bindings": "",
           "frameworks": {}
@@ -4168,7 +4301,7 @@
           "name": "01-shapes-and-sizes",
           "title": "Shapes and shared sizes",
           "description": "Square by default, circular with round. Each swatch matches the adjacent field. Click again or press Escape to close.",
-          "markup": "<ui-stack>\n  <ui-cluster wrap=\"nowrap\"><ui-color-picker size=\"sm\" value=\"#7c3aed\" label=\"Small colour\"></ui-color-picker><ui-input\n      size=\"sm\"\n      value=\"#7c3aed\"\n      aria-label=\"Small field\"\n    ></ui-input></ui-cluster>\n  <ui-cluster wrap=\"nowrap\"><ui-color-picker value=\"#16a34a\" label=\"Medium colour\"></ui-color-picker><ui-input\n      value=\"#16a34a\"\n      aria-label=\"Medium field\"\n    ></ui-input></ui-cluster>\n  <ui-cluster wrap=\"nowrap\"><ui-color-picker size=\"lg\" round value=\"#2563eb\" label=\"Large circular colour\"></ui-color-picker><ui-input\n      size=\"lg\"\n      value=\"#2563eb\"\n      aria-label=\"Large field\"\n    ></ui-input></ui-cluster>\n</ui-stack>",
+          "markup": "<ui-stack>\n  <ui-cluster wrap=\"nowrap\"><ui-color-picker size=\"sm\" value=\"#7c3aed\" label=\"Frodo’s calendar colour\"></ui-color-picker><ui-input\n      size=\"sm\"\n      value=\"#7c3aed\"\n      aria-label=\"Frodo’s calendar hex\"\n    ></ui-input></ui-cluster>\n  <ui-cluster wrap=\"nowrap\"><ui-color-picker value=\"#16a34a\" label=\"Sam’s desk colour\"></ui-color-picker><ui-input\n      value=\"#16a34a\"\n      aria-label=\"Sam’s desk hex\"\n    ></ui-input></ui-cluster>\n  <ui-cluster wrap=\"nowrap\"><ui-color-picker size=\"lg\" round value=\"#2563eb\" label=\"Sméagol’s badge colour\"></ui-color-picker><ui-input\n      size=\"lg\"\n      value=\"#2563eb\"\n      aria-label=\"Sméagol’s badge hex\"\n    ></ui-input></ui-cluster>\n</ui-stack>",
           "resizable": false,
           "bindings": "",
           "frameworks": {}
@@ -5968,7 +6101,7 @@
           "name": "01-default",
           "title": "Default",
           "description": "With no properties supplied, Container caps its column at a 65ch measure, centers it in the available space, and pads it with default gutters.",
-          "markup": "<ui-container>\n  <div>Default 65ch measure</div>\n</ui-container>",
+          "markup": "<ui-container>\n  <ui-card padding=\"sm\">The Fellowship office memo stays within a readable 65ch measure.</ui-card>\n</ui-container>",
           "resizable": false,
           "bindings": "",
           "frameworks": {}
@@ -6364,21 +6497,54 @@
       ]
     },
     {
-      "tag": "ui-description-item",
+      "tag": "ui-curve-editor",
       "package": "@threadlabs/looma",
-      "root": "div",
-      "description": "One `term` and its value (the content) in a Description List, laid out by the list. See [Description List](/components/ui-description-list).",
+      "root": "span",
+      "description": "Draggable cubic Bézier handles with keyboard and bounded exact coordinate editing.",
       "designTokens": {
         "sources": [
-          "packages/looma/src/components/ui-description-item/ui-description-item.html"
+          "packages/looma/src/components/ui-curve-editor/ui-curve-editor.html"
         ],
         "component": [],
         "shared": [
           {
-            "name": "--ui-border-default"
+            "name": "--ui-accent-solid"
           },
           {
-            "name": "--ui-font-medium"
+            "name": "--ui-border-width"
+          },
+          {
+            "name": "--ui-control-border"
+          },
+          {
+            "name": "--ui-control-focus",
+            "fallbacks": [
+              "var(--ui-accent-solid)"
+            ]
+          },
+          {
+            "name": "--ui-control-min-block-size"
+          },
+          {
+            "name": "--ui-control-surface",
+            "fallbacks": [
+              "var(--ui-surface)"
+            ]
+          },
+          {
+            "name": "--ui-field-radius",
+            "fallbacks": [
+              "var(--ui-radius-md)"
+            ]
+          },
+          {
+            "name": "--ui-focus-width"
+          },
+          {
+            "name": "--ui-font-mono",
+            "fallbacks": [
+              "monospace"
+            ]
           },
           {
             "name": "--ui-font-size-sm"
@@ -6386,14 +6552,26 @@
           {
             "name": "--ui-radius-md"
           },
+          {
+            "name": "--ui-shadow-xs"
+          },
           {
             "name": "--ui-space-1"
           },
           {
-            "name": "--ui-space-6"
+            "name": "--ui-space-2"
           },
           {
-            "name": "--ui-text-muted"
+            "name": "--ui-space-3"
+          },
+          {
+            "name": "--ui-space-4"
+          },
+          {
+            "name": "--ui-surface"
+          },
+          {
+            "name": "--ui-surface-raised"
           },
           {
             "name": "--ui-text-primary"
@@ -6402,54 +6580,114 @@
       },
       "attributes": [
         {
-          "name": "term",
-          "property": "term",
-          "description": "What the value is, such as \"Invited by\". The value is the item's content.",
+          "name": "disabled",
+          "property": "disabled",
+          "description": "Prevents typing, stepping and pointer or keyboard changes while keeping the value visible.",
+          "type": "boolean",
+          "default": false
+        },
+        {
+          "name": "label",
+          "property": "label",
+          "description": "Accessible name for the editing control.",
           "type": "string",
-          "default": ""
+          "default": "Value"
+        },
+        {
+          "name": "size",
+          "property": "size",
+          "description": "Shared field and button height.",
+          "type": "keyword",
+          "default": "md",
+          "options": [
+            "sm",
+            "md",
+            "lg"
+          ]
+        },
+        {
+          "name": "value",
+          "property": "value",
+          "description": "CSS cubic-bezier or a standard easing keyword. X stays within 0–1; Y is bounded to -1–2 for a limited overshoot.",
+          "type": "string",
+          "default": "cubic-bezier(0.25, 0.1, 0.25, 1)"
         }
       ],
       "properties": [
         {
-          "name": "term",
-          "description": "What the value is, such as \"Invited by\". The value is the item's content.",
+          "name": "disabled",
+          "description": "Prevents typing, stepping and pointer or keyboard changes while keeping the value visible.",
+          "type": "boolean",
+          "default": false
+        },
+        {
+          "name": "label",
+          "description": "Accessible name for the editing control.",
           "type": "string",
-          "default": ""
+          "default": "Value"
+        },
+        {
+          "name": "size",
+          "description": "Shared field and button height.",
+          "type": "\"sm\" | \"md\" | \"lg\"",
+          "default": "md",
+          "options": [
+            "sm",
+            "md",
+            "lg"
+          ]
+        },
+        {
+          "name": "value",
+          "description": "CSS cubic-bezier or a standard easing keyword. X stays within 0–1; Y is bounded to -1–2 for a limited overshoot.",
+          "type": "string",
+          "default": "cubic-bezier(0.25, 0.1, 0.25, 1)"
         }
       ],
-      "events": [],
-      "slots": [
+      "events": [
         {
-          "name": "default",
-          "description": "Default child content."
+          "name": "change",
+          "detailType": "{ readonly value: string }",
+          "detailSchema": "object",
+          "fields": [
+            {
+              "path": "value",
+              "type": "string",
+              "required": true
+            }
+          ],
+          "detailDocs": "Emitted when a toggleable control changes checked state."
+        },
+        {
+          "name": "input",
+          "detailType": "{ readonly value: string }",
+          "detailSchema": "object",
+          "fields": [
+            {
+              "path": "value",
+              "type": "string",
+              "required": true
+            }
+          ],
+          "detailDocs": "Emitted with the declared detail payload."
         }
       ],
-      "group": "display",
-      "navigationParent": "ui-description-list",
-      "id": "@threadlabs/looma/ui-description-item",
-      "title": "Description Item",
-      "resource": "@threadlabs/looma/components/ui-description-item/ui-description-item.html",
+      "slots": [],
+      "group": "forms",
+      "id": "@threadlabs/looma/ui-curve-editor",
+      "title": "Curve Editor",
+      "resource": "@threadlabs/looma/components/ui-curve-editor/ui-curve-editor.html",
       "targets": [
         "html-next",
         "vue"
       ],
       "examples": [
         {
-          "id": "@threadlabs/looma/ui-description-item/01-default",
-          "name": "01-default",
-          "title": "Default",
-          "description": "A term and its value, laid out by the list around it.",
-          "markup": "<ui-description-list>\n  <ui-description-item term=\"Plan\">Pro</ui-description-item>\n</ui-description-list>",
-          "resizable": false,
-          "bindings": "",
-          "frameworks": {}
-        },
-        {
-          "id": "@threadlabs/looma/ui-description-item/02-tile",
-          "name": "02-tile",
-          "title": "As a tile",
-          "description": "In a tiles list, the term sits above its value on a tile of its own.",
-          "markup": "<ui-description-list layout=\"tiles\">\n  <ui-description-item term=\"Members\">8</ui-description-item>\n</ui-description-list>",
+          "id": "@threadlabs/looma/ui-curve-editor/01-editing",
+          "name": "01-editing",
+          "title": "Exact and visual editing",
+          "description": "Draggable cubic Bézier handles with keyboard and bounded exact coordinate editing.",
+          "markup": "<ui-curve-editor label=\"Fellowship office motion\" value=\"cubic-bezier(0.25, 0.1, 0.25, 1)\"></ui-curve-editor>",
           "resizable": false,
           "bindings": "",
           "frameworks": {}
@@ -6457,24 +6695,117 @@
       ]
     },
     {
-      "tag": "ui-description-list",
+      "tag": "ui-description-item",
       "package": "@threadlabs/looma",
-      "root": "dl",
-      "description": "Named values: each `ui-description-item` is a `term` and its value, rendered as a `<dl>` of `<div><dt/><dd/></div>` groups. `layout=\"rows\"` lines terms up in one column and values in the next, for a short summary; `layout=\"stacked\"` sets every term above its value, for a narrow space such as a side panel or a popover; `layout=\"grid\"` sets the pairs in columns, term above value, for facts to scan across; `layout=\"tiles\"` sets each pair on its own tile, for figures to compare. `columns` (`2`, `3`, or `4`) caps how many columns grid and tiles set, and `density=\"compact\"` sets the pairs close together. A rows list does not stack on its own; choose `stacked` where it will be narrow. A value can hold code ([Text](/components/ui-text) `variant=\"code\"`), a [Badge](/components/ui-badge), or a long identifier, which wraps rather than overflowing.",
+      "root": "div",
+      "description": "One `term` and its value (the content) in a Description List, laid out by the list. See [Description List](/components/ui-description-list).",
       "designTokens": {
         "sources": [
-          "packages/looma/src/components/ui-description-list/ui-description-list.html"
+          "packages/looma/src/components/ui-description-item/ui-description-item.html"
         ],
         "component": [],
         "shared": [
           {
-            "name": "--ui-border-strong"
+            "name": "--ui-border-default"
           },
           {
-            "name": "--ui-border-width"
+            "name": "--ui-font-medium"
           },
           {
-            "name": "--ui-font-size-lg"
+            "name": "--ui-font-size-sm"
+          },
+          {
+            "name": "--ui-radius-md"
+          },
+          {
+            "name": "--ui-space-1"
+          },
+          {
+            "name": "--ui-space-6"
+          },
+          {
+            "name": "--ui-text-muted"
+          },
+          {
+            "name": "--ui-text-primary"
+          }
+        ]
+      },
+      "attributes": [
+        {
+          "name": "term",
+          "property": "term",
+          "description": "What the value is, such as \"Invited by\". The value is the item's content.",
+          "type": "string",
+          "default": ""
+        }
+      ],
+      "properties": [
+        {
+          "name": "term",
+          "description": "What the value is, such as \"Invited by\". The value is the item's content.",
+          "type": "string",
+          "default": ""
+        }
+      ],
+      "events": [],
+      "slots": [
+        {
+          "name": "default",
+          "description": "Default child content."
+        }
+      ],
+      "group": "display",
+      "navigationParent": "ui-description-list",
+      "id": "@threadlabs/looma/ui-description-item",
+      "title": "Description Item",
+      "resource": "@threadlabs/looma/components/ui-description-item/ui-description-item.html",
+      "targets": [
+        "html-next",
+        "vue"
+      ],
+      "examples": [
+        {
+          "id": "@threadlabs/looma/ui-description-item/01-default",
+          "name": "01-default",
+          "title": "Default",
+          "description": "A term and its value, laid out by the list around it.",
+          "markup": "<ui-description-list>\n  <ui-description-item term=\"Plan\">Pro</ui-description-item>\n</ui-description-list>",
+          "resizable": false,
+          "bindings": "",
+          "frameworks": {}
+        },
+        {
+          "id": "@threadlabs/looma/ui-description-item/02-tile",
+          "name": "02-tile",
+          "title": "As a tile",
+          "description": "In a tiles list, the term sits above its value on a tile of its own.",
+          "markup": "<ui-description-list layout=\"tiles\">\n  <ui-description-item term=\"Members\">8</ui-description-item>\n</ui-description-list>",
+          "resizable": false,
+          "bindings": "",
+          "frameworks": {}
+        }
+      ]
+    },
+    {
+      "tag": "ui-description-list",
+      "package": "@threadlabs/looma",
+      "root": "dl",
+      "description": "Named values: each `ui-description-item` is a `term` and its value, rendered as a `<dl>` of `<div><dt/><dd/></div>` groups. `layout=\"rows\"` lines terms up in one column and values in the next, for a short summary; `layout=\"stacked\"` sets every term above its value, for a narrow space such as a side panel or a popover; `layout=\"grid\"` sets the pairs in columns, term above value, for facts to scan across; `layout=\"tiles\"` sets each pair on its own tile, for figures to compare. `columns` (`2`, `3`, or `4`) caps how many columns grid and tiles set, and `density=\"compact\"` sets the pairs close together. A rows list does not stack on its own; choose `stacked` where it will be narrow. A value can hold code ([Text](/components/ui-text) `variant=\"code\"`), a [Badge](/components/ui-badge), or a long identifier, which wraps rather than overflowing.",
+      "designTokens": {
+        "sources": [
+          "packages/looma/src/components/ui-description-list/ui-description-list.html"
+        ],
+        "component": [],
+        "shared": [
+          {
+            "name": "--ui-border-strong"
+          },
+          {
+            "name": "--ui-border-width"
+          },
+          {
+            "name": "--ui-font-size-lg"
           },
           {
             "name": "--ui-space-1"
@@ -6645,7 +6976,8 @@
           {
             "name": "--ui-dialog-border",
             "fallbacks": [
-              "var(--ui-overlay-border, var(--ui-border-strong))"
+              "var(--ui-overlay-border, var(--ui-border-strong))",
+              "color-mix(in oklab, var(--ui-overlay-border, var(--ui-border-strong)) calc((1 - var(--_ui-material-active)) * 100%), transparent)"
             ]
           },
           {
@@ -6670,13 +7002,15 @@
           {
             "name": "--ui-dialog-shadow",
             "fallbacks": [
-              "var(--ui-overlay-shadow, var(--ui-elevation-dialog, var(--ui-shadow-xl)))"
+              "var(--ui-overlay-shadow, var(--ui-elevation-dialog, var(--ui-shadow-xl)))",
+              "var(\n          --ui-overlay-shadow,\n          0 calc(var(--_ui-material-separation) * var(--_ui-material-scale, 1) * 8px) calc(\n            var(--_ui-material-separation) * var(--_ui-material-scale, 1) * 24px\n          ) color-mix(in oklab, var(--ui-text-primary) 15%, transparent),\n          inset 0 0 0 calc(var(--_ui-material-active) * var(--ui-border-width)) var(--ui-material-edge, var(--ui-border-strong)),\n          var(--ui-elevation-dialog, var(--ui-shadow-xl))\n        )"
             ]
           },
           {
             "name": "--ui-dialog-surface",
             "fallbacks": [
-              "var(--ui-overlay-surface, var(--ui-surface-elevated))"
+              "var(--ui-overlay-surface, var(--ui-surface-elevated))",
+              "var(--ui-material-content, var(--ui-overlay-surface, var(--ui-surface-elevated)))"
             ]
           },
           {
@@ -6717,9 +7051,33 @@
           {
             "name": "--ui-font-size-lg"
           },
+          {
+            "name": "--ui-glassiness",
+            "fallbacks": [
+              "0"
+            ]
+          },
           {
             "name": "--ui-line-height-tight"
           },
+          {
+            "name": "--ui-material-content",
+            "fallbacks": [
+              "var(--ui-overlay-surface, var(--ui-surface-elevated))"
+            ]
+          },
+          {
+            "name": "--ui-material-edge",
+            "fallbacks": [
+              "var(--ui-border-strong)"
+            ]
+          },
+          {
+            "name": "--ui-material-glass",
+            "fallbacks": [
+              "var(--ui-surface-elevated)"
+            ]
+          },
           {
             "name": "--ui-motion-base"
           },
@@ -6747,7 +7105,8 @@
           {
             "name": "--ui-overlay-shadow",
             "fallbacks": [
-              "var(--ui-elevation-dialog, var(--ui-shadow-xl))"
+              "var(--ui-elevation-dialog, var(--ui-shadow-xl))",
+              "0 calc(var(--_ui-material-separation) * var(--_ui-material-scale, 1) * 8px) calc(\n            var(--_ui-material-separation) * var(--_ui-material-scale, 1) * 24px\n          ) color-mix(in oklab, var(--ui-text-primary) 15%, transparent),\n          inset 0 0 0 calc(var(--_ui-material-active) * var(--ui-border-width)) var(--ui-material-edge, var(--ui-border-strong)),\n          var(--ui-elevation-dialog, var(--ui-shadow-xl))"
             ]
           },
           {
@@ -6786,6 +7145,12 @@
           {
             "name": "--ui-surface-muted"
           },
+          {
+            "name": "--ui-surface-separation",
+            "fallbacks": [
+              "0"
+            ]
+          },
           {
             "name": "--ui-text-primary"
           },
@@ -6850,7 +7215,7 @@
         {
           "name": "size",
           "property": "size",
-          "description": "Choose a compact, standard, wide, or viewport-filling dialog.",
+          "description": "Choose a compact, standard, wide, or viewport-filling dialog. Shared surface separation adapts to dialog purpose and rendered size.",
           "type": "keyword",
           "default": "md",
           "options": [
@@ -6909,7 +7274,7 @@
         },
         {
           "name": "size",
-          "description": "Choose a compact, standard, wide, or viewport-filling dialog.",
+          "description": "Choose a compact, standard, wide, or viewport-filling dialog. Shared surface separation adapts to dialog purpose and rendered size.",
           "type": "\"sm\" | \"md\" | \"lg\" | \"fullscreen\"",
           "default": "md",
           "options": [
@@ -7012,7 +7377,7 @@
           "name": "01-default",
           "title": "Default",
           "description": "Without modal a dialog is non-modal, like native show(): the rest of the page stays usable and the header close button is its exit. Label becomes the header title beside that button. Buttons in the actions slot sit right-aligned in the footer, secondary first and primary last; native command=\"close\" closes the dialog.",
-          "markup": "<ui-button id=\"open-confirmation\">Open dialog</ui-button>\n<ui-dialog id=\"confirmation-dialog\" for=\"open-confirmation\" label=\"Publish changes?\">\n  <p>Your edits will be visible to everyone with access to this project.</p>\n  <ui-button slot=\"actions\" commandfor=\"confirmation-dialog\" command=\"close\">Cancel</ui-button>\n  <ui-button slot=\"actions\" variant=\"solid\" commandfor=\"confirmation-dialog\" command=\"close\">Publish</ui-button>\n</ui-dialog>",
+          "markup": "<ui-button id=\"open-confirmation\">Review Fellowship memo</ui-button>\n<ui-dialog id=\"confirmation-dialog\" for=\"open-confirmation\" label=\"Send Fellowship memo?\">\n  <p>Frodo and Sam will receive the updated route. Sméagol is keeping the meeting notes.</p>\n  <ui-button slot=\"actions\" commandfor=\"confirmation-dialog\" command=\"close\">Keep draft</ui-button>\n  <ui-button slot=\"actions\" variant=\"solid\" commandfor=\"confirmation-dialog\" command=\"close\">Send memo</ui-button>\n</ui-dialog>",
           "resizable": false,
           "bindings": "",
           "frameworks": {}
@@ -7061,7 +7426,7 @@
           "id": "@threadlabs/looma/ui-dialog/06-sizes",
           "name": "06-sizes",
           "title": "Sizes",
-          "description": "Use size for a common width. --ui-dialog-max-width is the one-off width escape hatch. This dialog is non-modal, so the rest of the page remains interactive.",
+          "description": "Choose a common width with size. Glassiness and surface separation follow the shared theme; dialog purpose and rendered size determine the material treatment automatically. This dialog is non-modal, so the rest of the page remains interactive.",
           "markup": "<ui-button id=\"open-wide-dialog\">Open wide dialog</ui-button>\n<ui-dialog id=\"wide-dialog\" for=\"open-wide-dialog\" size=\"lg\" label=\"Reference details\">\n  <p>Keep the rest of the page available while reviewing these details.</p>\n  <ui-button slot=\"actions\" commandfor=\"wide-dialog\" command=\"close\">Done</ui-button>\n</ui-dialog>",
           "resizable": false,
           "bindings": "",
@@ -11767,7 +12132,7 @@
           "name": "01-default",
           "title": "Default",
           "description": "With no properties supplied, Grid uses its default gap and minimum column size.",
-          "markup": "<ui-grid>\n  <span>One</span>\n  <span>Two</span>\n  <span>Three</span>\n</ui-grid>",
+          "markup": "<ui-grid>\n  <ui-card padding=\"sm\">Frodo</ui-card>\n  <ui-card padding=\"sm\">Sam</ui-card>\n  <ui-card padding=\"sm\">Sméagol</ui-card>\n</ui-grid>",
           "resizable": false,
           "bindings": "",
           "frameworks": {}
@@ -11777,7 +12142,7 @@
           "name": "02-gap-and-minimum-column-width",
           "title": "Gap and minimum column width",
           "description": "Gap controls spacing while min controls the intrinsic wrap point for columns.",
-          "markup": "<ui-grid gap=\"xs\" min=\"sm\">\n  <span>One</span>\n  <span>Two</span>\n  <span>Three</span>\n  <span>Four</span>\n</ui-grid>",
+          "markup": "<ui-grid gap=\"xs\" min=\"sm\">\n  <ui-card padding=\"sm\">Frodo</ui-card>\n  <ui-card padding=\"sm\">Sam</ui-card>\n  <ui-card padding=\"sm\">Sméagol</ui-card>\n  <ui-card padding=\"sm\">Merry</ui-card>\n</ui-grid>",
           "resizable": false,
           "bindings": "",
           "frameworks": {}
@@ -12012,6 +12377,18 @@
           {
             "name": "--ui-control-size-sm"
           },
+          {
+            "name": "--ui-danger"
+          },
+          {
+            "name": "--ui-danger-hover"
+          },
+          {
+            "name": "--ui-danger-on-strong"
+          },
+          {
+            "name": "--ui-danger-subtle-text"
+          },
           {
             "name": "--ui-disabled-border"
           },
@@ -12039,6 +12416,18 @@
           {
             "name": "--ui-icon-size-sm"
           },
+          {
+            "name": "--ui-info"
+          },
+          {
+            "name": "--ui-info-hover"
+          },
+          {
+            "name": "--ui-info-on-strong"
+          },
+          {
+            "name": "--ui-info-subtle-text"
+          },
           {
             "name": "--ui-motion-base"
           },
@@ -12069,6 +12458,18 @@
           {
             "name": "--ui-radius-round"
           },
+          {
+            "name": "--ui-success"
+          },
+          {
+            "name": "--ui-success-hover"
+          },
+          {
+            "name": "--ui-success-on-strong"
+          },
+          {
+            "name": "--ui-success-subtle-text"
+          },
           {
             "name": "--ui-surface-default"
           },
@@ -12080,6 +12481,18 @@
           },
           {
             "name": "--ui-text-secondary"
+          },
+          {
+            "name": "--ui-warning"
+          },
+          {
+            "name": "--ui-warning-hover"
+          },
+          {
+            "name": "--ui-warning-on-strong"
+          },
+          {
+            "name": "--ui-warning-subtle-text"
           }
         ]
       },
@@ -12136,6 +12549,20 @@
           "type": "boolean",
           "default": false
         },
+        {
+          "name": "preset",
+          "property": "preset",
+          "description": "The same shortcuts as Button: primary is solid accent, standard is solid neutral, quiet is ghost neutral, and destructive is solid danger. A named preset wins over variant and tone; none preserves independent choices.",
+          "type": "keyword",
+          "default": "none",
+          "options": [
+            "none",
+            "primary",
+            "standard",
+            "quiet",
+            "destructive"
+          ]
+        },
         {
           "name": "revealed",
           "property": "revealed",
@@ -12165,11 +12592,17 @@
         {
           "name": "tone",
           "property": "tone",
-          "description": "Colour for every variant. When omitted, ghost and outline keep their neutral appearance and solid keeps its accent fill. Set accent for a coloured action or neutral for a quiet one. Native aria-pressed=\"true\" keeps an outline toggle visibly pressed; the consumer owns that state.",
+          "description": "Colour for every variant. auto preserves the existing variant-specific default. When omitted, ghost and outline keep their neutral appearance and solid keeps its accent fill. Set accent for a coloured action or neutral for a quiet one. danger, success, warning and info share Button's intent colors. Native aria-pressed=\"true\" keeps an outline toggle visibly pressed; the consumer owns that state.",
           "type": "keyword",
+          "default": "auto",
           "options": [
+            "auto",
             "accent",
-            "neutral"
+            "neutral",
+            "danger",
+            "success",
+            "warning",
+            "info"
           ]
         },
         {
@@ -12231,6 +12664,19 @@
           "type": "boolean",
           "default": false
         },
+        {
+          "name": "preset",
+          "description": "The same shortcuts as Button: primary is solid accent, standard is solid neutral, quiet is ghost neutral, and destructive is solid danger. A named preset wins over variant and tone; none preserves independent choices.",
+          "type": "\"none\" | \"primary\" | \"standard\" | \"quiet\" | \"destructive\"",
+          "default": "none",
+          "options": [
+            "none",
+            "primary",
+            "standard",
+            "quiet",
+            "destructive"
+          ]
+        },
         {
           "name": "revealed",
           "description": "Keeps an anticipatory button visible while its context is active, such as a selected block or an open popup. It does not imply a pressed or expanded state.",
@@ -12256,11 +12702,17 @@
         },
         {
           "name": "tone",
-          "description": "Colour for every variant. When omitted, ghost and outline keep their neutral appearance and solid keeps its accent fill. Set accent for a coloured action or neutral for a quiet one. Native aria-pressed=\"true\" keeps an outline toggle visibly pressed; the consumer owns that state.",
-          "type": "\"accent\" | \"neutral\"",
+          "description": "Colour for every variant. auto preserves the existing variant-specific default. When omitted, ghost and outline keep their neutral appearance and solid keeps its accent fill. Set accent for a coloured action or neutral for a quiet one. danger, success, warning and info share Button's intent colors. Native aria-pressed=\"true\" keeps an outline toggle visibly pressed; the consumer owns that state.",
+          "type": "\"auto\" | \"accent\" | \"neutral\" | \"danger\" | \"success\" | \"warning\" | \"info\"",
+          "default": "auto",
           "options": [
+            "auto",
             "accent",
-            "neutral"
+            "neutral",
+            "danger",
+            "success",
+            "warning",
+            "info"
           ]
         },
         {
@@ -12996,7 +13448,7 @@
           "name": "01-default",
           "title": "Default",
           "description": "With no value or state properties supplied, Input exposes an empty, editable native control.",
-          "markup": "<ui-input type=\"text\" aria-label=\"Text\" placeholder=\"Enter text\"> </ui-input>",
+          "markup": "<ui-input type=\"text\" aria-label=\"Office search\" placeholder=\"Search Fellowship office\"> </ui-input>",
           "resizable": false,
           "bindings": "",
           "frameworks": {}
@@ -14191,7 +14643,8 @@
           {
             "name": "--ui-menu-border",
             "fallbacks": [
-              "var(--ui-overlay-border, var(--ui-border-strong))"
+              "var(--ui-overlay-border, var(--ui-border-strong))",
+              "color-mix(in oklab, var(--ui-overlay-border, var(--ui-border-strong)) calc((1 - var(--_ui-material-active)) * 100%), transparent)"
             ]
           },
           {
@@ -14203,13 +14656,15 @@
           {
             "name": "--ui-menu-shadow",
             "fallbacks": [
-              "var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))"
+              "var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))",
+              "var(\n          --ui-overlay-shadow,\n          0 calc(var(--_ui-material-separation) * var(--_ui-material-scale, 0.28) * 8px) calc(\n            var(--_ui-material-separation) * var(--_ui-material-scale, 0.28) * 24px\n          ) color-mix(in oklab, var(--ui-text-primary) 15%, transparent),\n          inset 0 0 0 calc(var(--_ui-material-active) * var(--ui-border-width)) var(--ui-material-edge, var(--ui-border-strong)),\n          var(--ui-elevation-overlay, var(--ui-shadow-lg))\n        )"
             ]
           },
           {
             "name": "--ui-menu-surface",
             "fallbacks": [
-              "var(--ui-overlay-surface, var(--ui-surface-elevated))"
+              "var(--ui-overlay-surface, var(--ui-surface-elevated))",
+              "var(--ui-material-content, var(--ui-overlay-surface, var(--ui-surface-elevated)))"
             ]
           },
           {
@@ -14241,6 +14696,30 @@
           {
             "name": "--ui-font-size-xs"
           },
+          {
+            "name": "--ui-glassiness",
+            "fallbacks": [
+              "0"
+            ]
+          },
+          {
+            "name": "--ui-material-content",
+            "fallbacks": [
+              "var(--ui-overlay-surface, var(--ui-surface-elevated))"
+            ]
+          },
+          {
+            "name": "--ui-material-edge",
+            "fallbacks": [
+              "var(--ui-border-strong)"
+            ]
+          },
+          {
+            "name": "--ui-material-glass",
+            "fallbacks": [
+              "var(--ui-surface-elevated)"
+            ]
+          },
           {
             "name": "--ui-motion-ease"
           },
@@ -14262,7 +14741,8 @@
           {
             "name": "--ui-overlay-shadow",
             "fallbacks": [
-              "var(--ui-elevation-overlay, var(--ui-shadow-lg))"
+              "var(--ui-elevation-overlay, var(--ui-shadow-lg))",
+              "0 calc(var(--_ui-material-separation) * var(--_ui-material-scale, 0.28) * 8px) calc(\n            var(--_ui-material-separation) * var(--_ui-material-scale, 0.28) * 24px\n          ) color-mix(in oklab, var(--ui-text-primary) 15%, transparent),\n          inset 0 0 0 calc(var(--_ui-material-active) * var(--ui-border-width)) var(--ui-material-edge, var(--ui-border-strong)),\n          var(--ui-elevation-overlay, var(--ui-shadow-lg))"
             ]
           },
           {
@@ -14291,6 +14771,15 @@
           },
           {
             "name": "--ui-surface-elevated"
+          },
+          {
+            "name": "--ui-surface-separation",
+            "fallbacks": [
+              "0"
+            ]
+          },
+          {
+            "name": "--ui-text-primary"
           }
         ]
       },
@@ -15654,45 +16143,242 @@
       ]
     },
     {
-      "tag": "ui-page-header",
+      "tag": "ui-number-input",
       "package": "@threadlabs/looma",
-      "root": "header",
-      "description": "The top of a view: its one `h1`, with an optional icon or mark before it (`leading`), a short `eyebrow` above it, a `description` under it, and the view's own `actions` at the end. Every view titles itself the same way, at the same size. `align=\"center\"` stacks it centred, for a standalone card such as sign-in.",
+      "root": "span",
+      "description": "Bounded exact number and unit editing with safe arithmetic, stepping and keyboard controls.",
       "designTokens": {
         "sources": [
-          "packages/looma/src/components/ui-page-header/ui-page-header.html"
+          "packages/looma/src/components/ui-number-input/ui-number-input.html"
         ],
         "component": [],
         "shared": [
           {
-            "name": "--ui-font-bold",
-            "fallbacks": [
-              "700"
-            ]
-          },
-          {
-            "name": "--ui-font-display",
-            "fallbacks": [
-              "inherit"
-            ]
-          },
-          {
-            "name": "--ui-font-semibold"
-          },
-          {
-            "name": "--ui-font-size-2xl"
-          },
-          {
-            "name": "--ui-font-size-md"
-          },
-          {
-            "name": "--ui-font-size-xs"
-          },
-          {
-            "name": "--ui-line-height"
-          },
-          {
-            "name": "--ui-line-height-tight"
+            "name": "--ui-space-1"
+          }
+        ]
+      },
+      "attributes": [
+        {
+          "name": "disabled",
+          "property": "disabled",
+          "description": "Prevents typing, stepping and pointer or keyboard changes while keeping the value visible.",
+          "type": "boolean",
+          "default": false
+        },
+        {
+          "name": "label",
+          "property": "label",
+          "description": "Accessible name for the editing control.",
+          "type": "string",
+          "default": "Value"
+        },
+        {
+          "name": "max",
+          "property": "max",
+          "description": "Inclusive upper bound applied to every editing path.",
+          "type": "number",
+          "default": 1000000
+        },
+        {
+          "name": "min",
+          "property": "min",
+          "description": "Inclusive lower bound applied to typing, arithmetic, stepping and external values.",
+          "type": "number",
+          "default": -1000000
+        },
+        {
+          "name": "name",
+          "property": "name",
+          "description": "Optional form field name.",
+          "type": "string",
+          "default": ""
+        },
+        {
+          "name": "size",
+          "property": "size",
+          "description": "Shared field and button height.",
+          "type": "keyword",
+          "default": "md",
+          "options": [
+            "sm",
+            "md",
+            "lg"
+          ]
+        },
+        {
+          "name": "step",
+          "property": "step",
+          "description": "Positive increment used by arrows and step buttons; Shift multiplies it by ten.",
+          "type": "number",
+          "default": 1
+        },
+        {
+          "name": "unit",
+          "property": "unit",
+          "description": "One accepted unit, such as px, rem, ms or %. Bare numbers use this unit. No automatic unit conversion.",
+          "type": "string",
+          "default": ""
+        },
+        {
+          "name": "value",
+          "property": "value",
+          "description": "Exact value. Arithmetic is calculated on Enter or blur; the resulting value includes unit. Invalid expressions stay visible and expose invalid state.",
+          "type": "string",
+          "default": "0"
+        }
+      ],
+      "properties": [
+        {
+          "name": "disabled",
+          "description": "Prevents typing, stepping and pointer or keyboard changes while keeping the value visible.",
+          "type": "boolean",
+          "default": false
+        },
+        {
+          "name": "label",
+          "description": "Accessible name for the editing control.",
+          "type": "string",
+          "default": "Value"
+        },
+        {
+          "name": "max",
+          "description": "Inclusive upper bound applied to every editing path.",
+          "type": "number",
+          "default": 1000000
+        },
+        {
+          "name": "min",
+          "description": "Inclusive lower bound applied to typing, arithmetic, stepping and external values.",
+          "type": "number",
+          "default": -1000000
+        },
+        {
+          "name": "name",
+          "description": "Optional form field name.",
+          "type": "string",
+          "default": ""
+        },
+        {
+          "name": "size",
+          "description": "Shared field and button height.",
+          "type": "\"sm\" | \"md\" | \"lg\"",
+          "default": "md",
+          "options": [
+            "sm",
+            "md",
+            "lg"
+          ]
+        },
+        {
+          "name": "step",
+          "description": "Positive increment used by arrows and step buttons; Shift multiplies it by ten.",
+          "type": "number",
+          "default": 1
+        },
+        {
+          "name": "unit",
+          "description": "One accepted unit, such as px, rem, ms or %. Bare numbers use this unit. No automatic unit conversion.",
+          "type": "string",
+          "default": ""
+        },
+        {
+          "name": "value",
+          "description": "Exact value. Arithmetic is calculated on Enter or blur; the resulting value includes unit. Invalid expressions stay visible and expose invalid state.",
+          "type": "string",
+          "default": "0"
+        }
+      ],
+      "events": [
+        {
+          "name": "change",
+          "detailType": "{ readonly value: string }",
+          "detailSchema": "object",
+          "fields": [
+            {
+              "path": "value",
+              "type": "string",
+              "required": true
+            }
+          ],
+          "detailDocs": "Emitted when a toggleable control changes checked state."
+        },
+        {
+          "name": "input",
+          "detailType": "{ readonly value: string }",
+          "detailSchema": "object",
+          "fields": [
+            {
+              "path": "value",
+              "type": "string",
+              "required": true
+            }
+          ],
+          "detailDocs": "Emitted with the declared detail payload."
+        }
+      ],
+      "slots": [],
+      "group": "forms",
+      "id": "@threadlabs/looma/ui-number-input",
+      "title": "Number Input",
+      "resource": "@threadlabs/looma/components/ui-number-input/ui-number-input.html",
+      "targets": [
+        "html-next",
+        "vue"
+      ],
+      "examples": [
+        {
+          "id": "@threadlabs/looma/ui-number-input/01-editing",
+          "name": "01-editing",
+          "title": "Exact and visual editing",
+          "description": "Bounded exact number and unit editing with safe arithmetic, stepping and keyboard controls.",
+          "markup": "<ui-number-input label=\"Frodo’s desk spacing\" value=\"16px\" unit=\"px\" min=\"8\" max=\"40\" step=\"1\"></ui-number-input>",
+          "resizable": false,
+          "bindings": "",
+          "frameworks": {}
+        }
+      ]
+    },
+    {
+      "tag": "ui-page-header",
+      "package": "@threadlabs/looma",
+      "root": "header",
+      "description": "The top of a view: its one `h1`, with an optional icon or mark before it (`leading`), a short `eyebrow` above it, a `description` under it, and the view's own `actions` at the end. Every view titles itself the same way, at the same size. `align=\"center\"` stacks it centred, for a standalone card such as sign-in.",
+      "designTokens": {
+        "sources": [
+          "packages/looma/src/components/ui-page-header/ui-page-header.html"
+        ],
+        "component": [],
+        "shared": [
+          {
+            "name": "--ui-font-bold",
+            "fallbacks": [
+              "700"
+            ]
+          },
+          {
+            "name": "--ui-font-display",
+            "fallbacks": [
+              "inherit"
+            ]
+          },
+          {
+            "name": "--ui-font-semibold"
+          },
+          {
+            "name": "--ui-font-size-2xl"
+          },
+          {
+            "name": "--ui-font-size-md"
+          },
+          {
+            "name": "--ui-font-size-xs"
+          },
+          {
+            "name": "--ui-line-height"
+          },
+          {
+            "name": "--ui-line-height-tight"
           },
           {
             "name": "--ui-space-1"
@@ -15809,7 +16495,8 @@
           {
             "name": "--ui-popover-border",
             "fallbacks": [
-              "var(--ui-overlay-border, var(--ui-border-strong))"
+              "var(--ui-overlay-border, var(--ui-border-strong))",
+              "color-mix(in oklab, var(--ui-overlay-border, var(--ui-border-strong)) calc((1 - var(--_ui-material-active)) * 100%), transparent)"
             ]
           },
           {
@@ -15827,13 +16514,15 @@
           {
             "name": "--ui-popover-shadow",
             "fallbacks": [
-              "var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))"
+              "var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))",
+              "var(\n          --ui-overlay-shadow,\n          0 calc(var(--_ui-material-separation) * var(--_ui-material-scale, 0.55) * 8px) calc(\n            var(--_ui-material-separation) * var(--_ui-material-scale, 0.55) * 24px\n          ) color-mix(in oklab, var(--ui-text-primary) 15%, transparent),\n          inset 0 0 0 calc(var(--_ui-material-active) * var(--ui-border-width)) var(--ui-material-edge, var(--ui-border-strong)),\n          var(--ui-elevation-overlay, var(--ui-shadow-lg))\n        )"
             ]
           },
           {
             "name": "--ui-popover-surface",
             "fallbacks": [
-              "var(--ui-overlay-surface, var(--ui-surface-elevated))"
+              "var(--ui-overlay-surface, var(--ui-surface-elevated))",
+              "var(--ui-material-content, var(--ui-overlay-surface, var(--ui-surface-elevated)))"
             ]
           },
           {
@@ -15856,6 +16545,30 @@
               "var(--ui-shadow-lg)"
             ]
           },
+          {
+            "name": "--ui-glassiness",
+            "fallbacks": [
+              "0"
+            ]
+          },
+          {
+            "name": "--ui-material-content",
+            "fallbacks": [
+              "var(--ui-overlay-surface, var(--ui-surface-elevated))"
+            ]
+          },
+          {
+            "name": "--ui-material-edge",
+            "fallbacks": [
+              "var(--ui-border-strong)"
+            ]
+          },
+          {
+            "name": "--ui-material-glass",
+            "fallbacks": [
+              "var(--ui-surface-elevated)"
+            ]
+          },
           {
             "name": "--ui-motion-ease"
           },
@@ -15877,7 +16590,8 @@
           {
             "name": "--ui-overlay-shadow",
             "fallbacks": [
-              "var(--ui-elevation-overlay, var(--ui-shadow-lg))"
+              "var(--ui-elevation-overlay, var(--ui-shadow-lg))",
+              "0 calc(var(--_ui-material-separation) * var(--_ui-material-scale, 0.55) * 8px) calc(\n            var(--_ui-material-separation) * var(--_ui-material-scale, 0.55) * 24px\n          ) color-mix(in oklab, var(--ui-text-primary) 15%, transparent),\n          inset 0 0 0 calc(var(--_ui-material-active) * var(--ui-border-width)) var(--ui-material-edge, var(--ui-border-strong)),\n          var(--ui-elevation-overlay, var(--ui-shadow-lg))"
             ]
           },
           {
@@ -15900,6 +16614,15 @@
           },
           {
             "name": "--ui-surface-elevated"
+          },
+          {
+            "name": "--ui-surface-separation",
+            "fallbacks": [
+              "0"
+            ]
+          },
+          {
+            "name": "--ui-text-primary"
           }
         ]
       },
@@ -15949,7 +16672,7 @@
         {
           "name": "size",
           "property": "size",
-          "description": "Optional size preset. content keeps the existing intrinsic sizing; the other sizes constrain the surface for compact, medium, or large content.",
+          "description": "Optional size preset. content keeps the existing intrinsic sizing; the other sizes constrain the surface for compact, medium, or large content. Shared surface separation adapts to popover purpose and rendered size.",
           "type": "keyword",
           "default": "content",
           "options": [
@@ -16001,7 +16724,7 @@
         },
         {
           "name": "size",
-          "description": "Optional size preset. content keeps the existing intrinsic sizing; the other sizes constrain the surface for compact, medium, or large content.",
+          "description": "Optional size preset. content keeps the existing intrinsic sizing; the other sizes constrain the surface for compact, medium, or large content. Shared surface separation adapts to popover purpose and rendered size.",
           "type": "\"content\" | \"sm\" | \"md\" | \"lg\"",
           "default": "content",
           "options": [
@@ -16102,7 +16825,7 @@
           "name": "01-trigger-binding",
           "title": "Trigger binding",
           "description": "The for property connects Popover to the Looma button that toggles it.",
-          "markup": "<ui-button id=\"popover-trigger\" variant=\"ghost\">Open popover</ui-button>\n<ui-popover id=\"example-popover\" for=\"popover-trigger\">Popover content.</ui-popover>",
+          "markup": "<ui-button id=\"popover-trigger\" variant=\"ghost\">Office briefing</ui-button>\n<ui-popover id=\"example-popover\" for=\"popover-trigger\">Sam has booked the quiet room. Frodo is bringing the maps.</ui-popover>",
           "resizable": false,
           "bindings": "",
           "frameworks": {}
@@ -16811,7 +17534,7 @@
           "name": "01-default",
           "title": "Default",
           "description": "With no layout properties supplied, Reel uses its base gap, item width, and snap behavior.",
-          "markup": "<ui-reel item-width=\"sm\" aria-label=\"Items\">\n  <span>One</span>\n  <span>Two</span>\n  <span>Three</span>\n  <span>Four</span>\n</ui-reel>",
+          "markup": "<ui-reel item-width=\"sm\" aria-label=\"Items\">\n  <ui-card padding=\"sm\">Frodo</ui-card>\n  <ui-card padding=\"sm\">Sam</ui-card>\n  <ui-card padding=\"sm\">Sméagol</ui-card>\n  <ui-card padding=\"sm\">Merry</ui-card>\n</ui-reel>",
           "resizable": false,
           "bindings": "",
           "frameworks": {}
@@ -16821,7 +17544,7 @@
           "name": "02-gap-item-width-and-snap",
           "title": "Gap, item width, and snap",
           "description": "These three properties control spacing, each child's basis, and the scroll snap position.",
-          "markup": "<ui-reel gap=\"m\" item-width=\"md\" snap=\"center\" aria-label=\"Items\">\n  <span>One</span>\n  <span>Two</span>\n  <span>Three</span>\n  <span>Four</span>\n</ui-reel>",
+          "markup": "<ui-reel gap=\"m\" item-width=\"md\" snap=\"center\" aria-label=\"Items\">\n  <ui-card padding=\"sm\">Frodo</ui-card>\n  <ui-card padding=\"sm\">Sam</ui-card>\n  <ui-card padding=\"sm\">Sméagol</ui-card>\n  <ui-card padding=\"sm\">Merry</ui-card>\n</ui-reel>",
           "resizable": false,
           "bindings": "",
           "frameworks": {}
@@ -16983,7 +17706,7 @@
           "name": "01-default",
           "title": "Default",
           "description": "A vertical area scrolls its content. The bottom edge fades while more is below; scroll down and the top fades too, and each fade lifts once that edge has nothing past it.",
-          "markup": "<ui-scroll-area style=\"block-size: 10rem\">\n  <p>One</p>\n  <p>Two</p>\n  <p>Three</p>\n  <p>Four</p>\n  <p>Five</p>\n  <p>Six</p>\n  <p>Seven</p>\n  <p>Eight</p>\n</ui-scroll-area>",
+          "markup": "<ui-scroll-area style=\"block-size: 10rem\">\n  <ui-stack gap=\"s\">\n    <ui-card padding=\"sm\">Frodo — quarterly quest planning</ui-card>\n    <ui-card padding=\"sm\">Sam — office garden rota</ui-card>\n    <ui-card padding=\"sm\">Sméagol — lost property</ui-card>\n    <ui-card padding=\"sm\">Merry — second breakfast</ui-card>\n    <ui-card padding=\"sm\">Pippin — meeting room bookings</ui-card>\n    <ui-card padding=\"sm\">Aragorn — team check-in</ui-card>\n    <ui-card padding=\"sm\">Gimli — facilities requests</ui-card>\n    <ui-card padding=\"sm\">Legolas — desk plants</ui-card>\n  </ui-stack>\n</ui-scroll-area>",
           "resizable": false,
           "bindings": "",
           "frameworks": {}
@@ -18620,9 +19343,9 @@
           "id": "@threadlabs/looma/ui-sidebar/01-app-shell",
           "name": "01-app-shell",
           "title": "App shell",
-          "description": "The sidebar is the panel only; the page places it beside its main content. The button toggles it with commandfor and command=\"--toggle\": docked it collapses, and below the breakpoint (48rem by default) it opens as a drawer. Each open and close is one toggle event, whose detail gives open, mode, and trigger; as a drawer the popover's own toggle event, which has no detail, reaches the panel too.",
-          "markup": "<div class=\"demo-app-shell\">\n  <ui-sidebar id=\"sidebar-nav\" aria-label=\"Workspace\">\n    <nav class=\"demo-app-nav\">\n      <strong>Workspace</strong>\n      <a href=\"#inbox\">Inbox</a>\n      <a href=\"#projects\">Projects</a>\n      <a href=\"#settings\">Settings</a>\n    </nav>\n  </ui-sidebar>\n  <main class=\"demo-app-main\">\n    <ui-icon-button commandfor=\"sidebar-nav\" command=\"--toggle\" label=\"Toggle sidebar\">\n      <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" />\n        <path d=\"M9 3v18\" />\n      </svg>\n    </ui-icon-button>\n    <p>Main content sits beside the sidebar and fills the remaining space.</p>\n  </main>\n</div>",
-          "resizable": false,
+          "description": "The sidebar is the panel only; the page places it beside its main content. The button toggles it with commandfor and command=\"--toggle\": docked it collapses, and below the breakpoint (40rem in this example) it opens as a drawer. Each open and close is one toggle event, whose detail gives open, mode, and trigger; as a drawer the popover's own toggle event, which has no detail, reaches the panel too.",
+          "markup": "<ui-cluster wrap=\"nowrap\" align=\"stretch\" gap=\"m\">\n  <ui-sidebar breakpoint=\"sm\" id=\"sidebar-nav\" aria-label=\"Workspace\">\n    <ui-stack gap=\"s\" role=\"navigation\" aria-label=\"Office sections\">\n      <ui-text variant=\"eyebrow\">Fellowship office</ui-text>\n      <ui-nav-item href=\"#inbox\" current=\"true\">Inbox</ui-nav-item>\n      <ui-nav-item href=\"#projects\">Quest planning</ui-nav-item>\n      <ui-nav-item href=\"#settings\">Office settings</ui-nav-item>\n    </ui-stack>\n  </ui-sidebar>\n  <ui-stack fill role=\"main\">\n    <ui-icon-button commandfor=\"sidebar-nav\" command=\"--toggle\" label=\"Toggle sidebar\">\n      <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" />\n        <path d=\"M9 3v18\" />\n      </svg>\n    </ui-icon-button>\n    <ui-card padding=\"sm\">Frodo and Sam’s team updates sit beside the office navigation.</ui-card>\n  </ui-stack>\n</ui-cluster>",
+          "resizable": true,
           "bindings": "",
           "frameworks": {}
         },
@@ -18631,7 +19354,234 @@
           "name": "02-end-side-resizable",
           "title": "End side, resizable",
           "description": "side=\"end\" puts the panel on the end edge. resizable adds a handle on its inner edge: drag it, or focus it and use the arrow keys, Home, and End, within min-width and max-width. Double-click resets the width.",
-          "markup": "<div class=\"demo-app-shell\">\n  <main class=\"demo-app-main\">\n    <p>Main content comes first when the sidebar is on the end side.</p>\n  </main>\n  <ui-sidebar side=\"end\" width=\"260\" resizable min-width=\"200\" max-width=\"380\" aria-label=\"Details\">\n    <div class=\"demo-app-nav\">\n      <strong>Details</strong>\n      <p>Drag the inner edge, or focus it and use the arrow keys.</p>\n    </div>\n  </ui-sidebar>\n</div>",
+          "markup": "<ui-cluster wrap=\"nowrap\" align=\"stretch\" gap=\"m\">\n  <ui-stack fill role=\"main\">\n    <ui-card padding=\"sm\">The Fellowship office memo comes first, with its details alongside.</ui-card>\n  </ui-stack>\n  <ui-sidebar breakpoint=\"sm\" side=\"end\" width=\"260\" resizable min-width=\"200\" max-width=\"380\" aria-label=\"Details\">\n    <ui-stack gap=\"s\">\n      <ui-text variant=\"eyebrow\">Memo details</ui-text>\n      <p>Drag the inner edge, or focus it and use the arrow keys.</p>\n    </ui-stack>\n  </ui-sidebar>\n</ui-cluster>",
+          "resizable": true,
+          "bindings": "",
+          "frameworks": {}
+        }
+      ]
+    },
+    {
+      "tag": "ui-slider",
+      "package": "@threadlabs/looma",
+      "root": "span",
+      "description": "Native accessible range paired with bounded exact number and unit editing.",
+      "designTokens": {
+        "sources": [
+          "packages/looma/src/components/ui-slider/ui-slider.html"
+        ],
+        "component": [],
+        "shared": [
+          {
+            "name": "--ui-accent-solid"
+          },
+          {
+            "name": "--ui-control-focus",
+            "fallbacks": [
+              "var(--ui-accent-solid)"
+            ]
+          },
+          {
+            "name": "--ui-control-min-block-size"
+          },
+          {
+            "name": "--ui-control-size-lg"
+          },
+          {
+            "name": "--ui-control-size-md"
+          },
+          {
+            "name": "--ui-control-size-sm"
+          },
+          {
+            "name": "--ui-focus-width"
+          },
+          {
+            "name": "--ui-radius-sm"
+          },
+          {
+            "name": "--ui-space-1"
+          },
+          {
+            "name": "--ui-space-2"
+          }
+        ]
+      },
+      "attributes": [
+        {
+          "name": "disabled",
+          "property": "disabled",
+          "description": "Prevents typing, stepping and pointer or keyboard changes while keeping the value visible.",
+          "type": "boolean",
+          "default": false
+        },
+        {
+          "name": "label",
+          "property": "label",
+          "description": "Accessible name for the editing control.",
+          "type": "string",
+          "default": "Value"
+        },
+        {
+          "name": "max",
+          "property": "max",
+          "description": "Inclusive upper bound for dragging, keyboard steps and exact entry.",
+          "type": "number",
+          "default": 100
+        },
+        {
+          "name": "min",
+          "property": "min",
+          "description": "Inclusive lower bound for dragging, keyboard steps and exact entry.",
+          "type": "number",
+          "default": 0
+        },
+        {
+          "name": "name",
+          "property": "name",
+          "description": "Optional numeric form field name.",
+          "type": "string",
+          "default": ""
+        },
+        {
+          "name": "size",
+          "property": "size",
+          "description": "Shared field and button height.",
+          "type": "keyword",
+          "default": "md",
+          "options": [
+            "sm",
+            "md",
+            "lg"
+          ]
+        },
+        {
+          "name": "step",
+          "property": "step",
+          "description": "Positive native range and exact entry increment.",
+          "type": "number",
+          "default": 1
+        },
+        {
+          "name": "unit",
+          "property": "unit",
+          "description": "Unit shown by the exact editor.",
+          "type": "string",
+          "default": ""
+        },
+        {
+          "name": "value",
+          "property": "value",
+          "description": "Current numeric value. Native range and exact entry share bounds.",
+          "type": "number",
+          "default": 0
+        }
+      ],
+      "properties": [
+        {
+          "name": "disabled",
+          "description": "Prevents typing, stepping and pointer or keyboard changes while keeping the value visible.",
+          "type": "boolean",
+          "default": false
+        },
+        {
+          "name": "label",
+          "description": "Accessible name for the editing control.",
+          "type": "string",
+          "default": "Value"
+        },
+        {
+          "name": "max",
+          "description": "Inclusive upper bound for dragging, keyboard steps and exact entry.",
+          "type": "number",
+          "default": 100
+        },
+        {
+          "name": "min",
+          "description": "Inclusive lower bound for dragging, keyboard steps and exact entry.",
+          "type": "number",
+          "default": 0
+        },
+        {
+          "name": "name",
+          "description": "Optional numeric form field name.",
+          "type": "string",
+          "default": ""
+        },
+        {
+          "name": "size",
+          "description": "Shared field and button height.",
+          "type": "\"sm\" | \"md\" | \"lg\"",
+          "default": "md",
+          "options": [
+            "sm",
+            "md",
+            "lg"
+          ]
+        },
+        {
+          "name": "step",
+          "description": "Positive native range and exact entry increment.",
+          "type": "number",
+          "default": 1
+        },
+        {
+          "name": "unit",
+          "description": "Unit shown by the exact editor.",
+          "type": "string",
+          "default": ""
+        },
+        {
+          "name": "value",
+          "description": "Current numeric value. Native range and exact entry share bounds.",
+          "type": "number",
+          "default": 0
+        }
+      ],
+      "events": [
+        {
+          "name": "change",
+          "detailType": "{ readonly value: number }",
+          "detailSchema": "object",
+          "fields": [
+            {
+              "path": "value",
+              "type": "number",
+              "required": true
+            }
+          ],
+          "detailDocs": "Emitted when a toggleable control changes checked state."
+        },
+        {
+          "name": "input",
+          "detailType": "{ readonly value: number }",
+          "detailSchema": "object",
+          "fields": [
+            {
+              "path": "value",
+              "type": "number",
+              "required": true
+            }
+          ],
+          "detailDocs": "Emitted with the declared detail payload."
+        }
+      ],
+      "slots": [],
+      "group": "forms",
+      "id": "@threadlabs/looma/ui-slider",
+      "title": "Slider",
+      "resource": "@threadlabs/looma/components/ui-slider/ui-slider.html",
+      "targets": [
+        "html-next",
+        "vue"
+      ],
+      "examples": [
+        {
+          "id": "@threadlabs/looma/ui-slider/01-editing",
+          "name": "01-editing",
+          "title": "Exact and visual editing",
+          "description": "Native accessible range paired with bounded exact number and unit editing.",
+          "markup": "<ui-slider label=\"Sam’s focus time\" value=\"25\" min=\"5\" max=\"60\" step=\"5\" unit=\"min\"></ui-slider>",
           "resizable": false,
           "bindings": "",
           "frameworks": {}
@@ -18896,7 +19846,7 @@
           "name": "01-default",
           "title": "Default",
           "description": "With no properties supplied, Stack uses its default gap, alignment, and distribution.",
-          "markup": "<ui-stack>\n  <span>One</span>\n  <span>Two</span>\n  <span>Three</span>\n</ui-stack>",
+          "markup": "<ui-stack>\n  <ui-card padding=\"sm\">Frodo</ui-card>\n  <ui-card padding=\"sm\">Sam</ui-card>\n  <ui-card padding=\"sm\">Sméagol</ui-card>\n</ui-stack>",
           "resizable": false,
           "bindings": "",
           "frameworks": {}
@@ -18906,7 +19856,7 @@
           "name": "02-gap-xl-and-align-center",
           "title": "gap=\"xl\" and align=\"center\"",
           "description": "The extra-large gap visibly increases vertical space; center alignment returns the bounded children to their intrinsic widths.",
-          "markup": "<ui-stack gap=\"xl\" align=\"center\">\n  <span>One</span>\n  <span>Two</span>\n  <span>Three</span>\n</ui-stack>",
+          "markup": "<ui-stack gap=\"xl\" align=\"center\">\n  <ui-card padding=\"sm\">Frodo</ui-card>\n  <ui-card padding=\"sm\">Sam</ui-card>\n  <ui-card padding=\"sm\">Sméagol</ui-card>\n</ui-stack>",
           "resizable": false,
           "bindings": "",
           "frameworks": {}
@@ -19496,7 +20446,7 @@
           "name": "01-default",
           "title": "Default",
           "description": "With checked omitted, Switch starts off and enabled.",
-          "markup": "<ui-switch>Switch</ui-switch>",
+          "markup": "<ui-switch>Frodo is available</ui-switch>",
           "resizable": false,
           "bindings": "",
           "frameworks": {}
@@ -19698,7 +20648,7 @@
           "name": "01-default",
           "title": "Default",
           "description": "With no properties supplied, Switcher uses its default gap, threshold, and alignment.",
-          "markup": "<ui-switcher>\n  <span>One</span>\n  <span>Two</span>\n  <span>Three</span>\n</ui-switcher>",
+          "markup": "<ui-switcher>\n  <ui-card padding=\"sm\">Frodo</ui-card>\n  <ui-card padding=\"sm\">Sam</ui-card>\n  <ui-card padding=\"sm\">Sméagol</ui-card>\n</ui-switcher>",
           "resizable": true,
           "bindings": "",
           "frameworks": {}
@@ -19708,7 +20658,7 @@
           "name": "02-gap-threshold-and-alignment",
           "title": "Gap, threshold, and alignment",
           "description": "Threshold sets the intrinsic switch point while gap and alignment control the resulting layout.",
-          "markup": "<ui-switcher gap=\"m\" threshold=\"md\" align=\"stretch\">\n  <span>One</span>\n  <span>Two</span>\n  <span>Three</span>\n</ui-switcher>",
+          "markup": "<ui-switcher gap=\"m\" threshold=\"md\" align=\"stretch\">\n  <ui-card padding=\"sm\">Frodo</ui-card>\n  <ui-card padding=\"sm\">Sam</ui-card>\n  <ui-card padding=\"sm\">Sméagol</ui-card>\n</ui-switcher>",
           "resizable": true,
           "bindings": "",
           "frameworks": {}
@@ -19904,6 +20854,12 @@
           "packages/looma/src/components/ui-tabs/ui-tabs.html"
         ],
         "component": [
+          {
+            "name": "--ui-tabs-panel-padding",
+            "fallbacks": [
+              "var(--ui-space-4)"
+            ]
+          },
           {
             "name": "--ui-tabs-tab-min-block-size",
             "declarations": [
@@ -20233,7 +21189,7 @@
       "tag": "ui-text",
       "package": "@threadlabs/looma",
       "root": "p",
-      "description": "Running text on the type scale, in a tone that says what it is: default for content, `secondary` for supporting prose, `muted` for metadata and hints, `info` for something moving forward normally, `warning` for something that needs attention, `danger` for an error, `success` to confirm one. The words must carry the meaning too, since colour alone does not. `variant=\"eyebrow\"` is a short uppercase label that names a group; `variant=\"code\"` sets a value to read exactly, such as an address. A view never styles text of its own: it picks a size and a tone. A link inside Text is underlined, so it reads as a link by more than its colour.",
+      "description": "Text roles for body copy, display titles, headings, labels, captions, eyebrows and code. Choose the document element independently from its visual role; shared typography and semantic tones keep text consistent.",
       "designTokens": {
         "sources": [
           "packages/looma/src/components/ui-text/ui-text.html"
@@ -20259,7 +21215,8 @@
           {
             "name": "--ui-font-display",
             "fallbacks": [
-              "inherit"
+              "inherit",
+              "var(--ui-font-family-sans)"
             ]
           },
           {
@@ -20280,6 +21237,9 @@
           {
             "name": "--ui-font-semibold"
           },
+          {
+            "name": "--ui-font-size-2xl"
+          },
           {
             "name": "--ui-font-size-lg"
           },
@@ -20289,6 +21249,9 @@
           {
             "name": "--ui-font-size-sm"
           },
+          {
+            "name": "--ui-font-size-xl"
+          },
           {
             "name": "--ui-font-size-xs"
           },
@@ -20301,6 +21264,9 @@
           {
             "name": "--ui-line-height-relaxed"
           },
+          {
+            "name": "--ui-line-height-tight"
+          },
           {
             "name": "--ui-success-subtle-text"
           },
@@ -20324,7 +21290,7 @@
         {
           "name": "as",
           "property": "as",
-          "description": "The native element the text renders: a paragraph by default, inline span, small, or strong within a line, a div for a block, a label for a control, or a heading, h2 to h6, below a Page Header's h1 and a Section's h2. A heading takes its size and weight from size and weight, like any other text.",
+          "description": "The native element the text renders: a paragraph by default, inline span, small, or strong within a line, a div for a block, a label for a control, or a heading, h1 to h6. Choose its document level independently from its visual variant. The default body variant keeps the existing size and weight behavior.",
           "type": "keyword",
           "default": "p",
           "options": [
@@ -20334,6 +21300,7 @@
             "small",
             "strong",
             "label",
+            "h1",
             "h2",
             "h3",
             "h4",
@@ -20407,11 +21374,15 @@
         {
           "name": "variant",
           "property": "variant",
-          "description": "body is running text. eyebrow is a short, uppercase, tracked label that names what follows, such as a group of links; code sets a value to copy or read exactly, such as an address, in the monospace face.",
+          "description": "body is running text. display is a page title, heading names a section, label identifies a control, and caption is supporting text. These roles set their shared type scale, weight and leading; pair heading or display with an appropriate as heading element. eyebrow is a short, uppercase, tracked label that names what follows, such as a group of links; code sets a value to copy or read exactly, such as an address, in the monospace face.",
           "type": "keyword",
           "default": "body",
           "options": [
             "body",
+            "display",
+            "heading",
+            "label",
+            "caption",
             "eyebrow",
             "code"
           ]
@@ -20454,8 +21425,8 @@
         },
         {
           "name": "as",
-          "description": "The native element the text renders: a paragraph by default, inline span, small, or strong within a line, a div for a block, a label for a control, or a heading, h2 to h6, below a Page Header's h1 and a Section's h2. A heading takes its size and weight from size and weight, like any other text.",
-          "type": "\"p\" | \"span\" | \"div\" | \"small\" | \"strong\" | \"label\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
+          "description": "The native element the text renders: a paragraph by default, inline span, small, or strong within a line, a div for a block, a label for a control, or a heading, h1 to h6. Choose its document level independently from its visual variant. The default body variant keeps the existing size and weight behavior.",
+          "type": "\"p\" | \"span\" | \"div\" | \"small\" | \"strong\" | \"label\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
           "default": "p",
           "options": [
             "p",
@@ -20464,6 +21435,7 @@
             "small",
             "strong",
             "label",
+            "h1",
             "h2",
             "h3",
             "h4",
@@ -20530,11 +21502,15 @@
         },
         {
           "name": "variant",
-          "description": "body is running text. eyebrow is a short, uppercase, tracked label that names what follows, such as a group of links; code sets a value to copy or read exactly, such as an address, in the monospace face.",
-          "type": "\"body\" | \"eyebrow\" | \"code\"",
+          "description": "body is running text. display is a page title, heading names a section, label identifies a control, and caption is supporting text. These roles set their shared type scale, weight and leading; pair heading or display with an appropriate as heading element. eyebrow is a short, uppercase, tracked label that names what follows, such as a group of links; code sets a value to copy or read exactly, such as an address, in the monospace face.",
+          "type": "\"body\" | \"display\" | \"heading\" | \"label\" | \"caption\" | \"eyebrow\" | \"code\"",
           "default": "body",
           "options": [
             "body",
+            "display",
+            "heading",
+            "label",
+            "caption",
             "eyebrow",
             "code"
           ]
@@ -20591,9 +21567,9 @@
         {
           "id": "@threadlabs/looma/ui-text/02-variants",
           "name": "02-variants",
-          "title": "Eyebrow and code",
-          "description": "An eyebrow names a group of things; code sets a value to read exactly, such as an address.",
-          "markup": "<ui-stack gap=\"xs\">\n  <ui-text variant=\"eyebrow\" tone=\"muted\">Workspace</ui-text>\n  <ui-text variant=\"code\" tone=\"secondary\" size=\"sm\">acme.example.com</ui-text>\n</ui-stack>",
+          "title": "Typography roles",
+          "description": "One shared type family gives the Fellowship office titles, section headings, labels, captions and eyebrows. Choose document heading levels separately from visual roles.",
+          "markup": "<ui-stack gap=\"sm\">\n  <ui-text variant=\"eyebrow\" tone=\"secondary\">Fellowship office</ui-text>\n  <ui-text variant=\"display\" as=\"h1\">There and back by Friday</ui-text>\n  <ui-text variant=\"heading\" as=\"h2\">This week's expedition</ui-text>\n  <ui-text>Frodo and Sam are reviewing the route. Sméagol has booked the quiet meeting room.</ui-text>\n  <ui-text variant=\"label\">Next stand-up</ui-text>\n  <ui-text variant=\"caption\" tone=\"secondary\">Tuesday, after second breakfast</ui-text>\n  <ui-text variant=\"code\" tone=\"secondary\" size=\"sm\">fellowship.example.com</ui-text>\n</ui-stack>",
           "resizable": false,
           "bindings": "",
           "frameworks": {}
@@ -21600,7 +22576,8 @@
           {
             "name": "--ui-tooltip-border",
             "fallbacks": [
-              "var(--ui-overlay-border, var(--ui-border-strong))"
+              "var(--ui-overlay-border, var(--ui-border-strong))",
+              "color-mix(in oklab, var(--ui-overlay-border, var(--ui-border-strong)) calc((1 - var(--_ui-material-active)) * 100%), transparent)"
             ]
           },
           {
@@ -21630,13 +22607,15 @@
           {
             "name": "--ui-tooltip-shadow",
             "fallbacks": [
-              "var(--ui-overlay-shadow, var(--ui-elevation-tooltip, var(--ui-shadow-md)))"
+              "var(--ui-overlay-shadow, var(--ui-elevation-tooltip, var(--ui-shadow-md)))",
+              "var(\n          --ui-overlay-shadow,\n          0 calc(var(--_ui-material-separation) * var(--_ui-material-scale, 0.08) * 8px) calc(\n            var(--_ui-material-separation) * var(--_ui-material-scale, 0.08) * 24px\n          ) color-mix(in oklab, var(--ui-text-primary) 15%, transparent),\n          inset 0 0 0 calc(var(--_ui-material-active) * var(--ui-border-width)) var(--ui-material-edge, var(--ui-border-strong)),\n          var(--ui-elevation-tooltip, var(--ui-shadow-md))\n        )"
             ]
           },
           {
             "name": "--ui-tooltip-surface",
             "fallbacks": [
-              "var(--ui-overlay-surface, var(--ui-surface-elevated))"
+              "var(--ui-overlay-surface, var(--ui-surface-elevated))",
+              "var(--ui-material-content, var(--ui-overlay-surface, var(--ui-surface-elevated)))"
             ]
           },
           {
@@ -21671,9 +22650,33 @@
           {
             "name": "--ui-font-size-xs"
           },
+          {
+            "name": "--ui-glassiness",
+            "fallbacks": [
+              "0"
+            ]
+          },
           {
             "name": "--ui-line-height-tight"
           },
+          {
+            "name": "--ui-material-content",
+            "fallbacks": [
+              "var(--ui-overlay-surface, var(--ui-surface-elevated))"
+            ]
+          },
+          {
+            "name": "--ui-material-edge",
+            "fallbacks": [
+              "var(--ui-border-strong)"
+            ]
+          },
+          {
+            "name": "--ui-material-glass",
+            "fallbacks": [
+              "var(--ui-surface-elevated)"
+            ]
+          },
           {
             "name": "--ui-motion-ease"
           },
@@ -21695,7 +22698,8 @@
           {
             "name": "--ui-overlay-shadow",
             "fallbacks": [
-              "var(--ui-elevation-tooltip, var(--ui-shadow-md))"
+              "var(--ui-elevation-tooltip, var(--ui-shadow-md))",
+              "0 calc(var(--_ui-material-separation) * var(--_ui-material-scale, 0.08) * 8px) calc(\n            var(--_ui-material-separation) * var(--_ui-material-scale, 0.08) * 24px\n          ) color-mix(in oklab, var(--ui-text-primary) 15%, transparent),\n          inset 0 0 0 calc(var(--_ui-material-active) * var(--ui-border-width)) var(--ui-material-edge, var(--ui-border-strong)),\n          var(--ui-elevation-tooltip, var(--ui-shadow-md))"
             ]
           },
           {
@@ -21722,6 +22726,12 @@
           {
             "name": "--ui-surface-elevated"
           },
+          {
+            "name": "--ui-surface-separation",
+            "fallbacks": [
+              "0"
+            ]
+          },
           {
             "name": "--ui-text-primary"
           }