@threadlabs/looma 0.23.6 → 0.23.8

package/package.json

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

package/styles/ui-badge.css

@@ -3,6 +3,10 @@
       syntax: "*";
       inherits: false;
     }
+@property --ui-badge-square-size {
+      syntax: "*";
+      inherits: false;
+    }
 @property --ui-badge-dot-size {
       syntax: "*";
       inherits: false;
@@ -207,6 +211,31 @@
       --_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. */
+    :scope[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;
+    }
+
+    :scope[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));
+    }
+
+    :scope[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. */
     :scope[data-ui-badge-state~="shape=dot"] {
       position: relative;
@@ -299,6 +328,8 @@
     /* A solid colour fills with the ink. Its text is the page surface, mixed at 0% only so that it too is
        invalid while the hook is unset. */
 
+    /* An icon mark keeps the existing tone recipe and follows the global spacing and radius. */
+
     /* A dot uses the badge's tone recipe; only its silhouette and visible label change. */
 
     /* The clipped point needs an inset surface over an outer border-colour shape: a native border

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/UiBadge.d.ts

@@ -6,7 +6,7 @@ export interface UiBadgeElement extends HTMLSpanElement {
   removeEventListener<K extends keyof UiBadgeEventMap>(type: K, listener: (this: UiBadgeElement, event: UiBadgeEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
 }
 export interface UiBadgeProps {
-  shape?: "pill" | "tag" | "dot" | null;
+  shape?: "pill" | "tag" | "dot" | "square" | null;
   size?: "xs" | "md" | null;
   tone?: "neutral" | "accent" | "info" | "success" | "warning" | "danger" | null;
   variant?: "solid" | "subtle" | "outline" | null;

package/vanilla/UiBadge.js

@@ -28,7 +28,7 @@ export function createUiBadge(options = {}) {
   }
   element.append(element0);
   manageGeneratedProps(element, [
-    { name: "shape", attribute: "data-shape", value: componentProps["shape"], default: "pill", type: ["pill","tag","dot"], required: false },
+    { name: "shape", attribute: "data-shape", value: componentProps["shape"], default: "pill", type: ["pill","tag","dot","square"], required: false },
     { name: "size", attribute: "data-size", value: componentProps["size"], default: "md", type: ["xs","md"], required: false },
     { name: "tone", attribute: "data-tone", value: componentProps["tone"], default: "neutral", type: ["neutral","accent","info","success","warning","danger"], required: false },
     { name: "variant", attribute: "data-variant", value: componentProps["variant"], default: "subtle", type: ["solid","subtle","outline"], required: false },

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