@threadlabs/looma 0.37.6 → 0.39.0

package/vue/components.css

@@ -1123,8 +1123,6 @@ svg,.arc {
 /* A link is never :enabled, so interactive states test "not unavailable" instead: for a button that
    is exactly :enabled, at the same specificity, and it also matches a link that can be followed. */
 
-/* A neutral card encloses content quietly; ordinary outlines keep their action-tone edge. */
-
 /* Pressed reads as pressed in: the highlight goes, and the shadow moves inside. */
 
 /* Tone is the colour, variant is the volume. Every pairing works: a danger outline is a
@@ -1134,9 +1132,6 @@ svg,.arc {
 
 /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
 
-/* Pressed, or holding its menu open, a ghost button sinks slightly: a light surface with a faint
-   edge and a soft inner shadow. Lighter than hover, so an open menu's trigger never reads as heavy. */
-
 /* A soft halo that transitions in with the other box-shadow changes, layered on the raised shadow. */
 
 /* A loading action stays visually active; only an explicitly disabled action takes the
@@ -1334,6 +1329,11 @@ svg,.arc {
 :scope[data-appearance="card"][data-tone="neutral"]:hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button]) {
     border-color: var(--ui-button-hover-border, var(--ui-border-strong));
 }
+:scope[data-appearance="card"][aria-pressed="true"]:where([data-hn-ui-button]) {
+    background-color: var(--ui-selection-surface);
+    border-color: var(--ui-selection-border);
+    color: var(--ui-selection-text);
+}
 :scope:active:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button]) {
     scale: var(--ui-press-scale, 1);
     background-color: var(--ui-button-active-surface, oklch(from var(--_tone) l c h / 18%));
@@ -1373,6 +1373,24 @@ svg,.arc {
     background-color: var(--ui-button-surface, var(--ui-neutral-surface));
     color: var(--ui-button-text, var(--ui-text));
 }
+:scope[data-tone="neutral"][data-appearance="outline"]:where([data-hn-ui-button]) {
+    border-color: var(--ui-button-border, var(--ui-control-border));
+    background-color: var(--ui-button-surface, transparent);
+}
+:scope[data-tone="neutral"][data-appearance="outline"]:hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button]) {
+    border-color: var(
+      --ui-button-hover-border,
+      var(--ui-control-border-hover, var(--ui-control-border))
+    );
+    background-color: var(--ui-button-hover-surface, var(--ui-neutral-hover));
+}
+:scope[data-tone="neutral"][data-appearance="outline"]:active:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button]) {
+    border-color: var(
+      --ui-button-hover-border,
+      var(--ui-control-border-hover, var(--ui-control-border))
+    );
+    background-color: var(--ui-button-active-surface, var(--ui-neutral-active));
+}
 :scope[data-tone="neutral"][data-appearance="solid"]:hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button]) {
     background-color: var(--ui-button-hover-surface, var(--ui-neutral-hover));
 }
@@ -1457,10 +1475,7 @@ svg,.arc {
     border-color: transparent;
 }
 :scope[data-appearance="ghost"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button]) {
-    background-color: var(
-      --ui-button-ghost-active-surface,
-      color-mix(in oklch, var(--ui-surface), var(--_tone) 3%)
-    );
+    background-color: var(--ui-button-ghost-active-surface, oklch(from var(--_tone) l c h / 18%));
     border-color: transparent;
     box-shadow:
       inset 0 0 0 1px oklch(from var(--_tone) l c h / 10%),
@@ -2917,6 +2932,21 @@ label:where([data-hn-ui-combobox]) {
     flex: 1 1 auto;
     min-inline-size: 0;
 }
+.start:where([data-hn-ui-combobox]) {
+    display: flex !important;
+    align-items: center !important;
+    flex: none;
+    padding-inline-start: var(--ui-space-3) !important;
+}
+.start:empty:where([data-hn-ui-combobox]) {
+    display: none !important;
+}
+:scope[data-ui-combobox-state~="size=sm"] .start:where([data-hn-ui-combobox]) {
+    padding-inline-start: var(--ui-space-2) !important;
+}
+:scope[data-ui-combobox-state~="size=lg"] .start:where([data-hn-ui-combobox]) {
+    padding-inline-start: var(--ui-space-4) !important;
+}
 .help:where([data-hn-ui-combobox]) {
     flex: none;
     display: inline-flex !important;
@@ -2950,6 +2980,10 @@ label:where([data-hn-ui-combobox]) {
     inline-size: var(--ui-icon-size-sm);
     block-size: var(--ui-icon-size-sm);
 }
+:scope[data-ui-combobox-state~="muted"]
+    input:not(:disabled):where([data-hn-ui-combobox]) {
+    color: var(--ui-text-secondary);
+}
 input:where([data-hn-ui-combobox])::selection {
     background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
     color: inherit;
@@ -3041,7 +3075,7 @@ input:disabled:where([data-hn-ui-combobox]),button:disabled:where([data-hn-ui-co
     border-radius: var(--_ui-combobox-popup-radius, var(--ui-overlay-radius, var(--ui-radius-md)));
     background: var(
       --_ui-combobox-popup-surface,
-      var(--ui-overlay-surface, var(--ui-surface-elevated))
+      var(--ui-material-content, var(--ui-surface-elevated))
     );
     color: var(--ui-text-primary);
     box-shadow: var(
@@ -3237,6 +3271,23 @@ label:where(:scope, :scope *):where([data-hn-ui-combobox]) {
     flex: 1 1 auto;
     min-inline-size: 0;
 }
+.start:where(:scope, :scope *):where([data-hn-ui-combobox]) {
+    display: flex !important;
+    align-items: center !important;
+    flex: none;
+    padding-inline-start: var(--ui-space-3) !important;
+}
+.start:empty:where(:scope, :scope *):where([data-hn-ui-combobox]) {
+    display: none !important;
+}
+:where(.ui-combobox)[data-ui-combobox-state~="size=sm"]
+    .start:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox]) {
+    padding-inline-start: var(--ui-space-2) !important;
+}
+:where(.ui-combobox)[data-ui-combobox-state~="size=lg"]
+    .start:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox]) {
+    padding-inline-start: var(--ui-space-4) !important;
+}
 .help:where(:scope, :scope *):where([data-hn-ui-combobox]) {
     flex: none;
     display: inline-flex !important;
@@ -3270,6 +3321,10 @@ label:where(:scope, :scope *):where([data-hn-ui-combobox]) {
     inline-size: var(--ui-icon-size-sm);
     block-size: var(--ui-icon-size-sm);
 }
+:where(.ui-combobox)[data-ui-combobox-state~="muted"]
+    input:not(:disabled):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox]) {
+    color: var(--ui-text-secondary);
+}
 input:where(:not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where(:scope, :scope
     *):where([data-hn-ui-combobox])::selection {
     background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
@@ -3365,7 +3420,7 @@ input:disabled:where(:scope, :scope *):where([data-hn-ui-combobox]),button:disab
     border-radius: var(--_ui-combobox-popup-radius, var(--ui-overlay-radius, var(--ui-radius-md)));
     background: var(
       --_ui-combobox-popup-surface,
-      var(--ui-overlay-surface, var(--ui-surface-elevated))
+      var(--ui-material-content, var(--ui-surface-elevated))
     );
     color: var(--ui-text-primary);
     box-shadow: var(
@@ -3752,7 +3807,7 @@ input:disabled:where(:scope, :scope *):where([data-hn-ui-combobox]),button:disab
   inherits: false;
 }
 
-/* Omitted tone retains the existing accent solid; explicit neutral is additive. */
+/* Neutral actions share the same quiet surface and border roles as fields. */
 
 /* At rest an anticipatory button shows only its guide dot. The icon grows into place when
    proximity, hover, or focus reveals it; the button's hit area and guide remain stable. */
@@ -3879,6 +3934,10 @@ input:disabled:where(:scope, :scope *):where([data-hn-ui-combobox]),button:disab
 :scope[data-tone="neutral"]:where([data-hn-ui-icon-button]) {
     --_tone-highlight: var(--ui-neutral-highlight, none);
     --_tone-glow: var(--ui-neutral-glow, 0 0 transparent);
+    --_icon-button-outline-surface: transparent;
+    --_icon-button-border: var(--ui-control-border);
+    --_icon-button-hover-border: var(--ui-control-border-hover, var(--ui-control-border));
+    --_icon-button-text: var(--ui-text);
     --_icon-button-solid-surface: var(--ui-neutral-surface);
     --_icon-button-solid-hover-surface: var(--ui-neutral-hover);
     --_icon-button-solid-text: var(--ui-text);
@@ -4058,6 +4117,12 @@ html[data-ui-input-modality="touch"] :scope:where([data-hn-ui-icon-button])::aft
       var(--_icon-button-hover-border, var(--ui-control-border-hover, var(--ui-control-border)))
     );
 }
+:scope[data-tone="neutral"][data-appearance="outline"]:hover:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button]) {
+    background-color: var(--ui-icon-button-hover-surface, var(--ui-neutral-hover));
+}
+:scope[data-tone="neutral"][data-appearance="outline"]:active:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button]) {
+    background-color: var(--ui-icon-button-active-surface, var(--ui-neutral-active));
+}
 :scope[data-appearance="solid"]:hover:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button]) {
     background-color: var(
       --ui-icon-button-solid-hover-surface,
@@ -5777,7 +5842,11 @@ footer:empty:where(:scope, :scope *):where([data-hn-ui-dialog]) {
 }
 }
 :scope:is(:hover, :focus-visible):not([aria-disabled="true"]):where([data-hn-ui-menu-item]) {
-    background: var(--ui-menu-item-hover-surface, var(--ui-surface-subtle));
+    background: var(--ui-menu-item-hover-surface, var(--ui-accent-subtle));
+}
+:scope[aria-checked="true"]:not([aria-disabled="true"]):where([data-hn-ui-menu-item]) {
+    background: var(--ui-selection-surface);
+    color: var(--ui-selection-text);
 }
 :scope:focus-visible:where([data-hn-ui-menu-item]) {
     outline: var(--ui-focus-width) solid var(--ui-focus-ring);
@@ -10077,6 +10146,13 @@ dialog:where([data-hn-ui-search-shell]) {
     background-position: right var(--ui-space-3) center, center;
     background-size: 1.125rem 1.125rem, 100% 100%;
 }
+:scope[data-ui-select-state~="muted"]:where([data-hn-ui-select]) {
+    color: var(--ui-text-secondary);
+}
+:scope[data-ui-select-state~="muted"] :where(:not([data-hn-ui-select])):is(option),:scope[data-ui-select-state~="muted"] :where(:not([data-hn-ui-select])):is(optgroup) {
+    color: var(--ui-text-primary);
+    background-color: var(--ui-control-surface);
+}
 :scope:hover:not(:focus):not(:disabled):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid])):where([data-hn-ui-select]) {
     border-color: var(
       --ui-select-border-hover,
@@ -13750,7 +13826,6 @@ html[data-ui-input-modality="touch"]
       background-color: var(--ui-button-hover-surface, oklch(from var(--_tone) l c h / 12%));
     }
 
-    /* A neutral card encloses content quietly; ordinary outlines keep their action-tone edge. */
     :scope:where([data-component~="ui-button"])[data-appearance="card"][data-tone="neutral"] {
       border-color: var(--ui-button-border, var(--ui-border));
     }
@@ -13759,6 +13834,12 @@ html[data-ui-input-modality="touch"]
       border-color: var(--ui-button-hover-border, var(--ui-border-strong));
     }
 
+    :scope:where([data-component~="ui-button"])[data-appearance="card"][aria-pressed="true"] {
+      background-color: var(--ui-selection-surface);
+      border-color: var(--ui-selection-border);
+      color: var(--ui-selection-text);
+    }
+
     /* Pressed reads as pressed in: the highlight goes, and the shadow moves inside. */
     :scope:where([data-component~="ui-button"]):active:not(:disabled, [aria-disabled="true"]) {
       scale: var(--ui-press-scale, 1);
@@ -13806,6 +13887,18 @@ html[data-ui-input-modality="touch"]
       background-color: var(--ui-button-surface, var(--ui-neutral-surface));
       color: var(--ui-button-text, var(--ui-text));
     }
+    :scope:where([data-component~="ui-button"])[data-tone="neutral"][data-appearance="outline"] {
+      border-color: var(--ui-button-border, var(--ui-control-border));
+      background-color: var(--ui-button-surface, transparent);
+    }
+    :scope:where([data-component~="ui-button"])[data-tone="neutral"][data-appearance="outline"]:hover:not(:disabled, [aria-disabled="true"]) {
+      border-color: var(--ui-button-hover-border, var(--ui-control-border-hover, var(--ui-control-border)));
+      background-color: var(--ui-button-hover-surface, var(--ui-neutral-hover));
+    }
+    :scope:where([data-component~="ui-button"])[data-tone="neutral"][data-appearance="outline"]:active:not(:disabled, [aria-disabled="true"]) {
+      border-color: var(--ui-button-hover-border, var(--ui-control-border-hover, var(--ui-control-border)));
+      background-color: var(--ui-button-active-surface, var(--ui-neutral-active));
+    }
     :scope:where([data-component~="ui-button"])[data-tone="neutral"][data-appearance="solid"]:hover:not(:disabled, [aria-disabled="true"]) {
       background-color: var(--ui-button-hover-surface, var(--ui-neutral-hover));
     }
@@ -13893,10 +13986,8 @@ html[data-ui-input-modality="touch"]
       border-color: transparent;
     }
 
-    /* Pressed, or holding its menu open, a ghost button sinks slightly: a light surface with a faint
-       edge and a soft inner shadow. Lighter than hover, so an open menu's trigger never reads as heavy. */
     :scope:where([data-component~="ui-button"])[data-appearance="ghost"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
-      background-color: var(--ui-button-ghost-active-surface, color-mix(in oklch, var(--ui-surface), var(--_tone) 3%));
+      background-color: var(--ui-button-ghost-active-surface, oklch(from var(--_tone) l c h / 18%));
       border-color: transparent;
       box-shadow: inset 0 0 0 1px oklch(from var(--_tone) l c h / 10%), inset 0 1px 2px oklch(from var(--_tone) l c h / 8%);
     }
@@ -14030,8 +14121,6 @@ html[data-ui-input-modality="touch"]
     /* A link is never :enabled, so interactive states test "not unavailable" instead: for a button that
        is exactly :enabled, at the same specificity, and it also matches a link that can be followed. */
 
-    /* A neutral card encloses content quietly; ordinary outlines keep their action-tone edge. */
-
     /* Pressed reads as pressed in: the highlight goes, and the shadow moves inside. */
 
     /* Tone is the colour, variant is the volume. Every pairing works: a danger outline is a
@@ -14041,9 +14130,6 @@ html[data-ui-input-modality="touch"]
 
     /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
 
-    /* Pressed, or holding its menu open, a ghost button sinks slightly: a light surface with a faint
-       edge and a soft inner shadow. Lighter than hover, so an open menu's trigger never reads as heavy. */
-
     /* A soft halo that transitions in with the other box-shadow changes, layered on the raised shadow. */
 
     /* A loading action stays visually active; only an explicitly disabled action takes the
@@ -14557,10 +14643,14 @@ html[data-ui-input-modality="touch"]
       color: var(--_icon-button-text);
     }
 
-    /* Omitted tone retains the existing accent solid; explicit neutral is additive. */
+    /* Neutral actions share the same quiet surface and border roles as fields. */
     :scope:where([data-component~="ui-icon-button"])[data-tone="neutral"] {
       --_tone-highlight: var(--ui-neutral-highlight, none);
       --_tone-glow: var(--ui-neutral-glow, 0 0 transparent);
+      --_icon-button-outline-surface: transparent;
+      --_icon-button-border: var(--ui-control-border);
+      --_icon-button-hover-border: var(--ui-control-border-hover, var(--ui-control-border));
+      --_icon-button-text: var(--ui-text);
       --_icon-button-solid-surface: var(--ui-neutral-surface);
       --_icon-button-solid-hover-surface: var(--ui-neutral-hover);
       --_icon-button-solid-text: var(--ui-text);
@@ -14748,6 +14838,12 @@ html[data-ui-input-modality="touch"]
     :scope:where([data-component~="ui-icon-button"])[data-appearance="outline"]:hover:enabled:not([aria-disabled="true"]) {
       border-color: var(--ui-icon-button-hover-border, var(--_icon-button-hover-border, var(--ui-control-border-hover, var(--ui-control-border))));
     }
+    :scope:where([data-component~="ui-icon-button"])[data-tone="neutral"][data-appearance="outline"]:hover:enabled:not([aria-disabled="true"]) {
+      background-color: var(--ui-icon-button-hover-surface, var(--ui-neutral-hover));
+    }
+    :scope:where([data-component~="ui-icon-button"])[data-tone="neutral"][data-appearance="outline"]:active:enabled:not([aria-disabled="true"]) {
+      background-color: var(--ui-icon-button-active-surface, var(--ui-neutral-active));
+    }
 
     :scope:where([data-component~="ui-icon-button"])[data-appearance="solid"]:hover:enabled:not([aria-disabled="true"]) {
       background-color: var(--ui-icon-button-solid-hover-surface, var(--_icon-button-solid-hover-surface, var(--ui-accent-hover)));
@@ -14872,7 +14968,7 @@ html[data-ui-input-modality="touch"]
 @scope ([data-component~="ui-icon-button"]) to ([data-component]) {
 /* This component's hooks style the element they are set on, and never a nested one. */
 
-    /* Omitted tone retains the existing accent solid; explicit neutral is additive. */
+    /* Neutral actions share the same quiet surface and border roles as fields. */
 
     /* At rest an anticipatory button shows only its guide dot. The icon grows into place when
        proximity, hover, or focus reveals it; the button's hit area and guide remain stable. */
@@ -15378,7 +15474,12 @@ html[data-ui-input-modality="touch"]
     }
 
     :scope:where([data-component~="ui-menu-item"]):is(:hover, :focus-visible):not([aria-disabled="true"]) {
-      background: var(--ui-menu-item-hover-surface, var(--ui-surface-subtle));
+      background: var(--ui-menu-item-hover-surface, var(--ui-accent-subtle));
+    }
+
+    :scope:where([data-component~="ui-menu-item"])[aria-checked="true"]:not([aria-disabled="true"]) {
+      background: var(--ui-selection-surface);
+      color: var(--ui-selection-text);
     }
 
     :scope:where([data-component~="ui-menu-item"]):focus-visible {

package/vue/editor/index.js

@@ -3756,7 +3756,7 @@ var D$18 = {
 				"warning",
 				"info"
 			],
-			"default": "accent",
+			"default": "neutral",
 			c: checkFormat("keyword", keywordFormat),
 			t: "keyword",
 			j: 0,
@@ -7666,7 +7666,6 @@ var D$13 = {
 		"tone": {
 			"required": false,
 			"values": [
-				"auto",
 				"accent",
 				"neutral",
 				"danger",
@@ -7674,7 +7673,7 @@ var D$13 = {
 				"warning",
 				"info"
 			],
-			"default": "auto",
+			"default": "neutral",
 			c: checkFormat("keyword", keywordFormat),
 			t: "keyword",
 			j: 0,