@cjlapao/ui-kit-vue 0.2.0 → 0.2.5

package/dist/types/vue/src/components/InlinePanel.vue.d.ts

@@ -89,11 +89,11 @@ export declare const ConfirmInlinePanel: import("vue").DefineComponent<import("v
     };
     confirmLabel: {
         type: PropType<string | VNode>;
-        default: string;
+        default: undefined;
     };
     cancelLabel: {
         type: PropType<string | VNode>;
-        default: string;
+        default: undefined;
     };
     confirmVariant: {
         type: PropType<ButtonVariant>;
@@ -124,11 +124,11 @@ export declare const ConfirmInlinePanel: import("vue").DefineComponent<import("v
     };
     confirmLabel: {
         type: PropType<string | VNode>;
-        default: string;
+        default: undefined;
     };
     cancelLabel: {
         type: PropType<string | VNode>;
-        default: string;
+        default: undefined;
     };
     confirmVariant: {
         type: PropType<ButtonVariant>;
@@ -146,16 +146,16 @@ export declare const ConfirmInlinePanel: import("vue").DefineComponent<import("v
     onClose?: ((...args: any[]) => any) | undefined;
     onConfirm?: ((...args: any[]) => any) | undefined;
 }>, {
-    anchor: InlinePanelAnchor;
     size: Size;
+    anchor: InlinePanelAnchor;
     confirmLabel: string | VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }>;
     cancelLabel: string | VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }>;
-    confirmVariant: ButtonVariant;
-    confirmColor: import("../theme").TrueColor;
+    confirmVariant: "clear" | "solid" | "soft" | "outline" | "ghost" | "link" | "icon" | "glass";
+    confirmColor: "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "rose" | "slate" | "gray" | "zinc" | "neutral" | "stone";
     isConfirmDisabled: boolean;
     showBackdrop: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
@@ -177,15 +177,14 @@ export declare const DeleteConfirmInlinePanel: import("vue").DefineComponent<imp
     };
     confirmValueLabel: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
     };
     confirmLabel: {
         type: PropType<string | VNode>;
-        default: string;
+        default: undefined;
     };
     cancelLabel: {
         type: PropType<string | VNode>;
-        default: string;
     };
     isConfirmDisabled: {
         type: BooleanConstructor;
@@ -204,15 +203,14 @@ export declare const DeleteConfirmInlinePanel: import("vue").DefineComponent<imp
     };
     confirmValueLabel: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
     };
     confirmLabel: {
         type: PropType<string | VNode>;
-        default: string;
+        default: undefined;
     };
     cancelLabel: {
         type: PropType<string | VNode>;
-        default: string;
     };
     isConfirmDisabled: {
         type: BooleanConstructor;
@@ -225,9 +223,6 @@ export declare const DeleteConfirmInlinePanel: import("vue").DefineComponent<imp
     confirmLabel: string | VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }>;
-    cancelLabel: string | VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }>;
     isConfirmDisabled: boolean;
     confirmValueLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
@@ -238,15 +233,14 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<InlinePane
     onClose?: (() => any) | undefined;
     onBack?: (() => any) | undefined;
 }>, {
-    anchor: InlinePanelAnchor;
     role: "dialog" | "alertdialog";
     size: Size;
+    anchor: InlinePanelAnchor;
     zIndex: number;
     closeOnBackdropClick: boolean;
     closeOnEsc: boolean;
     headerActions: InlinePanelHeaderAction[];
     hideCloseButton: boolean;
-    backTooltip: string;
     showBackdrop: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     title?: (props: {}) => any;

package/dist/types/vue/src/components/Input.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/vue/src/components/Input.vue.d.ts

@@ -1,27 +1,54 @@
 import type { VNode } from "vue";
-import type { ButtonColor } from "./Button.vue";
-type InputValidationStatus = "none" | "error" | "success";
-type InputSize = "sm" | "md" | "lg";
-export type InputVariant = "flat" | "elevated" | "ghost" | "underline";
-type IconRenderer = string | VNode;
+import type { ControlSize, GlowIntensity, InputVariant, TrueColor } from "../theme/Theme";
+/** @deprecated Use `VALIDATION_STATUSES` from the theme. Kept as an alias. */
+export declare const INPUT_VALIDATION_STATUSES: readonly ["none", "error", "success"];
+export type InputValidationStatus = (typeof INPUT_VALIDATION_STATUSES)[number];
+export type InputValidationStatusType = InputValidationStatus;
+/**
+ * The shared control scale, so an Input lines up with the Button, SearchBar and
+ * Select beside it. Was a local `"sm" | "md" | "lg"`, which left `xs` and `xl`
+ * unreachable even though every sibling control offered them.
+ */
+export type InputSize = ControlSize;
+/**
+ * Re-exported from the theme, where the surfaces live, so `Input`, `Textarea`
+ * and `SearchBar` cannot drift apart.
+ */
+export type { InputVariant };
 export interface InputProps {
     /** Current value of the input (v-model). */
     modelValue?: string;
+    /** @default "md" */
     size?: InputSize;
-    tone?: ButtonColor;
-    /** Visual surface style. Defaults to `flat`. */
+    /** Accent colour for the focus border, ring and icon highlight. */
+    tone?: TrueColor;
+    /** Alias for `tone`, matching `SearchBar`'s prop name. */
+    color?: TrueColor;
+    /** Visual surface style. @default "flat" */
     variant?: InputVariant;
+    /** Start colour of the gradient glow. Defaults to the tone's 600 shade. */
+    gradientFrom?: string;
+    /** End colour of the gradient glow. Defaults to the tone's 400 shade. */
+    gradientTo?: string;
+    /** How prominent the gradient glow is. @default "soft" */
+    glowIntensity?: GlowIntensity;
+    /** @default "none" */
     validationStatus?: InputValidationStatus;
-    leadingIcon?: IconRenderer;
-    trailingIcon?: IconRenderer;
-    /** When provided, the trailing icon renders as an interactive button instead of a static decoration. */
+    leadingIcon?: string | VNode;
+    trailingIcon?: string | VNode;
+    /** Renders the trailing icon as a button rather than a static decoration. */
     onTrailingIconClick?: (event: MouseEvent) => void;
+    /** Accessible name for that button. @default "Input action" */
+    trailingIconLabel?: string;
+    /** @deprecated Use the `class` attribute, which is now the box. */
     wrapperClassName?: string;
+    /** Classes for the inner `<input>` element itself. */
+    inputClassName?: string;
+    /** Drops the surface entirely — used by `InputGroup`. */
     unstyled?: boolean;
     fullHeight?: boolean;
     disabled?: boolean;
 }
-export type InputValidationStatusType = InputValidationStatus;
 declare const _default: import("vue").DefineComponent<InputProps, {
     el: import("vue").Ref<HTMLInputElement | null, HTMLInputElement | null>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -29,11 +56,13 @@ declare const _default: import("vue").DefineComponent<InputProps, {
 }, string, import("vue").PublicProps, Readonly<InputProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
-    tone: ButtonColor;
-    variant: InputVariant;
     size: InputSize;
+    disabled: boolean;
+    variant: InputVariant;
     fullHeight: boolean;
+    glowIntensity: GlowIntensity;
     validationStatus: InputValidationStatus;
+    trailingIconLabel: string;
     unstyled: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/types/vue/src/components/InputGroup.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/vue/src/components/InputGroup.vue.d.ts

@@ -1,18 +1,33 @@
-import type { ButtonColor } from "./Button.vue";
-type InputGroupSize = "sm" | "md" | "lg";
-type InputGroupValidationStatus = "none" | "error" | "success";
+import type { ControlSize, InputVariant, TrueColor } from "../theme/Theme";
+export declare const INPUT_GROUP_VALIDATION_STATUSES: readonly ["none", "error", "success"];
+export type InputGroupValidationStatus = (typeof INPUT_GROUP_VALIDATION_STATUSES)[number];
+/** The shared control scale, so a group lines up with the Button beside it. */
+export type InputGroupSize = ControlSize;
+/**
+ * The same surfaces `Input`, `SearchBar` and `Checkbox` offer. The group owns
+ * the box now — its children render `unstyled` — so the variant has to live
+ * here or a group could never be anything but an opaque white card.
+ */
+export type InputGroupVariant = InputVariant;
 export interface InputGroupProps {
     leadingAddon?: string;
     trailingAddon?: string;
-    tone?: ButtonColor;
+    /** @default "blue" */
+    tone?: TrueColor;
+    /** Alias for `tone`, matching `Input` and `SearchBar`. */
+    color?: TrueColor;
+    /** Surface treatment of the group box. @default "elevated" */
+    variant?: InputGroupVariant;
+    /** @default "md" */
     size?: InputGroupSize;
+    /** @default "none" */
     validationStatus?: InputGroupValidationStatus;
     disabled?: boolean;
 }
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<InputGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InputGroupProps> & Readonly<{}>, {
-    tone: ButtonColor;
     size: InputGroupSize;
     disabled: boolean;
+    variant: InputGroupVariant;
     validationStatus: InputGroupValidationStatus;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     leadingAddon?: (props: {}) => any;

package/dist/types/vue/src/components/Loader.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/vue/src/components/Loader.vue.d.ts

@@ -1,30 +1,49 @@
 import type { VNode } from "vue";
-import type { SpinnerColor, SpinnerProps } from "./Spinner.vue";
-type LoaderVariant = "spinner" | "progress";
-type LoaderSize = "sm" | "md" | "lg";
-type GlassBlurIntensity = "none" | "low" | "medium" | "high";
-type LoaderColor = SpinnerColor;
+import type { ControlSize } from "../theme/Theme";
+import type { SpinnerColor, SpinnerThickness, SpinnerVariant } from "./Spinner.vue";
+export declare const LOADER_VARIANTS: readonly ["spinner", "progress"];
+export type LoaderVariant = (typeof LOADER_VARIANTS)[number];
+/**
+ * The shared control scale: it drives the spinner's diameter, the progress
+ * bar's height, and the title/label type size together.
+ */
+export type LoaderSize = ControlSize;
+export type LoaderColor = SpinnerColor;
+export declare const LOADER_GLASS_BLURS: readonly ["none", "low", "medium", "high"];
+export type GlassBlurIntensity = (typeof LOADER_GLASS_BLURS)[number];
 export interface LoaderProps {
     variant?: LoaderVariant;
     size?: LoaderSize;
     color?: LoaderColor;
-    spinnerVariant?: SpinnerProps["variant"];
-    spinnerThickness?: SpinnerProps["thickness"];
+    spinnerVariant?: SpinnerVariant;
+    spinnerThickness?: SpinnerThickness;
     title?: string | VNode | null;
     label?: string | VNode | null;
     progress?: number;
+    /**
+     * Progress variant only — the bar sweeps instead of filling and no
+     * `aria-valuenow` is published, which is what tells assistive technology
+     * the extent is unknown.
+     */
+    indeterminate?: boolean;
+    /**
+     * Cover the nearest positioned ancestor. Render the loader inside a
+     * `relative` container for the overlay to fill.
+     */
     overlay?: boolean;
+    /** Overlay only — a see-through glass fill instead of a solid scrim. */
     glass?: boolean;
     glassBlurIntensity?: GlassBlurIntensity;
 }
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<LoaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LoaderProps> & Readonly<{}>, {
     glass: boolean;
-    color: LoaderColor;
-    variant: LoaderVariant;
     progress: number;
     size: LoaderSize;
-    spinnerVariant: import("./Spinner.vue").SpinnerVariant;
-    spinnerThickness: import("./Spinner.vue").SpinnerThickness;
+    color: LoaderColor;
+    variant: LoaderVariant;
+    spinnerVariant: SpinnerVariant;
+    indeterminate: boolean;
+    spinnerThickness: SpinnerThickness;
     overlay: boolean;
     glassBlurIntensity: GlassBlurIntensity;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {

package/dist/types/vue/src/components/MarkdownEditor.vue.d.ts

@@ -28,12 +28,12 @@ declare const _default: import("vue").DefineComponent<MarkdownEditorProps, {}, {
     height: number;
     modelValue: string;
     readOnly: boolean;
+    preview: "live" | "edit" | "preview";
     globalParameters: CapsuleBlueprintParameter[];
     serviceNames: string[];
     context: {
         slug?: string;
         enable_https?: boolean;
     };
-    preview: "live" | "edit" | "preview";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/types/vue/src/components/MetricBar.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/vue/src/components/MetricBar.vue.d.ts

@@ -1,14 +1,25 @@
-import type { SpinnerColor } from "./Spinner.vue";
+import type { ControlSize, TrueColor } from "../theme/Theme";
 export interface MetricBarProps {
+    /** Caption on the left. Also becomes the bar's accessible name. */
     label: string;
-    value: string;
+    /**
+     * Free-form reading shown on the right — "12 / 20 GB", "4 runs", "87%".
+     * This is display text, not the bar's geometry: `percentage` drives the fill.
+     */
+    value?: string | number;
+    /** Fill percentage, 0–100. */
     percentage: number;
-    color?: SpinnerColor;
+    /** @default "blue" */
+    color?: TrueColor;
+    /** Alias for `color`, matching the rest of the kit. */
+    tone?: TrueColor;
+    /** @default "sm" */
+    size?: ControlSize;
+    /** @deprecated Use Progress's `motion="shimmer"`. */
     showShimmer?: boolean;
 }
-export { default as MetricBar } from "./MetricBar.vue";
 declare const _default: import("vue").DefineComponent<MetricBarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MetricBarProps> & Readonly<{}>, {
-    color: SpinnerColor;
+    size: ControlSize;
     showShimmer: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/types/vue/src/components/Modal.vue.d.ts

@@ -81,11 +81,11 @@ export interface ConfirmModalProps extends Omit<ModalProps, "footer" | "actions"
 export declare const ConfirmModal: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     confirmLabel: {
         type: PropType<string | VNode>;
-        default: string;
+        default: undefined;
     };
     cancelLabel: {
         type: PropType<string | VNode>;
-        default: string;
+        default: undefined;
     };
     confirmVariant: {
         type: PropType<ButtonVariant>;
@@ -112,11 +112,11 @@ export declare const ConfirmModal: import("vue").DefineComponent<import("vue").E
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "confirm")[], "close" | "confirm", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     confirmLabel: {
         type: PropType<string | VNode>;
-        default: string;
+        default: undefined;
     };
     cancelLabel: {
         type: PropType<string | VNode>;
-        default: string;
+        default: undefined;
     };
     confirmVariant: {
         type: PropType<ButtonVariant>;
@@ -148,8 +148,8 @@ export declare const ConfirmModal: import("vue").DefineComponent<import("vue").E
     cancelLabel: string | VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }>;
-    confirmVariant: ButtonVariant;
-    confirmColor: import("../theme").TrueColor;
+    confirmVariant: "clear" | "solid" | "soft" | "outline" | "ghost" | "link" | "icon" | "glass";
+    confirmColor: "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "rose" | "slate" | "gray" | "zinc" | "neutral" | "stone";
     isConfirmDisabled: boolean;
     confirmButtonProps: ButtonProps & Record<string, unknown>;
     cancelButtonProps: ButtonProps & Record<string, unknown>;
@@ -179,15 +179,15 @@ export declare const DeleteConfirmModal: import("vue").DefineComponent<import("v
     };
     confirmValueLabel: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
     };
     confirmLabel: {
         type: PropType<string | VNode>;
-        default: string;
+        default: undefined;
     };
     cancelLabel: {
         type: PropType<string | VNode>;
-        default: string;
+        default: undefined;
     };
     isConfirmDisabled: {
         type: BooleanConstructor;
@@ -214,15 +214,15 @@ export declare const DeleteConfirmModal: import("vue").DefineComponent<import("v
     };
     confirmValueLabel: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
     };
     confirmLabel: {
         type: PropType<string | VNode>;
-        default: string;
+        default: undefined;
     };
     cancelLabel: {
         type: PropType<string | VNode>;
-        default: string;
+        default: undefined;
     };
     isConfirmDisabled: {
         type: BooleanConstructor;
@@ -262,15 +262,15 @@ export declare const ApplyConfirmModal: import("vue").DefineComponent<import("vu
     };
     confirmValueLabel: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
     };
     confirmLabel: {
         type: PropType<string | VNode>;
-        default: string;
+        default: undefined;
     };
     cancelLabel: {
         type: PropType<string | VNode>;
-        default: string;
+        default: undefined;
     };
     isConfirmDisabled: {
         type: BooleanConstructor;
@@ -297,15 +297,15 @@ export declare const ApplyConfirmModal: import("vue").DefineComponent<import("vu
     };
     confirmValueLabel: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
     };
     confirmLabel: {
         type: PropType<string | VNode>;
-        default: string;
+        default: undefined;
     };
     cancelLabel: {
         type: PropType<string | VNode>;
-        default: string;
+        default: undefined;
     };
     isConfirmDisabled: {
         type: BooleanConstructor;
@@ -347,7 +347,6 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ModalProps
     closeOnEsc: boolean;
     preventScroll: boolean;
     hideCloseButton: boolean;
-    backTooltip: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     title?: (props: {}) => any;
 } & {

package/dist/types/vue/src/components/MultiProgressBar.vue.d.ts

@@ -1,10 +1,16 @@
 import type { VNode } from "vue";
+import type { ControlSize, TrueColor } from "../theme/Theme";
 export interface MultiProgressBarSeries {
     key: string;
     label: string;
     labelClassName?: string;
     value: number;
-    /** Tailwind bg color class e.g., 'bg-rose-500'. Omit to auto-assign from the theme palette. */
+    /** Accent for this segment. Omit to auto-assign from the theme palette. */
+    tone?: TrueColor;
+    /**
+     * @deprecated Use `tone`. A raw class here cannot be dimmed or safelisted
+     * with the rest, and callers were passing shades the palette never emits.
+     */
     color?: string;
     /** Custom formatted value to display in legend, if omitted `value` is used */
     displayValue?: string | number | VNode;
@@ -17,8 +23,15 @@ export interface MultiProgressBarProps {
     totalLabel?: string;
     total: number;
     series: MultiProgressBarSeries[];
+    /** @default "md" */
+    size?: ControlSize;
+    /** Hide the legend under the bar. */
+    hideLegend?: boolean;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<MultiProgressBarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MultiProgressBarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<MultiProgressBarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MultiProgressBarProps> & Readonly<{}>, {
+    size: ControlSize;
+    hideLegend: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     secondaryLabel?: () => unknown;
     totalLabel?: () => unknown;
 }>;

package/dist/types/vue/src/components/MultiSelectPills.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/vue/src/components/MultiSelectPills.vue.d.ts

@@ -1,62 +1,62 @@
-import type { TrueColor } from "../theme/Theme";
+import type { ControlSize, TrueColor } from "../theme/Theme";
+import type { GlassOpacity, GlassVibrancy, SpecularMode } from "../theme/glass";
+import type { PillCorner, PillVariant } from "./Pill.vue";
 export type MultiSelectPillOption = {
     value: string;
     label: string;
     description?: string;
     disabled?: boolean;
+    /** Icon shown inside the pill. A registry name. */
+    icon?: string;
 };
 export interface MultiSelectPillsProps {
-    /**
-     * Used as the name for the generated hidden inputs (e.g. `${name}[]`).
-     */
+    /** Used as the name for the generated hidden inputs (e.g. `${name}[]`). */
     name: string;
-    /**
-     * Options rendered as pills.
-     */
+    /** Options rendered as pills. */
     options: MultiSelectPillOption[];
-    /**
-     * Optional legend displayed above the pill list.
-     */
+    /** Optional legend displayed above the pill list. */
     legend?: string;
-    /**
-     * Optional helper text rendered below the legend.
-     */
+    /** Optional helper text rendered below the legend. */
     description?: string;
-    /**
-     * Current selected values when using the component in a controlled way.
-     */
+    /** Current selected values when using the component in a controlled way. */
     modelValue?: string[];
-    /**
-     * Default selected values for uncontrolled usage.
-     */
+    /** Default selected values for uncontrolled usage. */
     defaultValue?: string[];
-    /**
-     * Disable the whole control.
-     */
+    /** Disable the whole control. */
     disabled?: boolean;
-    /**
-     * Tailwind size token controlling text size and padding.
-     */
-    size?: "xs" | "sm" | "base" | "lg";
-    /**
-     * Theme color used when a pill is selected.
-     * Accepts any TrueColor value. Defaults to "blue".
-     */
+    /** Size of the pills, on the shared control scale. @default "sm" */
+    size?: ControlSize;
+    /** Theme colour of a selected pill. @default "blue" */
     color?: TrueColor;
+    /** Corner rounding of the pills. @default "full" */
+    rounded?: PillCorner;
+    /** Gap between pills, on the shared control scale. @default "sm" */
+    gap?: ControlSize;
+    /** Selection behaviour. @default "multiple" */
+    selectionMode?: "multiple" | "single";
+    /** Variant of a selected pill. @default "solid" */
+    variant?: PillVariant;
+    /** Variant of an unselected pill. @default "outline" */
+    unselectedVariant?: PillVariant;
     /**
-     * Border radius of the pills.
-     * Defaults to "full" (fully rounded).
-     */
-    rounded?: "none" | "sm" | "md" | "lg" | "full";
-    /**
-     * Gap between pills.
-     * Defaults to "2".
+     * In single-select mode, whether clicking the selected pill clears it.
+     * @default true
      */
-    gap?: "1" | "1.5" | "2" | "3" | "4";
+    allowDeselect?: boolean;
     /**
-     * Selection behaviour. Defaults to multi-select.
+     * Swap a selected option's icon for a check mark, so selection is not
+     * signalled by colour alone — the `neutral` end of the tone scale barely
+     * changes between the two states. Options with no icon of their own gain
+     * one when selected, which does shift the row slightly.
+     * @default false
      */
-    selectionMode?: "multiple" | "single";
+    checkmark?: boolean;
+    /** Glass fill transparency, when a glass variant is used. */
+    glassOpacity?: GlassOpacity;
+    /** Backdrop vibrancy, when a glass variant is used. */
+    vibrancy?: GlassVibrancy;
+    /** Specular highlight, when a glass variant is used. */
+    specularMode?: SpecularMode;
 }
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<MultiSelectPillsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (selectedValues: string[]) => any;
@@ -65,13 +65,17 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<MultiSelec
     onChange?: ((selectedValues: string[]) => any) | undefined;
     "onUpdate:modelValue"?: ((selectedValues: string[]) => any) | undefined;
 }>, {
+    rounded: PillCorner;
+    size: ControlSize;
     color: TrueColor;
-    size: "xs" | "sm" | "base" | "lg";
     disabled: boolean;
-    rounded: "none" | "sm" | "md" | "lg" | "full";
-    gap: "1" | "1.5" | "2" | "3" | "4";
+    variant: PillVariant;
+    gap: ControlSize;
     defaultValue: string[];
     selectionMode: "multiple" | "single";
+    unselectedVariant: PillVariant;
+    allowDeselect: boolean;
+    checkmark: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     legend?: (props: {}) => any;
 } & {

package/dist/types/vue/src/components/MultiToggle.test.d.ts

@@ -0,0 +1 @@
+export {};