@threadlabs/looma 0.25.4 → 0.25.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.25.4",
+  "version": "0.25.6",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-card.css

@@ -38,6 +38,30 @@
       box-shadow: var(--ui-shadow-lg);
     }
 
+    :scope[data-ui-card-state~="tone=accent"] {
+      border-color: color-mix(in srgb, var(--ui-accent) 25%, var(--ui-border-default));
+      background: color-mix(in srgb, var(--ui-accent) 6%, var(--ui-surface-default));
+    }
+
+    :scope[data-ui-card-state~="tone=info"] {
+      border-color: color-mix(in srgb, var(--ui-info) 25%, var(--ui-border-default));
+      background: color-mix(in srgb, var(--ui-info) 6%, var(--ui-surface-default));
+    }
+
+    :scope[data-ui-card-state~="tone=success"] {
+      border-color: color-mix(in srgb, var(--ui-success) 25%, var(--ui-border-default));
+      background: color-mix(in srgb, var(--ui-success) 6%, var(--ui-surface-default));
+    }
+
+    :scope[data-ui-card-state~="tone=warning"] {
+      border-color: color-mix(in srgb, var(--ui-warning) 25%, var(--ui-border-default));
+      background: color-mix(in srgb, var(--ui-warning) 6%, var(--ui-surface-default));
+    }
+
+    :scope[data-ui-card-state~="variant=subtle"]:is([data-ui-card-state~="tone=accent"], [data-ui-card-state~="tone=info"], [data-ui-card-state~="tone=success"], [data-ui-card-state~="tone=warning"]) {
+      border-color: transparent;
+    }
+
     :scope[data-ui-card-state~="tone=danger"] {
       border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border-default));
       border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger);

package/styles/ui-cluster.css

@@ -17,6 +17,31 @@
       margin: 0;
     }
 
+    :scope[data-ui-cluster-state~="fixed"] {
+      flex: none;
+    }
+    :scope[data-ui-cluster-state~="padding=s"] {
+      padding: var(--ui-space-2);
+    }
+    :scope[data-ui-cluster-state~="padding=m"] {
+      padding: var(--ui-space-3);
+    }
+    :scope[data-ui-cluster-state~="padding=l"] {
+      padding: var(--ui-space-4);
+    }
+    :scope[data-ui-cluster-state~="paddingEnd=s"] {
+      padding-inline-end: var(--ui-space-2);
+    }
+    :scope[data-ui-cluster-state~="paddingEnd=m"] {
+      padding-inline-end: var(--ui-space-3);
+    }
+    :scope[data-ui-cluster-state~="paddingEnd=l"] {
+      padding-inline-end: var(--ui-space-4);
+    }
+    :scope[data-ui-cluster-state~="paddingEnd=xl"] {
+      padding-inline-end: calc(var(--ui-space-4) * 4);
+    }
+
     :scope[data-ui-cluster-state~="gap=xs"] {
       --_layout-gap: var(--ui-space-2);
     }
@@ -38,6 +63,9 @@
     :scope[data-ui-cluster-state~="align=end"] {
       align-items: flex-end;
     }
+    :scope[data-ui-cluster-state~="align=baseline"] {
+      align-items: baseline;
+    }
     :scope[data-ui-cluster-state~="align=stretch"] {
       align-items: stretch;
     }

package/styles/ui-editor-surface.css

@@ -0,0 +1,19 @@
+/* Generated by HTML Next 1.0.0-alpha.29. Do not edit. */
+@scope ([data-component~="ui-editor-surface"]) to ([data-component], [data-slotted]) {
+:scope {
+      display: flex;
+      flex-direction: column;
+      min-inline-size: 0;
+      max-inline-size: 100%;
+    }
+    /* The document renderer consumes these inherited surface settings. They do not style controls. */
+    :scope[data-ui-editor-surface-state~="density=compact"] {
+      --_ui-editor-content-min-height: 0px;
+      --_ui-editor-content-padding-block: 0px;
+      --_ui-editor-content-padding-inline: 0px;
+      --_ui-editor-mobile-bottom-space: 0px;
+    }
+}
+@scope ([data-component~="ui-editor-surface"]) to ([data-component]) {
+/* The document renderer consumes these inherited surface settings. They do not style controls. */
+}

package/styles/ui-list-item.css

@@ -53,11 +53,11 @@
       background: var(--ui-surface-raised);
     }
 
-    :scope:has(.title a[href]:hover) {
-      background: var(--ui-surface-hover);
+    :scope:where(:has(.title a[href])):hover {
+      background: var(--ui-selection-surface);
     }
 
-    :scope[data-ui-list-item-state~="variant=card"]:has(.title a[href]:hover) {
+    :scope[data-ui-list-item-state~="variant=card"]:where(:has(.title a[href])):hover {
       border-color: var(--ui-border-strong);
     }
 
@@ -91,6 +91,12 @@
       color: var(--ui-selection-text);
     }
 
+    /* An explicitly independent leading control sits above the stretched row link. */
+    :scope[data-ui-list-item-state~="leadingInteractive"] .leading {
+      position: relative;
+      z-index: 1;
+    }
+
     /* Trailing controls take their own clicks, above the title link's stretched hit area. */
     .trailing {
       position: relative;
@@ -170,6 +176,8 @@
        a router, a modified click, and "open in new tab" all work. Trailing controls sit above it and
        stay their own. */
 
+    /* An explicitly independent leading control sits above the stretched row link. */
+
     /* Trailing controls take their own clicks, above the title link's stretched hit area. */
 
     .title > :where([data-slotted], [data-slotted] *):is(a) {

package/styles/ui-scroll-area.css

@@ -3,6 +3,10 @@
 /* The controller sets each fade length from overflow and scroll position. The mask blends
        into whatever is behind the area without needing to know its colour. Before upgrade, its
        zero-length defaults leave the authored scroll area fully visible. */
+    :scope[data-ui-scroll-area-state~="fill"] {
+      flex: 1;
+    }
+
     :scope {
       display: block;
       box-sizing: border-box;

package/styles/ui-stack.css

@@ -1,4 +1,8 @@
 /* Generated by HTML Next 1.0.0-alpha.29. Do not edit. */
+@property --ui-stack-height {
+      syntax: "*";
+      inherits: false;
+    }
 @property --ui-stack-gap {
       syntax: "*";
       inherits: false;
@@ -17,6 +21,15 @@
       margin: 0;
     }
 
+    :scope[data-ui-stack-state~="fill"] {
+      flex: 1;
+      min-block-size: 0;
+    }
+    :scope[data-ui-stack-state~="height"] {
+      block-size: calc(var(--ui-stack-height, 0) * 1px);
+      min-block-size: 0;
+    }
+
     :scope[data-ui-stack-state~="gap=none"] {
       --_layout-gap: 0px;
     }

package/styles/ui-text.css

@@ -3,6 +3,10 @@
 /* Running text, set on the type scale and in a tone that says what it is, so a view never styles
        text of its own. The root is a paragraph unless as= names a span, div, small, strong, label, or
        heading. */
+    :scope[data-ui-text-state~="grow"] {
+      flex: 1;
+    }
+
     :scope {
       margin: 0;
       min-inline-size: 0;

package/styles/ui-textarea.css

@@ -139,6 +139,10 @@
       font-size: var(--ui-font-size-md);
     }
 
+    :scope[data-ui-textarea-state~="maxRows"] {
+      max-block-size: calc(max(var(--_rows), var(--_max-rows)) * 1lh + var(--_padding-block) + var(--_padding-block) + 2px);
+    }
+
     @supports (field-sizing: content) {
       :scope[data-ui-textarea-state~="autosize"] {
         field-sizing: content;

package/vanilla/UiCard.d.ts

@@ -9,7 +9,7 @@ export interface UiCardProps {
   as?: "div" | "section" | "article" | "aside" | null;
   padding?: "xs" | "sm" | "md" | "lg" | null;
   size?: "content" | "sm" | "md" | "lg" | null;
-  tone?: "neutral" | "danger" | null;
+  tone?: "neutral" | "accent" | "info" | "success" | "warning" | "danger" | null;
   variant?: "outlined" | "subtle" | "elevated" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];

package/vanilla/UiCard.js

@@ -2,7 +2,7 @@
 import { componentRootIndex, manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import "../styles/ui-card.css";
 
-const definition = {...{"contract":{"tag":"ui-card","props":{"as":{"type":{"kind":"terminal","name":"keyword"},"values":["div","section","article","aside"],"required":false,"target":{"attribute":"as"},"default":"div"},"padding":{"type":{"kind":"terminal","name":"keyword"},"values":["xs","sm","md","lg"],"required":false,"target":{"attribute":"padding"},"default":"md"},"size":{"type":{"kind":"terminal","name":"keyword"},"values":["content","sm","md","lg"],"required":false,"target":{"attribute":"size"},"default":"content"},"tone":{"type":{"kind":"terminal","name":"keyword"},"values":["neutral","danger"],"required":false,"target":{"attribute":"tone"},"default":"neutral"},"variant":{"type":{"kind":"terminal","name":"keyword"},"values":["outlined","subtle","elevated"],"required":false,"target":{"attribute":"variant"},"default":"outlined"}}},"template":{"kind":"element","name":"template","attributes":[],"children":[{"kind":"element","name":"section","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'section'","testPlan":{"source":"as = 'section'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"section"}},"dependencies":["as"]}}},{"kind":"element","name":"article","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'article'","testPlan":{"source":"as = 'article'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"article"}},"dependencies":["as"]}}},{"kind":"element","name":"aside","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'aside'","testPlan":{"source":"as = 'aside'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"aside"}},"dependencies":["as"]}}},{"kind":"element","name":"div","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"else"}}],"flow":{"kind":"match"}},"declarations":[],"root":{"kind":"native","element":"div","choices":["section","article","aside","div"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-card","props":{"as":{"type":{"kind":"terminal","name":"keyword"},"values":["div","section","article","aside"],"required":false,"target":{"attribute":"as"},"default":"div"},"padding":{"type":{"kind":"terminal","name":"keyword"},"values":["xs","sm","md","lg"],"required":false,"target":{"attribute":"padding"},"default":"md"},"size":{"type":{"kind":"terminal","name":"keyword"},"values":["content","sm","md","lg"],"required":false,"target":{"attribute":"size"},"default":"content"},"tone":{"type":{"kind":"terminal","name":"keyword"},"values":["neutral","accent","info","success","warning","danger"],"required":false,"target":{"attribute":"tone"},"default":"neutral"},"variant":{"type":{"kind":"terminal","name":"keyword"},"values":["outlined","subtle","elevated"],"required":false,"target":{"attribute":"variant"},"default":"outlined"}}},"template":{"kind":"element","name":"template","attributes":[],"children":[{"kind":"element","name":"section","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'section'","testPlan":{"source":"as = 'section'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"section"}},"dependencies":["as"]}}},{"kind":"element","name":"article","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'article'","testPlan":{"source":"as = 'article'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"article"}},"dependencies":["as"]}}},{"kind":"element","name":"aside","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'aside'","testPlan":{"source":"as = 'aside'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"aside"}},"dependencies":["as"]}}},{"kind":"element","name":"div","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"else"}}],"flow":{"kind":"match"}},"declarations":[],"root":{"kind":"native","element":"div","choices":["section","article","aside","div"]}},source:{file:import.meta.url},css:""};
 
 export function createUiCard(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;

package/vanilla/UiCheckbox.d.ts

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

package/vanilla/UiCheckbox.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-checkbox/ui-checkbox.js";
 import "../styles/ui-checkbox.css";
 
-const definition = {...{"contract":{"tag":"ui-checkbox","props":{"checked":{"type":"boolean","required":false,"target":{"attribute":"checked"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"indeterminate":{"type":"boolean","required":false,"target":{"property":"indeterminate"},"default":false},"invalid":{"type":"boolean","required":false,"target":{"attribute":"aria-invalid"},"default":false},"name":{"type":"string","required":false,"target":{"attribute":"name"},"default":""},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"size":{"type":{"kind":"terminal","name":"keyword"},"values":["sm","md","lg"],"required":false,"target":{"attribute":"size"},"default":"md"},"value":{"type":"string","required":false,"target":{"attribute":"value"},"default":"on"}}},"template":{"kind":"element","name":"label","attributes":[],"children":[{"kind":"element","name":"input","attributes":[{"kind":"literal","name":"type","value":"checkbox"},{"kind":"property","key":"checked","name":"checked","expression":"internalChecked","expressionPlan":{"source":"internalChecked","ast":{"kind":"id","name":"internalChecked"},"dependencies":["internalChecked"]}},{"kind":"property","key":"indeterminate","name":"indeterminate","expression":"indeterminate","expressionPlan":{"source":"indeterminate","ast":{"kind":"id","name":"indeterminate"},"dependencies":["indeterminate"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"aria-invalid","expression":"invalid","expressionPlan":{"source":"invalid","ast":{"kind":"id","name":"invalid"},"dependencies":["invalid"]}},{"kind":"attribute","name":"required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"name","expression":"name","expressionPlan":{"source":"name","ast":{"kind":"id","name":"name"},"dependencies":["name"]}},{"kind":"attribute","name":"value","expression":"value","expressionPlan":{"source":"value","ast":{"kind":"id","name":"value"},"dependencies":["value"]}}],"children":[],"ref":"input"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"text"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label"}],"children":[{"kind":"slot"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"description"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[{"kind":"slot","fallback":[],"name":"description"}],"ref":"description"}]}]},"declarations":[{"kind":"state","name":"internalChecked","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"change","type":"object","shape":{"kind":"object","fields":[{"name":"checked","type":{"kind":"terminal","name":"boolean"},"optional":false},{"name":"value","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"label","choices":["label"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-checkbox","props":{"checked":{"type":"boolean","required":false,"target":{"attribute":"checked"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"indeterminate":{"type":"boolean","required":false,"target":{"property":"indeterminate"},"default":false},"invalid":{"type":"boolean","required":false,"target":{"attribute":"aria-invalid"},"default":false},"label":{"type":"string","required":false,"target":{"attribute":"aria-label"},"default":""},"name":{"type":"string","required":false,"target":{"attribute":"name"},"default":""},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"size":{"type":{"kind":"terminal","name":"keyword"},"values":["sm","md","lg"],"required":false,"target":{"attribute":"size"},"default":"md"},"value":{"type":"string","required":false,"target":{"attribute":"value"},"default":"on"}}},"template":{"kind":"element","name":"label","attributes":[],"children":[{"kind":"element","name":"input","attributes":[{"kind":"literal","name":"type","value":"checkbox"},{"kind":"attribute","name":"aria-label","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}},{"kind":"property","key":"checked","name":"checked","expression":"internalChecked","expressionPlan":{"source":"internalChecked","ast":{"kind":"id","name":"internalChecked"},"dependencies":["internalChecked"]}},{"kind":"property","key":"indeterminate","name":"indeterminate","expression":"indeterminate","expressionPlan":{"source":"indeterminate","ast":{"kind":"id","name":"indeterminate"},"dependencies":["indeterminate"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"aria-invalid","expression":"invalid","expressionPlan":{"source":"invalid","ast":{"kind":"id","name":"invalid"},"dependencies":["invalid"]}},{"kind":"attribute","name":"required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"name","expression":"name","expressionPlan":{"source":"name","ast":{"kind":"id","name":"name"},"dependencies":["name"]}},{"kind":"attribute","name":"value","expression":"value","expressionPlan":{"source":"value","ast":{"kind":"id","name":"value"},"dependencies":["value"]}}],"children":[],"ref":"input"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"text"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label"}],"children":[{"kind":"slot"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"description"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[{"kind":"slot","fallback":[],"name":"description"}],"ref":"description"}]}]},"declarations":[{"kind":"state","name":"internalChecked","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"change","type":"object","shape":{"kind":"object","fields":[{"name":"checked","type":{"kind":"terminal","name":"boolean"},"optional":false},{"name":"value","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"label","choices":["label"]}},source:{file:import.meta.url},css:""};
 
 export function createUiCheckbox(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
@@ -16,23 +16,26 @@ export function createUiCheckbox(options = {}) {
   element.setAttribute("data-component", "ui-checkbox");
   const element0 = document.createElement("input");
   element0.setAttribute("type", "checkbox");
-  const value0 = componentProps["indeterminate"] === undefined ? false : componentProps["indeterminate"];
-  if (value0 !== undefined) element0["indeterminate"] = value0;
-  const value1 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
-  if (value1 === true) element0.setAttribute("disabled", "");
+  const value0 = componentProps["label"] === undefined ? "" : componentProps["label"];
+  if (value0 === null || value0 === undefined) element0.removeAttribute("aria-label");
+  else element0.setAttribute("aria-label", String(value0));
+  const value1 = componentProps["indeterminate"] === undefined ? false : componentProps["indeterminate"];
+  if (value1 !== undefined) element0["indeterminate"] = value1;
+  const value2 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
+  if (value2 === true) element0.setAttribute("disabled", "");
   else element0.removeAttribute("disabled");
-  const value2 = componentProps["invalid"] === undefined ? false : componentProps["invalid"];
-  if (typeof value2 === "boolean") element0.setAttribute("aria-invalid", String(value2));
+  const value3 = componentProps["invalid"] === undefined ? false : componentProps["invalid"];
+  if (typeof value3 === "boolean") element0.setAttribute("aria-invalid", String(value3));
   else element0.removeAttribute("aria-invalid");
-  const value3 = componentProps["required"] === undefined ? false : componentProps["required"];
-  if (value3 === true) element0.setAttribute("required", "");
+  const value4 = componentProps["required"] === undefined ? false : componentProps["required"];
+  if (value4 === true) element0.setAttribute("required", "");
   else element0.removeAttribute("required");
-  const value4 = componentProps["name"] === undefined ? "" : componentProps["name"];
-  if (value4 === null || value4 === undefined) element0.removeAttribute("name");
-  else element0.setAttribute("name", String(value4));
-  const value5 = componentProps["value"] === undefined ? "on" : componentProps["value"];
-  if (value5 === null || value5 === undefined) element0.removeAttribute("value");
-  else element0.setAttribute("value", String(value5));
+  const value5 = componentProps["name"] === undefined ? "" : componentProps["name"];
+  if (value5 === null || value5 === undefined) element0.removeAttribute("name");
+  else element0.setAttribute("name", String(value5));
+  const value6 = componentProps["value"] === undefined ? "on" : componentProps["value"];
+  if (value6 === null || value6 === undefined) element0.removeAttribute("value");
+  else element0.setAttribute("value", String(value6));
   element.append(element0);
   const element1 = document.createElement("span");
   element1.setAttribute("class", "text");

package/vanilla/UiCluster.d.ts

@@ -6,9 +6,12 @@ export interface UiClusterElement extends HTMLDivElement {
   removeEventListener<K extends keyof UiClusterEventMap>(type: K, listener: (this: UiClusterElement, event: UiClusterEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
 }
 export interface UiClusterProps {
-  align?: "start" | "center" | "end" | "stretch" | null;
+  align?: "start" | "center" | "end" | "stretch" | "baseline" | null;
+  fixed?: boolean | null;
   gap?: "xs" | "s" | "m" | "l" | "xl" | null;
   justify?: "start" | "center" | "end" | "between" | null;
+  padding?: "none" | "s" | "m" | "l" | null;
+  paddingEnd?: "none" | "s" | "m" | "l" | "xl" | null;
   wrap?: "wrap" | "nowrap" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];

package/vanilla/UiCluster.js

@@ -6,9 +6,12 @@ export function createUiCluster(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
   const projected = [];
   const prop0 = componentProps["align"] === undefined ? undefined : componentProps["align"];
-  const prop1 = componentProps["gap"] === undefined ? undefined : componentProps["gap"];
-  const prop2 = componentProps["justify"] === undefined ? undefined : componentProps["justify"];
-  const prop3 = componentProps["wrap"] === undefined ? undefined : componentProps["wrap"];
+  const prop1 = componentProps["fixed"] === undefined ? false : componentProps["fixed"];
+  const prop2 = componentProps["gap"] === undefined ? undefined : componentProps["gap"];
+  const prop3 = componentProps["justify"] === undefined ? undefined : componentProps["justify"];
+  const prop4 = componentProps["padding"] === undefined ? "none" : componentProps["padding"];
+  const prop5 = componentProps["paddingEnd"] === undefined ? "none" : componentProps["paddingEnd"];
+  const prop6 = componentProps["wrap"] === undefined ? undefined : componentProps["wrap"];
   const element = document.createElement("div");
   for (const [name, value] of Object.entries(attributes)) {
     if (value === null || value === undefined || value === false) continue;
@@ -25,9 +28,12 @@ export function createUiCluster(options = {}) {
   } else {
   }
   manageGeneratedProps(element, [
-    { name: "align", attribute: "data-align", value: componentProps["align"], type: ["start","center","end","stretch"], required: false },
+    { name: "align", attribute: "data-align", value: componentProps["align"], type: ["start","center","end","stretch","baseline"], required: false },
+    { name: "fixed", attribute: "data-fixed", value: componentProps["fixed"], default: false, type: "boolean", required: false },
     { name: "gap", attribute: "data-gap", value: componentProps["gap"], type: ["xs","s","m","l","xl"], required: false },
     { name: "justify", attribute: "data-justify", value: componentProps["justify"], type: ["start","center","end","between"], required: false },
+    { name: "padding", attribute: "data-padding", value: componentProps["padding"], default: "none", type: ["none","s","m","l"], required: false },
+    { name: "paddingEnd", attribute: "data-padding-end", value: componentProps["paddingEnd"], default: "none", type: ["none","s","m","l","xl"], required: false },
     { name: "wrap", attribute: "data-wrap", value: componentProps["wrap"], type: ["wrap","nowrap"], required: false },
   ]);
   return element;

package/vanilla/UiEditorSurface.d.ts

@@ -0,0 +1,14 @@
+// Generated by HTML Next 1.0.0-alpha.29 for Vanilla DOM. Do not edit.
+export interface UiEditorSurfaceEventMap {
+}
+export interface UiEditorSurfaceElement extends HTMLDivElement {
+  addEventListener<K extends keyof UiEditorSurfaceEventMap>(type: K, listener: (this: UiEditorSurfaceElement, event: UiEditorSurfaceEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiEditorSurfaceEventMap>(type: K, listener: (this: UiEditorSurfaceElement, event: UiEditorSurfaceEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiEditorSurfaceProps {
+  density?: "comfortable" | "compact" | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+}
+export declare function createUiEditorSurface(props?: UiEditorSurfaceProps): UiEditorSurfaceElement;

package/vanilla/UiEditorSurface.js

@@ -0,0 +1,27 @@
+// Generated by HTML Next 1.0.0-alpha.29 for Vanilla DOM. Do not edit.
+import { manageGeneratedProp } from "@nextwebwg/html-next/generated-runtime";
+import "../styles/ui-editor-surface.css";
+
+export function createUiEditorSurface(options = {}) {
+  const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
+  const projected = [];
+  const prop0 = componentProps["density"] === undefined ? "comfortable" : componentProps["density"];
+  const element = document.createElement("div");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === undefined || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("data-component", "ui-editor-surface");
+  if (children.length > 0) {
+    for (const child of children) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      if (node.nodeType === 1) node.setAttribute("data-slotted", "");
+      projected.push([node, ""]);
+      element.append(node);
+    }
+  } else {
+  }
+  manageGeneratedProp(element, { name: "density", attribute: "data-density", value: componentProps["density"], default: "comfortable", type: ["comfortable","compact"], required: false });
+  return element;
+}
+

package/vanilla/UiListItem.d.ts

@@ -8,6 +8,7 @@ export interface UiListItemElement extends HTMLLIElement {
 export interface UiListItemProps {
   current?: boolean | null;
   highlighted?: boolean | null;
+  leadingInteractive?: boolean | null;
   variant?: "row" | "card" | null;
   wrap?: boolean | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;

package/vanilla/UiListItem.js

@@ -7,8 +7,9 @@ export function createUiListItem(options = {}) {
   const projected = [];
   const prop0 = componentProps["current"] === undefined ? false : componentProps["current"];
   const prop1 = componentProps["highlighted"] === undefined ? false : componentProps["highlighted"];
-  const prop2 = componentProps["variant"] === undefined ? "row" : componentProps["variant"];
-  const prop3 = componentProps["wrap"] === undefined ? false : componentProps["wrap"];
+  const prop2 = componentProps["leadingInteractive"] === undefined ? false : componentProps["leadingInteractive"];
+  const prop3 = componentProps["variant"] === undefined ? "row" : componentProps["variant"];
+  const prop4 = componentProps["wrap"] === undefined ? false : componentProps["wrap"];
   const element = document.createElement("li");
   for (const [name, value] of Object.entries(attributes)) {
     if (value === null || value === undefined || value === false) continue;
@@ -72,6 +73,7 @@ export function createUiListItem(options = {}) {
   manageGeneratedProps(element, [
     { name: "current", attribute: "data-current", value: componentProps["current"], default: false, type: "boolean", required: false },
     { name: "highlighted", attribute: "data-highlighted", value: componentProps["highlighted"], default: false, type: "boolean", required: false },
+    { name: "leadingInteractive", attribute: "data-leading-interactive", value: componentProps["leadingInteractive"], default: false, type: "boolean", required: false },
     { name: "variant", attribute: "data-variant", value: componentProps["variant"], default: "row", type: ["row","card"], required: false },
     { name: "wrap", attribute: "data-wrap", value: componentProps["wrap"], default: false, type: "boolean", required: false },
   ], (name, value) => {

package/vanilla/UiScrollArea.d.ts

@@ -6,6 +6,7 @@ export interface UiScrollAreaElement extends HTMLDivElement {
   removeEventListener<K extends keyof UiScrollAreaEventMap>(type: K, listener: (this: UiScrollAreaElement, event: UiScrollAreaEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
 }
 export interface UiScrollAreaProps {
+  fill?: boolean | null;
   orientation?: "vertical" | "horizontal" | null;
   size?: "content" | "sm" | "md" | "lg" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;

package/vanilla/UiScrollArea.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-scroll-area/ui-scroll-area.js";
 import "../styles/ui-scroll-area.css";
 
-const definition = {...{"contract":{"tag":"ui-scroll-area","props":{"orientation":{"type":{"kind":"terminal","name":"keyword"},"values":["vertical","horizontal"],"required":false,"target":{"attribute":"orientation"},"default":"vertical"},"size":{"type":{"kind":"terminal","name":"keyword"},"values":["content","sm","md","lg"],"required":false,"target":{"attribute":"size"},"default":"content"}}},"template":{"kind":"element","name":"div","attributes":[],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"content"}],"children":[{"kind":"slot"}],"ref":"content"}]},"declarations":[],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-scroll-area","props":{"fill":{"type":"boolean","required":false,"target":{"attribute":"fill"},"default":false},"orientation":{"type":{"kind":"terminal","name":"keyword"},"values":["vertical","horizontal"],"required":false,"target":{"attribute":"orientation"},"default":"vertical"},"size":{"type":{"kind":"terminal","name":"keyword"},"values":["content","sm","md","lg"],"required":false,"target":{"attribute":"size"},"default":"content"}}},"template":{"kind":"element","name":"div","attributes":[],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"content"}],"children":[{"kind":"slot"}],"ref":"content"}]},"declarations":[],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
 
 export function createUiScrollArea(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;

package/vanilla/UiStack.d.ts

@@ -7,7 +7,9 @@ export interface UiStackElement extends HTMLDivElement {
 }
 export interface UiStackProps {
   align?: "start" | "center" | "end" | "stretch" | null;
+  fill?: boolean | null;
   gap?: "none" | "xs" | "s" | "m" | "l" | "xl" | null;
+  height?: number | null;
   justify?: "start" | "center" | "end" | "between" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];

package/vanilla/UiStack.js

@@ -1,18 +1,20 @@
 // Generated by HTML Next 1.0.0-alpha.29 for Vanilla DOM. Do not edit.
-import { manageGeneratedProps } from "@nextwebwg/html-next/generated-runtime";
+import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import "../styles/ui-stack.css";
 
+const definition = {...{"contract":{"tag":"ui-stack","props":{"align":{"type":{"kind":"terminal","name":"keyword"},"values":["start","center","end","stretch"],"required":false,"target":{"attribute":"align"}},"fill":{"type":"boolean","required":false,"target":{"attribute":"fill"},"default":false},"gap":{"type":{"kind":"terminal","name":"keyword"},"values":["none","xs","s","m","l","xl"],"required":false,"target":{"attribute":"gap"}},"height":{"type":"number","required":false,"target":{"attribute":"height"}},"justify":{"type":{"kind":"terminal","name":"keyword"},"values":["start","center","end","between"],"required":false,"target":{"attribute":"justify"}}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"attribute","name":"--ui-stack-height","expression":"height","expressionPlan":{"source":"height","ast":{"kind":"id","name":"height"},"dependencies":["height"]},"target":"style"}],"children":[{"kind":"slot"}]},"declarations":[],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+
 export function createUiStack(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
   const projected = [];
-  const prop0 = componentProps["align"] === undefined ? undefined : componentProps["align"];
-  const prop1 = componentProps["gap"] === undefined ? undefined : componentProps["gap"];
-  const prop2 = componentProps["justify"] === undefined ? undefined : componentProps["justify"];
   const element = document.createElement("div");
   for (const [name, value] of Object.entries(attributes)) {
     if (value === null || value === undefined || value === false) continue;
     element.setAttribute(name, value === true ? "" : String(value));
   }
+  const value0 = componentProps["height"] === undefined ? null : componentProps["height"];
+  if (value0 === null || value0 === undefined) element.removeAttribute("--ui-stack-height");
+  else element.setAttribute("--ui-stack-height", String(value0));
   element.setAttribute("data-component", "ui-stack");
   if (children.length > 0) {
     for (const child of children) {
@@ -23,11 +25,8 @@ export function createUiStack(options = {}) {
     }
   } else {
   }
-  manageGeneratedProps(element, [
-    { name: "align", attribute: "data-align", value: componentProps["align"], type: ["start","center","end","stretch"], required: false },
-    { name: "gap", attribute: "data-gap", value: componentProps["gap"], type: ["none","xs","s","m","l","xl"], required: false },
-    { name: "justify", attribute: "data-justify", value: componentProps["justify"], type: ["start","center","end","between"], required: false },
-  ]);
+  manageComponentLifecycle(element, definition, { props: componentProps, projected,
+  });
   return element;
 }
 

package/vanilla/UiText.d.ts

@@ -9,6 +9,7 @@ export interface UiTextProps {
   align?: "start" | "center" | null;
   as?: "p" | "span" | "div" | "small" | "strong" | "label" | "h2" | "h3" | "h4" | "h5" | "h6" | null;
   font?: "inherit" | "sans" | null;
+  grow?: boolean | null;
   size?: "inherit" | "xs" | "sm" | "md" | "lg" | null;
   tone?: "default" | "secondary" | "muted" | "accent" | "danger" | "success" | "info" | "warning" | null;
   truncate?: boolean | null;

package/vanilla/UiText.js

@@ -2,7 +2,7 @@
 import { componentRootIndex, manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import "../styles/ui-text.css";
 
-const definition = {...{"contract":{"tag":"ui-text","props":{"align":{"type":{"kind":"terminal","name":"keyword"},"values":["start","center"],"required":false,"target":{"attribute":"align"},"default":"start"},"as":{"type":{"kind":"terminal","name":"keyword"},"values":["p","span","div","small","strong","label","h2","h3","h4","h5","h6"],"required":false,"target":{"attribute":"as"},"default":"p"},"font":{"type":{"kind":"terminal","name":"keyword"},"values":["inherit","sans"],"required":false,"target":{"attribute":"font"},"default":"inherit"},"size":{"type":{"kind":"terminal","name":"keyword"},"values":["inherit","xs","sm","md","lg"],"required":false,"target":{"attribute":"size"},"default":"inherit"},"tone":{"type":{"kind":"terminal","name":"keyword"},"values":["default","secondary","muted","accent","danger","success","info","warning"],"required":false,"target":{"attribute":"tone"},"default":"default"},"truncate":{"type":"boolean","required":false,"target":{"attribute":"truncate"},"default":false},"variant":{"type":{"kind":"terminal","name":"keyword"},"values":["body","eyebrow","code"],"required":false,"target":{"attribute":"variant"},"default":"body"},"weight":{"type":{"kind":"terminal","name":"keyword"},"values":["inherit","normal","medium","semibold"],"required":false,"target":{"attribute":"weight"},"default":"inherit"},"wrap":{"type":{"kind":"terminal","name":"keyword"},"values":["normal","anywhere"],"required":false,"target":{"attribute":"wrap"},"default":"normal"}}},"template":{"kind":"element","name":"template","attributes":[],"children":[{"kind":"element","name":"span","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'span'","testPlan":{"source":"as = 'span'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"span"}},"dependencies":["as"]}}},{"kind":"element","name":"div","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'div'","testPlan":{"source":"as = 'div'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"div"}},"dependencies":["as"]}}},{"kind":"element","name":"small","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'small'","testPlan":{"source":"as = 'small'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"small"}},"dependencies":["as"]}}},{"kind":"element","name":"strong","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'strong'","testPlan":{"source":"as = 'strong'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"strong"}},"dependencies":["as"]}}},{"kind":"element","name":"label","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'label'","testPlan":{"source":"as = 'label'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"label"}},"dependencies":["as"]}}},{"kind":"element","name":"h2","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'h2'","testPlan":{"source":"as = 'h2'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"h2"}},"dependencies":["as"]}}},{"kind":"element","name":"h3","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'h3'","testPlan":{"source":"as = 'h3'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"h3"}},"dependencies":["as"]}}},{"kind":"element","name":"h4","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'h4'","testPlan":{"source":"as = 'h4'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"h4"}},"dependencies":["as"]}}},{"kind":"element","name":"h5","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'h5'","testPlan":{"source":"as = 'h5'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"h5"}},"dependencies":["as"]}}},{"kind":"element","name":"h6","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'h6'","testPlan":{"source":"as = 'h6'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"h6"}},"dependencies":["as"]}}},{"kind":"element","name":"p","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"else"}}],"flow":{"kind":"match"}},"declarations":[],"root":{"kind":"native","element":"p","choices":["span","div","small","strong","label","h2","h3","h4","h5","h6","p"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-text","props":{"align":{"type":{"kind":"terminal","name":"keyword"},"values":["start","center"],"required":false,"target":{"attribute":"align"},"default":"start"},"as":{"type":{"kind":"terminal","name":"keyword"},"values":["p","span","div","small","strong","label","h2","h3","h4","h5","h6"],"required":false,"target":{"attribute":"as"},"default":"p"},"font":{"type":{"kind":"terminal","name":"keyword"},"values":["inherit","sans"],"required":false,"target":{"attribute":"font"},"default":"inherit"},"grow":{"type":"boolean","required":false,"target":{"attribute":"grow"},"default":false},"size":{"type":{"kind":"terminal","name":"keyword"},"values":["inherit","xs","sm","md","lg"],"required":false,"target":{"attribute":"size"},"default":"inherit"},"tone":{"type":{"kind":"terminal","name":"keyword"},"values":["default","secondary","muted","accent","danger","success","info","warning"],"required":false,"target":{"attribute":"tone"},"default":"default"},"truncate":{"type":"boolean","required":false,"target":{"attribute":"truncate"},"default":false},"variant":{"type":{"kind":"terminal","name":"keyword"},"values":["body","eyebrow","code"],"required":false,"target":{"attribute":"variant"},"default":"body"},"weight":{"type":{"kind":"terminal","name":"keyword"},"values":["inherit","normal","medium","semibold"],"required":false,"target":{"attribute":"weight"},"default":"inherit"},"wrap":{"type":{"kind":"terminal","name":"keyword"},"values":["normal","anywhere"],"required":false,"target":{"attribute":"wrap"},"default":"normal"}}},"template":{"kind":"element","name":"template","attributes":[],"children":[{"kind":"element","name":"span","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'span'","testPlan":{"source":"as = 'span'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"span"}},"dependencies":["as"]}}},{"kind":"element","name":"div","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'div'","testPlan":{"source":"as = 'div'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"div"}},"dependencies":["as"]}}},{"kind":"element","name":"small","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'small'","testPlan":{"source":"as = 'small'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"small"}},"dependencies":["as"]}}},{"kind":"element","name":"strong","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'strong'","testPlan":{"source":"as = 'strong'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"strong"}},"dependencies":["as"]}}},{"kind":"element","name":"label","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'label'","testPlan":{"source":"as = 'label'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"label"}},"dependencies":["as"]}}},{"kind":"element","name":"h2","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'h2'","testPlan":{"source":"as = 'h2'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"h2"}},"dependencies":["as"]}}},{"kind":"element","name":"h3","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'h3'","testPlan":{"source":"as = 'h3'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"h3"}},"dependencies":["as"]}}},{"kind":"element","name":"h4","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'h4'","testPlan":{"source":"as = 'h4'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"h4"}},"dependencies":["as"]}}},{"kind":"element","name":"h5","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'h5'","testPlan":{"source":"as = 'h5'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"h5"}},"dependencies":["as"]}}},{"kind":"element","name":"h6","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'h6'","testPlan":{"source":"as = 'h6'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"h6"}},"dependencies":["as"]}}},{"kind":"element","name":"p","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"else"}}],"flow":{"kind":"match"}},"declarations":[],"root":{"kind":"native","element":"p","choices":["span","div","small","strong","label","h2","h3","h4","h5","h6","p"]}},source:{file:import.meta.url},css:""};
 
 export function createUiText(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;

package/vanilla/UiTextarea.d.ts

@@ -9,6 +9,7 @@ export interface UiTextareaProps {
   autosize?: boolean | null;
   disabled?: boolean | null;
   invalid?: boolean | null;
+  maxRows?: number | null;
   readonly?: boolean | null;
   required?: boolean | null;
   rows?: number | null;