@threadlabs/looma 0.17.0 → 0.17.2

package/vanilla/UiDialog.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-dialog/ui-dialog.js";
 import "../styles/ui-dialog.css";
 
-const definition = {...{"contract":{"tag":"ui-dialog","props":{"alert":{"type":"boolean","required":false,"target":{"attribute":"alert"},"default":false},"closedby":{"type":{"enum":["any","closerequest","none"]},"required":false,"target":{"attribute":"closedby"}},"for":{"type":"string","required":false,"target":{"attribute":"for"},"default":""},"label":{"type":"string","required":false,"target":{"attribute":"label"}},"modal":{"type":"boolean","required":false,"target":{"attribute":"modal"},"default":false},"modeless":{"type":"boolean","required":false,"target":{"attribute":"modeless"},"default":false},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false},"size":{"type":{"enum":["sm","md","lg","fullscreen"]},"required":false,"target":{"attribute":"size"},"default":"md"}}},"template":{"kind":"element","name":"dialog","attributes":[{"kind":"attribute","name":"aria-label","expression":"accessibleLabel","expressionPlan":{"source":"accessibleLabel","ast":{"kind":"id","name":"accessibleLabel"},"dependencies":["accessibleLabel"]}}],"children":[{"kind":"element","name":"header","attributes":[],"children":[{"kind":"element","name":"h2","attributes":[{"kind":"literal","name":"class","value":"title"},{"kind":"directive","name":"value","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}],"children":[],"flow":{"kind":"if","test":"label","testPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"class","value":"close"},{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"aria-label","value":"Close"}],"children":[],"ref":"close"}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"body"}],"children":[{"kind":"slot"}]},{"kind":"element","name":"footer","attributes":[],"children":[{"kind":"slot","fallback":[],"name":"actions"}]}]},"declarations":[{"kind":"state","name":"internalOpen","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"accessibleLabel","expression":{"source":"'Dialog'","ast":{"kind":"literal","value":"Dialog"},"dependencies":[]}},{"kind":"event","name":"open","type":"object({ open: boolean, reason: action | programmatic, 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":"dialog","choices":["dialog"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-dialog","props":{"alert":{"type":"boolean","required":false,"target":{"attribute":"alert"},"default":false},"closedby":{"type":{"enum":["any","closerequest","none"]},"required":false,"target":{"attribute":"closedby"}},"for":{"type":"string","required":false,"target":{"attribute":"for"},"default":""},"label":{"type":"string","required":false,"target":{"attribute":"label"}},"modal":{"type":"boolean","required":false,"target":{"attribute":"modal"},"default":false},"modeless":{"type":"boolean","required":false,"target":{"attribute":"modeless"},"default":false},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false},"size":{"type":{"enum":["sm","md","lg","fullscreen"]},"required":false,"target":{"attribute":"size"},"default":"md"}}},"template":{"kind":"element","name":"dialog","attributes":[{"kind":"attribute","name":"aria-label","expression":"accessibleLabel","expressionPlan":{"source":"accessibleLabel","ast":{"kind":"id","name":"accessibleLabel"},"dependencies":["accessibleLabel"]}}],"children":[{"kind":"element","name":"header","attributes":[],"children":[{"kind":"element","name":"h2","attributes":[{"kind":"literal","name":"class","value":"title"},{"kind":"directive","name":"value","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}],"children":[],"flow":{"kind":"if","test":"label","testPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"class","value":"close"},{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"aria-label","value":"Close"}],"children":[],"ref":"close"}]},{"kind":"element","name":"ui-scroll-area","attributes":[{"kind":"literal","name":"class","value":"body"}],"children":[{"kind":"slot"}]},{"kind":"element","name":"footer","attributes":[],"children":[{"kind":"slot","fallback":[],"name":"actions"}]}]},"declarations":[{"kind":"state","name":"internalOpen","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"accessibleLabel","expression":{"source":"'Dialog'","ast":{"kind":"literal","value":"Dialog"},"dependencies":[]}},{"kind":"event","name":"open","type":"object({ open: boolean, reason: action | programmatic, 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":"dialog","choices":["dialog"]}},source:{file:import.meta.url},css:""};
 
 export function createUiDialog(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
@@ -24,7 +24,7 @@ export function createUiDialog(options = {}) {
   element2.setAttribute("aria-label", "Close");
   element0.append(element2);
   element.append(element0);
-  const element3 = document.createElement("div");
+  const element3 = document.createElement("ui-scroll-area");
   element3.setAttribute("class", "body");
   if (children.length > 0) {
     for (const child of children) {

package/vanilla/UiIconButton.d.ts

@@ -9,6 +9,7 @@ export interface UiIconButtonProps {
   anticipatory?: boolean | null;
   disabled?: boolean | null;
   label?: string | null;
+  loading?: boolean | null;
   pending?: boolean | null;
   round?: boolean | null;
   size?: "sm" | "md" | "lg" | null;

package/vanilla/UiIconButton.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-icon-button/ui-icon-button.js";
 import "../styles/ui-icon-button.css";
 
-const definition = {...{"contract":{"tag":"ui-icon-button","props":{"anticipatory":{"type":"boolean","required":false,"target":{"attribute":"anticipatory"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"label":{"type":"string","required":false,"target":{"attribute":"aria-label"}},"pending":{"type":"boolean","required":false,"target":{"attribute":"aria-busy"},"default":false},"round":{"type":"boolean","required":false,"target":{"attribute":"round"},"default":false},"size":{"type":{"enum":["sm","md","lg"]},"required":false,"target":{"attribute":"size"},"default":"md"},"variant":{"type":{"enum":["ghost","outline","solid"]},"required":false,"target":{"attribute":"variant"},"default":"ghost"}}},"template":{"kind":"element","name":"button","attributes":[{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"aria-label","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}},{"kind":"attribute","name":"aria-disabled","expression":"{ true: 'true', false: null }[format('%s', pending)]","expressionPlan":{"source":"{ true: 'true', false: null }[format('%s', pending)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":"true"}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"id","name":"pending"}]}},"dependencies":["pending"]}},{"kind":"attribute","name":"aria-busy","expression":"pending","expressionPlan":{"source":"pending","ast":{"kind":"id","name":"pending"},"dependencies":["pending"]}}],"children":[{"kind":"element","name":"ui-spinner","attributes":[{"kind":"literal","name":"size","value":"sm"}],"children":[],"flow":{"kind":"if","test":"pending","testPlan":{"source":"pending","ast":{"kind":"id","name":"pending"},"dependencies":["pending"]}}},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"content"}],"children":[{"kind":"slot"}]}]},"declarations":[],"root":{"kind":"native","element":"button","choices":["button"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-icon-button","props":{"anticipatory":{"type":"boolean","required":false,"target":{"attribute":"anticipatory"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"label":{"type":"string","required":false,"target":{"attribute":"aria-label"}},"loading":{"type":"boolean","required":false,"target":{"attribute":"loading"},"default":false},"pending":{"type":"boolean","required":false,"target":{"attribute":"pending"},"default":false},"round":{"type":"boolean","required":false,"target":{"attribute":"round"},"default":false},"size":{"type":{"enum":["sm","md","lg"]},"required":false,"target":{"attribute":"size"},"default":"md"},"variant":{"type":{"enum":["ghost","outline","solid"]},"required":false,"target":{"attribute":"variant"},"default":"ghost"}}},"template":{"kind":"element","name":"button","attributes":[{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"aria-label","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}},{"kind":"attribute","name":"aria-disabled","expression":"{ true: 'true', false: null }[format('%s', loading or pending)]","expressionPlan":{"source":"{ true: 'true', false: null }[format('%s', loading or pending)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":"true"}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":"or","left":{"kind":"id","name":"loading"},"right":{"kind":"id","name":"pending"}}]}},"dependencies":["loading","pending"]}},{"kind":"attribute","name":"aria-busy","expression":"loading or pending","expressionPlan":{"source":"loading or pending","ast":{"kind":"binary","op":"or","left":{"kind":"id","name":"loading"},"right":{"kind":"id","name":"pending"}},"dependencies":["loading","pending"]}}],"children":[{"kind":"element","name":"ui-spinner","attributes":[{"kind":"literal","name":"size","value":"sm"}],"children":[],"flow":{"kind":"if","test":"loading or pending","testPlan":{"source":"loading or pending","ast":{"kind":"binary","op":"or","left":{"kind":"id","name":"loading"},"right":{"kind":"id","name":"pending"}},"dependencies":["loading","pending"]}}},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"content"}],"children":[{"kind":"slot"}]}]},"declarations":[],"root":{"kind":"native","element":"button","choices":["button"]}},source:{file:import.meta.url},css:""};
 
 export function createUiIconButton(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
@@ -20,9 +20,6 @@ export function createUiIconButton(options = {}) {
   const value1 = componentProps["label"] === undefined ? undefined : componentProps["label"];
   if (value1 === null || value1 === undefined) element.removeAttribute("aria-label");
   else element.setAttribute("aria-label", String(value1));
-  const value2 = componentProps["pending"] === undefined ? false : componentProps["pending"];
-  if (typeof value2 === "boolean") element.setAttribute("aria-busy", String(value2));
-  else element.removeAttribute("aria-busy");
   element.setAttribute("data-component", "ui-icon-button");
   const element0 = document.createElement("ui-spinner");
   element0.setAttribute("size", "sm");

package/vanilla/UiList.d.ts

@@ -1,13 +1,15 @@
 // Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
 export interface UiListEventMap {
 }
-export interface UiListElement extends HTMLUListElement {
+export interface UiListElement extends HTMLElement {
   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 {
+  as?: "ul" | "ol" | null;
   density?: "comfortable" | "compact" | null;
   layout?: "rows" | "grid" | null;
+  markers?: "none" | "disc" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];
   slots?: Readonly<Record<string, readonly (string | Node)[]>>;

package/vanilla/UiList.js

@@ -1,31 +1,48 @@
 // Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
-import { manageGeneratedProps } from "@nextwebwg/html-next/generated-runtime";
+import { componentRootIndex, manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import "../styles/ui-list.css";
 
+const definition = {...{"contract":{"tag":"ui-list","props":{"as":{"type":{"enum":["ul","ol"]},"required":false,"target":{"attribute":"as"},"default":"ul"},"density":{"type":{"enum":["comfortable","compact"]},"required":false,"target":{"attribute":"density"},"default":"comfortable"},"layout":{"type":{"enum":["rows","grid"]},"required":false,"target":{"attribute":"layout"},"default":"rows"},"markers":{"type":{"enum":["none","disc"]},"required":false,"target":{"attribute":"markers"},"default":"none"}}},"template":{"kind":"element","name":"template","attributes":[],"children":[{"kind":"element","name":"ol","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'ol'","testPlan":{"source":"as = 'ol'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"ol"}},"dependencies":["as"]}}},{"kind":"element","name":"ul","attributes":[{"kind":"literal","name":"role","value":"list"}],"children":[{"kind":"slot"}],"flow":{"kind":"else"}}],"flow":{"kind":"match"}},"declarations":[],"root":{"kind":"native","element":"ul","choices":["ol","ul"]}},source:{file:import.meta.url},css:""};
+
 export function createUiList(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
   const projected = [];
-  const prop0 = componentProps["density"] === undefined ? "comfortable" : componentProps["density"];
-  const prop1 = 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);
+  const root = componentRootIndex(definition, componentProps);
+  let element;
+  if (root === 0) {
+    element = document.createElement("ol");
+    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-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 {
     }
   } else {
+    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: "density", attribute: "data-density", value: componentProps["density"], default: "comfortable", type: ["comfortable","compact"], required: false },
-    { name: "layout", attribute: "data-layout", value: componentProps["layout"], default: "rows", type: ["rows","grid"], required: false },
-  ]);
+  manageComponentLifecycle(element, definition, { props: componentProps, projected,
+  });
   return element;
 }
 

package/vanilla/UiMenu.d.ts

@@ -11,6 +11,7 @@ export interface UiMenuElement extends HTMLDivElement {
 export interface UiMenuProps {
   density?: "comfortable" | "compact" | null;
   for?: string | null;
+  inline?: boolean | null;
   open?: boolean | null;
   placement?: string | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;

package/vanilla/UiMenu.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-menu/ui-menu.js";
 import "../styles/ui-menu.css";
 
-const definition = {...{"contract":{"tag":"ui-menu","props":{"density":{"type":{"enum":["comfortable","compact"]},"required":false,"target":{"attribute":"density"},"default":"comfortable"},"for":{"type":"string","required":false,"target":{"attribute":"for"},"default":""},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false},"placement":{"type":"string","required":false,"target":{"attribute":"placement"},"default":"bottom-start"}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"menu"},{"kind":"literal","name":"aria-orientation","value":"vertical"}],"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":"select","type":"object({ value: string, checked?: boolean, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"open","type":"object({ open: boolean, reason: action | programmatic, 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":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-menu","props":{"density":{"type":{"enum":["comfortable","compact"]},"required":false,"target":{"attribute":"density"},"default":"comfortable"},"for":{"type":"string","required":false,"target":{"attribute":"for"},"default":""},"inline":{"type":"boolean","required":false,"target":{"attribute":"inline"},"default":false},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false},"placement":{"type":"string","required":false,"target":{"attribute":"placement"},"default":"bottom-start"}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"menu"},{"kind":"literal","name":"aria-orientation","value":"vertical"}],"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":"select","type":"object({ value: string, checked?: boolean, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"open","type":"object({ open: boolean, reason: action | programmatic, 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":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
 
 export function createUiMenu(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;

package/vanilla/UiMenuItem.js

@@ -3,7 +3,7 @@ import { componentRootIndex, manageComponentLifecycle } from "@nextwebwg/html-ne
 import * as controller from "../components/ui-menu-item/ui-menu-item.js";
 import "../styles/ui-menu-item.css";
 
-const definition = {...{"contract":{"tag":"ui-menu-item","props":{"checked":{"type":"boolean","required":false,"target":{"attribute":"checked"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"aria-disabled"},"default":false},"href":{"type":"string","required":false,"target":{"attribute":"href"},"default":""},"type":{"type":{"enum":["action","checkbox","radio"]},"required":false,"target":{"attribute":"type"},"default":"action"},"value":{"type":"string","required":false,"target":{"attribute":"data-value"},"default":""}}},"template":{"kind":"element","name":"template","attributes":[],"children":[{"kind":"element","name":"a","attributes":[{"kind":"literal","name":"role","value":"menuitem"},{"kind":"literal","name":"tabindex","value":"-1"},{"kind":"attribute","name":"aria-disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"data-value","expression":"value","expressionPlan":{"source":"value","ast":{"kind":"id","name":"value"},"dependencies":["value"]}},{"kind":"attribute","name":"href","expression":"{ true: null, false: href }[format('%s', disabled)]","expressionPlan":{"source":"{ true: null, false: href }[format('%s', disabled)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":null}},{"key":"false","value":{"kind":"id","name":"href"}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"id","name":"disabled"}]}},"dependencies":["disabled","href"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label"}],"children":[{"kind":"slot"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"shortcut"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[{"kind":"slot","fallback":[],"name":"shortcut"}]}],"flow":{"kind":"when","test":"href and type = 'action'","testPlan":{"source":"href and type = 'action'","ast":{"kind":"binary","op":"and","left":{"kind":"id","name":"href"},"right":{"kind":"binary","op":"=","left":{"kind":"id","name":"type"},"right":{"kind":"literal","value":"action"}}},"dependencies":["href","type"]}}},{"kind":"element","name":"div","attributes":[{"kind":"attribute","name":"role","expression":"{ action: 'menuitem', checkbox: 'menuitemcheckbox', radio: 'menuitemradio' }[type]","expressionPlan":{"source":"{ action: 'menuitem', checkbox: 'menuitemcheckbox', radio: 'menuitemradio' }[type]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"action","value":{"kind":"literal","value":"menuitem"}},{"key":"checkbox","value":{"kind":"literal","value":"menuitemcheckbox"}},{"key":"radio","value":{"kind":"literal","value":"menuitemradio"}}]},"index":{"kind":"id","name":"type"}},"dependencies":["type"]}},{"kind":"attribute","name":"aria-checked","expression":"{ action: null, checkbox: internalChecked, radio: internalChecked }[type]","expressionPlan":{"source":"{ action: null, checkbox: internalChecked, radio: internalChecked }[type]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"action","value":{"kind":"literal","value":null}},{"key":"checkbox","value":{"kind":"id","name":"internalChecked"}},{"key":"radio","value":{"kind":"id","name":"internalChecked"}}]},"index":{"kind":"id","name":"type"}},"dependencies":["internalChecked","type"]}},{"kind":"literal","name":"tabindex","value":"-1"},{"kind":"attribute","name":"aria-disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"data-value","expression":"value","expressionPlan":{"source":"value","ast":{"kind":"id","name":"value"},"dependencies":["value"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"indicator"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"literal","name":"name","value":"check"}],"children":[],"flow":{"kind":"if","test":"type = 'checkbox' and internalChecked","testPlan":{"source":"type = 'checkbox' and internalChecked","ast":{"kind":"binary","op":"and","left":{"kind":"binary","op":"=","left":{"kind":"id","name":"type"},"right":{"kind":"literal","value":"checkbox"}},"right":{"kind":"id","name":"internalChecked"}},"dependencies":["internalChecked","type"]}}},{"kind":"element","name":"ui-icon","attributes":[{"kind":"literal","name":"name","value":"circle-dot"}],"children":[],"flow":{"kind":"if","test":"type = 'radio' and internalChecked","testPlan":{"source":"type = 'radio' and internalChecked","ast":{"kind":"binary","op":"and","left":{"kind":"binary","op":"=","left":{"kind":"id","name":"type"},"right":{"kind":"literal","value":"radio"}},"right":{"kind":"id","name":"internalChecked"}},"dependencies":["internalChecked","type"]}}}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label"}],"children":[{"kind":"slot"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"shortcut"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[{"kind":"slot","fallback":[],"name":"shortcut"}]}],"flow":{"kind":"else"}}],"flow":{"kind":"match"}},"declarations":[{"kind":"state","name":"internalChecked","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"change","type":"object({ checked: boolean, value: string, type: checkbox | radio, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["a","div"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-menu-item","props":{"checked":{"type":"boolean","required":false,"target":{"attribute":"checked"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"aria-disabled"},"default":false},"href":{"type":"string","required":false,"target":{"attribute":"href"},"default":""},"type":{"type":{"enum":["action","checkbox","radio"]},"required":false,"target":{"attribute":"type"},"default":"action"},"value":{"type":"string","required":false,"target":{"attribute":"data-value"},"default":""}}},"template":{"kind":"element","name":"template","attributes":[],"children":[{"kind":"element","name":"a","attributes":[{"kind":"literal","name":"role","value":"menuitem"},{"kind":"literal","name":"tabindex","value":"-1"},{"kind":"attribute","name":"aria-disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"data-value","expression":"value","expressionPlan":{"source":"value","ast":{"kind":"id","name":"value"},"dependencies":["value"]}},{"kind":"attribute","name":"href","expression":"{ true: null, false: href }[format('%s', disabled)]","expressionPlan":{"source":"{ true: null, false: href }[format('%s', disabled)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":null}},{"key":"false","value":{"kind":"id","name":"href"}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"id","name":"disabled"}]}},"dependencies":["disabled","href"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label"}],"children":[{"kind":"slot"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"shortcut"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[{"kind":"slot","fallback":[],"name":"shortcut"}]}],"flow":{"kind":"when","test":"href and type = 'action'","testPlan":{"source":"href and type = 'action'","ast":{"kind":"binary","op":"and","left":{"kind":"id","name":"href"},"right":{"kind":"binary","op":"=","left":{"kind":"id","name":"type"},"right":{"kind":"literal","value":"action"}}},"dependencies":["href","type"]}}},{"kind":"element","name":"div","attributes":[{"kind":"attribute","name":"role","expression":"{ action: 'menuitem', checkbox: 'menuitemcheckbox', radio: 'menuitemradio' }[type]","expressionPlan":{"source":"{ action: 'menuitem', checkbox: 'menuitemcheckbox', radio: 'menuitemradio' }[type]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"action","value":{"kind":"literal","value":"menuitem"}},{"key":"checkbox","value":{"kind":"literal","value":"menuitemcheckbox"}},{"key":"radio","value":{"kind":"literal","value":"menuitemradio"}}]},"index":{"kind":"id","name":"type"}},"dependencies":["type"]}},{"kind":"attribute","name":"aria-checked","expression":"{ action: null, checkbox: internalChecked, radio: internalChecked }[type]","expressionPlan":{"source":"{ action: null, checkbox: internalChecked, radio: internalChecked }[type]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"action","value":{"kind":"literal","value":null}},{"key":"checkbox","value":{"kind":"id","name":"internalChecked"}},{"key":"radio","value":{"kind":"id","name":"internalChecked"}}]},"index":{"kind":"id","name":"type"}},"dependencies":["internalChecked","type"]}},{"kind":"literal","name":"tabindex","value":"-1"},{"kind":"attribute","name":"aria-disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"data-value","expression":"value","expressionPlan":{"source":"value","ast":{"kind":"id","name":"value"},"dependencies":["value"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"indicator"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"literal","name":"name","value":"check"}],"children":[],"flow":{"kind":"if","test":"type = 'checkbox' and internalChecked","testPlan":{"source":"type = 'checkbox' and internalChecked","ast":{"kind":"binary","op":"and","left":{"kind":"binary","op":"=","left":{"kind":"id","name":"type"},"right":{"kind":"literal","value":"checkbox"}},"right":{"kind":"id","name":"internalChecked"}},"dependencies":["internalChecked","type"]}}}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label"}],"children":[{"kind":"slot"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"shortcut"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[{"kind":"slot","fallback":[],"name":"shortcut"}]}],"flow":{"kind":"else"}}],"flow":{"kind":"match"}},"declarations":[{"kind":"state","name":"internalChecked","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"change","type":"object({ checked: boolean, value: string, type: checkbox | radio, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["a","div"]}},source:{file:import.meta.url},css:""};
 
 export function createUiMenuItem(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
@@ -68,33 +68,30 @@ export function createUiMenuItem(options = {}) {
     const element3 = document.createElement("ui-icon");
     element3.setAttribute("name", "check");
     element2.append(element3);
-    const element4 = document.createElement("ui-icon");
-    element4.setAttribute("name", "circle-dot");
-    element2.append(element4);
     element.append(element2);
-    const element5 = document.createElement("span");
-    element5.setAttribute("class", "label");
+    const element4 = document.createElement("span");
+    element4.setAttribute("class", "label");
     if (children.length > 0) {
       for (const child of children) {
         const node = typeof child === "string" ? document.createTextNode(child) : child;
         projected.push([node, ""]);
-        element5.append(node);
+        element4.append(node);
       }
     } else {
     }
-    element.append(element5);
-    const element6 = document.createElement("span");
-    element6.setAttribute("class", "shortcut");
-    element6.setAttribute("aria-hidden", "true");
+    element.append(element4);
+    const element5 = document.createElement("span");
+    element5.setAttribute("class", "shortcut");
+    element5.setAttribute("aria-hidden", "true");
     if (slots["shortcut"] ?? [].length > 0) {
       for (const child of slots["shortcut"] ?? []) {
         const node = typeof child === "string" ? document.createTextNode(child) : child;
         projected.push([node, "shortcut"]);
-        element6.append(node);
+        element5.append(node);
       }
     } else {
     }
-    element.append(element6);
+    element.append(element5);
   }
   manageComponentLifecycle(element, definition, { props: componentProps, projected,
     controller,

package/vanilla/UiScrollArea.js

@@ -1,28 +1,33 @@
 // Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
-import { manageGeneratedProps } from "@nextwebwg/html-next/generated-runtime";
+import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
+import * as controller from "../components/ui-scroll-area/ui-scroll-area.js";
 import "../styles/ui-scroll-area.css";
 
+const definition = {...{"contract":{"tag":"ui-scroll-area","props":{"orientation":{"type":{"enum":["vertical","horizontal"]},"required":false,"target":{"attribute":"orientation"},"default":"vertical"}}},"template":{"kind":"element","name":"div","attributes":[],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"content"}],"children":[{"kind":"slot"}],"ref":"content"}]},"declarations":[],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+
 export function createUiScrollArea(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
   const projected = [];
-  const prop0 = componentProps["orientation"] === undefined ? "vertical" : componentProps["orientation"];
   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-scroll-area");
+  const element0 = document.createElement("div");
+  element0.setAttribute("class", "content");
   if (children.length > 0) {
     for (const child of children) {
       const node = typeof child === "string" ? document.createTextNode(child) : child;
       projected.push([node, ""]);
-      element.append(node);
+      element0.append(node);
     }
   } else {
   }
-  manageGeneratedProps(element, [
-    { name: "orientation", attribute: "data-orientation", value: componentProps["orientation"], default: "vertical", type: ["vertical","horizontal"], required: false },
-  ]);
+  element.append(element0);
+  manageComponentLifecycle(element, definition, { props: componentProps, projected,
+    controller,
+  });
   return element;
 }
 

package/vanilla/UiSearchShell.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-search-shell/ui-search-shell.js";
 import "../styles/ui-search-shell.css";
 
-const definition = {...{"contract":{"tag":"ui-search-shell","props":{"dismissible":{"type":"boolean","required":false,"target":{"attribute":"dismissible"},"default":false},"label":{"type":"string","required":false,"target":{"attribute":"aria-label"},"default":"Search"},"modal":{"type":"boolean","required":false,"target":{"attribute":"modal"},"default":false},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false}}},"template":{"kind":"element","name":"div","attributes":[],"children":[{"kind":"element","name":"dialog","attributes":[{"kind":"attribute","name":"aria-label","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"panel"}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"search"}],"children":[{"kind":"slot","fallback":[],"name":"search"}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"status"}],"children":[{"kind":"slot","fallback":[],"name":"status"}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"body"}],"children":[{"kind":"slot","fallback":[],"name":"body"}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"footer"}],"children":[{"kind":"slot","fallback":[],"name":"footer"}]}]}],"ref":"dialog"}]},"declarations":[{"kind":"state","name":"internalOpen","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"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":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-search-shell","props":{"dismissible":{"type":"boolean","required":false,"target":{"attribute":"dismissible"},"default":false},"label":{"type":"string","required":false,"target":{"attribute":"aria-label"},"default":"Search"},"modal":{"type":"boolean","required":false,"target":{"attribute":"modal"},"default":false},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false}}},"template":{"kind":"element","name":"div","attributes":[],"children":[{"kind":"element","name":"dialog","attributes":[{"kind":"attribute","name":"aria-label","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"panel"}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"search"}],"children":[{"kind":"slot","fallback":[],"name":"search"}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"status"}],"children":[{"kind":"slot","fallback":[],"name":"status"}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"body"}],"children":[{"kind":"slot","fallback":[],"name":"body"}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"actions"}],"children":[{"kind":"slot","fallback":[],"name":"footer"}]}]}],"ref":"dialog"}]},"declarations":[{"kind":"state","name":"internalOpen","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"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":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
 
 export function createUiSearchShell(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
@@ -54,7 +54,7 @@ export function createUiSearchShell(options = {}) {
   }
   element1.append(element4);
   const element5 = document.createElement("div");
-  element5.setAttribute("class", "footer");
+  element5.setAttribute("class", "actions");
   if (slots["footer"] ?? [].length > 0) {
     for (const child of slots["footer"] ?? []) {
       const node = typeof child === "string" ? document.createTextNode(child) : child;

package/vanilla/UiSpinner.js

@@ -2,7 +2,7 @@
 import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import "../styles/ui-spinner.css";
 
-const definition = {...{"contract":{"tag":"ui-spinner","props":{"label":{"type":"string","required":false,"target":{"attribute":"label"},"default":""},"size":{"type":{"enum":["sm","md"]},"required":false,"target":{"attribute":"size"},"default":"md"}}},"template":{"kind":"element","name":"span","attributes":[{"kind":"attribute","name":"role","expression":"{ true: 'status', false: null }[format('%s', label != '')]","expressionPlan":{"source":"{ true: 'status', false: null }[format('%s', label != '')]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":"status"}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":"!=","left":{"kind":"id","name":"label"},"right":{"kind":"literal","value":""}}]}},"dependencies":["label"]}},{"kind":"attribute","name":"aria-label","expression":"{ true: label, false: null }[format('%s', label != '')]","expressionPlan":{"source":"{ true: label, false: null }[format('%s', label != '')]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"id","name":"label"}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":"!=","left":{"kind":"id","name":"label"},"right":{"kind":"literal","value":""}}]}},"dependencies":["label"]}},{"kind":"attribute","name":"aria-hidden","expression":"{ true: null, false: 'true' }[format('%s', label != '')]","expressionPlan":{"source":"{ true: null, false: 'true' }[format('%s', label != '')]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":null}},{"key":"false","value":{"kind":"literal","value":"true"}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":"!=","left":{"kind":"id","name":"label"},"right":{"kind":"literal","value":""}}]}},"dependencies":["label"]}}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"literal","name":"name","value":"loader"}],"children":[]}]},"declarations":[],"root":{"kind":"native","element":"span","choices":["span"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-spinner","props":{"label":{"type":"string","required":false,"target":{"attribute":"label"},"default":""},"size":{"type":{"enum":["sm","md"]},"required":false,"target":{"attribute":"size"},"default":"md"}}},"template":{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"ring"},{"kind":"attribute","name":"role","expression":"{ true: 'status', false: null }[format('%s', label != '')]","expressionPlan":{"source":"{ true: 'status', false: null }[format('%s', label != '')]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":"status"}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":"!=","left":{"kind":"id","name":"label"},"right":{"kind":"literal","value":""}}]}},"dependencies":["label"]}},{"kind":"attribute","name":"aria-label","expression":"{ true: label, false: null }[format('%s', label != '')]","expressionPlan":{"source":"{ true: label, false: null }[format('%s', label != '')]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"id","name":"label"}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":"!=","left":{"kind":"id","name":"label"},"right":{"kind":"literal","value":""}}]}},"dependencies":["label"]}},{"kind":"attribute","name":"aria-hidden","expression":"{ true: null, false: 'true' }[format('%s', label != '')]","expressionPlan":{"source":"{ true: null, false: 'true' }[format('%s', label != '')]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":null}},{"key":"false","value":{"kind":"literal","value":"true"}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":"!=","left":{"kind":"id","name":"label"},"right":{"kind":"literal","value":""}}]}},"dependencies":["label"]}}],"children":[]},"declarations":[],"root":{"kind":"native","element":"span","choices":["span"]}},source:{file:import.meta.url},css:""};
 
 export function createUiSpinner(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
@@ -12,10 +12,8 @@ export function createUiSpinner(options = {}) {
     if (value === null || value === undefined || value === false) continue;
     element.setAttribute(name, value === true ? "" : String(value));
   }
+  element.setAttribute("class", ["ring", element.getAttribute("class")].filter(Boolean).join(" "));
   element.setAttribute("data-component", "ui-spinner");
-  const element0 = document.createElement("ui-icon");
-  element0.setAttribute("name", "loader");
-  element.append(element0);
   manageComponentLifecycle(element, definition, { props: componentProps, projected,
   });
   return element;

package/vue/UiAvatarGroup.vue

@@ -81,10 +81,9 @@ useComponentHost(controllerModule.default, {
   --_ui-avatar-group-overlap-shadow: var(--ui-avatar-group-overlap-shadow);
   --_ui-avatar-group-edge-ring: var(--ui-avatar-group-edge-ring);
 
-  /* Each avatar is ringed in the surface colour, so where one overlaps the next it reads as a
-   * whole circle set on top, not a shape cut into the one beneath. */
-  --_overlap-shadow: 0 0 0 0 transparent;
-  --_edge-ring: 0 0 0 2px var(--ui-surface);
+  /* A one-pixel shadow on the leading edge separates overlapping circles without cutting
+   * a white gap out of the avatar underneath. */
+  --_overlap-shadow: -1px 0 0 0 rgb(0 0 0 / 0.22);
 
   display: flex;
   align-items: center;
@@ -103,6 +102,10 @@ useComponentHost(controllerModule.default, {
   margin-inline-start: 0;
 }
 
+[data-component~="ui-avatar-group"]:dir(rtl) {
+  --_overlap-shadow: 1px 0 0 0 rgb(0 0 0 / 0.22);
+}
+
 .overflow {
   margin-inline-start: -0.5rem;
   display: inline-flex;
@@ -116,7 +119,7 @@ useComponentHost(controllerModule.default, {
   color: var(--ui-text-primary);
   box-shadow:
     var(--_ui-avatar-group-overlap-shadow, var(--_overlap-shadow)),
-    var(--_ui-avatar-group-edge-ring, var(--_edge-ring));
+    var(--_ui-avatar-group-edge-ring, 0 0 0 0 transparent);
   font: inherit;
   font-size: var(--ui-font-size-xs);
   font-weight: 600;

package/vue/UiBadge.vue

@@ -167,27 +167,32 @@ const hostState = computed(() =>
 }
 
 [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"] {
-  --_badge-surface: var(--ui-accent-soft);
+  --_badge-surface: color-mix(in srgb, var(--ui-accent-solid) 22%, var(--ui-surface-default));
+  --_badge-border: color-mix(in srgb, var(--ui-accent-solid) 28%, var(--ui-surface-default));
   --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
 }
 
 [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"] {
-  --_badge-surface: var(--ui-danger-soft);
+  --_badge-surface: color-mix(in srgb, var(--ui-danger-solid) 22%, var(--ui-surface-default));
+  --_badge-border: color-mix(in srgb, var(--ui-danger-solid) 28%, var(--ui-surface-default));
   --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
 }
 
 [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"] {
-  --_badge-surface: var(--ui-success-soft);
+  --_badge-surface: color-mix(in srgb, var(--ui-success-solid) 22%, var(--ui-surface-default));
+  --_badge-border: color-mix(in srgb, var(--ui-success-solid) 28%, var(--ui-surface-default));
   --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
 }
 
 [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"] {
-  --_badge-surface: var(--ui-warning-soft);
+  --_badge-surface: color-mix(in srgb, var(--ui-warning-solid) 22%, var(--ui-surface-default));
+  --_badge-border: color-mix(in srgb, var(--ui-warning-solid) 28%, var(--ui-surface-default));
   --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
 }
 
 [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"] {
-  --_badge-surface: var(--ui-info-soft);
+  --_badge-surface: color-mix(in srgb, var(--ui-info-solid) 22%, var(--ui-surface-default));
+  --_badge-border: color-mix(in srgb, var(--ui-info-solid) 28%, var(--ui-surface-default));
   --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
 }
 

package/vue/UiBreadcrumbItem.vue

@@ -57,12 +57,13 @@ function attribute(value: unknown): any {
   align-items: center;
   gap: var(--ui-space-2);
   min-inline-size: 0;
+  margin: 0;
 }
 
 .separator {
   display: inline-flex;
   color: var(--ui-text-muted);
-  font-size: var(--ui-font-size-xs);
+  font-size: var(--ui-font-size-sm);
 }
 
 [data-component~="ui-breadcrumb-item"]:first-child .separator {

package/vue/UiButton.d.ts

@@ -3,6 +3,7 @@ type __VLS_Props = {
     as?: 'button' | 'a';
     disabled?: boolean;
     href?: string;
+    loading?: boolean;
     pending?: boolean;
     rel?: string;
     size?: 'sm' | 'md' | 'lg';
@@ -26,6 +27,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     align: "center" | "start";
     as: "button" | "a";
     disabled: boolean;
+    loading: boolean;
     pending: boolean;
     stretch: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;