@threadlabs/looma 0.6.4 → 0.7.0

package/styles/ui-select.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-select"]) to ([data-component], [data-slotted]) {
 :scope {
       box-sizing: border-box;
@@ -22,9 +22,9 @@
         background-color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
-    /* Single selects draw their own chevron: the native caret cannot be inset or sized consistently.
+    /* 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:not([multiple]) {
+    :scope {
       appearance: none;
       padding-inline-end: calc(var(--ui-space-3) + 1.5rem);
       background-image: var(
@@ -65,7 +65,6 @@
       cursor: not-allowed;
     }
 
-    :scope[multiple],
     :scope[size]:not([size="1"]) {
       min-block-size: 7rem;
       padding: var(--ui-space-2);
@@ -77,7 +76,7 @@
     }
 }
 @scope ([data-component~="ui-select"]) to ([data-component]) {
-/* Single selects draw their own chevron: the native caret cannot be inset or sized consistently.
+/* 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. */
 
     /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */

package/styles/ui-separator.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-separator"]) to ([data-component], [data-slotted]) {
 hr {
       box-sizing: border-box;

package/styles/ui-sidebar.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-sidebar"]) to ([data-component], [data-slotted]) {
 :scope {
       position: relative;

package/styles/ui-stack.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-stack"]) to ([data-component], [data-slotted]) {
 :scope {
       --_layout-gap: var(--ui-space-4);

package/styles/ui-switch.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-switch"]) to ([data-component], [data-slotted]) {
 :scope {
       display: inline-flex;

package/styles/ui-switcher.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-switcher"]) to ([data-component], [data-slotted]) {
 :scope {
       --_switcher-gap: var(--ui-space-4);

package/styles/ui-tabs.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-tabs"]) to ([data-component], [data-slotted]) {
 /* Density resolves into the tab row's own values; the public tokens still override them. */
     :scope {

package/styles/ui-textarea.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-textarea"]) to ([data-component], [data-slotted]) {
 :scope {
       box-sizing: border-box;

package/styles/ui-toast-region.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @keyframes ui-toast-enter {
       from {
         opacity: 0;

package/styles/ui-tooltip.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-tooltip"]) to ([data-component], [data-slotted]) {
 :scope {
       position: fixed;

package/styles/ui-top-bar.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-top-bar"]) to ([data-component], [data-slotted]) {
 :scope {
       position: sticky;

package/styles/ui-tree-item.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-tree-item"]) to ([data-component], [data-slotted]) {
 :scope {
       --_tree-row-min-height: 32px;

package/styles/ui-tree.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-tree"]) to ([data-component], [data-slotted]) {
 :scope[data-ui-tree-state~="density=compact"] {
       --ui-tree-item-min-block-size: var(--ui-control-size-sm);

package/theme-dark.css

@@ -2,30 +2,18 @@
   @media (prefers-color-scheme: dark) {
     :root:not([data-theme]) {
       color-scheme: dark;
+      /* The same eleven seeds the light theme sets. Every neutral, tint, hover, and disabled
+         colour is mixed from these, and the mixes read the scheme from them: toward this ink
+         brightens here, where it darkened there. */
       --ui-surface: #1a1a1a;
       --ui-surface-raised: #2a2a2a;
       --ui-surface-sunken: #2e2e2e;
-
       --ui-text: #f0f0ec;
-      --ui-text-secondary: #a0a09c;
-      --ui-text-muted: #6a6a66;
-      --ui-disabled-surface: #242424;
-      --ui-disabled-text: #6a6a66;
       --ui-on-accent: #1a1a1a;
       --ui-on-danger: #1a1a1a;
 
-      --ui-border: #333330;
-      --ui-border-strong: #4a4a46;
-      --ui-focus-ring: #a99bf5;
-      --ui-control-border: #6f6f69;
-
       --ui-accent: #a99bf5;
-      --ui-accent-hover: #b9adff;
-      --ui-accent-active: #c8beff;
-      --ui-accent-subtle: #282342;
-
       --ui-danger: #ef6f86;
-      --ui-danger-hover: #f58a9d;
       --ui-success: #33cc66;
       --ui-warning: #ffaa22;
       --ui-info: #4d9fff;
@@ -42,30 +30,18 @@
 
   [data-theme="dark"] {
     color-scheme: dark;
+    /* The same eleven seeds the light theme sets. Every neutral, tint, hover, and disabled
+       colour is mixed from these, and the mixes read the scheme from them: toward this ink
+       brightens here, where it darkened there. */
     --ui-surface: #1a1a1a;
     --ui-surface-raised: #2a2a2a;
     --ui-surface-sunken: #2e2e2e;
-
     --ui-text: #f0f0ec;
-    --ui-text-secondary: #a0a09c;
-    --ui-text-muted: #6a6a66;
-    --ui-disabled-surface: #242424;
-    --ui-disabled-text: #6a6a66;
     --ui-on-accent: #1a1a1a;
     --ui-on-danger: #1a1a1a;
 
-    --ui-border: #333330;
-    --ui-border-strong: #4a4a46;
-    --ui-focus-ring: #a99bf5;
-    --ui-control-border: #6f6f69;
-
     --ui-accent: #a99bf5;
-    --ui-accent-hover: #b9adff;
-    --ui-accent-active: #c8beff;
-    --ui-accent-subtle: #282342;
-
     --ui-danger: #ef6f86;
-    --ui-danger-hover: #f58a9d;
     --ui-success: #33cc66;
     --ui-warning: #ffaa22;
     --ui-info: #4d9fff;

package/theme-high-contrast.css

@@ -2,46 +2,56 @@
   @media (prefers-contrast: more) {
     :root:not([data-contrast]) {
       color-scheme: light;
+      /* The seeds, as in every theme. */
       --ui-surface: #ffffff;
       --ui-surface-raised: #ffffff;
       --ui-surface-sunken: #f0f0ec;
       --ui-text: #000000;
-      --ui-text-secondary: #111111;
-      --ui-text-muted: #222222;
-      --ui-disabled-surface: #e6e6e6;
-      --ui-disabled-text: #333333;
+      --ui-on-accent: #ffffff;
+      --ui-on-danger: #ffffff;
+      --ui-accent: #0000cc;
+      --ui-danger: #8b0000;
+      --ui-success: #006400;
+      --ui-warning: #7a3d00;
+      --ui-info: #00008b;
+
+      /* The deliberate divergence, and the whole point of this theme: a mixed border is a grey
+         one, and high contrast asks for an edge that is drawn rather than implied. Text steps
+         stay closer to the ink than the mixes put them. */
       --ui-border: #000000;
       --ui-border-strong: #000000;
       --ui-control-border: #000000;
+      --ui-text-secondary: #111111;
+      --ui-text-muted: #222222;
+      --ui-disabled-text: #333333;
       --ui-focus-ring: #0000ff;
-      --ui-accent: #0000cc;
-      --ui-accent-hover: #000080;
-      --ui-accent-active: #000066;
-      --ui-accent-subtle: #e6e6ff;
-      --ui-danger: #8b0000;
-      --ui-danger-hover: #5c0000;
     }
   }
 
   [data-contrast="high"] {
     color-scheme: light;
+    /* The seeds, as in every theme. */
     --ui-surface: #ffffff;
     --ui-surface-raised: #ffffff;
     --ui-surface-sunken: #f0f0ec;
     --ui-text: #000000;
-    --ui-text-secondary: #111111;
-    --ui-text-muted: #222222;
-    --ui-disabled-surface: #e6e6e6;
-    --ui-disabled-text: #333333;
+    --ui-on-accent: #ffffff;
+    --ui-on-danger: #ffffff;
+    --ui-accent: #0000cc;
+    --ui-danger: #8b0000;
+    --ui-success: #006400;
+    --ui-warning: #7a3d00;
+    --ui-info: #00008b;
+
+    /* The deliberate divergence, and the whole point of this theme: a mixed border is a grey
+       one, and high contrast asks for an edge that is drawn rather than implied. Text steps
+       stay closer to the ink than the mixes put them. */
     --ui-border: #000000;
     --ui-border-strong: #000000;
     --ui-control-border: #000000;
+    --ui-text-secondary: #111111;
+    --ui-text-muted: #222222;
+    --ui-disabled-text: #333333;
     --ui-focus-ring: #0000ff;
-    --ui-accent: #0000cc;
-    --ui-accent-hover: #000080;
-    --ui-accent-active: #000066;
-    --ui-accent-subtle: #e6e6ff;
-    --ui-danger: #8b0000;
-    --ui-danger-hover: #5c0000;
   }
 }

package/theme-light.css

@@ -2,31 +2,17 @@
   :root:not([data-theme]),
   [data-theme="light"] {
     color-scheme: light;
+    /* The seeds, and only the seeds. Neutrals, hovers, tints, and disabled colours are mixed from
+       these in tokens.css, so a product themes Looma by changing these eleven values. */
     --ui-surface: #ffffff;
     --ui-surface-raised: #ffffff;
     --ui-surface-sunken: #f0f0ec;
-
     --ui-text: #1a1a1a;
-    --ui-text-secondary: #5c5c5c;
-    --ui-text-muted: #9b9b9b;
-    --ui-disabled-surface: #f0f0ec;
-    --ui-disabled-text: #8a8a86;
     --ui-on-accent: #ffffff;
     --ui-on-danger: #ffffff;
 
-    --ui-border: #e4e4e0;
-    --ui-border-strong: #c8c8c4;
-    --ui-focus-ring: #5b55d6;
-    /* A control needs a visible 3:1 boundary; general dividers stay quieter. */
-    --ui-control-border: #858580;
-
     --ui-accent: #5b55d6;
-    --ui-accent-hover: #4b45bd;
-    --ui-accent-active: #3e399e;
-    --ui-accent-subtle: #efeffc;
-
     --ui-danger: #b4233f;
-    --ui-danger-hover: #941d35;
     --ui-success: #007a33;
     /* Deep amber, so a solid warning surface carries white text like the other tones (5:1). */
     --ui-warning: #b45309;

package/tokens.css

@@ -4,37 +4,22 @@
      from them, so a theme that sets only these still looks coherent. A component reads a derived
      value or its own `--ui-<component>-*` token; it never needs the product to set either. */
   :root {
-    /* Colour: intent and neutrals. */
+    /* Colour: the whole palette comes from these. An intent, its readable foreground, the page,
+       the two surfaces either side of it, and the ink. Everything else — hovers, tints, borders,
+       muted text, disabled — is mixed from them further down, so a theme sets these and stops. */
     --ui-accent: #5b55d6;
-    --ui-accent-hover: #4b45bd;
-    --ui-accent-active: #3e399e;
-    --ui-accent-subtle: #efeffc;
-    --ui-on-accent: #ffffff;
     --ui-danger: #b4233f;
-    --ui-danger-hover: #941d35;
-    --ui-on-danger: #ffffff;
     --ui-success: #007a33;
     --ui-warning: #b45309;
     --ui-info: #0066cc;
+    --ui-on-accent: #ffffff;
+    --ui-on-danger: #ffffff;
     --ui-surface: #ffffff;
+    /* Raised and sunken are seeded rather than mixed: which direction reads as "lifted" flips
+       between a light and a dark scheme, and only the theme knows which one it is. */
     --ui-surface-raised: #ffffff;
     --ui-surface-sunken: #f0f0ec;
-    /* The middle neutral step. It defaults to a mix of the two either side, but a palette with its
-       own value for it sets this rather than accepting the mix. */
-    --ui-surface-muted: color-mix(in srgb, var(--ui-surface-sunken) 50%, var(--ui-surface));
     --ui-text: #1a1a1a;
-    --ui-text-secondary: #5c5c5c;
-    --ui-text-muted: #9b9b9b;
-    --ui-border: #e4e4e0;
-    --ui-border-strong: #c8c8c4;
-
-    /* Disabled is one decision, not a per-component one: a neutral surface and text, at full
-       opacity, so a disabled control reads as unavailable rather than as a faded variant. */
-    --ui-disabled-surface: #f0f0ec;
-    --ui-disabled-text: #9b9b9b;
-
-    /* Focus. */
-    --ui-focus-ring: #5b55d6;
     --ui-focus-halo: 0 0 0 3px color-mix(in srgb, var(--ui-focus-ring) 40%, transparent);
 
     /* Type. */
@@ -83,7 +68,6 @@
     /* WCAG 2.5.5 counts CSS pixels, so this one stays in px: a smaller root font must not shrink
        a touch target below 44. */
     --ui-control-min-block-size: 44px;
-    --ui-control-border: #858580;
   }
 
   /* Derived values.
@@ -127,12 +111,37 @@
     --ui-overlay-backdrop: rgba(0, 0, 0, 0.4);
     --ui-control-inset: inset 0 1px 2px rgb(0 0 0 / 0.07), inset 0 1px 0 rgb(0 0 0 / 0.02);
     --ui-raised: 0 1px 2px rgb(0 0 0 / 0.07), 0 1px 1px rgb(0 0 0 / 0.04);
-    --ui-raised-highlight: linear-gradient(rgb(255 255 255 / 0.5), rgb(255 255 255 / 0));
+    --ui-raised-highlight: linear-gradient(rgb(255 255 255 / 0.16), rgb(255 255 255 / 0));
+    /* The counterpart to --ui-raised: a pressed control takes its shadow inside. */
+    --ui-pressed: inset 0 1px 2px rgb(0 0 0 / 0.12);
 
     --ui-motion-base: calc(var(--ui-motion-fast) * 1.5);
     /* Fast start, gentle settle: for reveals that should feel immediate. */
     --ui-motion-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
 
+    /* Neutrals: the ink mixed into the page. One ramp, so a theme that changes either end moves
+       every step with it. */
+    --ui-surface-muted: color-mix(in oklab, var(--ui-surface-sunken) 50%, var(--ui-surface));
+    --ui-text-secondary: color-mix(in oklab, var(--ui-text) 72%, var(--ui-surface));
+    --ui-text-muted: color-mix(in oklab, var(--ui-text) 45%, var(--ui-surface));
+    --ui-border: color-mix(in oklab, var(--ui-text) 12%, var(--ui-surface));
+    --ui-border-strong: color-mix(in oklab, var(--ui-text) 25%, var(--ui-surface));
+    --ui-control-border: color-mix(in oklab, var(--ui-text) 48%, var(--ui-surface));
+
+    /* States: toward the ink for pressure, toward the page for a tint. In a dark theme the ink is
+       light, so the same mixes brighten instead of darkening, without a second set of values. */
+    --ui-accent-hover: color-mix(in oklab, var(--ui-accent) 86%, var(--ui-text));
+    --ui-accent-active: color-mix(in oklab, var(--ui-accent) 74%, var(--ui-text));
+    --ui-accent-subtle: color-mix(in oklab, var(--ui-accent) 12%, var(--ui-surface));
+    --ui-danger-hover: color-mix(in oklab, var(--ui-danger) 86%, var(--ui-text));
+
+    /* Disabled is one decision, not a per-component one: the sunken surface and the muted ink, at
+       full opacity, so a disabled control reads as unavailable rather than as a faded variant. */
+    --ui-disabled-surface: var(--ui-surface-sunken);
+    --ui-disabled-text: var(--ui-text-muted);
+
+    --ui-focus-ring: var(--ui-accent);
+
     /* Surfaces and text, in the names components use. */
     --ui-surface-canvas: var(--ui-surface);
     --ui-surface-default: var(--ui-surface);

package/vanilla/UiAffordanceScope.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 export interface UiAffordanceScopeEventMap {
 }
 export interface UiAffordanceScopeElement extends HTMLSpanElement {

package/vanilla/UiAffordanceScope.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-affordance-scope/ui-affordance-scope.js";
 import "../styles/ui-affordance-scope.css";

package/vanilla/UiAvatar.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 export interface UiAvatarEventMap {
 }
 export interface UiAvatarElement extends HTMLSpanElement {

package/vanilla/UiAvatar.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-avatar/ui-avatar.js";
 import "../styles/ui-avatar.css";

package/vanilla/UiAvatarGroup.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 export interface UiAvatarGroupEventMap {
 }
 export interface UiAvatarGroupElement extends HTMLDivElement {

package/vanilla/UiAvatarGroup.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-avatar-group/ui-avatar-group.js";
 import "../styles/ui-avatar-group.css";

package/vanilla/UiBadge.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 export interface UiBadgeEventMap {
 }
 export interface UiBadgeElement extends HTMLSpanElement {

package/vanilla/UiBadge.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 import { manageGeneratedProps } from "@nextwebwg/html-next/generated-runtime";
 import "../styles/ui-badge.css";
 

package/vanilla/UiButton.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 export interface UiButtonEventMap {
 }
 export interface UiButtonElement extends HTMLButtonElement {
@@ -10,7 +10,7 @@ export interface UiButtonProps {
   disabled?: boolean | null;
   size?: "sm" | "md" | "lg" | null;
   stretch?: boolean | null;
-  tone?: "neutral" | "accent" | null;
+  tone?: "accent" | "neutral" | "danger" | "success" | "warning" | "info" | null;
   variant?: "outline" | "solid" | "danger" | "ghost" | "link" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];

package/vanilla/UiButton.js

@@ -1,8 +1,8 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import "../styles/ui-button.css";
 
-const definition = {...{"contract":{"tag":"ui-button","props":{"align":{"type":{"enum":["center","start"]},"required":false,"target":{"attribute":"align"},"default":"center"},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"size":{"type":{"enum":["sm","md","lg"]},"required":false,"target":{"attribute":"size"},"default":"md"},"stretch":{"type":"boolean","required":false,"target":{"attribute":"stretch"},"default":false},"tone":{"type":{"enum":["neutral","accent"]},"required":false,"target":{"attribute":"tone"},"default":"neutral"},"variant":{"type":{"enum":["outline","solid","danger","ghost","link"]},"required":false,"target":{"attribute":"variant"},"default":"outline"}}},"template":{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}}],"children":[{"kind":"slot"}]},"declarations":[],"root":{"kind":"native","element":"button","choices":["button"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-button","props":{"align":{"type":{"enum":["center","start"]},"required":false,"target":{"attribute":"align"},"default":"center"},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"size":{"type":{"enum":["sm","md","lg"]},"required":false,"target":{"attribute":"size"},"default":"md"},"stretch":{"type":"boolean","required":false,"target":{"attribute":"stretch"},"default":false},"tone":{"type":{"enum":["accent","neutral","danger","success","warning","info"]},"required":false,"target":{"attribute":"tone"},"default":"accent"},"variant":{"type":{"enum":["outline","solid","danger","ghost","link"]},"required":false,"target":{"attribute":"variant"},"default":"outline"}}},"template":{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}}],"children":[{"kind":"slot"}]},"declarations":[],"root":{"kind":"native","element":"button","choices":["button"]}},source:{file:import.meta.url},css:""};
 
 export function createUiButton(options = {}) {
   const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;

package/vanilla/UiCallout.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 export interface UiCalloutEventMap {
 }
 export interface UiCalloutElement extends HTMLDivElement {

package/vanilla/UiCallout.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import "../styles/ui-callout.css";
 

package/vanilla/UiCheckbox.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 export interface UiCheckboxEventMap {
   change: CustomEvent<{ readonly checked: boolean; readonly value: string; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
 }

package/vanilla/UiCheckbox.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-checkbox/ui-checkbox.js";
 import "../styles/ui-checkbox.css";

package/vanilla/UiCluster.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 export interface UiClusterEventMap {
 }
 export interface UiClusterElement extends HTMLDivElement {

package/vanilla/UiCluster.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 import { manageGeneratedProps } from "@nextwebwg/html-next/generated-runtime";
 import "../styles/ui-cluster.css";
 

package/vanilla/UiCombobox.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 export interface UiComboboxEventMap {
   "query-change": CustomEvent<{ readonly query: string; readonly display: string; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
   "value-change": CustomEvent<{ readonly value: string | null; readonly query: string; readonly option: { readonly id: string; readonly value: string; readonly label: string; readonly group?: string; readonly disabled?: boolean } | null; readonly kind: "selection" | "clear" | "free-entry" | "create"; readonly trigger: "keyboard" | "pointer" | "programmatic" } | readonly ({ readonly id: string; readonly value: string; readonly label: string; readonly group?: string; readonly disabled?: boolean })[]>;