@threadlabs/looma 0.41.2 → 0.42.0

package/docs/catalog.json

@@ -463,7 +463,7 @@
   ],
   "schemaVersion": 1,
   "package": "@threadlabs/looma",
-  "version": "0.41.2",
+  "version": "0.42.0",
   "groups": [
     {
       "id": "layout",
@@ -484,6 +484,10 @@
     {
       "id": "editor",
       "label": "Editor"
+    },
+    {
+      "id": "extras",
+      "label": "Extras"
     }
   ],
   "components": [
@@ -1960,14 +1964,20 @@
           {
             "name": "--ui-button-active-surface",
             "fallbacks": [
-              "oklch(from var(--_tone) l c h / 18%)",
+              "oklch(from var(--_tone) l c h / calc(18% * var(--ui-tonal-opacity, 1)))",
               "var(--ui-neutral-active)"
             ]
           },
           {
             "name": "--ui-button-border",
             "declarations": [
-              "var(--_hue)"
+              "var(--_hue-text)",
+              "var(--ui-accent-border, var(--ui-accent))",
+              "var(--ui-neutral-border, var(--ui-neutral-surface))",
+              "var(--ui-danger-border, var(--ui-danger))",
+              "var(--ui-success-border, var(--ui-success))",
+              "var(--ui-warning-border, var(--ui-warning))",
+              "var(--ui-info-border, var(--ui-info))"
             ],
             "fallbacks": [
               "var(--ui-border)",
@@ -1996,7 +2006,7 @@
           {
             "name": "--ui-button-ghost-hover-surface",
             "fallbacks": [
-              "oklch(from var(--_tone) l c h / 10%)"
+              "oklch(from var(--_tone) l c h / calc(10% * var(--ui-tonal-opacity, 1)))"
             ]
           },
           {
@@ -2008,7 +2018,13 @@
           {
             "name": "--ui-button-hover-border",
             "declarations": [
-              "var(--_hue-hover)"
+              "var(--_hue-text)",
+              "var(--ui-accent-hover-border, var(--ui-accent-hover))",
+              "var(--ui-neutral-hover-border, var(--ui-neutral-hover))",
+              "var(--ui-danger-hover-border, var(--ui-danger-hover))",
+              "var(--ui-success-hover-border, var(--ui-success-hover))",
+              "var(--ui-warning-hover-border, var(--ui-warning-hover))",
+              "var(--ui-info-hover-border, var(--ui-info-hover))"
             ],
             "fallbacks": [
               "var(--ui-border-strong)",
@@ -2019,7 +2035,7 @@
           {
             "name": "--ui-button-hover-surface",
             "fallbacks": [
-              "oklch(from var(--_tone) l c h / 12%)",
+              "oklch(from var(--_tone) l c h / calc(12% * var(--ui-tonal-opacity, 1)))",
               "var(--ui-neutral-hover)",
               "var(--ui-control-surface, var(--ui-surface-elevated))"
             ]
@@ -2069,7 +2085,7 @@
           {
             "name": "--ui-button-surface",
             "fallbacks": [
-              "oklch(from var(--_tone) l c h / 5%)",
+              "oklch(from var(--_tone) l c h / calc(5% * var(--ui-tonal-opacity, 1)))",
               "var(--ui-neutral-surface)",
               "transparent",
               "var(--ui-control-surface, var(--ui-surface-elevated))"
@@ -2099,6 +2115,18 @@
           {
             "name": "--ui-accent-active"
           },
+          {
+            "name": "--ui-accent-active-border",
+            "fallbacks": [
+              "var(--ui-accent-active)"
+            ]
+          },
+          {
+            "name": "--ui-accent-border",
+            "fallbacks": [
+              "var(--ui-accent)"
+            ]
+          },
           {
             "name": "--ui-accent-glow",
             "fallbacks": [
@@ -2114,9 +2142,18 @@
           {
             "name": "--ui-accent-hover"
           },
+          {
+            "name": "--ui-accent-hover-border",
+            "fallbacks": [
+              "var(--ui-accent-hover)"
+            ]
+          },
           {
             "name": "--ui-accent-solid"
           },
+          {
+            "name": "--ui-accent-subtle-text"
+          },
           {
             "name": "--ui-action-edge",
             "fallbacks": [
@@ -2223,6 +2260,18 @@
               "var(--ui-danger-hover)"
             ]
           },
+          {
+            "name": "--ui-danger-active-border",
+            "fallbacks": [
+              "var(--ui-danger-active)"
+            ]
+          },
+          {
+            "name": "--ui-danger-border",
+            "fallbacks": [
+              "var(--ui-danger)"
+            ]
+          },
           {
             "name": "--ui-danger-glow",
             "fallbacks": [
@@ -2238,6 +2287,12 @@
           {
             "name": "--ui-danger-hover"
           },
+          {
+            "name": "--ui-danger-hover-border",
+            "fallbacks": [
+              "var(--ui-danger-hover)"
+            ]
+          },
           {
             "name": "--ui-danger-subtle-text"
           },
@@ -2289,6 +2344,18 @@
           {
             "name": "--ui-info-active"
           },
+          {
+            "name": "--ui-info-active-border",
+            "fallbacks": [
+              "var(--ui-info-active)"
+            ]
+          },
+          {
+            "name": "--ui-info-border",
+            "fallbacks": [
+              "var(--ui-info)"
+            ]
+          },
           {
             "name": "--ui-info-glow",
             "fallbacks": [
@@ -2304,6 +2371,12 @@
           {
             "name": "--ui-info-hover"
           },
+          {
+            "name": "--ui-info-hover-border",
+            "fallbacks": [
+              "var(--ui-info-hover)"
+            ]
+          },
           {
             "name": "--ui-info-on-strong"
           },
@@ -2331,6 +2404,18 @@
           {
             "name": "--ui-neutral-active"
           },
+          {
+            "name": "--ui-neutral-active-border",
+            "fallbacks": [
+              "var(--ui-neutral-active)"
+            ]
+          },
+          {
+            "name": "--ui-neutral-border",
+            "fallbacks": [
+              "var(--ui-neutral-surface)"
+            ]
+          },
           {
             "name": "--ui-neutral-glow",
             "fallbacks": [
@@ -2346,6 +2431,12 @@
           {
             "name": "--ui-neutral-hover"
           },
+          {
+            "name": "--ui-neutral-hover-border",
+            "fallbacks": [
+              "var(--ui-neutral-hover)"
+            ]
+          },
           {
             "name": "--ui-neutral-surface"
           },
@@ -2406,6 +2497,18 @@
           {
             "name": "--ui-success-active"
           },
+          {
+            "name": "--ui-success-active-border",
+            "fallbacks": [
+              "var(--ui-success-active)"
+            ]
+          },
+          {
+            "name": "--ui-success-border",
+            "fallbacks": [
+              "var(--ui-success)"
+            ]
+          },
           {
             "name": "--ui-success-glow",
             "fallbacks": [
@@ -2421,6 +2524,12 @@
           {
             "name": "--ui-success-hover"
           },
+          {
+            "name": "--ui-success-hover-border",
+            "fallbacks": [
+              "var(--ui-success-hover)"
+            ]
+          },
           {
             "name": "--ui-success-on-strong"
           },
@@ -2448,12 +2557,30 @@
           {
             "name": "--ui-text-secondary"
           },
+          {
+            "name": "--ui-tonal-opacity",
+            "fallbacks": [
+              "1"
+            ]
+          },
           {
             "name": "--ui-warning"
           },
           {
             "name": "--ui-warning-active"
           },
+          {
+            "name": "--ui-warning-active-border",
+            "fallbacks": [
+              "var(--ui-warning-active)"
+            ]
+          },
+          {
+            "name": "--ui-warning-border",
+            "fallbacks": [
+              "var(--ui-warning)"
+            ]
+          },
           {
             "name": "--ui-warning-glow",
             "fallbacks": [
@@ -2469,6 +2596,12 @@
           {
             "name": "--ui-warning-hover"
           },
+          {
+            "name": "--ui-warning-hover-border",
+            "fallbacks": [
+              "var(--ui-warning-hover)"
+            ]
+          },
           {
             "name": "--ui-warning-on-strong"
           },
@@ -3017,10 +3150,10 @@
         ],
         "shared": [
           {
-            "name": "--ui-accent-active"
+            "name": "--ui-accent-solid"
           },
           {
-            "name": "--ui-accent-solid"
+            "name": "--ui-accent-subtle-text"
           },
           {
             "name": "--ui-border-strong"
@@ -3348,7 +3481,7 @@
         {
           "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.",
+          "description": "How much of the theme's decorative material the surface expresses. standard preserves its restrained treatment; expressive uses the full material treatment. Its glass rim can transmit and frost the surrounding scene while content remains opaque. Surface separation controls the rim, independently of frosting. This does not add elevation or require glass.",
           "type": "keyword",
           "default": "standard",
           "options": [
@@ -3422,7 +3555,7 @@
         },
         {
           "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.",
+          "description": "How much of the theme's decorative material the surface expresses. standard preserves its restrained treatment; expressive uses the full material treatment. Its glass rim can transmit and frost the surrounding scene while content remains opaque. Surface separation controls the rim, independently of frosting. This does not add elevation or require glass.",
           "type": "\"standard\" | \"expressive\"",
           "default": "standard",
           "options": [
@@ -9872,27 +10005,21 @@
         ],
         "component": [],
         "shared": [
-          {
-            "name": "--ui-accent-active",
-            "fallbacks": [
-              "var(--ui-accent-solid)"
-            ]
-          },
           {
             "name": "--ui-accent-soft",
             "fallbacks": [
               "var(--ui-accent-subtle)"
             ]
           },
-          {
-            "name": "--ui-accent-solid"
-          },
           {
             "name": "--ui-accent-subtle",
             "fallbacks": [
               "rgb(59 130 246 / 0.1)"
             ]
           },
+          {
+            "name": "--ui-accent-subtle-text"
+          },
           {
             "name": "--ui-border-divider"
           },
@@ -10270,15 +10397,15 @@
         ],
         "component": [],
         "shared": [
-          {
-            "name": "--ui-accent-active"
-          },
           {
             "name": "--ui-accent-soft"
           },
           {
             "name": "--ui-accent-subtle"
           },
+          {
+            "name": "--ui-accent-subtle-text"
+          },
           {
             "name": "--ui-font-medium"
           },
@@ -11074,7 +11201,7 @@
             "name": "--ui-border-width"
           },
           {
-            "name": "--ui-danger"
+            "name": "--ui-danger-subtle-text"
           },
           {
             "name": "--ui-editor-toolbar-icon-stroke-width",
@@ -11725,9 +11852,6 @@
         ],
         "component": [],
         "shared": [
-          {
-            "name": "--ui-accent-active"
-          },
           {
             "name": "--ui-accent-soft",
             "fallbacks": [
@@ -11737,6 +11861,9 @@
           {
             "name": "--ui-accent-subtle"
           },
+          {
+            "name": "--ui-accent-subtle-text"
+          },
           {
             "name": "--ui-border"
           },
@@ -11752,6 +11879,9 @@
           {
             "name": "--ui-danger"
           },
+          {
+            "name": "--ui-danger-subtle-text"
+          },
           {
             "name": "--ui-editor-toolbar-icon-size",
             "fallbacks": [
@@ -12539,6 +12669,14 @@
           },
           {
             "name": "--ui-icon-button-active-surface",
+            "declarations": [
+              "var(--ui-accent-active, var(--ui-accent-hover))",
+              "var(--ui-danger-active, var(--ui-danger-hover))",
+              "var(--ui-success-active, var(--ui-success-hover))",
+              "var(--ui-warning-active, var(--ui-warning-hover))",
+              "var(--ui-info-active, var(--ui-info-hover))",
+              "var(--ui-neutral-active, var(--ui-neutral-hover))"
+            ],
             "fallbacks": [
               "var(--ui-neutral-active)",
               "color-mix(in srgb, currentColor 16%, transparent)",
@@ -12547,6 +12685,15 @@
           },
           {
             "name": "--ui-icon-button-border",
+            "declarations": [
+              "var(--ui-accent-border, var(--ui-accent-solid))",
+              "var(--ui-accent-border, var(--ui-accent))",
+              "var(--ui-danger-border, var(--ui-danger))",
+              "var(--ui-success-border, var(--ui-success))",
+              "var(--ui-warning-border, var(--ui-warning))",
+              "var(--ui-info-border, var(--ui-info))",
+              "var(--ui-neutral-border, var(--ui-neutral-surface))"
+            ],
             "fallbacks": [
               "var(--_icon-button-border, var(--ui-control-border, var(--ui-border-strong)))"
             ]
@@ -12565,6 +12712,14 @@
           },
           {
             "name": "--ui-icon-button-hover-border",
+            "declarations": [
+              "var(--ui-accent-hover-border, var(--ui-accent-hover))",
+              "var(--ui-danger-hover-border, var(--ui-danger-hover))",
+              "var(--ui-success-hover-border, var(--ui-success-hover))",
+              "var(--ui-warning-hover-border, var(--ui-warning-hover))",
+              "var(--ui-info-hover-border, var(--ui-info-hover))",
+              "var(--ui-neutral-hover-border, var(--ui-neutral-hover))"
+            ],
             "fallbacks": [
               "var(--_icon-button-hover-border, var(--ui-control-border-hover, var(--ui-control-border)))"
             ]
@@ -12657,6 +12812,28 @@
           }
         ],
         "shared": [
+          {
+            "name": "--ui-accent"
+          },
+          {
+            "name": "--ui-accent-active",
+            "fallbacks": [
+              "var(--ui-accent-hover)"
+            ]
+          },
+          {
+            "name": "--ui-accent-active-border",
+            "fallbacks": [
+              "var(--ui-accent-active)"
+            ]
+          },
+          {
+            "name": "--ui-accent-border",
+            "fallbacks": [
+              "var(--ui-accent-solid)",
+              "var(--ui-accent)"
+            ]
+          },
           {
             "name": "--ui-accent-glow",
             "fallbacks": [
@@ -12672,6 +12849,12 @@
           {
             "name": "--ui-accent-hover"
           },
+          {
+            "name": "--ui-accent-hover-border",
+            "fallbacks": [
+              "var(--ui-accent-hover)"
+            ]
+          },
           {
             "name": "--ui-accent-solid"
           },
@@ -12750,6 +12933,24 @@
           {
             "name": "--ui-danger"
           },
+          {
+            "name": "--ui-danger-active",
+            "fallbacks": [
+              "var(--ui-danger-hover)"
+            ]
+          },
+          {
+            "name": "--ui-danger-active-border",
+            "fallbacks": [
+              "var(--ui-danger-active)"
+            ]
+          },
+          {
+            "name": "--ui-danger-border",
+            "fallbacks": [
+              "var(--ui-danger)"
+            ]
+          },
           {
             "name": "--ui-danger-glow",
             "fallbacks": [
@@ -12765,6 +12966,12 @@
           {
             "name": "--ui-danger-hover"
           },
+          {
+            "name": "--ui-danger-hover-border",
+            "fallbacks": [
+              "var(--ui-danger-hover)"
+            ]
+          },
           {
             "name": "--ui-danger-on-strong"
           },
@@ -12801,6 +13008,24 @@
           {
             "name": "--ui-info"
           },
+          {
+            "name": "--ui-info-active",
+            "fallbacks": [
+              "var(--ui-info-hover)"
+            ]
+          },
+          {
+            "name": "--ui-info-active-border",
+            "fallbacks": [
+              "var(--ui-info-active)"
+            ]
+          },
+          {
+            "name": "--ui-info-border",
+            "fallbacks": [
+              "var(--ui-info)"
+            ]
+          },
           {
             "name": "--ui-info-glow",
             "fallbacks": [
@@ -12816,6 +13041,12 @@
           {
             "name": "--ui-info-hover"
           },
+          {
+            "name": "--ui-info-hover-border",
+            "fallbacks": [
+              "var(--ui-info-hover)"
+            ]
+          },
           {
             "name": "--ui-info-on-strong"
           },
@@ -12838,7 +13069,22 @@
             ]
           },
           {
-            "name": "--ui-neutral-active"
+            "name": "--ui-neutral-active",
+            "fallbacks": [
+              "var(--ui-neutral-hover)"
+            ]
+          },
+          {
+            "name": "--ui-neutral-active-border",
+            "fallbacks": [
+              "var(--ui-neutral-active)"
+            ]
+          },
+          {
+            "name": "--ui-neutral-border",
+            "fallbacks": [
+              "var(--ui-neutral-surface)"
+            ]
           },
           {
             "name": "--ui-neutral-glow",
@@ -12855,6 +13101,12 @@
           {
             "name": "--ui-neutral-hover"
           },
+          {
+            "name": "--ui-neutral-hover-border",
+            "fallbacks": [
+              "var(--ui-neutral-hover)"
+            ]
+          },
           {
             "name": "--ui-neutral-surface"
           },
@@ -12876,6 +13128,24 @@
           {
             "name": "--ui-success"
           },
+          {
+            "name": "--ui-success-active",
+            "fallbacks": [
+              "var(--ui-success-hover)"
+            ]
+          },
+          {
+            "name": "--ui-success-active-border",
+            "fallbacks": [
+              "var(--ui-success-active)"
+            ]
+          },
+          {
+            "name": "--ui-success-border",
+            "fallbacks": [
+              "var(--ui-success)"
+            ]
+          },
           {
             "name": "--ui-success-glow",
             "fallbacks": [
@@ -12891,6 +13161,12 @@
           {
             "name": "--ui-success-hover"
           },
+          {
+            "name": "--ui-success-hover-border",
+            "fallbacks": [
+              "var(--ui-success-hover)"
+            ]
+          },
           {
             "name": "--ui-success-on-strong"
           },
@@ -12921,6 +13197,24 @@
           {
             "name": "--ui-warning"
           },
+          {
+            "name": "--ui-warning-active",
+            "fallbacks": [
+              "var(--ui-warning-hover)"
+            ]
+          },
+          {
+            "name": "--ui-warning-active-border",
+            "fallbacks": [
+              "var(--ui-warning-active)"
+            ]
+          },
+          {
+            "name": "--ui-warning-border",
+            "fallbacks": [
+              "var(--ui-warning)"
+            ]
+          },
           {
             "name": "--ui-warning-glow",
             "fallbacks": [
@@ -12936,6 +13230,12 @@
           {
             "name": "--ui-warning-hover"
           },
+          {
+            "name": "--ui-warning-hover-border",
+            "fallbacks": [
+              "var(--ui-warning-hover)"
+            ]
+          },
           {
             "name": "--ui-warning-on-strong"
           },
@@ -14281,6 +14581,9 @@
           {
             "name": "--ui-accent"
           },
+          {
+            "name": "--ui-accent-subtle-text"
+          },
           {
             "name": "--ui-border"
           },
@@ -14490,7 +14793,7 @@
           "description": "Default child content."
         }
       ],
-      "group": "forms",
+      "group": "extras",
       "id": "@threadlabs/looma/ui-light-editor",
       "title": "Light Editor",
       "resource": "@threadlabs/looma/components/ui-light-editor/ui-light-editor.html",
@@ -15947,7 +16250,7 @@
             ]
           },
           {
-            "name": "--ui-danger"
+            "name": "--ui-danger-subtle-text"
           },
           {
             "name": "--ui-disabled-border"
@@ -17895,18 +18198,51 @@
           }
         ],
         "shared": [
+          {
+            "name": "--ui-accent-highlight",
+            "fallbacks": [
+              "none"
+            ]
+          },
           {
             "name": "--ui-accent-solid"
           },
+          {
+            "name": "--ui-border-strong"
+          },
+          {
+            "name": "--ui-border-width"
+          },
           {
             "name": "--ui-choice-mark-size"
           },
+          {
+            "name": "--ui-control-border",
+            "fallbacks": [
+              "var(--ui-border-strong)"
+            ]
+          },
+          {
+            "name": "--ui-control-inset"
+          },
           {
             "name": "--ui-control-size-lg"
           },
           {
             "name": "--ui-control-size-sm"
           },
+          {
+            "name": "--ui-control-surface",
+            "fallbacks": [
+              "var(--ui-surface-default)"
+            ]
+          },
+          {
+            "name": "--ui-disabled-border"
+          },
+          {
+            "name": "--ui-disabled-surface"
+          },
           {
             "name": "--ui-disabled-text"
           },
@@ -17931,12 +18267,33 @@
           {
             "name": "--ui-line-height-md"
           },
+          {
+            "name": "--ui-motion-ease"
+          },
+          {
+            "name": "--ui-motion-fast"
+          },
+          {
+            "name": "--ui-radius-round"
+          },
           {
             "name": "--ui-space-1"
           },
           {
             "name": "--ui-space-2"
           },
+          {
+            "name": "--ui-surface-default"
+          },
+          {
+            "name": "--ui-surface-highlight",
+            "fallbacks": [
+              "none"
+            ]
+          },
+          {
+            "name": "--ui-text-on-accent"
+          },
           {
             "name": "--ui-text-primary"
           },
@@ -19339,6 +19696,9 @@
           {
             "name": "--ui-danger-soft"
           },
+          {
+            "name": "--ui-danger-subtle-text"
+          },
           {
             "name": "--ui-font-display",
             "fallbacks": [
@@ -21279,7 +21639,7 @@
             "name": "--ui-border-width"
           },
           {
-            "name": "--ui-danger"
+            "name": "--ui-danger-subtle-text"
           },
           {
             "name": "--ui-font-semibold"
@@ -21653,6 +22013,18 @@
           {
             "name": "--ui-font-size-sm"
           },
+          {
+            "name": "--ui-knob-highlight",
+            "fallbacks": [
+              "none"
+            ]
+          },
+          {
+            "name": "--ui-knob-on-accent-highlight",
+            "fallbacks": [
+              "none"
+            ]
+          },
           {
             "name": "--ui-line-height"
           },
@@ -22284,7 +22656,7 @@
             "name": "--ui-accent-line-width"
           },
           {
-            "name": "--ui-accent-solid"
+            "name": "--ui-accent-subtle-text"
           },
           {
             "name": "--ui-border-divider"
@@ -22604,7 +22976,7 @@
         ],
         "shared": [
           {
-            "name": "--ui-accent-active"
+            "name": "--ui-accent-subtle-text"
           },
           {
             "name": "--ui-danger-subtle-text"