@threadlabs/looma 0.4.0 → 0.5.0

package/vanilla/UiSwitch.d.ts

@@ -0,0 +1,18 @@
+// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
+export interface UiSwitchEventMap {
+  change: CustomEvent<{ readonly checked: boolean; readonly value: string; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
+}
+export interface UiSwitchElement extends HTMLLabelElement {
+  addEventListener<K extends keyof UiSwitchEventMap>(type: K, listener: (this: UiSwitchElement, event: UiSwitchEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiSwitchEventMap>(type: K, listener: (this: UiSwitchElement, event: UiSwitchEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiSwitchProps {
+  checked?: boolean | null;
+  disabled?: boolean | null;
+  required?: boolean | null;
+  value?: 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 createUiSwitch(props?: UiSwitchProps): UiSwitchElement;

package/vanilla/UiSwitch.js

@@ -0,0 +1,46 @@
+// 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-switch/ui-switch.js";
+import "../styles/ui-switch.css";
+
+const definition = {...{"contract":{"tag":"ui-switch","props":{"checked":{"type":"boolean","required":false,"target":{"attribute":"checked"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"value":{"type":"string","required":false,"target":{"attribute":"value"},"default":"on"}}},"template":{"kind":"element","name":"label","attributes":[],"children":[{"kind":"element","name":"input","attributes":[{"kind":"literal","name":"type","value":"checkbox"},{"kind":"literal","name":"role","value":"switch"},{"kind":"property","key":"checked","name":"checked","expression":"internalChecked","expressionPlan":{"source":"internalChecked","ast":{"kind":"id","name":"internalChecked"},"dependencies":["internalChecked"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"value","expression":"value","expressionPlan":{"source":"value","ast":{"kind":"id","name":"value"},"dependencies":["value"]}}],"children":[],"ref":"input"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label"}],"children":[{"kind":"slot"}]}]},"declarations":[{"kind":"state","name":"internalChecked","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"change","type":"object({ checked: boolean, value: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"label","choices":["label"]}},source:{file:import.meta.url},css:""};
+
+export function createUiSwitch(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const projected = [];
+  const element = document.createElement("label");
+  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-switch");
+  const element0 = document.createElement("input");
+  element0.setAttribute("type", "checkbox");
+  element0.setAttribute("role", "switch");
+  const value0 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
+  if (value0 === true) element0.setAttribute("disabled", "");
+  else element0.removeAttribute("disabled");
+  const value1 = componentProps["required"] === undefined ? false : componentProps["required"];
+  if (value1 === true) element0.setAttribute("required", "");
+  else element0.removeAttribute("required");
+  const value2 = componentProps["value"] === undefined ? "on" : componentProps["value"];
+  if (value2 === null || value2 === undefined) element0.removeAttribute("value");
+  else element0.setAttribute("value", String(value2));
+  element.append(element0);
+  const element1 = document.createElement("span");
+  element1.setAttribute("class", "label");
+  if (children.length > 0) {
+    for (const child of children) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, ""]);
+      element1.append(node);
+    }
+  } else {
+  }
+  element.append(element1);
+  manageComponentLifecycle(element, definition, { props: componentProps, projected,
+    controller,
+  });
+  return element;
+}
+

package/vanilla/UiSwitcher.d.ts

@@ -0,0 +1,16 @@
+// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
+export interface UiSwitcherEventMap {
+}
+export interface UiSwitcherElement extends HTMLDivElement {
+  addEventListener<K extends keyof UiSwitcherEventMap>(type: K, listener: (this: UiSwitcherElement, event: UiSwitcherEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiSwitcherEventMap>(type: K, listener: (this: UiSwitcherElement, event: UiSwitcherEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiSwitcherProps {
+  align?: "start" | "center" | "end" | "stretch" | null;
+  gap?: "xs" | "s" | "m" | "l" | "xl" | null;
+  threshold?: "xs" | "sm" | "md" | "lg" | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+}
+export declare function createUiSwitcher(props?: UiSwitcherProps): UiSwitcherElement;

package/vanilla/UiSwitcher.js

@@ -0,0 +1,32 @@
+// 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-switcher.css";
+
+export function createUiSwitcher(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const projected = [];
+  const prop0 = componentProps["align"] === undefined ? undefined : componentProps["align"];
+  const prop1 = componentProps["gap"] === undefined ? undefined : componentProps["gap"];
+  const prop2 = componentProps["threshold"] === undefined ? undefined : componentProps["threshold"];
+  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-switcher");
+  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"], type: ["start","center","end","stretch"], required: false },
+    { name: "gap", attribute: "data-gap", value: componentProps["gap"], type: ["xs","s","m","l","xl"], required: false },
+    { name: "threshold", attribute: "data-threshold", value: componentProps["threshold"], type: ["xs","sm","md","lg"], required: false },
+  ]);
+  return element;
+}
+

package/vanilla/UiTabs.d.ts

@@ -0,0 +1,18 @@
+// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
+export interface UiTabsEventMap {
+  select: CustomEvent<{ readonly value: string; readonly previousValue: string; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
+}
+export interface UiTabsElement extends HTMLDivElement {
+  addEventListener<K extends keyof UiTabsEventMap>(type: K, listener: (this: UiTabsElement, event: UiTabsEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiTabsEventMap>(type: K, listener: (this: UiTabsElement, event: UiTabsEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiTabsProps {
+  label?: string | null;
+  orientation?: "horizontal" | "vertical" | null;
+  stretch?: boolean | null;
+  value?: 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 createUiTabs(props?: UiTabsProps): UiTabsElement;

package/vanilla/UiTabs.js

@@ -0,0 +1,47 @@
+// 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-tabs/ui-tabs.js";
+import "../styles/ui-tabs.css";
+
+const definition = {...{"contract":{"tag":"ui-tabs","props":{"label":{"type":"string","required":false,"target":{"attribute":"aria-label"},"default":"Tabs"},"orientation":{"type":{"enum":["horizontal","vertical"]},"required":false,"target":{"attribute":"aria-orientation"},"default":"horizontal"},"stretch":{"type":"boolean","required":false,"target":{"attribute":"stretch"},"default":false},"value":{"type":"string","required":false,"target":{"attribute":"value"},"default":""}}},"template":{"kind":"element","name":"div","attributes":[],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"list"},{"kind":"literal","name":"role","value":"tablist"},{"kind":"attribute","name":"aria-label","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}},{"kind":"attribute","name":"aria-orientation","expression":"orientation","expressionPlan":{"source":"orientation","ast":{"kind":"id","name":"orientation"},"dependencies":["orientation"]}}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"role","value":"tab"},{"kind":"attribute","name":"id","expression":"format('%s-tab', tab.id)","expressionPlan":{"source":"format('%s-tab', tab.id)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-tab"},{"kind":"member","object":{"kind":"id","name":"tab"},"key":"id"}]},"dependencies":["tab.id"]}},{"kind":"attribute","name":"value","expression":"tab.id","expressionPlan":{"source":"tab.id","ast":{"kind":"member","object":{"kind":"id","name":"tab"},"key":"id"},"dependencies":["tab.id"]}},{"kind":"attribute","name":"aria-controls","expression":"tab.id","expressionPlan":{"source":"tab.id","ast":{"kind":"member","object":{"kind":"id","name":"tab"},"key":"id"},"dependencies":["tab.id"]}},{"kind":"attribute","name":"aria-selected","expression":"tab.id = internalValue","expressionPlan":{"source":"tab.id = internalValue","ast":{"kind":"binary","op":"=","left":{"kind":"member","object":{"kind":"id","name":"tab"},"key":"id"},"right":{"kind":"id","name":"internalValue"}},"dependencies":["internalValue","tab.id"]}},{"kind":"directive","name":"value","expression":"tab.label","expressionPlan":{"source":"tab.label","ast":{"kind":"member","object":{"kind":"id","name":"tab"},"key":"label"},"dependencies":["tab.label"]}}],"children":[],"flow":{"kind":"each","item":"tab","list":"tabs","listPlan":{"source":"tabs","ast":{"kind":"id","name":"tabs"},"dependencies":["tabs"]},"key":"tab.id","keyPlan":{"source":"tab.id","ast":{"kind":"member","object":{"kind":"id","name":"tab"},"key":"id"},"dependencies":["tab.id"]}}}],"ref":"list"},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"panels"}],"children":[{"kind":"slot"}],"ref":"panels"}]},"declarations":[{"kind":"state","name":"internalValue","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"state","name":"tabs","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"event","name":"select","type":"object({ value: string, previousValue: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+
+export function createUiTabs(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-tabs");
+  const element0 = document.createElement("div");
+  element0.setAttribute("class", "list");
+  element0.setAttribute("role", "tablist");
+  const value0 = componentProps["label"] === undefined ? "Tabs" : componentProps["label"];
+  if (value0 === null || value0 === undefined) element0.removeAttribute("aria-label");
+  else element0.setAttribute("aria-label", String(value0));
+  const value1 = componentProps["orientation"] === undefined ? "horizontal" : componentProps["orientation"];
+  if (value1 === null || value1 === undefined) element0.removeAttribute("aria-orientation");
+  else element0.setAttribute("aria-orientation", String(value1));
+  const element1 = document.createElement("button");
+  element1.setAttribute("type", "button");
+  element1.setAttribute("role", "tab");
+  element0.append(element1);
+  element.append(element0);
+  const element2 = document.createElement("div");
+  element2.setAttribute("class", "panels");
+  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,
+    controller,
+  });
+  return element;
+}
+

package/vanilla/UiTextarea.d.ts

@@ -0,0 +1,19 @@
+// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
+export interface UiTextareaEventMap {
+}
+export interface UiTextareaElement extends HTMLTextAreaElement {
+  addEventListener<K extends keyof UiTextareaEventMap>(type: K, listener: (this: UiTextareaElement, event: UiTextareaEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiTextareaEventMap>(type: K, listener: (this: UiTextareaElement, event: UiTextareaEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiTextareaProps {
+  disabled?: boolean | null;
+  invalid?: boolean | null;
+  readonly?: boolean | null;
+  required?: boolean | null;
+  rows?: number | null;
+  value?: 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 createUiTextarea(props?: UiTextareaProps): UiTextareaElement;

package/vanilla/UiTextarea.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-textarea/ui-textarea.js";
+import "../styles/ui-textarea.css";
+
+const definition = {...{"contract":{"tag":"ui-textarea","props":{"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"invalid":{"type":"boolean","required":false,"target":{"attribute":"aria-invalid"},"default":false},"readonly":{"type":"boolean","required":false,"target":{"attribute":"readonly"},"default":false},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"rows":{"type":{"kind":"terminal","name":"integer"},"required":false,"target":{"attribute":"rows"},"default":4},"value":{"type":"string","required":false,"target":{"attribute":"value"}}}},"template":{"kind":"element","name":"textarea","attributes":[{"kind":"attribute","name":"value","expression":"value","expressionPlan":{"source":"value","ast":{"kind":"id","name":"value"},"dependencies":["value"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"readonly","expression":"readonly","expressionPlan":{"source":"readonly","ast":{"kind":"id","name":"readonly"},"dependencies":["readonly"]}},{"kind":"attribute","name":"required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"aria-invalid","expression":"invalid","expressionPlan":{"source":"invalid","ast":{"kind":"id","name":"invalid"},"dependencies":["invalid"]}},{"kind":"attribute","name":"rows","expression":"rows","expressionPlan":{"source":"rows","ast":{"kind":"id","name":"rows"},"dependencies":["rows"]}}],"children":[]},"declarations":[],"root":{"kind":"native","element":"textarea","choices":["textarea"]}},source:{file:import.meta.url},css:""};
+
+export function createUiTextarea(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const projected = [];
+  const element = document.createElement("textarea");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === undefined || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  const value0 = componentProps["value"] === undefined ? undefined : componentProps["value"];
+  if (value0 === null || value0 === undefined) element.removeAttribute("value");
+  else element.setAttribute("value", String(value0));
+  const value1 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
+  if (value1 === true) element.setAttribute("disabled", "");
+  else element.removeAttribute("disabled");
+  const value2 = componentProps["readonly"] === undefined ? false : componentProps["readonly"];
+  if (value2 === true) element.setAttribute("readonly", "");
+  else element.removeAttribute("readonly");
+  const value3 = componentProps["required"] === undefined ? false : componentProps["required"];
+  if (value3 === true) element.setAttribute("required", "");
+  else element.removeAttribute("required");
+  const value4 = componentProps["invalid"] === undefined ? false : componentProps["invalid"];
+  if (typeof value4 === "boolean") element.setAttribute("aria-invalid", String(value4));
+  else element.removeAttribute("aria-invalid");
+  const value5 = componentProps["rows"] === undefined ? 4 : componentProps["rows"];
+  if (value5 === null || value5 === undefined) element.removeAttribute("rows");
+  else element.setAttribute("rows", String(value5));
+  element.setAttribute("data-component", "ui-textarea");
+  manageComponentLifecycle(element, definition, { props: componentProps, projected,
+    controller,
+  });
+  return element;
+}
+

package/vanilla/UiToastRegion.d.ts

@@ -0,0 +1,20 @@
+// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
+export interface UiToastRegionEventMap {
+  close: CustomEvent<{ readonly open: boolean; readonly reason: "action" | "timeout" | "programmatic" | "light-dismiss" | "escape"; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
+  dismiss: CustomEvent<{ readonly id: string; readonly reason: "action" | "timeout"; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
+}
+export interface UiToastRegionElement extends HTMLDivElement {
+  show(): Promise<string>;
+  addEventListener<K extends keyof UiToastRegionEventMap>(type: K, listener: (this: UiToastRegionElement, event: UiToastRegionEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiToastRegionEventMap>(type: K, listener: (this: UiToastRegionElement, event: UiToastRegionEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiToastRegionProps {
+  auto?: boolean | null;
+  duration?: number | null;
+  message?: string | null;
+  open?: 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 createUiToastRegion(props?: UiToastRegionProps): UiToastRegionElement;

package/vanilla/UiToastRegion.js

@@ -0,0 +1,58 @@
+// 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-toast-region/ui-toast-region.js";
+import "../styles/ui-toast-region.css";
+
+const definition = {...{"contract":{"tag":"ui-toast-region","props":{"auto":{"type":"boolean","required":false,"target":{"attribute":"auto"},"default":false},"duration":{"type":"number","required":false,"target":{"attribute":"duration"},"default":5000},"message":{"type":"string","required":false,"target":{"attribute":"message"},"default":"Notification"},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"region"},{"kind":"literal","name":"aria-label","value":"Notifications"},{"kind":"literal","name":"aria-live","value":"polite"},{"kind":"literal","name":"popover","value":"manual"}],"children":[{"kind":"slot"},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"toast"},{"kind":"attribute","name":"closing","expression":"toast.closing","expressionPlan":{"source":"toast.closing","ast":{"kind":"member","object":{"kind":"id","name":"toast"},"key":"closing"},"dependencies":["toast.closing"]},"target":"class"},{"kind":"attribute","name":"id","expression":"toast.id","expressionPlan":{"source":"toast.id","ast":{"kind":"member","object":{"kind":"id","name":"toast"},"key":"id"},"dependencies":["toast.id"]}},{"kind":"attribute","name":"role","expression":"toast.role","expressionPlan":{"source":"toast.role","ast":{"kind":"member","object":{"kind":"id","name":"toast"},"key":"role"},"dependencies":["toast.role"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"message"},{"kind":"directive","name":"value","expression":"toast.message","expressionPlan":{"source":"toast.message","ast":{"kind":"member","object":{"kind":"id","name":"toast"},"key":"message"},"dependencies":["toast.message"]}}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"dismiss"},{"kind":"attribute","name":"data-toast","expression":"toast.id","expressionPlan":{"source":"toast.id","ast":{"kind":"member","object":{"kind":"id","name":"toast"},"key":"id"},"dependencies":["toast.id"]}}],"children":[{"kind":"element","name":"ui-icon-button","attributes":[{"kind":"literal","name":"size","value":"sm"},{"kind":"literal","name":"variant","value":"ghost"},{"kind":"attribute","name":"round","expression":"true","expressionPlan":{"source":"true","ast":{"kind":"literal","value":true},"dependencies":[]}},{"kind":"attribute","name":"label","expression":"format('Dismiss %s', toast.message)","expressionPlan":{"source":"format('Dismiss %s', toast.message)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"Dismiss %s"},{"kind":"member","object":{"kind":"id","name":"toast"},"key":"message"}]},"dependencies":["toast.message"]}}],"children":[{"kind":"element","name":"svg","attributes":[{"kind":"literal","name":"viewBox","value":"0 0 24 24"},{"kind":"literal","name":"fill","value":"none"},{"kind":"literal","name":"stroke","value":"currentColor"},{"kind":"literal","name":"stroke-width","value":"2"},{"kind":"literal","name":"stroke-linecap","value":"round"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[{"kind":"element","name":"path","attributes":[{"kind":"literal","name":"d","value":"M18 6 6 18M6 6l12 12"}],"children":[]}]}]}]}],"flow":{"kind":"each","item":"toast","list":"toasts","listPlan":{"source":"toasts","ast":{"kind":"id","name":"toasts"},"dependencies":["toasts"]},"key":"toast.id","keyPlan":{"source":"toast.id","ast":{"kind":"member","object":{"kind":"id","name":"toast"},"key":"id"},"dependencies":["toast.id"]}}}]},"declarations":[{"kind":"state","name":"internalOpen","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"toasts","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"event","name":"close","type":"object({ open: boolean, reason: action | timeout | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"dismiss","type":"object({ id: string, reason: action | timeout, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"method","name":"show","exportName":"show","returns":"promise(string)"}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+
+export function createUiToastRegion(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", "region");
+  if (!element.hasAttribute("aria-label")) element.setAttribute("aria-label", "Notifications");
+  if (!element.hasAttribute("aria-live")) element.setAttribute("aria-live", "polite");
+  if (!element.hasAttribute("popover")) element.setAttribute("popover", "manual");
+  element.setAttribute("data-component", "ui-toast-region");
+  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("div");
+  element0.setAttribute("class", "toast");
+  const element1 = document.createElement("span");
+  element1.setAttribute("class", "message");
+  element0.append(element1);
+  const element2 = document.createElement("span");
+  element2.setAttribute("class", "dismiss");
+  const element3 = document.createElement("ui-icon-button");
+  element3.setAttribute("size", "sm");
+  element3.setAttribute("variant", "ghost");
+  const element4 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  element4.setAttribute("viewBox", "0 0 24 24");
+  element4.setAttribute("fill", "none");
+  element4.setAttribute("stroke", "currentColor");
+  element4.setAttribute("stroke-width", "2");
+  element4.setAttribute("stroke-linecap", "round");
+  element4.setAttribute("aria-hidden", "true");
+  const element5 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  element5.setAttribute("d", "M18 6 6 18M6 6l12 12");
+  element4.append(element5);
+  element3.append(element4);
+  element2.append(element3);
+  element0.append(element2);
+  element.append(element0);
+  manageComponentLifecycle(element, definition, { props: componentProps, projected,
+    controller,
+  });
+  return element;
+}
+

package/vanilla/UiTooltip.d.ts

@@ -0,0 +1,21 @@
+// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
+export interface UiTooltipEventMap {
+  open: CustomEvent<{ readonly open: boolean; readonly reason: "action" | "programmatic" | "light-dismiss" | "escape"; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
+  close: CustomEvent<{ readonly open: boolean; readonly reason: "action" | "programmatic" | "light-dismiss" | "escape"; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
+}
+export interface UiTooltipElement extends HTMLSpanElement {
+  addEventListener<K extends keyof UiTooltipEventMap>(type: K, listener: (this: UiTooltipElement, event: UiTooltipEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiTooltipEventMap>(type: K, listener: (this: UiTooltipElement, event: UiTooltipEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiTooltipProps {
+  for?: string | null;
+  hideDelay?: number | null;
+  inverse?: boolean | null;
+  open?: boolean | null;
+  placement?: string | null;
+  showDelay?: 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 createUiTooltip(props?: UiTooltipProps): UiTooltipElement;

package/vanilla/UiTooltip.js

@@ -0,0 +1,34 @@
+// 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-tooltip/ui-tooltip.js";
+import "../styles/ui-tooltip.css";
+
+const definition = {...{"contract":{"tag":"ui-tooltip","props":{"for":{"type":"string","required":false,"target":{"attribute":"for"},"default":""},"hideDelay":{"type":"number","required":false,"target":{"attribute":"hidedelay"},"default":100},"inverse":{"type":"boolean","required":false,"target":{"attribute":"inverse"},"default":false},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false},"placement":{"type":"string","required":false,"target":{"attribute":"placement"},"default":"top-start"},"showDelay":{"type":"number","required":false,"target":{"attribute":"showdelay"},"default":500}}},"template":{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"role","value":"tooltip"},{"kind":"attribute","name":"hidden","expression":"not internalOpen","expressionPlan":{"source":"not internalOpen","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"internalOpen"}},"dependencies":["internalOpen"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"surface"}],"children":[{"kind":"slot"}]}]},"declarations":[{"kind":"state","name":"internalOpen","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"open","type":"object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"close","type":"object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"span","choices":["span"]}},source:{file:import.meta.url},css:""};
+
+export function createUiTooltip(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));
+  }
+  if (!element.hasAttribute("role")) element.setAttribute("role", "tooltip");
+  element.setAttribute("data-component", "ui-tooltip");
+  const element0 = document.createElement("div");
+  element0.setAttribute("class", "surface");
+  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);
+  manageComponentLifecycle(element, definition, { props: componentProps, projected,
+    controller,
+  });
+  return element;
+}
+

package/vanilla/UiTopBar.d.ts

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

package/vanilla/UiTopBar.js

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

package/vanilla/UiTree.d.ts

@@ -0,0 +1,18 @@
+// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
+export interface UiTreeEventMap {
+  reorder: CustomEvent<{ readonly sourceId: string; readonly targetId: string; readonly position: "before" | "inside" | "after"; readonly sourceType: string; readonly targetType: string; readonly sourceScope: string; readonly targetScope: string; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
+  "reorder-rejected": CustomEvent<{ readonly sourceId: string; readonly targetId: string; readonly position: "before" | "inside" | "after"; readonly reason: "max-depth"; readonly maxDepth: number; readonly resultingDepth: number; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
+}
+export interface UiTreeElement extends HTMLDivElement {
+  addEventListener<K extends keyof UiTreeEventMap>(type: K, listener: (this: UiTreeElement, event: UiTreeEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiTreeEventMap>(type: K, listener: (this: UiTreeElement, event: UiTreeEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiTreeProps {
+  hoverExpandDelay?: number | null;
+  label?: string | null;
+  maxDepth?: 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 createUiTree(props?: UiTreeProps): UiTreeElement;

package/vanilla/UiTree.js

@@ -0,0 +1,31 @@
+// 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-tree/ui-tree.js";
+import "../styles/ui-tree.css";
+
+const definition = {...{"contract":{"tag":"ui-tree","props":{"hoverExpandDelay":{"type":"number","required":false,"target":{"attribute":"hoverexpanddelay"},"default":700},"label":{"type":"string","required":false,"target":{"attribute":"label"},"default":"Tree"},"maxDepth":{"type":"number","required":false,"target":{"attribute":"maxdepth"},"default":0}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"tree"}],"children":[{"kind":"slot"}]},"declarations":[{"kind":"event","name":"reorder","type":"object({ sourceId: string, targetId: string, position: before | inside | after, sourceType: string, targetType: string, sourceScope: string, targetScope: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"reorder-rejected","type":"object({ sourceId: string, targetId: string, position: before | inside | after, reason: max-depth, maxDepth: integer, resultingDepth: integer, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+
+export function createUiTree(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", "tree");
+  element.setAttribute("data-component", "ui-tree");
+  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/UiTreeItem.d.ts

@@ -0,0 +1,26 @@
+// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
+export interface UiTreeItemEventMap {
+  expand: CustomEvent<{ readonly id: string; readonly expanded: boolean; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
+}
+export interface UiTreeItemElement extends HTMLDivElement {
+  addEventListener<K extends keyof UiTreeItemEventMap>(type: K, listener: (this: UiTreeItemElement, event: UiTreeItemEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiTreeItemEventMap>(type: K, listener: (this: UiTreeItemElement, event: UiTreeItemEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiTreeItemProps {
+  accepts?: string | null;
+  container?: boolean | null;
+  disabled?: boolean | null;
+  dragType?: string | null;
+  dropDepth?: number | null;
+  dropScope?: string | null;
+  expanded?: boolean | null;
+  itemId?: string | null;
+  label?: string | null;
+  selected?: boolean | null;
+  sortable?: boolean | null;
+  subtreeDepth?: 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 createUiTreeItem(props?: UiTreeItemProps): UiTreeItemElement;