@threadlabs/looma 0.5.1 → 0.6.0-rc.1

package/tokens.css

@@ -1,6 +1,39 @@
 @layer tokens {
+  /* The theme contract.
+     These are the values a product sets to theme Looma. Everything else in this file is derived
+     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 {
-    --ui-font-stack-system:
+    /* Colour: intent and neutrals. */
+    --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-surface: #ffffff;
+    --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;
+
+    /* Focus. */
+    --ui-focus-ring: #5b55d6;
+    --ui-focus-halo: 0 0 0 3px color-mix(in srgb, var(--ui-focus-ring) 40%, transparent);
+
+    /* Type. */
+    --ui-font-sans:
       system-ui,
       -apple-system,
       BlinkMacSystemFont,
@@ -11,246 +44,161 @@
       sans-serif,
       "Apple Color Emoji",
       "Segoe UI Emoji";
-    --ui-font-stack-neo-grotesque:
-      Inter,
-      Roboto,
-      "Helvetica Neue",
-      "Arial Nova",
-      "Nimbus Sans",
-      Arial,
-      sans-serif;
-    --ui-font-stack-humanist:
-      Seravek,
-      "Gill Sans Nova",
-      Ubuntu,
-      Calibri,
-      "DejaVu Sans",
-      source-sans-pro,
-      sans-serif;
-    --ui-font-stack-rounded:
-      ui-rounded,
-      "Hiragino Maru Gothic ProN",
-      Quicksand,
-      Comfortaa,
-      Manjari,
-      "Arial Rounded MT",
-      "Arial Rounded MT Bold",
-      Calibri,
-      source-sans-pro,
-      sans-serif;
-    --ui-font-family-sans: var(--ui-font-stack-system);
-    /* Quiet metadata scale for compact, non-interactive component labels. */
-    --ui-font-size-2xs: 0.6875rem;
-    --ui-font-size-xs: 0.75rem;
+    --ui-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+    --ui-font-size: 1rem;
     --ui-font-size-sm: 0.875rem;
-    /* Dense interactive text: legible at 15px without body-copy spacing. */
-    --ui-font-size-ui: 0.9375rem;
-    --ui-font-size-md: 1rem;
-    --ui-font-size-lg: 1.125rem;
-    --ui-font-size-xl: 1.25rem;
-    --ui-font-size-2xl: 1.5rem;
-    --ui-line-height-tight: 1.2;
-    --ui-line-height-md: 1.4;
-    --ui-line-height-relaxed: 1.6;
-
-    --ui-font-normal: 400;
     --ui-font-medium: 500;
-    --ui-font-semibold: 600;
-    --ui-font-bold: 700;
+    --ui-line-height: 1.4;
 
-    --ui-space-0-5: 0.125rem;
+    /* Space: the steps components lay out with. */
     --ui-space-1: 0.25rem;
     --ui-space-2: 0.5rem;
     --ui-space-3: 0.75rem;
     --ui-space-4: 1rem;
-    --ui-space-5: 1.5rem;
-    --ui-space-6: 2rem;
-    --ui-space-7: 2.5rem;
-    --ui-space-8: 3rem;
 
-    --ui-radius-1: 0.25rem;
-    --ui-radius-2: 0.5rem;
-    --ui-radius-3: 0.75rem;
-    --ui-radius-4: 1rem;
-    --ui-radius-dialog: 1rem;
+    /* Radius. */
+    --ui-radius-sm: 0.25rem;
+    --ui-radius-md: 0.5rem;
+    /* Derived from --ui-radius-md by default, in the contract because a product that rounds large
+       surfaces differently needs to pin it. */
+    --ui-radius-lg: calc(var(--ui-radius-md) * 1.5);
     --ui-radius-round: 999px;
 
-    --ui-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
+    /* Elevation: a resting shadow and a floating one. */
     --ui-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
-    --ui-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
     --ui-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
-    --ui-shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.14), 0 8px 16px rgba(0, 0, 0, 0.08);
-    --ui-shadow-dialog: var(--ui-shadow-xl);
-
-    /* Semantic elevation: every floating surface uses one of these so overlays read consistently. */
-    --ui-elevation-tooltip: var(--ui-shadow-md);
-    --ui-elevation-overlay: var(--ui-shadow-lg);
-    --ui-elevation-dialog: var(--ui-shadow-xl);
-    --ui-overlay-backdrop: rgba(0, 0, 0, 0.4);
 
+    /* Motion. */
     --ui-motion-fast: 120ms;
-    --ui-motion-base: 180ms;
     --ui-motion-ease: cubic-bezier(0.2, 0, 0.2, 1);
-    /* Fast start, gentle settle: for reveals that should feel immediate (expanding panels). */
-    --ui-motion-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
 
-    /* Anticipatory interaction: guide → near → direct → active. */
-    --ui-affordance-guide-size: 0.25rem;
-    --ui-affordance-guide-opacity: 0.42;
-    --ui-affordance-guide-color: var(--ui-border-strong);
-    --ui-affordance-near-color: var(--ui-text-secondary);
-    --ui-affordance-direct-color: var(--ui-accent-solid);
-    --ui-affordance-active-color: var(--ui-accent-active);
-    --ui-affordance-motion: var(--ui-motion-fast);
-
-    --ui-surface-canvas: #ffffff;
-    --ui-surface-default: #ffffff;
-    --ui-surface-muted: #f8f8f6;
-    --ui-surface-subtle: #f0f0ec;
-    --ui-surface-elevated: #ffffff;
-
-    --ui-text-primary: #1a1a1a;
-    --ui-text-secondary: #5c5c5c;
-    --ui-text-muted: #9b9b9b;
-    --ui-text-on-accent: #ffffff;
-
-    --ui-border-subtle: #ecece8;
-    --ui-border-default: #e4e4e0;
-    --ui-border-strong: #c8c8c4;
-    --ui-focus-ring: #5b55d6;
+    /* Controls: the contract every button and field shares. */
+    --ui-control-size: 2.5rem;
+    --ui-control-size-sm: 2rem;
+    /* 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;
+  }
 
-    --ui-accent-solid: #5b55d6;
-    --ui-accent-hover: #4b45bd;
-    --ui-accent-active: #3e399e;
-    --ui-accent-soft: #efeffc;
+  /* Derived values.
+     Each is computed from the contract above. A theme may set one to diverge deliberately, but
+     never has to: these exist so components share one vocabulary, not to be configured. */
+  :root,
+  :where([data-theme], [data-contrast]) {
+    /* Type scale, from the base size. */
+    --ui-font-size-2xs: calc(var(--ui-font-size) * 0.6875);
+    --ui-font-size-xs: calc(var(--ui-font-size) * 0.75);
+    /* Dense interactive text: legible without body-copy spacing. */
+    --ui-font-size-ui: calc(var(--ui-font-size) * 0.9375);
+    --ui-font-size-md: var(--ui-font-size);
+    --ui-font-size-lg: calc(var(--ui-font-size) * 1.125);
+    --ui-line-height-tight: 1.2;
+    --ui-line-height-md: var(--ui-line-height);
+    --ui-font-normal: 400;
+    --ui-font-semibold: 600;
+    --ui-font-bold: 700;
+    --ui-font-family-sans: var(--ui-font-sans);
+    --ui-font-family-mono: var(--ui-font-mono);
 
-    --ui-danger-solid: #b4233f;
-    --ui-danger-hover: #941d35;
-    --ui-danger-soft: #fceef1;
-    --ui-success-solid: #007a33;
-    --ui-success-soft: #edf7f1;
-    --ui-warning-solid: #cc8800;
-    --ui-warning-soft: #fdf7e6;
-    --ui-info-solid: #0066cc;
-    --ui-info-soft: #e8f0fb;
+    /* Space steps either side of the contract's four. */
+    --ui-space-0-5: calc(var(--ui-space-1) * 0.5);
+    --ui-space-5: calc(var(--ui-space-4) * 1.5);
+    --ui-space-6: calc(var(--ui-space-4) * 2);
 
-    /* Intent colors split readable foreground use from filled-surface use. */
-    --ui-accent-strong-surface: #5b55d6;
-    --ui-accent-on-strong: #ffffff;
-    --ui-accent-subtle-text: #3e399e;
-    --ui-danger-strong-surface: #b4233f;
-    --ui-danger-on-strong: #ffffff;
-    --ui-danger-subtle-text: #941d35;
-    --ui-success-strong-surface: #007a33;
-    --ui-success-on-strong: #ffffff;
-    --ui-success-subtle-text: #006629;
-    /* Deeper amber so the solid warning badge carries white text like the other tones (5:1). */
-    --ui-warning-strong-surface: #b45309;
-    --ui-warning-on-strong: #ffffff;
-    --ui-warning-subtle-text: #704800;
-    --ui-info-strong-surface: #0066cc;
-    --ui-info-on-strong: #ffffff;
-    --ui-info-subtle-text: #0058b0;
+    --ui-radius-dialog: calc(var(--ui-radius-md) * 2);
 
-    /* Depth and focus. Fields read as a shallow well; buttons as gently raised. Focus is a soft halo
-       that transitions in (no hard outline ring). */
+    /* Elevation: one resting shadow, one floating, and the overlays in between. */
+    --ui-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
+    --ui-shadow-md: var(--ui-shadow-sm);
+    --ui-shadow-xl: var(--ui-shadow-lg);
+    --ui-elevation-tooltip: var(--ui-shadow-sm);
+    --ui-elevation-overlay: var(--ui-shadow-lg);
+    --ui-elevation-dialog: var(--ui-shadow-lg);
+    --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-control-focus-halo-shadow: 0 0 0 3px var(--ui-control-focus-halo, color-mix(in srgb, var(--ui-focus-ring) 24%, transparent));
     --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-focus-halo: 0 0 0 3px color-mix(in srgb, var(--ui-focus-ring) 40%, transparent);
-
-    /* Icon sizes, used by icon buttons and field affordances. */
-    --ui-icon-size-sm: 1rem;
-    --ui-icon-size-md: 1.25rem;
-    --ui-icon-size-lg: 1.5rem;
 
-    /* One height scale for every form control and button size. */
-    --ui-control-size-sm: 2rem;
-    --ui-control-size-md: 2.5rem;
-    --ui-control-size-lg: 3rem;
-    /* Touch-target floor applied under coarse pointers. */
-    --ui-control-min-block-size: 2.75rem;
+    --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);
 
-    /* Compatibility aliases used by the editor's public styling surface.
-       Each alias resolves through the canonical semantic token so an app only
-       needs to override the canonical Looma theme contract. */
-    --ui-surface: var(--ui-surface-elevated);
+    /* Surfaces and text, in the names components use. */
+    --ui-surface-canvas: var(--ui-surface);
+    --ui-surface-default: var(--ui-surface);
+    --ui-surface-elevated: var(--ui-surface-raised);
+    --ui-surface-subtle: var(--ui-surface-sunken);
     --ui-surface-hover: var(--ui-surface-muted);
-    --ui-text: var(--ui-text-primary);
-    --ui-border: var(--ui-border-default);
-    --ui-accent: var(--ui-accent-solid);
-    --ui-accent-subtle: var(--ui-accent-soft);
-    --ui-accent-contrast: var(--ui-text-on-accent);
-    --ui-danger: var(--ui-danger-solid);
-    --ui-radius-sm: var(--ui-radius-1);
-    --ui-radius-md: var(--ui-radius-2);
-    --ui-radius-lg: var(--ui-radius-3);
-    --ui-radius-xl: var(--ui-radius-4);
-    --ui-text-sm: var(--ui-font-size-sm);
-  }
-
-  /* Custom-property references resolve where declared, before inheritance.
-     Rebind semantic roles at theme boundaries to use the local palette. */
-  :root,
-  :where([data-theme], [data-contrast]) {
-    /* Semantic interaction roles. Products can theme intent without coupling
-       every component to a single brand accent. */
-    --ui-action-primary-surface: var(--ui-accent-solid);
+    --ui-text-primary: var(--ui-text);
+    --ui-text-on-accent: var(--ui-on-accent);
+    --ui-border-subtle: color-mix(in srgb, var(--ui-border) 55%, var(--ui-surface));
+    --ui-border-default: var(--ui-border);
+
+    /* Intent tones: a solid surface, its foreground, and a soft tint of each. */
+    --ui-accent-solid: var(--ui-accent);
+    --ui-accent-soft: var(--ui-accent-subtle);
+    --ui-accent-contrast: var(--ui-on-accent);
+    --ui-accent-strong-surface: var(--ui-accent);
+    --ui-accent-on-strong: var(--ui-on-accent);
+    --ui-accent-subtle-text: var(--ui-accent-active);
+    --ui-danger-solid: var(--ui-danger);
+    --ui-danger-soft: color-mix(in srgb, var(--ui-danger) 8%, var(--ui-surface));
+    --ui-danger-strong-surface: var(--ui-danger);
+    --ui-danger-on-strong: var(--ui-on-danger);
+    --ui-danger-subtle-text: var(--ui-danger-hover);
+    --ui-success-solid: var(--ui-success);
+    --ui-success-hover: color-mix(in srgb, var(--ui-success) 85%, var(--ui-text));
+    --ui-success-soft: color-mix(in srgb, var(--ui-success) 8%, var(--ui-surface));
+    --ui-success-strong-surface: var(--ui-success);
+    --ui-success-on-strong: var(--ui-on-accent);
+    --ui-success-subtle-text: color-mix(in srgb, var(--ui-success) 85%, var(--ui-text));
+    --ui-warning-solid: var(--ui-warning);
+    --ui-warning-soft: color-mix(in srgb, var(--ui-warning) 8%, var(--ui-surface));
+    --ui-warning-strong-surface: var(--ui-warning);
+    --ui-warning-on-strong: var(--ui-on-accent);
+    --ui-warning-subtle-text: color-mix(in srgb, var(--ui-warning) 85%, var(--ui-text));
+    --ui-info-solid: var(--ui-info);
+    --ui-info-soft: color-mix(in srgb, var(--ui-info) 8%, var(--ui-surface));
+    --ui-info-strong-surface: var(--ui-info);
+    --ui-info-on-strong: var(--ui-on-accent);
+    --ui-info-subtle-text: color-mix(in srgb, var(--ui-info) 85%, var(--ui-text));
+
+    /* Interaction roles: what a control paints, whatever its intent. */
+    --ui-action-primary-surface: var(--ui-accent);
     --ui-action-primary-surface-hover: var(--ui-accent-hover);
     --ui-action-primary-surface-active: var(--ui-accent-active);
-    --ui-action-primary-text: var(--ui-text-on-accent);
-    --ui-action-secondary-surface: var(--ui-surface-default);
+    --ui-action-primary-text: var(--ui-on-accent);
     --ui-action-secondary-surface-hover: var(--ui-surface-muted);
-    --ui-action-secondary-text: var(--ui-text-primary);
-    --ui-control-surface: var(--ui-surface-default);
+    --ui-action-secondary-text: var(--ui-text);
+    --ui-control-surface: var(--ui-surface);
     --ui-control-surface-disabled: var(--ui-surface-muted);
-    --ui-control-border: var(--ui-border-default);
     --ui-control-border-hover: var(--ui-border-strong);
+    --ui-control-placeholder: var(--ui-text-secondary);
     --ui-control-focus: var(--ui-focus-ring);
-    /* Derived from the ring, not the near-white accent tint, so the halo shows on any surface. */
+    /* Derived from the ring, not a near-white tint, so the halo shows on any surface. */
     --ui-control-focus-halo: color-mix(in srgb, var(--ui-focus-ring) 24%, transparent);
-  }
-
-  @supports (color: oklch(0.5 0.1 240)) {
-    :root {
-      --ui-surface-canvas: oklch(0.99 0.01 250);
-      --ui-surface-default: oklch(1 0 0);
-      --ui-surface-muted: oklch(0.97 0.01 250);
-      --ui-surface-subtle: oklch(0.95 0.01 250);
-      --ui-surface-elevated: oklch(1 0 0);
+    --ui-control-focus-halo-shadow: 0 0 0 3px var(--ui-control-focus-halo);
+    --ui-control-size-md: var(--ui-control-size);
+    --ui-control-size-lg: calc(var(--ui-control-size) * 1.2);
 
-      --ui-text-primary: oklch(0.23 0.02 260);
-      --ui-text-secondary: oklch(0.36 0.02 260);
-      --ui-text-muted: oklch(0.5 0.02 260);
-      --ui-text-on-accent: oklch(0.99 0.01 250);
-
-      --ui-border-subtle: oklch(0.9 0.01 250);
-      --ui-border-default: oklch(0.84 0.01 250);
-      --ui-border-strong: oklch(0.7 0.02 250);
-      --ui-focus-ring: oklch(0.57 0.17 285);
-
-      --ui-accent-solid: oklch(0.57 0.17 285);
-      --ui-accent-hover: oklch(0.52 0.18 285);
-      --ui-accent-active: oklch(0.46 0.16 285);
-      --ui-accent-soft: oklch(0.96 0.025 285);
+    /* Icon sizes, used by icon buttons and field affordances. */
+    --ui-icon-size-sm: var(--ui-font-size);
+    --ui-icon-size-md: calc(var(--ui-font-size) * 1.25);
+    --ui-icon-size-lg: calc(var(--ui-font-size) * 1.5);
 
-      --ui-danger-solid: oklch(0.5 0.17 18);
-      --ui-danger-hover: oklch(0.44 0.16 18);
-      --ui-danger-soft: oklch(0.97 0.025 18);
-      --ui-success-solid: oklch(0.5 0.15 145);
-      --ui-success-soft: oklch(0.96 0.03 145);
-      --ui-warning-solid: oklch(0.7 0.15 85);
-      --ui-warning-soft: oklch(0.97 0.04 85);
-      --ui-info-solid: oklch(0.62 0.18 250);
-      --ui-info-soft: oklch(0.95 0.03 250);
-    }
+    /* Anticipatory interaction: guide → near → direct. */
+    --ui-affordance-guide-size: var(--ui-space-1);
+    --ui-affordance-guide-opacity: 0.42;
+    --ui-affordance-guide-color: var(--ui-border-strong);
+    --ui-affordance-near-color: var(--ui-text-secondary);
+    --ui-affordance-direct-color: var(--ui-accent);
+    --ui-affordance-motion: var(--ui-motion-fast);
   }
 
   @media (prefers-reduced-motion: reduce) {
     :root {
       --ui-motion-fast: 0ms;
-      --ui-motion-base: 0ms;
     }
   }
 }

package/vanilla/UiAffordanceScope.d.ts

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

package/vanilla/UiAffordanceScope.js

@@ -1,5 +1,5 @@
-// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
-import { manageComponentLifecycle } from "@nextwebwg/declarative-components/runtime";
+// Generated by HTML Next 1.0.0-alpha.2 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.1 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
 export interface UiAvatarEventMap {
 }
 export interface UiAvatarElement extends HTMLSpanElement {

package/vanilla/UiAvatar.js

@@ -1,5 +1,5 @@
-// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
-import { manageComponentLifecycle } from "@nextwebwg/declarative-components/runtime";
+// Generated by HTML Next 1.0.0-alpha.2 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.1 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
 export interface UiAvatarGroupEventMap {
 }
 export interface UiAvatarGroupElement extends HTMLDivElement {

package/vanilla/UiAvatarGroup.js

@@ -1,5 +1,5 @@
-// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
-import { manageComponentLifecycle } from "@nextwebwg/declarative-components/runtime";
+// Generated by HTML Next 1.0.0-alpha.2 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.1 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
 export interface UiBadgeEventMap {
 }
 export interface UiBadgeElement extends HTMLSpanElement {

package/vanilla/UiBadge.js

@@ -1,5 +1,5 @@
-// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
-import { manageGeneratedProps } from "@nextwebwg/declarative-components/generated-runtime";
+// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+import { manageGeneratedProps } from "@nextwebwg/html-next/generated-runtime";
 import "../styles/ui-badge.css";
 
 export function createUiBadge(options = {}) {

package/vanilla/UiButton.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
 export interface UiButtonEventMap {
 }
 export interface UiButtonElement extends HTMLButtonElement {
@@ -6,8 +6,10 @@ export interface UiButtonElement extends HTMLButtonElement {
   removeEventListener<K extends keyof UiButtonEventMap>(type: K, listener: (this: UiButtonElement, event: UiButtonEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
 }
 export interface UiButtonProps {
+  align?: "center" | "start" | null;
   disabled?: boolean | null;
   size?: "sm" | "md" | "lg" | null;
+  stretch?: boolean | 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.1 for Vanilla DOM. Do not edit.
-import { manageComponentLifecycle } from "@nextwebwg/declarative-components/runtime";
+// Generated by HTML Next 1.0.0-alpha.2 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":{"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"size":{"type":{"enum":["sm","md","lg"]},"required":false,"target":{"attribute":"size"},"default":"md"},"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},"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.1 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
 export interface UiCalloutEventMap {
 }
 export interface UiCalloutElement extends HTMLDivElement {

package/vanilla/UiCallout.js

@@ -1,5 +1,5 @@
-// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
-import { manageComponentLifecycle } from "@nextwebwg/declarative-components/runtime";
+// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import "../styles/ui-callout.css";
 
 const definition = {...{"contract":{"tag":"ui-callout","props":{"tone":{"type":{"enum":["info","note","warning","success","danger"]},"required":false,"target":{"attribute":"tone"},"default":"info"}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"note"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"icon"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[{"kind":"element","name":"svg","attributes":[{"kind":"literal","name":"viewBox","value":"0 0 24 24"},{"kind":"literal","name":"fill","value":"none"},{"kind":"literal","name":"stroke","value":"currentColor"},{"kind":"literal","name":"stroke-width","value":"2"},{"kind":"literal","name":"stroke-linecap","value":"round"},{"kind":"literal","name":"stroke-linejoin","value":"round"}],"children":[{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"12"},{"kind":"literal","name":"cy","value":"12"},{"kind":"literal","name":"r","value":"10"}],"children":[]},{"kind":"element","name":"path","attributes":[{"kind":"literal","name":"d","value":"M12 16v-4"}],"children":[]},{"kind":"element","name":"path","attributes":[{"kind":"literal","name":"d","value":"M12 8h.01"}],"children":[]}],"flow":{"kind":"if","test":"tone = 'info'","testPlan":{"source":"tone = 'info'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"tone"},"right":{"kind":"literal","value":"info"}},"dependencies":["tone"]}}},{"kind":"element","name":"svg","attributes":[{"kind":"literal","name":"viewBox","value":"0 0 24 24"},{"kind":"literal","name":"fill","value":"none"},{"kind":"literal","name":"stroke","value":"currentColor"},{"kind":"literal","name":"stroke-width","value":"2"},{"kind":"literal","name":"stroke-linecap","value":"round"},{"kind":"literal","name":"stroke-linejoin","value":"round"}],"children":[{"kind":"element","name":"path","attributes":[{"kind":"literal","name":"d","value":"M13.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8.5L13.5 2Z"}],"children":[]},{"kind":"element","name":"path","attributes":[{"kind":"literal","name":"d","value":"M13 2v7h7"}],"children":[]},{"kind":"element","name":"path","attributes":[{"kind":"literal","name":"d","value":"m9.5 17.5 4-4 2 2-4 4H9.5v-2Z"}],"children":[]}],"flow":{"kind":"if","test":"tone = 'note'","testPlan":{"source":"tone = 'note'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"tone"},"right":{"kind":"literal","value":"note"}},"dependencies":["tone"]}}},{"kind":"element","name":"svg","attributes":[{"kind":"literal","name":"viewBox","value":"0 0 24 24"},{"kind":"literal","name":"fill","value":"none"},{"kind":"literal","name":"stroke","value":"currentColor"},{"kind":"literal","name":"stroke-width","value":"2"},{"kind":"literal","name":"stroke-linecap","value":"round"},{"kind":"literal","name":"stroke-linejoin","value":"round"}],"children":[{"kind":"element","name":"path","attributes":[{"kind":"literal","name":"d","value":"m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"}],"children":[]},{"kind":"element","name":"path","attributes":[{"kind":"literal","name":"d","value":"M12 9v4"}],"children":[]},{"kind":"element","name":"path","attributes":[{"kind":"literal","name":"d","value":"M12 17h.01"}],"children":[]}],"flow":{"kind":"if","test":"tone = 'warning'","testPlan":{"source":"tone = 'warning'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"tone"},"right":{"kind":"literal","value":"warning"}},"dependencies":["tone"]}}},{"kind":"element","name":"svg","attributes":[{"kind":"literal","name":"viewBox","value":"0 0 24 24"},{"kind":"literal","name":"fill","value":"none"},{"kind":"literal","name":"stroke","value":"currentColor"},{"kind":"literal","name":"stroke-width","value":"2"},{"kind":"literal","name":"stroke-linecap","value":"round"},{"kind":"literal","name":"stroke-linejoin","value":"round"}],"children":[{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"12"},{"kind":"literal","name":"cy","value":"12"},{"kind":"literal","name":"r","value":"10"}],"children":[]},{"kind":"element","name":"path","attributes":[{"kind":"literal","name":"d","value":"m9 12 2 2 4-4"}],"children":[]}],"flow":{"kind":"if","test":"tone = 'success'","testPlan":{"source":"tone = 'success'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"tone"},"right":{"kind":"literal","value":"success"}},"dependencies":["tone"]}}},{"kind":"element","name":"svg","attributes":[{"kind":"literal","name":"viewBox","value":"0 0 24 24"},{"kind":"literal","name":"fill","value":"none"},{"kind":"literal","name":"stroke","value":"currentColor"},{"kind":"literal","name":"stroke-width","value":"2"},{"kind":"literal","name":"stroke-linecap","value":"round"},{"kind":"literal","name":"stroke-linejoin","value":"round"}],"children":[{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"12"},{"kind":"literal","name":"cy","value":"12"},{"kind":"literal","name":"r","value":"10"}],"children":[]},{"kind":"element","name":"path","attributes":[{"kind":"literal","name":"d","value":"m15 9-6 6"}],"children":[]},{"kind":"element","name":"path","attributes":[{"kind":"literal","name":"d","value":"m9 9 6 6"}],"children":[]}],"flow":{"kind":"if","test":"tone = 'danger'","testPlan":{"source":"tone = 'danger'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"tone"},"right":{"kind":"literal","value":"danger"}},"dependencies":["tone"]}}}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"content"}],"children":[{"kind":"slot"}]}]},"declarations":[],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};

package/vanilla/UiCheckbox.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.2 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,5 +1,5 @@
-// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
-import { manageComponentLifecycle } from "@nextwebwg/declarative-components/runtime";
+// Generated by HTML Next 1.0.0-alpha.2 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.1 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
 export interface UiClusterEventMap {
 }
 export interface UiClusterElement extends HTMLDivElement {

package/vanilla/UiCluster.js

@@ -1,5 +1,5 @@
-// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
-import { manageGeneratedProps } from "@nextwebwg/declarative-components/generated-runtime";
+// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+import { manageGeneratedProps } from "@nextwebwg/html-next/generated-runtime";
 import "../styles/ui-cluster.css";
 
 export function createUiCluster(options = {}) {

package/vanilla/UiCombobox.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.2 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 })[]>;