@threadlabs/looma 0.4.0 → 0.5.1

package/styles/ui-tree-item.css

@@ -0,0 +1,267 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-tree-item"]) to ([data-component], [data-slotted]) {
+:scope {
+      --_tree-row-min-height: 32px;
+
+      position: relative;
+      display: block;
+      min-inline-size: 0;
+      margin-inline-start: calc(var(--ui-tree-item-depth, 0) * var(--ui-tree-indent, 16px));
+    }
+
+    .row {
+      position: relative;
+      display: grid;
+      grid-template-columns: 20px auto minmax(0, 1fr) auto;
+      align-items: center;
+      min-block-size: var(--ui-tree-row-min-height, var(--_tree-row-min-height));
+      min-inline-size: 0;
+      font-size: var(--ui-tree-font-size, var(--ui-font-size-ui, 0.9375rem));
+      border-radius: var(--ui-radius-md);
+      color: var(--ui-text-secondary);
+      transition:
+        background-color var(--ui-motion-fast) var(--ui-motion-ease),
+        color var(--ui-motion-fast) var(--ui-motion-ease),
+        opacity var(--ui-motion-fast) var(--ui-motion-ease),
+        box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
+        min-block-size var(--ui-motion-base) var(--ui-motion-ease);
+    }
+
+    .row:hover,
+    :scope[data-ui-tree-item-state~="selected"] .row,
+    .row:focus-within {
+      color: var(--ui-text-primary);
+      background: var(--ui-surface-muted);
+    }
+
+    :scope[data-ui-tree-item-state~="disabled"] .row {
+      opacity: 0.55;
+    }
+
+    :scope[data-dragging] .row {
+      opacity: 0.42;
+    }
+
+    :scope:focus {
+      outline: none;
+    }
+
+    :scope:focus-visible .row {
+      box-shadow: 0 0 0 2px var(--ui-focus-ring);
+    }
+
+    :scope[data-drop-position="inside"] .row {
+      background: var(--ui-accent-subtle);
+      box-shadow: inset 0 0 0 1px var(--ui-tree-drop-color, var(--ui-accent-solid));
+    }
+
+    .disclosure,
+    .disclosure-spacer {
+      grid-column: 1;
+      grid-row: 1;
+      inline-size: 20px;
+      block-size: 28px;
+    }
+
+    .disclosure {
+      display: grid;
+      place-items: center;
+      padding: 0;
+      color: var(--ui-text-muted);
+      background: transparent;
+      border: 0;
+      border-radius: var(--ui-radius-sm);
+      cursor: pointer;
+    }
+
+    .disclosure[hidden] {
+      display: none;
+    }
+
+    .disclosure:hover {
+      color: var(--ui-text-primary);
+      background: var(--ui-surface-elevated);
+    }
+
+    .disclosure-icon {
+      display: grid;
+      place-items: center;
+      inline-size: 14px;
+      block-size: 14px;
+      transform: rotate(-90deg);
+      transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    .disclosure-icon::before {
+      display: block;
+      inline-size: 0.45rem;
+      block-size: 0.45rem;
+      border-inline-end: 2px solid currentColor;
+      border-block-end: 2px solid currentColor;
+      content: "";
+      /* A chevron's ink sits below its box centre; lift it so it centres optically (in either rotation). */
+      transform: translateY(-20%) rotate(45deg);
+    }
+
+    :scope[aria-expanded="true"] .disclosure-icon {
+      transform: rotate(0deg);
+    }
+
+    /* Lucide grip-vertical, filling the handle as in Looma 0.2. */
+    .drag-handle svg {
+      display: block;
+      inline-size: 100%;
+      block-size: 100%;
+    }
+
+    /* Slotted content is outside this scope, so :has() cannot see it; hide only a truly empty slot. */
+    .leading {
+      display: inline-grid;
+      place-items: center;
+      grid-column: 2;
+      grid-row: 1;
+      inline-size: 1em;
+      block-size: 1em;
+      margin-inline-start: var(--ui-space-1);
+      color: var(--ui-text-muted);
+    }
+
+    .leading:empty {
+      display: none;
+    }
+
+    /* Icons match the label's size (as in Knit's tree): an unsized SVG would otherwise render 300×150. */
+
+    .label {
+      grid-column: 3;
+      grid-row: 1;
+      min-inline-size: 0;
+      padding: var(--ui-space-1) var(--ui-space-2);
+    }
+
+    .actions {
+      grid-column: 4;
+      grid-row: 1;
+      display: inline-flex;
+      align-items: center;
+      min-inline-size: 0;
+    }
+
+    .drag-handle {
+      position: absolute;
+      z-index: 2;
+      inset-block-start: 50%;
+      inset-inline-start: -22px;
+      inline-size: 20px;
+      block-size: 32px;
+      display: grid;
+      place-items: center;
+      padding: 7px 3px;
+      color: var(--ui-text-muted);
+      background: var(--ui-surface-elevated);
+      border: 1px solid transparent;
+      border-radius: var(--ui-radius-sm);
+      cursor: grab;
+      /* Hidden until the row is hovered, but always hittable: the handle sits outside the row, and moving
+         the pointer onto it must not hide it on the way. */
+      opacity: 0;
+      transform: translateY(-50%);
+      transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    .row:hover .drag-handle,
+    .drag-handle:hover,
+    .drag-handle:focus-visible,
+    :scope[data-dragging] .drag-handle {
+      opacity: 1;
+    }
+
+    .drag-handle:active {
+      cursor: grabbing;
+    }
+
+    .drop-indicator {
+      position: absolute;
+      z-index: 3;
+      inset-inline: 1px;
+      display: none;
+      block-size: 2px;
+      border-radius: 999px;
+      background: var(--ui-tree-drop-color, var(--ui-accent-solid));
+      pointer-events: none;
+    }
+
+    .drop-indicator::before,
+    .drop-indicator::after {
+      content: "";
+      position: absolute;
+      inset-block-start: 50%;
+      inline-size: 7px;
+      block-size: 7px;
+      border: 2px solid var(--ui-tree-drop-color, var(--ui-accent-solid));
+      border-radius: 999px;
+      background: var(--ui-surface-elevated);
+      transform: translateY(-50%);
+    }
+
+    .drop-indicator::before {
+      inset-inline-start: -1px;
+    }
+    .drop-indicator::after {
+      inset-inline-end: -1px;
+    }
+
+    :scope[data-drop-position="before"] .row-drop-indicator {
+      display: block;
+      inset-block-start: -1px;
+    }
+
+    :scope[data-drop-position="after"] .subtree-drop-indicator {
+      display: block;
+      inset-block-end: -1px;
+    }
+
+    .children[hidden] {
+      display: none;
+    }
+
+    html[data-ui-input-modality="touch"] :scope {
+      --_tree-row-min-height: 44px;
+    }
+
+    html[data-ui-input-modality="touch"] :scope .drag-handle {
+      display: none;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .row,
+      .disclosure-icon,
+      .drag-handle {
+        transition: none;
+      }
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-tree-item"]) to ([data-component]) {
+/* Lucide grip-vertical, filling the handle as in Looma 0.2. */
+
+    /* Slotted content is outside this scope, so :has() cannot see it; hide only a truly empty slot. */
+
+    /* Icons match the label's size (as in Knit's tree): an unsized SVG would otherwise render 300×150. */
+    :where([data-slotted], [data-slotted] *):is(svg),
+    :where([data-slotted], [data-slotted] *):is(img) {
+      display: block;
+      inline-size: 1em;
+      block-size: 1em;
+      flex: none;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-tree.css

@@ -0,0 +1,16 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-tree"]) to ([data-component], [data-slotted]) {
+:scope {
+      display: block;
+      min-inline-size: 0;
+      padding-inline-start: var(--ui-tree-gutter, 0px);
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-tree"]) to ([data-component]) {
+/* A component that sets its display still honours the hidden attribute on its root. */
+}

package/vanilla/UiAffordanceScope.d.ts

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

package/vanilla/UiAffordanceScope.js

@@ -0,0 +1,30 @@
+// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
+import { manageComponentLifecycle } from "@nextwebwg/declarative-components/runtime";
+import * as controller from "../components/ui-affordance-scope/ui-affordance-scope.js";
+import "../styles/ui-affordance-scope.css";
+
+const definition = {...{"contract":{"tag":"ui-affordance-scope","props":{"nearRadius":{"type":"number","required":false,"target":{"attribute":"nearradius"},"default":16}}},"template":{"kind":"element","name":"span","attributes":[],"children":[{"kind":"slot"}]},"declarations":[{"kind":"state","name":"engaged","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}}],"root":{"kind":"native","element":"span","choices":["span"]}},source:{file:import.meta.url},css:""};
+
+export function createUiAffordanceScope(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-affordance-scope");
+  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 {
+  }
+  manageComponentLifecycle(element, definition, { props: componentProps, projected,
+    controller,
+  });
+  return element;
+}
+

package/vanilla/UiAvatar.d.ts

@@ -0,0 +1,17 @@
+// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
+export interface UiAvatarEventMap {
+}
+export interface UiAvatarElement extends HTMLSpanElement {
+  addEventListener<K extends keyof UiAvatarEventMap>(type: K, listener: (this: UiAvatarElement, event: UiAvatarEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiAvatarEventMap>(type: K, listener: (this: UiAvatarElement, event: UiAvatarEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiAvatarProps {
+  alt?: string | null;
+  fallback?: string | null;
+  name?: string | null;
+  src?: 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 createUiAvatar(props?: UiAvatarProps): UiAvatarElement;

package/vanilla/UiAvatar.js

@@ -0,0 +1,41 @@
+// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
+import { manageComponentLifecycle } from "@nextwebwg/declarative-components/runtime";
+import * as controller from "../components/ui-avatar/ui-avatar.js";
+import "../styles/ui-avatar.css";
+
+const definition = {...{"contract":{"tag":"ui-avatar","props":{"alt":{"type":"string","required":false,"target":{"attribute":"alt"},"default":""},"fallback":{"type":"string","required":false,"target":{"attribute":"fallback"},"default":""},"name":{"type":"string","required":false,"target":{"attribute":"name"},"default":""},"src":{"type":"string","required":false,"target":{"attribute":"src"}}}},"template":{"kind":"element","name":"span","attributes":[],"children":[{"kind":"slot"},{"kind":"element","name":"img","attributes":[{"kind":"literal","name":"class","value":"image"},{"kind":"attribute","name":"src","expression":"src","expressionPlan":{"source":"src","ast":{"kind":"id","name":"src"},"dependencies":["src"]}},{"kind":"literal","name":"alt","value":""},{"kind":"literal","name":"aria-hidden","value":"true"},{"kind":"attribute","name":"hidden","expression":"hasAuthoredImage or not hasImage","expressionPlan":{"source":"hasAuthoredImage or not hasImage","ast":{"kind":"binary","op":"or","left":{"kind":"id","name":"hasAuthoredImage"},"right":{"kind":"unary","op":"not","operand":{"kind":"id","name":"hasImage"}}},"dependencies":["hasAuthoredImage","hasImage"]}}],"children":[],"ref":"image"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"fallback"},{"kind":"attribute","name":"aria-hidden","expression":"hasImage","expressionPlan":{"source":"hasImage","ast":{"kind":"id","name":"hasImage"},"dependencies":["hasImage"]}},{"kind":"attribute","name":"hidden","expression":"hasImage","expressionPlan":{"source":"hasImage","ast":{"kind":"id","name":"hasImage"},"dependencies":["hasImage"]}},{"kind":"directive","name":"value","expression":"initials","expressionPlan":{"source":"initials","ast":{"kind":"id","name":"initials"},"dependencies":["initials"]}}],"children":[]}]},"declarations":[{"kind":"state","name":"hasImage","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"hasAuthoredImage","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"initials","expression":{"source":"'?'","ast":{"kind":"literal","value":"?"},"dependencies":[]}}],"root":{"kind":"native","element":"span","choices":["span"]}},source:{file:import.meta.url},css:""};
+
+export function createUiAvatar(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-avatar");
+  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 {
+  }
+  const element0 = document.createElement("img");
+  element0.setAttribute("class", "image");
+  const value0 = componentProps["src"] === undefined ? undefined : componentProps["src"];
+  if (value0 === null || value0 === undefined) element0.removeAttribute("src");
+  else element0.setAttribute("src", String(value0));
+  element0.setAttribute("alt", "");
+  element0.setAttribute("aria-hidden", "true");
+  element.append(element0);
+  const element1 = document.createElement("span");
+  element1.setAttribute("class", "fallback");
+  element.append(element1);
+  manageComponentLifecycle(element, definition, { props: componentProps, projected,
+    controller,
+  });
+  return element;
+}
+

package/vanilla/UiAvatarGroup.d.ts

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

package/vanilla/UiAvatarGroup.js

@@ -0,0 +1,40 @@
+// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
+import { manageComponentLifecycle } from "@nextwebwg/declarative-components/runtime";
+import * as controller from "../components/ui-avatar-group/ui-avatar-group.js";
+import "../styles/ui-avatar-group.css";
+
+const definition = {...{"contract":{"tag":"ui-avatar-group","props":{"label":{"type":"string","required":false,"target":{"attribute":"aria-label"},"default":"People"},"max":{"type":"number","required":false,"target":{"attribute":"max"},"default":5}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"group"},{"kind":"attribute","name":"aria-label","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}],"children":[{"kind":"slot"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"overflow"},{"kind":"literal","name":"role","value":"img"},{"kind":"attribute","name":"hidden","expression":"not overflowCount","expressionPlan":{"source":"not overflowCount","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"overflowCount"}},"dependencies":["overflowCount"]}},{"kind":"attribute","name":"aria-label","expression":"format('%s more', overflowCount)","expressionPlan":{"source":"format('%s more', overflowCount)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s more"},{"kind":"id","name":"overflowCount"}]},"dependencies":["overflowCount"]}}],"children":[{"kind":"element","name":"template","attributes":[{"kind":"directive","name":"value","expression":"format('+%s', overflowCount)","expressionPlan":{"source":"format('+%s', overflowCount)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"+%s"},{"kind":"id","name":"overflowCount"}]},"dependencies":["overflowCount"]}}],"children":[]}],"ref":"overflow"}]},"declarations":[{"kind":"state","name":"overflowCount","expression":{"source":"0","ast":{"kind":"literal","value":0},"dependencies":[]}}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+
+export function createUiAvatarGroup(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));
+  }
+  if (!element.hasAttribute("role")) element.setAttribute("role", "group");
+  const value0 = componentProps["label"] === undefined ? "People" : componentProps["label"];
+  if (value0 === null || value0 === undefined) element.removeAttribute("aria-label");
+  else element.setAttribute("aria-label", String(value0));
+  element.setAttribute("data-component", "ui-avatar-group");
+  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 {
+  }
+  const element0 = document.createElement("span");
+  element0.setAttribute("class", "overflow");
+  element0.setAttribute("role", "img");
+  const element1 = document.createElement("template");
+  element0.append(element1);
+  element.append(element0);
+  manageComponentLifecycle(element, definition, { props: componentProps, projected,
+    controller,
+  });
+  return element;
+}
+

package/vanilla/UiBadge.d.ts

@@ -0,0 +1,15 @@
+// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
+export interface UiBadgeEventMap {
+}
+export interface UiBadgeElement extends HTMLSpanElement {
+  addEventListener<K extends keyof UiBadgeEventMap>(type: K, listener: (this: UiBadgeElement, event: UiBadgeEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiBadgeEventMap>(type: K, listener: (this: UiBadgeElement, event: UiBadgeEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiBadgeProps {
+  tone?: "neutral" | "accent" | "info" | "success" | "warning" | "danger" | null;
+  variant?: "solid" | "subtle" | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+}
+export declare function createUiBadge(props?: UiBadgeProps): UiBadgeElement;

package/vanilla/UiBadge.js

@@ -0,0 +1,30 @@
+// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
+import { manageGeneratedProps } from "@nextwebwg/declarative-components/generated-runtime";
+import "../styles/ui-badge.css";
+
+export function createUiBadge(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const projected = [];
+  const prop0 = componentProps["tone"] === undefined ? "neutral" : componentProps["tone"];
+  const prop1 = componentProps["variant"] === undefined ? "subtle" : componentProps["variant"];
+  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-badge");
+  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: "tone", attribute: "data-tone", value: componentProps["tone"], default: "neutral", type: ["neutral","accent","info","success","warning","danger"], required: false },
+    { name: "variant", attribute: "data-variant", value: componentProps["variant"], default: "subtle", type: ["solid","subtle"], required: false },
+  ]);
+  return element;
+}
+

package/vanilla/UiButton.d.ts

@@ -0,0 +1,16 @@
+// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
+export interface UiButtonEventMap {
+}
+export interface UiButtonElement extends HTMLButtonElement {
+  addEventListener<K extends keyof UiButtonEventMap>(type: K, listener: (this: UiButtonElement, event: UiButtonEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiButtonEventMap>(type: K, listener: (this: UiButtonElement, event: UiButtonEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiButtonProps {
+  disabled?: boolean | null;
+  size?: "sm" | "md" | "lg" | null;
+  variant?: "outline" | "solid" | "danger" | "ghost" | "link" | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+}
+export declare function createUiButton(props?: UiButtonProps): UiButtonElement;

package/vanilla/UiButton.js

@@ -0,0 +1,32 @@
+// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
+import { manageComponentLifecycle } from "@nextwebwg/declarative-components/runtime";
+import "../styles/ui-button.css";
+
+const definition = {...{"contract":{"tag":"ui-button","props":{"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"size":{"type":{"enum":["sm","md","lg"]},"required":false,"target":{"attribute":"size"},"default":"md"},"variant":{"type":{"enum":["outline","solid","danger","ghost","link"]},"required":false,"target":{"attribute":"variant"},"default":"outline"}}},"template":{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}}],"children":[{"kind":"slot"}]},"declarations":[],"root":{"kind":"native","element":"button","choices":["button"]}},source:{file:import.meta.url},css:""};
+
+export function createUiButton(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const projected = [];
+  const element = document.createElement("button");
+  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("type")) element.setAttribute("type", "button");
+  const value0 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
+  if (value0 === true) element.setAttribute("disabled", "");
+  else element.removeAttribute("disabled");
+  element.setAttribute("data-component", "ui-button");
+  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 {
+  }
+  manageComponentLifecycle(element, definition, { props: componentProps, projected,
+  });
+  return element;
+}
+

package/vanilla/UiCallout.d.ts

@@ -0,0 +1,14 @@
+// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
+export interface UiCalloutEventMap {
+}
+export interface UiCalloutElement extends HTMLDivElement {
+  addEventListener<K extends keyof UiCalloutEventMap>(type: K, listener: (this: UiCalloutElement, event: UiCalloutEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiCalloutEventMap>(type: K, listener: (this: UiCalloutElement, event: UiCalloutEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiCalloutProps {
+  tone?: "info" | "note" | "warning" | "success" | "danger" | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+}
+export declare function createUiCallout(props?: UiCalloutProps): UiCalloutElement;