@sabrenski/spire-ui 0.0.5 → 0.0.7

package/dist/index.d.ts

@@ -18,6 +18,7 @@ import { DebuggerEvent } from 'vue';
 import { DefineComponent } from 'vue';
 import { GlobalComponents } from 'vue';
 import { GlobalDirectives } from 'vue';
+import { HTMLAttributes } from 'vue';
 import { InjectionKey } from 'vue';
 import { InputHTMLAttributes } from 'vue';
 import { nextTick } from 'vue';
@@ -265,6 +266,7 @@ popoverRef: ({
 $: ComponentInternalInstance;
 $data: {};
 $props: {
+readonly class?: ClassValue;
 readonly placement?: PopoverPlacement | undefined;
 readonly offset?: number | undefined;
 readonly arrow?: boolean | undefined;
@@ -385,6 +387,7 @@ modelValue: boolean;
 variant: DrawerVariant;
 size: DrawerSize;
 placement: DrawerPlacement;
+flush: boolean;
 closeOnEscape: boolean;
 maskClosable: boolean;
 showClose: boolean;
@@ -472,7 +475,7 @@ size: ModalSize;
 persistent: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {
 dialogRef: HTMLDialogElement;
-}, HTMLDialogElement>;
+}, any>;
 
 declare const __VLS_component_35: DefineComponent<PopoverProps, {
 open: typeof open_2;
@@ -953,6 +956,7 @@ declare function __VLS_template_25(): {
             $: ComponentInternalInstance;
             $data: {};
             $props: {
+                readonly class?: ClassValue;
                 readonly placement?: PopoverPlacement | undefined;
                 readonly offset?: number | undefined;
                 readonly arrow?: boolean | undefined;
@@ -1167,7 +1171,7 @@ declare function __VLS_template_34(): {
     refs: {
         dialogRef: HTMLDialogElement;
     };
-    rootEl: HTMLDialogElement;
+    rootEl: any;
 };
 
 declare function __VLS_template_35(): {
@@ -1935,6 +1939,8 @@ declare type __VLS_WithTemplateSlots_9<T, S> = T & {
 export declare const AccordionContent: __VLS_WithTemplateSlots_4<typeof __VLS_component_4, __VLS_TemplateResult_4["slots"]>;
 
 declare interface AccordionContentProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Lazy render - use v-if instead of v-show. Better performance but breaks Ctrl+F search. */
     lazy?: boolean;
 }
@@ -1942,6 +1948,8 @@ declare interface AccordionContentProps {
 export declare const AccordionItem: __VLS_WithTemplateSlots_2<typeof __VLS_component_2, __VLS_TemplateResult_2["slots"]>;
 
 export declare interface AccordionItemProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Unique identifier for this item */
     value: string;
     /** Disable this item */
@@ -1951,6 +1959,8 @@ export declare interface AccordionItemProps {
 export declare const AccordionRoot: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 
 export declare interface AccordionRootProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Currently open item(s) - single value or array for multiple mode */
     modelValue?: string | string[];
     /** Allow all items to be collapsed */
@@ -1964,6 +1974,8 @@ export declare interface AccordionRootProps {
 export declare const AccordionTrigger: __VLS_WithTemplateSlots_3<typeof __VLS_component_3, __VLS_TemplateResult_3["slots"]>;
 
 export declare interface AccordionTriggerProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Hide the default chevron indicator */
     hideIndicator?: boolean;
 }
@@ -1980,6 +1992,8 @@ bordered: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
 export declare interface AvatarProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Image source URL */
     src?: string;
     /** User name - used for alt text AND initials fallback */
@@ -2007,6 +2021,8 @@ export declare const Badge: __VLS_WithTemplateSlots_5<typeof __VLS_component_5,
 export declare const BadgeContainer: __VLS_WithTemplateSlots_6<typeof __VLS_component_6, __VLS_TemplateResult_6["slots"]>;
 
 export declare interface BadgeContainerProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Badge position relative to content */
     position?: BadgePosition;
     /** Horizontal offset adjustment (CSS value) */
@@ -2020,6 +2036,8 @@ export declare interface BadgeContainerProps {
 declare type BadgePosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
 
 export declare interface BadgeProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Color variant */
     variant?: BadgeVariant;
     /** Render as dot indicator instead of pill */
@@ -2039,6 +2057,8 @@ declare type BadgeVariant = 'default' | 'success' | 'warning' | 'danger' | 'info
 export declare const BarChart: __VLS_WithTemplateSlots_22<typeof __VLS_component_22, __VLS_TemplateResult_22["slots"]>;
 
 export declare interface BarChartProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** X-axis labels */
     labels: string[];
     /** Data series */
@@ -2071,6 +2091,8 @@ export declare interface BarChartSeries {
 export declare const BaseChart: __VLS_WithTemplateSlots_20<typeof __VLS_component_20, __VLS_TemplateResult_20["slots"]>;
 
 export declare interface BaseChartProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Chart type (line, bar, doughnut, pie, etc.) */
     type: ChartType;
     /** Chart.js data configuration */
@@ -2108,6 +2130,8 @@ export declare const BreadcrumbItem: __VLS_WithTemplateSlots_9<typeof __VLS_comp
 export declare const BreadcrumbLink: __VLS_WithTemplateSlots_10<typeof __VLS_component_10, __VLS_TemplateResult_10["slots"]>;
 
 export declare interface BreadcrumbLinkProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** URL for standard anchor */
     href?: string;
     /** Route location for vue-router (string or route object) */
@@ -2123,6 +2147,8 @@ export declare const BreadcrumbPage: __VLS_WithTemplateSlots_11<typeof __VLS_com
 export declare const BreadcrumbRoot: __VLS_WithTemplateSlots_7<typeof __VLS_component_7, __VLS_TemplateResult_7["slots"]>;
 
 export declare interface BreadcrumbRootProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Custom separator component or string */
     separator?: Component | string | (() => VNode);
 }
@@ -2132,6 +2158,8 @@ export declare const BreadcrumbSeparator: __VLS_WithTemplateSlots_12<typeof __VL
 export declare const Button: __VLS_WithTemplateSlots_14<typeof __VLS_component_14, __VLS_TemplateResult_14["slots"]>;
 
 export declare interface ButtonProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Visual style variant */
     variant?: 'primary' | 'secondary' | 'destructive' | 'ghost' | 'outline';
     /** Button size */
@@ -2167,6 +2195,8 @@ export declare interface CalendarDay {
 export declare const Callout: __VLS_WithTemplateSlots_15<typeof __VLS_component_15, __VLS_TemplateResult_15["slots"]>;
 
 export declare interface CalloutProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Visual variant determining color and icon */
     variant?: CalloutVariant;
     /** Title text (alternative to #title slot) */
@@ -2186,6 +2216,8 @@ export declare const Card: __VLS_WithTemplateSlots_16<typeof __VLS_component_16,
 export declare const CardContent: __VLS_WithTemplateSlots_18<typeof __VLS_component_18, __VLS_TemplateResult_18["slots"]>;
 
 export declare interface CardContentProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Remove default padding */
     flush?: boolean;
 }
@@ -2193,6 +2225,8 @@ export declare interface CardContentProps {
 export declare const CardFooter: __VLS_WithTemplateSlots_19<typeof __VLS_component_19, __VLS_TemplateResult_19["slots"]>;
 
 export declare interface CardFooterProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Content alignment */
     align?: 'start' | 'center' | 'end' | 'between';
     /** Remove separator border */
@@ -2202,6 +2236,8 @@ export declare interface CardFooterProps {
 export declare const CardHeader: __VLS_WithTemplateSlots_17<typeof __VLS_component_17, __VLS_TemplateResult_17["slots"]>;
 
 export declare interface CardHeaderProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Title text (alternative to slot) */
     title?: string;
     /** Subtitle text (alternative to slot) */
@@ -2224,6 +2260,8 @@ export declare type CardImageFit = 'cover' | 'contain' | 'fill';
 export declare type CardImagePosition = 'top' | 'bottom' | 'left' | 'right' | 'background';
 
 export declare interface CardImageProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Image source URL */
     src: string;
     /** Alt text for accessibility */
@@ -2241,6 +2279,8 @@ export declare interface CardImageProps {
 export declare type CardPadding = 'none' | 'sm' | 'md' | 'lg';
 
 export declare interface CardProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Visual style variant */
     variant?: CardVariant;
     /** Render as different element (article, section, aside, etc.) */
@@ -2298,18 +2338,23 @@ change: (value: boolean) => any;
 onChange?: ((value: boolean) => any) | undefined;
 }>, {
 modelValue: boolean;
+variant: "default" | "pill";
 size: "sm" | "md" | "lg";
 disabled: boolean;
 indeterminate: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {
 inputRef: HTMLInputElement;
-}, HTMLLabelElement>;
+}, any>;
 
 export declare interface CheckboxProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Checked state (v-model) */
     modelValue?: boolean;
     /** Indeterminate state (partial selection) */
     indeterminate?: boolean;
+    /** Visual variant */
+    variant?: 'default' | 'pill';
     /** Checkbox size */
     size?: 'sm' | 'md' | 'lg';
     /** Disabled state */
@@ -2339,6 +2384,8 @@ disabled: boolean;
 export declare const ChoiceChipGroup: __VLS_WithTemplateSlots_33<typeof __VLS_component_31, __VLS_TemplateResult_31["slots"]>;
 
 export declare interface ChoiceChipGroupProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Selected value(s) - single value for 'single' type, array for 'multiple' */
     modelValue?: string | number | (string | number)[];
     /** Selection type */
@@ -2350,6 +2397,8 @@ export declare interface ChoiceChipGroupProps {
 }
 
 export declare interface ChoiceChipProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Selected state for standalone usage (v-model) */
     modelValue?: boolean;
     /** Value for group usage */
@@ -2362,6 +2411,9 @@ export declare interface ChoiceChipProps {
     disabled?: boolean;
 }
 
+/** CSS class value - string, array, or object */
+export declare type ClassValue = HTMLAttributes['class'];
+
 /**
  * Clear all files
  */
@@ -2384,6 +2436,8 @@ areaRef: HTMLDivElement;
 }, HTMLDivElement>;
 
 export declare interface ColorAreaProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Hue value (0-360) */
     hue: number;
     /** Saturation value (0-1) */
@@ -2406,6 +2460,8 @@ swatchOnly: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
 export declare interface ColorPickerProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Current color value */
     modelValue: string;
     /** Output format */
@@ -2429,6 +2485,8 @@ trackRef: HTMLDivElement;
 }, HTMLDivElement>;
 
 export declare interface ColorSliderProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Current value (0-1 for alpha, 0-360 for hue) */
     modelValue: number;
     /** Slider type */
@@ -2473,6 +2531,8 @@ export declare interface ComboboxOption {
 }
 
 export declare interface ComboboxProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Selected value(s) - single value or array for multiple */
     modelValue?: string | number | (string | number)[] | null;
     /** Available options */
@@ -2526,6 +2586,8 @@ export declare function configureIcons(userIcons: Partial<IconMap>): void;
 export declare const Container: __VLS_WithTemplateSlots_57<typeof __VLS_component_54, __VLS_TemplateResult_54["slots"]>;
 
 export declare interface ContainerProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** If true, width is 100%. If false, max-width snaps to breakpoints. */
     fluid?: boolean;
     /** Auto margins (mx-auto). Default: true */
@@ -2558,6 +2620,8 @@ export declare interface DataTableColumn {
 }
 
 export declare interface DataTableProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Data array */
     data: Record<string, unknown>[];
     /** Column definitions */
@@ -2615,6 +2679,8 @@ export declare interface DataTableProps {
 export declare const DatePicker: __VLS_WithTemplateSlots_25<typeof __VLS_component_25, __VLS_TemplateResult_25["slots"]>;
 
 export declare interface DatePickerProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Selected date in ISO format (single mode) or [start, end] tuple (range mode) */
     modelValue?: string | [string, string];
     /** Selection mode */
@@ -2658,6 +2724,8 @@ export declare type Depth = 'flat' | 'subtle' | 'elevated' | 'dimensional';
 export declare const DonutChart: __VLS_WithTemplateSlots_23<typeof __VLS_component_23, __VLS_TemplateResult_23["slots"]>;
 
 export declare interface DonutChartProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Chart segments */
     segments: DonutChartSegment[];
     /** Chart height */
@@ -2687,6 +2755,8 @@ export declare const Drawer: __VLS_WithTemplateSlots_26<typeof __VLS_component_2
 export declare type DrawerPlacement = 'right' | 'left' | 'bottom';
 
 export declare interface DrawerProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Controls visibility (v-model) */
     modelValue?: boolean;
     /** Drawer title */
@@ -2705,6 +2775,8 @@ export declare interface DrawerProps {
     showClose?: boolean;
     /** Force specified placement on mobile (disable bottom sheet behavior) */
     forcePlacement?: boolean;
+    /** Remove body padding for flush content */
+    flush?: boolean;
 }
 
 export declare type DrawerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
@@ -2755,6 +2827,8 @@ export declare interface DropdownContext {
 export declare const DropdownItem: __VLS_WithTemplateSlots_28<typeof __VLS_component_27, __VLS_TemplateResult_27["slots"]>;
 
 export declare interface DropdownItemProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Renders as RouterLink when provided */
     to?: string | Record<string, unknown>;
     /** Renders as anchor when provided */
@@ -2776,6 +2850,8 @@ export declare interface DropdownItemProps {
 export declare type DropdownPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end';
 
 export declare interface DropdownProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Menu placement relative to trigger */
     placement?: DropdownPlacement;
     /** Offset from trigger (px) */
@@ -2820,6 +2896,8 @@ export declare interface DropdownSubContext {
 export declare const DropdownSubTrigger: __VLS_WithTemplateSlots_30<typeof __VLS_component_28, __VLS_TemplateResult_28["slots"]>;
 
 export declare interface DropdownSubTriggerProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Disabled state */
     disabled?: boolean;
     /** Leading icon */
@@ -2829,6 +2907,8 @@ export declare interface DropdownSubTriggerProps {
 export declare const EmptyState: __VLS_WithTemplateSlots_32<typeof __VLS_component_30, __VLS_TemplateResult_30["slots"]>;
 
 export declare interface EmptyStateProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Title text */
     title?: string;
     /** Description text */
@@ -2879,6 +2959,8 @@ inputRef: HTMLInputElement;
 }, HTMLDivElement>;
 
 export declare interface FileUploadProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Currently selected files (v-model) */
     modelValue?: UploadFile[];
     /** Accepted file types (MIME types or extensions) */
@@ -3115,6 +3197,8 @@ export declare const Grid: __VLS_WithTemplateSlots_59<typeof __VLS_component_56,
 export declare const GridItem: __VLS_WithTemplateSlots_60<typeof __VLS_component_57, __VLS_TemplateResult_57["slots"]>;
 
 export declare interface GridItemProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Number of columns to span (or responsive object) */
     span?: SpanCount | ResponsiveSpan;
     /** Grid column start */
@@ -3128,6 +3212,8 @@ export declare interface GridItemProps {
 }
 
 export declare interface GridProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Number of columns (or responsive object) */
     columns?: ColumnCount | ResponsiveColumns;
     /** Grid gap using spacing tokens */
@@ -3143,6 +3229,8 @@ export declare interface GridProps {
 export declare const Heading: __VLS_WithTemplateSlots_34<typeof __VLS_component_32, __VLS_TemplateResult_32["slots"]>;
 
 export declare interface HeadingProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Semantic HTML tag */
     as?: HeadingTag;
     /** Visual hierarchy size */
@@ -3217,6 +3305,8 @@ export declare interface IconMap {
 }
 
 export declare interface IconProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** The icon - Vue component OR HugeIcons data array */
     icon: IconInput;
     /** Predefined size or custom value */
@@ -3230,6 +3320,8 @@ export declare interface IconProps {
 export declare const Input: __VLS_WithTemplateSlots_35<typeof __VLS_component_33, __VLS_TemplateResult_33["slots"]>;
 
 export declare interface InputProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Input value (v-model) */
     modelValue?: string | number;
     /** Input type */
@@ -3343,6 +3435,8 @@ export declare interface LegendItem {
 export declare const LineChart: __VLS_WithTemplateSlots_21<typeof __VLS_component_21, __VLS_TemplateResult_21["slots"]>;
 
 export declare interface LineChartProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** X-axis labels */
     labels: string[];
     /** Data series */
@@ -3389,6 +3483,8 @@ declare type MaybeRef<T> = T | Ref<T>;
 export declare const Modal: __VLS_WithTemplateSlots_36<typeof __VLS_component_34, __VLS_TemplateResult_34["slots"]>;
 
 export declare interface ModalProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Controls visibility (v-model) */
     modelValue?: boolean;
     /** Optional header title */
@@ -3457,6 +3553,8 @@ export declare interface PaginationConfig {
 }
 
 export declare interface PaginationProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Current active page (v-model) */
     modelValue: number;
     /** Total count of items */
@@ -3520,6 +3618,8 @@ export declare const Popover: __VLS_WithTemplateSlots_37<typeof __VLS_component_
 export declare type PopoverPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
 
 export declare interface PopoverProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Popover placement relative to trigger */
     placement?: PopoverPlacement;
     /** Offset from trigger (px) */
@@ -3560,6 +3660,8 @@ showValue: boolean;
 export declare type ProgressColor = 'primary' | 'success' | 'warning' | 'error';
 
 export declare interface ProgressProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Current progress value (0-100) */
     value?: number;
     /** Display variant */
@@ -3593,15 +3695,20 @@ change: (value: string | number | boolean) => any;
 "onUpdate:modelValue"?: ((value: string | number | boolean) => any) | undefined;
 onChange?: ((value: string | number | boolean) => any) | undefined;
 }>, {
+variant: "default" | "pill";
 size: "sm" | "md" | "lg";
 disabled: boolean;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLLabelElement>;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
 export declare interface RadioProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Selected value (v-model) - shared across radio group */
     modelValue?: string | number | boolean;
     /** Value of this radio option */
     value: string | number | boolean;
+    /** Visual variant */
+    variant?: 'default' | 'pill';
     /** Radio size */
     size?: 'sm' | 'md' | 'lg';
     /** Disabled state */
@@ -3641,6 +3748,8 @@ allowHalf: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
 export declare interface RatingProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Current rating value (0 to max) */
     modelValue: number;
     /** Maximum rating value */
@@ -3723,6 +3832,8 @@ containerRef: HTMLDivElement;
 }, HTMLDivElement>;
 
 export declare interface SegmentedControlProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Array of options to display */
     options: SegmentedOption[];
     /** Selected value (v-model) */
@@ -3773,6 +3884,8 @@ export declare interface SelectOption {
 }
 
 export declare interface SelectProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Selected value (v-model) */
     modelValue?: string | number | null;
     /** Available options */
@@ -3814,6 +3927,8 @@ export declare interface SidebarGroupContext {
 export declare const SidebarGroupKey: InjectionKey<SidebarGroupContext>;
 
 export declare interface SidebarGroupProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Group label displayed when expanded */
     label?: string;
     /** Show separator line when collapsed */
@@ -3823,6 +3938,8 @@ export declare interface SidebarGroupProps {
 export declare const SidebarItem: __VLS_WithTemplateSlots_40<typeof __VLS_component_38, __VLS_TemplateResult_38["slots"]>;
 
 export declare interface SidebarItemProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Text label for the item */
     label: string;
     /** Icon component or HugeIcons data */
@@ -3846,6 +3963,8 @@ export declare const SidebarKey: InjectionKey<SidebarContext>;
 export declare const SidebarLayout: __VLS_WithTemplateSlots_38<typeof __VLS_component_36, __VLS_TemplateResult_36["slots"]>;
 
 export declare interface SidebarLayoutProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Position of the sidebar */
     sidebarPosition?: 'left' | 'right';
 }
@@ -3853,6 +3972,8 @@ export declare interface SidebarLayoutProps {
 export declare const SidebarRoot: __VLS_WithTemplateSlots_39<typeof __VLS_component_37, __VLS_TemplateResult_37["slots"]>;
 
 export declare interface SidebarRootProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Whether the sidebar is collapsed */
     modelValue?: boolean;
     /** Width when expanded */
@@ -3867,6 +3988,8 @@ animation: "shimmer" | "pulse" | "none";
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLSpanElement>;
 
 export declare interface SkeletonProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Shape variant */
     variant?: SkeletonVariant;
     /** Width (px, %, or CSS value) */
@@ -3898,6 +4021,8 @@ trackRef: HTMLDivElement;
 }, HTMLDivElement>;
 
 export declare interface SliderProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Current value (number for single, [min, max] tuple for range) */
     modelValue: number | [number, number];
     /** Minimum value */
@@ -3934,6 +4059,8 @@ speed: number;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
 export declare interface SpinnerProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Predefined size or custom value */
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | string;
     /** Animation speed in seconds */
@@ -3959,6 +4086,8 @@ tag: string;
 }>;
 
 export declare interface SpireProviderProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     theme?: Theme;
     mood?: Mood;
     depth?: Depth;
@@ -3970,6 +4099,8 @@ export declare interface SpireProviderProps {
 export declare const Stack: __VLS_WithTemplateSlots_58<typeof __VLS_component_55, __VLS_TemplateResult_55["slots"]>;
 
 export declare interface StackProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Flex direction */
     direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
     /** Gap using spacing tokens (maps to var(--space-X)) */
@@ -4013,6 +4144,8 @@ export declare interface StepperItemContext {
 export declare const StepperItemKey: InjectionKey<StepperItemContext>;
 
 export declare interface StepperItemProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Step index (0-based) */
     index: number;
     /** Disable this step */
@@ -4026,6 +4159,8 @@ export declare type StepperOrientation = 'horizontal' | 'vertical';
 export declare const StepperRoot: __VLS_WithTemplateSlots_43<typeof __VLS_component_40, __VLS_TemplateResult_40["slots"]>;
 
 export declare interface StepperRootProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Current step index (0-based, v-model) */
     modelValue?: number;
     /** Layout direction */
@@ -4041,6 +4176,8 @@ export declare const StepperSeparator: DefineComponent<    {}, {}, {}, {}, {}, C
 export declare const StepperTrigger: __VLS_WithTemplateSlots_45<typeof __VLS_component_42, __VLS_TemplateResult_42["slots"]>;
 
 export declare interface StepperTriggerProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Custom icon to display instead of step number */
     icon?: Component;
 }
@@ -4068,6 +4205,8 @@ loading: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLButtonElement>;
 
 export declare interface SwitchProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Checked state (v-model) */
     modelValue?: boolean;
     /** Switch size */
@@ -4098,6 +4237,8 @@ export declare interface TabItem {
 export declare const Tabs: __VLS_WithTemplateSlots_47<typeof __VLS_component_44, __VLS_TemplateResult_44["slots"]>;
 
 export declare interface TabsProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Currently active tab value (v-model) */
     modelValue: string | number;
     /** Tab items configuration */
@@ -4114,6 +4255,8 @@ export { Text_2 as Text }
 export declare const Textarea: __VLS_WithTemplateSlots_48<typeof __VLS_component_45, __VLS_TemplateResult_45["slots"]>;
 
 export declare interface TextareaProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Textarea value (v-model) */
     modelValue?: string;
     /** Label text above the textarea */
@@ -4151,6 +4294,8 @@ export declare interface TextareaProps {
 }
 
 export declare interface TextProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Semantic HTML tag */
     as?: TextTag;
     /** Font size */
@@ -4195,6 +4340,8 @@ export declare type TimelineDotColor = 'primary' | 'success' | 'warning' | 'dang
 export declare const TimelineItem: __VLS_WithTemplateSlots_51<typeof __VLS_component_48, __VLS_TemplateResult_48["slots"]>;
 
 export declare interface TimelineItemProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Dot color variant */
     dotColor?: TimelineDotColor;
     /** Custom icon in dot */
@@ -4206,6 +4353,8 @@ export declare const TimelineKey: InjectionKey<TimelineContext>;
 export declare type TimelineLineStyle = 'solid' | 'dashed' | 'dotted';
 
 export declare interface TimelineProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Content alignment relative to the spine */
     align?: TimelineAlign;
     /** Connector line style */
@@ -4237,6 +4386,7 @@ popoverRef: ({
 $: ComponentInternalInstance;
 $data: {};
 $props: {
+readonly class?: ClassValue;
 readonly placement?: PopoverPlacement | undefined;
 readonly offset?: number | undefined;
 readonly arrow?: boolean | undefined;
@@ -4343,6 +4493,8 @@ periodColumnRef: HTMLDivElement;
 }, HTMLDivElement>;
 
 export declare interface TimePickerProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Selected time in HH:mm format (24h) */
     modelValue?: string;
     /** Time display format */
@@ -4424,6 +4576,8 @@ onDismiss?: ((id: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
 export declare interface ToastItemProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Toast data */
     toast: Toast;
 }
@@ -4453,6 +4607,8 @@ position: "top-right" | "top-left" | "bottom-right" | "bottom-left" | "top-cente
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
 export declare interface ToastProviderProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Position of the toast container */
     position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
 }
@@ -4466,6 +4622,8 @@ declare function toggle_2(): void;
 export declare const ToggleButton: __VLS_WithTemplateSlots_52<typeof __VLS_component_49, __VLS_TemplateResult_49["slots"]>;
 
 export declare interface ToggleButtonProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Pressed state for standalone usage (v-model) */
     modelValue?: boolean;
     /** Value for group usage */
@@ -4485,6 +4643,8 @@ declare function toggleDataset(index: number): void;
 export declare const ToggleGroup: __VLS_WithTemplateSlots_53<typeof __VLS_component_50, __VLS_TemplateResult_50["slots"]>;
 
 export declare interface ToggleGroupProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Selected value(s) - single value for 'single' type, array for 'multiple' */
     modelValue?: string | number | (string | number)[];
     /** Selection type */
@@ -4513,6 +4673,8 @@ export declare interface TooltipData {
 }
 
 export declare interface TooltipProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Tooltip text content */
     text: string;
     /** Preferred placement (may flip on collision) */
@@ -4563,6 +4725,8 @@ export declare interface TreeViewItemContext {
 export declare const TreeViewItemKey: InjectionKey<TreeViewItemContext>;
 
 export declare interface TreeViewItemProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Node data */
     node: TreeNode;
 }
@@ -4570,6 +4734,8 @@ export declare interface TreeViewItemProps {
 export declare const TreeViewKey: InjectionKey<TreeViewContext>;
 
 export declare interface TreeViewProps {
+    /** Additional CSS classes */
+    class?: ClassValue;
     /** Hierarchical data */
     data: TreeNode[];
     /** Selected node ID(s) - v-model */