@threadlabs/looma 0.23.6 → 0.23.8

package/vanilla/UiNavItem.js

@@ -2,7 +2,7 @@
 import { componentRootIndex, manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import "../styles/ui-nav-item.css";
 
-const definition = {...{"contract":{"tag":"ui-nav-item","props":{"as":{"type":{"kind":"terminal","name":"keyword"},"values":["button","a"],"required":false,"target":{"attribute":"as"},"default":"button"},"current":{"type":{"kind":"terminal","name":"keyword"},"values":["true","false","page","step","location"],"required":false,"target":{"attribute":"current"},"default":"false"},"density":{"type":{"kind":"terminal","name":"keyword"},"values":["comfortable","compact"],"required":false,"target":{"attribute":"density"},"default":"comfortable"},"href":{"type":"string","required":false,"target":{"attribute":"href"}},"rel":{"type":"string","required":false,"target":{"attribute":"rel"}},"target":{"type":"string","required":false,"target":{"attribute":"target"}},"variant":{"type":{"kind":"terminal","name":"keyword"},"values":["surface","line"],"required":false,"target":{"attribute":"variant"},"default":"surface"}}},"template":{"kind":"element","name":"template","attributes":[],"children":[{"kind":"element","name":"a","attributes":[{"kind":"attribute","name":"href","expression":"href","expressionPlan":{"source":"href","ast":{"kind":"id","name":"href"},"dependencies":["href"]}},{"kind":"attribute","name":"target","expression":"target","expressionPlan":{"source":"target","ast":{"kind":"id","name":"target"},"dependencies":["target"]}},{"kind":"attribute","name":"rel","expression":"rel","expressionPlan":{"source":"rel","ast":{"kind":"id","name":"rel"},"dependencies":["rel"]}},{"kind":"attribute","name":"aria-current","expression":"{ true: 'page', false: null, page: 'page', step: 'step', location: 'location' }[format('%s', current)]","expressionPlan":{"source":"{ true: 'page', false: null, page: 'page', step: 'step', location: 'location' }[format('%s', current)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":"page"}},{"key":"false","value":{"kind":"literal","value":null}},{"key":"page","value":{"kind":"literal","value":"page"}},{"key":"step","value":{"kind":"literal","value":"step"}},{"key":"location","value":{"kind":"literal","value":"location"}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"id","name":"current"}]}},"dependencies":["current"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"indicator"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"leading"}],"children":[{"kind":"slot","fallback":[],"name":"leading"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"content"}],"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":"description"}],"children":[{"kind":"slot","fallback":[],"name":"description"}]}]}],"flow":{"kind":"when","test":"as = 'a'","testPlan":{"source":"as = 'a'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"a"}},"dependencies":["as"]}}},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"aria-current","expression":"{ true: 'page', false: null, page: 'page', step: 'step', location: 'location' }[format('%s', current)]","expressionPlan":{"source":"{ true: 'page', false: null, page: 'page', step: 'step', location: 'location' }[format('%s', current)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":"page"}},{"key":"false","value":{"kind":"literal","value":null}},{"key":"page","value":{"kind":"literal","value":"page"}},{"key":"step","value":{"kind":"literal","value":"step"}},{"key":"location","value":{"kind":"literal","value":"location"}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"id","name":"current"}]}},"dependencies":["current"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"indicator"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"leading"}],"children":[{"kind":"slot","fallback":[],"name":"leading"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"content"}],"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":"description"}],"children":[{"kind":"slot","fallback":[],"name":"description"}]}]}],"flow":{"kind":"else"}}],"flow":{"kind":"match"}},"declarations":[],"root":{"kind":"native","element":"button","choices":["a","button"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-nav-item","props":{"as":{"type":{"kind":"terminal","name":"keyword"},"values":["button","a"],"required":false,"target":{"attribute":"as"},"default":"button"},"current":{"type":{"kind":"terminal","name":"keyword"},"values":["true","false","page","step","location"],"required":false,"target":{"attribute":"current"},"default":"false"},"density":{"type":{"kind":"terminal","name":"keyword"},"values":["comfortable","compact"],"required":false,"target":{"attribute":"density"},"default":"comfortable"},"href":{"type":"string","required":false,"target":{"attribute":"href"}},"rel":{"type":"string","required":false,"target":{"attribute":"rel"}},"target":{"type":"string","required":false,"target":{"attribute":"target"}},"variant":{"type":{"kind":"terminal","name":"keyword"},"values":["surface","line"],"required":false,"target":{"attribute":"variant"},"default":"surface"}}},"template":{"kind":"element","name":"template","attributes":[],"children":[{"kind":"element","name":"a","attributes":[{"kind":"attribute","name":"href","expression":"href","expressionPlan":{"source":"href","ast":{"kind":"id","name":"href"},"dependencies":["href"]}},{"kind":"attribute","name":"target","expression":"target","expressionPlan":{"source":"target","ast":{"kind":"id","name":"target"},"dependencies":["target"]}},{"kind":"attribute","name":"rel","expression":"rel","expressionPlan":{"source":"rel","ast":{"kind":"id","name":"rel"},"dependencies":["rel"]}},{"kind":"attribute","name":"aria-current","expression":"{ true: 'page', false: null, page: 'page', step: 'step', location: 'location' }[format('%s', current)]","expressionPlan":{"source":"{ true: 'page', false: null, page: 'page', step: 'step', location: 'location' }[format('%s', current)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":"page"}},{"key":"false","value":{"kind":"literal","value":null}},{"key":"page","value":{"kind":"literal","value":"page"}},{"key":"step","value":{"kind":"literal","value":"step"}},{"key":"location","value":{"kind":"literal","value":"location"}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"id","name":"current"}]}},"dependencies":["current"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"indicator"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"leading"}],"children":[{"kind":"slot","fallback":[],"name":"leading"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"content"}],"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":"description"}],"children":[{"kind":"slot","fallback":[],"name":"description"}]}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"trailing"}],"children":[{"kind":"slot","fallback":[],"name":"trailing"}]}],"flow":{"kind":"when","test":"as = 'a'","testPlan":{"source":"as = 'a'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"a"}},"dependencies":["as"]}}},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"aria-current","expression":"{ true: 'page', false: null, page: 'page', step: 'step', location: 'location' }[format('%s', current)]","expressionPlan":{"source":"{ true: 'page', false: null, page: 'page', step: 'step', location: 'location' }[format('%s', current)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":"page"}},{"key":"false","value":{"kind":"literal","value":null}},{"key":"page","value":{"kind":"literal","value":"page"}},{"key":"step","value":{"kind":"literal","value":"step"}},{"key":"location","value":{"kind":"literal","value":"location"}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"id","name":"current"}]}},"dependencies":["current"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"indicator"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"leading"}],"children":[{"kind":"slot","fallback":[],"name":"leading"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"content"}],"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":"description"}],"children":[{"kind":"slot","fallback":[],"name":"description"}]}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"trailing"}],"children":[{"kind":"slot","fallback":[],"name":"trailing"}]}],"flow":{"kind":"else"}}],"flow":{"kind":"match"}},"declarations":[],"root":{"kind":"native","element":"button","choices":["a","button"]}},source:{file:import.meta.url},css:""};
 
 export function createUiNavItem(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
@@ -68,6 +68,18 @@ export function createUiNavItem(options = {}) {
     }
     element2.append(element4);
     element.append(element2);
+    const element5 = document.createElement("span");
+    element5.setAttribute("class", "trailing");
+    if (slots["trailing"] ?? [].length > 0) {
+      for (const child of slots["trailing"] ?? []) {
+        const node = typeof child === "string" ? document.createTextNode(child) : child;
+        if (node.nodeType === 1) node.setAttribute("data-slotted", "");
+        projected.push([node, "trailing"]);
+        element5.append(node);
+      }
+    } else {
+    }
+    element.append(element5);
   } else {
     element = document.createElement("button");
     for (const [name, value] of Object.entries(attributes)) {
@@ -76,49 +88,61 @@ export function createUiNavItem(options = {}) {
     }
     if (!element.hasAttribute("type")) element.setAttribute("type", "button");
     element.setAttribute("data-component", "ui-nav-item");
-    const element5 = document.createElement("span");
-    element5.setAttribute("class", "indicator");
-    element5.setAttribute("aria-hidden", "true");
-    element.append(element5);
     const element6 = document.createElement("span");
-    element6.setAttribute("class", "leading");
+    element6.setAttribute("class", "indicator");
+    element6.setAttribute("aria-hidden", "true");
+    element.append(element6);
+    const element7 = document.createElement("span");
+    element7.setAttribute("class", "leading");
     if (slots["leading"] ?? [].length > 0) {
       for (const child of slots["leading"] ?? []) {
         const node = typeof child === "string" ? document.createTextNode(child) : child;
         if (node.nodeType === 1) node.setAttribute("data-slotted", "");
         projected.push([node, "leading"]);
-        element6.append(node);
+        element7.append(node);
       }
     } else {
     }
-    element.append(element6);
-    const element7 = document.createElement("span");
-    element7.setAttribute("class", "content");
+    element.append(element7);
     const element8 = document.createElement("span");
-    element8.setAttribute("class", "label");
+    element8.setAttribute("class", "content");
+    const element9 = document.createElement("span");
+    element9.setAttribute("class", "label");
     if (children.length > 0) {
       for (const child of children) {
         const node = typeof child === "string" ? document.createTextNode(child) : child;
         if (node.nodeType === 1) node.setAttribute("data-slotted", "");
         projected.push([node, ""]);
-        element8.append(node);
+        element9.append(node);
       }
     } else {
     }
-    element7.append(element8);
-    const element9 = document.createElement("span");
-    element9.setAttribute("class", "description");
+    element8.append(element9);
+    const element10 = document.createElement("span");
+    element10.setAttribute("class", "description");
     if (slots["description"] ?? [].length > 0) {
       for (const child of slots["description"] ?? []) {
         const node = typeof child === "string" ? document.createTextNode(child) : child;
         if (node.nodeType === 1) node.setAttribute("data-slotted", "");
         projected.push([node, "description"]);
-        element9.append(node);
+        element10.append(node);
       }
     } else {
     }
-    element7.append(element9);
-    element.append(element7);
+    element8.append(element10);
+    element.append(element8);
+    const element11 = document.createElement("span");
+    element11.setAttribute("class", "trailing");
+    if (slots["trailing"] ?? [].length > 0) {
+      for (const child of slots["trailing"] ?? []) {
+        const node = typeof child === "string" ? document.createTextNode(child) : child;
+        if (node.nodeType === 1) node.setAttribute("data-slotted", "");
+        projected.push([node, "trailing"]);
+        element11.append(node);
+      }
+    } else {
+    }
+    element.append(element11);
   }
   manageComponentLifecycle(element, definition, { props: componentProps, projected,
   });

package/vanilla/UiSidebar.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-sidebar/ui-sidebar.js";
 import "../styles/ui-sidebar.css";
 
-const definition = {...{"contract":{"tag":"ui-sidebar","props":{"breakpoint":{"type":{"kind":"terminal","name":"keyword"},"values":["sm","md","lg"],"required":false,"target":{"attribute":"breakpoint"},"default":"md"},"collapsed":{"type":"boolean","required":false,"target":{"attribute":"collapsed"},"default":false},"maxWidth":{"type":"number","required":false,"target":{"attribute":"maxwidth"},"default":480},"minWidth":{"type":"number","required":false,"target":{"attribute":"minwidth"},"default":200},"resizable":{"type":"boolean","required":false,"target":{"attribute":"resizable"},"default":false},"resizeLabel":{"type":"string","required":false,"target":{"attribute":"aria-label"},"default":"Resize sidebar"},"resizeStep":{"type":"number","required":false,"target":{"attribute":"resizestep"},"default":16},"side":{"type":{"kind":"terminal","name":"keyword"},"values":["start","end"],"required":false,"target":{"attribute":"side"},"default":"start"},"width":{"type":"number","required":false,"target":{"attribute":"width"},"default":0}}},"template":{"kind":"element","name":"aside","attributes":[],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"content"}],"children":[{"kind":"slot"}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"resizer"},{"kind":"literal","name":"role","value":"separator"},{"kind":"literal","name":"aria-orientation","value":"vertical"},{"kind":"literal","name":"tabindex","value":"0"},{"kind":"literal","name":"data-ui-affordance","value":"resize"},{"kind":"attribute","name":"aria-label","expression":"resizeLabel","expressionPlan":{"source":"resizeLabel","ast":{"kind":"id","name":"resizeLabel"},"dependencies":["resizeLabel"]}},{"kind":"attribute","name":"hidden","expression":"not resizable or drawer or internalCollapsed","expressionPlan":{"source":"not resizable or drawer or internalCollapsed","ast":{"kind":"binary","op":"or","left":{"kind":"binary","op":"or","left":{"kind":"unary","op":"not","operand":{"kind":"id","name":"resizable"}},"right":{"kind":"id","name":"drawer"}},"right":{"kind":"id","name":"internalCollapsed"}},"dependencies":["drawer","internalCollapsed","resizable"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"guide"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]}],"ref":"resizer"}]},"declarations":[{"kind":"state","name":"internalCollapsed","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"drawer","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"resize","type":"object","shape":{"kind":"object","fields":[{"name":"width","type":{"kind":"terminal","name":"number"},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"toggle","type":"object","shape":{"kind":"object","fields":[{"name":"open","type":{"kind":"terminal","name":"boolean"},"optional":false},{"name":"mode","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["docked","drawer"]},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"aside","choices":["aside"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-sidebar","props":{"breakpoint":{"type":{"kind":"terminal","name":"keyword"},"values":["sm","md","lg"],"required":false,"target":{"attribute":"breakpoint"},"default":"md"},"collapsed":{"type":"boolean","required":false,"target":{"attribute":"collapsed"},"default":false},"maxWidth":{"type":"number","required":false,"target":{"attribute":"maxwidth"},"default":480},"minWidth":{"type":"number","required":false,"target":{"attribute":"minwidth"},"default":200},"resizable":{"type":"boolean","required":false,"target":{"attribute":"resizable"},"default":false},"resizeLabel":{"type":"string","required":false,"target":{"attribute":"aria-label"},"default":"Resize sidebar"},"resizeStep":{"type":"number","required":false,"target":{"attribute":"resizestep"},"default":16},"side":{"type":{"kind":"terminal","name":"keyword"},"values":["start","end"],"required":false,"target":{"attribute":"side"},"default":"start"},"width":{"type":"number","required":false,"target":{"attribute":"width"},"default":0}}},"template":{"kind":"element","name":"aside","attributes":[],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"viewport"}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"content"}],"children":[{"kind":"slot"}]}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"resizer"},{"kind":"literal","name":"role","value":"separator"},{"kind":"literal","name":"aria-orientation","value":"vertical"},{"kind":"literal","name":"tabindex","value":"0"},{"kind":"literal","name":"data-ui-affordance","value":"resize"},{"kind":"attribute","name":"aria-label","expression":"resizeLabel","expressionPlan":{"source":"resizeLabel","ast":{"kind":"id","name":"resizeLabel"},"dependencies":["resizeLabel"]}},{"kind":"attribute","name":"hidden","expression":"not resizable or drawer or internalCollapsed","expressionPlan":{"source":"not resizable or drawer or internalCollapsed","ast":{"kind":"binary","op":"or","left":{"kind":"binary","op":"or","left":{"kind":"unary","op":"not","operand":{"kind":"id","name":"resizable"}},"right":{"kind":"id","name":"drawer"}},"right":{"kind":"id","name":"internalCollapsed"}},"dependencies":["drawer","internalCollapsed","resizable"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"guide"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]}],"ref":"resizer"}]},"declarations":[{"kind":"state","name":"internalCollapsed","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"drawer","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"resizing","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"resize","type":"object","shape":{"kind":"object","fields":[{"name":"width","type":{"kind":"terminal","name":"number"},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"toggle","type":"object","shape":{"kind":"object","fields":[{"name":"open","type":{"kind":"terminal","name":"boolean"},"optional":false},{"name":"mode","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["docked","drawer"]},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"aside","choices":["aside"]}},source:{file:import.meta.url},css:""};
 
 export function createUiSidebar(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
@@ -15,31 +15,34 @@ export function createUiSidebar(options = {}) {
   }
   element.setAttribute("data-component", "ui-sidebar");
   const element0 = document.createElement("div");
-  element0.setAttribute("class", "content");
+  element0.setAttribute("class", "viewport");
+  const element1 = document.createElement("div");
+  element1.setAttribute("class", "content");
   if (children.length > 0) {
     for (const child of children) {
       const node = typeof child === "string" ? document.createTextNode(child) : child;
       if (node.nodeType === 1) node.setAttribute("data-slotted", "");
       projected.push([node, ""]);
-      element0.append(node);
+      element1.append(node);
     }
   } else {
   }
+  element0.append(element1);
   element.append(element0);
-  const element1 = document.createElement("div");
-  element1.setAttribute("class", "resizer");
-  element1.setAttribute("role", "separator");
-  element1.setAttribute("aria-orientation", "vertical");
-  element1.setAttribute("tabindex", "0");
-  element1.setAttribute("data-ui-affordance", "resize");
+  const element2 = document.createElement("div");
+  element2.setAttribute("class", "resizer");
+  element2.setAttribute("role", "separator");
+  element2.setAttribute("aria-orientation", "vertical");
+  element2.setAttribute("tabindex", "0");
+  element2.setAttribute("data-ui-affordance", "resize");
   const value0 = componentProps["resizeLabel"] === undefined ? "Resize sidebar" : componentProps["resizeLabel"];
-  if (value0 === null || value0 === undefined) element1.removeAttribute("aria-label");
-  else element1.setAttribute("aria-label", String(value0));
-  const element2 = document.createElement("span");
-  element2.setAttribute("class", "guide");
-  element2.setAttribute("aria-hidden", "true");
-  element1.append(element2);
-  element.append(element1);
+  if (value0 === null || value0 === undefined) element2.removeAttribute("aria-label");
+  else element2.setAttribute("aria-label", String(value0));
+  const element3 = document.createElement("span");
+  element3.setAttribute("class", "guide");
+  element3.setAttribute("aria-hidden", "true");
+  element2.append(element3);
+  element.append(element2);
   manageComponentLifecycle(element, definition, { props: componentProps, projected,
     controller,
   });

package/vue/UiBadge.d.ts

@@ -5,7 +5,7 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     shape: {
-        type: PropType<"pill" | "tag" | "dot" | null>;
+        type: PropType<"pill" | "tag" | "dot" | "square" | null>;
         default: string;
     };
     size: {
@@ -22,7 +22,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     shape: {
-        type: PropType<"pill" | "tag" | "dot" | null>;
+        type: PropType<"pill" | "tag" | "dot" | "square" | null>;
         default: string;
     };
     size: {
@@ -38,7 +38,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
 }>> & Readonly<{}>, {
-    shape: "dot" | "tag" | "pill" | null;
+    shape: "dot" | "tag" | "square" | "pill" | null;
     size: "xs" | "md" | null;
     tone: "info" | "neutral" | "accent" | "success" | "warning" | "danger" | null;
     variant: "solid" | "subtle" | "outline" | null;

package/vue/UiBadge.vue

@@ -13,8 +13,8 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'shape' },
       description:
-        'Silhouette. pill is rounded at both ends; tag is a pointed label. dot is a compact circular signal with visually hidden text: include a state label, or set\n      aria-hidden when the surrounding control already names that state.',
-      values: ['pill', 'tag', 'dot'],
+        'Silhouette. pill is rounded at both ends; tag is a pointed label. dot is a compact circular signal with visually hidden text: include a state label, or set\n      aria-hidden when the surrounding control already names that state. square is a fixed rounded square for an icon or single glyph beside a heading; hide a\n      decorative icon when adjacent words name it.',
+      values: ['pill', 'tag', 'dot', 'square'],
       default: 'pill',
     },
     size: {
@@ -22,7 +22,7 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'size' },
       description:
-        'Scale. xs is a compact count beside small controls; md is the usual text badge.',
+        'Scale. xs is a compact count beside small controls; md is the usual text badge. A square is 24px at xs and 32px at md with default spacing.',
       values: ['xs', 'md'],
       default: 'md',
     },
@@ -47,7 +47,10 @@ const propValidityContract = {
   },
 } as const
 const props = defineProps({
-  shape: { type: null as unknown as PropType<'pill' | 'tag' | 'dot' | null>, default: 'pill' },
+  shape: {
+    type: null as unknown as PropType<'pill' | 'tag' | 'dot' | 'square' | null>,
+    default: 'pill',
+  },
   size: { type: null as unknown as PropType<'xs' | 'md' | null>, default: 'md' },
   tone: {
     type: null as unknown as PropType<
@@ -67,13 +70,13 @@ const acceptedProps: Record<string, unknown> = {
   variant: 'subtle',
 }
 const checkedProps = computed(() => ({
-  shape: checkedProp<'pill' | 'tag' | 'dot'>(
+  shape: checkedProp<'pill' | 'tag' | 'dot' | 'square'>(
     props['shape'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'shape',
     acceptedProps,
-  ) as 'pill' | 'tag' | 'dot',
+  ) as 'pill' | 'tag' | 'dot' | 'square',
   size: checkedProp<'xs' | 'md'>(
     props['size'],
     { kind: 'terminal', name: 'keyword' },
@@ -183,6 +186,10 @@ const hostState = computed(() =>
   syntax: "*";
   inherits: false;
 }
+@property --ui-badge-square-size {
+  syntax: "*";
+  inherits: false;
+}
 @property --ui-badge-dot-size {
   syntax: "*";
   inherits: false;
@@ -394,6 +401,31 @@ const hostState = computed(() =>
   --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
 }
 
+/* An icon mark keeps the existing tone recipe and follows the global spacing and radius. */
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"] {
+  --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-4) * 2));
+  display: inline-flex;
+  box-sizing: border-box;
+  flex: none;
+  inline-size: var(--_badge-square-size);
+  block-size: var(--_badge-square-size);
+  min-inline-size: var(--_badge-square-size);
+  min-block-size: var(--_badge-square-size);
+  padding: 0;
+  border-radius: var(--ui-radius-md);
+  text-box-trim: none;
+}
+
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-ui-badge-state~="size=xs"] {
+  --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-3) * 2));
+}
+
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
 /* A dot uses the badge's tone recipe; only its silhouette and visible label change. */
 [data-component~="ui-badge"][data-ui-badge-state~="shape=dot"] {
   position: relative;

package/vue/UiDisclosure.d.ts

@@ -1,11 +1,13 @@
 import type { PropType } from 'vue';
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
 type __VLS_Slots = {} & {
-    summary?: (props: typeof __VLS_1) => any;
+    leading?: (props: typeof __VLS_1) => any;
 } & {
-    indicator?: (props: typeof __VLS_3) => any;
+    summary?: (props: typeof __VLS_3) => any;
 } & {
-    default?: (props: typeof __VLS_5) => any;
+    indicator?: (props: typeof __VLS_5) => any;
+} & {
+    default?: (props: typeof __VLS_7) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     density: {
@@ -32,10 +34,18 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<boolean | null>;
         default: boolean;
     };
+    requiredOpen: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
     summary: {
         type: PropType<string | null>;
         default: string;
     };
+    variant: {
+        type: PropType<"plain" | "navigation" | null>;
+        default: string;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     open: (event: CustomEvent<{
         readonly open: boolean;
@@ -73,10 +83,18 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<boolean | null>;
         default: boolean;
     };
+    requiredOpen: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
     summary: {
         type: PropType<string | null>;
         default: string;
     };
+    variant: {
+        type: PropType<"plain" | "navigation" | null>;
+        default: string;
+    };
 }>> & Readonly<{
     onOpen?: ((event: CustomEvent<{
         readonly open: boolean;
@@ -94,9 +112,11 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     summary: string | null;
     name: string | null;
     open: boolean | null;
+    variant: "plain" | "navigation" | null;
     disabled: boolean | null;
     density: "comfortable" | "compact" | null;
     headingLevel: number | null;
+    requiredOpen: boolean | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;