@roku-ui/vue 0.29.0 → 0.30.0

package/dist/shared/color-helpers.d.ts

@@ -0,0 +1,9 @@
+import { Color as CuloriColor } from 'culori';
+/**
+ * Safely format a Culori color to hex; returns fallback when color is undefined
+ */
+export declare function safeHex(c: CuloriColor | undefined, fallback?: string): string;
+/**
+ * Safely format a Culori color with alpha override to hex8; returns fallback when color is undefined
+ */
+export declare function safeHex8(c: CuloriColor | undefined, alpha: number, fallback?: string): string;

package/dist/shared/color-system.d.ts

@@ -1,35 +1,6 @@
 import { Color as CuloriColor } from 'culori';
 import { MaybeRef } from 'vue';
 import { Color, InputVariant } from '../types';
-export declare const primaryColors: import('vue').ComputedRef<{
-    mode: "hsl";
-    h: number | undefined;
-    s: number;
-    l: number;
-    alpha: number | undefined;
-}[]>;
-export declare const secondaryColors: import('vue').ComputedRef<{
-    mode: "hsl";
-    h: number | undefined;
-    s: number;
-    l: number;
-    alpha: number | undefined;
-}[]>;
-export declare const tertiaryColors: import('vue').ComputedRef<{
-    mode: "hsl";
-    h: number | undefined;
-    s: number;
-    l: number;
-    alpha: number | undefined;
-}[]>;
-export declare const errorColors: import('vue').ComputedRef<{
-    mode: "hsl";
-    h: number | undefined;
-    s: number;
-    l: number;
-    alpha: number | undefined;
-}[]>;
-export declare const surfaceColors: import('vue').ComputedRef<any[]>;
 export declare function useColors(color: MaybeRef<Color>, lightnessMap?: number[]): import('vue').ComputedRef<CuloriColor[]>;
 export declare function useSurfaceColors(): import('vue').ComputedRef<any[]>;
 export declare function useTextCS(color: MaybeRef<Color>): import('vue').ComputedRef<CS>;
@@ -38,50 +9,28 @@ export type CSIndex = number | {
     dark: number;
     light: number;
 };
+export type CSAlpha = number | {
+    dark?: number;
+    light?: number;
+};
 export interface CSOptions {
     color: MaybeRef<Color | 'surface'>;
     type: CSType;
     index: CSIndex;
-    alpha?: number;
+    alpha?: CSAlpha;
 }
 export interface CS {
     style: Record<string, string>;
     class: string[] | string;
 }
-export declare function getCSInner(colors: CuloriColor[], type: CSType, darkIndex: number, lightIndex: number, alpha?: number): CS;
+export declare function getCSInner(colors: CuloriColor[], type: CSType, darkIndex: number, lightIndex: number, alpha?: CSAlpha): CS;
 export declare function useCS(cs: CSOptions): import('vue').ComputedRef<CS>;
-export declare function useColorCS(color: MaybeRef<Color>, type: CSType, index: CSIndex, alpha?: number): import('vue').ComputedRef<CS>;
-export declare function useSurfaceCS(type: CSType, index: CSIndex, alpha?: number): import('vue').ComputedRef<CS>;
+export declare function useColorCS(color: MaybeRef<Color>, type: CSType, index: CSIndex, alpha?: CSAlpha): import('vue').ComputedRef<CS>;
+export declare function useSurfaceCS(type: CSType, index: CSIndex, alpha?: CSAlpha): import('vue').ComputedRef<CS>;
 export declare function useOutlineCS(color: MaybeRef<Color>): import('vue').ComputedRef<CS>;
-export declare function useMergedCS(...cs: ReturnType<typeof useCS>[]): import('vue').ComputedRef<{
+export declare function useMergedCS(csList: ReturnType<typeof useCS>[], extraClass?: string[]): import('vue').ComputedRef<{
     style: Record<string, string>;
     class: string[];
 }>;
 export declare const borderCS: import('vue').ComputedRef<CS>;
-export declare function useInputColorStyle(color: MaybeRef<string>, variant?: MaybeRef<InputVariant>): import('vue').ComputedRef<{
-    '--d-bg': string;
-    '--d-border-f': string;
-    '--d-border': string;
-    '--d-placeholder': string;
-    '--d-text': string;
-    '--l-bg': string;
-    '--l-border-f': string;
-    '--l-border': string;
-    '--l-placeholder': string;
-    '--l-text': string;
-    '--d-bg-h'?: undefined;
-    '--l-bg-h'?: undefined;
-} | {
-    '--d-bg': string;
-    '--d-bg-h': string;
-    '--d-border': string;
-    '--l-bg': string;
-    '--l-bg-h': string;
-    '--l-border': string;
-    '--d-border-f'?: undefined;
-    '--d-placeholder'?: undefined;
-    '--d-text'?: undefined;
-    '--l-border-f'?: undefined;
-    '--l-placeholder'?: undefined;
-    '--l-text'?: undefined;
-}>;
+export declare function useInputColorStyle(color: MaybeRef<string>, variant?: MaybeRef<InputVariant>): import('vue').ComputedRef<Record<string, string>>;

package/dist/shared/constants.d.ts

@@ -1,21 +1,79 @@
-export declare const darkSurfaceBgIndex = 9;
-export declare const darkSurfaceBgVariant1Index = 8;
-export declare const darkSurfaceBgVariant2Index = 7;
-export declare const darkBorderIndex = 7;
-export declare const darkBorderVariantIndex = 7;
-export declare const darkTextIndex = 3;
-export declare const darkTextVariantIndex = 6;
-export declare const darkBgIndex = 5;
-export declare const darkBgVariantIndex = 6;
-export declare const lightBorderIndex = 3;
-export declare const lightBorderVariantIndex = 4;
-export declare const darkOpacity = 0.25;
-export declare const darkOpacityVariant = 0.3;
-export declare const lightSurfaceBgIndex = 1;
-export declare const lightSurfaceBgVariantIndex = 2;
-export declare const lightTextIndex = 6;
-export declare const lightTextVariantIndex = 5;
-export declare const lightBgIndex = 4;
-export declare const lightBgVariantIndex = 5;
-export declare const lightOpacity = 0.08;
-export declare const lightOpacityVariant = 0.15;
+export declare const SURFACE_BG: {
+    readonly base: {
+        readonly dark: 9;
+        readonly light: 0;
+    };
+    readonly container: {
+        readonly dark: 8;
+        readonly light: 0;
+    };
+    readonly containerHover: {
+        readonly dark: 7;
+        readonly light: 1;
+    };
+    readonly inverted: {
+        readonly dark: 1;
+        readonly light: 9;
+    };
+};
+export declare const SURFACE_BORDER: {
+    readonly base: {
+        readonly dark: 7;
+        readonly light: 3;
+    };
+    readonly subtle: {
+        readonly dark: 6;
+        readonly light: 4;
+    };
+    readonly inverted: {
+        readonly dark: 2;
+        readonly light: 7;
+    };
+};
+export declare const SURFACE_TEXT: {
+    readonly muted: {
+        readonly dark: 6;
+        readonly light: 5;
+    };
+    readonly inverted: {
+        readonly dark: 9;
+        readonly light: 0;
+    };
+};
+export declare const COLOR_BG: {
+    readonly solid: {
+        readonly dark: 7;
+        readonly light: 6;
+    };
+    readonly hover: {
+        readonly dark: 6;
+        readonly light: 5;
+    };
+};
+export declare const COLOR_BORDER: {
+    readonly solid: {
+        readonly dark: 7;
+        readonly light: 3;
+    };
+};
+export declare const COLOR_TEXT: {
+    readonly solid: {
+        readonly dark: 4;
+        readonly light: 6;
+    };
+    readonly hover: {
+        readonly dark: 2;
+        readonly light: 5;
+    };
+};
+export declare const COLOR_TINT_INDEX = 3;
+export declare const OPACITY_SCALE: {
+    readonly dark: {
+        readonly tint: 0.15;
+        readonly tintHover: 0.3;
+    };
+    readonly light: {
+        readonly tint: 0.1;
+        readonly tintHover: 0.15;
+    };
+};

package/dist/shared/container-styles.d.ts

@@ -24,3 +24,11 @@ export declare function useContainerLightCS(color: MaybeRef<Color>): import('vue
     style: Record<string, string>;
     class: string[];
 }>;
+export declare function useContainerOutlineCS(color: MaybeRef<Color>): import('vue').ComputedRef<{
+    style: Record<string, string>;
+    class: string[];
+}>;
+export declare function useContainerInvertedCS(): import('vue').ComputedRef<{
+    style: Record<string, string>;
+    class: string[];
+}>;

package/dist/shared/style-recipes.d.ts

@@ -0,0 +1,20 @@
+import { Color as CuloriColor } from 'culori';
+export interface PaletteCollection {
+    color: CuloriColor[];
+    [key: string]: CuloriColor[];
+}
+interface PaletteTokenConfig {
+    palette?: string;
+    index: number;
+    format?: 'hex' | 'hex8';
+    alpha?: number;
+    fallback?: string;
+}
+interface LiteralTokenConfig {
+    source: 'literal';
+    value: string;
+}
+export type VariantTokenConfig = PaletteTokenConfig | LiteralTokenConfig;
+export type VariantStyleConfig = Record<string, VariantTokenConfig>;
+export declare function buildVariantStyles(config: VariantStyleConfig, palettes: PaletteCollection): Record<string, string>;
+export {};

package/dist/shared/theme.d.ts

@@ -1,102 +1,106 @@
 import { ComputedRef } from 'vue';
-import { Rounded } from '../types';
+import { Color, Rounded, Size } from '../types';
+export type ThemeColorValue = string | readonly [string, ...string[]];
 export interface ThemeColors {
-    primary?: string;
-    secondary?: string;
-    tertiary?: string;
-    error?: string;
-    surface?: string;
+    primary?: ThemeColorValue;
+    secondary?: ThemeColorValue;
+    tertiary?: ThemeColorValue;
+    success?: ThemeColorValue;
+    info?: ThemeColorValue;
+    warning?: ThemeColorValue;
+    error?: ThemeColorValue;
+    surface?: ThemeColorValue;
 }
 export interface ComponentDefaults {
     Btn?: {
-        size?: 'sm' | 'md' | 'lg';
+        size?: Size;
         variant?: import('../types').BtnVariant;
         color?: string;
         rounded?: Rounded;
         pressEffect?: 'translate' | 'scale';
     };
     TextField?: {
-        size?: 'sm' | 'md' | 'lg';
-        color?: 'primary' | 'secondary' | 'tertiary' | 'error';
+        size?: Size;
+        color?: Color;
         rounded?: Rounded;
     };
     Switch?: {
-        size?: 'sm' | 'md' | 'lg';
-        color?: 'primary' | 'secondary' | 'tertiary' | 'error';
+        size?: Size;
+        color?: Color;
     };
     Select?: {
-        size?: 'sm' | 'md' | 'lg';
-        color?: 'primary' | 'secondary' | 'tertiary' | 'error';
+        size?: Size;
+        color?: Color;
         rounded?: Rounded;
     };
     Checkbox?: {
-        size?: 'sm' | 'md' | 'lg';
-        color?: 'primary' | 'secondary' | 'tertiary' | 'error';
+        size?: Size;
+        color?: Color;
         rounded?: Rounded;
     };
     Paper?: {
         variant?: import('../types').ContainerVariant;
-        color?: string;
+        color?: Color;
         rounded?: Rounded;
     };
     Progress?: {
-        size?: 'sm' | 'md' | 'lg';
-        color?: 'primary' | 'secondary' | 'tertiary' | 'error';
+        size?: Size;
+        color?: Color;
     };
     Rating?: {
-        size?: 'sm' | 'md' | 'lg';
-        color?: 'primary' | 'secondary' | 'tertiary' | 'error';
+        size?: Size;
+        color?: Color;
     };
     Slider?: {
-        size?: 'sm' | 'md' | 'lg';
-        color?: 'primary' | 'secondary' | 'tertiary' | 'error';
+        size?: Size;
+        color?: Color;
     };
     Avatar?: {
-        size?: 'sm' | 'md' | 'lg';
-        color?: string;
+        size?: Size;
+        color?: Color;
         rounded?: Rounded;
     };
     Tag?: {
-        size?: 'sm' | 'md' | 'lg';
+        size?: Size;
         variant?: import('../types').ContainerVariant;
         color?: string;
         rounded?: Rounded;
     };
     Chip?: {
-        size?: 'sm' | 'md' | 'lg';
+        size?: Size;
         variant?: import('../types').ContainerVariant;
         color?: string;
         rounded?: Rounded;
     };
     Modal?: {
-        size?: 'sm' | 'md' | 'lg';
+        size?: Size;
         rounded?: Rounded;
     };
     Drawer?: {
-        size?: 'sm' | 'md' | 'lg';
+        size?: Size;
     };
     Notification?: {
-        color?: 'primary' | 'secondary' | 'tertiary' | 'error';
+        color?: Color;
         rounded?: Rounded;
     };
     ColorInput?: {
-        size?: 'sm' | 'md' | 'lg';
+        size?: Size;
         rounded?: Rounded;
     };
     CalendarInput?: {
-        size?: 'sm' | 'md' | 'lg';
+        size?: Size;
         rounded?: Rounded;
     };
     PinInput?: {
-        size?: 'sm' | 'md' | 'lg';
+        size?: Size;
         rounded?: Rounded;
     };
     Dropzone?: {
         rounded?: Rounded;
     };
     Step?: {
-        size?: 'sm' | 'md' | 'lg';
-        color?: 'primary' | 'secondary' | 'tertiary' | 'error';
+        size?: Size;
+        color?: Color;
         direction?: 'horizontal' | 'vertical';
         type?: 'default' | 'navigation' | 'dot' | 'simple';
     };
@@ -105,8 +109,8 @@ export interface ThemeData {
     withBorder: boolean;
     rounded: Rounded;
     colors: ThemeColors;
-    defaultSize: 'sm' | 'md' | 'lg';
-    defaultColor: 'primary' | 'secondary' | 'tertiary' | 'error';
+    defaultSize: Size;
+    defaultColor: Color;
     componentDefaults?: ComponentDefaults;
 }
 export declare const defaultThemeData: ThemeData;

package/dist/test/demo/CSSVarDemo.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;

package/dist/test/demo/MenuDemo.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;

package/dist/test/demo/NumberFieldDemo.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;

package/dist/test/demoPages.d.ts

@@ -0,0 +1,140 @@
+export declare const demoPages: readonly [{
+    readonly key: "CSSVars";
+    readonly title: "CSS Variables";
+    readonly component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+}, {
+    readonly key: "AppShell";
+    readonly title: "App Shell";
+    readonly component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+}, {
+    readonly key: "Avatar";
+    readonly title: "Avatar";
+    readonly component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+}, {
+    readonly key: "Button";
+    readonly title: "Button";
+    readonly component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+}, {
+    readonly key: "Calendar";
+    readonly title: "Calendar";
+    readonly component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+}, {
+    readonly key: "CalendarInput";
+    readonly title: "Calendar Input";
+    readonly component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+}, {
+    readonly key: "Chat";
+    readonly title: "Chat";
+    readonly component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+}, {
+    readonly key: "ComponentDefaults";
+    readonly title: "Component Defaults";
+    readonly component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+}, {
+    readonly key: "Form";
+    readonly title: "Form Controls";
+    readonly component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+}, {
+    readonly key: "Layout";
+    readonly title: "Layout";
+    readonly component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+}, {
+    readonly key: "Media";
+    readonly title: "Media & Colors";
+    readonly component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+}, {
+    readonly key: "Menu";
+    readonly title: "Menu";
+    readonly component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+}, {
+    readonly key: "Modal";
+    readonly title: "Modal & Drawer";
+    readonly component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+}, {
+    readonly key: "NumberField";
+    readonly title: "NumberField";
+    readonly component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+}, {
+    readonly key: "ModernColor";
+    readonly title: "Modern Color System";
+    readonly component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+}, {
+    readonly key: "Navigation";
+    readonly title: "Navigation";
+    readonly component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+}, {
+    readonly key: "Notification";
+    readonly title: "Notification";
+    readonly component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+}, {
+    readonly key: "PartialColors";
+    readonly title: "Partial Colors";
+    readonly component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+}, {
+    readonly key: "Popover";
+    readonly title: "Popover";
+    readonly component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+}, {
+    readonly key: "Progress";
+    readonly title: "Progress";
+    readonly component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+}, {
+    readonly key: "Rating";
+    readonly title: "Rating";
+    readonly component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+}, {
+    readonly key: "Select";
+    readonly title: "Select";
+    readonly component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+}, {
+    readonly key: "SelectArea";
+    readonly title: "Select Area";
+    readonly component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+        areaRef: HTMLDivElement;
+    }, HTMLDivElement>;
+}, {
+    readonly key: "Step";
+    readonly title: "Step";
+    readonly component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+}, {
+    readonly key: "Tags";
+    readonly title: "Tags";
+    readonly component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+}, {
+    readonly key: "TextField";
+    readonly title: "TextField";
+    readonly component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+}, {
+    readonly key: "ThemeManager";
+    readonly title: "Theme Manager";
+    readonly component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+}, {
+    readonly key: "Tooltip";
+    readonly title: "Tooltip";
+    readonly component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+}, {
+    readonly key: "Waterfall";
+    readonly title: "Waterfall";
+    readonly component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+}, {
+    readonly key: "Slider";
+    readonly title: "Slider";
+    readonly component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+}, {
+    readonly key: "Switch";
+    readonly title: "Switch";
+    readonly component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+}];
+export type DemoRouteName = typeof demoPages[number]['key'];
+export declare const demoRoutes: {
+    path: string;
+    name: "AppShell" | "Avatar" | "Calendar" | "CalendarInput" | "Menu" | "Modal" | "Notification" | "NumberField" | "Popover" | "Progress" | "Rating" | "Select" | "SelectArea" | "Slider" | "Step" | "Switch" | "TextField" | "Tooltip" | "Waterfall" | "CSSVars" | "Button" | "Chat" | "ComponentDefaults" | "Form" | "Layout" | "Media" | "ModernColor" | "Navigation" | "PartialColors" | "Tags" | "ThemeManager";
+    component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement> | import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement> | import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement> | import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement> | import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement> | import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement> | import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement> | import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement> | import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement> | import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement> | import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement> | import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement> | import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement> | import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement> | import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement> | import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement> | import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement> | import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement> | import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement> | import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement> | import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement> | import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+        areaRef: HTMLDivElement;
+    }, HTMLDivElement> | import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement> | import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement> | import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement> | import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement> | import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement> | import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement> | import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement> | import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement> | import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+    meta: {
+        title: "Avatar" | "Calendar" | "Menu" | "Notification" | "NumberField" | "Popover" | "Progress" | "Rating" | "Select" | "Slider" | "Step" | "Switch" | "TextField" | "Tooltip" | "Waterfall" | "CSS Variables" | "App Shell" | "Button" | "Calendar Input" | "Chat" | "Component Defaults" | "Form Controls" | "Layout" | "Media & Colors" | "Modal & Drawer" | "Modern Color System" | "Navigation" | "Partial Colors" | "Select Area" | "Tags" | "Theme Manager";
+    };
+}[];
+export declare const defaultDemoRouteName: "CSSVars";
+export declare function isDemoRouteName(value: string | null | undefined): value is DemoRouteName;

package/dist/test/router.d.ts

@@ -0,0 +1,3 @@
+export declare const router: import('vue-router').Router;
+export type { DemoRouteName } from './demoPages';
+export { demoRoutes } from './demoPages';

package/dist/test.d.ts

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

package/dist/types/index.d.ts

@@ -1,13 +1,35 @@
-export type BtnVariant = 'filled' | 'default' | 'light' | 'outline' | 'subtle' | 'transparent' | 'contrast' | 'white';
-export type ContainerVariant = 'filled' | 'default' | 'light' | 'outline' | 'white';
+import { Component } from 'vue';
+export type ContainerVariant = 'filled' | 'default' | 'light' | 'outline' | 'inverted';
+export type BtnVariant = ContainerVariant | 'subtle' | 'transparent' | 'contrast';
 export type InputVariant = 'default' | 'filled';
 export type CalendarMode = 'single' | 'multiple' | 'range';
-export type Color = 'primary' | 'secondary' | 'tertiary' | 'error' | 'surface' | string;
+export type DefinedColor = 'primary' | 'secondary' | 'tertiary' | 'success' | 'error' | 'info' | 'warning';
+export type Color = DefinedColor | string;
 export type Size = 'sm' | 'md' | 'lg';
 export type Rounded = 'none' | 'sm' | 'md' | 'lg' | 'full' | string | number;
+export type IconSource = string | Component;
 export interface Area {
     left: number;
     top: number;
     right: number;
     bottom: number;
 }
+export interface TreeListLeafData {
+    icon?: IconSource;
+    title: string;
+    value: string;
+    attrs?: Record<string, any>;
+    is?: string | Component;
+}
+export interface TreeListHeaderData {
+    icon?: IconSource;
+    title: string;
+}
+export interface TreeListCollapseData {
+    title: string;
+    icon?: IconSource;
+    value?: string;
+    children?: TreeListItemData[];
+    open?: boolean;
+}
+export type TreeListItemData = TreeListLeafData | TreeListHeaderData | TreeListCollapseData;