@threadlabs/looma 0.10.11 → 0.11.0

package/vanilla/UiListItem.d.ts

@@ -0,0 +1,15 @@
+// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+export interface UiListItemEventMap {
+}
+export interface UiListItemElement extends HTMLLIElement {
+  addEventListener<K extends keyof UiListItemEventMap>(type: K, listener: (this: UiListItemElement, event: UiListItemEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiListItemEventMap>(type: K, listener: (this: UiListItemElement, event: UiListItemEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiListItemProps {
+  current?: boolean | null;
+  variant?: "row" | "card" | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+}
+export declare function createUiListItem(props?: UiListItemProps): UiListItemElement;

package/vanilla/UiListItem.js

@@ -0,0 +1,77 @@
+// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+import { manageGeneratedProps } from "@nextwebwg/html-next/generated-runtime";
+import "../styles/ui-list-item.css";
+
+export function createUiListItem(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const projected = [];
+  const prop0 = componentProps["current"] === undefined ? false : componentProps["current"];
+  const prop1 = componentProps["variant"] === undefined ? "row" : componentProps["variant"];
+  const element = document.createElement("li");
+  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 = prop0;
+  if (typeof value0 === "boolean") element.setAttribute("aria-current", String(value0));
+  else element.removeAttribute("aria-current");
+  element.setAttribute("data-component", "ui-list-item");
+  const element0 = document.createElement("span");
+  element0.setAttribute("class", "leading");
+  if (slots["leading"] ?? [].length > 0) {
+    for (const child of slots["leading"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, "leading"]);
+      element0.append(node);
+    }
+  } else {
+  }
+  element.append(element0);
+  const element1 = document.createElement("span");
+  element1.setAttribute("class", "content");
+  const element2 = document.createElement("span");
+  element2.setAttribute("class", "title");
+  if (children.length > 0) {
+    for (const child of children) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, ""]);
+      element2.append(node);
+    }
+  } else {
+  }
+  element1.append(element2);
+  const element3 = document.createElement("span");
+  element3.setAttribute("class", "description");
+  if (slots["description"] ?? [].length > 0) {
+    for (const child of slots["description"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, "description"]);
+      element3.append(node);
+    }
+  } else {
+  }
+  element1.append(element3);
+  element.append(element1);
+  const element4 = document.createElement("span");
+  element4.setAttribute("class", "trailing");
+  if (slots["trailing"] ?? [].length > 0) {
+    for (const child of slots["trailing"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, "trailing"]);
+      element4.append(node);
+    }
+  } else {
+  }
+  element.append(element4);
+  manageGeneratedProps(element, [
+    { name: "current", attribute: "data-current", value: componentProps["current"], default: false, type: "boolean", required: false },
+    { name: "variant", attribute: "data-variant", value: componentProps["variant"], default: "row", type: ["row","card"], required: false },
+  ], (name, value) => {
+    if (name === "current") {
+      if (value === null || value === undefined) element.removeAttribute("aria-current");
+      else element.setAttribute("aria-current", String(value));
+    }
+  });
+  return element;
+}
+

package/vanilla/UiPageHeader.d.ts

@@ -0,0 +1,14 @@
+// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+export interface UiPageHeaderEventMap {
+}
+export interface UiPageHeaderElement extends HTMLElement {
+  addEventListener<K extends keyof UiPageHeaderEventMap>(type: K, listener: (this: UiPageHeaderElement, event: UiPageHeaderEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiPageHeaderEventMap>(type: K, listener: (this: UiPageHeaderElement, event: UiPageHeaderEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiPageHeaderProps {
+  align?: "start" | "center" | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+}
+export declare function createUiPageHeader(props?: UiPageHeaderProps): UiPageHeaderElement;

package/vanilla/UiPageHeader.js

@@ -0,0 +1,78 @@
+// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+import { manageGeneratedProps } from "@nextwebwg/html-next/generated-runtime";
+import "../styles/ui-page-header.css";
+
+export function createUiPageHeader(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const projected = [];
+  const prop0 = componentProps["align"] === undefined ? "start" : componentProps["align"];
+  const element = document.createElement("header");
+  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-page-header");
+  const element0 = document.createElement("span");
+  element0.setAttribute("class", "leading");
+  if (slots["leading"] ?? [].length > 0) {
+    for (const child of slots["leading"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, "leading"]);
+      element0.append(node);
+    }
+  } else {
+  }
+  element.append(element0);
+  const element1 = document.createElement("span");
+  element1.setAttribute("class", "copy");
+  const element2 = document.createElement("span");
+  element2.setAttribute("class", "eyebrow");
+  if (slots["eyebrow"] ?? [].length > 0) {
+    for (const child of slots["eyebrow"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, "eyebrow"]);
+      element2.append(node);
+    }
+  } else {
+  }
+  element1.append(element2);
+  const element3 = document.createElement("h1");
+  element3.setAttribute("class", "title");
+  if (children.length > 0) {
+    for (const child of children) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, ""]);
+      element3.append(node);
+    }
+  } else {
+  }
+  element1.append(element3);
+  const element4 = document.createElement("span");
+  element4.setAttribute("class", "description");
+  if (slots["description"] ?? [].length > 0) {
+    for (const child of slots["description"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, "description"]);
+      element4.append(node);
+    }
+  } else {
+  }
+  element1.append(element4);
+  element.append(element1);
+  const element5 = document.createElement("span");
+  element5.setAttribute("class", "actions");
+  if (slots["actions"] ?? [].length > 0) {
+    for (const child of slots["actions"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, "actions"]);
+      element5.append(node);
+    }
+  } else {
+  }
+  element.append(element5);
+  manageGeneratedProps(element, [
+    { name: "align", attribute: "data-align", value: componentProps["align"], default: "start", type: ["start","center"], required: false },
+  ]);
+  return element;
+}
+

package/vanilla/UiSection.d.ts

@@ -0,0 +1,16 @@
+// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+export interface UiSectionEventMap {
+}
+export interface UiSectionElement extends HTMLElement {
+  addEventListener<K extends keyof UiSectionEventMap>(type: K, listener: (this: UiSectionElement, event: UiSectionEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiSectionEventMap>(type: K, listener: (this: UiSectionElement, event: UiSectionEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiSectionProps {
+  heading?: string | null;
+  tone?: "neutral" | "danger" | null;
+  variant?: "plain" | "card" | "divided" | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+}
+export declare function createUiSection(props?: UiSectionProps): UiSectionElement;

package/vanilla/UiSection.js

@@ -0,0 +1,64 @@
+// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
+import "../styles/ui-section.css";
+
+const definition = {...{"contract":{"tag":"ui-section","props":{"heading":{"type":"string","required":false,"target":{"attribute":"heading"},"default":""},"tone":{"type":{"enum":["neutral","danger"]},"required":false,"target":{"attribute":"tone"},"default":"neutral"},"variant":{"type":{"enum":["plain","card","divided"]},"required":false,"target":{"attribute":"variant"},"default":"plain"}}},"template":{"kind":"element","name":"section","attributes":[],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"head"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"copy"}],"children":[{"kind":"element","name":"h2","attributes":[{"kind":"literal","name":"class","value":"heading"},{"kind":"attribute","name":"hidden","expression":"not heading","expressionPlan":{"source":"not heading","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"heading"}},"dependencies":["heading"]}}],"children":[{"kind":"element","name":"template","attributes":[{"kind":"directive","name":"value","expression":"heading","expressionPlan":{"source":"heading","ast":{"kind":"id","name":"heading"},"dependencies":["heading"]}}],"children":[]}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"description"}],"children":[{"kind":"slot","fallback":[],"name":"description"}]}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"actions"}],"children":[{"kind":"slot","fallback":[],"name":"actions"}]}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"body"}],"children":[{"kind":"slot"}]}]},"declarations":[],"root":{"kind":"native","element":"section","choices":["section"]}},source:{file:import.meta.url},css:""};
+
+export function createUiSection(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const projected = [];
+  const element = document.createElement("section");
+  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-section");
+  const element0 = document.createElement("span");
+  element0.setAttribute("class", "head");
+  const element1 = document.createElement("span");
+  element1.setAttribute("class", "copy");
+  const element2 = document.createElement("h2");
+  element2.setAttribute("class", "heading");
+  const element3 = document.createElement("template");
+  element2.append(element3);
+  element1.append(element2);
+  const element4 = document.createElement("span");
+  element4.setAttribute("class", "description");
+  if (slots["description"] ?? [].length > 0) {
+    for (const child of slots["description"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, "description"]);
+      element4.append(node);
+    }
+  } else {
+  }
+  element1.append(element4);
+  element0.append(element1);
+  const element5 = document.createElement("span");
+  element5.setAttribute("class", "actions");
+  if (slots["actions"] ?? [].length > 0) {
+    for (const child of slots["actions"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, "actions"]);
+      element5.append(node);
+    }
+  } else {
+  }
+  element0.append(element5);
+  element.append(element0);
+  const element6 = document.createElement("span");
+  element6.setAttribute("class", "body");
+  if (children.length > 0) {
+    for (const child of children) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, ""]);
+      element6.append(node);
+    }
+  } else {
+  }
+  element.append(element6);
+  manageComponentLifecycle(element, definition, { props: componentProps, projected,
+  });
+  return element;
+}
+

package/vanilla/UiSpinner.d.ts

@@ -0,0 +1,15 @@
+// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+export interface UiSpinnerEventMap {
+}
+export interface UiSpinnerElement extends HTMLSpanElement {
+  addEventListener<K extends keyof UiSpinnerEventMap>(type: K, listener: (this: UiSpinnerElement, event: UiSpinnerEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiSpinnerEventMap>(type: K, listener: (this: UiSpinnerElement, event: UiSpinnerEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiSpinnerProps {
+  label?: string | null;
+  size?: "sm" | "md" | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+}
+export declare function createUiSpinner(props?: UiSpinnerProps): UiSpinnerElement;

package/vanilla/UiSpinner.js

@@ -0,0 +1,23 @@
+// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
+import "../styles/ui-spinner.css";
+
+const definition = {...{"contract":{"tag":"ui-spinner","props":{"label":{"type":"string","required":false,"target":{"attribute":"label"},"default":""},"size":{"type":{"enum":["sm","md"]},"required":false,"target":{"attribute":"size"},"default":"md"}}},"template":{"kind":"element","name":"span","attributes":[{"kind":"attribute","name":"role","expression":"{ true: 'status', false: null }[format('%s', label != '')]","expressionPlan":{"source":"{ true: 'status', false: null }[format('%s', label != '')]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":"status"}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":"!=","left":{"kind":"id","name":"label"},"right":{"kind":"literal","value":""}}]}},"dependencies":["label"]}},{"kind":"attribute","name":"aria-label","expression":"{ true: label, false: null }[format('%s', label != '')]","expressionPlan":{"source":"{ true: label, false: null }[format('%s', label != '')]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"id","name":"label"}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":"!=","left":{"kind":"id","name":"label"},"right":{"kind":"literal","value":""}}]}},"dependencies":["label"]}},{"kind":"attribute","name":"aria-hidden","expression":"{ true: null, false: 'true' }[format('%s', label != '')]","expressionPlan":{"source":"{ true: null, false: 'true' }[format('%s', label != '')]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":null}},{"key":"false","value":{"kind":"literal","value":"true"}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":"!=","left":{"kind":"id","name":"label"},"right":{"kind":"literal","value":""}}]}},"dependencies":["label"]}}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"literal","name":"name","value":"loader"}],"children":[]}]},"declarations":[],"root":{"kind":"native","element":"span","choices":["span"]}},source:{file:import.meta.url},css:""};
+
+export function createUiSpinner(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const projected = [];
+  const element = document.createElement("span");
+  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-spinner");
+  const element0 = document.createElement("ui-icon");
+  element0.setAttribute("name", "loader");
+  element.append(element0);
+  manageComponentLifecycle(element, definition, { props: componentProps, projected,
+  });
+  return element;
+}
+

package/vanilla/UiStatusMessage.d.ts

@@ -0,0 +1,16 @@
+// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+export interface UiStatusMessageEventMap {
+}
+export interface UiStatusMessageElement extends HTMLDivElement {
+  addEventListener<K extends keyof UiStatusMessageEventMap>(type: K, listener: (this: UiStatusMessageElement, event: UiStatusMessageEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiStatusMessageEventMap>(type: K, listener: (this: UiStatusMessageElement, event: UiStatusMessageEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiStatusMessageProps {
+  heading?: string | null;
+  kind?: "empty" | "loading" | "error" | null;
+  layout?: "inline" | "panel" | "fill" | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+}
+export declare function createUiStatusMessage(props?: UiStatusMessageProps): UiStatusMessageElement;

package/vanilla/UiStatusMessage.js

@@ -0,0 +1,53 @@
+// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
+import "../styles/ui-status-message.css";
+
+const definition = {...{"contract":{"tag":"ui-status-message","props":{"heading":{"type":"string","required":false,"target":{"attribute":"heading"},"default":""},"kind":{"type":{"enum":["empty","loading","error"]},"required":false,"target":{"attribute":"kind"},"default":"empty"},"layout":{"type":{"enum":["inline","panel","fill"]},"required":false,"target":{"attribute":"layout"},"default":"inline"}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"attribute","name":"role","expression":"{ true: 'alert', false: 'status' }[format('%s', kind = 'error')]","expressionPlan":{"source":"{ true: 'alert', false: 'status' }[format('%s', kind = 'error')]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":"alert"}},{"key":"false","value":{"kind":"literal","value":"status"}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":"=","left":{"kind":"id","name":"kind"},"right":{"kind":"literal","value":"error"}}]}},"dependencies":["kind"]}}],"children":[{"kind":"element","name":"ui-spinner","attributes":[{"kind":"literal","name":"size","value":"sm"},{"kind":"attribute","name":"hidden","expression":"kind != 'loading'","expressionPlan":{"source":"kind != 'loading'","ast":{"kind":"binary","op":"!=","left":{"kind":"id","name":"kind"},"right":{"kind":"literal","value":"loading"}},"dependencies":["kind"]}}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"copy"}],"children":[{"kind":"element","name":"strong","attributes":[{"kind":"literal","name":"class","value":"heading"},{"kind":"attribute","name":"hidden","expression":"not heading","expressionPlan":{"source":"not heading","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"heading"}},"dependencies":["heading"]}}],"children":[{"kind":"element","name":"template","attributes":[{"kind":"directive","name":"value","expression":"heading","expressionPlan":{"source":"heading","ast":{"kind":"id","name":"heading"},"dependencies":["heading"]}}],"children":[]}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"message"}],"children":[{"kind":"slot"}]}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"action"}],"children":[{"kind":"slot","fallback":[],"name":"action"}]}]},"declarations":[],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+
+export function createUiStatusMessage(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const projected = [];
+  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-status-message");
+  const element0 = document.createElement("ui-spinner");
+  element0.setAttribute("size", "sm");
+  element.append(element0);
+  const element1 = document.createElement("span");
+  element1.setAttribute("class", "copy");
+  const element2 = document.createElement("strong");
+  element2.setAttribute("class", "heading");
+  const element3 = document.createElement("template");
+  element2.append(element3);
+  element1.append(element2);
+  const element4 = document.createElement("span");
+  element4.setAttribute("class", "message");
+  if (children.length > 0) {
+    for (const child of children) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, ""]);
+      element4.append(node);
+    }
+  } else {
+  }
+  element1.append(element4);
+  element.append(element1);
+  const element5 = document.createElement("span");
+  element5.setAttribute("class", "action");
+  if (slots["action"] ?? [].length > 0) {
+    for (const child of slots["action"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, "action"]);
+      element5.append(node);
+    }
+  } else {
+  }
+  element.append(element5);
+  manageComponentLifecycle(element, definition, { props: componentProps, projected,
+  });
+  return element;
+}
+

package/vanilla/UiText.d.ts

@@ -0,0 +1,20 @@
+// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+export interface UiTextEventMap {
+}
+export interface UiTextElement extends HTMLParagraphElement {
+  addEventListener<K extends keyof UiTextEventMap>(type: K, listener: (this: UiTextElement, event: UiTextEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiTextEventMap>(type: K, listener: (this: UiTextElement, event: UiTextEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiTextProps {
+  align?: "start" | "center" | null;
+  size?: "inherit" | "xs" | "sm" | "md" | "lg" | null;
+  tone?: "default" | "secondary" | "muted" | "accent" | "danger" | "success" | null;
+  truncate?: boolean | null;
+  variant?: "body" | "eyebrow" | "code" | null;
+  weight?: "inherit" | "normal" | "medium" | "semibold" | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+  as?: "p" | "span" | "div" | "small" | "strong" | "label";
+}
+export declare function createUiText(props?: UiTextProps): UiTextElement;

package/vanilla/UiText.js

@@ -0,0 +1,38 @@
+// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+import { manageGeneratedProps } from "@nextwebwg/html-next/generated-runtime";
+import "../styles/ui-text.css";
+
+export function createUiText(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const projected = [];
+  const prop0 = componentProps["align"] === undefined ? "start" : componentProps["align"];
+  const prop1 = componentProps["size"] === undefined ? "inherit" : componentProps["size"];
+  const prop2 = componentProps["tone"] === undefined ? "default" : componentProps["tone"];
+  const prop3 = componentProps["truncate"] === undefined ? false : componentProps["truncate"];
+  const prop4 = componentProps["variant"] === undefined ? "body" : componentProps["variant"];
+  const prop5 = componentProps["weight"] === undefined ? "inherit" : componentProps["weight"];
+  const element = document.createElement(as ?? "p");
+  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-text");
+  if (children.length > 0) {
+    for (const child of children) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, ""]);
+      element.append(node);
+    }
+  } else {
+  }
+  manageGeneratedProps(element, [
+    { name: "align", attribute: "data-align", value: componentProps["align"], default: "start", type: ["start","center"], required: false },
+    { name: "size", attribute: "data-size", value: componentProps["size"], default: "inherit", type: ["inherit","xs","sm","md","lg"], required: false },
+    { name: "tone", attribute: "data-tone", value: componentProps["tone"], default: "default", type: ["default","secondary","muted","accent","danger","success"], required: false },
+    { name: "truncate", attribute: "data-truncate", value: componentProps["truncate"], default: false, type: "boolean", required: false },
+    { name: "variant", attribute: "data-variant", value: componentProps["variant"], default: "body", type: ["body","eyebrow","code"], required: false },
+    { name: "weight", attribute: "data-weight", value: componentProps["weight"], default: "inherit", type: ["inherit","normal","medium","semibold"], required: false },
+  ]);
+  return element;
+}
+

package/vanilla/index.js

@@ -2,13 +2,19 @@ export * from "./UiAffordanceScope.js";
 export * from "./UiAvatar.js";
 export * from "./UiAvatarGroup.js";
 export * from "./UiBadge.js";
+export * from "./UiBreadcrumbItem.js";
+export * from "./UiBreadcrumbs.js";
 export * from "./UiButton.js";
 export * from "./UiCallout.js";
+export * from "./UiCard.js";
 export * from "./UiCheckbox.js";
 export * from "./UiCluster.js";
 export * from "./UiCombobox.js";
 export * from "./UiContainer.js";
 export * from "./UiContextMenu.js";
+export * from "./UiCover.js";
+export * from "./UiDescriptionItem.js";
+export * from "./UiDescriptionList.js";
 export * from "./UiDialog.js";
 export * from "./UiDisclosure.js";
 export * from "./UiEditable.js";
@@ -25,8 +31,11 @@ export * from "./UiGrid.js";
 export * from "./UiIcon.js";
 export * from "./UiIconButton.js";
 export * from "./UiInput.js";
+export * from "./UiList.js";
+export * from "./UiListItem.js";
 export * from "./UiMenu.js";
 export * from "./UiMenuItem.js";
+export * from "./UiPageHeader.js";
 export * from "./UiPopover.js";
 export * from "./UiRadio.js";
 export * from "./UiRadioGroup.js";
@@ -34,13 +43,17 @@ export * from "./UiReel.js";
 export * from "./UiScrollArea.js";
 export * from "./UiSearchResultRow.js";
 export * from "./UiSearchShell.js";
+export * from "./UiSection.js";
 export * from "./UiSelect.js";
 export * from "./UiSeparator.js";
 export * from "./UiSidebar.js";
+export * from "./UiSpinner.js";
 export * from "./UiStack.js";
+export * from "./UiStatusMessage.js";
 export * from "./UiSwitch.js";
 export * from "./UiSwitcher.js";
 export * from "./UiTabs.js";
+export * from "./UiText.js";
 export * from "./UiTextarea.js";
 export * from "./UiToastRegion.js";
 export * from "./UiTooltip.js";

package/vue/UiAvatarGroup.vue

@@ -47,10 +47,10 @@ useComponentHost(controllerModule.default, {
 
 <style scoped>
 [data-component~="ui-avatar-group"] {
-  /* Avatars separate with a tight, crisp edge, matching Looma's 1px borders rather than the
-   * diffuse elevation overlays use. */
-  --_overlap-shadow: -2px 0 2px -1px rgba(0, 0, 0, 0.22);
-  --_edge-ring: 0 0 0 1px rgba(0, 0, 0, 0.08);
+  /* Each avatar is ringed in the surface colour, so where one overlaps the next it reads as a
+   * whole circle set on top, not a shape cut into the one beneath. */
+  --_overlap-shadow: 0 0 0 0 transparent;
+  --_edge-ring: 0 0 0 2px var(--ui-surface);
 
   display: flex;
   align-items: center;
@@ -61,7 +61,7 @@ useComponentHost(controllerModule.default, {
 /* Overlap and the separating shadow are applied by the controller: slotted avatars are nested
  * component roots outside this style scope. */
 :slotted(*) {
-  margin-inline-start: -0.625rem;
+  margin-inline-start: -0.5rem;
   flex-shrink: 0;
   border-radius: 999px;
 }
@@ -71,7 +71,7 @@ useComponentHost(controllerModule.default, {
 }
 
 .overflow {
-  margin-inline-start: -0.625rem;
+  margin-inline-start: -0.5rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;

package/vue/UiBreadcrumbItem.d.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    current?: boolean;
+};
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    current: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/vue/UiBreadcrumbItem.js

@@ -0,0 +1,2 @@
+import { t as UiBreadcrumbItem_default } from "./chunks/UiBreadcrumbItem.js";
+export { UiBreadcrumbItem_default as default };