@threadlabs/looma 0.23.7 → 0.23.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.23.7",
+  "version": "0.23.8",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-disclosure.css

@@ -43,8 +43,7 @@
     }
 
     .trigger {
-      display: grid;
-      grid-template-columns: minmax(0, 1fr) auto;
+      display: flex;
       gap: var(--ui-space-3);
       align-items: center;
       inline-size: 100%;
@@ -74,19 +73,40 @@
       cursor: not-allowed;
     }
 
+    .summary {
+      flex: 1;
+      min-inline-size: 0;
+    }
+
+    .leading,
+    .indicator {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex: none;
+    }
+    .leading:empty {
+      display: none;
+    }
+    .indicator {
+      transition: transform var(--ui-motion-feedback) var(--ui-motion-feedback-ease);
+    }
+    :scope[data-ui-disclosure-state~="internalOpen"] .indicator {
+      transform: rotate(180deg);
+    }
+
     .chevron {
       inline-size: 0.5rem;
       block-size: 0.5rem;
       border-inline-end: 2px solid currentColor;
       border-block-end: 2px solid currentColor;
       transform: rotate(45deg) translate(-1px, -1px);
-      transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
     .panel {
       display: grid;
       grid-template-rows: 0fr;
-      transition: grid-template-rows var(--ui-motion-fast) var(--ui-motion-ease-out, var(--ui-motion-ease));
+      transition: grid-template-rows var(--ui-motion-reveal) var(--ui-motion-reveal-ease), content-visibility var(--ui-motion-reveal) allow-discrete;
     }
 
     .panel-inner {
@@ -101,22 +121,20 @@
     :scope[data-ui-disclosure-state~="internalOpen"] .panel-inner {
       padding-block: 0 var(--ui-space-3);
     }
-    :scope[data-ui-disclosure-state~="internalOpen"] .chevron {
-      transform: rotate(225deg) translate(-1px, -1px);
-    }
 
     /* A bounded accordion owns one flexible body, so its trigger never scrolls away. The
      * normal content-sized layout and its animation remain unchanged when fill is omitted. */
     :scope[data-ui-disclosure-state~="fill"] {
       display: flex;
       flex-direction: column;
-      flex: none;
-      min-block-size: 0;
+      flex: 0 0 var(--_ui-disclosure-heading-size, var(--_trigger-min-block-size));
+      min-block-size: calc(var(--_ui-disclosure-heading-size, var(--_trigger-min-block-size)) + var(--ui-border-width));
+      transition: flex-grow var(--ui-motion-layout) var(--ui-motion-layout-ease);
       border-block-end: 0;
       border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
     }
     :scope[data-ui-disclosure-state~="fill"][data-ui-disclosure-state~="internalOpen"] {
-      flex: 1;
+      flex-grow: 1;
     }
     :scope[data-ui-disclosure-state~="fill"] .heading {
       flex: none;
@@ -125,14 +143,8 @@
       border-radius: 0;
     }
     :scope[data-ui-disclosure-state~="fill"] .panel {
-      display: flex;
       flex: 1;
       min-block-size: 0;
-      transition: none;
-    }
-    :scope[data-ui-disclosure-state~="fill"] .panel[hidden] {
-      flex: none;
-      block-size: 0;
     }
     :scope[data-ui-disclosure-state~="fill"] .panel-inner {
       display: flex;
@@ -142,9 +154,43 @@
       padding: 0;
     }
 
+    :scope[data-ui-disclosure-state~="variant=navigation"] .trigger {
+      gap: var(--ui-nav-gap);
+      padding-inline: var(--ui-nav-padding-inline);
+      min-block-size: var(--ui-nav-min-block-size);
+      padding-block: var(--ui-nav-padding-block);
+      border-radius: var(--ui-selection-radius);
+      font-size: var(--ui-font-size-md);
+      font-weight: var(--ui-font-normal);
+      color: var(--ui-text-secondary);
+    }
+    :scope[data-ui-disclosure-state~="variant=navigation"][data-ui-disclosure-state~="density=compact"] .trigger {
+      padding-inline: var(--ui-nav-compact-padding-inline);
+      padding-block: var(--ui-nav-compact-padding-block);
+      min-block-size: var(--ui-nav-compact-min-block-size);
+      font-size: var(--ui-font-size-sm);
+    }
+    :scope[data-ui-disclosure-state~="variant=navigation"] .trigger:hover:not(:disabled) {
+      background: var(--ui-nav-hover-surface);
+      color: var(--ui-text-primary);
+    }
+    :scope[data-ui-disclosure-state~="variant=navigation"][data-ui-disclosure-state~="internalOpen"] .trigger {
+      color: var(--ui-selection-text);
+    }
+    :scope[data-ui-disclosure-state~="variant=navigation"] :is(.leading, .indicator) {
+      inline-size: var(--ui-nav-icon-size);
+      font-size: var(--ui-nav-icon-size);
+    }
+    @media (pointer: coarse) {
+      :scope[data-ui-disclosure-state~="variant=navigation"][data-ui-disclosure-state~="density=compact"] .trigger {
+        min-block-size: var(--ui-control-min-block-size);
+      }
+    }
+
     @media (prefers-reduced-motion: reduce) {
+      :scope[data-ui-disclosure-state~="fill"],
       .panel,
-      .chevron {
+      .indicator {
         transition: none;
       }
     }
@@ -164,6 +210,8 @@
 
     /* A bounded accordion owns one flexible body, so its trigger never scrolls away. The
      * normal content-sized layout and its animation remain unchanged when fill is omitted. */
+    @media (pointer: coarse) {
+    }
 
     @media (prefers-reduced-motion: reduce) {
     }

package/styles/ui-nav-item.css

@@ -29,13 +29,13 @@
       box-sizing: border-box;
       display: flex;
       align-items: center;
-      gap: var(--ui-space-3);
+      gap: var(--ui-nav-gap);
       inline-size: var(--ui-nav-item-inline-size, 100%);
       min-inline-size: 0;
-      min-block-size: var(--ui-control-size, 2.5rem);
+      min-block-size: var(--ui-nav-min-block-size);
       margin: 0;
-      padding-block: var(--ui-space-2);
-      padding-inline: var(--ui-space-3);
+      padding-block: var(--ui-nav-padding-block);
+      padding-inline: var(--ui-nav-padding-inline);
       border: 0;
       border-radius: var(--ui-selection-radius);
       background: transparent;
@@ -50,7 +50,7 @@
     }
 
     :scope:hover:not([aria-current]) {
-      background: var(--ui-surface-hover);
+      background: var(--ui-nav-hover-surface);
       color: var(--ui-text-primary);
     }
 
@@ -99,12 +99,15 @@
       }
     }
 
-    .leading {
+    .leading,
+    .trailing {
       display: inline-flex;
       flex: none;
       align-items: center;
+      justify-content: center;
+      inline-size: var(--ui-nav-icon-size);
       color: inherit;
-      font-size: var(--ui-font-size-lg);
+      font-size: var(--ui-nav-icon-size);
     }
 
     .content {
@@ -137,11 +140,10 @@
     }
 
     :scope[data-ui-nav-item-state~="density=compact"] {
-      min-block-size: var(--ui-control-size-sm);
-      padding-block: var(--ui-space-1);
-      padding-inline: var(--ui-space-2);
+      min-block-size: var(--ui-nav-compact-min-block-size);
+      padding-block: var(--ui-nav-compact-padding-block);
+      padding-inline: var(--ui-nav-compact-padding-inline);
     }
-    :scope[data-ui-nav-item-state~="density=compact"] .leading,
     :scope[data-ui-nav-item-state~="density=compact"] .label {
       font-size: var(--ui-font-size-sm);
     }
@@ -154,6 +156,7 @@
 
     /* An unused region takes no space. */
     .leading:empty,
+    .trailing:empty,
     .description:empty {
       display: none;
     }

package/styles/ui-sidebar.css

@@ -15,12 +15,17 @@
       syntax: "*";
       inherits: false;
     }
+@property --ui-sidebar-collapsed-width {
+      syntax: "*";
+      inherits: false;
+    }
 @scope ([data-component~="ui-sidebar"]) to ([data-component], [data-slotted]) {
 /* This component's hooks style the element they are set on, and never a nested one. */
 
     :scope {
       /* Hooks do not inherit, so the parts below read them from the root. */
       --_ui-sidebar-backdrop: var(--ui-sidebar-backdrop);
+      --_ui-sidebar-expanded-width: var(--_sidebar-width, var(--ui-sidebar-width, 280px));
 
       position: relative;
       box-sizing: border-box;
@@ -32,6 +37,7 @@
       min-block-size: 0;
       background: var(--ui-sidebar-surface, var(--ui-surface-default));
       border-inline-end: var(--ui-border-width) solid var(--ui-sidebar-border, var(--ui-border-divider));
+      transition: inline-size var(--ui-motion-layout) var(--ui-motion-layout-ease), visibility var(--ui-motion-layout);
     }
 
     :scope[data-ui-sidebar-state~="side=end"] {
@@ -41,10 +47,17 @@
 
     /* The panel's content scrolls, and each edge that hides content fades: the scroll fade every
        Looma scroller uses (see ui-scroll-area). */
-    .content {
+    .viewport {
       flex: 1;
       min-block-size: 0;
+      overflow: clip;
+    }
+    .content {
+      block-size: 100%;
+      inline-size: calc(var(--_ui-sidebar-expanded-width) - var(--ui-border-width));
+      min-block-size: 0;
       overflow: auto;
+      transition: transform var(--ui-motion-layout) var(--ui-motion-layout-ease);
       --_ui-scroll-fade-direction: to bottom;
       --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
       mask-image: linear-gradient(
@@ -65,7 +78,17 @@
 
     /* Collapsed while docked. */
     :scope[data-ui-sidebar-state~="internalCollapsed"]:not([popover]) {
-      display: none;
+      inline-size: var(--ui-sidebar-collapsed-width, 0px);
+      visibility: hidden;
+    }
+    :scope[data-ui-sidebar-state~="resizing"] {
+      transition: none;
+    }
+    :scope[data-ui-sidebar-state~="internalCollapsed"]:not([popover]) .content {
+      transform: translateX(-100%);
+    }
+    :scope[data-ui-sidebar-state~="side=end"][data-ui-sidebar-state~="internalCollapsed"]:not([popover]) .content {
+      transform: translateX(100%);
     }
 
     .resizer {
@@ -144,9 +167,9 @@
       box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
       transform: translateX(0);
       transition:
-        transform var(--ui-motion-base) var(--ui-motion-ease-out),
-        display var(--ui-motion-base) allow-discrete,
-        overlay var(--ui-motion-base) allow-discrete;
+        transform var(--ui-motion-reveal) var(--ui-motion-reveal-ease),
+        display var(--ui-motion-reveal) allow-discrete,
+        overlay var(--ui-motion-reveal) allow-discrete;
     }
 
     /* The author display above would otherwise override the UA rule that hides a closed popover. */
@@ -176,9 +199,14 @@
     :scope[popover]::backdrop {
       background: var(--_ui-sidebar-backdrop, rgb(0 0 0 / 0.32));
     }
+    :scope[popover] .content {
+      inline-size: 100%;
+    }
 
     @media (prefers-reduced-motion: reduce) {
-      :scope[popover] {
+      :scope,
+      :scope[popover],
+      .content {
         transition: none;
       }
     }

package/tokens.css

@@ -128,6 +128,12 @@
     --ui-pressed: inset 0 1px 2px rgb(0 0 0 / 0.12);
 
     --ui-motion-base: calc(var(--ui-motion-fast) * 1.5);
+    --ui-motion-feedback: var(--ui-motion-fast);
+    --ui-motion-reveal: var(--ui-motion-base);
+    --ui-motion-layout: calc(var(--ui-motion-base) * 1.5);
+    --ui-motion-feedback-ease: var(--ui-motion-ease);
+    --ui-motion-reveal-ease: var(--ui-motion-ease-out);
+    --ui-motion-layout-ease: var(--ui-motion-ease-out);
     /* Fast start, gentle settle: for reveals that should feel immediate. */
     --ui-motion-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
 
@@ -180,6 +186,15 @@
     --ui-selection-surface: color-mix(in oklab, var(--ui-accent) 6%, var(--ui-surface));
     --ui-selection-text: var(--ui-accent-subtle-text);
     --ui-selection-radius: var(--ui-radius-md);
+    --ui-nav-icon-size: var(--ui-font-size-md);
+    --ui-nav-gap: var(--ui-space-3);
+    --ui-nav-padding-inline: var(--ui-space-3);
+    --ui-nav-padding-block: var(--ui-space-2);
+    --ui-nav-min-block-size: var(--ui-control-size);
+    --ui-nav-compact-padding-inline: var(--ui-space-2);
+    --ui-nav-compact-padding-block: var(--ui-space-1);
+    --ui-nav-compact-min-block-size: var(--ui-control-size-sm);
+    --ui-nav-hover-surface: var(--ui-surface-hover);
 
     --ui-accent-soft: var(--ui-accent-subtle);
     --ui-accent-contrast: var(--ui-on-accent);

package/vanilla/UiDisclosure.d.ts

@@ -14,7 +14,9 @@ export interface UiDisclosureProps {
   headingLevel?: number | null;
   name?: string | null;
   open?: boolean | null;
+  requiredOpen?: boolean | null;
   summary?: string | null;
+  variant?: "plain" | "navigation" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];
   slots?: Readonly<Record<string, readonly (string | Node)[]>>;

package/vanilla/UiDisclosure.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-disclosure/ui-disclosure.js";
 import "../styles/ui-disclosure.css";
 
-const definition = {...{"contract":{"tag":"ui-disclosure","props":{"density":{"type":{"kind":"terminal","name":"keyword"},"values":["comfortable","compact"],"required":false,"target":{"attribute":"density"},"default":"comfortable"},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"fill":{"type":"boolean","required":false,"target":{"attribute":"fill"},"default":false},"headingLevel":{"type":{"kind":"terminal","name":"integer"},"required":false,"target":{"attribute":"headinglevel"},"default":0},"name":{"type":"string","required":false,"target":{"attribute":"name"},"default":""},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false},"summary":{"type":"string","required":false,"target":{"attribute":"summary"},"default":"Details"}}},"template":{"kind":"element","name":"div","attributes":[],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"heading"},{"kind":"attribute","name":"role","expression":"headingRole","expressionPlan":{"source":"headingRole","ast":{"kind":"id","name":"headingRole"},"dependencies":["headingRole"]}},{"kind":"attribute","name":"aria-level","expression":"headingAriaLevel","expressionPlan":{"source":"headingAriaLevel","ast":{"kind":"id","name":"headingAriaLevel"},"dependencies":["headingAriaLevel"]}}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"class","value":"trigger"},{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"aria-controls","expression":"contentId","expressionPlan":{"source":"contentId","ast":{"kind":"id","name":"contentId"},"dependencies":["contentId"]}},{"kind":"attribute","name":"aria-expanded","expression":"internalOpen","expressionPlan":{"source":"internalOpen","ast":{"kind":"id","name":"internalOpen"},"dependencies":["internalOpen"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"summary"}],"children":[{"kind":"slot","fallback":[{"kind":"element","name":"template","attributes":[{"kind":"directive","name":"value","expression":"summary","expressionPlan":{"source":"summary","ast":{"kind":"id","name":"summary"},"dependencies":["summary"]}}],"children":[]}],"name":"summary"}]},{"kind":"slot","fallback":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"chevron"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]}],"name":"indicator"}],"ref":"trigger"}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"panel"},{"kind":"attribute","name":"id","expression":"contentId","expressionPlan":{"source":"contentId","ast":{"kind":"id","name":"contentId"},"dependencies":["contentId"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"panel-inner"}],"children":[{"kind":"slot"}]}],"ref":"panel"}]},"declarations":[{"kind":"state","name":"internalOpen","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"contentId","type":"string","value":"","expression":{"source":"\"\"","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"state","name":"headingRole","type":"keyword"},{"kind":"state","name":"headingAriaLevel","type":"integer"},{"kind":"event","name":"open","type":"object","shape":{"kind":"object","fields":[{"name":"open","type":{"kind":"terminal","name":"boolean"},"optional":false},{"name":"reason","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["action","programmatic","light-dismiss","escape"]},"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":"close","type":"object","shape":{"kind":"object","fields":[{"name":"open","type":{"kind":"terminal","name":"boolean"},"optional":false},{"name":"reason","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["action","programmatic","light-dismiss","escape"]},"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":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-disclosure","props":{"density":{"type":{"kind":"terminal","name":"keyword"},"values":["comfortable","compact"],"required":false,"target":{"attribute":"density"},"default":"comfortable"},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"fill":{"type":"boolean","required":false,"target":{"attribute":"fill"},"default":false},"headingLevel":{"type":{"kind":"terminal","name":"integer"},"required":false,"target":{"attribute":"headinglevel"},"default":0},"name":{"type":"string","required":false,"target":{"attribute":"name"},"default":""},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false},"requiredOpen":{"type":"boolean","required":false,"target":{"attribute":"requiredopen"},"default":false},"summary":{"type":"string","required":false,"target":{"attribute":"summary"},"default":"Details"},"variant":{"type":{"kind":"terminal","name":"keyword"},"values":["plain","navigation"],"required":false,"target":{"attribute":"variant"},"default":"plain"}}},"template":{"kind":"element","name":"div","attributes":[],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"heading"},{"kind":"attribute","name":"role","expression":"headingRole","expressionPlan":{"source":"headingRole","ast":{"kind":"id","name":"headingRole"},"dependencies":["headingRole"]}},{"kind":"attribute","name":"aria-level","expression":"headingAriaLevel","expressionPlan":{"source":"headingAriaLevel","ast":{"kind":"id","name":"headingAriaLevel"},"dependencies":["headingAriaLevel"]}}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"class","value":"trigger"},{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"aria-controls","expression":"contentId","expressionPlan":{"source":"contentId","ast":{"kind":"id","name":"contentId"},"dependencies":["contentId"]}},{"kind":"attribute","name":"aria-expanded","expression":"internalOpen","expressionPlan":{"source":"internalOpen","ast":{"kind":"id","name":"internalOpen"},"dependencies":["internalOpen"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}}],"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":"summary"}],"children":[{"kind":"slot","fallback":[{"kind":"element","name":"template","attributes":[{"kind":"directive","name":"value","expression":"summary","expressionPlan":{"source":"summary","ast":{"kind":"id","name":"summary"},"dependencies":["summary"]}}],"children":[]}],"name":"summary"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"indicator"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[{"kind":"slot","fallback":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"chevron"}],"children":[]}],"name":"indicator"}]}],"ref":"trigger"}],"ref":"heading"},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"panel"},{"kind":"attribute","name":"id","expression":"contentId","expressionPlan":{"source":"contentId","ast":{"kind":"id","name":"contentId"},"dependencies":["contentId"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"panel-inner"}],"children":[{"kind":"slot"}]}],"ref":"panel"}]},"declarations":[{"kind":"state","name":"internalOpen","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"contentId","type":"string","value":"","expression":{"source":"\"\"","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"state","name":"headingRole","type":"keyword"},{"kind":"state","name":"headingAriaLevel","type":"integer"},{"kind":"event","name":"open","type":"object","shape":{"kind":"object","fields":[{"name":"open","type":{"kind":"terminal","name":"boolean"},"optional":false},{"name":"reason","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["action","programmatic","light-dismiss","escape"]},"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":"close","type":"object","shape":{"kind":"object","fields":[{"name":"open","type":{"kind":"terminal","name":"boolean"},"optional":false},{"name":"reason","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["action","programmatic","light-dismiss","escape"]},"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":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
 
 export function createUiDisclosure(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
@@ -23,49 +23,64 @@ export function createUiDisclosure(options = {}) {
   if (value0 === true) element1.setAttribute("disabled", "");
   else element1.removeAttribute("disabled");
   const element2 = document.createElement("span");
-  element2.setAttribute("class", "summary");
+  element2.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"]);
+      element2.append(node);
+    }
+  } else {
+  }
+  element1.append(element2);
+  const element3 = document.createElement("span");
+  element3.setAttribute("class", "summary");
   if (slots["summary"] ?? [].length > 0) {
     for (const child of slots["summary"] ?? []) {
       const node = typeof child === "string" ? document.createTextNode(child) : child;
       if (node.nodeType === 1) node.setAttribute("data-slotted", "");
       projected.push([node, "summary"]);
-      element2.append(node);
+      element3.append(node);
     }
   } else {
-  const element3 = document.createElement("template");
-  element2.append(element3);
+  const element4 = document.createElement("template");
+  element3.append(element4);
   }
-  element1.append(element2);
+  element1.append(element3);
+  const element5 = document.createElement("span");
+  element5.setAttribute("class", "indicator");
+  element5.setAttribute("aria-hidden", "true");
   if (slots["indicator"] ?? [].length > 0) {
     for (const child of slots["indicator"] ?? []) {
       const node = typeof child === "string" ? document.createTextNode(child) : child;
       if (node.nodeType === 1) node.setAttribute("data-slotted", "");
       projected.push([node, "indicator"]);
-      element1.append(node);
+      element5.append(node);
     }
   } else {
-  const element4 = document.createElement("span");
-  element4.setAttribute("class", "chevron");
-  element4.setAttribute("aria-hidden", "true");
-  element1.append(element4);
+  const element6 = document.createElement("span");
+  element6.setAttribute("class", "chevron");
+  element5.append(element6);
   }
+  element1.append(element5);
   element0.append(element1);
   element.append(element0);
-  const element5 = document.createElement("div");
-  element5.setAttribute("class", "panel");
-  const element6 = document.createElement("div");
-  element6.setAttribute("class", "panel-inner");
+  const element7 = document.createElement("div");
+  element7.setAttribute("class", "panel");
+  const element8 = document.createElement("div");
+  element8.setAttribute("class", "panel-inner");
   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, ""]);
-      element6.append(node);
+      element8.append(node);
     }
   } else {
   }
-  element5.append(element6);
-  element.append(element5);
+  element7.append(element8);
+  element.append(element7);
   manageComponentLifecycle(element, definition, { props: componentProps, projected,
     controller,
   });

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,
   });