@threadlabs/looma 0.14.8 → 0.15.1

package/styles/ui-toast.css

@@ -0,0 +1,74 @@
+/* Generated by HTML Next 1.0.0-alpha.7. Do not edit. */
+@property --ui-toast-surface {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-toast-border {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-toast-radius {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-toast-shadow {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-toast-accent {
+      syntax: "*";
+      inherits: false;
+    }
+@scope ([data-component~="ui-toast"]) to ([data-component], [data-slotted]) {
+/* Component hooks stay on this toast; group overlay values may inherit from the region. */
+
+    :scope {
+      --_ui-toast-accent: var(--ui-border-strong);
+
+      display: flex;
+      align-items: center;
+      gap: var(--ui-space-2);
+      box-sizing: border-box;
+      inline-size: 100%;
+      margin: 0;
+      padding: var(--ui-space-3) var(--ui-space-4);
+      border: 1px solid var(--ui-toast-border, var(--ui-overlay-border, var(--ui-border-default)));
+      border-inline-start: 3px solid var(--ui-toast-accent, var(--_ui-toast-accent));
+      border-radius: var(--ui-toast-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
+      background: var(--ui-toast-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
+      color: var(--ui-text-primary);
+      box-shadow: var(--ui-toast-shadow, var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg))));
+      pointer-events: auto;
+    }
+
+    :scope[data-ui-toast-state~="tone=info"] {
+      --_ui-toast-accent: var(--ui-info-solid);
+    }
+    :scope[data-ui-toast-state~="tone=success"] {
+      --_ui-toast-accent: var(--ui-success-solid);
+    }
+    :scope[data-ui-toast-state~="tone=warning"] {
+      --_ui-toast-accent: var(--ui-warning-solid);
+    }
+    :scope[data-ui-toast-state~="tone=danger"] {
+      --_ui-toast-accent: var(--ui-danger-solid);
+    }
+
+    .message {
+      min-inline-size: 0;
+      flex: 1;
+    }
+    .action:not(:has(> *)) {
+      display: none;
+    }
+    .dismiss {
+      margin-inline-end: calc(var(--ui-space-2) * -1);
+    }
+
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-toast"]) to ([data-component]) {
+/* Component hooks stay on this toast; group overlay values may inherit from the region. */
+}

package/styles/ui-tooltip.css

@@ -19,6 +19,10 @@
       syntax: "*";
       inherits: false;
     }
+@property --ui-tooltip-offset {
+      syntax: "*";
+      inherits: false;
+    }
 @property --ui-tooltip-radius {
       syntax: "*";
       inherits: false;
@@ -72,19 +76,19 @@
     }
 
     .surface {
-      --_tooltip-line: var(--_ui-tooltip-border, var(--ui-border-default));
+      --_tooltip-line: var(--_ui-tooltip-border, var(--ui-overlay-border, var(--ui-border-default)));
       position: relative;
       box-sizing: border-box;
       max-inline-size: var(--_ui-tooltip-max-inline-size, 18rem);
       border: 1px solid var(--_tooltip-line);
-      border-radius: var(--_ui-tooltip-radius, var(--ui-radius-sm));
-      background: var(--_ui-tooltip-surface, var(--ui-surface-elevated));
+      border-radius: var(--_ui-tooltip-radius, var(--ui-overlay-radius, var(--ui-radius-sm)));
+      background: var(--_ui-tooltip-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
       color: var(--_ui-tooltip-text, var(--ui-text-primary));
       padding: var(--ui-space-1) var(--ui-space-2);
       font-family: var(--ui-font-family-sans);
       font-size: var(--ui-font-size-sm);
       line-height: var(--ui-line-height-tight);
-      box-shadow: var(--_ui-tooltip-shadow, var(--ui-elevation-tooltip, var(--ui-shadow-md)));
+      box-shadow: var(--_ui-tooltip-shadow, var(--ui-overlay-shadow, var(--ui-elevation-tooltip, var(--ui-shadow-md))));
     }
 
     :scope[data-ui-tooltip-state~="inverse"] .surface {
@@ -112,7 +116,7 @@
       transform: rotate(45deg);
     }
 
-    :is(:scope[data-ui-tooltip-state~="placement=bottom"], :scope[data-ui-tooltip-state~="placement=bottom-start"], :scope[data-ui-tooltip-state~="placement=bottom-end"]) .surface::after {
+    :scope[data-ui-actual-placement="bottom"] .surface::after {
       inset-block-start: calc(var(--_ui-tooltip-arrow-size, 0.5rem) / -2 - 0.5px);
       inset-block-end: auto;
       border-inline-end-width: 0;
@@ -123,11 +127,47 @@
       border-start-start-radius: 1px;
     }
 
-    :is(:scope[data-ui-tooltip-state~="placement=top-end"], :scope[data-ui-tooltip-state~="placement=bottom-end"]) .surface::after {
+    :scope[data-ui-actual-align="center"] .surface::after {
+      inset-inline-start: calc(50% - var(--_ui-tooltip-arrow-size, 0.5rem) / 2);
+    }
+
+    :scope[data-ui-actual-align="end"] .surface::after {
       inset-inline-start: auto;
       inset-inline-end: var(--ui-space-3);
     }
 
+    :scope[data-ui-actual-placement="left"] .surface::after,
+    :scope[data-ui-actual-placement="right"] .surface::after {
+      inset-block-start: calc(50% - var(--_ui-tooltip-arrow-size, 0.5rem) / 2);
+      inset-block-end: auto;
+      border: 0 solid var(--_tooltip-line);
+    }
+
+    :scope[data-ui-actual-placement="left"] .surface::after {
+      inset-inline-start: auto;
+      inset-inline-end: calc(var(--_ui-tooltip-arrow-size, 0.5rem) / -2 - 0.5px);
+      border-inline-end-width: 1px;
+      border-block-end-width: 1px;
+    }
+
+    :scope[data-ui-actual-placement="right"] .surface::after {
+      inset-inline-start: calc(var(--_ui-tooltip-arrow-size, 0.5rem) / -2 - 0.5px);
+      inset-inline-end: auto;
+      border-inline-start-width: 1px;
+      border-block-start-width: 1px;
+    }
+
+    :scope[data-ui-actual-placement="left"][data-ui-actual-align="start"] .surface::after,
+    :scope[data-ui-actual-placement="right"][data-ui-actual-align="start"] .surface::after {
+      inset-block-start: var(--ui-space-3);
+    }
+
+    :scope[data-ui-actual-placement="left"][data-ui-actual-align="end"] .surface::after,
+    :scope[data-ui-actual-placement="right"][data-ui-actual-align="end"] .surface::after {
+      inset-block-start: auto;
+      inset-block-end: var(--ui-space-3);
+    }
+
     :scope:popover-open {
       opacity: 1;
       transform: translateY(0);

package/styles/ui-tree-item.css

@@ -119,6 +119,35 @@
       display: none;
     }
 
+    .selection-hit {
+      display: none;
+      grid-column: 2;
+      grid-row: 1;
+      place-items: center;
+      inline-size: 1.25rem;
+      block-size: var(--_ui-tree-item-min-block-size, var(--_tree-row-min-height));
+      cursor: pointer;
+    }
+    .selection-checkbox {
+      inline-size: 1rem;
+      block-size: 1rem;
+      margin: 0;
+      accent-color: var(--ui-accent-solid);
+    }
+
+    :scope[data-selection-mode="multiple"] > .row {
+      grid-template-columns: var(--_tree-disclosure-size) 1.25rem auto minmax(0, 1fr);
+    }
+    :scope[data-selection-mode="multiple"] > .row > .selection-hit {
+      display: grid;
+    }
+    :scope[data-selection-mode="multiple"] > .row > .leading {
+      grid-column: 3;
+    }
+    :scope[data-selection-mode="multiple"] > .row > .label {
+      grid-column: 4;
+    }
+
     .disclosure:hover {
       color: var(--ui-text-primary);
       background: var(--ui-surface-elevated);
@@ -360,7 +389,7 @@
       inset-inline: 1px;
       display: none;
       block-size: 2px;
-      border-radius: 999px;
+      border-radius: var(--ui-radius-round);
       background: var(--_ui-tree-drop-color, var(--ui-accent-solid));
       pointer-events: none;
     }
@@ -373,7 +402,7 @@
       inline-size: 7px;
       block-size: 7px;
       border: 2px solid var(--_ui-tree-drop-color, var(--ui-accent-solid));
-      border-radius: 999px;
+      border-radius: var(--ui-radius-round);
       background: var(--ui-surface-elevated);
       transform: translateY(-50%);
     }
@@ -403,8 +432,47 @@
       --_tree-row-min-height: 44px;
     }
 
-    html[data-ui-input-modality="touch"] :scope .drag-handle {
-      display: none;
+    html[data-ui-input-modality="touch"] :scope .row {
+      grid-template-columns: 44px var(--_tree-disclosure-size) auto minmax(0, 1fr);
+    }
+
+    html[data-ui-input-modality="touch"] :scope .drag-handle,
+    html[data-ui-input-modality="touch"] :scope[data-ui-tree-item-state~="isContainer"] > .row > .drag-handle {
+      position: relative;
+      grid-column: 1;
+      grid-row: 1;
+      inset: auto;
+      inline-size: 44px;
+      block-size: 44px;
+      padding: 14px;
+      opacity: 1;
+      transform: none;
+      cursor: pointer;
+    }
+
+    html[data-ui-input-modality="touch"] :scope .disclosure {
+      grid-column: 2;
+    }
+    html[data-ui-input-modality="touch"] :scope .leading {
+      grid-column: 3;
+    }
+    html[data-ui-input-modality="touch"] :scope .label {
+      grid-column: 4;
+    }
+
+    html[data-ui-input-modality="touch"] :scope[data-selection-mode="multiple"] > .row {
+      grid-template-columns: 44px var(--_tree-disclosure-size) 44px auto minmax(0, 1fr);
+    }
+    html[data-ui-input-modality="touch"] :scope[data-selection-mode="multiple"] > .row > .selection-hit {
+      grid-column: 3;
+      inline-size: 44px;
+      block-size: 44px;
+    }
+    html[data-ui-input-modality="touch"] :scope[data-selection-mode="multiple"] > .row > .leading {
+      grid-column: 4;
+    }
+    html[data-ui-input-modality="touch"] :scope[data-selection-mode="multiple"] > .row > .label {
+      grid-column: 5;
     }
 
     @media (prefers-reduced-motion: reduce) {

package/styles/ui-tree.css

@@ -41,6 +41,14 @@
       padding-inline-start: var(--ui-tree-gutter, 0px);
     }
 
+    :scope[data-move-mode]::after {
+      content: "Choose a destination row, or use Up and Down; Right nests inside a branch. Enter places it, Escape cancels.";
+      display: block;
+      padding: var(--ui-space-2);
+      color: var(--ui-text-secondary);
+      font-size: var(--ui-font-size-sm);
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope[hidden] {
       display: none;

package/tokens.css

@@ -1,4 +1,7 @@
 @layer tokens {
+  /* Optional group values (for example --ui-field-radius and --ui-overlay-surface) are not
+     declared here. A component reads group → global as a fallback chain, so changing a global
+     value remains effective until a consumer deliberately sets the inherited group value. */
   /* 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

package/vanilla/UiAvatar.d.ts

@@ -8,8 +8,10 @@ export interface UiAvatarElement extends HTMLSpanElement {
 export interface UiAvatarProps {
   active?: boolean | null;
   alt?: string | null;
+  decorative?: boolean | null;
   fallback?: string | null;
   name?: string | null;
+  shape?: "circle" | "square" | null;
   size?: "sm" | "md" | null;
   src?: string | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;

package/vanilla/UiAvatar.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-avatar/ui-avatar.js";
 import "../styles/ui-avatar.css";
 
-const definition = {...{"contract":{"tag":"ui-avatar","props":{"active":{"type":"boolean","required":false,"target":{"attribute":"active"},"default":false},"alt":{"type":"string","required":false,"target":{"attribute":"alt"},"default":""},"fallback":{"type":"string","required":false,"target":{"attribute":"fallback"},"default":""},"name":{"type":"string","required":false,"target":{"attribute":"name"},"default":""},"size":{"type":{"enum":["sm","md"]},"required":false,"target":{"attribute":"size"},"default":"md"},"src":{"type":"string","required":false,"target":{"attribute":"src"}}}},"template":{"kind":"element","name":"span","attributes":[],"children":[{"kind":"slot"},{"kind":"element","name":"img","attributes":[{"kind":"literal","name":"class","value":"image"},{"kind":"attribute","name":"src","expression":"src","expressionPlan":{"source":"src","ast":{"kind":"id","name":"src"},"dependencies":["src"]}},{"kind":"literal","name":"alt","value":""},{"kind":"literal","name":"aria-hidden","value":"true"},{"kind":"attribute","name":"hidden","expression":"hasAuthoredImage or not hasImage","expressionPlan":{"source":"hasAuthoredImage or not hasImage","ast":{"kind":"binary","op":"or","left":{"kind":"id","name":"hasAuthoredImage"},"right":{"kind":"unary","op":"not","operand":{"kind":"id","name":"hasImage"}}},"dependencies":["hasAuthoredImage","hasImage"]}}],"children":[],"ref":"image"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"fallback"},{"kind":"attribute","name":"aria-hidden","expression":"hasImage","expressionPlan":{"source":"hasImage","ast":{"kind":"id","name":"hasImage"},"dependencies":["hasImage"]}},{"kind":"attribute","name":"hidden","expression":"hasImage","expressionPlan":{"source":"hasImage","ast":{"kind":"id","name":"hasImage"},"dependencies":["hasImage"]}},{"kind":"directive","name":"value","expression":"initials","expressionPlan":{"source":"initials","ast":{"kind":"id","name":"initials"},"dependencies":["initials"]}}],"children":[]}]},"declarations":[{"kind":"state","name":"hasImage","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"hasAuthoredImage","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"initials","expression":{"source":"'?'","ast":{"kind":"literal","value":"?"},"dependencies":[]}}],"root":{"kind":"native","element":"span","choices":["span"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-avatar","props":{"active":{"type":"boolean","required":false,"target":{"attribute":"active"},"default":false},"alt":{"type":"string","required":false,"target":{"attribute":"alt"},"default":""},"decorative":{"type":"boolean","required":false,"target":{"attribute":"decorative"},"default":false},"fallback":{"type":"string","required":false,"target":{"attribute":"fallback"},"default":""},"name":{"type":"string","required":false,"target":{"attribute":"name"},"default":""},"shape":{"type":{"enum":["circle","square"]},"required":false,"target":{"attribute":"shape"},"default":"circle"},"size":{"type":{"enum":["sm","md"]},"required":false,"target":{"attribute":"size"},"default":"md"},"src":{"type":"string","required":false,"target":{"attribute":"src"}}}},"template":{"kind":"element","name":"span","attributes":[],"children":[{"kind":"slot"},{"kind":"element","name":"img","attributes":[{"kind":"literal","name":"class","value":"image"},{"kind":"attribute","name":"src","expression":"src","expressionPlan":{"source":"src","ast":{"kind":"id","name":"src"},"dependencies":["src"]}},{"kind":"literal","name":"alt","value":""},{"kind":"literal","name":"aria-hidden","value":"true"},{"kind":"attribute","name":"hidden","expression":"hasAuthoredImage or not hasImage","expressionPlan":{"source":"hasAuthoredImage or not hasImage","ast":{"kind":"binary","op":"or","left":{"kind":"id","name":"hasAuthoredImage"},"right":{"kind":"unary","op":"not","operand":{"kind":"id","name":"hasImage"}}},"dependencies":["hasAuthoredImage","hasImage"]}}],"children":[],"ref":"image"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"fallback"},{"kind":"attribute","name":"aria-hidden","expression":"hasImage","expressionPlan":{"source":"hasImage","ast":{"kind":"id","name":"hasImage"},"dependencies":["hasImage"]}},{"kind":"attribute","name":"hidden","expression":"hasImage","expressionPlan":{"source":"hasImage","ast":{"kind":"id","name":"hasImage"},"dependencies":["hasImage"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"attribute","name":"hidden","expression":"showGlyph","expressionPlan":{"source":"showGlyph","ast":{"kind":"id","name":"showGlyph"},"dependencies":["showGlyph"]}},{"kind":"directive","name":"value","expression":"initials","expressionPlan":{"source":"initials","ast":{"kind":"id","name":"initials"},"dependencies":["initials"]}}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"attribute","name":"hidden","expression":"not showGlyph","expressionPlan":{"source":"not showGlyph","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"showGlyph"}},"dependencies":["showGlyph"]}}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"literal","name":"name","value":"user-round"}],"children":[]}]}]}]},"declarations":[{"kind":"state","name":"hasImage","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"hasAuthoredImage","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"initials","expression":{"source":"'?'","ast":{"kind":"literal","value":"?"},"dependencies":[]}},{"kind":"state","name":"showGlyph","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}}],"root":{"kind":"native","element":"span","choices":["span"]}},source:{file:import.meta.url},css:""};
 
 export function createUiAvatar(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
@@ -32,6 +32,13 @@ export function createUiAvatar(options = {}) {
   element.append(element0);
   const element1 = document.createElement("span");
   element1.setAttribute("class", "fallback");
+  const element2 = document.createElement("span");
+  element1.append(element2);
+  const element3 = document.createElement("span");
+  const element4 = document.createElement("ui-icon");
+  element4.setAttribute("name", "user-round");
+  element3.append(element4);
+  element1.append(element3);
   element.append(element1);
   manageComponentLifecycle(element, definition, { props: componentProps, projected,
     controller,

package/vanilla/UiAvatarGroup.d.ts

@@ -8,7 +8,9 @@ export interface UiAvatarGroupElement extends HTMLDivElement {
 export interface UiAvatarGroupProps {
   label?: string | null;
   max?: number | null;
+  overflowLabel?: string | null;
   size?: "sm" | "md" | null;
+  total?: number | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];
   slots?: Readonly<Record<string, readonly (string | Node)[]>>;

package/vanilla/UiAvatarGroup.js

@@ -3,7 +3,7 @@ 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";
 
-const definition = {...{"contract":{"tag":"ui-avatar-group","props":{"label":{"type":"string","required":false,"target":{"attribute":"aria-label"},"default":"People"},"max":{"type":"number","required":false,"target":{"attribute":"max"},"default":5},"size":{"type":{"enum":["sm","md"]},"required":false,"target":{"attribute":"size"},"default":"md"}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"group"},{"kind":"attribute","name":"aria-label","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}],"children":[{"kind":"slot"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"overflow"},{"kind":"literal","name":"role","value":"img"},{"kind":"attribute","name":"hidden","expression":"not overflowCount","expressionPlan":{"source":"not overflowCount","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"overflowCount"}},"dependencies":["overflowCount"]}},{"kind":"attribute","name":"aria-label","expression":"format('%s more', overflowCount)","expressionPlan":{"source":"format('%s more', overflowCount)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s more"},{"kind":"id","name":"overflowCount"}]},"dependencies":["overflowCount"]}}],"children":[{"kind":"element","name":"template","attributes":[{"kind":"directive","name":"value","expression":"format('+%s', overflowCount)","expressionPlan":{"source":"format('+%s', overflowCount)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"+%s"},{"kind":"id","name":"overflowCount"}]},"dependencies":["overflowCount"]}}],"children":[]}],"ref":"overflow"}]},"declarations":[{"kind":"state","name":"overflowCount","expression":{"source":"0","ast":{"kind":"literal","value":0},"dependencies":[]}}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-avatar-group","props":{"label":{"type":"string","required":false,"target":{"attribute":"aria-label"},"default":"People"},"max":{"type":"number","required":false,"target":{"attribute":"max"},"default":5},"overflowLabel":{"type":"string","required":false,"target":{"attribute":"overflowlabel"},"default":"{count} more"},"size":{"type":{"enum":["sm","md"]},"required":false,"target":{"attribute":"size"},"default":"md"},"total":{"type":{"kind":"terminal","name":"integer"},"required":false,"target":{"attribute":"total"}}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"group"},{"kind":"attribute","name":"aria-label","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}],"children":[{"kind":"slot"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"overflow"},{"kind":"literal","name":"role","value":"img"},{"kind":"attribute","name":"hidden","expression":"not overflowCount","expressionPlan":{"source":"not overflowCount","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"overflowCount"}},"dependencies":["overflowCount"]}},{"kind":"attribute","name":"aria-label","expression":"overflowAnnouncement","expressionPlan":{"source":"overflowAnnouncement","ast":{"kind":"id","name":"overflowAnnouncement"},"dependencies":["overflowAnnouncement"]}}],"children":[{"kind":"element","name":"template","attributes":[{"kind":"directive","name":"value","expression":"format('+%s', overflowCount)","expressionPlan":{"source":"format('+%s', overflowCount)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"+%s"},{"kind":"id","name":"overflowCount"}]},"dependencies":["overflowCount"]}}],"children":[]}],"ref":"overflow"}]},"declarations":[{"kind":"state","name":"overflowCount","expression":{"source":"0","ast":{"kind":"literal","value":0},"dependencies":[]}},{"kind":"state","name":"overflowAnnouncement","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
 
 export function createUiAvatarGroup(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;

package/vanilla/UiBadge.d.ts

@@ -8,7 +8,7 @@ export interface UiBadgeElement extends HTMLSpanElement {
 export interface UiBadgeProps {
   shape?: "pill" | "tag" | null;
   tone?: "neutral" | "accent" | "info" | "success" | "warning" | "danger" | null;
-  variant?: "solid" | "subtle" | null;
+  variant?: "solid" | "subtle" | "outline" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];
   slots?: Readonly<Record<string, readonly (string | Node)[]>>;

package/vanilla/UiBadge.js

@@ -25,7 +25,7 @@ export function createUiBadge(options = {}) {
   manageGeneratedProps(element, [
     { name: "shape", attribute: "data-shape", value: componentProps["shape"], default: "pill", type: ["pill","tag"], required: false },
     { name: "tone", attribute: "data-tone", value: componentProps["tone"], default: "neutral", type: ["neutral","accent","info","success","warning","danger"], required: false },
-    { name: "variant", attribute: "data-variant", value: componentProps["variant"], default: "subtle", type: ["solid","subtle"], required: false },
+    { name: "variant", attribute: "data-variant", value: componentProps["variant"], default: "subtle", type: ["solid","subtle","outline"], required: false },
   ]);
   return element;
 }

package/vanilla/UiButton.d.ts

@@ -10,6 +10,7 @@ export interface UiButtonProps {
   as?: "button" | "a" | null;
   disabled?: boolean | null;
   href?: string | null;
+  pending?: boolean | null;
   rel?: string | null;
   size?: "sm" | "md" | "lg" | null;
   stretch?: boolean | null;

package/vanilla/UiButton.js

@@ -1,8 +1,9 @@
 // Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
 import { componentRootIndex, manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
+import * as controller from "../components/ui-button/ui-button.js";
 import "../styles/ui-button.css";
 
-const definition = {...{"contract":{"tag":"ui-button","props":{"align":{"type":{"enum":["center","start"]},"required":false,"target":{"attribute":"align"},"default":"center"},"as":{"type":{"enum":["button","a"]},"required":false,"target":{"attribute":"as"},"default":"button"},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"href":{"type":"string","required":false,"target":{"attribute":"href"}},"rel":{"type":"string","required":false,"target":{"attribute":"rel"}},"size":{"type":{"enum":["sm","md","lg"]},"required":false,"target":{"attribute":"size"},"default":"md"},"stretch":{"type":"boolean","required":false,"target":{"attribute":"stretch"},"default":false},"target":{"type":"string","required":false,"target":{"attribute":"target"}},"tone":{"type":{"enum":["accent","neutral","danger","success","warning","info"]},"required":false,"target":{"attribute":"tone"},"default":"accent"},"type":{"type":{"enum":["button","submit","reset"]},"required":false,"target":{"attribute":"type"},"default":"button"},"variant":{"type":{"enum":["outline","solid","danger","ghost","link"]},"required":false,"target":{"attribute":"variant"},"default":"outline"}}},"template":{"kind":"element","name":"template","attributes":[],"children":[{"kind":"element","name":"a","attributes":[{"kind":"attribute","name":"href","expression":"{ true: null, false: href }[format('%s', disabled)]","expressionPlan":{"source":"{ true: null, false: href }[format('%s', disabled)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":null}},{"key":"false","value":{"kind":"id","name":"href"}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"id","name":"disabled"}]}},"dependencies":["disabled","href"]}},{"kind":"attribute","name":"target","expression":"target","expressionPlan":{"source":"target","ast":{"kind":"id","name":"target"},"dependencies":["target"]}},{"kind":"attribute","name":"rel","expression":"rel","expressionPlan":{"source":"rel","ast":{"kind":"id","name":"rel"},"dependencies":["rel"]}},{"kind":"attribute","name":"aria-disabled","expression":"{ true: 'true', false: null }[format('%s', disabled and href)]","expressionPlan":{"source":"{ true: 'true', false: null }[format('%s', disabled and href)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":"true"}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":"and","left":{"kind":"id","name":"disabled"},"right":{"kind":"id","name":"href"}}]}},"dependencies":["disabled","href"]}}],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'a'","testPlan":{"source":"as = 'a'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"a"}},"dependencies":["as"]}}},{"kind":"element","name":"button","attributes":[{"kind":"attribute","name":"type","expression":"type","expressionPlan":{"source":"type","ast":{"kind":"id","name":"type"},"dependencies":["type"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}}],"children":[{"kind":"slot"}],"flow":{"kind":"else"}}],"flow":{"kind":"match"}},"declarations":[],"root":{"kind":"native","element":"button","choices":["a","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"},"as":{"type":{"enum":["button","a"]},"required":false,"target":{"attribute":"as"},"default":"button"},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"href":{"type":"string","required":false,"target":{"attribute":"href"}},"pending":{"type":"boolean","required":false,"target":{"attribute":"aria-busy"},"default":false},"rel":{"type":"string","required":false,"target":{"attribute":"rel"}},"size":{"type":{"enum":["sm","md","lg"]},"required":false,"target":{"attribute":"size"},"default":"md"},"stretch":{"type":"boolean","required":false,"target":{"attribute":"stretch"},"default":false},"target":{"type":"string","required":false,"target":{"attribute":"target"}},"tone":{"type":{"enum":["accent","neutral","danger","success","warning","info"]},"required":false,"target":{"attribute":"tone"},"default":"accent"},"type":{"type":{"enum":["button","submit","reset"]},"required":false,"target":{"attribute":"type"},"default":"button"},"variant":{"type":{"enum":["outline","solid","danger","ghost","link"]},"required":false,"target":{"attribute":"variant"},"default":"outline"}}},"template":{"kind":"element","name":"template","attributes":[],"children":[{"kind":"element","name":"a","attributes":[{"kind":"attribute","name":"href","expression":"{ true: null, false: href }[format('%s', disabled or pending)]","expressionPlan":{"source":"{ true: null, false: href }[format('%s', disabled or pending)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":null}},{"key":"false","value":{"kind":"id","name":"href"}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":"or","left":{"kind":"id","name":"disabled"},"right":{"kind":"id","name":"pending"}}]}},"dependencies":["disabled","href","pending"]}},{"kind":"attribute","name":"target","expression":"target","expressionPlan":{"source":"target","ast":{"kind":"id","name":"target"},"dependencies":["target"]}},{"kind":"attribute","name":"rel","expression":"rel","expressionPlan":{"source":"rel","ast":{"kind":"id","name":"rel"},"dependencies":["rel"]}},{"kind":"attribute","name":"aria-disabled","expression":"{ true: 'true', false: null }[format('%s', disabled or pending)]","expressionPlan":{"source":"{ true: 'true', false: null }[format('%s', disabled or pending)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":"true"}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":"or","left":{"kind":"id","name":"disabled"},"right":{"kind":"id","name":"pending"}}]}},"dependencies":["disabled","pending"]}},{"kind":"attribute","name":"aria-busy","expression":"pending","expressionPlan":{"source":"pending","ast":{"kind":"id","name":"pending"},"dependencies":["pending"]}},{"kind":"attribute","name":"tabindex","expression":"{ true: '0', false: null }[format('%s', pending and not disabled)]","expressionPlan":{"source":"{ true: '0', false: null }[format('%s', pending and not disabled)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":"0"}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":"and","left":{"kind":"id","name":"pending"},"right":{"kind":"unary","op":"not","operand":{"kind":"id","name":"disabled"}}}]}},"dependencies":["disabled","pending"]}}],"children":[{"kind":"element","name":"ui-spinner","attributes":[{"kind":"literal","name":"size","value":"sm"},{"kind":"literal","name":"class","value":"pending-spinner"}],"children":[],"flow":{"kind":"if","test":"pending","testPlan":{"source":"pending","ast":{"kind":"id","name":"pending"},"dependencies":["pending"]}}},{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'a'","testPlan":{"source":"as = 'a'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"a"}},"dependencies":["as"]}}},{"kind":"element","name":"button","attributes":[{"kind":"attribute","name":"type","expression":"type","expressionPlan":{"source":"type","ast":{"kind":"id","name":"type"},"dependencies":["type"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"aria-disabled","expression":"{ true: 'true', false: null }[format('%s', pending)]","expressionPlan":{"source":"{ true: 'true', false: null }[format('%s', pending)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":"true"}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"id","name":"pending"}]}},"dependencies":["pending"]}},{"kind":"attribute","name":"aria-busy","expression":"pending","expressionPlan":{"source":"pending","ast":{"kind":"id","name":"pending"},"dependencies":["pending"]}}],"children":[{"kind":"element","name":"ui-spinner","attributes":[{"kind":"literal","name":"size","value":"sm"},{"kind":"literal","name":"class","value":"pending-spinner"}],"children":[],"flow":{"kind":"if","test":"pending","testPlan":{"source":"pending","ast":{"kind":"id","name":"pending"},"dependencies":["pending"]}}},{"kind":"slot"}],"flow":{"kind":"else"}}],"flow":{"kind":"match"}},"declarations":[],"root":{"kind":"native","element":"button","choices":["a","button"]}},source:{file:import.meta.url},css:""};
 
 export function createUiButton(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
@@ -21,7 +22,14 @@ export function createUiButton(options = {}) {
     const value1 = componentProps["rel"] === undefined ? undefined : componentProps["rel"];
     if (value1 === null || value1 === undefined) element.removeAttribute("rel");
     else element.setAttribute("rel", String(value1));
+    const value2 = componentProps["pending"] === undefined ? false : componentProps["pending"];
+    if (typeof value2 === "boolean") element.setAttribute("aria-busy", String(value2));
+    else element.removeAttribute("aria-busy");
     element.setAttribute("data-component", "ui-button");
+    const element0 = document.createElement("ui-spinner");
+    element0.setAttribute("size", "sm");
+    element0.setAttribute("class", "pending-spinner");
+    element.append(element0);
     if (children.length > 0) {
       for (const child of children) {
         const node = typeof child === "string" ? document.createTextNode(child) : child;
@@ -36,13 +44,20 @@ export function createUiButton(options = {}) {
       if (value === null || value === undefined || value === false) continue;
       element.setAttribute(name, value === true ? "" : String(value));
     }
-    const value2 = componentProps["type"] === undefined ? "button" : componentProps["type"];
-    if (value2 === null || value2 === undefined) element.removeAttribute("type");
-    else element.setAttribute("type", String(value2));
-    const value3 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
-    if (value3 === true) element.setAttribute("disabled", "");
+    const value3 = componentProps["type"] === undefined ? "button" : componentProps["type"];
+    if (value3 === null || value3 === undefined) element.removeAttribute("type");
+    else element.setAttribute("type", String(value3));
+    const value4 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
+    if (value4 === true) element.setAttribute("disabled", "");
     else element.removeAttribute("disabled");
+    const value5 = componentProps["pending"] === undefined ? false : componentProps["pending"];
+    if (typeof value5 === "boolean") element.setAttribute("aria-busy", String(value5));
+    else element.removeAttribute("aria-busy");
     element.setAttribute("data-component", "ui-button");
+    const element1 = document.createElement("ui-spinner");
+    element1.setAttribute("size", "sm");
+    element1.setAttribute("class", "pending-spinner");
+    element.append(element1);
     if (children.length > 0) {
       for (const child of children) {
         const node = typeof child === "string" ? document.createTextNode(child) : child;
@@ -53,6 +68,7 @@ export function createUiButton(options = {}) {
     }
   }
   manageComponentLifecycle(element, definition, { props: componentProps, projected,
+    controller,
   });
   return element;
 }

package/vanilla/UiCallout.d.ts

@@ -6,7 +6,7 @@ export interface UiCalloutElement extends HTMLDivElement {
   removeEventListener<K extends keyof UiCalloutEventMap>(type: K, listener: (this: UiCalloutElement, event: UiCalloutEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
 }
 export interface UiCalloutProps {
-  tone?: "info" | "note" | "warning" | "success" | "danger" | null;
+  tone?: "info" | "neutral" | "note" | "warning" | "success" | "danger" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];
   slots?: Readonly<Record<string, readonly (string | Node)[]>>;

package/vanilla/UiCallout.js

@@ -2,7 +2,7 @@
 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:""};
+const definition = {...{"contract":{"tag":"ui-callout","props":{"tone":{"type":{"enum":["info","neutral","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 = 'neutral' or tone = 'note'","testPlan":{"source":"tone = 'neutral' or tone = 'note'","ast":{"kind":"binary","op":"or","left":{"kind":"binary","op":"=","left":{"kind":"id","name":"tone"},"right":{"kind":"literal","value":"neutral"}},"right":{"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:""};
 
 export function createUiCallout(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;

package/vanilla/UiCheckbox.d.ts

@@ -10,6 +10,7 @@ export interface UiCheckboxProps {
   checked?: boolean | null;
   disabled?: boolean | null;
   indeterminate?: boolean | null;
+  invalid?: boolean | null;
   name?: string | null;
   required?: boolean | null;
   size?: "sm" | "md" | "lg" | null;