@threadlabs/looma 0.33.1 → 0.35.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",
@@ -240,6 +245,11 @@
       "package": "@threadlabs/looma",
       "resource": "@threadlabs/looma/components/ui-input-group/ui-input-group.html"
     },
+    {
+      "tag": "ui-light-editor",
+      "package": "@threadlabs/looma",
+      "resource": "@threadlabs/looma/components/ui-light-editor/ui-light-editor.html"
+    },
     {
       "tag": "ui-list",
       "package": "@threadlabs/looma",
@@ -280,6 +290,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 +355,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 +443,7 @@
   ],
   "schemaVersion": 1,
   "package": "@threadlabs/looma",
-  "version": "0.33.1",
+  "version": "0.35.0",
   "groups": [
     {
       "id": "layout",
@@ -1140,6 +1160,12 @@
               "var(--ui-success-solid)",
               "var(--ui-warning-solid)",
               "var(--ui-info-solid)",
+              "var(--ui-badge-surface, var(--_badge-color-surface, var(--_badge-surface)))",
+              "var(--ui-badge-surface, var(--_badge-color-surface, color-mix(in srgb, var(--_badge-text) 88%, transparent)))",
+              "var(--ui-badge-surface, var(--_badge-color-surface, var(--_badge-count-surface)))",
+              "var(--ui-badge-surface, color-mix(in srgb, currentColor 6%, transparent))",
+              "var(--ui-badge-surface, var(--_badge-color-surface, color-mix(in srgb, var(--ui-surface-raised) 88%, transparent)))",
+              "var(--ui-badge-surface, var(--_badge-color-surface, light-dark( color-mix(in srgb, var(--ui-surface-raised) var(--ui-badge-circle-opacity, 66%), transparent), color-mix(in srgb, var(--ui-surface-raised) var(--ui-badge-circle-opacity, 56%), transparent) )))",
               "var(--ui-text-secondary)",
               "var(--ui-accent-on-strong, var(--ui-text-on-accent))",
               "var(--ui-danger-on-strong, var(--ui-text-on-accent))",
@@ -1180,7 +1206,9 @@
               "light-dark( color-mix(in srgb, var(--_badge-text) var(--ui-badge-circle-opacity, 66%), transparent), color-mix(in srgb, var(--_badge-text) var(--ui-badge-circle-opacity, 56%), transparent) )"
             ],
             "fallbacks": [
-              "color-mix(in srgb, var(--_badge-text) 88%, transparent)"
+              "color-mix(in srgb, var(--_badge-text) 88%, transparent)",
+              "color-mix(in srgb, var(--ui-surface-raised) 88%, transparent)",
+              "light-dark(\n        color-mix(in srgb, var(--ui-surface-raised) var(--ui-badge-circle-opacity, 66%), transparent),\n        color-mix(in srgb, var(--ui-surface-raised) var(--ui-badge-circle-opacity, 56%), transparent)\n      )"
             ]
           },
           {
@@ -1200,23 +1228,12 @@
               "var(--ui-danger-subtle-text, var(--ui-danger-solid))",
               "var(--ui-success-subtle-text, var(--ui-success-solid))",
               "var(--ui-warning-subtle-text, var(--ui-warning-solid))",
-              "var(--ui-info-subtle-text, var(--ui-info-solid))",
-              "color-mix(in srgb, var(--ui-surface-subtle) 80%, var(--ui-surface-default))",
-              "var(--ui-accent-strong-surface, var(--ui-accent-solid))",
-              "var(--ui-danger-strong-surface, var(--ui-danger-solid))",
-              "var(--ui-success-strong-surface, var(--ui-success-solid))",
-              "var(--ui-warning-strong-surface, var(--ui-warning-solid))",
-              "var(--ui-info-strong-surface, var(--ui-info-solid))",
-              "color-mix(in srgb, var(--ui-accent-solid) 19%, var(--ui-surface-default))",
-              "color-mix(in srgb, var(--ui-danger-solid) 19%, var(--ui-surface-default))",
-              "color-mix(in srgb, var(--ui-success-solid) 19%, var(--ui-surface-default))",
-              "color-mix(in srgb, var(--ui-warning-solid) 19%, var(--ui-surface-default))",
-              "color-mix(in srgb, var(--ui-info-solid) 19%, var(--ui-surface-default))",
-              "var(--ui-surface-default)"
+              "var(--ui-info-subtle-text, var(--ui-info-solid))"
             ],
             "fallbacks": [
               "color-mix(in srgb, var(--_badge-surface) 85%, var(--ui-text-primary))",
-              "light-dark(color-mix(in srgb, var(--_badge-surface) 65%, var(--ui-text-primary)), var(--ui-text-primary))"
+              "light-dark(color-mix(in srgb, var(--_badge-surface) 65%, var(--ui-text-primary)), var(--ui-text-primary))",
+              "var(--ui-text-primary)"
             ]
           },
           {
@@ -1226,6 +1243,7 @@
               "var(--_badge-color-border, color-mix(in srgb, var(--_badge-text) 88%, transparent))",
               "var(--_badge-color-border, light-dark(color-mix(in srgb, var(--_badge-text) 88%, transparent), color-mix(in srgb, var(--_badge-text) 44%, transparent)))",
               "color-mix(in srgb, currentColor 20%, transparent)",
+              "var(--_badge-color-border, var(--_badge-outline-surface))",
               "var(--_badge-color-border, var(--_badge-text))"
             ]
           },
@@ -1315,7 +1333,9 @@
               "var(--_badge-color-surface, var(--_badge-surface))",
               "var(--_badge-color-surface, color-mix(in srgb, var(--_badge-text) 88%, transparent))",
               "var(--_badge-color-surface, var(--_badge-count-surface))",
-              "color-mix(in srgb, currentColor 6%, transparent)"
+              "color-mix(in srgb, currentColor 6%, transparent)",
+              "var(--_badge-color-surface, color-mix(in srgb, var(--ui-surface-raised) 88%, transparent))",
+              "var(--_badge-color-surface, light-dark(\n        color-mix(in srgb, var(--ui-surface-raised) var(--ui-badge-circle-opacity, 66%), transparent),\n        color-mix(in srgb, var(--ui-surface-raised) var(--ui-badge-circle-opacity, 56%), transparent)\n      ))"
             ]
           },
           {
@@ -1325,7 +1345,7 @@
               "var(--_badge-color-text, color-mix(in srgb, var(--_badge-surface) 85%, var(--ui-text-primary)))",
               "var(--_badge-color-text, light-dark(color-mix(in srgb, var(--_badge-surface) 65%, var(--ui-text-primary)), var(--ui-text-primary)))",
               "inherit",
-              "var(--_badge-color-text, var(--_badge-surface))"
+              "var(--_badge-color-text, var(--ui-text-primary))"
             ]
           }
         ],
@@ -1459,6 +1479,9 @@
           {
             "name": "--ui-surface-default"
           },
+          {
+            "name": "--ui-surface-raised"
+          },
           {
             "name": "--ui-surface-subtle"
           },
@@ -1917,7 +1940,8 @@
           {
             "name": "--ui-button-active-surface",
             "fallbacks": [
-              "oklch(from var(--_tone) l c h / 18%)"
+              "oklch(from var(--_tone) l c h / 18%)",
+              "var(--ui-neutral-active)"
             ]
           },
           {
@@ -1927,6 +1951,7 @@
             ],
             "fallbacks": [
               "var(--ui-border)",
+              "var(--ui-control-border)",
               "var(--ui-control-border, var(--ui-border-strong))"
             ]
           },
@@ -1974,6 +1999,7 @@
             "name": "--ui-button-hover-surface",
             "fallbacks": [
               "oklch(from var(--_tone) l c h / 12%)",
+              "var(--ui-neutral-hover)",
               "var(--ui-control-surface, var(--ui-surface-elevated))"
             ]
           },
@@ -2023,6 +2049,7 @@
             "name": "--ui-button-surface",
             "fallbacks": [
               "oklch(from var(--_tone) l c h / 5%)",
+              "var(--ui-neutral-surface)",
               "var(--ui-control-surface, var(--ui-surface-elevated))"
             ]
           },
@@ -2032,6 +2059,7 @@
               "var(--_hue-text)"
             ],
             "fallbacks": [
+              "var(--ui-text)",
               "var(--ui-text-primary)"
             ]
           },
@@ -2049,6 +2077,18 @@
           {
             "name": "--ui-accent-active"
           },
+          {
+            "name": "--ui-accent-glow",
+            "fallbacks": [
+              "0 0 transparent"
+            ]
+          },
+          {
+            "name": "--ui-accent-highlight",
+            "fallbacks": [
+              "none"
+            ]
+          },
           {
             "name": "--ui-accent-hover"
           },
@@ -2154,9 +2194,30 @@
           {
             "name": "--ui-danger"
           },
+          {
+            "name": "--ui-danger-active",
+            "fallbacks": [
+              "var(--ui-danger-hover)"
+            ]
+          },
+          {
+            "name": "--ui-danger-glow",
+            "fallbacks": [
+              "0 0 transparent"
+            ]
+          },
+          {
+            "name": "--ui-danger-highlight",
+            "fallbacks": [
+              "none"
+            ]
+          },
           {
             "name": "--ui-danger-hover"
           },
+          {
+            "name": "--ui-danger-subtle-text"
+          },
           {
             "name": "--ui-disabled-border"
           },
@@ -2202,6 +2263,30 @@
           {
             "name": "--ui-info"
           },
+          {
+            "name": "--ui-info-active"
+          },
+          {
+            "name": "--ui-info-glow",
+            "fallbacks": [
+              "0 0 transparent"
+            ]
+          },
+          {
+            "name": "--ui-info-highlight",
+            "fallbacks": [
+              "none"
+            ]
+          },
+          {
+            "name": "--ui-info-hover"
+          },
+          {
+            "name": "--ui-info-on-strong"
+          },
+          {
+            "name": "--ui-info-subtle-text"
+          },
           {
             "name": "--ui-line-height-tight"
           },
@@ -2220,6 +2305,27 @@
               "var(--ui-motion-fast)"
             ]
           },
+          {
+            "name": "--ui-neutral-active"
+          },
+          {
+            "name": "--ui-neutral-glow",
+            "fallbacks": [
+              "0 0 transparent"
+            ]
+          },
+          {
+            "name": "--ui-neutral-highlight",
+            "fallbacks": [
+              "none"
+            ]
+          },
+          {
+            "name": "--ui-neutral-hover"
+          },
+          {
+            "name": "--ui-neutral-surface"
+          },
           {
             "name": "--ui-on-accent"
           },
@@ -2265,12 +2371,42 @@
           {
             "name": "--ui-success"
           },
+          {
+            "name": "--ui-success-active"
+          },
+          {
+            "name": "--ui-success-glow",
+            "fallbacks": [
+              "0 0 transparent"
+            ]
+          },
+          {
+            "name": "--ui-success-highlight",
+            "fallbacks": [
+              "none"
+            ]
+          },
+          {
+            "name": "--ui-success-hover"
+          },
+          {
+            "name": "--ui-success-on-strong"
+          },
+          {
+            "name": "--ui-success-subtle-text"
+          },
           {
             "name": "--ui-surface"
           },
           {
             "name": "--ui-surface-elevated"
           },
+          {
+            "name": "--ui-surface-highlight",
+            "fallbacks": [
+              "none"
+            ]
+          },
           {
             "name": "--ui-text"
           },
@@ -2282,6 +2418,30 @@
           },
           {
             "name": "--ui-warning"
+          },
+          {
+            "name": "--ui-warning-active"
+          },
+          {
+            "name": "--ui-warning-glow",
+            "fallbacks": [
+              "0 0 transparent"
+            ]
+          },
+          {
+            "name": "--ui-warning-highlight",
+            "fallbacks": [
+              "none"
+            ]
+          },
+          {
+            "name": "--ui-warning-hover"
+          },
+          {
+            "name": "--ui-warning-on-strong"
+          },
+          {
+            "name": "--ui-warning-subtle-text"
           }
         ]
       },
@@ -2335,6 +2495,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 +2640,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 +2774,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 +2879,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 +3164,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 and corners. Choose outlined, subtle or elevated; standard or expressive treatment independently follows the theme's material. Tones change colour without changing geometry.",
       "designTokens": {
         "sources": [
           "packages/looma/src/components/ui-card/ui-card.html"
@@ -2977,9 +3174,6 @@
           {
             "name": "--ui-accent"
           },
-          {
-            "name": "--ui-accent-line-width"
-          },
           {
             "name": "--ui-border-default"
           },
@@ -2998,9 +3192,33 @@
           {
             "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-material-glow",
+            "fallbacks": [
+              "0 0 transparent"
+            ]
+          },
           {
             "name": "--ui-radius-lg"
           },
@@ -3031,12 +3249,24 @@
           {
             "name": "--ui-surface-default"
           },
+          {
+            "name": "--ui-surface-highlight",
+            "fallbacks": [
+              "linear-gradient(transparent, transparent)"
+            ]
+          },
           {
             "name": "--ui-surface-muted"
           },
           {
             "name": "--ui-surface-raised"
           },
+          {
+            "name": "--ui-surface-separation",
+            "fallbacks": [
+              "0"
+            ]
+          },
           {
             "name": "--ui-text-primary"
           },
@@ -3088,7 +3318,7 @@
         {
           "name": "tone",
           "property": "tone",
-          "description": "accent, info, success and warning add a quiet semantic surface. danger retains its strong leading edge for consequential content. Row highlights follow the surface hue; action controls retain their own intent.",
+          "description": "accent, info, success, warning and danger add a quiet semantic surface without changing card geometry. Row highlights follow the surface hue; action controls retain their own intent.",
           "type": "keyword",
           "default": "neutral",
           "options": [
@@ -3100,10 +3330,21 @@
             "danger"
           ]
         },
+        {
+          "name": "treatment",
+          "property": "treatment",
+          "description": "How much of the theme's decorative material the surface expresses. standard preserves its restrained treatment; expressive uses the full material treatment. This does not add elevation or require glass.",
+          "type": "keyword",
+          "default": "standard",
+          "options": [
+            "standard",
+            "expressive"
+          ]
+        },
         {
           "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 adds a subtle lift above the page, for a view's one card, such as sign-in. Treatment independently controls decorative material.",
           "type": "keyword",
           "default": "outlined",
           "options": [
@@ -3152,7 +3393,7 @@
         },
         {
           "name": "tone",
-          "description": "accent, info, success and warning add a quiet semantic surface. danger retains its strong leading edge for consequential content. Row highlights follow the surface hue; action controls retain their own intent.",
+          "description": "accent, info, success, warning and danger add a quiet semantic surface without changing card geometry. Row highlights follow the surface hue; action controls retain their own intent.",
           "type": "\"neutral\" | \"accent\" | \"info\" | \"success\" | \"warning\" | \"danger\"",
           "default": "neutral",
           "options": [
@@ -3164,9 +3405,19 @@
             "danger"
           ]
         },
+        {
+          "name": "treatment",
+          "description": "How much of the theme's decorative material the surface expresses. standard preserves its restrained treatment; expressive uses the full material treatment. This does not add elevation or require glass.",
+          "type": "\"standard\" | \"expressive\"",
+          "default": "standard",
+          "options": [
+            "standard",
+            "expressive"
+          ]
+        },
         {
           "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.",
+          "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 adds a subtle lift above the page, for a view's one card, such as sign-in. Treatment independently controls decorative material.",
           "type": "\"outlined\" | \"subtle\" | \"elevated\"",
           "default": "outlined",
           "options": [
@@ -3206,7 +3457,7 @@
           "id": "@threadlabs/looma/ui-card/02-danger",
           "name": "02-danger",
           "title": "Danger",
-          "description": "tone=\"danger\" tints a consequential section and draws a strong leading edge around its action.",
+          "description": "tone=\"danger\" tints a consequential section while retaining the same corners and border geometry as other cards.",
           "markup": "<ui-card tone=\"danger\">\n  <ui-text weight=\"semibold\">Delete this site</ui-text>\n  <ui-text tone=\"secondary\" size=\"sm\">Everything in it is deleted for everyone.</ui-text>\n  <ui-cluster><ui-button variant=\"solid\" tone=\"danger\">Delete site</ui-button></ui-cluster>\n</ui-card>",
           "resizable": false,
           "bindings": "",
@@ -3221,6 +3472,16 @@
           "resizable": false,
           "bindings": "",
           "frameworks": {}
+        },
+        {
+          "id": "@threadlabs/looma/ui-card/04-expressive-surface",
+          "name": "04-expressive-surface",
+          "title": "Expressive surface",
+          "description": "Expressive treatment uses the theme's material independently of elevation. Bookish catches light through a frosted rim; a matte theme stays opaque. Ordinary elevated cards retain their subtle lift.",
+          "markup": "<ui-card variant=\"elevated\" treatment=\"expressive\">\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": {}
         }
       ]
     },
@@ -3255,6 +3516,12 @@
           }
         ],
         "shared": [
+          {
+            "name": "--ui-accent-highlight",
+            "fallbacks": [
+              "none"
+            ]
+          },
           {
             "name": "--ui-accent-solid"
           },
@@ -3360,6 +3627,12 @@
           {
             "name": "--ui-surface-default"
           },
+          {
+            "name": "--ui-surface-highlight",
+            "fallbacks": [
+              "none"
+            ]
+          },
           {
             "name": "--ui-text-on-accent"
           },
@@ -3556,7 +3829,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 +4441,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 +6241,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 +6637,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,24 +6692,189 @@
           {
             "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-text-primary"
-          }
-        ]
-      },
-      "attributes": [
-        {
-          "name": "term",
-          "property": "term",
+            "name": "--ui-space-4"
+          },
+          {
+            "name": "--ui-surface"
+          },
+          {
+            "name": "--ui-surface-raised"
+          },
+          {
+            "name": "--ui-text-primary"
+          }
+        ]
+      },
+      "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": "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": "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": "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": [
+        {
+          "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-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-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": {}
+        }
+      ]
+    },
+    {
+      "tag": "ui-description-item",
+      "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).",
+      "designTokens": {
+        "sources": [
+          "packages/looma/src/components/ui-description-item/ui-description-item.html"
+        ],
+        "component": [],
+        "shared": [
+          {
+            "name": "--ui-border-default"
+          },
+          {
+            "name": "--ui-font-medium"
+          },
+          {
+            "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": ""
@@ -6645,7 +7116,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 +7142,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          var(--ui-material-glow, 0 0 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 +7191,39 @@
           {
             "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-material-glow",
+            "fallbacks": [
+              "0 0 transparent"
+            ]
+          },
           {
             "name": "--ui-motion-base"
           },
@@ -6747,7 +7251,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          var(--ui-material-glow, 0 0 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))"
             ]
           },
           {
@@ -6783,9 +7288,21 @@
           {
             "name": "--ui-surface-elevated"
           },
+          {
+            "name": "--ui-surface-highlight",
+            "fallbacks": [
+              "linear-gradient(transparent, transparent)"
+            ]
+          },
           {
             "name": "--ui-surface-muted"
           },
+          {
+            "name": "--ui-surface-separation",
+            "fallbacks": [
+              "0"
+            ]
+          },
           {
             "name": "--ui-text-primary"
           },
@@ -6850,7 +7367,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 +7426,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 +7529,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 +7578,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 +12284,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 +12294,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": {}
@@ -11934,6 +12451,18 @@
           }
         ],
         "shared": [
+          {
+            "name": "--ui-accent-glow",
+            "fallbacks": [
+              "0 0 transparent"
+            ]
+          },
+          {
+            "name": "--ui-accent-highlight",
+            "fallbacks": [
+              "none"
+            ]
+          },
           {
             "name": "--ui-accent-hover"
           },
@@ -12012,6 +12541,30 @@
           {
             "name": "--ui-control-size-sm"
           },
+          {
+            "name": "--ui-danger"
+          },
+          {
+            "name": "--ui-danger-glow",
+            "fallbacks": [
+              "0 0 transparent"
+            ]
+          },
+          {
+            "name": "--ui-danger-highlight",
+            "fallbacks": [
+              "none"
+            ]
+          },
+          {
+            "name": "--ui-danger-hover"
+          },
+          {
+            "name": "--ui-danger-on-strong"
+          },
+          {
+            "name": "--ui-danger-subtle-text"
+          },
           {
             "name": "--ui-disabled-border"
           },
@@ -12039,6 +12592,30 @@
           {
             "name": "--ui-icon-size-sm"
           },
+          {
+            "name": "--ui-info"
+          },
+          {
+            "name": "--ui-info-glow",
+            "fallbacks": [
+              "0 0 transparent"
+            ]
+          },
+          {
+            "name": "--ui-info-highlight",
+            "fallbacks": [
+              "none"
+            ]
+          },
+          {
+            "name": "--ui-info-hover"
+          },
+          {
+            "name": "--ui-info-on-strong"
+          },
+          {
+            "name": "--ui-info-subtle-text"
+          },
           {
             "name": "--ui-motion-base"
           },
@@ -12054,6 +12631,24 @@
               "var(--ui-motion-fast)"
             ]
           },
+          {
+            "name": "--ui-neutral-glow",
+            "fallbacks": [
+              "0 0 transparent"
+            ]
+          },
+          {
+            "name": "--ui-neutral-highlight",
+            "fallbacks": [
+              "none"
+            ]
+          },
+          {
+            "name": "--ui-neutral-hover"
+          },
+          {
+            "name": "--ui-neutral-surface"
+          },
           {
             "name": "--ui-press-scale",
             "fallbacks": [
@@ -12070,16 +12665,73 @@
             "name": "--ui-radius-round"
           },
           {
-            "name": "--ui-surface-default"
-          },
-          {
-            "name": "--ui-text-on-accent"
+            "name": "--ui-success"
           },
           {
-            "name": "--ui-text-primary"
+            "name": "--ui-success-glow",
+            "fallbacks": [
+              "0 0 transparent"
+            ]
+          },
+          {
+            "name": "--ui-success-highlight",
+            "fallbacks": [
+              "none"
+            ]
+          },
+          {
+            "name": "--ui-success-hover"
+          },
+          {
+            "name": "--ui-success-on-strong"
+          },
+          {
+            "name": "--ui-success-subtle-text"
+          },
+          {
+            "name": "--ui-surface-default"
+          },
+          {
+            "name": "--ui-surface-highlight",
+            "fallbacks": [
+              "none"
+            ]
+          },
+          {
+            "name": "--ui-text"
+          },
+          {
+            "name": "--ui-text-on-accent"
+          },
+          {
+            "name": "--ui-text-primary"
           },
           {
             "name": "--ui-text-secondary"
+          },
+          {
+            "name": "--ui-warning"
+          },
+          {
+            "name": "--ui-warning-glow",
+            "fallbacks": [
+              "0 0 transparent"
+            ]
+          },
+          {
+            "name": "--ui-warning-highlight",
+            "fallbacks": [
+              "none"
+            ]
+          },
+          {
+            "name": "--ui-warning-hover"
+          },
+          {
+            "name": "--ui-warning-on-strong"
+          },
+          {
+            "name": "--ui-warning-subtle-text"
           }
         ]
       },
@@ -12136,6 +12788,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 +12831,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 +12903,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 +12941,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"
           ]
         },
         {
@@ -12832,6 +13523,12 @@
           {
             "name": "--ui-surface-elevated"
           },
+          {
+            "name": "--ui-surface-highlight",
+            "fallbacks": [
+              "none"
+            ]
+          },
           {
             "name": "--ui-surface-muted"
           },
@@ -12996,7 +13693,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": {}
@@ -13181,6 +13878,12 @@
           {
             "name": "--ui-surface-elevated"
           },
+          {
+            "name": "--ui-surface-highlight",
+            "fallbacks": [
+              "none"
+            ]
+          },
           {
             "name": "--ui-surface-muted"
           },
@@ -13365,6 +14068,229 @@
         }
       ]
     },
+    {
+      "tag": "ui-light-editor",
+      "package": "@threadlabs/looma",
+      "root": "span",
+      "description": "Position a shared light source with a draggable, keyboard-operable handle and exact bounded coordinates. The position is relative to each illuminated surface.",
+      "designTokens": {
+        "sources": [
+          "packages/looma/src/components/ui-light-editor/ui-light-editor.html"
+        ],
+        "component": [],
+        "shared": [
+          {
+            "name": "--ui-accent"
+          },
+          {
+            "name": "--ui-border"
+          },
+          {
+            "name": "--ui-border-width"
+          },
+          {
+            "name": "--ui-control-border"
+          },
+          {
+            "name": "--ui-control-min-block-size"
+          },
+          {
+            "name": "--ui-disabled-border"
+          },
+          {
+            "name": "--ui-disabled-surface"
+          },
+          {
+            "name": "--ui-field-radius",
+            "fallbacks": [
+              "var(--ui-radius-md)"
+            ]
+          },
+          {
+            "name": "--ui-focus-ring"
+          },
+          {
+            "name": "--ui-focus-width"
+          },
+          {
+            "name": "--ui-font-size-sm"
+          },
+          {
+            "name": "--ui-neutral-surface",
+            "fallbacks": [
+              "var(--ui-surface)"
+            ]
+          },
+          {
+            "name": "--ui-radius-md"
+          },
+          {
+            "name": "--ui-shadow-sm"
+          },
+          {
+            "name": "--ui-space-1"
+          },
+          {
+            "name": "--ui-space-2"
+          },
+          {
+            "name": "--ui-space-3"
+          },
+          {
+            "name": "--ui-surface"
+          },
+          {
+            "name": "--ui-surface-raised"
+          },
+          {
+            "name": "--ui-text-secondary"
+          }
+        ]
+      },
+      "attributes": [
+        {
+          "name": "disabled",
+          "property": "disabled",
+          "description": "Prevents pointer, keyboard and exact edits.",
+          "type": "boolean",
+          "default": false
+        },
+        {
+          "name": "label",
+          "property": "label",
+          "description": "Accessible name for the position editor.",
+          "type": "string",
+          "default": "Light position"
+        },
+        {
+          "name": "size",
+          "property": "size",
+          "description": "Sets both coordinate fields to the shared small, medium or large control height.",
+          "type": "keyword",
+          "default": "md",
+          "options": [
+            "sm",
+            "md",
+            "lg"
+          ]
+        },
+        {
+          "name": "x",
+          "property": "x",
+          "description": "Horizontal source position from 0 (left) to 1 (right), relative to every surface.",
+          "type": "number",
+          "default": 0.5
+        },
+        {
+          "name": "y",
+          "property": "y",
+          "description": "Vertical source position from 0 (top) to 1 (bottom), relative to every surface.",
+          "type": "number",
+          "default": 0
+        }
+      ],
+      "properties": [
+        {
+          "name": "disabled",
+          "description": "Prevents pointer, keyboard and exact edits.",
+          "type": "boolean",
+          "default": false
+        },
+        {
+          "name": "label",
+          "description": "Accessible name for the position editor.",
+          "type": "string",
+          "default": "Light position"
+        },
+        {
+          "name": "size",
+          "description": "Sets both coordinate fields to the shared small, medium or large control height.",
+          "type": "\"sm\" | \"md\" | \"lg\"",
+          "default": "md",
+          "options": [
+            "sm",
+            "md",
+            "lg"
+          ]
+        },
+        {
+          "name": "x",
+          "description": "Horizontal source position from 0 (left) to 1 (right), relative to every surface.",
+          "type": "number",
+          "default": 0.5
+        },
+        {
+          "name": "y",
+          "description": "Vertical source position from 0 (top) to 1 (bottom), relative to every surface.",
+          "type": "number",
+          "default": 0
+        }
+      ],
+      "events": [
+        {
+          "name": "change",
+          "detailType": "{ readonly x: number; readonly y: number }",
+          "detailSchema": "object",
+          "fields": [
+            {
+              "path": "x",
+              "type": "number",
+              "required": true
+            },
+            {
+              "path": "y",
+              "type": "number",
+              "required": true
+            }
+          ],
+          "detailDocs": "Emitted when a toggleable control changes checked state."
+        },
+        {
+          "name": "input",
+          "detailType": "{ readonly x: number; readonly y: number }",
+          "detailSchema": "object",
+          "fields": [
+            {
+              "path": "x",
+              "type": "number",
+              "required": true
+            },
+            {
+              "path": "y",
+              "type": "number",
+              "required": true
+            }
+          ],
+          "detailDocs": "Emitted with the declared detail payload."
+        }
+      ],
+      "slots": [
+        {
+          "name": "default",
+          "description": "Default child content."
+        }
+      ],
+      "group": "forms",
+      "id": "@threadlabs/looma/ui-light-editor",
+      "title": "Light Editor",
+      "resource": "@threadlabs/looma/components/ui-light-editor/ui-light-editor.html",
+      "targets": [
+        "html-next",
+        "vue"
+      ],
+      "examples": [
+        {
+          "id": "@threadlabs/looma/ui-light-editor/01-position",
+          "name": "01-position",
+          "title": "Light position",
+          "description": "Move the source with a pointer, touch, arrow keys or exact coordinates. The source describes a position relative to every illuminated surface.",
+          "markup": "<ui-light-editor label=\"Fellowship office light\" x=\"0.5\" y=\"0\"></ui-light-editor>",
+          "resizable": false,
+          "bindings": "",
+          "frameworks": {}
+        }
+      ]
+    },
     {
       "tag": "ui-list",
       "package": "@threadlabs/looma",
@@ -14191,7 +15117,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 +15130,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          var(--ui-material-glow, 0 0 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 +15170,36 @@
           {
             "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-material-glow",
+            "fallbacks": [
+              "0 0 transparent"
+            ]
+          },
           {
             "name": "--ui-motion-ease"
           },
@@ -14262,7 +15221,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          var(--ui-material-glow, 0 0 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 +15251,21 @@
           },
           {
             "name": "--ui-surface-elevated"
+          },
+          {
+            "name": "--ui-surface-highlight",
+            "fallbacks": [
+              "linear-gradient(transparent, transparent)"
+            ]
+          },
+          {
+            "name": "--ui-surface-separation",
+            "fallbacks": [
+              "0"
+            ]
+          },
+          {
+            "name": "--ui-text-primary"
           }
         ]
       },
@@ -15653,6 +16628,203 @@
         }
       ]
     },
+    {
+      "tag": "ui-number-input",
+      "package": "@threadlabs/looma",
+      "root": "span",
+      "description": "Bounded exact number and unit editing with safe arithmetic, stepping and keyboard controls.",
+      "designTokens": {
+        "sources": [
+          "packages/looma/src/components/ui-number-input/ui-number-input.html"
+        ],
+        "component": [],
+        "shared": [
+          {
+            "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",
@@ -15809,7 +16981,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 +17000,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          var(--ui-material-glow, 0 0 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 +17031,36 @@
               "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-material-glow",
+            "fallbacks": [
+              "0 0 transparent"
+            ]
+          },
           {
             "name": "--ui-motion-ease"
           },
@@ -15877,7 +17082,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          var(--ui-material-glow, 0 0 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 +17106,21 @@
           },
           {
             "name": "--ui-surface-elevated"
+          },
+          {
+            "name": "--ui-surface-highlight",
+            "fallbacks": [
+              "linear-gradient(transparent, transparent)"
+            ]
+          },
+          {
+            "name": "--ui-surface-separation",
+            "fallbacks": [
+              "0"
+            ]
+          },
+          {
+            "name": "--ui-text-primary"
           }
         ]
       },
@@ -15949,7 +17170,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 +17222,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 +17323,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 +18032,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 +18042,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 +18204,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": {}
@@ -17968,6 +19189,12 @@
           {
             "name": "--ui-surface-elevated"
           },
+          {
+            "name": "--ui-surface-highlight",
+            "fallbacks": [
+              "linear-gradient(transparent, transparent)"
+            ]
+          },
           {
             "name": "--ui-surface-muted"
           },
@@ -18620,9 +19847,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 +19858,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 +20350,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 +20360,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": {}
@@ -19249,6 +20703,12 @@
           }
         ],
         "shared": [
+          {
+            "name": "--ui-accent-highlight",
+            "fallbacks": [
+              "none"
+            ]
+          },
           {
             "name": "--ui-accent-solid"
           },
@@ -19339,6 +20799,12 @@
           {
             "name": "--ui-surface-default"
           },
+          {
+            "name": "--ui-surface-highlight",
+            "fallbacks": [
+              "none"
+            ]
+          },
           {
             "name": "--ui-text-on-accent"
           },
@@ -19496,7 +20962,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 +21164,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 +21174,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 +21370,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 +21705,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 +21731,8 @@
           {
             "name": "--ui-font-display",
             "fallbacks": [
-              "inherit"
+              "inherit",
+              "var(--ui-font-family-sans)"
             ]
           },
           {
@@ -20280,6 +21753,9 @@
           {
             "name": "--ui-font-semibold"
           },
+          {
+            "name": "--ui-font-size-2xl"
+          },
           {
             "name": "--ui-font-size-lg"
           },
@@ -20289,6 +21765,9 @@
           {
             "name": "--ui-font-size-sm"
           },
+          {
+            "name": "--ui-font-size-xl"
+          },
           {
             "name": "--ui-font-size-xs"
           },
@@ -20301,6 +21780,9 @@
           {
             "name": "--ui-line-height-relaxed"
           },
+          {
+            "name": "--ui-line-height-tight"
+          },
           {
             "name": "--ui-success-subtle-text"
           },
@@ -20324,7 +21806,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 +21816,7 @@
             "small",
             "strong",
             "label",
+            "h1",
             "h2",
             "h3",
             "h4",
@@ -20407,11 +21890,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 +21941,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 +21951,7 @@
             "small",
             "strong",
             "label",
+            "h1",
             "h2",
             "h3",
             "h4",
@@ -20530,11 +22018,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 +22083,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": {}
@@ -20791,6 +22283,12 @@
           {
             "name": "--ui-surface-elevated"
           },
+          {
+            "name": "--ui-surface-highlight",
+            "fallbacks": [
+              "none"
+            ]
+          },
           {
             "name": "--ui-surface-muted"
           },
@@ -21600,7 +23098,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 +23129,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 +23172,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 +23220,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 +23248,12 @@
           {
             "name": "--ui-surface-elevated"
           },
+          {
+            "name": "--ui-surface-separation",
+            "fallbacks": [
+              "0"
+            ]
+          },
           {
             "name": "--ui-text-primary"
           }