@threadlabs/looma 0.26.3 → 0.26.5

package/vue/UiBadge.vue

@@ -22,8 +22,8 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'size' },
       description:
-        'Scale. xs is compact; md is the usual text badge; lg adds room to fixed marks while retaining the usual text size. A square is 24px at xs, 32px at md and\n      40px at lg. A circle is 16px at xs, 24px at md and 32px at lg; use lg for short counts such as 30 or 99+.',
-      values: ['xs', 'md', 'lg'],
+        'Scale. xs is compact; sm keeps the usual badge geometry with compact text, fitting short counts such as 99+ inside a 24px circle. md is the usual text\n      badge; lg adds room to fixed marks while retaining the usual text size. A square is 24px at xs, 32px at sm and md, and 40px at lg. A circle is 16px at xs,\n      24px at sm and md, and 32px at lg.',
+      values: ['xs', 'sm', 'md', 'lg'],
       default: 'md',
     },
     tone: {
@@ -51,7 +51,7 @@ const props = defineProps({
     type: null as unknown as PropType<'pill' | 'tag' | 'dot' | 'square' | 'circle' | null>,
     default: 'pill',
   },
-  size: { type: null as unknown as PropType<'xs' | 'md' | 'lg' | null>, default: 'md' },
+  size: { type: null as unknown as PropType<'xs' | 'sm' | 'md' | 'lg' | null>, default: 'md' },
   tone: {
     type: null as unknown as PropType<
       'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger' | null
@@ -77,13 +77,13 @@ const checkedProps = computed(() => ({
     'shape',
     acceptedProps,
   ) as 'pill' | 'tag' | 'dot' | 'square' | 'circle',
-  size: checkedProp<'xs' | 'md' | 'lg'>(
+  size: checkedProp<'xs' | 'sm' | 'md' | 'lg'>(
     props['size'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'size',
     acceptedProps,
-  ) as 'xs' | 'md' | 'lg',
+  ) as 'xs' | 'sm' | 'md' | 'lg',
   tone: checkedProp<'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'>(
     props['tone'],
     { kind: 'terminal', name: 'keyword' },
@@ -195,6 +195,10 @@ const hostState = computed(() =>
   syntax: "*";
   inherits: false;
 }
+@property --ui-badge-circle-opacity {
+  syntax: "*";
+  inherits: false;
+}
 @property --ui-badge-dot-size {
   syntax: "*";
   inherits: false;
@@ -360,6 +364,11 @@ const hostState = computed(() =>
   line-height: var(--ui-badge-line-height, 1);
 }
 
+[data-component~="ui-badge"][data-ui-badge-state~="size=sm"] {
+  font-size: var(--ui-badge-font-size, var(--ui-font-size-2xs));
+  line-height: var(--ui-badge-line-height, 1);
+}
+
 [data-component~="ui-badge"][data-ui-badge-state~="tone=accent"] {
   --_badge-surface: var(--ui-accent-strong-surface, var(--ui-accent-solid));
   --_badge-border: var(--ui-accent-strong-surface, var(--ui-accent-solid));
@@ -454,8 +463,72 @@ const hostState = computed(() =>
   background-clip: padding-box;
 }
 
+/* A circular count has a tone-tinted surface, a separate lighter rim and readable tone ink.
+   Dark controls retain a shaded surface and theme ink with a quieter rim. */
 [data-component~="ui-badge"][data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="shape=circle"] {
-  box-shadow: var(--ui-shadow-sm);
+  --_badge-color-surface: light-dark(
+    color-mix(
+      in srgb,
+      color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default)) var(
+        --ui-badge-circle-opacity,
+        66%
+      ),
+      transparent
+    ),
+    color-mix(
+      in srgb,
+      color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default)) var(
+        --ui-badge-circle-opacity,
+        56%
+      ),
+      transparent
+    )
+  );
+  --_badge-color-border: light-dark(
+    color-mix(
+      in srgb,
+      color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default)) 88%,
+      transparent
+    ),
+    color-mix(
+      in srgb,
+      color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default)) 44%,
+      transparent
+    )
+  );
+  --_badge-color-text: light-dark(
+    color-mix(in srgb, var(--_badge-color-ink) 65%, var(--ui-text-primary)),
+    color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-text-primary))
+  );
+  --_badge-count-surface: light-dark(
+    color-mix(in srgb, var(--_badge-text) var(--ui-badge-circle-opacity, 66%), transparent),
+    color-mix(in srgb, var(--_badge-text) var(--ui-badge-circle-opacity, 56%), transparent)
+  );
+  --_badge-outline-surface: var(
+    --ui-badge-surface,
+    var(--_badge-color-surface, var(--_badge-count-surface))
+  );
+  border-color: var(
+    --ui-badge-border,
+    var(
+      --_badge-color-border,
+      light-dark(
+        color-mix(in srgb, var(--_badge-text) 88%, transparent),
+        color-mix(in srgb, var(--_badge-text) 44%, transparent)
+      )
+    )
+  );
+  color: var(
+    --ui-badge-text,
+    var(
+      --_badge-color-text,
+      light-dark(
+        color-mix(in srgb, var(--_badge-surface) 65%, var(--ui-text-primary)),
+        var(--ui-text-primary)
+      )
+    )
+  );
+  box-shadow: 0 1px 1px light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.12));
 }
 
 /* Neutral reverses a subtle surface/ink pair rather than a strong tone. Keep its original

package/vue/UiButton.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-declare var __VLS_6: {}, __VLS_8: {}, __VLS_10: {}, __VLS_22: {}, __VLS_24: {}, __VLS_26: {}, __VLS_38: {}, __VLS_45: {};
+declare var __VLS_6: {}, __VLS_8: {}, __VLS_10: {}, __VLS_22: {}, __VLS_24: {}, __VLS_26: {}, __VLS_38: {}, __VLS_40: {}, __VLS_47: {}, __VLS_49: {};
 type __VLS_Slots = {} & {
     icon?: (props: typeof __VLS_6) => any;
 } & {
@@ -15,7 +15,11 @@ type __VLS_Slots = {} & {
 } & {
     default?: (props: typeof __VLS_38) => any;
 } & {
-    default?: (props: typeof __VLS_45) => any;
+    badge?: (props: typeof __VLS_40) => any;
+} & {
+    default?: (props: typeof __VLS_47) => any;
+} & {
+    badge?: (props: typeof __VLS_49) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     align: {

package/vue/UiButton.vue

@@ -808,7 +808,8 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
   ><span v-if="checkedProps.loading || checkedProps.pending" class="spinner-wrap"><UiSpinner
         size="sm"
       /></span>
-    <slot /></a>
+    <slot />
+    <span class="badge"><slot name="badge" /></span></a>
   <button
     v-else
     data-component="ui-button"
@@ -839,6 +840,7 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
         size="sm"
       /></span>
     <slot />
+    <span class="badge"><slot name="badge" /></span>
   </button>
 </template>
 
@@ -918,6 +920,21 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
 }
 
 [data-component~="ui-button"] {
+  /* Optional inherited action-group values keep text and icon actions under the same light.
+     One fine top/start highlight follows the bottom/end lowlight at a joined action seam.
+     A single ambient lift avoids stacking a face gradient or another inset bevel. */
+  --_ui-action-start: 1px;
+  --_ui-action-edge: var(
+    --ui-action-edge,
+    inset var(--_ui-action-start) 1px 0 light-dark(
+      rgb(255 255 255 / 0.08),
+      rgb(255 255 255 / 0.06)
+    ),
+    inset calc(-1 * var(--_ui-action-start)) -1px 0 light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.08))
+  );
+  --_ui-action-shadow:
+    var(--_ui-action-edge),
+    0 1px 2px light-dark(rgb(0 0 0 / 0.10), rgb(0 0 0 / 0.20));
   --_hue: var(--ui-accent);
   --_hue-hover: var(--ui-accent-hover);
   --_hue-active: var(--ui-accent-active);
@@ -938,6 +955,10 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
   color: var(--_tone-text);
 }
 
+[data-component~="ui-button"]:dir(rtl) {
+  --_ui-action-start: -1px;
+}
+
 [data-component~="ui-button"][data-ui-button-state~="align=start"] {
   justify-content: flex-start;
   text-align: start;
@@ -964,8 +985,8 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
   white-space: var(--ui-button-white-space, inherit);
   line-height: var(--ui-line-height-tight);
   padding: var(--ui-space-2) var(--ui-space-3);
-  background-image: var(--ui-raised-highlight);
-  box-shadow: var(--ui-button-shadow, var(--ui-raised));
+  background-image: none;
+  box-shadow: var(--ui-button-shadow, var(--ui-action-shadow, var(--_ui-action-shadow)));
   cursor: pointer;
   transition:
     background-color var(--ui-motion-fast) var(--ui-motion-ease),
@@ -986,6 +1007,22 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
   vertical-align: middle;
 }
 
+/* A count is an adornment, not another line of label text. Keep the standard control height
+   with enough inset for a 24px mark; large content can still grow the button naturally. */
+[data-component~="ui-button"]:not([variant="link"]):has(.badge:not(:empty)) {
+  padding-block: var(--ui-space-0-5);
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+}
+
+.badge:empty {
+  display: none;
+}
+
 @supports (text-box-trim: trim-both) {
   [data-component~="ui-button"] {
     text-box-trim: trim-both;
@@ -1059,6 +1096,15 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
   background-color: var(--ui-button-hover-surface, oklch(from var(--_tone) l c h / 12%));
 }
 
+/* A neutral card encloses content quietly; ordinary outlines keep their action-tone edge. */
+[data-component~="ui-button"][data-ui-button-state~="variant=card"][data-ui-button-state~="tone=neutral"] {
+  border-color: var(--ui-button-border, var(--ui-border));
+}
+
+[data-component~="ui-button"][data-ui-button-state~="variant=card"][data-ui-button-state~="tone=neutral"]:hover:not(:disabled, [aria-disabled="true"]) {
+  border-color: var(--ui-button-hover-border, var(--ui-border-strong));
+}
+
 /* Pressed reads as pressed in: the highlight goes, and the shadow moves inside. */
 [data-component~="ui-button"]:active:not(:disabled, [aria-disabled="true"]) {
   background-color: var(--ui-button-active-surface, oklch(from var(--_tone) l c h / 18%));
@@ -1071,7 +1117,7 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
   border-color: var(--_tone);
   background-color: var(--_tone);
   color: var(--_on-tone);
-  box-shadow: var(--ui-button-solid-shadow, var(--ui-raised));
+  box-shadow: var(--ui-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow)));
 }
 
 :is([data-component~="ui-button"][data-ui-button-state~="variant=solid"], [data-component~="ui-button"][data-ui-button-state~="variant=danger"]):hover:not(:disabled, [aria-disabled="true"]) {
@@ -1159,16 +1205,20 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
 [data-component~="ui-button"]:focus-visible {
   outline: none;
   box-shadow:
-    var(--ui-button-shadow, var(--ui-raised)),
+    var(--ui-button-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
     var(--ui-focus-halo);
 }
 
 [data-component~="ui-button"][data-ui-button-state~="variant=solid"]:focus-visible {
   box-shadow:
-    var(--ui-button-solid-shadow, var(--ui-raised)),
+    var(--ui-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
     var(--ui-focus-halo);
 }
 
+:is([data-component~="ui-button"][data-ui-button-state~="variant=ghost"], [data-component~="ui-button"][data-ui-button-state~="variant=link"], [data-component~="ui-button"][data-ui-button-state~="variant=card"]):focus-visible {
+  box-shadow: var(--ui-focus-halo);
+}
+
 /* A loading action stays visually active; only an explicitly disabled action takes the
    neutral disabled palette. Its flat surface and muted ink make the state unambiguous. */
 [data-component~="ui-button"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {

package/vue/UiCallout.vue

@@ -245,8 +245,10 @@ const hostState = computed(() =>
   padding-inline-end: var(--ui-callout-padding-inline, var(--ui-space-3));
   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, var(--ui-accent-line-width)) solid
-    var(--ui-callout-border, var(--_callout-border));
+  border-inline-start: var(
+    --ui-callout-leading-border-width,
+    var(--ui-callout-border-width, var(--ui-border-width))
+  ) solid color-mix(in srgb, var(--ui-callout-border, var(--_callout-border)) 35%, transparent);
   border-radius: var(--ui-radius-md);
   background: var(--ui-callout-surface, var(--_callout-surface));
   color: var(--ui-callout-text, var(--ui-text-primary));

package/vue/UiIconButton.vue

@@ -474,6 +474,21 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
 }
 
 [data-component~="ui-icon-button"] {
+  /* Optional inherited action-group values keep text and icon actions under the same light.
+     One fine top/start highlight follows the bottom/end lowlight at a joined action seam.
+     A single ambient lift avoids stacking a face gradient or another inset bevel. */
+  --_ui-action-start: 1px;
+  --_ui-action-edge: var(
+    --ui-action-edge,
+    inset var(--_ui-action-start) 1px 0 light-dark(
+      rgb(255 255 255 / 0.08),
+      rgb(255 255 255 / 0.06)
+    ),
+    inset calc(-1 * var(--_ui-action-start)) -1px 0 light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.08))
+  );
+  --_ui-action-shadow:
+    var(--_ui-action-edge),
+    0 1px 2px light-dark(rgb(0 0 0 / 0.10), rgb(0 0 0 / 0.20));
   /* Hooks do not inherit, so the parts below read them from the root. */
   --_ui-icon-button-icon-size: var(--ui-icon-button-icon-size);
   --_ui-icon-button-icon-stroke-width: var(--ui-icon-button-icon-stroke-width);
@@ -482,6 +497,10 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
   color: var(--ui-text-secondary);
 }
 
+[data-component~="ui-icon-button"]:dir(rtl) {
+  --_ui-action-start: -1px;
+}
+
 [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);
@@ -670,9 +689,9 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"]::after {
     --ui-icon-button-outline-surface,
     var(--_icon-button-outline-surface, var(--ui-surface-default))
   );
-  background-image: var(--ui-raised-highlight);
+  background-image: none;
   color: var(--ui-icon-button-outline-text, var(--_icon-button-text, var(--ui-text-primary)));
-  box-shadow: var(--ui-raised);
+  box-shadow: var(--ui-action-shadow, var(--_ui-action-shadow));
 }
 
 [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"] {
@@ -680,12 +699,9 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"]::after {
     --ui-icon-button-solid-surface,
     var(--_icon-button-solid-surface, var(--ui-accent-solid))
   );
-  background-image: var(--ui-raised-highlight);
+  background-image: none;
   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)
-  );
+  box-shadow: var(--ui-icon-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow)));
 }
 
 [data-component~="ui-icon-button"]:hover:enabled:not([aria-disabled="true"]) {
@@ -765,6 +781,23 @@ 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"]:focus-visible {
+  box-shadow:
+    var(--ui-action-shadow, var(--_ui-action-shadow)),
+    var(--ui-focus-halo);
+}
+
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"]:focus-visible {
+  box-shadow:
+    var(--ui-icon-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
+    var(--ui-focus-halo);
+}
+
+[data-component~="ui-icon-button"]:is([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"]):active:enabled:not([aria-disabled="true"]) {
+  background-image: none;
+  box-shadow: var(--ui-pressed);
+}
+
 [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled:focus-visible {
   box-shadow:
     var(--ui-pressed),

package/vue/UiInputGroup.d.ts

@@ -26,6 +26,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"text" | "icon" | null>;
         default: string;
     };
+    variant: {
+        type: PropType<"outline" | "subtle" | null>;
+        default: string;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     actionPosition: {
         type: PropType<"below" | "top-end" | null>;
@@ -43,7 +47,12 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"text" | "icon" | null>;
         default: string;
     };
+    variant: {
+        type: PropType<"outline" | "subtle" | null>;
+        default: string;
+    };
 }>> & Readonly<{}>, {
+    variant: "subtle" | "outline" | null;
     disabled: boolean | null;
     multiline: boolean | null;
     actionPosition: "top-end" | "below" | null;

package/vue/UiInputGroup.vue

@@ -42,6 +42,15 @@ const propValidityContract = {
       values: ['text', 'icon'],
       default: 'text',
     },
+    variant: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'variant' },
+      description:
+        'outline uses the standard field edge and surface. subtle uses a quiet decorative edge and muted surface for a multiline composer. Both retain the same\n      focus, invalid and disabled states, and the field inside shares the group\'s one frame.',
+      values: ['outline', 'subtle'],
+      default: 'outline',
+    },
   },
 } as const
 const props = defineProps({
@@ -52,12 +61,14 @@ const props = defineProps({
   disabled: { type: null as unknown as PropType<boolean | null>, default: false },
   multiline: { type: null as unknown as PropType<boolean | null>, default: false },
   prefixKind: { type: null as unknown as PropType<'text' | 'icon' | null>, default: 'text' },
+  variant: { type: null as unknown as PropType<'outline' | 'subtle' | null>, default: 'outline' },
 })
 const acceptedProps: Record<string, unknown> = {
   actionPosition: 'below',
   disabled: false,
   multiline: false,
   prefixKind: 'text',
+  variant: 'outline',
 }
 const checkedProps = computed(() => ({
   actionPosition: checkedProp<'below' | 'top-end'>(
@@ -88,6 +99,13 @@ const checkedProps = computed(() => ({
     'prefixKind',
     acceptedProps,
   ) as 'text' | 'icon',
+  variant: checkedProp<'outline' | 'subtle'>(
+    props['variant'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'variant',
+    acceptedProps,
+  ) as 'outline' | 'subtle',
 }))
 void checkedProps.value
 watchSyncEffect(() => {
@@ -148,6 +166,9 @@ if (
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
   [
+    checkedProps.value.variant && 'variant',
+    checkedProps.value.variant != null
+    && `variant=${encodeURIComponent(checkedProps.value.variant)}`,
     checkedProps.value.disabled && 'disabled',
     checkedProps.value.prefixKind && 'prefixKind',
     checkedProps.value.prefixKind != null
@@ -176,7 +197,7 @@ useComponentHost(() => import('../components/ui-input-group/ui-input-group.js'),
       ? (incoming[name] ?? incoming[kebab] ?? null)
       : null
   },
-  propNames: ['actionPosition', 'disabled', 'multiline', 'prefixKind'],
+  propNames: ['actionPosition', 'disabled', 'multiline', 'prefixKind', 'variant'],
   propValidity: (name: string) =>
     propValidityState({ contract: propValidityContract, values: { ...props } }, name),
 })
@@ -191,6 +212,7 @@ useComponentHost(() => import('../components/ui-input-group/ui-input-group.js'),
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
     :data-multiline="reflectedProp('multiline', 'multiline', checkedProps.multiline, undefined, false)"
     :data-prefix-kind="reflectedProp('prefixKind', 'prefix-kind', checkedProps.prefixKind, undefined, false)"
+    :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-ui-input-group-state="hostState || undefined"
     ref="root"
   >
@@ -268,6 +290,12 @@ useComponentHost(() => import('../components/ui-input-group/ui-input-group.js'),
     box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
 }
 
+[data-component~="ui-input-group"][data-ui-input-group-state~="variant=subtle"] {
+  border-color: var(--ui-border);
+  background: var(--ui-surface-muted);
+  box-shadow: none;
+}
+
 /* The frame takes its input's size, so a small group lines up with small buttons and fields. */
 [data-component~="ui-input-group"]:has(.field [data-ui-input-state~="size=sm"]) {
   min-block-size: var(--ui-control-size-sm);

package/vue/UiToast.vue

@@ -234,6 +234,7 @@ function attribute(value: unknown): any {
 
 [data-component~="ui-toast"] {
   --_ui-toast-accent: var(--ui-border-strong);
+  --_ui-toast-surface: var(--ui-surface-muted);
 
   display: flex;
   align-items: center;
@@ -242,13 +243,20 @@ function attribute(value: unknown): any {
   inline-size: 100%;
   margin: 0;
   padding: var(--ui-space-3) var(--ui-space-4);
+  /* The close button's internal space supplies the rest of the trailing inset. */
+  padding-inline-end: var(--ui-space-2);
   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));
+    var(
+      --ui-toast-border,
+      var(--ui-overlay-border, 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)));
+  background: var(--ui-toast-surface, var(--ui-overlay-surface, var(--_ui-toast-surface)));
   color: var(--ui-text-primary);
+  font-family: var(--ui-font-family-sans);
+  font-size: var(--ui-font-size-sm);
+  font-weight: var(--ui-font-normal);
+  line-height: var(--ui-line-height-md);
   box-shadow: var(
     --ui-toast-shadow,
     var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
@@ -258,15 +266,19 @@ function attribute(value: unknown): any {
 
 [data-component~="ui-toast"][data-ui-toast-state~="tone=info"] {
   --_ui-toast-accent: var(--ui-info-solid);
+  --_ui-toast-surface: var(--ui-info-soft);
 }
 [data-component~="ui-toast"][data-ui-toast-state~="tone=success"] {
   --_ui-toast-accent: var(--ui-success-solid);
+  --_ui-toast-surface: var(--ui-success-soft);
 }
 [data-component~="ui-toast"][data-ui-toast-state~="tone=warning"] {
   --_ui-toast-accent: var(--ui-warning-solid);
+  --_ui-toast-surface: var(--ui-warning-soft);
 }
 [data-component~="ui-toast"][data-ui-toast-state~="tone=danger"] {
   --_ui-toast-accent: var(--ui-danger-solid);
+  --_ui-toast-surface: var(--ui-danger-soft);
 }
 
 .message {
@@ -276,10 +288,6 @@ function attribute(value: unknown): any {
 .action:not(:has(> *)) {
   display: none;
 }
-.dismiss {
-  margin-inline-end: calc(var(--ui-space-2) * -1);
-}
-
 [data-component~="ui-toast"][hidden] {
   display: none;
 }

package/vue/UiToastRegion.vue

@@ -460,19 +460,27 @@ function uniqueKeys<T>(
 }
 
 .toast {
+  --_ui-toast-region-accent: var(--ui-border-strong);
+  --_ui-toast-region-tone-surface: var(--ui-surface-muted);
   display: grid;
   grid-template-columns: 1fr auto;
   gap: var(--ui-space-2);
   align-items: start;
   border: var(--ui-border-width) solid
-    var(--_ui-toast-region-border, var(--ui-overlay-border, var(--ui-border-strong)));
+    var(--_ui-toast-region-border, var(--ui-overlay-border, var(--_ui-toast-region-accent)));
   border-radius: var(--_ui-toast-region-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
   padding: var(--ui-space-3) var(--ui-space-4);
+  /* The close button's internal space supplies the rest of the trailing inset. */
+  padding-inline-end: var(--ui-space-2);
   background: var(
     --_ui-toast-region-surface,
-    var(--ui-overlay-surface, var(--ui-surface-elevated))
+    var(--ui-overlay-surface, var(--_ui-toast-region-tone-surface))
   );
   color: var(--ui-text-primary);
+  font-family: var(--ui-font-family-sans);
+  font-size: var(--ui-font-size-sm);
+  font-weight: var(--ui-font-normal);
+  line-height: var(--ui-line-height-md);
   box-shadow: var(
     --_ui-toast-region-shadow,
     var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
@@ -482,16 +490,20 @@ function uniqueKeys<T>(
 }
 
 .toast[data-tone="info"] {
-  border-inline-start: var(--ui-accent-line-width) solid var(--ui-info-solid);
+  --_ui-toast-region-accent: var(--ui-info-solid);
+  --_ui-toast-region-tone-surface: var(--ui-info-soft);
 }
 .toast[data-tone="success"] {
-  border-inline-start: var(--ui-accent-line-width) solid var(--ui-success-solid);
+  --_ui-toast-region-accent: var(--ui-success-solid);
+  --_ui-toast-region-tone-surface: var(--ui-success-soft);
 }
 .toast[data-tone="warning"] {
-  border-inline-start: var(--ui-accent-line-width) solid var(--ui-warning-solid);
+  --_ui-toast-region-accent: var(--ui-warning-solid);
+  --_ui-toast-region-tone-surface: var(--ui-warning-soft);
 }
 .toast[data-tone="danger"] {
-  border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger-solid);
+  --_ui-toast-region-accent: var(--ui-danger-solid);
+  --_ui-toast-region-tone-surface: var(--ui-danger-soft);
 }
 
 /* Leaving slides on down and fades; the controller removes the toast when this ends. */
@@ -567,7 +579,6 @@ function uniqueKeys<T>(
 
 .dismiss {
   align-self: center;
-  margin-inline-end: calc(var(--ui-space-2) * -1);
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */

package/vue/chunks/UiBadge.js

@@ -63,9 +63,10 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 				},
 				required: false,
 				target: { attribute: "size" },
-				description: "Scale. xs is compact; md is the usual text badge; lg adds room to fixed marks while retaining the usual text size. A square is 24px at xs, 32px at md and\n      40px at lg. A circle is 16px at xs, 24px at md and 32px at lg; use lg for short counts such as 30 or 99+.",
+				description: "Scale. xs is compact; sm keeps the usual badge geometry with compact text, fitting short counts such as 99+ inside a 24px circle. md is the usual text\n      badge; lg adds room to fixed marks while retaining the usual text size. A square is 24px at xs, 32px at sm and md, and 40px at lg. A circle is 16px at xs,\n      24px at sm and md, and 32px at lg.",
 				values: [
 					"xs",
+					"sm",
 					"md",
 					"lg"
 				],
@@ -179,6 +180,6 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-4d2f1396"]]);
+}), [["__scopeId", "data-v-57826cf9"]]);
 //#endregion
 export { UiBadge_default as t };