@threadlabs/looma 0.26.2 → 0.26.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.26.2",
+  "version": "0.26.4",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-avatar.css

@@ -61,6 +61,10 @@
       border-color: var(--ui-avatar-border, var(--ui-border-strong));
     }
 
+    :scope[data-ui-avatar-state~="shape=circle"] {
+      box-shadow: var(--ui-shadow-sm);
+    }
+
     :scope[data-ui-avatar-state~="shape=square"] {
       border-radius: var(--ui-avatar-radius, var(--ui-radius-md));
     }

package/styles/ui-badge.css

@@ -124,25 +124,26 @@
       text-box-trim: none;
     }
 
-    /* Text-only badges retain their trimmed inline baseline. Icon content needs a flex row;
-       trimming its label separately keeps the glyph centered without changing adjacent lines. */
+    /* Center the capital/baseline text box, while clipping only inline overflow for ellipsis.
+       Vertical ink remains visible so trimming never cuts off ascenders or descenders. */
     @supports (text-box-trim: trim-both) {
       :scope {
         display: inline-block;
         min-block-size: var(--ui-badge-min-block-size, 1.5rem);
         text-align: center;
         align-content: center;
-        text-box-trim: trim-both;
-        text-box-edge: text;
+        text-box-trim: none;
       }
       :scope:has(.icon:not(:empty)),
       :scope:has(.label svg) {
         display: inline-flex;
         text-box-trim: none;
       }
-      :scope:has(.icon:not(:empty)) .label {
+      .label:not(:has(svg)) {
         text-box-trim: trim-both;
-        text-box-edge: text;
+        text-box-edge: cap alphabetic;
+        overflow-x: clip;
+        overflow-y: visible;
       }
     }
 
@@ -223,6 +224,29 @@
       --_badge-color-text: color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default));
     }
 
+    /* A translucent inverse surface picks up its filled control's tone. Deepen the tone ink
+       toward the theme text to retain contrast against that composed surface. */
+    :scope[data-ui-badge-state~="variant=inverse"] {
+      --_badge-color-surface: color-mix(in srgb, color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default)) 88%, transparent);
+      --_badge-color-border: var(--_badge-color-surface);
+      --_badge-color-text: color-mix(in srgb, var(--_badge-color-ink) 85%, var(--ui-text-primary));
+      --_badge-outline-surface: var(--ui-badge-surface, var(--_badge-color-surface, color-mix(in srgb, var(--_badge-text) 88%, transparent)));
+      border-color: var(--ui-badge-border, var(--_badge-color-border, color-mix(in srgb, var(--_badge-text) 88%, transparent)));
+      color: var(--ui-badge-text, var(--_badge-color-text, color-mix(in srgb, var(--_badge-surface) 85%, var(--ui-text-primary))));
+      /* Paint each translucent layer once, including the border, without a bright double-painted ring. */
+      background-clip: padding-box;
+    }
+
+    :scope[data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="shape=circle"] {
+      box-shadow: var(--ui-shadow-sm);
+    }
+
+    /* Neutral reverses a subtle surface/ink pair rather than a strong tone. Keep its original
+       surface ink: moving it toward dark-theme primary text would reduce overlay contrast. */
+    :scope[data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="tone=neutral"] {
+      color: var(--ui-badge-text, var(--_badge-color-text, var(--_badge-surface)));
+    }
+
     :scope[data-ui-badge-state~="variant=outline"] {
       --_badge-surface: var(--ui-surface-default);
       --_badge-border: var(--ui-border-strong);
@@ -276,6 +300,10 @@
       --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-3) * 2));
     }
 
+    :scope[data-ui-badge-state~="shape=square"][data-ui-badge-state~="size=lg"] {
+      --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-4) * 2 + var(--ui-space-2)));
+    }
+
     :scope[data-ui-badge-state~="shape=square"] .label {
       display: inline-flex;
       align-items: center;
@@ -304,6 +332,10 @@
       --_badge-circle-size: var(--ui-badge-circle-size, var(--ui-space-4));
     }
 
+    :scope[data-ui-badge-state~="shape=circle"][data-ui-badge-state~="size=lg"] {
+      --_badge-circle-size: var(--ui-badge-circle-size, calc(var(--ui-space-4) * 2));
+    }
+
     :scope[data-ui-badge-state~="shape=circle"] .label {
       display: inline-flex;
       align-items: center;
@@ -316,6 +348,18 @@
       display: none;
     }
 
+    /* Center capital and numeral ink, rather than the font's ascent/descent line box.
+       Icon labels retain flex geometry; untrimmed browsers keep that fallback too. */
+    @supports (text-box-trim: trim-both) {
+      :scope[data-ui-badge-state~="shape=circle"] .label:not(:has(svg)),
+      :scope[data-ui-badge-state~="shape=square"] .label:not(:has(svg)) {
+        display: block;
+        text-box-trim: trim-both;
+        text-box-edge: cap alphabetic;
+        overflow: visible;
+      }
+    }
+
     /* A dot uses the badge's tone recipe; only its silhouette and visible label change. */
     :scope[data-ui-badge-state~="shape=dot"] {
       position: relative;
@@ -363,6 +407,10 @@
       pointer-events: none;
     }
 
+    :scope[data-ui-badge-state~="shape=tag"][data-ui-badge-state~="variant=inverse"] {
+      background: var(--ui-badge-border, var(--_badge-color-border, var(--_badge-text)));
+    }
+
     :scope[data-ui-badge-state~="shape=tag"]:dir(rtl) {
       padding-inline-end: var(--ui-badge-padding-inline, var(--ui-space-2));
       padding-inline-start: calc(var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point));
@@ -419,14 +467,20 @@
       margin-inline-end: var(--ui-space-1);
     }
 
-    /* Text-only badges retain their trimmed inline baseline. Icon content needs a flex row;
-       trimming its label separately keeps the glyph centered without changing adjacent lines. */
+    /* Center the capital/baseline text box, while clipping only inline overflow for ellipsis.
+       Vertical ink remains visible so trimming never cuts off ascenders or descenders. */
     @supports (text-box-trim: trim-both) {
     }
 
     /* A solid colour fills with the ink. Its text is the page surface, mixed at 0% only so that it too is
        invalid while the hook is unset. */
 
+    /* A translucent inverse surface picks up its filled control's tone. Deepen the tone ink
+       toward the theme text to retain contrast against that composed surface. */
+
+    /* Neutral reverses a subtle surface/ink pair rather than a strong tone. Keep its original
+       surface ink: moving it toward dark-theme primary text would reduce overlay contrast. */
+
     /* An icon mark keeps the existing tone recipe and follows the global spacing and radius. */
 
     :scope[data-ui-badge-state~="shape=square"] .label :where([data-slotted], [data-slotted] *):is(svg) {
@@ -439,6 +493,11 @@
       margin-inline-end: 0;
     }
 
+    /* Center capital and numeral ink, rather than the font's ascent/descent line box.
+       Icon labels retain flex geometry; untrimmed browsers keep that fallback too. */
+    @supports (text-box-trim: trim-both) {
+    }
+
     /* A dot uses the badge's tone recipe; only its silhouette and visible label change. */
 
     /* The clipped point needs an inset surface over an outer border-colour shape: a native border

package/styles/ui-callout.css

@@ -66,7 +66,8 @@
       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/styles/ui-list-item.css

@@ -134,6 +134,16 @@
       line-height: var(--ui-line-height-tight);
     }
 
+    /* Keep identity and disclosure marks beside the first line, even with a long description. */
+    :scope[data-ui-list-item-state~="align=title"] {
+      align-items: flex-start;
+    }
+
+    :scope[data-ui-list-item-state~="align=title"] .leading,
+    :scope[data-ui-list-item-state~="align=title"] .trailing {
+      min-block-size: calc(var(--ui-font-size-md) * var(--ui-line-height-tight));
+    }
+
     .description {
       color: var(--ui-text-muted);
       font-size: var(--ui-font-size-sm);
@@ -180,6 +190,8 @@
 
     /* Trailing controls take their own clicks, above the title link's stretched hit area. */
 
+    /* Keep identity and disclosure marks beside the first line, even with a long description. */
+
     .title > :where([data-slotted], [data-slotted] *):is(a) {
       color: inherit;
       text-decoration: none;

package/styles/ui-toast-region.css

@@ -125,30 +125,42 @@
     }
 
     .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)));
+      border: var(--ui-border-width) solid 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);
-      background: var(--_ui-toast-region-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
+      /* 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-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))));
       animation: ui-toast-enter var(--_ui-toast-region-enter-duration, 0.32s) var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
     }
 
     .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. */
@@ -178,7 +190,6 @@
 
     .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/styles/ui-toast.css

@@ -24,6 +24,7 @@
 
     :scope {
       --_ui-toast-accent: var(--ui-border-strong);
+      --_ui-toast-surface: var(--ui-surface-muted);
 
       display: flex;
       align-items: center;
@@ -32,26 +33,35 @@
       inline-size: 100%;
       margin: 0;
       padding: var(--ui-space-3) var(--ui-space-4);
-      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));
+      /* 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-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))));
       pointer-events: auto;
     }
 
     :scope[data-ui-toast-state~="tone=info"] {
       --_ui-toast-accent: var(--ui-info-solid);
+      --_ui-toast-surface: var(--ui-info-soft);
     }
     :scope[data-ui-toast-state~="tone=success"] {
       --_ui-toast-accent: var(--ui-success-solid);
+      --_ui-toast-surface: var(--ui-success-soft);
     }
     :scope[data-ui-toast-state~="tone=warning"] {
       --_ui-toast-accent: var(--ui-warning-solid);
+      --_ui-toast-surface: var(--ui-warning-soft);
     }
     :scope[data-ui-toast-state~="tone=danger"] {
       --_ui-toast-accent: var(--ui-danger-solid);
+      --_ui-toast-surface: var(--ui-danger-soft);
     }
 
     .message {
@@ -61,10 +71,6 @@
     .action:not(:has(> *)) {
       display: none;
     }
-    .dismiss {
-      margin-inline-end: calc(var(--ui-space-2) * -1);
-    }
-
     :scope[hidden] {
       display: none;
     }

package/vanilla/UiBadge.d.ts

@@ -7,9 +7,9 @@ export interface UiBadgeElement extends HTMLSpanElement {
 }
 export interface UiBadgeProps {
   shape?: "pill" | "tag" | "dot" | "square" | "circle" | null;
-  size?: "xs" | "md" | null;
+  size?: "xs" | "md" | "lg" | null;
   tone?: "neutral" | "accent" | "info" | "success" | "warning" | "danger" | null;
-  variant?: "solid" | "subtle" | "outline" | null;
+  variant?: "solid" | "subtle" | "outline" | "inverse" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];
   slots?: Readonly<Record<string, readonly (string | Node)[]>>;

package/vanilla/UiBadge.js

@@ -7,7 +7,7 @@ const T1 = ["",[]];
 const T2 = ["",[]];
 let P0, P1, P2;
 const S = { n: [], t: [], f: import.meta.url, g: "ui-badge" };
-const D = { props: { "shape": { "required":false,"values":["pill","tag","dot","square","circle"],"default":"pill", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "size": { "required":false,"values":["xs","md"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "tone": { "required":false,"values":["neutral","accent","info","success","warning","danger"],"default":"neutral", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "variant": { "required":false,"values":["solid","subtle","outline"],"default":"subtle", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
+const D = { props: { "shape": { "required":false,"values":["pill","tag","dot","square","circle"],"default":"pill", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "size": { "required":false,"values":["xs","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "tone": { "required":false,"values":["neutral","accent","info","success","warning","danger"],"default":"neutral", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "variant": { "required":false,"values":["solid","subtle","outline","inverse"],"default":"subtle", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
 
 export function createUiBadge(options = {}, html) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;

package/vanilla/UiListItem.d.ts

@@ -6,6 +6,7 @@ export interface UiListItemElement extends HTMLLIElement {
   removeEventListener<K extends keyof UiListItemEventMap>(type: K, listener: (this: UiListItemElement, event: UiListItemEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
 }
 export interface UiListItemProps {
+  align?: "center" | "title" | null;
   current?: boolean | null;
   highlighted?: boolean | null;
   leadingInteractive?: boolean | null;

package/vanilla/UiListItem.js

@@ -9,7 +9,7 @@ const T3 = ["",[]];
 const T4 = ["",[]];
 let P0, P1, P2, P3, P4;
 const S = { n: [], t: [], f: import.meta.url, g: "ui-list-item" };
-const D = { props: { "current": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "highlighted": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "leadingInteractive": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "variant": { "required":false,"values":["row","card"],"default":"row", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "wrap": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" } } };
+const D = { props: { "align": { "required":false,"values":["center","title"],"default":"center", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "current": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "highlighted": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "leadingInteractive": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "variant": { "required":false,"values":["row","card"],"default":"row", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "wrap": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" } } };
 
 export function createUiListItem(options = {}, html) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
@@ -20,7 +20,7 @@ export function createUiListItem(options = {}, html) {
   }
   element.setAttribute("data-component", "ui-list-item");
   element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
-  const v = [null, null, null, null, null];
+  const v = [null, null, null, null, null, null];
   const B = acceptProps(element, D, S.n, v, componentProps, [], html);
   const m1 = (d) => {
     const n = (P1 ??= buildTemplate(T1)).cloneNode(true);
@@ -55,13 +55,13 @@ export function createUiListItem(options = {}, html) {
   const p4 = (r, c, d) => {
   };
   const p0 = (r, c, d) => {
-    if (c & 1) {
-      const x0 = v[0];
+    if (c & 2) {
+      const x0 = v[1];
       const s0 = toAttribute(x0, "aria-current");
       if (s0 !== r.v0) writeAttribute(r.n, "aria-current", r.v0 = s0);
     }
-    if (c & 31) {
-      const x1 = hostState(["variant","highlighted","current","leadingInteractive","wrap"], [v[3], v[1], v[0], v[2], v[4]]);
+    if (c & 63) {
+      const x1 = hostState(["variant","highlighted","current","leadingInteractive","wrap","align"], [v[4], v[2], v[1], v[3], v[5], v[0]]);
       const s1 = x1;
       if (s1 !== r.v1) writeAttribute(r.n, "data-ui-list-item-state", (r.v1 = s1) === "" ? null : s1);
     }

package/vue/UiAvatar.vue

@@ -66,7 +66,8 @@ const propValidityContract = {
       type: { kind: 'terminal', name: 'keyword' },
       required: false,
       target: { attribute: 'shape' },
-      description: 'Circle by default; square uses the theme\'s medium radius.',
+      description:
+        'Circle by default, with a shallow shadow; square uses the theme\'s medium radius.',
       values: ['circle', 'square'],
       default: 'circle',
     },
@@ -443,6 +444,10 @@ useComponentHost(() => import('../components/ui-avatar/ui-avatar.js'), {
   border-color: var(--ui-avatar-border, var(--ui-border-strong));
 }
 
+[data-component~="ui-avatar"][data-ui-avatar-state~="shape=circle"] {
+  box-shadow: var(--ui-shadow-sm);
+}
+
 [data-component~="ui-avatar"][data-ui-avatar-state~="shape=square"] {
   border-radius: var(--ui-avatar-radius, var(--ui-radius-md));
 }

package/vue/UiBadge.d.ts

@@ -11,7 +11,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
     size: {
-        type: PropType<"xs" | "md" | null>;
+        type: PropType<"xs" | "md" | "lg" | null>;
         default: string;
     };
     tone: {
@@ -19,7 +19,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
     variant: {
-        type: PropType<"solid" | "subtle" | "outline" | null>;
+        type: PropType<"solid" | "subtle" | "outline" | "inverse" | null>;
         default: string;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -28,7 +28,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
     size: {
-        type: PropType<"xs" | "md" | null>;
+        type: PropType<"xs" | "md" | "lg" | null>;
         default: string;
     };
     tone: {
@@ -36,14 +36,14 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
     variant: {
-        type: PropType<"solid" | "subtle" | "outline" | null>;
+        type: PropType<"solid" | "subtle" | "outline" | "inverse" | null>;
         default: string;
     };
 }>> & Readonly<{}>, {
     shape: "circle" | "dot" | "tag" | "square" | "pill" | null;
-    size: "xs" | "md" | null;
+    size: "xs" | "md" | "lg" | null;
     tone: "info" | "neutral" | "accent" | "success" | "warning" | "danger" | null;
-    variant: "solid" | "subtle" | "outline" | null;
+    variant: "solid" | "subtle" | "outline" | "inverse" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;