@threadlabs/looma 0.22.14 → 0.23.1

package/styles/ui-tabs.css

@@ -52,7 +52,7 @@
       overflow-y: hidden;
       overscroll-behavior: contain;
       scrollbar-width: thin;
-      border-block-end: 1px solid var(--ui-border-divider);
+      border-block-end: var(--ui-border-width) solid var(--ui-border-divider);
     }
 
     /* Centre the glyphs, not the line box: a label without descenders otherwise reads high. */
@@ -78,7 +78,7 @@
       grid-auto-flow: row;
       grid-auto-columns: auto;
       border-block-end: 0;
-      border-inline-end: 1px solid var(--ui-border-divider);
+      border-inline-end: var(--ui-border-width) solid var(--ui-border-divider);
     }
 
     @media (prefers-reduced-motion: reduce) {
@@ -97,10 +97,10 @@
     .list button,
     .list > :where([data-slotted], [data-slotted] *):is(button[slot="tab"]) {
       min-block-size: var(--_ui-tabs-tab-min-block-size, var(--_tab-min-block-size));
-      margin: 0 0 -1px;
+      margin: 0 0 calc(-1 * var(--ui-border-width));
       padding: var(--_ui-tabs-tab-padding-block, var(--_tab-padding-block)) var(--_ui-tabs-tab-padding-inline, var(--_tab-padding-inline));
       border: 0;
-      border-block-end: 2px solid transparent;
+      border-block-end: var(--ui-accent-line-width) solid transparent;
       background: transparent;
       color: var(--ui-text-secondary);
       font: inherit;
@@ -146,7 +146,7 @@
     .list > :where([data-slotted], [data-slotted] *):is(button[slot="tab"]:focus-visible) {
       position: relative;
       outline: none;
-      box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
+      box-shadow: inset 0 0 0 var(--ui-focus-width) color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
       border-radius: var(--ui-radius-sm);
     }
     .panels > :where([data-slotted], [data-slotted] *):is(*) {
@@ -155,9 +155,9 @@
 
     :scope[data-ui-tabs-state~="orientation=vertical"] .list button,
     :scope[data-ui-tabs-state~="orientation=vertical"] .list > :where([data-slotted], [data-slotted] *):is(button[slot="tab"]) {
-      margin: 0 -1px 0 0;
+      margin: 0 calc(-1 * var(--ui-border-width)) 0 0;
       border-block-end: 0;
-      border-inline-end: 2px solid transparent;
+      border-inline-end: var(--ui-accent-line-width) solid transparent;
       text-align: start;
     }
 

package/styles/ui-textarea.css

@@ -33,7 +33,7 @@
       padding: var(--ui-space-2) var(--ui-space-3);
       appearance: none;
       resize: vertical;
-      border: 1px solid var(--ui-control-border, var(--ui-border-strong));
+      border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
       border-radius: var(--ui-textarea-radius, var(--ui-field-radius, var(--ui-radius-md)));
       background: var(--ui-control-surface, var(--ui-surface-elevated));
       color: var(--ui-text-primary);
@@ -77,7 +77,11 @@
       box-shadow: var(
         --ui-textarea-invalid-focus-shadow,
         var(--ui-control-inset),
-        0 0 0 3px color-mix(in srgb, var(--ui-textarea-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%, transparent)
+        0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(
+          in srgb,
+          var(--ui-textarea-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%,
+          transparent
+        )
       );
     }
 

package/styles/ui-toast-region.css

@@ -129,7 +129,7 @@
       grid-template-columns: 1fr auto;
       gap: var(--ui-space-2);
       align-items: start;
-      border: 1px solid var(--_ui-toast-region-border, var(--ui-overlay-border, var(--ui-border-strong)));
+      border: var(--ui-border-width) solid var(--_ui-toast-region-border, var(--ui-overlay-border, var(--ui-border-strong)));
       border-radius: var(--_ui-toast-region-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
       padding: var(--ui-space-3) var(--ui-space-4);
       background: var(--_ui-toast-region-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
@@ -139,16 +139,16 @@
     }
 
     .toast[data-tone="info"] {
-      border-inline-start: 3px solid var(--ui-info-solid);
+      border-inline-start: var(--ui-accent-line-width) solid var(--ui-info-solid);
     }
     .toast[data-tone="success"] {
-      border-inline-start: 3px solid var(--ui-success-solid);
+      border-inline-start: var(--ui-accent-line-width) solid var(--ui-success-solid);
     }
     .toast[data-tone="warning"] {
-      border-inline-start: 3px solid var(--ui-warning-solid);
+      border-inline-start: var(--ui-accent-line-width) solid var(--ui-warning-solid);
     }
     .toast[data-tone="danger"] {
-      border-inline-start: 3px solid var(--ui-danger-solid);
+      border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger-solid);
     }
 
     /* Leaving slides on down and fades; the controller removes the toast when this ends. */

package/styles/ui-toast.css

@@ -32,8 +32,8 @@
       inline-size: 100%;
       margin: 0;
       padding: var(--ui-space-3) var(--ui-space-4);
-      border: 1px solid var(--ui-toast-border, var(--ui-overlay-border, var(--ui-border-strong)));
-      border-inline-start: 3px solid var(--ui-toast-accent, var(--_ui-toast-accent));
+      border: var(--ui-border-width) solid var(--ui-toast-border, var(--ui-overlay-border, var(--ui-border-strong)));
+      border-inline-start: var(--ui-accent-line-width) solid var(--ui-toast-accent, var(--_ui-toast-accent));
       border-radius: var(--ui-toast-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
       background: var(--ui-toast-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
       color: var(--ui-text-primary);

package/styles/ui-tooltip.css

@@ -80,7 +80,7 @@
       position: relative;
       box-sizing: border-box;
       max-inline-size: var(--_ui-tooltip-max-inline-size, 18rem);
-      border: 1px solid var(--_tooltip-line);
+      border: var(--ui-border-width) solid var(--_tooltip-line);
       border-radius: var(--_ui-tooltip-radius, var(--ui-overlay-radius, var(--ui-radius-md)));
       background: var(--_ui-tooltip-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
       color: var(--_ui-tooltip-text, var(--ui-text-primary));
@@ -125,27 +125,27 @@
       position: absolute;
       z-index: 1;
       inset-inline-start: var(--ui-space-3);
-      inset-block-end: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - 0.5px);
+      inset-block-end: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - var(--ui-border-width) / 2);
       inline-size: var(--_ui-tooltip-arrow-size, 0.625rem);
       block-size: var(--_ui-tooltip-arrow-size, 0.625rem);
       box-sizing: border-box;
       background: inherit;
       border: 0 solid var(--_tooltip-line);
-      border-inline-end-width: 1px;
-      border-block-end-width: 1px;
-      border-end-end-radius: 1px;
+      border-inline-end-width: var(--ui-border-width);
+      border-block-end-width: var(--ui-border-width);
+      border-end-end-radius: var(--ui-border-width);
       transform: rotate(45deg) scaleX(1.25) scaleY(0.85);
     }
 
     :scope[data-ui-actual-placement="bottom"] .surface::after {
-      inset-block-start: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - 0.5px);
+      inset-block-start: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - var(--ui-border-width) / 2);
       inset-block-end: auto;
       border-inline-end-width: 0;
       border-block-end-width: 0;
-      border-inline-start-width: 1px;
-      border-block-start-width: 1px;
+      border-inline-start-width: var(--ui-border-width);
+      border-block-start-width: var(--ui-border-width);
       border-end-end-radius: 0;
-      border-start-start-radius: 1px;
+      border-start-start-radius: var(--ui-border-width);
     }
 
     :scope[data-ui-actual-align="center"] .surface::after {
@@ -166,16 +166,16 @@
 
     :scope[data-ui-actual-placement="left"] .surface::after {
       inset-inline-start: auto;
-      inset-inline-end: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - 0.5px);
-      border-inline-end-width: 1px;
-      border-block-start-width: 1px;
+      inset-inline-end: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - var(--ui-border-width) / 2);
+      border-inline-end-width: var(--ui-border-width);
+      border-block-start-width: var(--ui-border-width);
     }
 
     :scope[data-ui-actual-placement="right"] .surface::after {
-      inset-inline-start: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - 0.5px);
+      inset-inline-start: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - var(--ui-border-width) / 2);
       inset-inline-end: auto;
-      border-inline-start-width: 1px;
-      border-block-end-width: 1px;
+      border-inline-start-width: var(--ui-border-width);
+      border-block-end-width: var(--ui-border-width);
     }
 
     :scope[data-ui-actual-placement="left"][data-ui-actual-align="start"] .surface::after,

package/styles/ui-top-bar.css

@@ -45,7 +45,7 @@
       padding-inline-start: max(var(--ui-top-bar-padding-inline, var(--ui-space-4)), env(safe-area-inset-left));
       padding-inline-end: max(var(--ui-top-bar-padding-inline, var(--ui-space-4)), env(safe-area-inset-right));
       background: var(--ui-top-bar-surface, var(--ui-surface-elevated));
-      border-block-end: 1px solid var(--ui-top-bar-border, var(--ui-border-divider));
+      border-block-end: var(--ui-border-width) solid var(--ui-top-bar-border, var(--ui-border-divider));
     }
 
     .leading,

package/styles/ui-tree-item.css

@@ -56,7 +56,7 @@
       min-block-size: var(--_ui-tree-item-min-block-size, var(--_tree-row-min-height));
       min-inline-size: 0;
       font-size: var(--_ui-tree-item-font-size, var(--ui-font-size-sm));
-      border-radius: var(--ui-radius-md);
+      border-radius: var(--ui-selection-radius);
       color: var(--ui-text-secondary);
       transition:
         background-color var(--ui-motion-fast) var(--ui-motion-ease),
@@ -67,12 +67,20 @@
     }
 
     .row:hover,
-    :scope[data-ui-tree-item-state~="selected"] .row,
     .row:focus-within {
       color: var(--ui-text-primary);
       background: var(--ui-surface-muted);
     }
 
+    /* Selection is the same surface recipe as destination and choice rows. */
+    :scope[data-ui-tree-item-state~="selected"] > .row {
+      color: var(--ui-selection-text);
+      background: var(--ui-selection-surface);
+    }
+    :scope[data-ui-tree-item-state~="selected"]:not([aria-disabled="true"]) > .row > .leading {
+      color: var(--ui-selection-text);
+    }
+
     :scope[data-ui-tree-item-state~="disabled"] .row {
       color: var(--ui-disabled-text);
       background: var(--ui-disabled-surface);
@@ -87,13 +95,13 @@
     }
 
     :scope:focus-visible .row {
-      box-shadow: 0 0 0 2px var(--ui-focus-ring);
+      box-shadow: 0 0 0 var(--ui-focus-width) var(--ui-focus-ring);
     }
 
     /* Child combinators: drop feedback belongs to this item's own row, not the rows nested in it. */
     :scope[data-drop-position="inside"] > .row {
       background: var(--ui-accent-subtle);
-      box-shadow: inset 0 0 0 1px var(--_ui-tree-drop-color, var(--ui-accent-solid));
+      box-shadow: inset 0 0 0 var(--ui-accent-line-width) var(--_ui-tree-drop-color, var(--ui-accent-solid));
     }
 
     .disclosure,
@@ -389,7 +397,7 @@
       z-index: 3;
       inset-inline: 1px;
       display: none;
-      block-size: 2px;
+      block-size: var(--ui-accent-line-width);
       border-radius: var(--ui-radius-round);
       background: var(--_ui-tree-drop-color, var(--ui-accent-solid));
       pointer-events: none;
@@ -402,7 +410,7 @@
       inset-block-start: 50%;
       inline-size: 7px;
       block-size: 7px;
-      border: 2px solid var(--_ui-tree-drop-color, var(--ui-accent-solid));
+      border: var(--ui-accent-line-width) solid var(--_ui-tree-drop-color, var(--ui-accent-solid));
       border-radius: var(--ui-radius-round);
       background: var(--ui-surface-elevated);
       transform: translateY(-50%);
@@ -417,12 +425,12 @@
 
     :scope[data-drop-position="before"] > .row > .row-drop-indicator {
       display: block;
-      inset-block-start: -1px;
+      inset-block-start: calc(-0.5 * var(--ui-accent-line-width));
     }
 
     :scope[data-drop-position="after"] > .subtree-drop-indicator {
       display: block;
-      inset-block-end: -1px;
+      inset-block-end: calc(-0.5 * var(--ui-accent-line-width));
     }
 
     .children[hidden] {
@@ -484,6 +492,17 @@
       }
     }
 
+    @media (forced-colors: active) {
+      :scope:focus-visible > .row {
+        outline: var(--ui-focus-width) solid Highlight;
+        outline-offset: calc(-1 * var(--ui-focus-width));
+      }
+      :scope[data-ui-tree-item-state~="selected"]:not(:focus-visible):not([aria-disabled="true"]) > .row {
+        outline: var(--ui-border-width) solid Highlight;
+        outline-offset: calc(-1 * var(--ui-border-width));
+      }
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope[hidden] {
       display: none;
@@ -492,6 +511,8 @@
 @scope ([data-component~="ui-tree-item"]) to ([data-component]) {
 /* This component's hooks style the element they are set on, and never a nested one. */
 
+    /* Selection is the same surface recipe as destination and choice rows. */
+
     /* Child combinators: drop feedback belongs to this item's own row, not the rows nested in it. */
 
     /* Lucide grip-vertical, filling the handle as in Looma 0.2. */
@@ -552,5 +573,8 @@
     @media (prefers-reduced-motion: reduce) {
     }
 
+    @media (forced-colors: active) {
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
 }

package/tokens.css

@@ -23,7 +23,7 @@
     --ui-surface-raised: #ffffff;
     --ui-surface-sunken: #f0f0ec;
     --ui-text: #1a1a1a;
-    --ui-focus-halo: 0 0 0 3px color-mix(in srgb, var(--ui-focus-ring) 40%, transparent);
+    --ui-focus-halo: 0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(in srgb, var(--ui-focus-ring) 40%, transparent);
 
     /* Type. */
     --ui-font-sans:
@@ -48,6 +48,11 @@
     --ui-space-3: 0.75rem;
     --ui-space-4: 1rem;
 
+    /* Line dimensions by role. Accent edges follow ordinary lines unless deliberately themed;
+       keyboard focus is independent so a quiet border theme cannot erase the focus indicator. */
+    --ui-border-width: 1px;
+    --ui-focus-width: 2px;
+
     /* Radius. */
     --ui-radius-sm: 0.25rem;
     --ui-radius-md: 0.5rem;
@@ -80,6 +85,8 @@
      never has to: these exist so components share one vocabulary, not to be configured. */
   :root,
   :where([data-theme], [data-contrast]) {
+    --ui-accent-line-width: var(--ui-border-width);
+
     /* Type scale, from the base size. */
     --ui-font-size-2xs: calc(var(--ui-font-size) * 0.6875);
     --ui-font-size-xs: calc(var(--ui-font-size) * 0.75);
@@ -168,6 +175,12 @@
 
     /* Intent tones: a solid surface, its foreground, and a soft tint of each. */
     --ui-accent-solid: var(--ui-accent);
+    /* One quiet selection recipe for destination/content rows. Hue derives from the brand;
+       corners derive from the scale, and selected labels retain their resting weight. */
+    --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-accent-soft: var(--ui-accent-subtle);
     --ui-accent-contrast: var(--ui-on-accent);
     --ui-accent-strong-surface: var(--ui-accent);
@@ -210,7 +223,7 @@
     --ui-control-focus: var(--ui-focus-ring);
     /* Derived from the ring, not a near-white tint, so the halo shows on any surface. */
     --ui-control-focus-halo: color-mix(in srgb, var(--ui-focus-ring) 24%, transparent);
-    --ui-control-focus-halo-shadow: 0 0 0 3px var(--ui-control-focus-halo);
+    --ui-control-focus-halo-shadow: 0 0 0 calc(var(--ui-focus-width) * 1.5) var(--ui-control-focus-halo);
     --ui-control-size-md: var(--ui-control-size);
     --ui-control-size-lg: calc(var(--ui-control-size) * 1.2);
 
@@ -292,15 +305,16 @@
 @layer components {
   [data-ui-choice-option] {
     padding: var(--ui-space-2) var(--ui-space-3);
-    border-radius: var(--ui-radius-sm);
+    border-radius: var(--ui-selection-radius);
+    color: var(--ui-text-primary);
     cursor: pointer;
     overflow-wrap: anywhere;
   }
 
   [data-ui-choice-option]:is(:hover, .active) {
     background: var(--ui-surface-muted);
-    outline: 1px solid var(--ui-focus-ring);
-    outline-offset: -1px;
+    outline: var(--ui-border-width) solid var(--ui-focus-ring);
+    outline-offset: calc(-1 * var(--ui-border-width));
   }
 
   [data-ui-choice-option][aria-disabled="true"],
@@ -311,9 +325,9 @@
     cursor: not-allowed;
   }
 
-  [data-ui-choice-option]:not([data-multiple])[aria-selected="true"] {
-    background: color-mix(in srgb, var(--ui-accent-solid) 10%, var(--ui-control-surface));
-    box-shadow: inset 2px 0 var(--ui-accent-solid);
+  [data-ui-choice-option][aria-selected="true"]:not([aria-disabled="true"]) {
+    background: var(--ui-selection-surface);
+    color: var(--ui-selection-text);
   }
 
   [data-ui-choice-option][data-multiple] {
@@ -327,7 +341,7 @@
     flex: none;
     inline-size: 1.125rem;
     block-size: 1.125rem;
-    border: 1px solid var(--ui-control-border-hover, var(--ui-border-strong));
+    border: var(--ui-border-width) solid var(--ui-control-border-hover, var(--ui-border-strong));
     border-radius: var(--ui-radius-sm);
     background-color: var(--ui-control-surface);
     background-repeat: no-repeat;
@@ -347,6 +361,13 @@
     );
   }
 
+  @media (forced-colors: active) {
+    [data-ui-choice-option][aria-selected="true"]:not([aria-disabled="true"]):not(.active) {
+      outline: var(--ui-border-width) solid Highlight;
+      outline-offset: calc(-1 * var(--ui-border-width));
+    }
+  }
+
   [aria-disabled="true"] [data-ui-choice-option] {
     color: var(--ui-disabled-text);
     cursor: not-allowed;

package/vanilla/UiDisclosure.d.ts

@@ -10,6 +10,7 @@ export interface UiDisclosureElement extends HTMLDivElement {
 export interface UiDisclosureProps {
   density?: "comfortable" | "compact" | null;
   disabled?: boolean | null;
+  fill?: boolean | null;
   headingLevel?: number | null;
   name?: string | null;
   open?: boolean | null;

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},"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":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"chevron"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]}],"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},"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:""};
 
 export function createUiDisclosure(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
@@ -36,10 +36,19 @@ export function createUiDisclosure(options = {}) {
   element2.append(element3);
   }
   element1.append(element2);
+  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);
+    }
+  } else {
   const element4 = document.createElement("span");
   element4.setAttribute("class", "chevron");
   element4.setAttribute("aria-hidden", "true");
   element1.append(element4);
+  }
   element0.append(element1);
   element.append(element0);
   const element5 = document.createElement("div");