@threadlabs/looma 0.34.0 → 0.35.1

package/docs/catalog.json

@@ -245,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",
@@ -438,7 +443,7 @@
   ],
   "schemaVersion": 1,
   "package": "@threadlabs/looma",
-  "version": "0.34.0",
+  "version": "0.35.1",
   "groups": [
     {
       "id": "layout",
@@ -1155,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))",
@@ -1195,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      )"
             ]
           },
           {
@@ -1215,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)"
             ]
           },
           {
@@ -1241,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))"
             ]
           },
@@ -1330,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      ))"
             ]
           },
           {
@@ -1340,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))"
             ]
           }
         ],
@@ -1474,6 +1479,9 @@
           {
             "name": "--ui-surface-default"
           },
+          {
+            "name": "--ui-surface-raised"
+          },
           {
             "name": "--ui-surface-subtle"
           },
@@ -1932,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)"
             ]
           },
           {
@@ -1942,6 +1951,7 @@
             ],
             "fallbacks": [
               "var(--ui-border)",
+              "var(--ui-control-border)",
               "var(--ui-control-border, var(--ui-border-strong))"
             ]
           },
@@ -1989,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))"
             ]
           },
@@ -2038,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))"
             ]
           },
@@ -2047,6 +2059,7 @@
               "var(--_hue-text)"
             ],
             "fallbacks": [
+              "var(--ui-text)",
               "var(--ui-text-primary)"
             ]
           },
@@ -2064,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"
           },
@@ -2175,6 +2200,18 @@
               "var(--ui-danger-hover)"
             ]
           },
+          {
+            "name": "--ui-danger-glow",
+            "fallbacks": [
+              "0 0 transparent"
+            ]
+          },
+          {
+            "name": "--ui-danger-highlight",
+            "fallbacks": [
+              "none"
+            ]
+          },
           {
             "name": "--ui-danger-hover"
           },
@@ -2229,6 +2266,18 @@
           {
             "name": "--ui-info-active"
           },
+          {
+            "name": "--ui-info-glow",
+            "fallbacks": [
+              "0 0 transparent"
+            ]
+          },
+          {
+            "name": "--ui-info-highlight",
+            "fallbacks": [
+              "none"
+            ]
+          },
           {
             "name": "--ui-info-hover"
           },
@@ -2256,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"
           },
@@ -2304,6 +2374,18 @@
           {
             "name": "--ui-success-active"
           },
+          {
+            "name": "--ui-success-glow",
+            "fallbacks": [
+              "0 0 transparent"
+            ]
+          },
+          {
+            "name": "--ui-success-highlight",
+            "fallbacks": [
+              "none"
+            ]
+          },
           {
             "name": "--ui-success-hover"
           },
@@ -2319,6 +2401,12 @@
           {
             "name": "--ui-surface-elevated"
           },
+          {
+            "name": "--ui-surface-highlight",
+            "fallbacks": [
+              "none"
+            ]
+          },
           {
             "name": "--ui-text"
           },
@@ -2334,6 +2422,18 @@
           {
             "name": "--ui-warning-active"
           },
+          {
+            "name": "--ui-warning-glow",
+            "fallbacks": [
+              "0 0 transparent"
+            ]
+          },
+          {
+            "name": "--ui-warning-highlight",
+            "fallbacks": [
+              "none"
+            ]
+          },
           {
             "name": "--ui-warning-hover"
           },
@@ -3064,7 +3164,7 @@
       "tag": "ui-card",
       "package": "@threadlabs/looma",
       "root": "div",
-      "description": "A surface that groups content with shared spacing, corners and material. Choose outlined, subtle, elevated or glass; content stays readable as the surrounding material changes.",
+      "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"
@@ -3074,9 +3174,6 @@
           {
             "name": "--ui-accent"
           },
-          {
-            "name": "--ui-accent-line-width"
-          },
           {
             "name": "--ui-border-default"
           },
@@ -3116,6 +3213,12 @@
               "var(--ui-surface-raised)"
             ]
           },
+          {
+            "name": "--ui-material-glow",
+            "fallbacks": [
+              "0 0 transparent"
+            ]
+          },
           {
             "name": "--ui-radius-lg"
           },
@@ -3146,6 +3249,12 @@
           {
             "name": "--ui-surface-default"
           },
+          {
+            "name": "--ui-surface-highlight",
+            "fallbacks": [
+              "linear-gradient(transparent, transparent)"
+            ]
+          },
           {
             "name": "--ui-surface-muted"
           },
@@ -3209,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": [
@@ -3221,17 +3330,27 @@
             "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. glass frames an opaque readable content plane with frosted material; shared glassiness and surface separation govern its treatment.",
+          "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": [
             "outlined",
             "subtle",
-            "elevated",
-            "glass"
+            "elevated"
           ]
         }
       ],
@@ -3274,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": [
@@ -3286,16 +3405,25 @@
             "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. glass frames an opaque readable content plane with frosted material; shared glassiness and surface separation govern its treatment.",
-          "type": "\"outlined\" | \"subtle\" | \"elevated\" | \"glass\"",
+          "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": [
             "outlined",
             "subtle",
-            "elevated",
-            "glass"
+            "elevated"
           ]
         }
       ],
@@ -3329,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": "",
@@ -3346,11 +3474,11 @@
           "frameworks": {}
         },
         {
-          "id": "@threadlabs/looma/ui-card/04-glass",
-          "name": "04-glass",
-          "title": "Glass panel",
-          "description": "Glassiness and surface separation shape the frame while the content plane stays readable. Choose Bookish in the customizer to see the frosted edge.",
-          "markup": "<ui-card variant=\"glass\">\n  <ui-text variant=\"eyebrow\" tone=\"secondary\">Fellowship office</ui-text>\n  <ui-text variant=\"heading\" as=\"h2\">Second breakfast briefing</ui-text>\n  <ui-text>Sam has prepared the agenda. Frodo is bringing the maps, and Sméagol has volunteered to take minutes.</ui-text>\n  <ui-cluster><ui-button preset=\"primary\">Join briefing</ui-button><ui-button preset=\"quiet\">Read agenda</ui-button></ui-cluster>\n</ui-card>",
+          "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": {}
@@ -3388,6 +3516,12 @@
           }
         ],
         "shared": [
+          {
+            "name": "--ui-accent-highlight",
+            "fallbacks": [
+              "none"
+            ]
+          },
           {
             "name": "--ui-accent-solid"
           },
@@ -3493,6 +3627,12 @@
           {
             "name": "--ui-surface-default"
           },
+          {
+            "name": "--ui-surface-highlight",
+            "fallbacks": [
+              "none"
+            ]
+          },
           {
             "name": "--ui-text-on-accent"
           },
@@ -7003,7 +7143,7 @@
             "name": "--ui-dialog-shadow",
             "fallbacks": [
               "var(--ui-overlay-shadow, var(--ui-elevation-dialog, var(--ui-shadow-xl)))",
-              "var(\n          --ui-overlay-shadow,\n          0 calc(var(--_ui-material-separation) * var(--_ui-material-scale, 1) * 8px) calc(\n            var(--_ui-material-separation) * var(--_ui-material-scale, 1) * 24px\n          ) color-mix(in oklab, var(--ui-text-primary) 15%, transparent),\n          inset 0 0 0 calc(var(--_ui-material-active) * var(--ui-border-width)) var(--ui-material-edge, var(--ui-border-strong)),\n          var(--ui-elevation-dialog, var(--ui-shadow-xl))\n        )"
+              "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        )"
             ]
           },
           {
@@ -7078,6 +7218,12 @@
               "var(--ui-surface-elevated)"
             ]
           },
+          {
+            "name": "--ui-material-glow",
+            "fallbacks": [
+              "0 0 transparent"
+            ]
+          },
           {
             "name": "--ui-motion-base"
           },
@@ -7106,7 +7252,7 @@
             "name": "--ui-overlay-shadow",
             "fallbacks": [
               "var(--ui-elevation-dialog, var(--ui-shadow-xl))",
-              "0 calc(var(--_ui-material-separation) * var(--_ui-material-scale, 1) * 8px) calc(\n            var(--_ui-material-separation) * var(--_ui-material-scale, 1) * 24px\n          ) color-mix(in oklab, var(--ui-text-primary) 15%, transparent),\n          inset 0 0 0 calc(var(--_ui-material-active) * var(--ui-border-width)) var(--ui-material-edge, var(--ui-border-strong)),\n          var(--ui-elevation-dialog, var(--ui-shadow-xl))"
+              "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))"
             ]
           },
           {
@@ -7142,6 +7288,12 @@
           {
             "name": "--ui-surface-elevated"
           },
+          {
+            "name": "--ui-surface-highlight",
+            "fallbacks": [
+              "linear-gradient(transparent, transparent)"
+            ]
+          },
           {
             "name": "--ui-surface-muted"
           },
@@ -12299,6 +12451,18 @@
           }
         ],
         "shared": [
+          {
+            "name": "--ui-accent-glow",
+            "fallbacks": [
+              "0 0 transparent"
+            ]
+          },
+          {
+            "name": "--ui-accent-highlight",
+            "fallbacks": [
+              "none"
+            ]
+          },
           {
             "name": "--ui-accent-hover"
           },
@@ -12380,6 +12544,18 @@
           {
             "name": "--ui-danger"
           },
+          {
+            "name": "--ui-danger-glow",
+            "fallbacks": [
+              "0 0 transparent"
+            ]
+          },
+          {
+            "name": "--ui-danger-highlight",
+            "fallbacks": [
+              "none"
+            ]
+          },
           {
             "name": "--ui-danger-hover"
           },
@@ -12419,6 +12595,18 @@
           {
             "name": "--ui-info"
           },
+          {
+            "name": "--ui-info-glow",
+            "fallbacks": [
+              "0 0 transparent"
+            ]
+          },
+          {
+            "name": "--ui-info-highlight",
+            "fallbacks": [
+              "none"
+            ]
+          },
           {
             "name": "--ui-info-hover"
           },
@@ -12443,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": [
@@ -12461,6 +12667,18 @@
           {
             "name": "--ui-success"
           },
+          {
+            "name": "--ui-success-glow",
+            "fallbacks": [
+              "0 0 transparent"
+            ]
+          },
+          {
+            "name": "--ui-success-highlight",
+            "fallbacks": [
+              "none"
+            ]
+          },
           {
             "name": "--ui-success-hover"
           },
@@ -12473,6 +12691,15 @@
           {
             "name": "--ui-surface-default"
           },
+          {
+            "name": "--ui-surface-highlight",
+            "fallbacks": [
+              "none"
+            ]
+          },
+          {
+            "name": "--ui-text"
+          },
           {
             "name": "--ui-text-on-accent"
           },
@@ -12485,6 +12712,18 @@
           {
             "name": "--ui-warning"
           },
+          {
+            "name": "--ui-warning-glow",
+            "fallbacks": [
+              "0 0 transparent"
+            ]
+          },
+          {
+            "name": "--ui-warning-highlight",
+            "fallbacks": [
+              "none"
+            ]
+          },
           {
             "name": "--ui-warning-hover"
           },
@@ -13284,6 +13523,12 @@
           {
             "name": "--ui-surface-elevated"
           },
+          {
+            "name": "--ui-surface-highlight",
+            "fallbacks": [
+              "none"
+            ]
+          },
           {
             "name": "--ui-surface-muted"
           },
@@ -13633,6 +13878,12 @@
           {
             "name": "--ui-surface-elevated"
           },
+          {
+            "name": "--ui-surface-highlight",
+            "fallbacks": [
+              "none"
+            ]
+          },
           {
             "name": "--ui-surface-muted"
           },
@@ -13817,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",
@@ -14657,7 +15131,7 @@
             "name": "--ui-menu-shadow",
             "fallbacks": [
               "var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))",
-              "var(\n          --ui-overlay-shadow,\n          0 calc(var(--_ui-material-separation) * var(--_ui-material-scale, 0.28) * 8px) calc(\n            var(--_ui-material-separation) * var(--_ui-material-scale, 0.28) * 24px\n          ) color-mix(in oklab, var(--ui-text-primary) 15%, transparent),\n          inset 0 0 0 calc(var(--_ui-material-active) * var(--ui-border-width)) var(--ui-material-edge, var(--ui-border-strong)),\n          var(--ui-elevation-overlay, var(--ui-shadow-lg))\n        )"
+              "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        )"
             ]
           },
           {
@@ -14720,6 +15194,12 @@
               "var(--ui-surface-elevated)"
             ]
           },
+          {
+            "name": "--ui-material-glow",
+            "fallbacks": [
+              "0 0 transparent"
+            ]
+          },
           {
             "name": "--ui-motion-ease"
           },
@@ -14742,7 +15222,7 @@
             "name": "--ui-overlay-shadow",
             "fallbacks": [
               "var(--ui-elevation-overlay, var(--ui-shadow-lg))",
-              "0 calc(var(--_ui-material-separation) * var(--_ui-material-scale, 0.28) * 8px) calc(\n            var(--_ui-material-separation) * var(--_ui-material-scale, 0.28) * 24px\n          ) color-mix(in oklab, var(--ui-text-primary) 15%, transparent),\n          inset 0 0 0 calc(var(--_ui-material-active) * var(--ui-border-width)) var(--ui-material-edge, var(--ui-border-strong)),\n          var(--ui-elevation-overlay, var(--ui-shadow-lg))"
+              "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))"
             ]
           },
           {
@@ -14772,6 +15252,12 @@
           {
             "name": "--ui-surface-elevated"
           },
+          {
+            "name": "--ui-surface-highlight",
+            "fallbacks": [
+              "linear-gradient(transparent, transparent)"
+            ]
+          },
           {
             "name": "--ui-surface-separation",
             "fallbacks": [
@@ -16515,7 +17001,7 @@
             "name": "--ui-popover-shadow",
             "fallbacks": [
               "var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))",
-              "var(\n          --ui-overlay-shadow,\n          0 calc(var(--_ui-material-separation) * var(--_ui-material-scale, 0.55) * 8px) calc(\n            var(--_ui-material-separation) * var(--_ui-material-scale, 0.55) * 24px\n          ) color-mix(in oklab, var(--ui-text-primary) 15%, transparent),\n          inset 0 0 0 calc(var(--_ui-material-active) * var(--ui-border-width)) var(--ui-material-edge, var(--ui-border-strong)),\n          var(--ui-elevation-overlay, var(--ui-shadow-lg))\n        )"
+              "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        )"
             ]
           },
           {
@@ -16569,6 +17055,12 @@
               "var(--ui-surface-elevated)"
             ]
           },
+          {
+            "name": "--ui-material-glow",
+            "fallbacks": [
+              "0 0 transparent"
+            ]
+          },
           {
             "name": "--ui-motion-ease"
           },
@@ -16591,7 +17083,7 @@
             "name": "--ui-overlay-shadow",
             "fallbacks": [
               "var(--ui-elevation-overlay, var(--ui-shadow-lg))",
-              "0 calc(var(--_ui-material-separation) * var(--_ui-material-scale, 0.55) * 8px) calc(\n            var(--_ui-material-separation) * var(--_ui-material-scale, 0.55) * 24px\n          ) color-mix(in oklab, var(--ui-text-primary) 15%, transparent),\n          inset 0 0 0 calc(var(--_ui-material-active) * var(--ui-border-width)) var(--ui-material-edge, var(--ui-border-strong)),\n          var(--ui-elevation-overlay, var(--ui-shadow-lg))"
+              "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))"
             ]
           },
           {
@@ -16615,6 +17107,12 @@
           {
             "name": "--ui-surface-elevated"
           },
+          {
+            "name": "--ui-surface-highlight",
+            "fallbacks": [
+              "linear-gradient(transparent, transparent)"
+            ]
+          },
           {
             "name": "--ui-surface-separation",
             "fallbacks": [
@@ -17472,7 +17970,7 @@
         {
           "name": "snap",
           "property": "snap",
-          "description": "Snaps scrolling to items: start comes to rest with an item's start edge at the reel's start, and center with an item centred in the reel. Unset, the reel scrolls freely.",
+          "description": "Snaps scrolling to items: start comes to rest with an item's start edge at the reel's start, and center with an item centred in the reel. Unset, the reel scrolls freely. Wrap a component item in a plain element when snapping: the wrapper receives snap alignment while the component keeps ownership of its root styles.",
           "type": "keyword",
           "options": [
             "start",
@@ -17505,7 +18003,7 @@
         },
         {
           "name": "snap",
-          "description": "Snaps scrolling to items: start comes to rest with an item's start edge at the reel's start, and center with an item centred in the reel. Unset, the reel scrolls freely.",
+          "description": "Snaps scrolling to items: start comes to rest with an item's start edge at the reel's start, and center with an item centred in the reel. Unset, the reel scrolls freely. Wrap a component item in a plain element when snapping: the wrapper receives snap alignment while the component keeps ownership of its root styles.",
           "type": "\"start\" | \"center\"",
           "options": [
             "start",
@@ -17533,8 +18031,8 @@
           "id": "@threadlabs/looma/ui-reel/01-default",
           "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  <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>",
+          "description": "Scroll through the office desks. Small fixed-width items overflow the preview and scroll freely.",
+          "markup": "<ui-reel item-width=\"sm\" aria-label=\"Fellowship office desks\">\n  <div><ui-card padding=\"sm\">Frodo</ui-card></div>\n  <div><ui-card padding=\"sm\">Sam</ui-card></div>\n  <div><ui-card padding=\"sm\">Sméagol</ui-card></div>\n  <div><ui-card padding=\"sm\">Merry</ui-card></div>\n  <div><ui-card padding=\"sm\">Pippin</ui-card></div>\n  <div><ui-card padding=\"sm\">Gandalf</ui-card></div>\n  <div><ui-card padding=\"sm\">Aragorn</ui-card></div>\n  <div><ui-card padding=\"sm\">Legolas</ui-card></div>\n</ui-reel>",
           "resizable": false,
           "bindings": "",
           "frameworks": {}
@@ -17543,8 +18041,8 @@
           "id": "@threadlabs/looma/ui-reel/02-gap-item-width-and-snap",
           "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  <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>",
+          "description": "Scroll the office desks sideways: medium-width items snap to the center when you release.",
+          "markup": "<ui-reel gap=\"m\" item-width=\"md\" snap=\"center\" aria-label=\"Fellowship office desks\">\n  <div><ui-card padding=\"sm\">Frodo</ui-card></div>\n  <div><ui-card padding=\"sm\">Sam</ui-card></div>\n  <div><ui-card padding=\"sm\">Sméagol</ui-card></div>\n  <div><ui-card padding=\"sm\">Merry</ui-card></div>\n  <div><ui-card padding=\"sm\">Pippin</ui-card></div>\n  <div><ui-card padding=\"sm\">Gandalf</ui-card></div>\n  <div><ui-card padding=\"sm\">Aragorn</ui-card></div>\n  <div><ui-card padding=\"sm\">Legolas</ui-card></div>\n</ui-reel>",
           "resizable": false,
           "bindings": "",
           "frameworks": {}
@@ -18691,6 +19189,12 @@
           {
             "name": "--ui-surface-elevated"
           },
+          {
+            "name": "--ui-surface-highlight",
+            "fallbacks": [
+              "linear-gradient(transparent, transparent)"
+            ]
+          },
           {
             "name": "--ui-surface-muted"
           },
@@ -18969,8 +19473,8 @@
           "id": "@threadlabs/looma/ui-separator/01-default-horizontal",
           "name": "01-default-horizontal",
           "title": "Default horizontal",
-          "description": "With orientation omitted, Separator renders horizontally.",
-          "markup": "<div>\n  <span>Above</span>\n  <ui-separator> </ui-separator>\n  <span>Below</span>\n</div>",
+          "description": "Stack supplies breathing room around a horizontal divider.",
+          "markup": "<ui-stack gap=\"s\">\n  <span>Above</span>\n  <ui-separator> </ui-separator>\n  <span>Below</span>\n</ui-stack>",
           "resizable": false,
           "bindings": "",
           "frameworks": {}
@@ -18980,7 +19484,7 @@
           "name": "02-orientation-vertical",
           "title": "orientation=\"vertical\"",
           "description": "Vertical orientation divides inline content; the parent supplies the row layout and height.",
-          "markup": "<div style=\"display: flex; align-items: center; height: 3rem; gap: 1rem\">\n  <span>Before</span>\n  <ui-separator orientation=\"vertical\"> </ui-separator>\n  <span>After</span>\n</div>",
+          "markup": "<ui-cluster gap=\"s\">\n  <span>Before</span>\n  <ui-separator orientation=\"vertical\"> </ui-separator>\n  <span>After</span>\n</ui-cluster>",
           "resizable": false,
           "bindings": "",
           "frameworks": {}
@@ -20199,6 +20703,12 @@
           }
         ],
         "shared": [
+          {
+            "name": "--ui-accent-highlight",
+            "fallbacks": [
+              "none"
+            ]
+          },
           {
             "name": "--ui-accent-solid"
           },
@@ -20289,6 +20799,12 @@
           {
             "name": "--ui-surface-default"
           },
+          {
+            "name": "--ui-surface-highlight",
+            "fallbacks": [
+              "none"
+            ]
+          },
           {
             "name": "--ui-text-on-accent"
           },
@@ -21767,6 +22283,12 @@
           {
             "name": "--ui-surface-elevated"
           },
+          {
+            "name": "--ui-surface-highlight",
+            "fallbacks": [
+              "none"
+            ]
+          },
           {
             "name": "--ui-surface-muted"
           },