@threadlabs/looma 0.10.11 → 0.11.0

package/styles/ui-section.css

@@ -0,0 +1,94 @@
+/* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@scope ([data-component~="ui-section"]) to ([data-component], [data-slotted]) {
+/* A part of a view: a heading, an optional line under it, actions for the whole section at its
+       end, and the content. Sections space themselves out through the Stack around them. */
+    :scope {
+      display: flex;
+      flex-direction: column;
+      gap: var(--ui-space-4);
+      min-inline-size: 0;
+    }
+
+    :scope[data-ui-section-state~="variant=card"] {
+      padding: var(--ui-space-5);
+      border: 1px solid var(--ui-border-default);
+      border-radius: var(--ui-radius-lg);
+      background: var(--ui-surface-raised);
+    }
+
+    :scope[data-ui-section-state~="variant=divided"] {
+      padding-block-start: var(--ui-space-6);
+      border-block-start: 1px solid var(--ui-border-default);
+    }
+
+    :scope[data-ui-section-state~="variant=card"][data-ui-section-state~="tone=danger"] {
+      border-color: var(--ui-danger);
+    }
+
+    .head {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: var(--ui-space-2) var(--ui-space-4);
+    }
+
+    .copy {
+      display: flex;
+      flex: 1 1 16rem;
+      flex-direction: column;
+      gap: var(--ui-space-1);
+      min-inline-size: 0;
+    }
+
+    .heading {
+      margin: 0;
+      color: var(--ui-text-primary);
+      font-size: var(--ui-font-size-lg);
+      font-weight: var(--ui-font-semibold);
+      line-height: var(--ui-line-height-tight);
+    }
+
+    :scope[data-ui-section-state~="tone=danger"] .heading {
+      color: var(--ui-danger);
+    }
+
+    .description {
+      color: var(--ui-text-secondary);
+      font-size: var(--ui-font-size-sm);
+      line-height: var(--ui-line-height);
+    }
+
+    .actions {
+      display: inline-flex;
+      flex-wrap: wrap;
+      gap: var(--ui-space-2);
+    }
+
+    .body {
+      display: flex;
+      flex-direction: column;
+      gap: var(--ui-space-4);
+      min-inline-size: 0;
+    }
+
+    .description:empty,
+    .actions:empty {
+      display: none;
+    }
+
+    .head:has(.heading[hidden]):has(.description:empty):has(.actions: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-section"]) to ([data-component]) {
+/* A part of a view: a heading, an optional line under it, actions for the whole section at its
+       end, and the content. Sections space themselves out through the Stack around them. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-spinner.css

@@ -0,0 +1,42 @@
+/* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@keyframes ui-spinner-turn {
+      to {
+        transform: rotate(1turn);
+      }
+    }
+@scope ([data-component~="ui-spinner"]) to ([data-component], [data-slotted]) {
+/* Something is on its way. It turns in the current text colour; with reduced motion it holds still,
+       and the label (or the text beside it) still says what is happening. */
+    :scope {
+      display: inline-flex;
+      flex: none;
+      color: currentColor;
+      font-size: var(--ui-font-size-lg);
+      line-height: 1;
+      animation: ui-spinner-turn 0.8s linear infinite;
+    }
+
+    :scope[data-ui-spinner-state~="size=sm"] {
+      font-size: var(--ui-font-size-md);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      :scope {
+        animation: none;
+      }
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-spinner"]) to ([data-component]) {
+/* Something is on its way. It turns in the current text colour; with reduced motion it holds still,
+       and the label (or the text beside it) still says what is happening. */
+
+    @media (prefers-reduced-motion: reduce) {
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}

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

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

package/vanilla/UiList.js

@@ -0,0 +1,29 @@
+// 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.css";
+
+export function createUiList(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const projected = [];
+  const prop0 = componentProps["layout"] === undefined ? "rows" : componentProps["layout"];
+  const element = document.createElement("ul");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === undefined || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  if (!element.hasAttribute("role")) element.setAttribute("role", "list");
+  element.setAttribute("data-component", "ui-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","grid"], required: false },
+  ]);
+  return element;
+}
+