@threadlabs/looma 0.25.3 → 0.25.5

package/package.json

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

package/styles/ui-badge.css

@@ -73,6 +73,7 @@
       display: inline-flex;
       align-items: center;
       justify-content: center;
+      gap: var(--ui-space-1);
       box-sizing: border-box;
       min-inline-size: 0;
       max-inline-size: 100%;
@@ -97,8 +98,30 @@
       text-overflow: ellipsis;
     }
 
-    /* Trim leading while retaining the font's ascent and descent. A cap-to-baseline box
-       would crop glyphs where the label clips horizontal overflow for ellipsis. */
+    .label:empty {
+      display: none;
+    }
+
+    /* Icon content has its own flex item so label ellipsis never clips its strokes. */
+    .icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex: none;
+    }
+
+    .icon:empty {
+      display: none;
+    }
+
+    /* Ordinary icon-plus-text children keep inline ellipsis, with explicit glyph spacing. */
+
+    .label:has(svg) {
+      text-box-trim: none;
+    }
+
+    /* Text-only badges retain their trimmed inline baseline. Icon content needs a flex row;
+       trimming its label separately keeps the glyph centered without changing adjacent lines. */
     @supports (text-box-trim: trim-both) {
       :scope {
         display: inline-block;
@@ -108,6 +131,15 @@
         text-box-trim: trim-both;
         text-box-edge: text;
       }
+      :scope:has(.icon:not(:empty)),
+      :scope:has(.label svg) {
+        display: inline-flex;
+        text-box-trim: none;
+      }
+      :scope:has(.icon:not(:empty)) .label {
+        text-box-trim: trim-both;
+        text-box-edge: text;
+      }
     }
 
     :scope[data-ui-badge-state~="size=xs"] {
@@ -246,6 +278,10 @@
       justify-content: center;
     }
 
+    :scope[data-ui-badge-state~="shape=square"] .label:empty {
+      display: none;
+    }
+
     /* A dot uses the badge's tone recipe; only its silhouette and visible label change. */
     :scope[data-ui-badge-state~="shape=dot"] {
       position: relative;
@@ -332,8 +368,25 @@
     /* A constrained badge keeps its surface intact and ellipsizes only its label. The full
        text stays in the DOM for accessible names and consumers' selected values. */
 
-    /* Trim leading while retaining the font's ascent and descent. A cap-to-baseline box
-       would crop glyphs where the label clips horizontal overflow for ellipsis. */
+    /* Icon content has its own flex item so label ellipsis never clips its strokes. */
+
+    .icon :where([data-slotted], [data-slotted] *):is(svg) {
+      display: block;
+      inline-size: 1em;
+      block-size: 1em;
+      flex: none;
+    }
+
+    /* Ordinary icon-plus-text children keep inline ellipsis, with explicit glyph spacing. */
+    .label :where([data-slotted], [data-slotted] *):is(svg) {
+      inline-size: 1em;
+      block-size: 1em;
+      vertical-align: middle;
+      margin-inline-end: var(--ui-space-1);
+    }
+
+    /* Text-only badges retain their trimmed inline baseline. Icon content needs a flex row;
+       trimming its label separately keeps the glyph centered without changing adjacent lines. */
     @supports (text-box-trim: trim-both) {
     }
 
@@ -342,6 +395,10 @@
 
     /* An icon mark keeps the existing tone recipe and follows the global spacing and radius. */
 
+    :scope[data-ui-badge-state~="shape=square"] .label :where([data-slotted], [data-slotted] *):is(svg) {
+      margin-inline-end: 0;
+    }
+
     /* A dot uses the badge's tone recipe; only its silhouette and visible label change. */
 
     /* The clipped point needs an inset surface over an outer border-colour shape: a native border

package/styles/ui-button.css

@@ -90,6 +90,7 @@
       display: inline-flex;
       align-items: center;
       justify-content: center;
+      column-gap: var(--ui-space-2);
       vertical-align: middle;
       color: var(--_tone-text);
     }
@@ -139,7 +140,6 @@
     .spinner-wrap {
       display: inline-flex;
       flex: none;
-      margin-inline-end: var(--ui-space-2);
       vertical-align: middle;
     }
 

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);
     }

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-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/UiBadge.js

@@ -16,17 +16,30 @@ export function createUiBadge(options = {}) {
   }
   element.setAttribute("data-component", "ui-badge");
   const element0 = document.createElement("span");
-  element0.setAttribute("class", "label");
+  element0.setAttribute("class", "icon");
+  element0.setAttribute("aria-hidden", "true");
+  if (slots["icon"] ?? [].length > 0) {
+    for (const child of slots["icon"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      if (node.nodeType === 1) node.setAttribute("data-slotted", "");
+      projected.push([node, "icon"]);
+      element0.append(node);
+    }
+  } else {
+  }
+  element.append(element0);
+  const element1 = document.createElement("span");
+  element1.setAttribute("class", "label");
   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, ""]);
-      element0.append(node);
+      element1.append(node);
     }
   } else {
   }
-  element.append(element0);
+  element.append(element1);
   manageGeneratedProps(element, [
     { name: "shape", attribute: "data-shape", value: componentProps["shape"], default: "pill", type: ["pill","tag","dot","square"], required: false },
     { name: "size", attribute: "data-size", value: componentProps["size"], default: "md", type: ["xs","md"], required: false },

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/UiCluster.d.ts

@@ -7,8 +7,11 @@ export interface UiClusterElement extends HTMLDivElement {
 }
 export interface UiClusterProps {
   align?: "start" | "center" | "end" | "stretch" | 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;
@@ -26,8 +29,11 @@ export function createUiCluster(options = {}) {
   }
   manageGeneratedProps(element, [
     { name: "align", attribute: "data-align", value: componentProps["align"], type: ["start","center","end","stretch"], 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/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;

package/vanilla/UiTextarea.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-textarea/ui-textarea.js";
 import "../styles/ui-textarea.css";
 
-const definition = {...{"contract":{"tag":"ui-textarea","props":{"autosize":{"type":"boolean","required":false,"target":{"attribute":"autosize"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"invalid":{"type":"boolean","required":false,"target":{"attribute":"aria-invalid"},"default":false},"readonly":{"type":"boolean","required":false,"target":{"attribute":"readonly"},"default":false},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"rows":{"type":{"kind":"terminal","name":"integer"},"required":false,"target":{"attribute":"rows"},"default":4},"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"}}}},"template":{"kind":"element","name":"textarea","attributes":[{"kind":"attribute","name":"value","expression":"value","expressionPlan":{"source":"value","ast":{"kind":"id","name":"value"},"dependencies":["value"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"readonly","expression":"readonly","expressionPlan":{"source":"readonly","ast":{"kind":"id","name":"readonly"},"dependencies":["readonly"]}},{"kind":"attribute","name":"required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"aria-invalid","expression":"invalid","expressionPlan":{"source":"invalid","ast":{"kind":"id","name":"invalid"},"dependencies":["invalid"]}},{"kind":"attribute","name":"rows","expression":"rows","expressionPlan":{"source":"rows","ast":{"kind":"id","name":"rows"},"dependencies":["rows"]}},{"kind":"attribute","name":"--_rows","expression":"rows","expressionPlan":{"source":"rows","ast":{"kind":"id","name":"rows"},"dependencies":["rows"]},"target":"style"}],"children":[]},"declarations":[],"root":{"kind":"native","element":"textarea","choices":["textarea"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-textarea","props":{"autosize":{"type":"boolean","required":false,"target":{"attribute":"autosize"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"invalid":{"type":"boolean","required":false,"target":{"attribute":"aria-invalid"},"default":false},"maxRows":{"type":{"kind":"terminal","name":"integer"},"required":false,"target":{"attribute":"maxrows"}},"readonly":{"type":"boolean","required":false,"target":{"attribute":"readonly"},"default":false},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"rows":{"type":{"kind":"terminal","name":"integer"},"required":false,"target":{"attribute":"rows"},"default":4},"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"}}}},"template":{"kind":"element","name":"textarea","attributes":[{"kind":"attribute","name":"value","expression":"value","expressionPlan":{"source":"value","ast":{"kind":"id","name":"value"},"dependencies":["value"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"readonly","expression":"readonly","expressionPlan":{"source":"readonly","ast":{"kind":"id","name":"readonly"},"dependencies":["readonly"]}},{"kind":"attribute","name":"required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"aria-invalid","expression":"invalid","expressionPlan":{"source":"invalid","ast":{"kind":"id","name":"invalid"},"dependencies":["invalid"]}},{"kind":"attribute","name":"rows","expression":"rows","expressionPlan":{"source":"rows","ast":{"kind":"id","name":"rows"},"dependencies":["rows"]}},{"kind":"attribute","name":"--_rows","expression":"rows","expressionPlan":{"source":"rows","ast":{"kind":"id","name":"rows"},"dependencies":["rows"]},"target":"style"},{"kind":"attribute","name":"--_max-rows","expression":"maxRows","expressionPlan":{"source":"maxRows","ast":{"kind":"id","name":"maxRows"},"dependencies":["maxRows"]},"target":"style"}],"children":[]},"declarations":[],"root":{"kind":"native","element":"textarea","choices":["textarea"]}},source:{file:import.meta.url},css:""};
 
 export function createUiTextarea(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
@@ -34,6 +34,9 @@ export function createUiTextarea(options = {}) {
   const value6 = componentProps["rows"] === undefined ? 4 : componentProps["rows"];
   if (value6 === null || value6 === undefined) element.removeAttribute("--_rows");
   else element.setAttribute("--_rows", String(value6));
+  const value7 = componentProps["maxRows"] === undefined ? null : componentProps["maxRows"];
+  if (value7 === null || value7 === undefined) element.removeAttribute("--_max-rows");
+  else element.setAttribute("--_max-rows", String(value7));
   element.setAttribute("data-component", "ui-textarea");
   manageComponentLifecycle(element, definition, { props: componentProps, projected,
     controller,