@threadlabs/looma 0.22.14 → 0.23.1

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"},"href":{"type":"string","required":false,"target":{"attribute":"href"}},"rel":{"type":"string","required":false,"target":{"attribute":"rel"}},"target":{"type":"string","required":false,"target":{"attribute":"target"}}}},"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"}]}]}],"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:""};
 
 export function createUiNavItem(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;

package/vue/UiAvatar.vue

@@ -357,7 +357,7 @@ useComponentHost(() => import('../components/ui-avatar/ui-avatar.js'), {
   inline-size: 2.5rem;
   block-size: 2.5rem;
   border-radius: var(--ui-avatar-radius, var(--ui-radius-round));
-  border: 1px solid
+  border: var(--ui-border-width) solid
     var(
       --ui-avatar-border,
       color-mix(in srgb, var(--ui-accent-solid) 35%, var(--ui-surface-default))
@@ -399,8 +399,8 @@ useComponentHost(() => import('../components/ui-avatar/ui-avatar.js'), {
 /* An outline, not a dot: the avatar clips its content to the circle, and an outline is drawn
    outside the box, so the ring survives the clip and the overlap in an Avatar Group. */
 [data-component~="ui-avatar"][data-ui-avatar-state~="active"] {
-  outline: 1px solid var(--ui-avatar-active-ring, var(--ui-accent-solid));
-  outline-offset: 1px;
+  outline: var(--ui-border-width) solid var(--ui-avatar-active-ring, var(--ui-accent-solid));
+  outline-offset: var(--ui-border-width);
 }
 
 .image,

package/vue/UiAvatarGroup.vue

@@ -285,7 +285,7 @@ useComponentHost(() => import('../components/ui-avatar-group/ui-avatar-group.js'
   inline-size: 2.5rem;
   block-size: 2.5rem;
   border-radius: var(--ui-radius-round);
-  border: 1px solid var(--ui-border-strong);
+  border: var(--ui-border-width) solid var(--ui-border-strong);
   background: var(--ui-surface-elevated);
   color: var(--ui-text-primary);
   box-shadow:

package/vue/UiBadge.vue

@@ -253,7 +253,8 @@ const hostState = computed(() =>
   max-width: 100%;
   padding: var(--ui-badge-padding-block, var(--ui-space-0-5))
     var(--ui-badge-padding-inline, var(--ui-space-2));
-  border: 1px solid var(--ui-badge-border, var(--_badge-color-border, var(--_badge-border)));
+  border: var(--ui-border-width) solid
+    var(--ui-badge-border, var(--_badge-color-border, var(--_badge-border)));
   border-radius: var(--ui-radius-round);
   background: var(--_badge-outline-surface);
   color: var(--ui-badge-text, var(--_badge-color-text, var(--_badge-text)));

package/vue/UiButton.vue

@@ -601,7 +601,7 @@ function attribute(value: unknown): any {
   appearance: none;
   min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
   border-style: solid;
-  border-width: 1px;
+  border-width: var(--ui-border-width);
   border-color: var(--ui-button-border, var(--_tone));
   border-radius: var(--ui-button-radius, var(--ui-action-radius, var(--ui-radius-md)));
   background-color: var(--ui-button-surface, oklch(from var(--_tone) l c h / 5%));
@@ -877,8 +877,8 @@ html[data-ui-input-modality="touch"]
 [data-component~="ui-button"][data-ui-button-state~="variant=link"]:focus-visible {
   box-shadow: none;
   /* Fallback keeps the ring if the token is missing: an unresolved var() would void the outline. */
-  outline: 2px solid var(--ui-focus-ring);
-  outline-offset: 2px;
+  outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+  outline-offset: var(--ui-focus-width);
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */

package/vue/UiCallout.vue

@@ -243,9 +243,9 @@ const hostState = computed(() =>
   padding-block: var(--ui-callout-padding-block, var(--ui-space-2));
   padding-inline-start: var(--ui-callout-padding-inline, var(--ui-space-2));
   padding-inline-end: var(--ui-callout-padding-inline, var(--ui-space-3));
-  border: var(--ui-callout-border-width, 1px) solid
+  border: var(--ui-callout-border-width, var(--ui-border-width)) solid
     color-mix(in srgb, var(--ui-callout-border, var(--_callout-border)) 35%, transparent);
-  border-inline-start: var(--ui-callout-leading-border-width, 4px) solid
+  border-inline-start: var(--ui-callout-leading-border-width, var(--ui-accent-line-width)) solid
     var(--ui-callout-border, var(--_callout-border));
   border-radius: var(--ui-radius-md);
   background: var(--ui-callout-surface, var(--_callout-surface));

package/vue/UiCard.vue

@@ -266,7 +266,7 @@ const hostState = computed(() =>
   box-sizing: border-box;
   min-inline-size: 0;
   padding: var(--ui-space-5);
-  border: 1px solid var(--ui-border-strong);
+  border: var(--ui-border-width) solid var(--ui-border-strong);
   border-radius: var(--ui-radius-lg);
   background: var(--ui-surface-raised);
   color: var(--ui-text-primary);
@@ -297,7 +297,7 @@ const hostState = computed(() =>
 
 [data-component~="ui-card"][data-ui-card-state~="tone=danger"] {
   border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border-default));
-  border-inline-start: 4px solid var(--ui-danger);
+  border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger);
   background: var(--ui-danger-soft);
 }
 

package/vue/UiCheckbox.vue

@@ -384,7 +384,7 @@ input {
   inline-size: var(--_ui-checkbox-size, 1.125rem);
   block-size: var(--_ui-checkbox-size, 1.125rem);
   margin: 0.125em 0 0;
-  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-radius-sm);
   background: var(--ui-control-surface, var(--ui-surface-default));
   box-shadow: var(--ui-control-inset);
@@ -461,8 +461,8 @@ input:hover:enabled {
 }
 
 input:focus-visible {
-  outline: 2px solid var(--ui-focus-ring, var(--ui-accent-solid));
-  outline-offset: 2px;
+  outline: var(--ui-focus-width) solid var(--ui-focus-ring, var(--ui-accent-solid));
+  outline-offset: var(--ui-focus-width);
 }
 
 [data-component~="ui-checkbox"][data-ui-checkbox-state~="invalid"] input {

package/vue/UiCombobox.vue

@@ -1747,7 +1747,7 @@ label {
   flex: 1 1 auto;
   display: flex;
   min-inline-size: 0;
-  border: 1px solid var(--ui-control-border, var(--ui-border-default));
+  border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-default));
   border-radius: var(--_ui-combobox-radius, var(--ui-field-radius, var(--ui-radius-md)));
   background: var(--ui-control-surface, var(--ui-surface-default));
   box-shadow: var(--ui-control-inset);
@@ -1866,7 +1866,8 @@ button:hover:enabled {
 button:focus-visible {
   outline: none;
   background: var(--ui-surface-muted);
-  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);
 }
 input:disabled, button:disabled {
   color: var(--ui-disabled-text);
@@ -1890,7 +1891,7 @@ input:disabled, button:disabled {
   overflow: auto;
   margin: 0;
   padding: var(--ui-space-1);
-  border: 1px solid
+  border: var(--ui-border-width) solid
     var(--_ui-combobox-popup-border, var(--ui-overlay-border, var(--ui-border-strong)));
   border-radius: var(--_ui-combobox-popup-radius, var(--ui-overlay-radius, var(--ui-radius-md)));
   background: var(
@@ -1912,7 +1913,7 @@ input:disabled, button:disabled {
 }
 .primary {
   display: block;
-  color: var(--_ui-combobox-option-text, var(--ui-text-primary));
+  color: var(--_ui-combobox-option-text, inherit);
   font-weight: 500;
 }
 /* A row with a tag or a description: the label and its tag on one line, the description under them. */
@@ -2003,7 +2004,7 @@ input:disabled, button:disabled {
 }
 [data-component~="ui-combobox"][data-ui-combobox-state~="multiple"][data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"]
   input {
-  min-block-size: calc(var(--_row) - 2px - 2 * var(--ui-space-0-5));
+  min-block-size: calc(var(--_row) - 2 * var(--ui-border-width) - 2 * var(--ui-space-0-5));
   padding: 0 var(--ui-space-1);
 }
 /* A large multiple field starts at the large control height, as sm starts at the small one. */
@@ -2013,7 +2014,9 @@ input:disabled, button:disabled {
 }
 [data-component~="ui-combobox"][data-ui-combobox-state~="multiple"][data-component~="ui-combobox"][data-ui-combobox-state~="size=lg"]
   input {
-  min-block-size: calc(var(--ui-control-size-lg) - 2px - 2 * var(--ui-space-1));
+  min-block-size: calc(
+    var(--ui-control-size-lg) - 2 * var(--ui-border-width) - 2 * var(--ui-space-1)
+  );
 }
 .item {
   appearance: none;
@@ -2031,8 +2034,8 @@ input:disabled, button:disabled {
   cursor: default;
 }
 .item:focus-visible {
-  outline: 2px solid var(--ui-focus-ring);
-  outline-offset: 1px;
+  outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+  outline-offset: var(--ui-border-width);
 }
 .item:disabled {
   color: var(--ui-disabled-text);

package/vue/UiContextMenu.vue

@@ -245,7 +245,7 @@ useComponentHost(() => import('../components/ui-context-menu/ui-context-menu.js'
     --_ui-context-menu-surface,
     var(--ui-overlay-surface, var(--ui-surface-elevated))
   );
-  border: 1px solid
+  border: var(--ui-border-width) solid
     var(--_ui-context-menu-border, var(--ui-overlay-border, var(--ui-border-strong)));
   border-radius: var(--_ui-context-menu-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
   box-shadow: var(
@@ -270,7 +270,7 @@ useComponentHost(() => import('../components/ui-context-menu/ui-context-menu.js'
   block-size: 0;
   margin: var(--ui-space-1) 0;
   border: 0;
-  border-block-start: 1px solid var(--ui-border-divider);
+  border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
 }
 
 .menu:popover-open {

package/vue/UiDescriptionList.vue

@@ -201,7 +201,7 @@ const hostState = computed(() =>
   --_ui-description-align: flex-start;
   --_ui-description-value-size: var(--ui-font-size-lg);
   --_ui-description-padding: var(--_tile-padding);
-  --_ui-description-border-width: 1px;
+  --_ui-description-border-width: var(--ui-border-width);
   --_ui-description-border-color: var(--ui-border-strong);
   --_gap: var(--ui-space-3);
   --_gap-compact: var(--ui-space-2);

package/vue/UiDialog.vue

@@ -377,7 +377,8 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
   overflow: hidden;
   flex-direction: column;
   background: var(--ui-dialog-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
-  border: 1px solid var(--ui-dialog-border, var(--ui-overlay-border, var(--ui-border-strong)));
+  border: var(--ui-border-width) solid
+    var(--ui-dialog-border, var(--ui-overlay-border, var(--ui-border-strong)));
   border-radius: var(--ui-dialog-radius, var(--ui-overlay-radius, var(--ui-radius-dialog)));
   box-shadow: var(
     --ui-dialog-shadow,
@@ -488,8 +489,8 @@ header {
 }
 
 .close:focus-visible {
-  outline: 2px solid var(--ui-focus-ring);
-  outline-offset: 2px;
+  outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+  outline-offset: var(--ui-focus-width);
 }
 
 /* A touch target, like Button on coarse pointers. */

package/vue/UiDisclosure.d.ts

@@ -1,9 +1,11 @@
 import type { PropType } from 'vue';
-declare var __VLS_1: {}, __VLS_3: {};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
 type __VLS_Slots = {} & {
     summary?: (props: typeof __VLS_1) => any;
 } & {
-    default?: (props: typeof __VLS_3) => any;
+    indicator?: (props: typeof __VLS_3) => any;
+} & {
+    default?: (props: typeof __VLS_5) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     density: {
@@ -14,6 +16,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<boolean | null>;
         default: boolean;
     };
+    fill: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
     headingLevel: {
         type: PropType<number | null>;
         default: number;
@@ -51,6 +57,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<boolean | null>;
         default: boolean;
     };
+    fill: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
     headingLevel: {
         type: PropType<number | null>;
         default: number;
@@ -80,6 +90,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }>) => any) | undefined;
 }>, {
+    fill: boolean | null;
     summary: string | null;
     name: string | null;
     open: boolean | null;

package/vue/UiDisclosure.vue

@@ -25,6 +25,14 @@ const propValidityContract = {
         'Disables the trigger and mutes its text, so the disclosure keeps its current state and the user cannot toggle it.',
       default: false,
     },
+    fill: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'fill' },
+      description:
+        'In a column with a bounded height, an open disclosure fills the remaining space and keeps its trigger visible. The content slot can contain a Scroll Area.\n      Closed items keep only their trigger height.',
+      default: false,
+    },
     headingLevel: {
       type: { kind: 'terminal', name: 'integer' },
       required: false,
@@ -65,6 +73,7 @@ const props = defineProps({
     default: 'comfortable',
   },
   disabled: { type: null as unknown as PropType<boolean | null>, default: false },
+  fill: { type: null as unknown as PropType<boolean | null>, default: false },
   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 },
@@ -73,6 +82,7 @@ const props = defineProps({
 const acceptedProps: Record<string, unknown> = {
   density: 'comfortable',
   disabled: false,
+  fill: false,
   headingLevel: 0,
   name: '',
   open: false,
@@ -93,6 +103,13 @@ const checkedProps = computed(() => ({
     'disabled',
     acceptedProps,
   ) as boolean,
+  fill: checkedProp<boolean>(
+    props['fill'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'fill',
+    acceptedProps,
+  ) as boolean,
   headingLevel: checkedProp<number>(
     props['headingLevel'],
     { kind: 'terminal', name: 'integer' },
@@ -249,6 +266,7 @@ const hostState = computed(() =>
     checkedProps.value.density != null
     && `density=${encodeURIComponent(checkedProps.value.density)}`,
     internalOpen.value && 'internalOpen',
+    checkedProps.value.fill && 'fill',
   ].filter(Boolean).join(' ')
 )
 
@@ -286,7 +304,7 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
       ? (incoming[name] ?? incoming[kebab] ?? null)
       : null
   },
-  propNames: ['density', 'disabled', 'headingLevel', 'name', 'open', 'summary'],
+  propNames: ['density', 'disabled', 'fill', 'headingLevel', 'name', 'open', 'summary'],
   propValidity: (name: string) =>
     propValidityState({ contract: propValidityContract, values: { ...props } }, name),
   refs: { trigger: triggerElement, panel: panelElement },
@@ -301,6 +319,7 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
+    :data-fill="reflectedProp('fill', 'fill', checkedProps.fill, undefined, false)"
     :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)"
@@ -318,7 +337,7 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
         ref="trigger"
       >
         <span class="summary"><slot name="summary">{{ checkedProps.summary }}</slot></span>
-        <span class="chevron" aria-hidden="true"></span>
+        <slot name="indicator"><span class="chevron" aria-hidden="true"></span></slot>
       </button>
     </div>
     <div class="panel" :id="guardedBinding4" ref="panel">
@@ -366,7 +385,7 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
   display: block;
   inline-size: 100%;
   overflow: clip;
-  border-block-end: 1px solid var(--ui-border-divider);
+  border-block-end: var(--ui-border-width) solid var(--ui-border-divider);
   color: var(--ui-text-primary);
 }
 
@@ -395,7 +414,8 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
 }
 .trigger:focus-visible {
   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);
 }
 .trigger:disabled {
   color: var(--ui-disabled-text);
@@ -434,6 +454,43 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
   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;
+  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;
+}
+[data-component~="ui-disclosure"][data-ui-disclosure-state~="fill"] .heading {
+  flex: none;
+}
+[data-component~="ui-disclosure"][data-ui-disclosure-state~="fill"] .trigger {
+  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;
+  flex-direction: column;
+  flex: 1;
+  min-block-size: 0;
+  padding: 0;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .panel,
   .chevron {

package/vue/UiEditable.vue

@@ -464,7 +464,7 @@ useComponentHost(() => import('../components/ui-editable/ui-editable.js'), {
   min-block-size: var(--ui-control-size-sm);
   margin: 0;
   padding: var(--ui-space-1) var(--ui-space-2);
-  border: 1px solid transparent;
+  border: var(--ui-border-width) solid transparent;
   border-radius: var(--ui-radius-md);
   font: inherit;
   line-height: var(--ui-line-height-md);
@@ -537,7 +537,7 @@ useComponentHost(() => import('../components/ui-editable/ui-editable.js'), {
 .actions button {
   min-block-size: var(--ui-control-size-sm);
   padding: 0 var(--ui-space-3);
-  border: 1px solid var(--ui-border-strong);
+  border: var(--ui-border-width) solid var(--ui-border-strong);
   border-radius: var(--ui-radius-md);
   background: var(--ui-surface-elevated);
   background-image: var(--ui-raised-highlight);

package/vue/UiEditorInsertTableGrid.vue

@@ -322,7 +322,7 @@ function uniqueKeys<T>(
 [data-component~="ui-editor-insert-table-grid"] {
   padding: var(--ui-space-3);
   background: var(--ui-surface);
-  border: 1px solid var(--ui-border-strong);
+  border: var(--ui-border-width) solid var(--ui-border-strong);
   border-radius: var(--ui-radius-md);
   box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
 }
@@ -371,8 +371,8 @@ function uniqueKeys<T>(
   width: 1.25rem;
   height: 1.25rem;
   padding: 0;
-  border: 1px solid var(--ui-control-border);
-  border-radius: 2px;
+  border: var(--ui-border-width) solid var(--ui-control-border);
+  border-radius: var(--ui-radius-sm);
   background: var(--ui-surface);
   cursor: pointer;
 }
@@ -383,8 +383,8 @@ function uniqueKeys<T>(
 }
 
 .cell:focus-visible {
-  outline: 2px solid var(--ui-focus-ring);
-  outline-offset: -2px;
+  outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+  outline-offset: calc(-1 * var(--ui-focus-width));
 }
 
 .header {

package/vue/UiEditorMentionMenu.vue

@@ -408,7 +408,7 @@ useComponentHost(() => import('../components/ui-editor-mention-menu/ui-editor-me
   overflow: hidden;
   flex-direction: column;
   background: var(--ui-surface);
-  border: 1px solid var(--ui-border-strong);
+  border: var(--ui-border-width) solid var(--ui-border-strong);
   border-radius: var(--ui-radius-dialog);
   box-shadow: var(--ui-shadow-lg, 0 8px 24px rgb(0 0 0 / 0.12));
 }
@@ -420,7 +420,7 @@ useComponentHost(() => import('../components/ui-editor-mention-menu/ui-editor-me
   gap: var(--ui-space-3);
   padding: var(--ui-space-2) var(--ui-space-3);
   color: var(--ui-text-secondary);
-  border-bottom: 1px solid var(--ui-border-divider);
+  border-bottom: var(--ui-border-width) solid var(--ui-border-divider);
   font-size: var(--ui-font-size-xs);
   font-weight: var(--ui-font-semibold);
 }

package/vue/UiEditorSlashMenu.vue

@@ -359,7 +359,7 @@ useComponentHost(() => import('../components/ui-editor-slash-menu/ui-editor-slas
 
 [data-component~="ui-editor-slash-menu"] {
   background: var(--ui-surface);
-  border: 1px solid var(--ui-border-strong);
+  border: var(--ui-border-width) solid var(--ui-border-strong);
   border-radius: var(--ui-radius-dialog);
   box-shadow: var(--ui-shadow-lg, 0 8px 24px rgb(0 0 0 / 0.12));
   overflow: hidden;
@@ -379,7 +379,7 @@ useComponentHost(() => import('../components/ui-editor-slash-menu/ui-editor-slas
   align-items: center;
   gap: var(--ui-space-2);
   padding: var(--ui-space-3) var(--ui-space-4);
-  border-bottom: 1px solid var(--ui-border-divider);
+  border-bottom: var(--ui-border-width) solid var(--ui-border-divider);
   font-size: var(--ui-font-size-xs);
   color: var(--ui-text-muted);
   font-weight: var(--ui-font-semibold);
@@ -463,7 +463,7 @@ useComponentHost(() => import('../components/ui-editor-slash-menu/ui-editor-slas
   width: 32px;
   height: 32px;
   background: var(--ui-surface-hover);
-  border: 1px solid var(--ui-border);
+  border: var(--ui-border-width) solid var(--ui-border);
   border-radius: var(--ui-radius-md);
   font-size: var(--ui-font-size-sm);
   font-weight: var(--ui-font-bold);
@@ -510,7 +510,7 @@ useComponentHost(() => import('../components/ui-editor-slash-menu/ui-editor-slas
 
 .footer {
   padding: var(--ui-space-2) var(--ui-space-3);
-  border-top: 1px solid var(--ui-border-divider);
+  border-top: var(--ui-border-width) solid var(--ui-border-divider);
   font-size: var(--ui-font-size-xs);
   color: var(--ui-text-muted);
 }
@@ -522,8 +522,8 @@ useComponentHost(() => import('../components/ui-editor-slash-menu/ui-editor-slas
   font-family: var(--ui-font-family-mono, ui-monospace, monospace);
   font-size: var(--ui-font-size-2xs);
   background: var(--ui-surface-hover);
-  border: 1px solid var(--ui-border);
-  border-radius: 3px;
+  border: var(--ui-border-width) solid var(--ui-border);
+  border-radius: var(--ui-radius-sm);
   padding: 0 3px;
   color: var(--ui-text-secondary);
 }

package/vue/UiEditorSlashMenuItem.vue

@@ -211,7 +211,7 @@ if (
   flex: 0 0 auto;
   color: var(--ui-text-secondary);
   background: var(--ui-surface-hover);
-  border: 1px solid var(--ui-border);
+  border: var(--ui-border-width) solid var(--ui-border);
   border-radius: var(--ui-radius-md);
 }
 

package/vue/UiEditorTableContextMenu.vue

@@ -552,7 +552,7 @@ function uniqueKeys<T>(
   max-height: min(28rem, calc(100vh - 24px));
   padding: var(--ui-space-2);
   background: var(--ui-surface);
-  border: 1px solid var(--ui-border-strong);
+  border: var(--ui-border-width) solid var(--ui-border-strong);
   border-radius: var(--ui-radius-lg);
   box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
   display: flex;
@@ -619,7 +619,7 @@ function uniqueKeys<T>(
   width: 1rem;
   height: 1rem;
   border-radius: var(--ui-radius-round);
-  border: 1px solid var(--ui-border);
+  border: var(--ui-border-width) solid var(--ui-border);
   background: var(--_swatch, #fff);
   box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35);
   flex-shrink: 0;