@threadlabs/looma 0.37.5 → 0.38.0

package/styles/ui-button.css

@@ -268,7 +268,6 @@
       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));
     }
@@ -277,6 +276,12 @@
       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);
@@ -324,6 +329,18 @@
       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));
     }
@@ -411,10 +428,8 @@
       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%);
     }
@@ -548,8 +563,6 @@
     /* 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
@@ -559,9 +572,6 @@
 
     /* 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

package/styles/ui-combobox.css

@@ -136,6 +136,21 @@
       flex: 1 1 auto;
       min-inline-size: 0;
     }
+    .start {
+      display: flex !important;
+      align-items: center !important;
+      flex: none;
+      padding-inline-start: var(--ui-space-3) !important;
+    }
+    .start:empty {
+      display: none !important;
+    }
+    :scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=sm"] .start {
+      padding-inline-start: var(--ui-space-2) !important;
+    }
+    :scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=lg"] .start {
+      padding-inline-start: var(--ui-space-4) !important;
+    }
     /* A ghost icon button: the affordance is the mark, not a box around it. */
     .help {
       flex: none;
@@ -174,6 +189,10 @@
       block-size: var(--ui-icon-size-sm);
     }
 
+    :scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="muted"] input:not(:disabled) {
+      color: var(--ui-text-secondary);
+    }
+
     input:where(:not([data-component], [data-slotted]))::selection {
       background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
       color: inherit;
@@ -258,7 +277,7 @@
       padding: var(--ui-space-1) !important;
       border: var(--ui-border-width) solid var(--_ui-combobox-popup-border, var(--ui-overlay-border, var(--ui-border-strong)));
       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)));
+      background: var(--_ui-combobox-popup-surface, var(--ui-material-content, var(--ui-surface-elevated)));
       color: var(--ui-text-primary);
       box-shadow: var(--_ui-combobox-popup-shadow, var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg))));
     }
@@ -537,6 +556,21 @@
       flex: 1 1 auto;
       min-inline-size: 0;
     }
+    .start:where(:scope, :scope *) {
+      display: flex !important;
+      align-items: center !important;
+      flex: none;
+      padding-inline-start: var(--ui-space-3) !important;
+    }
+    .start:empty:where(:scope, :scope *) {
+      display: none !important;
+    }
+    :where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=sm"] .start:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))) {
+      padding-inline-start: var(--ui-space-2) !important;
+    }
+    :where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=lg"] .start:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))) {
+      padding-inline-start: var(--ui-space-4) !important;
+    }
     /* A ghost icon button: the affordance is the mark, not a box around it. */
     .help:where(:scope, :scope *) {
       flex: none;
@@ -574,6 +608,10 @@
       block-size: var(--ui-icon-size-sm);
     }
 
+    :where([data-component~="ui-combobox"])[data-ui-combobox-state~="muted"] input:not(:disabled):where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))) {
+      color: var(--ui-text-secondary);
+    }
+
     input:where(:not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))):where(:scope, :scope *)::selection {
       background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
       color: inherit;
@@ -657,7 +695,7 @@
       padding: var(--ui-space-1) !important;
       border: var(--ui-border-width) solid var(--_ui-combobox-popup-border, var(--ui-overlay-border, var(--ui-border-strong)));
       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)));
+      background: var(--_ui-combobox-popup-surface, var(--ui-material-content, var(--ui-surface-elevated)));
       color: var(--ui-text-primary);
       box-shadow: var(--_ui-combobox-popup-shadow, var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg))));
     }

package/styles/ui-icon-button.css

@@ -172,10 +172,14 @@
       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);
@@ -363,6 +367,12 @@
     :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)));
@@ -487,7 +497,7 @@
 @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. */

package/styles/ui-menu-item.css

@@ -131,7 +131,12 @@
     }
 
     :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/styles/ui-select.css

@@ -88,6 +88,10 @@
       background-size: 1.125rem 1.125rem, 100% 100%;
     }
 
+    :scope:where([data-component~="ui-select"])[data-ui-select-state~="muted"] {
+      color: var(--ui-text-secondary);
+    }
+
     :scope:where([data-component~="ui-select"]):hover:not(:focus):not(:disabled):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid])) {
       border-color: var(--ui-select-border-hover, var(--ui-control-border-hover, var(--ui-text-secondary)));
     }
@@ -160,6 +164,11 @@
 
     /* The select draws its own chevron: the native caret cannot be inset or sized consistently.
      * The root stays a native <s-lect>, so the icon is a background image rather than an element. */
+    :scope:where([data-component~="ui-select"])[data-ui-select-state~="muted"] :where([data-slotted], [data-slotted] *):is(option),
+    :scope:where([data-component~="ui-select"])[data-ui-select-state~="muted"] :where([data-slotted], [data-slotted] *):is(optgroup) {
+      color: var(--ui-text-primary);
+      background-color: var(--ui-control-surface);
+    }
 
     /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
 

package/styles/ui-skeleton.css

@@ -0,0 +1,91 @@
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-skeleton"] { --html-next-scope-owner: "ui-skeleton" !important; }
+}
+@scope ([data-component~="ui-skeleton"]) to ([data-component], [data-slotted]) {
+/* Dimensions belong to this placeholder, never a nested or neighbouring one. */
+    @property --ui-skeleton-width {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-skeleton-height {
+      syntax: "*";
+      inherits: false;
+    }
+
+    :scope:where([data-component~="ui-skeleton"]) {
+      display: block !important;
+      position: relative;
+      box-sizing: border-box !important;
+      flex: none;
+      min-inline-size: 0;
+      max-inline-size: 100%;
+      inline-size: var(--ui-skeleton-width, 100%);
+      block-size: var(--ui-skeleton-height, 1lh);
+      margin: 0 !important;
+      font: inherit;
+    }
+
+    :scope:where([data-component~="ui-skeleton"])::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: var(--ui-radius-sm);
+      background: color-mix(in srgb, var(--ui-text-primary) 16%, transparent);
+    }
+
+    :scope:where([data-component~="ui-skeleton"])[data-ui-skeleton-state~="shape=text"]::before {
+      inset-block: 22%;
+    }
+
+    :scope:where([data-component~="ui-skeleton"])[data-ui-skeleton-state~="shape=circle"] {
+      inline-size: var(--ui-skeleton-width, calc(2.5rem + 2 * var(--ui-border-width)));
+      block-size: var(--ui-skeleton-height, auto);
+      aspect-ratio: 1;
+    }
+    :scope:where([data-component~="ui-skeleton"])[data-ui-skeleton-state~="shape=circle"]::before {
+      border-radius: var(--ui-radius-round);
+    }
+
+    :scope:where([data-component~="ui-skeleton"])[data-ui-skeleton-state~="shape=rectangle"] {
+      block-size: var(--ui-skeleton-height, 8rem);
+    }
+    :scope:where([data-component~="ui-skeleton"])[data-ui-skeleton-state~="shape=rectangle"]::before {
+      border-radius: var(--ui-radius-md);
+    }
+
+    :scope:where([data-component~="ui-skeleton"])[data-ui-skeleton-state~="animated"]::before {
+      animation: ui-skeleton-pulse 1.6s ease-in-out infinite;
+    }
+    @keyframes ui-skeleton-pulse {
+      50% {
+        opacity: 0.45;
+      }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :scope:where([data-component~="ui-skeleton"])[data-ui-skeleton-state~="animated"]::before {
+        animation: none;
+      }
+    }
+    @media (forced-colors: active) {
+      :scope:where([data-component~="ui-skeleton"])::before {
+        background: CanvasText;
+        opacity: 0.2;
+        animation: none;
+      }
+    }
+    :scope:where([data-component~="ui-skeleton"])[hidden] {
+      display: none !important;
+    }
+}
+@scope ([data-component~="ui-skeleton"]) to ([data-component]) {
+/* Dimensions belong to this placeholder, never a nested or neighbouring one. */
+    @media (prefers-reduced-motion: reduce) {
+    }
+    @media (forced-colors: active) {
+    }
+}

package/theme-system.css

@@ -14,6 +14,7 @@
 @layer theme {
   :root {
     --ui-spacing: 1;
+    --ui-rhythm: 1;
     --ui-control-roominess: 2.5;
     --ui-scale-ratio: 1.2;
     --ui-space-curve: 1;
@@ -36,7 +37,11 @@
        contrast cannot unexpectedly turn linear spacing into quadratic spacing. */
     --ui-control-size: calc(1rem * var(--ui-control-roominess));
     --_ui-theme-ratio: max(1, var(--ui-scale-ratio));
-    --_ui-theme-unit: calc(1rem * 0.25 * max(0, var(--ui-spacing)));
+    --_ui-theme-unit: calc(1rem * 0.25 * max(0, var(--ui-spacing)) * clamp(0.75, var(--ui-rhythm), 1.5));
+    --ui-line-height-tight: clamp(1.1, calc(1.2 + (var(--ui-rhythm) - 1) * 0.2), 1.3);
+    --ui-line-height: clamp(1.35, calc(1.4 + (var(--ui-rhythm) - 1) * 0.4), 1.6);
+    --ui-line-height-md: var(--ui-line-height);
+    --ui-line-height-relaxed: calc(var(--ui-line-height) * 1.15);
     --_ui-theme-curve: max(0, var(--ui-space-curve));
     --ui-control-size-sm: calc(var(--ui-control-size) / var(--_ui-theme-ratio));
     --ui-control-size-md: var(--ui-control-size);
@@ -89,7 +94,7 @@
     --ui-elevation-dialog: var(--ui-shadow-lg);
     --ui-control-inset: inset calc(var(--_ui-light-inline) * var(--_ui-theme-inner)) calc(var(--_ui-light-block) * var(--_ui-theme-inner)) calc(3px * var(--_ui-theme-inner)) rgb(0 0 0 / 0.15), inset calc(-1 * var(--_ui-light-inline)) calc(-1 * var(--_ui-light-block)) 0 rgb(255 255 255 / calc(var(--_ui-theme-edge) * var(--ui-light-strength) * 0.18)), var(--ui-material-glow);
     --ui-pressed: inset calc(2 * var(--_ui-light-inline) * var(--_ui-theme-inner)) calc(2 * var(--_ui-light-block) * var(--_ui-theme-inner)) calc(4px * var(--_ui-theme-inner)) rgb(0 0 0 / 0.2);
-    --ui-overlay-surface: color-mix(in srgb, var(--ui-surface-raised) calc((1 - clamp(0, var(--ui-overlay-translucency), 1)) * 100%), transparent);
+    --ui-overlay-surface: var(--ui-surface-raised);
     /* Decorative outer material is allowed to transmit the scene. Content keeps
        its own opaque plane; changing the scene cannot undermine text contrast. */
     --ui-material-content: var(--ui-surface-raised);

package/vanilla/UiButton.js

@@ -27,7 +27,7 @@ let P0, P1, P2, P3, P4, P5, P6, P7, P8, P9, P10, P11, P12, P13, P14, P15, P16, P
 const S = { n: ["appearance","colorTone"], t: ["?","?"], f: import.meta.url, g: "ui-button", k: 0, r: readonlyView, a: (host, I) => C(host, I), b: generatedInputs };
 const A = [["a",{},[],"",[],["data-ui-button-state","data-ui-button-prop-align","data-ui-button-prop-as","data-ui-button-prop-disabled","data-ui-button-prop-href","data-ui-button-prop-loading","data-ui-button-prop-pending","data-ui-button-prop-preset","data-ui-button-prop-rel","data-ui-button-prop-shape","data-ui-button-prop-size","data-ui-button-prop-square","data-ui-button-prop-stretch","data-ui-button-prop-target","data-ui-button-prop-tone","data-ui-button-prop-type","data-ui-button-prop-variant","data-appearance","data-tone","href","target","rel","aria-disabled","aria-busy","tabindex"]],["button",{},[],"",[],["data-ui-button-state","data-ui-button-prop-align","data-ui-button-prop-as","data-ui-button-prop-disabled","data-ui-button-prop-href","data-ui-button-prop-loading","data-ui-button-prop-pending","data-ui-button-prop-preset","data-ui-button-prop-rel","data-ui-button-prop-shape","data-ui-button-prop-size","data-ui-button-prop-square","data-ui-button-prop-stretch","data-ui-button-prop-target","data-ui-button-prop-tone","data-ui-button-prop-type","data-ui-button-prop-variant","data-appearance","data-tone","type","disabled","aria-disabled","aria-busy"]],["a",{},[],"",[],["data-ui-button-state","data-ui-button-prop-align","data-ui-button-prop-as","data-ui-button-prop-disabled","data-ui-button-prop-href","data-ui-button-prop-loading","data-ui-button-prop-pending","data-ui-button-prop-preset","data-ui-button-prop-rel","data-ui-button-prop-shape","data-ui-button-prop-size","data-ui-button-prop-square","data-ui-button-prop-stretch","data-ui-button-prop-target","data-ui-button-prop-tone","data-ui-button-prop-type","data-ui-button-prop-variant","data-appearance","data-tone","href","target","rel","aria-disabled","aria-busy","tabindex"]],["button",{},[],"",[],["data-ui-button-state","data-ui-button-prop-align","data-ui-button-prop-as","data-ui-button-prop-disabled","data-ui-button-prop-href","data-ui-button-prop-loading","data-ui-button-prop-pending","data-ui-button-prop-preset","data-ui-button-prop-rel","data-ui-button-prop-shape","data-ui-button-prop-size","data-ui-button-prop-square","data-ui-button-prop-stretch","data-ui-button-prop-target","data-ui-button-prop-tone","data-ui-button-prop-type","data-ui-button-prop-variant","data-appearance","data-tone","type","disabled","aria-disabled","aria-busy"]]];
 const Q = [[],[],[],[]];
-const D = { g: "ui-button", props: { "align": { "required":false,"values":["center","start"],"default":"center", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "as": { "required":false,"values":["button","a"],"default":"button", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "href": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "loading": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "pending": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "preset": { "required":false,"values":["none","primary","standard","quiet","destructive"],"default":"none", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "rel": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "shape": { "required":false,"values":["rounded","pill"],"default":"rounded", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "size": { "required":false,"values":["xs","sm","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "square": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "stretch": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "target": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "tone": { "required":false,"values":["accent","neutral","danger","success","warning","info"],"default":"accent", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "type": { "required":false,"values":["button","submit","reset"],"default":"button", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "variant": { "required":false,"values":["outline","solid","danger","ghost","link","card","field"],"default":"outline", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] } } };
+const D = { g: "ui-button", props: { "align": { "required":false,"values":["center","start"],"default":"center", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "as": { "required":false,"values":["button","a"],"default":"button", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "href": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "loading": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "pending": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "preset": { "required":false,"values":["none","primary","standard","quiet","destructive"],"default":"none", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "rel": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "shape": { "required":false,"values":["rounded","pill"],"default":"rounded", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "size": { "required":false,"values":["xs","sm","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "square": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "stretch": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "target": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "tone": { "required":false,"values":["accent","neutral","danger","success","warning","info"],"default":"neutral", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "type": { "required":false,"values":["button","submit","reset"],"default":"button", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "variant": { "required":false,"values":["outline","solid","danger","ghost","link","card","field"],"default":"outline", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] } } };
 const C = (host) => activateModule(controller, host);
 
 export function createUiButton(options = {}, html) {

package/vanilla/UiCombobox.d.ts

@@ -36,6 +36,7 @@ export interface UiComboboxProps {
   labelVisibility?: "visible" | "sr-only" | null;
   loading?: boolean | null;
   multiple?: boolean | null;
+  muted?: boolean | null;
   name?: string | null;
   openOnFocus?: boolean | null;
   placeholder?: string | null;