@threadlabs/looma 0.23.7 → 0.23.8

package/vanilla/UiSidebar.js

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

package/vue/UiDisclosure.d.ts

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

package/vue/UiDisclosure.vue

@@ -57,6 +57,14 @@ const propValidityContract = {
         'Whether the disclosure is open initially or when set externally. The trigger toggles it from there, reporting each change as an open or close event.',
       default: false,
     },
+    requiredOpen: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'requiredopen' },
+      description:
+        'In a named exclusive group, keeps at least one member open. Clicking the last open trigger does not close it; opening another member transfers the open\n      state.',
+      default: false,
+    },
     summary: {
       type: { kind: 'terminal', name: 'string' },
       required: false,
@@ -65,6 +73,15 @@ const propValidityContract = {
         'The text of the trigger row that opens and closes the disclosure. It is the trigger button\'s accessible name, so name what the content is.',
       default: 'Details',
     },
+    variant: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'variant' },
+      description:
+        'Navigation shares icon columns, spacing, type, hover, and corners with Nav Item. Plain retains the standard disclosure treatment.',
+      values: ['plain', 'navigation'],
+      default: 'plain',
+    },
   },
 } as const
 const props = defineProps({
@@ -77,7 +94,9 @@ const props = defineProps({
   headingLevel: { type: null as unknown as PropType<number | null>, default: 0 },
   name: { type: null as unknown as PropType<string | null>, default: '' },
   open: { type: null as unknown as PropType<boolean | null>, default: false },
+  requiredOpen: { type: null as unknown as PropType<boolean | null>, default: false },
   summary: { type: null as unknown as PropType<string | null>, default: 'Details' },
+  variant: { type: null as unknown as PropType<'plain' | 'navigation' | null>, default: 'plain' },
 })
 const acceptedProps: Record<string, unknown> = {
   density: 'comfortable',
@@ -86,7 +105,9 @@ const acceptedProps: Record<string, unknown> = {
   headingLevel: 0,
   name: '',
   open: false,
+  requiredOpen: false,
   summary: 'Details',
+  variant: 'plain',
 }
 const checkedProps = computed(() => ({
   density: checkedProp<'comfortable' | 'compact'>(
@@ -131,6 +152,13 @@ const checkedProps = computed(() => ({
     'open',
     acceptedProps,
   ) as boolean,
+  requiredOpen: checkedProp<boolean>(
+    props['requiredOpen'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'requiredOpen',
+    acceptedProps,
+  ) as boolean,
   summary: checkedProp<string>(
     props['summary'],
     { kind: 'terminal', name: 'string' },
@@ -138,6 +166,13 @@ const checkedProps = computed(() => ({
     'summary',
     acceptedProps,
   ) as string,
+  variant: checkedProp<'plain' | 'navigation'>(
+    props['variant'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'variant',
+    acceptedProps,
+  ) as 'plain' | 'navigation',
 }))
 void checkedProps.value
 watchSyncEffect(() => {
@@ -199,6 +234,7 @@ const emit = defineEmits<{
 }>()
 
 const root = ref<HTMLElement | null>(null)
+const headingElement = useTemplateRef<HTMLElement>('heading')
 const triggerElement = useTemplateRef<HTMLElement>('trigger')
 const panelElement = useTemplateRef<HTMLElement>('panel')
 const internalOpen = ref(false)
@@ -267,6 +303,9 @@ const hostState = computed(() =>
     && `density=${encodeURIComponent(checkedProps.value.density)}`,
     internalOpen.value && 'internalOpen',
     checkedProps.value.fill && 'fill',
+    checkedProps.value.variant && 'variant',
+    checkedProps.value.variant != null
+    && `variant=${encodeURIComponent(checkedProps.value.variant)}`,
   ].filter(Boolean).join(' ')
 )
 
@@ -304,10 +343,20 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
       ? (incoming[name] ?? incoming[kebab] ?? null)
       : null
   },
-  propNames: ['density', 'disabled', 'fill', 'headingLevel', 'name', 'open', 'summary'],
+  propNames: [
+    'density',
+    'disabled',
+    'fill',
+    'headingLevel',
+    'name',
+    'open',
+    'requiredOpen',
+    'summary',
+    'variant',
+  ],
   propValidity: (name: string) =>
     propValidityState({ contract: propValidityContract, values: { ...props } }, name),
-  refs: { trigger: triggerElement, panel: panelElement },
+  refs: { heading: headingElement, trigger: triggerElement, panel: panelElement },
   state: { internalOpen, contentId, headingRole, headingAriaLevel },
 })
 </script>
@@ -323,11 +372,13 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
     :data-heading-level="reflectedProp('headingLevel', 'heading-level', checkedProps.headingLevel, undefined, false)"
     :data-name="reflectedProp('name', 'name', checkedProps.name, undefined, false)"
     :data-open="reflectedProp('open', 'open', checkedProps.open, undefined, false)"
+    :data-required-open="reflectedProp('requiredOpen', 'required-open', checkedProps.requiredOpen, undefined, false)"
     :data-summary="reflectedProp('summary', 'summary', checkedProps.summary, undefined, false)"
+    :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-ui-disclosure-state="hostState || undefined"
     ref="root"
   >
-    <div class="heading" :role="guarded" :aria-level="guardedBinding">
+    <div class="heading" :role="guarded" :aria-level="guardedBinding" ref="heading">
       <button
         class="trigger"
         type="button"
@@ -336,8 +387,11 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
         :disabled="checkedProps.disabled ?? undefined"
         ref="trigger"
       >
+        <span class="leading"><slot name="leading" /></span>
         <span class="summary"><slot name="summary">{{ checkedProps.summary }}</slot></span>
-        <slot name="indicator"><span class="chevron" aria-hidden="true"></span></slot>
+        <span class="indicator" aria-hidden="true"><slot name="indicator"><span
+              class="chevron"
+            ></span></slot></span>
       </button>
     </div>
     <div class="panel" :id="guardedBinding4" ref="panel">
@@ -390,8 +444,7 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
 }
 
 .trigger {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
+  display: flex;
   gap: var(--ui-space-3);
   align-items: center;
   inline-size: 100%;
@@ -422,20 +475,42 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
   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);
+}
+[data-component~="ui-disclosure"][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 {
@@ -450,22 +525,22 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
 [data-component~="ui-disclosure"][data-ui-disclosure-state~="internalOpen"] .panel-inner {
   padding-block: 0 var(--ui-space-3);
 }
-[data-component~="ui-disclosure"][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. */
 [data-component~="ui-disclosure"][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);
 }
 [data-component~="ui-disclosure"][data-ui-disclosure-state~="fill"][data-ui-disclosure-state~="internalOpen"] {
-  flex: 1;
+  flex-grow: 1;
 }
 [data-component~="ui-disclosure"][data-ui-disclosure-state~="fill"] .heading {
   flex: none;
@@ -474,14 +549,8 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
   border-radius: 0;
 }
 [data-component~="ui-disclosure"][data-ui-disclosure-state~="fill"] .panel {
-  display: flex;
   flex: 1;
   min-block-size: 0;
-  transition: none;
-}
-[data-component~="ui-disclosure"][data-ui-disclosure-state~="fill"] .panel[hidden] {
-  flex: none;
-  block-size: 0;
 }
 [data-component~="ui-disclosure"][data-ui-disclosure-state~="fill"] .panel-inner {
   display: flex;
@@ -491,9 +560,48 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
   padding: 0;
 }
 
+[data-component~="ui-disclosure"][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);
+}
+[data-component~="ui-disclosure"][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);
+}
+[data-component~="ui-disclosure"][data-ui-disclosure-state~="variant=navigation"]
+  .trigger:hover:not(:disabled) {
+  background: var(--ui-nav-hover-surface);
+  color: var(--ui-text-primary);
+}
+[data-component~="ui-disclosure"][data-ui-disclosure-state~="variant=navigation"][data-ui-disclosure-state~="internalOpen"]
+  .trigger {
+  color: var(--ui-selection-text);
+}
+[data-component~="ui-disclosure"][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) {
+  [data-component~="ui-disclosure"][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) {
+  [data-component~="ui-disclosure"][data-ui-disclosure-state~="fill"],
   .panel,
-  .chevron {
+  .indicator {
     transition: none;
   }
 }

package/vue/UiNavItem.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {}, __VLS_9: {}, __VLS_11: {};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {}, __VLS_9: {}, __VLS_11: {}, __VLS_13: {}, __VLS_15: {};
 type __VLS_Slots = {} & {
     leading?: (props: typeof __VLS_1) => any;
 } & {
@@ -7,11 +7,15 @@ type __VLS_Slots = {} & {
 } & {
     description?: (props: typeof __VLS_5) => any;
 } & {
-    leading?: (props: typeof __VLS_7) => any;
+    trailing?: (props: typeof __VLS_7) => any;
 } & {
-    default?: (props: typeof __VLS_9) => any;
+    leading?: (props: typeof __VLS_9) => any;
 } & {
-    description?: (props: typeof __VLS_11) => any;
+    default?: (props: typeof __VLS_11) => any;
+} & {
+    description?: (props: typeof __VLS_13) => any;
+} & {
+    trailing?: (props: typeof __VLS_15) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     as: {

package/vue/UiNavItem.vue

@@ -267,7 +267,8 @@ function attribute(value: unknown): any {
   ><span class="indicator" aria-hidden="true"></span>
     <span class="leading"><slot name="leading" /></span>
     <span class="content"><span class="label"><slot /></span>
-      <span class="description"><slot name="description" /></span></span></a>
+      <span class="description"><slot name="description" /></span></span>
+    <span class="trailing"><slot name="trailing" /></span></a>
   <button
     v-else
     data-component="ui-nav-item"
@@ -307,6 +308,7 @@ function attribute(value: unknown): any {
     <span class="leading"><slot name="leading" /></span>
     <span class="content"><span class="label"><slot /></span>
       <span class="description"><slot name="description" /></span></span>
+    <span class="trailing"><slot name="trailing" /></span>
   </button>
 </template>
 
@@ -340,13 +342,13 @@ function attribute(value: unknown): any {
   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;
@@ -363,7 +365,7 @@ function attribute(value: unknown): any {
 }
 
 [data-component~="ui-nav-item"]:hover:not([aria-current]) {
-  background: var(--ui-surface-hover);
+  background: var(--ui-nav-hover-surface);
   color: var(--ui-text-primary);
 }
 
@@ -412,12 +414,15 @@ function attribute(value: unknown): any {
   }
 }
 
-.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 {
@@ -450,11 +455,10 @@ function attribute(value: unknown): any {
 }
 
 [data-component~="ui-nav-item"][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);
 }
-[data-component~="ui-nav-item"][data-ui-nav-item-state~="density=compact"] .leading,
 [data-component~="ui-nav-item"][data-ui-nav-item-state~="density=compact"] .label {
   font-size: var(--ui-font-size-sm);
 }
@@ -467,6 +471,7 @@ function attribute(value: unknown): any {
 
 /* An unused region takes no space. */
 .leading:empty,
+.trailing:empty,
 .description:empty {
   display: none;
 }

package/vue/UiSection.d.ts

@@ -35,7 +35,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     };
 }>> & Readonly<{}>, {
     tone: "neutral" | "danger" | null;
-    variant: "card" | "plain" | "divided" | null;
+    variant: "plain" | "card" | "divided" | null;
     heading: string | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;