@threadlabs/looma 0.10.12 → 0.11.1

package/styles/ui-status-message.css

@@ -0,0 +1,72 @@
+/* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@scope ([data-component~="ui-status-message"]) to ([data-component], [data-slotted]) {
+/* The one way a view says it is loading, has nothing yet, or failed, with an optional next step.
+       Every view says it the same way, in the same place, at the same size. */
+    :scope {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--ui-space-2) var(--ui-space-4);
+      padding-block: var(--ui-space-4);
+      color: var(--ui-text-muted);
+      font-size: var(--ui-font-size-md);
+      line-height: var(--ui-line-height);
+    }
+
+    :scope[data-ui-status-message-state~="kind=error"] {
+      color: var(--ui-danger);
+    }
+
+    :scope[data-ui-status-message-state~="layout=panel"] {
+      padding: var(--ui-space-6);
+      border: 1px dashed var(--ui-border-default);
+      border-radius: var(--ui-radius-lg);
+    }
+
+    :scope[data-ui-status-message-state~="layout=fill"] {
+      flex: 1;
+      flex-direction: column;
+      justify-content: center;
+      min-block-size: 50vh;
+      text-align: center;
+    }
+
+    .copy {
+      display: flex;
+      flex: 1 1 12rem;
+      flex-direction: column;
+      gap: var(--ui-space-1);
+      min-inline-size: 0;
+    }
+
+    :scope[data-ui-status-message-state~="layout=fill"] .copy {
+      flex: none;
+      align-items: center;
+    }
+
+    .heading {
+      color: var(--ui-text-primary);
+      font-weight: var(--ui-font-semibold);
+    }
+
+    .action {
+      display: inline-flex;
+      flex-wrap: wrap;
+      gap: var(--ui-space-2);
+    }
+
+    .action:empty {
+      display: none;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-status-message"]) to ([data-component]) {
+/* The one way a view says it is loading, has nothing yet, or failed, with an optional next step.
+       Every view says it the same way, in the same place, at the same size. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-text.css

@@ -0,0 +1,85 @@
+/* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@scope ([data-component~="ui-text"]) to ([data-component], [data-slotted]) {
+/* 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, or label. */
+    :scope {
+      margin: 0;
+      min-inline-size: 0;
+      color: var(--ui-text-primary);
+      text-align: start;
+    }
+
+    :scope[data-ui-text-state~="size=xs"] {
+      font-size: var(--ui-font-size-xs);
+      line-height: var(--ui-line-height);
+    }
+    :scope[data-ui-text-state~="size=sm"] {
+      font-size: var(--ui-font-size-sm);
+      line-height: var(--ui-line-height);
+    }
+    :scope[data-ui-text-state~="size=md"] {
+      font-size: var(--ui-font-size-md);
+      line-height: var(--ui-line-height);
+    }
+    :scope[data-ui-text-state~="size=lg"] {
+      font-size: var(--ui-font-size-lg);
+      line-height: var(--ui-line-height-relaxed);
+    }
+
+    :scope[data-ui-text-state~="tone=secondary"] {
+      color: var(--ui-text-secondary);
+    }
+    :scope[data-ui-text-state~="tone=muted"] {
+      color: var(--ui-text-muted);
+    }
+    :scope[data-ui-text-state~="tone=accent"] {
+      color: var(--ui-accent-active);
+    }
+    :scope[data-ui-text-state~="tone=danger"] {
+      color: var(--ui-danger);
+    }
+    :scope[data-ui-text-state~="tone=success"] {
+      color: var(--ui-success);
+    }
+
+    :scope[data-ui-text-state~="weight=normal"] {
+      font-weight: var(--ui-font-normal);
+    }
+    :scope[data-ui-text-state~="weight=medium"] {
+      font-weight: var(--ui-font-medium);
+    }
+    :scope[data-ui-text-state~="weight=semibold"] {
+      font-weight: var(--ui-font-semibold);
+    }
+
+    :scope[data-ui-text-state~="variant=eyebrow"] {
+      font-size: var(--ui-font-size-xs);
+      font-weight: var(--ui-font-semibold);
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+    }
+    :scope[data-ui-text-state~="variant=code"] {
+      font-family: var(--ui-font-family-mono);
+    }
+
+    :scope[data-ui-text-state~="truncate"] {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    :scope[data-ui-text-state~="align=center"] {
+      text-align: center;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-text"]) to ([data-component]) {
+/* 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, or label. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}

package/vanilla/UiActionBar.d.ts

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

package/vanilla/UiActionBar.js

@@ -0,0 +1,59 @@
+// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+import "../styles/ui-action-bar.css";
+
+export function createUiActionBar(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as } = 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-action-bar");
+  const element0 = document.createElement("div");
+  element0.setAttribute("class", "bar");
+  const element1 = document.createElement("span");
+  element1.setAttribute("class", "tertiary");
+  if (slots["tertiary"] ?? [].length > 0) {
+    for (const child of slots["tertiary"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, "tertiary"]);
+      element1.append(node);
+    }
+  } else {
+  }
+  element0.append(element1);
+  const element2 = document.createElement("span");
+  element2.setAttribute("class", "secondary");
+  if (slots["secondary"] ?? [].length > 0) {
+    for (const child of slots["secondary"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, "secondary"]);
+      element2.append(node);
+    }
+  } else {
+  }
+  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 {
+  }
+  element0.append(element2);
+  const element3 = document.createElement("span");
+  element3.setAttribute("class", "primary");
+  if (slots["primary"] ?? [].length > 0) {
+    for (const child of slots["primary"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, "primary"]);
+      element3.append(node);
+    }
+  } else {
+  }
+  element0.append(element3);
+  element.append(element0);
+  return element;
+}
+

package/vanilla/UiBreadcrumbItem.d.ts

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

package/vanilla/UiBreadcrumbItem.js

@@ -0,0 +1,38 @@
+// 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-breadcrumb-item.css";
+
+const definition = {...{"contract":{"tag":"ui-breadcrumb-item","props":{"current":{"type":"boolean","required":false,"target":{"attribute":"current"},"default":false}}},"template":{"kind":"element","name":"li","attributes":[{"kind":"attribute","name":"aria-current","expression":"{ true: 'page', false: null }[format('%s', current)]","expressionPlan":{"source":"{ true: 'page', false: null }[format('%s', current)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":"page"}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"id","name":"current"}]}},"dependencies":["current"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"separator"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"literal","name":"name","value":"chevron-right"}],"children":[]}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"content"}],"children":[{"kind":"slot"}]}]},"declarations":[],"root":{"kind":"native","element":"li","choices":["li"]}},source:{file:import.meta.url},css:""};
+
+export function createUiBreadcrumbItem(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const projected = [];
+  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));
+  }
+  element.setAttribute("data-component", "ui-breadcrumb-item");
+  const element0 = document.createElement("span");
+  element0.setAttribute("class", "separator");
+  element0.setAttribute("aria-hidden", "true");
+  const element1 = document.createElement("ui-icon");
+  element1.setAttribute("name", "chevron-right");
+  element0.append(element1);
+  element.append(element0);
+  const element2 = document.createElement("span");
+  element2.setAttribute("class", "content");
+  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 {
+  }
+  element.append(element2);
+  manageComponentLifecycle(element, definition, { props: componentProps, projected,
+  });
+  return element;
+}
+

package/vanilla/UiBreadcrumbs.d.ts

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

package/vanilla/UiBreadcrumbs.js

@@ -0,0 +1,39 @@
+// 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-breadcrumbs.css";
+
+export function createUiBreadcrumbs(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const projected = [];
+  const prop0 = componentProps["label"] === undefined ? "Breadcrumb" : componentProps["label"];
+  const element = document.createElement("nav");
+  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 (value0 === null || value0 === undefined) element.removeAttribute("aria-label");
+  else element.setAttribute("aria-label", String(value0));
+  element.setAttribute("data-component", "ui-breadcrumbs");
+  const element0 = document.createElement("ol");
+  element0.setAttribute("role", "list");
+  if (children.length > 0) {
+    for (const child of children) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, ""]);
+      element0.append(node);
+    }
+  } else {
+  }
+  element.append(element0);
+  manageGeneratedProps(element, [
+    { name: "label", attribute: "data-label", value: componentProps["label"], default: "Breadcrumb", type: "string", required: false },
+  ], (name, value) => {
+    if (name === "label") {
+      if (value === null || value === undefined) element.removeAttribute("aria-label");
+      else element.setAttribute("aria-label", String(value));
+    }
+  });
+  return element;
+}
+

package/vanilla/UiCard.d.ts

@@ -0,0 +1,17 @@
+// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+export interface UiCardEventMap {
+}
+export interface UiCardElement extends HTMLDivElement {
+  addEventListener<K extends keyof UiCardEventMap>(type: K, listener: (this: UiCardElement, event: UiCardEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiCardEventMap>(type: K, listener: (this: UiCardElement, event: UiCardEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiCardProps {
+  padding?: "sm" | "md" | "lg" | null;
+  tone?: "neutral" | "danger" | null;
+  variant?: "outlined" | "subtle" | "elevated" | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+  as?: "div" | "section" | "article" | "aside";
+}
+export declare function createUiCard(props?: UiCardProps): UiCardElement;

package/vanilla/UiCard.js

@@ -0,0 +1,32 @@
+// 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-card.css";
+
+export function createUiCard(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const projected = [];
+  const prop0 = componentProps["padding"] === undefined ? "md" : componentProps["padding"];
+  const prop1 = componentProps["tone"] === undefined ? "neutral" : componentProps["tone"];
+  const prop2 = componentProps["variant"] === undefined ? "outlined" : componentProps["variant"];
+  const element = document.createElement(as ?? "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-card");
+  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: "padding", attribute: "data-padding", value: componentProps["padding"], default: "md", type: ["sm","md","lg"], required: false },
+    { name: "tone", attribute: "data-tone", value: componentProps["tone"], default: "neutral", type: ["neutral","danger"], required: false },
+    { name: "variant", attribute: "data-variant", value: componentProps["variant"], default: "outlined", type: ["outlined","subtle","elevated"], required: false },
+  ]);
+  return element;
+}
+

package/vanilla/UiCover.d.ts

@@ -0,0 +1,14 @@
+// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+export interface UiCoverEventMap {
+}
+export interface UiCoverElement extends HTMLDivElement {
+  addEventListener<K extends keyof UiCoverEventMap>(type: K, listener: (this: UiCoverElement, event: UiCoverEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiCoverEventMap>(type: K, listener: (this: UiCoverElement, event: UiCoverEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiCoverProps {
+  size?: "screen" | "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 createUiCover(props?: UiCoverProps): UiCoverElement;

package/vanilla/UiCover.js

@@ -0,0 +1,28 @@
+// 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-cover.css";
+
+export function createUiCover(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const projected = [];
+  const prop0 = componentProps["size"] === undefined ? "screen" : componentProps["size"];
+  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-cover");
+  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: "size", attribute: "data-size", value: componentProps["size"], default: "screen", type: ["screen","fill"], required: false },
+  ]);
+  return element;
+}
+

package/vanilla/UiDescriptionItem.d.ts

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

package/vanilla/UiDescriptionItem.js

@@ -0,0 +1,39 @@
+// 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-description-item.css";
+
+export function createUiDescriptionItem(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const projected = [];
+  const prop0 = componentProps["term"] === undefined ? "" : componentProps["term"];
+  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-description-item");
+  const element0 = document.createElement("dt");
+  const element1 = document.createElement("template");
+  element1.textContent = prop0 == null ? "" : String(prop0);
+  element0.append(element1);
+  element.append(element0);
+  const element2 = document.createElement("dd");
+  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 {
+  }
+  element.append(element2);
+  manageGeneratedProps(element, [
+    { name: "term", attribute: "data-term", value: componentProps["term"], default: "", type: "string", required: false },
+  ], (name, value) => {
+    if (name === "term") {
+      element1.textContent = value == null ? "" : String(value);
+    }
+  });
+  return element;
+}
+

package/vanilla/UiDescriptionList.d.ts

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

package/vanilla/UiDescriptionList.js

@@ -0,0 +1,28 @@
+// 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-description-list.css";
+
+export function createUiDescriptionList(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const projected = [];
+  const prop0 = componentProps["layout"] === undefined ? "rows" : componentProps["layout"];
+  const element = document.createElement("dl");
+  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-description-list");
+  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: "layout", attribute: "data-layout", value: componentProps["layout"], default: "rows", type: ["rows","tiles"], required: false },
+  ]);
+  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;