@sabrenski/spire-ui 0.0.6 → 0.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (86) hide show
  1. package/dist/index.d.ts +167 -4
  2. package/dist/spire-ui.css +1 -1
  3. package/dist/spire-ui.es.js +7005 -6741
  4. package/dist/spire-ui.umd.js +10 -10
  5. package/package.json +83 -70
  6. package/src/components/Accordion/AccordionContent.vue +5 -2
  7. package/src/components/Accordion/AccordionItem.vue +4 -0
  8. package/src/components/Accordion/AccordionRoot.vue +4 -2
  9. package/src/components/Accordion/AccordionTrigger.vue +4 -1
  10. package/src/components/Avatar/Avatar.vue +4 -0
  11. package/src/components/Badge/Badge.vue +4 -0
  12. package/src/components/BadgeContainer/BadgeContainer.vue +4 -1
  13. package/src/components/Breadcrumb/BreadcrumbLink.vue +4 -1
  14. package/src/components/Breadcrumb/BreadcrumbRoot.vue +4 -1
  15. package/src/components/Button/Button.vue +5 -1
  16. package/src/components/Callout/Callout.vue +4 -0
  17. package/src/components/Card/Card.vue +5 -1
  18. package/src/components/Card/CardContent.vue +5 -1
  19. package/src/components/Card/CardFooter.vue +5 -1
  20. package/src/components/Card/CardHeader.vue +5 -1
  21. package/src/components/Card/CardImage.vue +4 -2
  22. package/src/components/Chart/BarChart.vue +4 -0
  23. package/src/components/Chart/BaseChart.vue +52 -47
  24. package/src/components/Chart/DonutChart.vue +4 -2
  25. package/src/components/Chart/LineChart.vue +4 -0
  26. package/src/components/Checkbox/Checkbox.test.ts +94 -0
  27. package/src/components/Checkbox/Checkbox.vue +170 -1
  28. package/src/components/ChoiceChip/ChoiceChip.vue +11 -5
  29. package/src/components/ChoiceChipGroup/ChoiceChipGroup.vue +4 -2
  30. package/src/components/ColorPicker/ColorArea.vue +4 -2
  31. package/src/components/ColorPicker/ColorPicker.vue +4 -2
  32. package/src/components/ColorPicker/ColorSlider.vue +5 -1
  33. package/src/components/Combobox/Combobox.vue +97 -91
  34. package/src/components/DataTable/DataTable.vue +5 -1
  35. package/src/components/DatePicker/DatePicker.vue +5 -1
  36. package/src/components/Drawer/Drawer.vue +4 -1
  37. package/src/components/Dropdown/Dropdown.vue +4 -2
  38. package/src/components/Dropdown/DropdownItem.vue +4 -0
  39. package/src/components/Dropdown/DropdownSubTrigger.vue +4 -2
  40. package/src/components/EmptyState/EmptyState.vue +5 -1
  41. package/src/components/FileUpload/FileUpload.vue +12 -6
  42. package/src/components/Heading/Heading.vue +4 -0
  43. package/src/components/Icon/Icon.vue +5 -2
  44. package/src/components/Input/Input.vue +5 -1
  45. package/src/components/Layout/Container.vue +4 -0
  46. package/src/components/Layout/Grid.vue +4 -1
  47. package/src/components/Layout/GridItem.vue +4 -1
  48. package/src/components/Layout/Stack.vue +4 -0
  49. package/src/components/Modal/Modal.test.ts +68 -13
  50. package/src/components/Modal/Modal.vue +94 -91
  51. package/src/components/Pagination/Pagination.vue +5 -1
  52. package/src/components/Popover/Popover.vue +4 -1
  53. package/src/components/Progress/Progress.vue +5 -0
  54. package/src/components/Radio/Radio.test.ts +88 -0
  55. package/src/components/Radio/Radio.vue +169 -1
  56. package/src/components/Rating/Rating.vue +5 -1
  57. package/src/components/SegmentedControl/SegmentedControl.vue +5 -1
  58. package/src/components/Select/Select.vue +61 -55
  59. package/src/components/Sidebar/SidebarGroup.vue +4 -0
  60. package/src/components/Sidebar/SidebarItem.vue +4 -0
  61. package/src/components/Sidebar/SidebarLayout.vue +5 -2
  62. package/src/components/Sidebar/SidebarRoot.vue +4 -2
  63. package/src/components/Skeleton/Skeleton.vue +5 -1
  64. package/src/components/Slider/Slider.vue +5 -1
  65. package/src/components/Spinner/Spinner.vue +4 -1
  66. package/src/components/SpireProvider/SpireProvider.vue +4 -1
  67. package/src/components/Stepper/StepperItem.vue +4 -0
  68. package/src/components/Stepper/StepperRoot.vue +4 -2
  69. package/src/components/Stepper/StepperTrigger.vue +6 -2
  70. package/src/components/Switch/Switch.vue +5 -1
  71. package/src/components/Tabs/Tabs.vue +4 -1
  72. package/src/components/Text/Text.vue +4 -0
  73. package/src/components/Textarea/Textarea.vue +13 -7
  74. package/src/components/TimePicker/TimePicker.vue +5 -1
  75. package/src/components/Timeline/Timeline.vue +4 -0
  76. package/src/components/Timeline/TimelineItem.vue +4 -0
  77. package/src/components/Toast/ToastItem.vue +5 -1
  78. package/src/components/Toast/ToastProvider.vue +5 -3
  79. package/src/components/ToggleButton/ToggleButton.vue +5 -1
  80. package/src/components/ToggleGroup/ToggleGroup.vue +5 -1
  81. package/src/components/Tooltip/Tooltip.vue +9 -1
  82. package/src/components/TreeView/TreeView.vue +4 -1
  83. package/src/components/TreeView/TreeViewItem.vue +4 -0
  84. package/src/index.ts +3 -0
  85. package/src/styles/main.css +21 -21
  86. package/src/types/common.ts +4 -0
package/dist/index.d.ts CHANGED
@@ -18,6 +18,7 @@ import { DebuggerEvent } from 'vue';
18
18
  import { DefineComponent } from 'vue';
19
19
  import { GlobalComponents } from 'vue';
20
20
  import { GlobalDirectives } from 'vue';
21
+ import { HTMLAttributes } from 'vue';
21
22
  import { InjectionKey } from 'vue';
22
23
  import { InputHTMLAttributes } from 'vue';
23
24
  import { nextTick } from 'vue';
@@ -265,6 +266,7 @@ popoverRef: ({
265
266
  $: ComponentInternalInstance;
266
267
  $data: {};
267
268
  $props: {
269
+ readonly class?: ClassValue;
268
270
  readonly placement?: PopoverPlacement | undefined;
269
271
  readonly offset?: number | undefined;
270
272
  readonly arrow?: boolean | undefined;
@@ -473,7 +475,7 @@ size: ModalSize;
473
475
  persistent: boolean;
474
476
  }, {}, {}, {}, string, ComponentProvideOptions, false, {
475
477
  dialogRef: HTMLDialogElement;
476
- }, HTMLDialogElement>;
478
+ }, any>;
477
479
 
478
480
  declare const __VLS_component_35: DefineComponent<PopoverProps, {
479
481
  open: typeof open_2;
@@ -954,6 +956,7 @@ declare function __VLS_template_25(): {
954
956
  $: ComponentInternalInstance;
955
957
  $data: {};
956
958
  $props: {
959
+ readonly class?: ClassValue;
957
960
  readonly placement?: PopoverPlacement | undefined;
958
961
  readonly offset?: number | undefined;
959
962
  readonly arrow?: boolean | undefined;
@@ -1168,7 +1171,7 @@ declare function __VLS_template_34(): {
1168
1171
  refs: {
1169
1172
  dialogRef: HTMLDialogElement;
1170
1173
  };
1171
- rootEl: HTMLDialogElement;
1174
+ rootEl: any;
1172
1175
  };
1173
1176
 
1174
1177
  declare function __VLS_template_35(): {
@@ -1936,6 +1939,8 @@ declare type __VLS_WithTemplateSlots_9<T, S> = T & {
1936
1939
  export declare const AccordionContent: __VLS_WithTemplateSlots_4<typeof __VLS_component_4, __VLS_TemplateResult_4["slots"]>;
1937
1940
 
1938
1941
  declare interface AccordionContentProps {
1942
+ /** Additional CSS classes */
1943
+ class?: ClassValue;
1939
1944
  /** Lazy render - use v-if instead of v-show. Better performance but breaks Ctrl+F search. */
1940
1945
  lazy?: boolean;
1941
1946
  }
@@ -1943,6 +1948,8 @@ declare interface AccordionContentProps {
1943
1948
  export declare const AccordionItem: __VLS_WithTemplateSlots_2<typeof __VLS_component_2, __VLS_TemplateResult_2["slots"]>;
1944
1949
 
1945
1950
  export declare interface AccordionItemProps {
1951
+ /** Additional CSS classes */
1952
+ class?: ClassValue;
1946
1953
  /** Unique identifier for this item */
1947
1954
  value: string;
1948
1955
  /** Disable this item */
@@ -1952,6 +1959,8 @@ export declare interface AccordionItemProps {
1952
1959
  export declare const AccordionRoot: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
1953
1960
 
1954
1961
  export declare interface AccordionRootProps {
1962
+ /** Additional CSS classes */
1963
+ class?: ClassValue;
1955
1964
  /** Currently open item(s) - single value or array for multiple mode */
1956
1965
  modelValue?: string | string[];
1957
1966
  /** Allow all items to be collapsed */
@@ -1965,6 +1974,8 @@ export declare interface AccordionRootProps {
1965
1974
  export declare const AccordionTrigger: __VLS_WithTemplateSlots_3<typeof __VLS_component_3, __VLS_TemplateResult_3["slots"]>;
1966
1975
 
1967
1976
  export declare interface AccordionTriggerProps {
1977
+ /** Additional CSS classes */
1978
+ class?: ClassValue;
1968
1979
  /** Hide the default chevron indicator */
1969
1980
  hideIndicator?: boolean;
1970
1981
  }
@@ -1981,6 +1992,8 @@ bordered: boolean;
1981
1992
  }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
1982
1993
 
1983
1994
  export declare interface AvatarProps {
1995
+ /** Additional CSS classes */
1996
+ class?: ClassValue;
1984
1997
  /** Image source URL */
1985
1998
  src?: string;
1986
1999
  /** User name - used for alt text AND initials fallback */
@@ -2008,6 +2021,8 @@ export declare const Badge: __VLS_WithTemplateSlots_5<typeof __VLS_component_5,
2008
2021
  export declare const BadgeContainer: __VLS_WithTemplateSlots_6<typeof __VLS_component_6, __VLS_TemplateResult_6["slots"]>;
2009
2022
 
2010
2023
  export declare interface BadgeContainerProps {
2024
+ /** Additional CSS classes */
2025
+ class?: ClassValue;
2011
2026
  /** Badge position relative to content */
2012
2027
  position?: BadgePosition;
2013
2028
  /** Horizontal offset adjustment (CSS value) */
@@ -2021,6 +2036,8 @@ export declare interface BadgeContainerProps {
2021
2036
  declare type BadgePosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
2022
2037
 
2023
2038
  export declare interface BadgeProps {
2039
+ /** Additional CSS classes */
2040
+ class?: ClassValue;
2024
2041
  /** Color variant */
2025
2042
  variant?: BadgeVariant;
2026
2043
  /** Render as dot indicator instead of pill */
@@ -2040,6 +2057,8 @@ declare type BadgeVariant = 'default' | 'success' | 'warning' | 'danger' | 'info
2040
2057
  export declare const BarChart: __VLS_WithTemplateSlots_22<typeof __VLS_component_22, __VLS_TemplateResult_22["slots"]>;
2041
2058
 
2042
2059
  export declare interface BarChartProps {
2060
+ /** Additional CSS classes */
2061
+ class?: ClassValue;
2043
2062
  /** X-axis labels */
2044
2063
  labels: string[];
2045
2064
  /** Data series */
@@ -2072,6 +2091,8 @@ export declare interface BarChartSeries {
2072
2091
  export declare const BaseChart: __VLS_WithTemplateSlots_20<typeof __VLS_component_20, __VLS_TemplateResult_20["slots"]>;
2073
2092
 
2074
2093
  export declare interface BaseChartProps {
2094
+ /** Additional CSS classes */
2095
+ class?: ClassValue;
2075
2096
  /** Chart type (line, bar, doughnut, pie, etc.) */
2076
2097
  type: ChartType;
2077
2098
  /** Chart.js data configuration */
@@ -2109,6 +2130,8 @@ export declare const BreadcrumbItem: __VLS_WithTemplateSlots_9<typeof __VLS_comp
2109
2130
  export declare const BreadcrumbLink: __VLS_WithTemplateSlots_10<typeof __VLS_component_10, __VLS_TemplateResult_10["slots"]>;
2110
2131
 
2111
2132
  export declare interface BreadcrumbLinkProps {
2133
+ /** Additional CSS classes */
2134
+ class?: ClassValue;
2112
2135
  /** URL for standard anchor */
2113
2136
  href?: string;
2114
2137
  /** Route location for vue-router (string or route object) */
@@ -2124,6 +2147,8 @@ export declare const BreadcrumbPage: __VLS_WithTemplateSlots_11<typeof __VLS_com
2124
2147
  export declare const BreadcrumbRoot: __VLS_WithTemplateSlots_7<typeof __VLS_component_7, __VLS_TemplateResult_7["slots"]>;
2125
2148
 
2126
2149
  export declare interface BreadcrumbRootProps {
2150
+ /** Additional CSS classes */
2151
+ class?: ClassValue;
2127
2152
  /** Custom separator component or string */
2128
2153
  separator?: Component | string | (() => VNode);
2129
2154
  }
@@ -2133,6 +2158,8 @@ export declare const BreadcrumbSeparator: __VLS_WithTemplateSlots_12<typeof __VL
2133
2158
  export declare const Button: __VLS_WithTemplateSlots_14<typeof __VLS_component_14, __VLS_TemplateResult_14["slots"]>;
2134
2159
 
2135
2160
  export declare interface ButtonProps {
2161
+ /** Additional CSS classes */
2162
+ class?: ClassValue;
2136
2163
  /** Visual style variant */
2137
2164
  variant?: 'primary' | 'secondary' | 'destructive' | 'ghost' | 'outline';
2138
2165
  /** Button size */
@@ -2168,6 +2195,8 @@ export declare interface CalendarDay {
2168
2195
  export declare const Callout: __VLS_WithTemplateSlots_15<typeof __VLS_component_15, __VLS_TemplateResult_15["slots"]>;
2169
2196
 
2170
2197
  export declare interface CalloutProps {
2198
+ /** Additional CSS classes */
2199
+ class?: ClassValue;
2171
2200
  /** Visual variant determining color and icon */
2172
2201
  variant?: CalloutVariant;
2173
2202
  /** Title text (alternative to #title slot) */
@@ -2187,6 +2216,8 @@ export declare const Card: __VLS_WithTemplateSlots_16<typeof __VLS_component_16,
2187
2216
  export declare const CardContent: __VLS_WithTemplateSlots_18<typeof __VLS_component_18, __VLS_TemplateResult_18["slots"]>;
2188
2217
 
2189
2218
  export declare interface CardContentProps {
2219
+ /** Additional CSS classes */
2220
+ class?: ClassValue;
2190
2221
  /** Remove default padding */
2191
2222
  flush?: boolean;
2192
2223
  }
@@ -2194,6 +2225,8 @@ export declare interface CardContentProps {
2194
2225
  export declare const CardFooter: __VLS_WithTemplateSlots_19<typeof __VLS_component_19, __VLS_TemplateResult_19["slots"]>;
2195
2226
 
2196
2227
  export declare interface CardFooterProps {
2228
+ /** Additional CSS classes */
2229
+ class?: ClassValue;
2197
2230
  /** Content alignment */
2198
2231
  align?: 'start' | 'center' | 'end' | 'between';
2199
2232
  /** Remove separator border */
@@ -2203,6 +2236,8 @@ export declare interface CardFooterProps {
2203
2236
  export declare const CardHeader: __VLS_WithTemplateSlots_17<typeof __VLS_component_17, __VLS_TemplateResult_17["slots"]>;
2204
2237
 
2205
2238
  export declare interface CardHeaderProps {
2239
+ /** Additional CSS classes */
2240
+ class?: ClassValue;
2206
2241
  /** Title text (alternative to slot) */
2207
2242
  title?: string;
2208
2243
  /** Subtitle text (alternative to slot) */
@@ -2225,6 +2260,8 @@ export declare type CardImageFit = 'cover' | 'contain' | 'fill';
2225
2260
  export declare type CardImagePosition = 'top' | 'bottom' | 'left' | 'right' | 'background';
2226
2261
 
2227
2262
  export declare interface CardImageProps {
2263
+ /** Additional CSS classes */
2264
+ class?: ClassValue;
2228
2265
  /** Image source URL */
2229
2266
  src: string;
2230
2267
  /** Alt text for accessibility */
@@ -2242,6 +2279,8 @@ export declare interface CardImageProps {
2242
2279
  export declare type CardPadding = 'none' | 'sm' | 'md' | 'lg';
2243
2280
 
2244
2281
  export declare interface CardProps {
2282
+ /** Additional CSS classes */
2283
+ class?: ClassValue;
2245
2284
  /** Visual style variant */
2246
2285
  variant?: CardVariant;
2247
2286
  /** Render as different element (article, section, aside, etc.) */
@@ -2299,18 +2338,23 @@ change: (value: boolean) => any;
2299
2338
  onChange?: ((value: boolean) => any) | undefined;
2300
2339
  }>, {
2301
2340
  modelValue: boolean;
2341
+ variant: "default" | "pill";
2302
2342
  size: "sm" | "md" | "lg";
2303
2343
  disabled: boolean;
2304
2344
  indeterminate: boolean;
2305
2345
  }, {}, {}, {}, string, ComponentProvideOptions, false, {
2306
2346
  inputRef: HTMLInputElement;
2307
- }, HTMLLabelElement>;
2347
+ }, any>;
2308
2348
 
2309
2349
  export declare interface CheckboxProps {
2350
+ /** Additional CSS classes */
2351
+ class?: ClassValue;
2310
2352
  /** Checked state (v-model) */
2311
2353
  modelValue?: boolean;
2312
2354
  /** Indeterminate state (partial selection) */
2313
2355
  indeterminate?: boolean;
2356
+ /** Visual variant */
2357
+ variant?: 'default' | 'pill';
2314
2358
  /** Checkbox size */
2315
2359
  size?: 'sm' | 'md' | 'lg';
2316
2360
  /** Disabled state */
@@ -2340,6 +2384,8 @@ disabled: boolean;
2340
2384
  export declare const ChoiceChipGroup: __VLS_WithTemplateSlots_33<typeof __VLS_component_31, __VLS_TemplateResult_31["slots"]>;
2341
2385
 
2342
2386
  export declare interface ChoiceChipGroupProps {
2387
+ /** Additional CSS classes */
2388
+ class?: ClassValue;
2343
2389
  /** Selected value(s) - single value for 'single' type, array for 'multiple' */
2344
2390
  modelValue?: string | number | (string | number)[];
2345
2391
  /** Selection type */
@@ -2351,6 +2397,8 @@ export declare interface ChoiceChipGroupProps {
2351
2397
  }
2352
2398
 
2353
2399
  export declare interface ChoiceChipProps {
2400
+ /** Additional CSS classes */
2401
+ class?: ClassValue;
2354
2402
  /** Selected state for standalone usage (v-model) */
2355
2403
  modelValue?: boolean;
2356
2404
  /** Value for group usage */
@@ -2363,6 +2411,9 @@ export declare interface ChoiceChipProps {
2363
2411
  disabled?: boolean;
2364
2412
  }
2365
2413
 
2414
+ /** CSS class value - string, array, or object */
2415
+ export declare type ClassValue = HTMLAttributes['class'];
2416
+
2366
2417
  /**
2367
2418
  * Clear all files
2368
2419
  */
@@ -2385,6 +2436,8 @@ areaRef: HTMLDivElement;
2385
2436
  }, HTMLDivElement>;
2386
2437
 
2387
2438
  export declare interface ColorAreaProps {
2439
+ /** Additional CSS classes */
2440
+ class?: ClassValue;
2388
2441
  /** Hue value (0-360) */
2389
2442
  hue: number;
2390
2443
  /** Saturation value (0-1) */
@@ -2407,6 +2460,8 @@ swatchOnly: boolean;
2407
2460
  }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
2408
2461
 
2409
2462
  export declare interface ColorPickerProps {
2463
+ /** Additional CSS classes */
2464
+ class?: ClassValue;
2410
2465
  /** Current color value */
2411
2466
  modelValue: string;
2412
2467
  /** Output format */
@@ -2430,6 +2485,8 @@ trackRef: HTMLDivElement;
2430
2485
  }, HTMLDivElement>;
2431
2486
 
2432
2487
  export declare interface ColorSliderProps {
2488
+ /** Additional CSS classes */
2489
+ class?: ClassValue;
2433
2490
  /** Current value (0-1 for alpha, 0-360 for hue) */
2434
2491
  modelValue: number;
2435
2492
  /** Slider type */
@@ -2474,6 +2531,8 @@ export declare interface ComboboxOption {
2474
2531
  }
2475
2532
 
2476
2533
  export declare interface ComboboxProps {
2534
+ /** Additional CSS classes */
2535
+ class?: ClassValue;
2477
2536
  /** Selected value(s) - single value or array for multiple */
2478
2537
  modelValue?: string | number | (string | number)[] | null;
2479
2538
  /** Available options */
@@ -2527,6 +2586,8 @@ export declare function configureIcons(userIcons: Partial<IconMap>): void;
2527
2586
  export declare const Container: __VLS_WithTemplateSlots_57<typeof __VLS_component_54, __VLS_TemplateResult_54["slots"]>;
2528
2587
 
2529
2588
  export declare interface ContainerProps {
2589
+ /** Additional CSS classes */
2590
+ class?: ClassValue;
2530
2591
  /** If true, width is 100%. If false, max-width snaps to breakpoints. */
2531
2592
  fluid?: boolean;
2532
2593
  /** Auto margins (mx-auto). Default: true */
@@ -2559,6 +2620,8 @@ export declare interface DataTableColumn {
2559
2620
  }
2560
2621
 
2561
2622
  export declare interface DataTableProps {
2623
+ /** Additional CSS classes */
2624
+ class?: ClassValue;
2562
2625
  /** Data array */
2563
2626
  data: Record<string, unknown>[];
2564
2627
  /** Column definitions */
@@ -2616,6 +2679,8 @@ export declare interface DataTableProps {
2616
2679
  export declare const DatePicker: __VLS_WithTemplateSlots_25<typeof __VLS_component_25, __VLS_TemplateResult_25["slots"]>;
2617
2680
 
2618
2681
  export declare interface DatePickerProps {
2682
+ /** Additional CSS classes */
2683
+ class?: ClassValue;
2619
2684
  /** Selected date in ISO format (single mode) or [start, end] tuple (range mode) */
2620
2685
  modelValue?: string | [string, string];
2621
2686
  /** Selection mode */
@@ -2659,6 +2724,8 @@ export declare type Depth = 'flat' | 'subtle' | 'elevated' | 'dimensional';
2659
2724
  export declare const DonutChart: __VLS_WithTemplateSlots_23<typeof __VLS_component_23, __VLS_TemplateResult_23["slots"]>;
2660
2725
 
2661
2726
  export declare interface DonutChartProps {
2727
+ /** Additional CSS classes */
2728
+ class?: ClassValue;
2662
2729
  /** Chart segments */
2663
2730
  segments: DonutChartSegment[];
2664
2731
  /** Chart height */
@@ -2688,6 +2755,8 @@ export declare const Drawer: __VLS_WithTemplateSlots_26<typeof __VLS_component_2
2688
2755
  export declare type DrawerPlacement = 'right' | 'left' | 'bottom';
2689
2756
 
2690
2757
  export declare interface DrawerProps {
2758
+ /** Additional CSS classes */
2759
+ class?: ClassValue;
2691
2760
  /** Controls visibility (v-model) */
2692
2761
  modelValue?: boolean;
2693
2762
  /** Drawer title */
@@ -2758,6 +2827,8 @@ export declare interface DropdownContext {
2758
2827
  export declare const DropdownItem: __VLS_WithTemplateSlots_28<typeof __VLS_component_27, __VLS_TemplateResult_27["slots"]>;
2759
2828
 
2760
2829
  export declare interface DropdownItemProps {
2830
+ /** Additional CSS classes */
2831
+ class?: ClassValue;
2761
2832
  /** Renders as RouterLink when provided */
2762
2833
  to?: string | Record<string, unknown>;
2763
2834
  /** Renders as anchor when provided */
@@ -2779,6 +2850,8 @@ export declare interface DropdownItemProps {
2779
2850
  export declare type DropdownPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end';
2780
2851
 
2781
2852
  export declare interface DropdownProps {
2853
+ /** Additional CSS classes */
2854
+ class?: ClassValue;
2782
2855
  /** Menu placement relative to trigger */
2783
2856
  placement?: DropdownPlacement;
2784
2857
  /** Offset from trigger (px) */
@@ -2823,6 +2896,8 @@ export declare interface DropdownSubContext {
2823
2896
  export declare const DropdownSubTrigger: __VLS_WithTemplateSlots_30<typeof __VLS_component_28, __VLS_TemplateResult_28["slots"]>;
2824
2897
 
2825
2898
  export declare interface DropdownSubTriggerProps {
2899
+ /** Additional CSS classes */
2900
+ class?: ClassValue;
2826
2901
  /** Disabled state */
2827
2902
  disabled?: boolean;
2828
2903
  /** Leading icon */
@@ -2832,6 +2907,8 @@ export declare interface DropdownSubTriggerProps {
2832
2907
  export declare const EmptyState: __VLS_WithTemplateSlots_32<typeof __VLS_component_30, __VLS_TemplateResult_30["slots"]>;
2833
2908
 
2834
2909
  export declare interface EmptyStateProps {
2910
+ /** Additional CSS classes */
2911
+ class?: ClassValue;
2835
2912
  /** Title text */
2836
2913
  title?: string;
2837
2914
  /** Description text */
@@ -2882,6 +2959,8 @@ inputRef: HTMLInputElement;
2882
2959
  }, HTMLDivElement>;
2883
2960
 
2884
2961
  export declare interface FileUploadProps {
2962
+ /** Additional CSS classes */
2963
+ class?: ClassValue;
2885
2964
  /** Currently selected files (v-model) */
2886
2965
  modelValue?: UploadFile[];
2887
2966
  /** Accepted file types (MIME types or extensions) */
@@ -3118,6 +3197,8 @@ export declare const Grid: __VLS_WithTemplateSlots_59<typeof __VLS_component_56,
3118
3197
  export declare const GridItem: __VLS_WithTemplateSlots_60<typeof __VLS_component_57, __VLS_TemplateResult_57["slots"]>;
3119
3198
 
3120
3199
  export declare interface GridItemProps {
3200
+ /** Additional CSS classes */
3201
+ class?: ClassValue;
3121
3202
  /** Number of columns to span (or responsive object) */
3122
3203
  span?: SpanCount | ResponsiveSpan;
3123
3204
  /** Grid column start */
@@ -3131,6 +3212,8 @@ export declare interface GridItemProps {
3131
3212
  }
3132
3213
 
3133
3214
  export declare interface GridProps {
3215
+ /** Additional CSS classes */
3216
+ class?: ClassValue;
3134
3217
  /** Number of columns (or responsive object) */
3135
3218
  columns?: ColumnCount | ResponsiveColumns;
3136
3219
  /** Grid gap using spacing tokens */
@@ -3146,6 +3229,8 @@ export declare interface GridProps {
3146
3229
  export declare const Heading: __VLS_WithTemplateSlots_34<typeof __VLS_component_32, __VLS_TemplateResult_32["slots"]>;
3147
3230
 
3148
3231
  export declare interface HeadingProps {
3232
+ /** Additional CSS classes */
3233
+ class?: ClassValue;
3149
3234
  /** Semantic HTML tag */
3150
3235
  as?: HeadingTag;
3151
3236
  /** Visual hierarchy size */
@@ -3220,6 +3305,8 @@ export declare interface IconMap {
3220
3305
  }
3221
3306
 
3222
3307
  export declare interface IconProps {
3308
+ /** Additional CSS classes */
3309
+ class?: ClassValue;
3223
3310
  /** The icon - Vue component OR HugeIcons data array */
3224
3311
  icon: IconInput;
3225
3312
  /** Predefined size or custom value */
@@ -3233,6 +3320,8 @@ export declare interface IconProps {
3233
3320
  export declare const Input: __VLS_WithTemplateSlots_35<typeof __VLS_component_33, __VLS_TemplateResult_33["slots"]>;
3234
3321
 
3235
3322
  export declare interface InputProps {
3323
+ /** Additional CSS classes */
3324
+ class?: ClassValue;
3236
3325
  /** Input value (v-model) */
3237
3326
  modelValue?: string | number;
3238
3327
  /** Input type */
@@ -3346,6 +3435,8 @@ export declare interface LegendItem {
3346
3435
  export declare const LineChart: __VLS_WithTemplateSlots_21<typeof __VLS_component_21, __VLS_TemplateResult_21["slots"]>;
3347
3436
 
3348
3437
  export declare interface LineChartProps {
3438
+ /** Additional CSS classes */
3439
+ class?: ClassValue;
3349
3440
  /** X-axis labels */
3350
3441
  labels: string[];
3351
3442
  /** Data series */
@@ -3392,6 +3483,8 @@ declare type MaybeRef<T> = T | Ref<T>;
3392
3483
  export declare const Modal: __VLS_WithTemplateSlots_36<typeof __VLS_component_34, __VLS_TemplateResult_34["slots"]>;
3393
3484
 
3394
3485
  export declare interface ModalProps {
3486
+ /** Additional CSS classes */
3487
+ class?: ClassValue;
3395
3488
  /** Controls visibility (v-model) */
3396
3489
  modelValue?: boolean;
3397
3490
  /** Optional header title */
@@ -3460,6 +3553,8 @@ export declare interface PaginationConfig {
3460
3553
  }
3461
3554
 
3462
3555
  export declare interface PaginationProps {
3556
+ /** Additional CSS classes */
3557
+ class?: ClassValue;
3463
3558
  /** Current active page (v-model) */
3464
3559
  modelValue: number;
3465
3560
  /** Total count of items */
@@ -3523,6 +3618,8 @@ export declare const Popover: __VLS_WithTemplateSlots_37<typeof __VLS_component_
3523
3618
  export declare type PopoverPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
3524
3619
 
3525
3620
  export declare interface PopoverProps {
3621
+ /** Additional CSS classes */
3622
+ class?: ClassValue;
3526
3623
  /** Popover placement relative to trigger */
3527
3624
  placement?: PopoverPlacement;
3528
3625
  /** Offset from trigger (px) */
@@ -3563,6 +3660,8 @@ showValue: boolean;
3563
3660
  export declare type ProgressColor = 'primary' | 'success' | 'warning' | 'error';
3564
3661
 
3565
3662
  export declare interface ProgressProps {
3663
+ /** Additional CSS classes */
3664
+ class?: ClassValue;
3566
3665
  /** Current progress value (0-100) */
3567
3666
  value?: number;
3568
3667
  /** Display variant */
@@ -3596,15 +3695,20 @@ change: (value: string | number | boolean) => any;
3596
3695
  "onUpdate:modelValue"?: ((value: string | number | boolean) => any) | undefined;
3597
3696
  onChange?: ((value: string | number | boolean) => any) | undefined;
3598
3697
  }>, {
3698
+ variant: "default" | "pill";
3599
3699
  size: "sm" | "md" | "lg";
3600
3700
  disabled: boolean;
3601
- }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLLabelElement>;
3701
+ }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
3602
3702
 
3603
3703
  export declare interface RadioProps {
3704
+ /** Additional CSS classes */
3705
+ class?: ClassValue;
3604
3706
  /** Selected value (v-model) - shared across radio group */
3605
3707
  modelValue?: string | number | boolean;
3606
3708
  /** Value of this radio option */
3607
3709
  value: string | number | boolean;
3710
+ /** Visual variant */
3711
+ variant?: 'default' | 'pill';
3608
3712
  /** Radio size */
3609
3713
  size?: 'sm' | 'md' | 'lg';
3610
3714
  /** Disabled state */
@@ -3644,6 +3748,8 @@ allowHalf: boolean;
3644
3748
  }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
3645
3749
 
3646
3750
  export declare interface RatingProps {
3751
+ /** Additional CSS classes */
3752
+ class?: ClassValue;
3647
3753
  /** Current rating value (0 to max) */
3648
3754
  modelValue: number;
3649
3755
  /** Maximum rating value */
@@ -3726,6 +3832,8 @@ containerRef: HTMLDivElement;
3726
3832
  }, HTMLDivElement>;
3727
3833
 
3728
3834
  export declare interface SegmentedControlProps {
3835
+ /** Additional CSS classes */
3836
+ class?: ClassValue;
3729
3837
  /** Array of options to display */
3730
3838
  options: SegmentedOption[];
3731
3839
  /** Selected value (v-model) */
@@ -3776,6 +3884,8 @@ export declare interface SelectOption {
3776
3884
  }
3777
3885
 
3778
3886
  export declare interface SelectProps {
3887
+ /** Additional CSS classes */
3888
+ class?: ClassValue;
3779
3889
  /** Selected value (v-model) */
3780
3890
  modelValue?: string | number | null;
3781
3891
  /** Available options */
@@ -3817,6 +3927,8 @@ export declare interface SidebarGroupContext {
3817
3927
  export declare const SidebarGroupKey: InjectionKey<SidebarGroupContext>;
3818
3928
 
3819
3929
  export declare interface SidebarGroupProps {
3930
+ /** Additional CSS classes */
3931
+ class?: ClassValue;
3820
3932
  /** Group label displayed when expanded */
3821
3933
  label?: string;
3822
3934
  /** Show separator line when collapsed */
@@ -3826,6 +3938,8 @@ export declare interface SidebarGroupProps {
3826
3938
  export declare const SidebarItem: __VLS_WithTemplateSlots_40<typeof __VLS_component_38, __VLS_TemplateResult_38["slots"]>;
3827
3939
 
3828
3940
  export declare interface SidebarItemProps {
3941
+ /** Additional CSS classes */
3942
+ class?: ClassValue;
3829
3943
  /** Text label for the item */
3830
3944
  label: string;
3831
3945
  /** Icon component or HugeIcons data */
@@ -3849,6 +3963,8 @@ export declare const SidebarKey: InjectionKey<SidebarContext>;
3849
3963
  export declare const SidebarLayout: __VLS_WithTemplateSlots_38<typeof __VLS_component_36, __VLS_TemplateResult_36["slots"]>;
3850
3964
 
3851
3965
  export declare interface SidebarLayoutProps {
3966
+ /** Additional CSS classes */
3967
+ class?: ClassValue;
3852
3968
  /** Position of the sidebar */
3853
3969
  sidebarPosition?: 'left' | 'right';
3854
3970
  }
@@ -3856,6 +3972,8 @@ export declare interface SidebarLayoutProps {
3856
3972
  export declare const SidebarRoot: __VLS_WithTemplateSlots_39<typeof __VLS_component_37, __VLS_TemplateResult_37["slots"]>;
3857
3973
 
3858
3974
  export declare interface SidebarRootProps {
3975
+ /** Additional CSS classes */
3976
+ class?: ClassValue;
3859
3977
  /** Whether the sidebar is collapsed */
3860
3978
  modelValue?: boolean;
3861
3979
  /** Width when expanded */
@@ -3870,6 +3988,8 @@ animation: "shimmer" | "pulse" | "none";
3870
3988
  }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLSpanElement>;
3871
3989
 
3872
3990
  export declare interface SkeletonProps {
3991
+ /** Additional CSS classes */
3992
+ class?: ClassValue;
3873
3993
  /** Shape variant */
3874
3994
  variant?: SkeletonVariant;
3875
3995
  /** Width (px, %, or CSS value) */
@@ -3901,6 +4021,8 @@ trackRef: HTMLDivElement;
3901
4021
  }, HTMLDivElement>;
3902
4022
 
3903
4023
  export declare interface SliderProps {
4024
+ /** Additional CSS classes */
4025
+ class?: ClassValue;
3904
4026
  /** Current value (number for single, [min, max] tuple for range) */
3905
4027
  modelValue: number | [number, number];
3906
4028
  /** Minimum value */
@@ -3937,6 +4059,8 @@ speed: number;
3937
4059
  }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
3938
4060
 
3939
4061
  export declare interface SpinnerProps {
4062
+ /** Additional CSS classes */
4063
+ class?: ClassValue;
3940
4064
  /** Predefined size or custom value */
3941
4065
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | string;
3942
4066
  /** Animation speed in seconds */
@@ -3962,6 +4086,8 @@ tag: string;
3962
4086
  }>;
3963
4087
 
3964
4088
  export declare interface SpireProviderProps {
4089
+ /** Additional CSS classes */
4090
+ class?: ClassValue;
3965
4091
  theme?: Theme;
3966
4092
  mood?: Mood;
3967
4093
  depth?: Depth;
@@ -3973,6 +4099,8 @@ export declare interface SpireProviderProps {
3973
4099
  export declare const Stack: __VLS_WithTemplateSlots_58<typeof __VLS_component_55, __VLS_TemplateResult_55["slots"]>;
3974
4100
 
3975
4101
  export declare interface StackProps {
4102
+ /** Additional CSS classes */
4103
+ class?: ClassValue;
3976
4104
  /** Flex direction */
3977
4105
  direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
3978
4106
  /** Gap using spacing tokens (maps to var(--space-X)) */
@@ -4016,6 +4144,8 @@ export declare interface StepperItemContext {
4016
4144
  export declare const StepperItemKey: InjectionKey<StepperItemContext>;
4017
4145
 
4018
4146
  export declare interface StepperItemProps {
4147
+ /** Additional CSS classes */
4148
+ class?: ClassValue;
4019
4149
  /** Step index (0-based) */
4020
4150
  index: number;
4021
4151
  /** Disable this step */
@@ -4029,6 +4159,8 @@ export declare type StepperOrientation = 'horizontal' | 'vertical';
4029
4159
  export declare const StepperRoot: __VLS_WithTemplateSlots_43<typeof __VLS_component_40, __VLS_TemplateResult_40["slots"]>;
4030
4160
 
4031
4161
  export declare interface StepperRootProps {
4162
+ /** Additional CSS classes */
4163
+ class?: ClassValue;
4032
4164
  /** Current step index (0-based, v-model) */
4033
4165
  modelValue?: number;
4034
4166
  /** Layout direction */
@@ -4044,6 +4176,8 @@ export declare const StepperSeparator: DefineComponent< {}, {}, {}, {}, {}, C
4044
4176
  export declare const StepperTrigger: __VLS_WithTemplateSlots_45<typeof __VLS_component_42, __VLS_TemplateResult_42["slots"]>;
4045
4177
 
4046
4178
  export declare interface StepperTriggerProps {
4179
+ /** Additional CSS classes */
4180
+ class?: ClassValue;
4047
4181
  /** Custom icon to display instead of step number */
4048
4182
  icon?: Component;
4049
4183
  }
@@ -4071,6 +4205,8 @@ loading: boolean;
4071
4205
  }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLButtonElement>;
4072
4206
 
4073
4207
  export declare interface SwitchProps {
4208
+ /** Additional CSS classes */
4209
+ class?: ClassValue;
4074
4210
  /** Checked state (v-model) */
4075
4211
  modelValue?: boolean;
4076
4212
  /** Switch size */
@@ -4101,6 +4237,8 @@ export declare interface TabItem {
4101
4237
  export declare const Tabs: __VLS_WithTemplateSlots_47<typeof __VLS_component_44, __VLS_TemplateResult_44["slots"]>;
4102
4238
 
4103
4239
  export declare interface TabsProps {
4240
+ /** Additional CSS classes */
4241
+ class?: ClassValue;
4104
4242
  /** Currently active tab value (v-model) */
4105
4243
  modelValue: string | number;
4106
4244
  /** Tab items configuration */
@@ -4117,6 +4255,8 @@ export { Text_2 as Text }
4117
4255
  export declare const Textarea: __VLS_WithTemplateSlots_48<typeof __VLS_component_45, __VLS_TemplateResult_45["slots"]>;
4118
4256
 
4119
4257
  export declare interface TextareaProps {
4258
+ /** Additional CSS classes */
4259
+ class?: ClassValue;
4120
4260
  /** Textarea value (v-model) */
4121
4261
  modelValue?: string;
4122
4262
  /** Label text above the textarea */
@@ -4154,6 +4294,8 @@ export declare interface TextareaProps {
4154
4294
  }
4155
4295
 
4156
4296
  export declare interface TextProps {
4297
+ /** Additional CSS classes */
4298
+ class?: ClassValue;
4157
4299
  /** Semantic HTML tag */
4158
4300
  as?: TextTag;
4159
4301
  /** Font size */
@@ -4198,6 +4340,8 @@ export declare type TimelineDotColor = 'primary' | 'success' | 'warning' | 'dang
4198
4340
  export declare const TimelineItem: __VLS_WithTemplateSlots_51<typeof __VLS_component_48, __VLS_TemplateResult_48["slots"]>;
4199
4341
 
4200
4342
  export declare interface TimelineItemProps {
4343
+ /** Additional CSS classes */
4344
+ class?: ClassValue;
4201
4345
  /** Dot color variant */
4202
4346
  dotColor?: TimelineDotColor;
4203
4347
  /** Custom icon in dot */
@@ -4209,6 +4353,8 @@ export declare const TimelineKey: InjectionKey<TimelineContext>;
4209
4353
  export declare type TimelineLineStyle = 'solid' | 'dashed' | 'dotted';
4210
4354
 
4211
4355
  export declare interface TimelineProps {
4356
+ /** Additional CSS classes */
4357
+ class?: ClassValue;
4212
4358
  /** Content alignment relative to the spine */
4213
4359
  align?: TimelineAlign;
4214
4360
  /** Connector line style */
@@ -4240,6 +4386,7 @@ popoverRef: ({
4240
4386
  $: ComponentInternalInstance;
4241
4387
  $data: {};
4242
4388
  $props: {
4389
+ readonly class?: ClassValue;
4243
4390
  readonly placement?: PopoverPlacement | undefined;
4244
4391
  readonly offset?: number | undefined;
4245
4392
  readonly arrow?: boolean | undefined;
@@ -4346,6 +4493,8 @@ periodColumnRef: HTMLDivElement;
4346
4493
  }, HTMLDivElement>;
4347
4494
 
4348
4495
  export declare interface TimePickerProps {
4496
+ /** Additional CSS classes */
4497
+ class?: ClassValue;
4349
4498
  /** Selected time in HH:mm format (24h) */
4350
4499
  modelValue?: string;
4351
4500
  /** Time display format */
@@ -4427,6 +4576,8 @@ onDismiss?: ((id: string) => any) | undefined;
4427
4576
  }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
4428
4577
 
4429
4578
  export declare interface ToastItemProps {
4579
+ /** Additional CSS classes */
4580
+ class?: ClassValue;
4430
4581
  /** Toast data */
4431
4582
  toast: Toast;
4432
4583
  }
@@ -4456,6 +4607,8 @@ position: "top-right" | "top-left" | "bottom-right" | "bottom-left" | "top-cente
4456
4607
  }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
4457
4608
 
4458
4609
  export declare interface ToastProviderProps {
4610
+ /** Additional CSS classes */
4611
+ class?: ClassValue;
4459
4612
  /** Position of the toast container */
4460
4613
  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
4461
4614
  }
@@ -4469,6 +4622,8 @@ declare function toggle_2(): void;
4469
4622
  export declare const ToggleButton: __VLS_WithTemplateSlots_52<typeof __VLS_component_49, __VLS_TemplateResult_49["slots"]>;
4470
4623
 
4471
4624
  export declare interface ToggleButtonProps {
4625
+ /** Additional CSS classes */
4626
+ class?: ClassValue;
4472
4627
  /** Pressed state for standalone usage (v-model) */
4473
4628
  modelValue?: boolean;
4474
4629
  /** Value for group usage */
@@ -4488,6 +4643,8 @@ declare function toggleDataset(index: number): void;
4488
4643
  export declare const ToggleGroup: __VLS_WithTemplateSlots_53<typeof __VLS_component_50, __VLS_TemplateResult_50["slots"]>;
4489
4644
 
4490
4645
  export declare interface ToggleGroupProps {
4646
+ /** Additional CSS classes */
4647
+ class?: ClassValue;
4491
4648
  /** Selected value(s) - single value for 'single' type, array for 'multiple' */
4492
4649
  modelValue?: string | number | (string | number)[];
4493
4650
  /** Selection type */
@@ -4516,6 +4673,8 @@ export declare interface TooltipData {
4516
4673
  }
4517
4674
 
4518
4675
  export declare interface TooltipProps {
4676
+ /** Additional CSS classes */
4677
+ class?: ClassValue;
4519
4678
  /** Tooltip text content */
4520
4679
  text: string;
4521
4680
  /** Preferred placement (may flip on collision) */
@@ -4566,6 +4725,8 @@ export declare interface TreeViewItemContext {
4566
4725
  export declare const TreeViewItemKey: InjectionKey<TreeViewItemContext>;
4567
4726
 
4568
4727
  export declare interface TreeViewItemProps {
4728
+ /** Additional CSS classes */
4729
+ class?: ClassValue;
4569
4730
  /** Node data */
4570
4731
  node: TreeNode;
4571
4732
  }
@@ -4573,6 +4734,8 @@ export declare interface TreeViewItemProps {
4573
4734
  export declare const TreeViewKey: InjectionKey<TreeViewContext>;
4574
4735
 
4575
4736
  export declare interface TreeViewProps {
4737
+ /** Additional CSS classes */
4738
+ class?: ClassValue;
4576
4739
  /** Hierarchical data */
4577
4740
  data: TreeNode[];
4578
4741
  /** Selected node ID(s) - v-model */