@threadlabs/looma 0.25.4 → 0.25.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.25.4",
+  "version": "0.25.5",
   "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);
     }

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/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,

package/vanilla/index.js

@@ -25,6 +25,7 @@ export * from "./UiEditorMentionMenuItem.js";
 export * from "./UiEditorSlashMenu.js";
 export * from "./UiEditorSlashMenuGroup.js";
 export * from "./UiEditorSlashMenuItem.js";
+export * from "./UiEditorSurface.js";
 export * from "./UiEditorTableContextMenu.js";
 export * from "./UiEditorTableOverlay.js";
 export * from "./UiEditorTableToolbar.js";

package/vue/UiCard.d.ts

@@ -23,7 +23,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
     tone: {
-        type: PropType<"neutral" | "danger" | null>;
+        type: PropType<"neutral" | "accent" | "info" | "success" | "warning" | "danger" | null>;
         default: string;
     };
     variant: {
@@ -44,7 +44,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
     tone: {
-        type: PropType<"neutral" | "danger" | null>;
+        type: PropType<"neutral" | "accent" | "info" | "success" | "warning" | "danger" | null>;
         default: string;
     };
     variant: {
@@ -53,7 +53,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     };
 }>> & Readonly<{}>, {
     size: "sm" | "md" | "content" | "lg" | null;
-    tone: "neutral" | "danger" | null;
+    tone: "info" | "neutral" | "accent" | "success" | "warning" | "danger" | null;
     variant: "subtle" | "outlined" | "elevated" | null;
     as: "div" | "article" | "aside" | "section" | null;
     padding: "xs" | "sm" | "md" | "lg" | null;

package/vue/UiCard.vue

@@ -41,8 +41,8 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'tone' },
       description:
-        'danger adds a soft danger surface and a strong leading edge for consequential content.',
-      values: ['neutral', 'danger'],
+        'accent, info, success and warning add a quiet semantic surface. danger retains its strong leading edge for consequential content. Tone never changes child\n      controls.',
+      values: ['neutral', 'accent', 'info', 'success', 'warning', 'danger'],
       default: 'neutral',
     },
     variant: {
@@ -66,7 +66,12 @@ const props = defineProps({
     type: null as unknown as PropType<'content' | 'sm' | 'md' | 'lg' | null>,
     default: 'content',
   },
-  tone: { type: null as unknown as PropType<'neutral' | 'danger' | null>, default: 'neutral' },
+  tone: {
+    type: null as unknown as PropType<
+      'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger' | null
+    >,
+    default: 'neutral',
+  },
   variant: {
     type: null as unknown as PropType<'outlined' | 'subtle' | 'elevated' | null>,
     default: 'outlined',
@@ -101,13 +106,13 @@ const checkedProps = computed(() => ({
     'size',
     acceptedProps,
   ) as 'content' | 'sm' | 'md' | 'lg',
-  tone: checkedProp<'neutral' | 'danger'>(
+  tone: checkedProp<'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'>(
     props['tone'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'tone',
     acceptedProps,
-  ) as 'neutral' | 'danger',
+  ) as 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger',
   variant: checkedProp<'outlined' | 'subtle' | 'elevated'>(
     props['variant'],
     { kind: 'terminal', name: 'keyword' },
@@ -295,6 +300,30 @@ const hostState = computed(() =>
   box-shadow: var(--ui-shadow-lg);
 }
 
+[data-component~="ui-card"][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));
+}
+
+[data-component~="ui-card"][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));
+}
+
+[data-component~="ui-card"][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));
+}
+
+[data-component~="ui-card"][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));
+}
+
+[data-component~="ui-card"][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;
+}
+
 [data-component~="ui-card"][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);