@threadlabs/looma 0.26.0 → 0.26.2

package/vue/UiContainer.d.ts

@@ -4,6 +4,10 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    fill: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
     gutters: {
         type: PropType<"s" | "m" | "l" | null>;
         default: null;
@@ -13,6 +17,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: null;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    fill: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
     gutters: {
         type: PropType<"s" | "m" | "l" | null>;
         default: null;
@@ -22,6 +30,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: null;
     };
 }>> & Readonly<{}>, {
+    fill: boolean | null;
     gutters: "s" | "m" | "l" | null;
     measure: "narrow" | "wide" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/vue/UiContainer.vue

@@ -8,6 +8,14 @@ defineOptions({ inheritAttrs: false })
 
 const propValidityContract = {
   props: {
+    fill: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'fill' },
+      description:
+        'Keeps the readable width while filling available layout space. Uses a flex column so scrolling children can shrink inside a bounded flex or grid parent.\n      Omit it to keep the usual block layout.',
+      default: false,
+    },
     gutters: {
       type: { kind: 'terminal', name: 'keyword' },
       required: false,
@@ -27,11 +35,19 @@ const propValidityContract = {
   },
 } as const
 const props = defineProps({
+  fill: { type: null as unknown as PropType<boolean | null>, default: false },
   gutters: { type: null as unknown as PropType<'s' | 'm' | 'l' | null>, default: null },
   measure: { type: null as unknown as PropType<'narrow' | 'wide' | null>, default: null },
 })
-const acceptedProps: Record<string, unknown> = { gutters: null, measure: null }
+const acceptedProps: Record<string, unknown> = { fill: false, gutters: null, measure: null }
 const checkedProps = computed(() => ({
+  fill: checkedProp<boolean>(
+    props['fill'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'fill',
+    acceptedProps,
+  ) as boolean,
   gutters: checkedProp<'s' | 'm' | 'l'>(
     props['gutters'],
     { kind: 'terminal', name: 'keyword' },
@@ -108,6 +124,7 @@ const hostState = computed(() =>
     checkedProps.value.measure && 'measure',
     checkedProps.value.measure != null
     && `measure=${encodeURIComponent(checkedProps.value.measure)}`,
+    checkedProps.value.fill && 'fill',
     checkedProps.value.gutters && 'gutters',
     checkedProps.value.gutters != null
     && `gutters=${encodeURIComponent(checkedProps.value.gutters)}`,
@@ -120,6 +137,7 @@ const hostState = computed(() =>
     data-component="ui-container"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
+    :data-fill="reflectedProp('fill', 'fill', checkedProps.fill, undefined, false)"
     :data-gutters="reflectedProp('gutters', 'gutters', checkedProps.gutters, undefined, false)"
     :data-measure="reflectedProp('measure', 'measure', checkedProps.measure, undefined, false)"
     :data-ui-container-state="hostState || undefined"
@@ -152,6 +170,14 @@ const hostState = computed(() =>
 [data-component~="ui-container"][data-ui-container-state~="measure=narrow"] {
   --_container-measure: 45ch;
 }
+[data-component~="ui-container"][data-ui-container-state~="fill"] {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-inline-size: 0;
+  min-block-size: 0;
+}
 [data-component~="ui-container"][data-ui-container-state~="measure=wide"] {
   --_container-measure: 80ch;
 }

package/vue/UiDialog.vue

@@ -350,7 +350,7 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
       <h2 v-if="checkedProps.label" class="title">{{ checkedProps.label }}</h2>
       <button class="close" type="button" aria-label="Close" ref="closeElement"></button>
     </header>
-    <UiScrollArea class="body"><slot /></UiScrollArea>
+    <div class="body"><UiScrollArea :trim="true"><slot /></UiScrollArea></div>
     <footer><slot name="actions" /></footer>
   </dialog>
 </template>
@@ -453,7 +453,7 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
   display: none;
 }
 
-/* Header and actions stay pinned; only the body scrolls when content is long. */
+/* Own the layout wrapper; nested component roots are outside these scoped rules. */
 header {
   display: flex;
   align-items: center;
@@ -534,9 +534,11 @@ html[data-ui-input-modality="touch"] [data-component~="ui-dialog"] .close {
 }
 
 .body {
+  display: flex;
+  flex-direction: column;
   flex: 1 1 auto;
   min-block-size: 0;
-  padding: var(--ui-space-5);
+  padding: var(--ui-space-3) var(--ui-space-5) var(--ui-space-5);
 }
 
 footer {
@@ -545,7 +547,7 @@ footer {
   flex-wrap: wrap;
   justify-content: flex-end;
   gap: var(--ui-space-2);
-  padding: var(--ui-space-3) var(--ui-space-5);
+  padding: 0 var(--ui-space-5) var(--ui-space-5);
 }
 
 footer:empty {

package/vue/UiIconButton.d.ts

@@ -36,6 +36,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"sm" | "md" | "lg" | null>;
         default: string;
     };
+    tone: {
+        type: PropType<"accent" | "neutral" | null>;
+        default: null;
+    };
     variant: {
         type: PropType<"ghost" | "outline" | "solid" | null>;
         default: string;
@@ -73,6 +77,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"sm" | "md" | "lg" | null>;
         default: string;
     };
+    tone: {
+        type: PropType<"accent" | "neutral" | null>;
+        default: null;
+    };
     variant: {
         type: PropType<"ghost" | "outline" | "solid" | null>;
         default: string;
@@ -81,6 +89,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     label: string | null;
     round: boolean | null;
     size: "sm" | "md" | "lg" | null;
+    tone: "neutral" | "accent" | null;
     variant: "solid" | "outline" | "ghost" | null;
     disabled: boolean | null;
     loading: boolean | null;

package/vue/UiIconButton.vue

@@ -71,6 +71,14 @@ const propValidityContract = {
       values: ['sm', 'md', 'lg'],
       default: 'md',
     },
+    tone: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'tone' },
+      description:
+        'Colour for every variant. When omitted, ghost and outline keep their neutral appearance and solid keeps its accent fill. Set accent for a coloured action\n      or neutral for a quiet one. Native aria-pressed="true" keeps an outline toggle visibly pressed; the consumer owns that state.',
+      values: ['accent', 'neutral'],
+    },
     variant: {
       type: { kind: 'terminal', name: 'keyword' },
       required: false,
@@ -91,6 +99,7 @@ const props = defineProps({
   pending: { type: null as unknown as PropType<boolean | null>, default: false },
   round: { type: null as unknown as PropType<boolean | null>, default: false },
   size: { type: null as unknown as PropType<'sm' | 'md' | 'lg' | null>, default: 'md' },
+  tone: { type: null as unknown as PropType<'accent' | 'neutral' | null>, default: null },
   variant: {
     type: null as unknown as PropType<'ghost' | 'outline' | 'solid' | null>,
     default: 'ghost',
@@ -105,6 +114,7 @@ const acceptedProps: Record<string, unknown> = {
   pending: false,
   round: false,
   size: 'md',
+  tone: null,
   variant: 'ghost',
 }
 const checkedProps = computed(() => ({
@@ -164,6 +174,13 @@ const checkedProps = computed(() => ({
     'size',
     acceptedProps,
   ) as 'sm' | 'md' | 'lg',
+  tone: checkedProp<'accent' | 'neutral'>(
+    props['tone'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'tone',
+    acceptedProps,
+  ),
   variant: checkedProp<'ghost' | 'outline' | 'solid'>(
     props['variant'],
     { kind: 'terminal', name: 'keyword' },
@@ -269,6 +286,8 @@ if (
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
   [
+    checkedProps.value.tone && 'tone',
+    checkedProps.value.tone != null && `tone=${encodeURIComponent(checkedProps.value.tone)}`,
     checkedProps.value.anticipatory && 'anticipatory',
     checkedProps.value.variant && 'variant',
     checkedProps.value.variant != null
@@ -308,6 +327,7 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     'pending',
     'round',
     'size',
+    'tone',
     'variant',
   ],
   propValidity: (name: string) =>
@@ -364,6 +384,7 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
     :data-pending="reflectedProp('pending', 'pending', checkedProps.pending, undefined, false)"
     :data-round="reflectedProp('round', 'round', checkedProps.round, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-ui-icon-button-state="hostState || undefined"
     ref="root"
@@ -461,6 +482,25 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
   color: var(--ui-text-secondary);
 }
 
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="tone=accent"] {
+  --_icon-button-border: var(--ui-accent-solid);
+  --_icon-button-hover-border: var(--ui-accent-hover);
+  --_icon-button-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
+  --_icon-button-outline-surface: color-mix(
+    in srgb,
+    var(--ui-accent-solid) 5%,
+    var(--ui-surface-default)
+  );
+  color: var(--_icon-button-text);
+}
+
+/* Omitted tone retains the existing accent solid; explicit neutral is additive. */
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="tone=neutral"] {
+  --_icon-button-solid-surface: var(--ui-text-primary);
+  --_icon-button-solid-hover-surface: var(--ui-text-primary);
+  --_icon-button-solid-text: var(--ui-surface-default);
+}
+
 [data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"] {
   position: relative;
 }
@@ -495,13 +535,13 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
 }
 
 @media (hover: hover) and (pointer: fine) {
-  [data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"]:not([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="loading"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"], :disabled, [data-ui-proximity="near"], :hover, :focus-visible) {
+  [data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"]:not([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="loading"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible) {
     border-color: transparent;
     background-color: transparent;
     box-shadow: none;
   }
 
-  [data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"]:not([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="loading"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"], :disabled, [data-ui-proximity="near"], :hover, :focus-visible)
+  [data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"]:not([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="loading"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)
     .content {
     opacity: 0;
     transform: scale(0.65);
@@ -509,7 +549,7 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
   }
 }
 
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"]:is([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-ui-proximity="near"], :hover, :focus-visible)::before {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"]:is([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)::before {
   opacity: 0;
 }
 
@@ -622,17 +662,26 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"]::after {
 }
 
 [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"] {
-  border-color: var(--ui-icon-button-border, var(--ui-control-border, var(--ui-border-strong)));
-  background-color: var(--ui-icon-button-outline-surface, var(--ui-surface-default));
+  border-color: var(
+    --ui-icon-button-border,
+    var(--_icon-button-border, var(--ui-control-border, var(--ui-border-strong)))
+  );
+  background-color: var(
+    --ui-icon-button-outline-surface,
+    var(--_icon-button-outline-surface, var(--ui-surface-default))
+  );
   background-image: var(--ui-raised-highlight);
-  color: var(--ui-icon-button-outline-text, var(--ui-text-primary));
+  color: var(--ui-icon-button-outline-text, var(--_icon-button-text, var(--ui-text-primary)));
   box-shadow: var(--ui-raised);
 }
 
 [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"] {
-  background-color: var(--ui-icon-button-solid-surface, var(--ui-accent-solid));
+  background-color: var(
+    --ui-icon-button-solid-surface,
+    var(--_icon-button-solid-surface, var(--ui-accent-solid))
+  );
   background-image: var(--ui-raised-highlight);
-  color: var(--ui-icon-button-solid-text, var(--ui-text-on-accent));
+  color: var(--ui-icon-button-solid-text, var(--_icon-button-solid-text, var(--ui-text-on-accent)));
   box-shadow: var(
     --ui-icon-button-solid-shadow,
     0 1px 2px color-mix(in srgb, var(--ui-accent-solid) 18%, transparent)
@@ -645,18 +694,26 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"]::after {
     --ui-icon-button-hover-surface,
     color-mix(in srgb, currentColor 8%, transparent)
   );
-  color: var(--ui-icon-button-hover-text, var(--ui-text-primary));
+  color: var(--ui-icon-button-hover-text, var(--_icon-button-text, var(--ui-text-primary)));
 }
 
 [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"]:hover:enabled:not([aria-disabled="true"]) {
   border-color: var(
     --ui-icon-button-hover-border,
-    var(--ui-control-border-hover, var(--ui-control-border))
+    var(--_icon-button-hover-border, var(--ui-control-border-hover, var(--ui-control-border)))
   );
 }
 
 [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"]:hover:enabled:not([aria-disabled="true"]) {
-  background-color: var(--ui-icon-button-solid-hover-surface, var(--ui-accent-hover));
+  background-color: var(
+    --ui-icon-button-solid-hover-surface,
+    var(--_icon-button-solid-hover-surface, var(--ui-accent-hover))
+  );
+}
+
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-ui-icon-button-state~="tone=accent"]:hover:enabled:not([aria-disabled="true"]),
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-ui-icon-button-state~="tone=neutral"]:hover:enabled:not([aria-disabled="true"]) {
+  color: var(--ui-icon-button-solid-text, var(--_icon-button-solid-text, var(--ui-text-on-accent)));
 }
 
 [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=ghost"][aria-expanded="true"]:enabled:not([aria-disabled="true"]) {
@@ -664,7 +721,17 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"]::after {
     --ui-icon-button-active-surface,
     color-mix(in srgb, currentColor 16%, transparent)
   );
-  color: var(--ui-icon-button-hover-text, var(--ui-text-primary));
+  color: var(--ui-icon-button-hover-text, var(--_icon-button-text, var(--ui-text-primary)));
+  box-shadow: var(--ui-pressed);
+}
+
+/* Native toggle state persists after pointer release, including during loading. */
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled {
+  background-color: var(
+    --ui-icon-button-active-surface,
+    color-mix(in srgb, currentColor 12%, var(--ui-surface-default))
+  );
+  background-image: none;
   box-shadow: var(--ui-pressed);
 }
 
@@ -698,6 +765,22 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"]::after {
   box-shadow: var(--ui-focus-halo);
 }
 
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled:focus-visible {
+  box-shadow:
+    var(--ui-pressed),
+    var(--ui-focus-halo);
+}
+
+@media (forced-colors: active) {
+  [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled {
+    outline: var(--ui-focus-width) solid Highlight;
+    outline-offset: calc(-2 * var(--ui-focus-width));
+  }
+  [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled:focus-visible {
+    outline-offset: var(--ui-focus-width);
+  }
+}
+
 /* Disabled is a flat neutral control, independent of the active variant's tone. */
 [data-component~="ui-icon-button"]:disabled {
   border-color: var(--ui-disabled-border);

package/vue/UiScrollArea.d.ts

@@ -16,6 +16,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"content" | "sm" | "md" | "lg" | null>;
         default: string;
     };
+    trim: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     fill: {
         type: PropType<boolean | null>;
@@ -29,9 +33,14 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"content" | "sm" | "md" | "lg" | null>;
         default: string;
     };
+    trim: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
 }>> & Readonly<{}>, {
     fill: boolean | null;
     size: "sm" | "md" | "content" | "lg" | null;
+    trim: boolean | null;
     orientation: "vertical" | "horizontal" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/vue/UiScrollArea.vue

@@ -35,6 +35,14 @@ const propValidityContract = {
       values: ['content', 'sm', 'md', 'lg'],
       default: 'content',
     },
+    trim: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'trim' },
+      description:
+        'Removes the outer block margins of the first and last projected items when the surrounding panel owns its edge padding. Margins between items remain\n      intact.',
+      default: false,
+    },
   },
 } as const
 const props = defineProps({
@@ -47,11 +55,13 @@ const props = defineProps({
     type: null as unknown as PropType<'content' | 'sm' | 'md' | 'lg' | null>,
     default: 'content',
   },
+  trim: { type: null as unknown as PropType<boolean | null>, default: false },
 })
 const acceptedProps: Record<string, unknown> = {
   fill: false,
   orientation: 'vertical',
   size: 'content',
+  trim: false,
 }
 const checkedProps = computed(() => ({
   fill: checkedProp<boolean>(
@@ -75,6 +85,13 @@ const checkedProps = computed(() => ({
     'size',
     acceptedProps,
   ) as 'content' | 'sm' | 'md' | 'lg',
+  trim: checkedProp<boolean>(
+    props['trim'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'trim',
+    acceptedProps,
+  ) as boolean,
 }))
 void checkedProps.value
 watchSyncEffect(() => {
@@ -137,6 +154,7 @@ if (
 const hostState = computed(() =>
   [
     checkedProps.value.fill && 'fill',
+    checkedProps.value.trim && 'trim',
     checkedProps.value.orientation && 'orientation',
     checkedProps.value.orientation != null
     && `orientation=${encodeURIComponent(checkedProps.value.orientation)}`,
@@ -162,7 +180,7 @@ useComponentHost(() => import('../components/ui-scroll-area/ui-scroll-area.js'),
       ? (incoming[name] ?? incoming[kebab] ?? null)
       : null
   },
-  propNames: ['fill', 'orientation', 'size'],
+  propNames: ['fill', 'orientation', 'size', 'trim'],
   propValidity: (name: string) =>
     propValidityState({ contract: propValidityContract, values: { ...props } }, name),
   refs: { content: contentElement },
@@ -177,6 +195,7 @@ useComponentHost(() => import('../components/ui-scroll-area/ui-scroll-area.js'),
     :data-fill="reflectedProp('fill', 'fill', checkedProps.fill, undefined, false)"
     :data-orientation="reflectedProp('orientation', 'orientation', checkedProps.orientation, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-trim="reflectedProp('trim', 'trim', checkedProps.trim, undefined, false)"
     :data-ui-scroll-area-state="hostState || undefined"
     ref="root"
   >
@@ -216,6 +235,19 @@ useComponentHost(() => import('../components/ui-scroll-area/ui-scroll-area.js'),
   display: flow-root;
 }
 
+/* Trim projected edges without changing spacing inside an item. */
+[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="trim"]
+  .content
+  > :slotted(:first-child) {
+  margin-block-start: 0;
+}
+
+[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="trim"]
+  .content
+  > :slotted(:last-child) {
+  margin-block-end: 0;
+}
+
 [data-component~="ui-scroll-area"][data-ui-scroll-area-state~="orientation=horizontal"] {
   overflow-x: auto;
   overflow-y: hidden;

package/vue/chunks/UiBadge.js

@@ -46,12 +46,13 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 				},
 				required: false,
 				target: { attribute: "shape" },
-				description: "Silhouette. pill is rounded at both ends; tag is a pointed label. dot is a compact circular signal with visually hidden text: include a state label, or set\n      aria-hidden when the surrounding control already names that state. square is a fixed rounded square for an icon or single glyph beside a heading; hide a\n      decorative icon when adjacent words name it.",
+				description: "Silhouette. pill is rounded at both ends; tag is a pointed label. dot is a compact circular signal with visually hidden text: include a state label, or set\n      aria-hidden when the surrounding control already names that state. square is a fixed rounded square for an icon or single glyph beside a heading; hide a\n      decorative icon when adjacent words name it. circle frames a visible single glyph or icon in a fixed circle, centered in both directions.",
 				values: [
 					"pill",
 					"tag",
 					"dot",
-					"square"
+					"square",
+					"circle"
 				],
 				default: "pill"
 			},
@@ -62,7 +63,7 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 				},
 				required: false,
 				target: { attribute: "size" },
-				description: "Scale. xs is a compact count beside small controls; md is the usual text badge. A square is 24px at xs and 32px at md with default spacing.",
+				description: "Scale. xs is a compact count beside small controls; md is the usual text badge. A square is 24px at xs and 32px at md with default spacing. A circle is\n      16px at xs and 24px at md.",
 				values: ["xs", "md"],
 				default: "md"
 			},
@@ -173,6 +174,6 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-a45f2b52"]]);
+}), [["__scopeId", "data-v-c96818e7"]]);
 //#endregion
 export { UiBadge_default as t };

package/vue/chunks/UiContainer.js

@@ -3,6 +3,7 @@ import { a as vPropValidity, n as checkedProp } from "./props.js";
 import { computed, createElementBlock, defineComponent, getCurrentInstance, mergeProps, openBlock, renderSlot, unref, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiContainer.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
+	"data-fill",
 	"data-gutters",
 	"data-measure",
 	"data-ui-container-state"
@@ -13,6 +14,10 @@ var UiContainer_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 	inheritAttrs: false,
 	__name: "UiContainer",
 	props: {
+		fill: {
+			type: null,
+			default: false
+		},
 		gutters: {
 			type: null,
 			default: null
@@ -24,6 +29,16 @@ var UiContainer_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 	},
 	setup(__props) {
 		const propValidityContract = { props: {
+			fill: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "fill" },
+				description: "Keeps the readable width while filling available layout space. Uses a flex column so scrolling children can shrink inside a bounded flex or grid parent.\n      Omit it to keep the usual block layout.",
+				default: false
+			},
 			gutters: {
 				type: {
 					kind: "terminal",
@@ -51,10 +66,15 @@ var UiContainer_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 		} };
 		const props = __props;
 		const acceptedProps = {
+			fill: false,
 			gutters: null,
 			measure: null
 		};
 		const checkedProps = computed(() => ({
+			fill: checkedProp(props["fill"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "fill", acceptedProps),
 			gutters: checkedProp(props["gutters"], {
 				kind: "terminal",
 				name: "keyword"
@@ -92,11 +112,13 @@ var UiContainer_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 		const hostState = computed(() => [
 			checkedProps.value.measure && "measure",
 			checkedProps.value.measure != null && `measure=${encodeURIComponent(checkedProps.value.measure)}`,
+			checkedProps.value.fill && "fill",
 			checkedProps.value.gutters && "gutters",
 			checkedProps.value.gutters != null && `gutters=${encodeURIComponent(checkedProps.value.gutters)}`
 		].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
 			return withDirectives((openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-container" }, nativeAttrs(_ctx.$attrs), {
+				"data-fill": reflectedProp("fill", "fill", checkedProps.value.fill, void 0, false),
 				"data-gutters": reflectedProp("gutters", "gutters", checkedProps.value.gutters, void 0, false),
 				"data-measure": reflectedProp("measure", "measure", checkedProps.value.measure, void 0, false),
 				"data-ui-container-state": hostState.value || void 0
@@ -106,6 +128,6 @@ var UiContainer_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-955318c7"]]);
+}), [["__scopeId", "data-v-d3919ea4"]]);
 //#endregion
 export { UiContainer_default as t };

package/vue/chunks/UiDialog.js

@@ -20,6 +20,7 @@ var _hoisted_2 = {
 	key: 0,
 	class: "title"
 };
+var _hoisted_3 = { class: "body" };
 var htmlNextAuthoredCheck2Reported = /* @__PURE__ */ new Set();
 function htmlNextAuthoredCheck2(accepted, location, message) {
 	if (!accepted && !htmlNextAuthoredCheck2Reported.has(location)) {
@@ -334,10 +335,10 @@ var UiDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 					ref_key: "closeElement",
 					ref: closeElement
 				}, null, 512)]),
-				createVNode(UiScrollArea_default, { class: "body" }, {
+				createElementVNode("div", _hoisted_3, [createVNode(UiScrollArea_default, { trim: true }, {
 					default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
 					_: 3
-				}),
+				})]),
 				createElementVNode("footer", null, [renderSlot(_ctx.$slots, "actions", {}, void 0, true)])
 			], 16, _hoisted_1)), [[unref(vPropValidity), {
 				contract: propValidityContract,
@@ -345,6 +346,6 @@ var UiDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-f11b295f"]]);
+}), [["__scopeId", "data-v-6d90ae32"]]);
 //#endregion
 export { UiDialog_default as t };