@voicenter-team/voicenter-ui-plus 2.0.3 → 2.0.5

package/library/core/types/components/VcMdEditor/VcMdEditor.vue.d.ts

@@ -1,10 +1,31 @@
-import { IProps } from './VcMdEditorContent.vue';
+import type { TMDEditorParameterOption } from '../../types';
+export interface IVcMdEditorProps {
+    modelValue?: string;
+    html?: string;
+    disabled?: boolean;
+    useParameters?: boolean;
+    minHeight?: number | string;
+    maxHeight?: number | string;
+    parameters?: Array<TMDEditorParameterOption>;
+    isTeleported?: boolean;
+    readonly?: boolean;
+    hideToolbar?: boolean;
+}
 type BlockValidationIssue = {
     tag: string;
     line: number;
     type: 'unclosed' | 'unopened';
 };
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<IProps>>, {
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IVcMdEditorProps>, {
+    modelValue: string;
+    html: string;
+    disabled: boolean;
+    minHeight: number;
+    maxHeight: undefined;
+    parameters: undefined;
+    useParameters: boolean;
+    isTeleported: undefined;
+}>>, {
     validate: () => BlockValidationIssue[];
     /**
      * Get the HTML output from ProseMirror editor
@@ -14,10 +35,28 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (pl: string) => void;
     "update:html": (pl: string) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<IProps>>> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IVcMdEditorProps>, {
+    modelValue: string;
+    html: string;
+    disabled: boolean;
+    minHeight: number;
+    maxHeight: undefined;
+    parameters: undefined;
+    useParameters: boolean;
+    isTeleported: undefined;
+}>>> & Readonly<{
     "onUpdate:modelValue"?: ((pl: string) => any) | undefined;
     "onUpdate:html"?: ((pl: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>, {
+    html: string;
+    disabled: boolean;
+    modelValue: string;
+    maxHeight: string | number;
+    useParameters: boolean;
+    minHeight: string | number;
+    parameters: TMDEditorParameterOption[];
+    isTeleported: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {
@@ -28,3 +67,11 @@ type __VLS_TypePropsToRuntimeProps<T> = {
         required: true;
     };
 };
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/library/core/types/components/VcMdEditor/VcMdEditorToolbar.vue.d.ts

@@ -1,16 +1,16 @@
 import { TSetBlockTypeEvent } from './mdEditor.config';
-import { TMDEditorParameterItem } from '../../types';
+import type { TMDEditorParameterItem, TMDEditorParameterOption } from '../../types';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     isTeleported?: boolean | undefined;
     disabled?: boolean | undefined;
-    parameters?: TMDEditorParameterItem[] | undefined;
+    parameters?: TMDEditorParameterOption[] | undefined;
 }>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "set-block-type": (pl: TSetBlockTypeEvent) => void;
     "insert-parameter": (pl: TMDEditorParameterItem, state?: "opening" | "closing" | undefined) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     isTeleported?: boolean | undefined;
     disabled?: boolean | undefined;
-    parameters?: TMDEditorParameterItem[] | undefined;
+    parameters?: TMDEditorParameterOption[] | undefined;
 }>>> & Readonly<{
     "onSet-block-type"?: ((pl: TSetBlockTypeEvent) => any) | undefined;
     "onInsert-parameter"?: ((pl: TMDEditorParameterItem, state?: "opening" | "closing" | undefined) => any) | undefined;

package/library/core/types/components/VcPagination/VcPaginationButton.vue.d.ts

@@ -22,8 +22,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     dataTestName: string;
 }>>> & Readonly<{}>, {
     type: ButtonIconType;
-    color: ButtonColor;
     icon: TIconClass;
+    color: ButtonColor;
     dataTestName: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/library/core/types/components/VcSelect/VcSelectOption.vue.d.ts

@@ -1,8 +1,8 @@
 import { StyleValue } from 'vue';
 import { OptionValueType } from '../../types';
 declare const _default: <Model extends OptionValueType>(__VLS_props: {
-    label?: string | number | undefined;
     icon?: string | undefined;
+    label?: string | number | undefined;
     value?: Model | undefined;
     disabled?: boolean | undefined;
     selected?: boolean | undefined;
@@ -15,8 +15,8 @@ declare const _default: <Model extends OptionValueType>(__VLS_props: {
     emit: any;
 } | undefined, __VLS_expose?: ((exposed: import('vue').ShallowUnwrapRef<{}>) => void) | undefined, __VLS_setup?: Promise<{
     props: {
-        label?: string | number | undefined;
         icon?: string | undefined;
+        label?: string | number | undefined;
         value?: Model | undefined;
         disabled?: boolean | undefined;
         selected?: boolean | undefined;
@@ -33,8 +33,8 @@ declare const _default: <Model extends OptionValueType>(__VLS_props: {
 }> & {
     __ctx?: {
         props: {
-            label?: string | number | undefined;
             icon?: string | undefined;
+            label?: string | number | undefined;
             value?: Model | undefined;
             disabled?: boolean | undefined;
             selected?: boolean | undefined;

package/library/core/types/components/VcTabs/VcTabPane.vue.d.ts

@@ -29,9 +29,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     index: number;
     navClass: string;
 }>>> & Readonly<{}>, {
+    icon: string;
     lazy: boolean;
     label: string;
-    icon: string;
     disabled: boolean;
     index: number;
     tabData: any;

package/library/core/types/components/VcTag/VcTag.vue.d.ts

@@ -44,9 +44,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     "onOn-close"?: ((evt: MouseEvent) => any) | undefined;
 }>, {
     borderless: boolean;
+    icon: string;
     color: "" | "primary" | "secondary" | "destructive" | "success" | "warning" | "active" | "primary-alternative";
     label: string;
-    icon: string;
     square: boolean;
     disabled: boolean;
     prefixIcon: string;

package/library/core/types/components/VcTagInput/VcTagInput.vue.d.ts

@@ -15,7 +15,7 @@ interface ITagInputProps extends IVcBaseInputProps {
     style?: StyleValue;
     tagColor?: VcTagColorType;
     tagMaxContent?: string | number;
-    valueType: 'string' | 'number';
+    valueType?: 'string' | 'number';
 }
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ITagInputProps>, {
     id: undefined;

package/library/core/types/types/VcMdEditor.types.d.ts

@@ -5,8 +5,14 @@ export type TMDEditorParameterItem = {
     description?: string;
     schema?: ObjectAnyType;
 };
+export type TMDEditorGroupParameterItems = {
+    label: string;
+    options: Array<TMDEditorParameterItem>;
+};
+export type TMDEditorParameterOption = TMDEditorParameterItem | TMDEditorGroupParameterItems;
 export type BlockValidationIssue = {
     tag: string;
     line: number;
     type: 'unclosed' | 'unopened';
 };
+export declare function isGroupParameter(item: TMDEditorParameterOption): item is TMDEditorGroupParameterItems;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@voicenter-team/voicenter-ui-plus",
-  "version": "2.0.03",
+  "version": "2.0.05",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

package/tailwind.config.js

@@ -1,190 +1,190 @@
-const schemeColors = require('./src/core/theme/tailwindScheme.js')
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-    content: [ './src/**/*.{vue,js,ts,scss}', './documentation/**/*.{vue,scss}' ],
-    plugins: [
-        require('tailwindcss/plugin')(({ addUtilities }) => {
-            addUtilities({
-                '.justify-normal': {
-                    justifyContent: 'normal'
-                }
-            })
-        })
-    ],
-    theme: {
-        fontFamily: {
-            main: [ 'Inter', 'system-ui', 'sans-serif' ],
-            heebo: [ 'Heebo', 'sans-serif' ],
-            inter: [
-                'Inter',
-                'sans-serif'
-            ]
-        },
-        screens: {
-            sm: '680px',
-            md: '960px',
-            lg: '1264px',
-            xl: '1680px',
-            xxl: '1900px'
-        },
-        colors: schemeColors,
-        borderColor: schemeColors,
-        backgroundColor: schemeColors,
-        boxShadow: {
-            none: 'none',
-            card: '0px 0px 5px var(--card-shadow-color)',
-            'card-no-active': '0px 0px 5px var(--inactive-elements)',
-            'table-header': '0 1px 0 0 var(--table-shadow-color)',
-            'focus-outer': '0 0 3px var(--active-elements--pressed)',
-            'focus-outer-off': '0 0 3px var(--inactive-elements--pressed)',
-            'focus-outer-primary': '0 0 3px var(--primary-actions--pressed)',
-            'focus-outer-secondary': '0 0 3px var(--secondary-actions--pressed)',
-            'focus-outer-destructive': '0 0 3px var(--destructive-actions--pressed)',
-            'focus-outer-success': '0 0 3px var(--success-actions--pressed)',
-            'focus-outer-warning': '0 0 3px var(--warning-actions--pressed)',
-            'focus-inner': 'inset 0 0 3px var(--active-elements--pressed)',
-            focus: '0 0 3px var(--active-elements--pressed), inset 0 0px 3px var(--active-elements--pressed)',
-            hover: '0 0 3px var(--active-elements--focus), inset 0 0px 3px var(--active-elements--focus)',
-            'focus-primary': '0 0 3px var(--primary-actions--pressed), inset 0 0px 3px var(--primary-actions--pressed)',
-            'hover-primary': '0 0 3px var(--primary-actions--focus), inset 0 0px 3px var(--primary-actions--focus)',
-            'focus-secondary': '0 0 3px var(--secondary-actions--pressed), inset 0 0px 3px var(--secondary-actions--pressed)',
-            'hover-secondary': '0 0 3px var(--secondary-actions--focus), inset 0 0px 3px var(--secondary-actions--focus)',
-            'focus-destructive': '0 0 3px var(--destructive-actions--pressed), inset 0 0px 3px var(--destructive-actions--pressed)',
-            'hover-destructive': '0 0 3px var(--destructive-actions--focus), inset 0 0px 3px var(--destructive-actions--focus)',
-            'focus-success': '0 0 3px var(--success-actions--pressed), inset 0 0px 3px var(--success-actions--pressed)',
-            'hover-success': '0 0 3px var(--success-actions--focus), inset 0 0px 3px var(--success-actions--focus)',
-            'focus-warning': '0 0 3px var(--warning-actions--pressed), inset 0 0px 3px var(--warning-actions--pressed)',
-            'hover-warning': '0 0 3px var(--warning-actions--focus), inset 0 0px 3px var(--warning-actions--focus)',
-            'hover-inner': 'inset 0 0 3px var(--active-elements--focus)',
-            'hover-outer': '0 0 3px var(--active-elements--focus)',
-            'hover-outer-off': '0 0 3px var(--inactive-elements--focus)',
-            'hover-outer-active': '0 0 3px var(--active-elements--focus)',
-            'hover-outer-primary': '0 0 3px var(--primary-actions--focus)',
-            'hover-outer-primary-alternative': '0 0 3px var(--primary-alternative-actions--focus)',
-            'hover-outer-secondary': '0 0 3px var(--secondary-actions--focus)',
-            'hover-outer-destructive': '0 0 3px var(--destructive-actions--focus)',
-            'hover-outer-success': '0 0 3px var(--success-actions--focus)',
-            'hover-outer-warning': '0 0 3px var(--warning-actions--focus)',
-            'view-switcher': '0px 0px 4px var(--overlay-bg)',
-            'vertical-tab-scroll': 'inset 0 0 8px (--light-bg)',
-            'vertical-tab-item': '0 1px 6px var(--card-shadow-color)',
-            'vertical-tab-item-hover': '0 1px 6px var(--active-elements--focus)',
-            table: '0px 0px 5px var(--card-shadow-color)',
-            'table-row': '0 10px 10px -12px var(--table-shadow-color)'
-        },
-        fontSize: {
-            xxs: '0.65rem',
-            xs: '0.75rem',
-            sm: '0.875rem',
-            base: '1rem',
-            lg: '1.125rem',
-            xl: '1.25rem',
-            '2xl': '1.5rem',
-            '3xl': '2rem',
-            '4xl': '2.25rem',
-            '5xl': '2.5rem',
-            '6xl': '3rem'
-        },
-        fill: schemeColors,
-        stroke: {
-            'active-elements': 'var(--active-elements)',
-            current: 'currentColor'
-        },
-        borderRadius: {
-            none: '0',
-            xs: '0.125rem',
-            sm: '0.25rem',
-            md: '0.375rem',
-            lg: '0.5rem',
-            xl: '0.75rem',
-            xxl: '0.875rem',
-            full: '9999px',
-            tag: '2rem',
-            DEFAULT: '0.25rem',
-            'horizontal-tab-wrapper': '0px 6px 6px 6px',
-            'horizontal-tab-item': '6px 6px 0px 0px'
-        },
-        extend: {
-            inset: {
-                unset: 'unset'
-            },
-            minWidth: {
-                auto: 'auto',
-                xs: '20rem',
-                sm: '24rem',
-                md: '28rem',
-                lg: '32rem',
-                xl: '36rem',
-                '1/4': '25%',
-                '1/2': '50%',
-                '3/4': '75%',
-                screen: '100vw'
-            },
-            minHeight: {
-                2: '2rem',
-                5.5: '1.375rem',
-                6.5: '1.625rem',
-                8: '2rem',
-                screen: '100vh',
-                inherit: 'inherit'
-            },
-            maxWidth: {
-                '1/2': '50%',
-                screen: '100vw'
-            },
-            maxHeight: {
-                inherit: 'inherit'
-            },
-            height: {
-                0.5: '2px',
-                'fit-content': 'fit-content',
-                'modal-wizard': '680px'
-            },
-            spacing: {
-                15: '3.75rem',
-                unset: 'unset'
-            },
-            width: {},
-            lineHeight: {
-                '40px': '40px'
-            },
-            zIndex: {
-                1: 1,
-                5: 5
-            },
-            rotate: {
-                135: '135deg',
-                225: '225deg'
-            }
-        }
-    },
-    safelist: [
-        // Essential text sizes
-        {
-            pattern: /text-(xxs|xs|sm|base|lg|2xl|3xl|4xl|5xl|6xl)/,
-            variants: [ 'hover', 'focus' ]
-        },
-        // Essential fonts
-        {
-            pattern: /font-(main|heebo|inter)/,
-        },
-        // Essential color classes for dynamic theming
-        {
-            pattern: /text-(primary|primary-alternative|secondary|destructive|success|warning)-actions/,
-            variants: [ 'hover', 'focus' ]
-        },
-        {
-            pattern: /bg-(primary|primary-alternative|secondary|destructive|success|warning)-actions/,
-            variants: [ 'hover', 'focus' ]
-        },
-        {
-            pattern: /border-(primary|primary-alternative|secondary|destructive|success|warning)-actions/,
-            variants: [ 'hover', 'focus' ]
-        }
-    ],
-    variants: {
-        backgroundColor: [ 'responsive', 'hover', 'focus', 'active' ]
-    }
-}
-
+const schemeColors = require('./src/core/theme/tailwindScheme.js')
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: [ './src/**/*.{vue,js,ts,scss}', './documentation/**/*.{vue,scss}' ],
+    plugins: [
+        require('tailwindcss/plugin')(({ addUtilities }) => {
+            addUtilities({
+                '.justify-normal': {
+                    justifyContent: 'normal'
+                }
+            })
+        })
+    ],
+    theme: {
+        fontFamily: {
+            main: [ 'Inter', 'system-ui', 'sans-serif' ],
+            heebo: [ 'Heebo', 'sans-serif' ],
+            inter: [
+                'Inter',
+                'sans-serif'
+            ]
+        },
+        screens: {
+            sm: '680px',
+            md: '960px',
+            lg: '1264px',
+            xl: '1680px',
+            xxl: '1900px'
+        },
+        colors: schemeColors,
+        borderColor: schemeColors,
+        backgroundColor: schemeColors,
+        boxShadow: {
+            none: 'none',
+            card: '0px 0px 5px var(--card-shadow-color)',
+            'card-no-active': '0px 0px 5px var(--inactive-elements)',
+            'table-header': '0 1px 0 0 var(--table-shadow-color)',
+            'focus-outer': '0 0 3px var(--active-elements--pressed)',
+            'focus-outer-off': '0 0 3px var(--inactive-elements--pressed)',
+            'focus-outer-primary': '0 0 3px var(--primary-actions--pressed)',
+            'focus-outer-secondary': '0 0 3px var(--secondary-actions--pressed)',
+            'focus-outer-destructive': '0 0 3px var(--destructive-actions--pressed)',
+            'focus-outer-success': '0 0 3px var(--success-actions--pressed)',
+            'focus-outer-warning': '0 0 3px var(--warning-actions--pressed)',
+            'focus-inner': 'inset 0 0 3px var(--active-elements--pressed)',
+            focus: '0 0 3px var(--active-elements--pressed), inset 0 0px 3px var(--active-elements--pressed)',
+            hover: '0 0 3px var(--active-elements--focus), inset 0 0px 3px var(--active-elements--focus)',
+            'focus-primary': '0 0 3px var(--primary-actions--pressed), inset 0 0px 3px var(--primary-actions--pressed)',
+            'hover-primary': '0 0 3px var(--primary-actions--focus), inset 0 0px 3px var(--primary-actions--focus)',
+            'focus-secondary': '0 0 3px var(--secondary-actions--pressed), inset 0 0px 3px var(--secondary-actions--pressed)',
+            'hover-secondary': '0 0 3px var(--secondary-actions--focus), inset 0 0px 3px var(--secondary-actions--focus)',
+            'focus-destructive': '0 0 3px var(--destructive-actions--pressed), inset 0 0px 3px var(--destructive-actions--pressed)',
+            'hover-destructive': '0 0 3px var(--destructive-actions--focus), inset 0 0px 3px var(--destructive-actions--focus)',
+            'focus-success': '0 0 3px var(--success-actions--pressed), inset 0 0px 3px var(--success-actions--pressed)',
+            'hover-success': '0 0 3px var(--success-actions--focus), inset 0 0px 3px var(--success-actions--focus)',
+            'focus-warning': '0 0 3px var(--warning-actions--pressed), inset 0 0px 3px var(--warning-actions--pressed)',
+            'hover-warning': '0 0 3px var(--warning-actions--focus), inset 0 0px 3px var(--warning-actions--focus)',
+            'hover-inner': 'inset 0 0 3px var(--active-elements--focus)',
+            'hover-outer': '0 0 3px var(--active-elements--focus)',
+            'hover-outer-off': '0 0 3px var(--inactive-elements--focus)',
+            'hover-outer-active': '0 0 3px var(--active-elements--focus)',
+            'hover-outer-primary': '0 0 3px var(--primary-actions--focus)',
+            'hover-outer-primary-alternative': '0 0 3px var(--primary-alternative-actions--focus)',
+            'hover-outer-secondary': '0 0 3px var(--secondary-actions--focus)',
+            'hover-outer-destructive': '0 0 3px var(--destructive-actions--focus)',
+            'hover-outer-success': '0 0 3px var(--success-actions--focus)',
+            'hover-outer-warning': '0 0 3px var(--warning-actions--focus)',
+            'view-switcher': '0px 0px 4px var(--overlay-bg)',
+            'vertical-tab-scroll': 'inset 0 0 8px (--light-bg)',
+            'vertical-tab-item': '0 1px 6px var(--card-shadow-color)',
+            'vertical-tab-item-hover': '0 1px 6px var(--active-elements--focus)',
+            table: '0px 0px 5px var(--card-shadow-color)',
+            'table-row': '0 10px 10px -12px var(--table-shadow-color)'
+        },
+        fontSize: {
+            xxs: '0.65rem',
+            xs: '0.75rem',
+            sm: '0.875rem',
+            base: '1rem',
+            lg: '1.125rem',
+            xl: '1.25rem',
+            '2xl': '1.5rem',
+            '3xl': '2rem',
+            '4xl': '2.25rem',
+            '5xl': '2.5rem',
+            '6xl': '3rem'
+        },
+        fill: schemeColors,
+        stroke: {
+            'active-elements': 'var(--active-elements)',
+            current: 'currentColor'
+        },
+        borderRadius: {
+            none: '0',
+            xs: '0.125rem',
+            sm: '0.25rem',
+            md: '0.375rem',
+            lg: '0.5rem',
+            xl: '0.75rem',
+            xxl: '0.875rem',
+            full: '9999px',
+            tag: '2rem',
+            DEFAULT: '0.25rem',
+            'horizontal-tab-wrapper': '0px 6px 6px 6px',
+            'horizontal-tab-item': '6px 6px 0px 0px'
+        },
+        extend: {
+            inset: {
+                unset: 'unset'
+            },
+            minWidth: {
+                auto: 'auto',
+                xs: '20rem',
+                sm: '24rem',
+                md: '28rem',
+                lg: '32rem',
+                xl: '36rem',
+                '1/4': '25%',
+                '1/2': '50%',
+                '3/4': '75%',
+                screen: '100vw'
+            },
+            minHeight: {
+                2: '2rem',
+                5.5: '1.375rem',
+                6.5: '1.625rem',
+                8: '2rem',
+                screen: '100vh',
+                inherit: 'inherit'
+            },
+            maxWidth: {
+                '1/2': '50%',
+                screen: '100vw'
+            },
+            maxHeight: {
+                inherit: 'inherit'
+            },
+            height: {
+                0.5: '2px',
+                'fit-content': 'fit-content',
+                'modal-wizard': '680px'
+            },
+            spacing: {
+                15: '3.75rem',
+                unset: 'unset'
+            },
+            width: {},
+            lineHeight: {
+                '40px': '40px'
+            },
+            zIndex: {
+                1: 1,
+                5: 5
+            },
+            rotate: {
+                135: '135deg',
+                225: '225deg'
+            }
+        }
+    },
+    safelist: [
+        // Essential text sizes
+        {
+            pattern: /text-(xxs|xs|sm|base|lg|2xl|3xl|4xl|5xl|6xl)/,
+            variants: [ 'hover', 'focus' ]
+        },
+        // Essential fonts
+        {
+            pattern: /font-(main|heebo|inter)/,
+        },
+        // Essential color classes for dynamic theming
+        {
+            pattern: /text-(primary|primary-alternative|secondary|destructive|success|warning)-actions/,
+            variants: [ 'hover', 'focus' ]
+        },
+        {
+            pattern: /bg-(primary|primary-alternative|secondary|destructive|success|warning)-actions/,
+            variants: [ 'hover', 'focus' ]
+        },
+        {
+            pattern: /border-(primary|primary-alternative|secondary|destructive|success|warning)-actions/,
+            variants: [ 'hover', 'focus' ]
+        }
+    ],
+    variants: {
+        backgroundColor: [ 'responsive', 'hover', 'focus', 'active' ]
+    }
+}
+