@threadlabs/looma 0.26.4 → 0.26.5

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/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/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 };

package/vue/chunks/UiButton.js

@@ -82,7 +82,8 @@ var _hoisted_10 = {
 	key: 0,
 	class: "spinner-wrap"
 };
-var _hoisted_11 = [
+var _hoisted_11 = { class: "badge" };
+var _hoisted_12 = [
 	"type",
 	"disabled",
 	"aria-disabled",
@@ -103,10 +104,11 @@ var _hoisted_11 = [
 	"data-variant",
 	"data-ui-button-state"
 ];
-var _hoisted_12 = {
+var _hoisted_13 = {
 	key: 0,
 	class: "spinner-wrap"
 };
+var _hoisted_14 = { class: "badge" };
 //#endregion
 //#region .build/vue/UiButton.vue
 var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -722,7 +724,11 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 				"data-variant": reflectedProp("variant", "variant", checkedProps.value.variant, void 0, false),
 				"data-ui-button-state": hostState.value || void 0,
 				ref: "@html-next/root"
-			}), [checkedProps.value.loading || checkedProps.value.pending ? (openBlock(), createElementBlock("span", _hoisted_10, [createVNode(UiSpinner_default, { size: "sm" })])) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_9)), [[unref(vPropValidity), {
+			}), [
+				checkedProps.value.loading || checkedProps.value.pending ? (openBlock(), createElementBlock("span", _hoisted_10, [createVNode(UiSpinner_default, { size: "sm" })])) : createCommentVNode("v-if", true),
+				renderSlot(_ctx.$slots, "default", {}, void 0, true),
+				createElementVNode("span", _hoisted_11, [renderSlot(_ctx.$slots, "badge", {}, void 0, true)])
+			], 16, _hoisted_9)), [[unref(vPropValidity), {
 				contract: propValidityContract,
 				values: { ...props }
 			}]]) : withDirectives((openBlock(), createElementBlock("button", mergeProps({
@@ -749,12 +755,16 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 				"data-variant": reflectedProp("variant", "variant", checkedProps.value.variant, void 0, false),
 				"data-ui-button-state": hostState.value || void 0,
 				ref: "@html-next/root"
-			}), [checkedProps.value.loading || checkedProps.value.pending ? (openBlock(), createElementBlock("span", _hoisted_12, [createVNode(UiSpinner_default, { size: "sm" })])) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_11)), [[unref(vPropValidity), {
+			}), [
+				checkedProps.value.loading || checkedProps.value.pending ? (openBlock(), createElementBlock("span", _hoisted_13, [createVNode(UiSpinner_default, { size: "sm" })])) : createCommentVNode("v-if", true),
+				renderSlot(_ctx.$slots, "default", {}, void 0, true),
+				createElementVNode("span", _hoisted_14, [renderSlot(_ctx.$slots, "badge", {}, void 0, true)])
+			], 16, _hoisted_12)), [[unref(vPropValidity), {
 				contract: propValidityContract,
 				values: { ...props }
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-37d5b9a2"]]);
+}), [["__scopeId", "data-v-e56c4e01"]]);
 //#endregion
 export { UiButton_default as t };

package/vue/chunks/UiIconButton.js

@@ -369,6 +369,6 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-b66a1661"]]);
+}), [["__scopeId", "data-v-219fa683"]]);
 //#endregion
 export { UiIconButton_default as t };

package/vue/chunks/UiInputGroup.js

@@ -8,6 +8,7 @@ var _hoisted_1 = [
 	"data-disabled",
 	"data-multiline",
 	"data-prefix-kind",
+	"data-variant",
 	"data-ui-input-group-state"
 ];
 var _hoisted_2 = { class: "affix" };
@@ -35,6 +36,10 @@ var UiInputGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		prefixKind: {
 			type: null,
 			default: "text"
+		},
+		variant: {
+			type: null,
+			default: "outline"
 		}
 	},
 	setup(__props) {
@@ -80,6 +85,17 @@ var UiInputGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				description: "Text affixes have their own framing. An icon prefix shares the field surface and uses one compact icon-to-value gap.",
 				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"
 			}
 		} };
 		const props = __props;
@@ -87,7 +103,8 @@ var UiInputGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			actionPosition: "below",
 			disabled: false,
 			multiline: false,
-			prefixKind: "text"
+			prefixKind: "text",
+			variant: "outline"
 		};
 		const checkedProps = computed(() => ({
 			actionPosition: checkedProp(props["actionPosition"], {
@@ -105,7 +122,11 @@ var UiInputGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			prefixKind: checkedProp(props["prefixKind"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "prefixKind", acceptedProps)
+			}, false, "prefixKind", acceptedProps),
+			variant: checkedProp(props["variant"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "variant", acceptedProps)
 		}));
 		checkedProps.value;
 		watchSyncEffect(() => {
@@ -135,6 +156,8 @@ var UiInputGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		});
 		/** 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 && `prefixKind=${encodeURIComponent(checkedProps.value.prefixKind)}`,
@@ -160,7 +183,8 @@ var UiInputGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				"actionPosition",
 				"disabled",
 				"multiline",
-				"prefixKind"
+				"prefixKind",
+				"variant"
 			],
 			propValidity: (name) => propValidityState({
 				contract: propValidityContract,
@@ -173,6 +197,7 @@ var UiInputGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				"data-disabled": reflectedProp("disabled", "disabled", checkedProps.value.disabled, void 0, false),
 				"data-multiline": reflectedProp("multiline", "multiline", checkedProps.value.multiline, void 0, false),
 				"data-prefix-kind": reflectedProp("prefixKind", "prefix-kind", checkedProps.value.prefixKind, void 0, false),
+				"data-variant": reflectedProp("variant", "variant", checkedProps.value.variant, void 0, false),
 				"data-ui-input-group-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
@@ -187,6 +212,6 @@ var UiInputGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-a7fb387e"]]);
+}), [["__scopeId", "data-v-ac4d8095"]]);
 //#endregion
 export { UiInputGroup_default as t };