@central-design-system/components 3.0.0-beta.22 → 3.0.0-beta.23

package/dist/composable/field.d.ts

@@ -77,7 +77,7 @@ export declare const makeFieldProps: <Defaults extends {
      * Иконка внутри элемента перед значением поля
      */
     prependInnerIcon: {
-        type: PropType<"search" | "link" | "list" | "filters" | "add" | "administrator" | "alert-fill" | "alert" | "analog" | "arrow-down" | "arrow-left-bottom" | "arrow-left-top" | "arrow-left" | "arrow-right-bottom" | "arrow-right-top" | "arrow-right" | "arrow-up" | "arrows-vertical" | "calendar" | "card-bank" | "category" | "check-fill" | "check" | "checkbox-fill" | "checkbox" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "chocholate-menu" | "chocolate-menu" | "clock" | "collapse" | "comment" | "company" | "compare" | "copy" | "data-cards" | "delete" | "directory" | "doc-download" | "doc" | "download" | "draggable" | "edit" | "enter" | "error-fill" | "error" | "expand" | "external" | "facebook-fill" | "facebook" | "flag" | "funnel" | "globe" | "infinity" | "info-fill" | "info" | "insert" | "list-search" | "loader" | "location" | "locked" | "login" | "logout" | "menu" | "minus" | "notification" | "overflow-menu-horizontal" | "overflow-menu-vertical" | "password" | "pin" | "plus" | "printer" | "question-fill" | "question" | "refresh" | "remove" | "sandglass" | "save" | "settings" | "shopping-cart" | "sort-date" | "source" | "star-fill" | "star" | "telegram" | "timer" | "tool" | "truck" | "unlocked" | "upload" | "user-avatar" | "user-group" | "visibility-off" | "visibility-on" | "vk" | "winner" | "workspace" | "youtube">;
+        type: PropType<"search" | "link" | "list" | "filters" | "add" | "administrator" | "alert-fill" | "alert" | "analog" | "arrow-down" | "arrow-left-bottom" | "arrow-left-top" | "arrow-left" | "arrow-right-bottom" | "arrow-right-top" | "arrow-right" | "arrow-up" | "arrows-vertical" | "calendar" | "card-bank" | "category" | "check-fill" | "check" | "checkbox-fill" | "checkbox" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "chocholate-menu" | "chocolate-menu" | "clock" | "collapse" | "comment" | "company" | "compare" | "copy" | "data-cards" | "delete" | "directory-open" | "directory" | "doc-download" | "doc" | "download" | "draggable" | "edit" | "enter" | "error-fill" | "error" | "expand" | "external" | "facebook-fill" | "facebook" | "flag" | "funnel" | "globe" | "infinity" | "info-fill" | "info" | "insert" | "list-search" | "loader" | "location" | "locked" | "login" | "logout" | "menu" | "minus" | "notification" | "overflow-menu-horizontal" | "overflow-menu-vertical" | "password" | "pin" | "plus" | "printer" | "question-fill" | "question" | "refresh" | "remove" | "sandglass" | "save" | "settings" | "shopping-cart" | "sort-date" | "source" | "star-fill" | "star" | "telegram" | "timer" | "tool" | "truck" | "unlocked" | "upload" | "user-avatar" | "user-group" | "visibility-off" | "visibility-on" | "vk" | "winner" | "workspace" | "youtube">;
         default: undefined;
         validator: (value: TCdsIconsName) => boolean;
     };
@@ -85,7 +85,7 @@ export declare const makeFieldProps: <Defaults extends {
      * Иконка внутри элемента после значения поля
      */
     appendInnerIcon: {
-        type: PropType<"search" | "link" | "list" | "filters" | "add" | "administrator" | "alert-fill" | "alert" | "analog" | "arrow-down" | "arrow-left-bottom" | "arrow-left-top" | "arrow-left" | "arrow-right-bottom" | "arrow-right-top" | "arrow-right" | "arrow-up" | "arrows-vertical" | "calendar" | "card-bank" | "category" | "check-fill" | "check" | "checkbox-fill" | "checkbox" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "chocholate-menu" | "chocolate-menu" | "clock" | "collapse" | "comment" | "company" | "compare" | "copy" | "data-cards" | "delete" | "directory" | "doc-download" | "doc" | "download" | "draggable" | "edit" | "enter" | "error-fill" | "error" | "expand" | "external" | "facebook-fill" | "facebook" | "flag" | "funnel" | "globe" | "infinity" | "info-fill" | "info" | "insert" | "list-search" | "loader" | "location" | "locked" | "login" | "logout" | "menu" | "minus" | "notification" | "overflow-menu-horizontal" | "overflow-menu-vertical" | "password" | "pin" | "plus" | "printer" | "question-fill" | "question" | "refresh" | "remove" | "sandglass" | "save" | "settings" | "shopping-cart" | "sort-date" | "source" | "star-fill" | "star" | "telegram" | "timer" | "tool" | "truck" | "unlocked" | "upload" | "user-avatar" | "user-group" | "visibility-off" | "visibility-on" | "vk" | "winner" | "workspace" | "youtube">;
+        type: PropType<"search" | "link" | "list" | "filters" | "add" | "administrator" | "alert-fill" | "alert" | "analog" | "arrow-down" | "arrow-left-bottom" | "arrow-left-top" | "arrow-left" | "arrow-right-bottom" | "arrow-right-top" | "arrow-right" | "arrow-up" | "arrows-vertical" | "calendar" | "card-bank" | "category" | "check-fill" | "check" | "checkbox-fill" | "checkbox" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "chocholate-menu" | "chocolate-menu" | "clock" | "collapse" | "comment" | "company" | "compare" | "copy" | "data-cards" | "delete" | "directory-open" | "directory" | "doc-download" | "doc" | "download" | "draggable" | "edit" | "enter" | "error-fill" | "error" | "expand" | "external" | "facebook-fill" | "facebook" | "flag" | "funnel" | "globe" | "infinity" | "info-fill" | "info" | "insert" | "list-search" | "loader" | "location" | "locked" | "login" | "logout" | "menu" | "minus" | "notification" | "overflow-menu-horizontal" | "overflow-menu-vertical" | "password" | "pin" | "plus" | "printer" | "question-fill" | "question" | "refresh" | "remove" | "sandglass" | "save" | "settings" | "shopping-cart" | "sort-date" | "source" | "star-fill" | "star" | "telegram" | "timer" | "tool" | "truck" | "unlocked" | "upload" | "user-avatar" | "user-group" | "visibility-off" | "visibility-on" | "vk" | "winner" | "workspace" | "youtube">;
         default: undefined;
         validator: (value: TCdsIconsName) => boolean;
     };

package/dist/composable/icon.d.ts

@@ -22,7 +22,7 @@ export declare const makeIconProps: <Defaults extends {
      * Иконка в начале элемента
      */
     prependIcon: {
-        type: PropType<"search" | "link" | "list" | "filters" | "add" | "administrator" | "alert-fill" | "alert" | "analog" | "arrow-down" | "arrow-left-bottom" | "arrow-left-top" | "arrow-left" | "arrow-right-bottom" | "arrow-right-top" | "arrow-right" | "arrow-up" | "arrows-vertical" | "calendar" | "card-bank" | "category" | "check-fill" | "check" | "checkbox-fill" | "checkbox" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "chocholate-menu" | "chocolate-menu" | "clock" | "collapse" | "comment" | "company" | "compare" | "copy" | "data-cards" | "delete" | "directory" | "doc-download" | "doc" | "download" | "draggable" | "edit" | "enter" | "error-fill" | "error" | "expand" | "external" | "facebook-fill" | "facebook" | "flag" | "funnel" | "globe" | "infinity" | "info-fill" | "info" | "insert" | "list-search" | "loader" | "location" | "locked" | "login" | "logout" | "menu" | "minus" | "notification" | "overflow-menu-horizontal" | "overflow-menu-vertical" | "password" | "pin" | "plus" | "printer" | "question-fill" | "question" | "refresh" | "remove" | "sandglass" | "save" | "settings" | "shopping-cart" | "sort-date" | "source" | "star-fill" | "star" | "telegram" | "timer" | "tool" | "truck" | "unlocked" | "upload" | "user-avatar" | "user-group" | "visibility-off" | "visibility-on" | "vk" | "winner" | "workspace" | "youtube">;
+        type: PropType<"search" | "link" | "list" | "filters" | "add" | "administrator" | "alert-fill" | "alert" | "analog" | "arrow-down" | "arrow-left-bottom" | "arrow-left-top" | "arrow-left" | "arrow-right-bottom" | "arrow-right-top" | "arrow-right" | "arrow-up" | "arrows-vertical" | "calendar" | "card-bank" | "category" | "check-fill" | "check" | "checkbox-fill" | "checkbox" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "chocholate-menu" | "chocolate-menu" | "clock" | "collapse" | "comment" | "company" | "compare" | "copy" | "data-cards" | "delete" | "directory-open" | "directory" | "doc-download" | "doc" | "download" | "draggable" | "edit" | "enter" | "error-fill" | "error" | "expand" | "external" | "facebook-fill" | "facebook" | "flag" | "funnel" | "globe" | "infinity" | "info-fill" | "info" | "insert" | "list-search" | "loader" | "location" | "locked" | "login" | "logout" | "menu" | "minus" | "notification" | "overflow-menu-horizontal" | "overflow-menu-vertical" | "password" | "pin" | "plus" | "printer" | "question-fill" | "question" | "refresh" | "remove" | "sandglass" | "save" | "settings" | "shopping-cart" | "sort-date" | "source" | "star-fill" | "star" | "telegram" | "timer" | "tool" | "truck" | "unlocked" | "upload" | "user-avatar" | "user-group" | "visibility-off" | "visibility-on" | "vk" | "winner" | "workspace" | "youtube">;
         default: undefined;
         validator: (value: TCdsIconsName) => boolean;
     };
@@ -30,7 +30,7 @@ export declare const makeIconProps: <Defaults extends {
      * Иконка в конце элемента
      */
     appendIcon: {
-        type: PropType<"search" | "link" | "list" | "filters" | "add" | "administrator" | "alert-fill" | "alert" | "analog" | "arrow-down" | "arrow-left-bottom" | "arrow-left-top" | "arrow-left" | "arrow-right-bottom" | "arrow-right-top" | "arrow-right" | "arrow-up" | "arrows-vertical" | "calendar" | "card-bank" | "category" | "check-fill" | "check" | "checkbox-fill" | "checkbox" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "chocholate-menu" | "chocolate-menu" | "clock" | "collapse" | "comment" | "company" | "compare" | "copy" | "data-cards" | "delete" | "directory" | "doc-download" | "doc" | "download" | "draggable" | "edit" | "enter" | "error-fill" | "error" | "expand" | "external" | "facebook-fill" | "facebook" | "flag" | "funnel" | "globe" | "infinity" | "info-fill" | "info" | "insert" | "list-search" | "loader" | "location" | "locked" | "login" | "logout" | "menu" | "minus" | "notification" | "overflow-menu-horizontal" | "overflow-menu-vertical" | "password" | "pin" | "plus" | "printer" | "question-fill" | "question" | "refresh" | "remove" | "sandglass" | "save" | "settings" | "shopping-cart" | "sort-date" | "source" | "star-fill" | "star" | "telegram" | "timer" | "tool" | "truck" | "unlocked" | "upload" | "user-avatar" | "user-group" | "visibility-off" | "visibility-on" | "vk" | "winner" | "workspace" | "youtube">;
+        type: PropType<"search" | "link" | "list" | "filters" | "add" | "administrator" | "alert-fill" | "alert" | "analog" | "arrow-down" | "arrow-left-bottom" | "arrow-left-top" | "arrow-left" | "arrow-right-bottom" | "arrow-right-top" | "arrow-right" | "arrow-up" | "arrows-vertical" | "calendar" | "card-bank" | "category" | "check-fill" | "check" | "checkbox-fill" | "checkbox" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "chocholate-menu" | "chocolate-menu" | "clock" | "collapse" | "comment" | "company" | "compare" | "copy" | "data-cards" | "delete" | "directory-open" | "directory" | "doc-download" | "doc" | "download" | "draggable" | "edit" | "enter" | "error-fill" | "error" | "expand" | "external" | "facebook-fill" | "facebook" | "flag" | "funnel" | "globe" | "infinity" | "info-fill" | "info" | "insert" | "list-search" | "loader" | "location" | "locked" | "login" | "logout" | "menu" | "minus" | "notification" | "overflow-menu-horizontal" | "overflow-menu-vertical" | "password" | "pin" | "plus" | "printer" | "question-fill" | "question" | "refresh" | "remove" | "sandglass" | "save" | "settings" | "shopping-cart" | "sort-date" | "source" | "star-fill" | "star" | "telegram" | "timer" | "tool" | "truck" | "unlocked" | "upload" | "user-avatar" | "user-group" | "visibility-off" | "visibility-on" | "vk" | "winner" | "workspace" | "youtube">;
         default: undefined;
         validator: (value: TCdsIconsName) => boolean;
     };

package/dist/composable/overlay.d.ts

@@ -22,6 +22,7 @@ export declare const makeOverlayProps: <Defaults extends {
     contentClasses?: unknown;
     contentProps?: unknown;
     noClickAnimation?: unknown;
+    opacity?: unknown;
 } = {}>(defaults?: Defaults | undefined) => import('../utils').AppendDefault<{
     /**
      * Указывает, к какому DOM элементу будет прикреплен компонент.
@@ -34,7 +35,7 @@ export declare const makeOverlayProps: <Defaults extends {
         default: boolean;
     };
     /**
-     * Указывает, что компонент будет прикреплен к родительскому элементу. Подразумевает absolute и attach
+     * Указывает, что компонент будет прикреплен к родительскому элементу. Подразумевает absolute и attach в true.
      */
     contained: {
         type: PropType<boolean>;
@@ -103,4 +104,11 @@ export declare const makeOverlayProps: <Defaults extends {
         type: PropType<boolean>;
         default: boolean;
     };
+    /**
+     * Прозрачность overlay компонента
+     */
+    opacity: {
+        type: PropType<string | number>;
+        default: undefined;
+    };
 }, Defaults>;

package/dist/composable/select.d.ts

@@ -178,7 +178,7 @@ export declare const makeSelectProps: <Defaults extends {
      * Иконка выпадающего меню
      */
     menuIcon: {
-        type: PropType<"search" | "link" | "list" | "filters" | "add" | "administrator" | "alert-fill" | "alert" | "analog" | "arrow-down" | "arrow-left-bottom" | "arrow-left-top" | "arrow-left" | "arrow-right-bottom" | "arrow-right-top" | "arrow-right" | "arrow-up" | "arrows-vertical" | "calendar" | "card-bank" | "category" | "check-fill" | "check" | "checkbox-fill" | "checkbox" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "chocholate-menu" | "chocolate-menu" | "clock" | "collapse" | "comment" | "company" | "compare" | "copy" | "data-cards" | "delete" | "directory" | "doc-download" | "doc" | "download" | "draggable" | "edit" | "enter" | "error-fill" | "error" | "expand" | "external" | "facebook-fill" | "facebook" | "flag" | "funnel" | "globe" | "infinity" | "info-fill" | "info" | "insert" | "list-search" | "loader" | "location" | "locked" | "login" | "logout" | "menu" | "minus" | "notification" | "overflow-menu-horizontal" | "overflow-menu-vertical" | "password" | "pin" | "plus" | "printer" | "question-fill" | "question" | "refresh" | "remove" | "sandglass" | "save" | "settings" | "shopping-cart" | "sort-date" | "source" | "star-fill" | "star" | "telegram" | "timer" | "tool" | "truck" | "unlocked" | "upload" | "user-avatar" | "user-group" | "visibility-off" | "visibility-on" | "vk" | "winner" | "workspace" | "youtube">;
+        type: PropType<"search" | "link" | "list" | "filters" | "add" | "administrator" | "alert-fill" | "alert" | "analog" | "arrow-down" | "arrow-left-bottom" | "arrow-left-top" | "arrow-left" | "arrow-right-bottom" | "arrow-right-top" | "arrow-right" | "arrow-up" | "arrows-vertical" | "calendar" | "card-bank" | "category" | "check-fill" | "check" | "checkbox-fill" | "checkbox" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "chocholate-menu" | "chocolate-menu" | "clock" | "collapse" | "comment" | "company" | "compare" | "copy" | "data-cards" | "delete" | "directory-open" | "directory" | "doc-download" | "doc" | "download" | "draggable" | "edit" | "enter" | "error-fill" | "error" | "expand" | "external" | "facebook-fill" | "facebook" | "flag" | "funnel" | "globe" | "infinity" | "info-fill" | "info" | "insert" | "list-search" | "loader" | "location" | "locked" | "login" | "logout" | "menu" | "minus" | "notification" | "overflow-menu-horizontal" | "overflow-menu-vertical" | "password" | "pin" | "plus" | "printer" | "question-fill" | "question" | "refresh" | "remove" | "sandglass" | "save" | "settings" | "shopping-cart" | "sort-date" | "source" | "star-fill" | "star" | "telegram" | "timer" | "tool" | "truck" | "unlocked" | "upload" | "user-avatar" | "user-group" | "visibility-off" | "visibility-on" | "vk" | "winner" | "workspace" | "youtube">;
         default: string;
         validator: (value: TCdsIconsName) => boolean;
     };

package/dist/composable/transition.d.ts

@@ -3,6 +3,8 @@ interface ITransitionProps extends TransitionProps {
     transition: string | boolean | (TransitionProps & {
         component?: Component;
     });
+    disabled?: boolean;
+    group?: boolean;
 }
 export declare const makeTransitionProps: <Defaults extends {
     transition?: unknown;

package/dist/create.d.ts

@@ -1,3 +1,4 @@
+import { ITeleportOptions } from './components/CdsOverlay/composable';
 import { ILocale, TAvailableLocale } from './locale';
 import type { IDisplayOptions, IThemeOptions } from './composable';
 import type { App } from 'vue';
@@ -11,6 +12,7 @@ export interface ICdsOptions {
     cssGrid?: boolean;
     ssr?: boolean;
     locale?: TAvailableLocale | ILocale;
+    teleport?: Partial<ITeleportOptions>;
 }
 interface NuxtApp {
     $nuxt?: {

package/dist/globals.d.ts

@@ -27,5 +27,12 @@ declare global {
     >;
   }
 
+  interface MouseEvent {
+    sourceCapabilities?: { firesTouchEvents: boolean };
+  }
+
+  function parseInt(s: string | number, radix?: number): number;
+  function parseFloat(string: string | number): number;
+
   export const __VUE_OPTIONS_API__: boolean | undefined;
 }

package/dist/transitions/collapseTransition.d.ts

@@ -0,0 +1,11 @@
+export declare const CdsTransitionCollapse: (name?: string, appear?: boolean) => {
+    name: string;
+    appear: boolean;
+    css: boolean;
+    onBeforeEnter: (node: HTMLDivElement) => void;
+    onEnter: (node: HTMLDivElement) => void;
+    onAfterEnter: (node: HTMLDivElement) => void;
+    onBeforeLeave: (node: HTMLDivElement) => void;
+    onLeave: (node: HTMLDivElement) => void;
+    onAfterLeave: (node: HTMLDivElement) => void;
+};

package/dist/transitions/index.d.ts

@@ -13,6 +13,7 @@ export declare const CdsTransitionExpandX: import("vue").DefineComponent<{
     mode: import("vue").Prop<"default" | "in-out" | "out-in", "default" | "in-out" | "out-in">;
 }>>, {}>;
 export { CdsTransitionModal } from './modalTransition';
+export { CdsTransitionCollapse } from './collapseTransition';
 export declare const CdsTransitionFade: import("vue").DefineComponent<{
     group: import("vue").PropType<boolean>;
     hideOnLeave: import("vue").PropType<boolean>;

package/dist/utils/dom/bindProps.d.ts

@@ -0,0 +1,2 @@
+export declare function bindProps(el: HTMLElement, props: Record<string, any>): void;
+export declare function unbindProps(el: HTMLElement, props: Record<string, any>): void;

package/dist/utils/dom/box.d.ts

@@ -24,3 +24,4 @@ export declare function getOverflow(a: Box, b: Box): {
         after: number;
     };
 };
+export declare function getTargetBox(target: HTMLElement | [x: number, y: number]): Box;

package/dist/utils/helpers.d.ts

@@ -1,3 +1,4 @@
+import { type VNode } from 'vue';
 import type { TItemKey } from '../composable';
 import type { ComponentPublicInstance, ComponentInternalInstance, ComputedGetter, InjectionKey, PropType, Ref, ToRefs, VNodeProps, VNodeChild, AllowedComponentProps, Component } from 'vue';
 export declare const preventedScrollClass = "cds-scroll-blocked";
@@ -139,6 +140,7 @@ export declare function destructComputed<T extends object>(getter: ComputedGette
  * @param val
  */
 export declare function includes(arr: readonly any[], val: any): boolean;
+export declare function eventName(propName: string): string;
 export declare function convertToUnit(str: number, unit?: string): string;
 export declare function convertToUnit(str: string | number | null | undefined, unit?: string): string | undefined;
 export declare function convertRemToPx(value: string): number;
@@ -150,10 +152,6 @@ export declare function convertRemToPx(value: string): number;
  */
 export declare function clamp(value: number, min?: number, max?: number): number;
 export declare function createRange(length: number, start?: number): number[];
-/**
- * Is value an like event
- * @param key
- */
 export declare const isOn: (key: string) => boolean;
 export declare const EventProp: PropType<(...args: any[]) => any>;
 export declare function isComponentInstance(obj: any): obj is ComponentPublicInstance;
@@ -161,7 +159,7 @@ export declare function isFixedPosition(el?: HTMLElement): boolean;
 export declare function padEnd(str: string, length: number, char?: string): string;
 export declare function padStart(string: number | string, targetLength: number, padString: string): string;
 export declare function pad(n: string | number, length?: number): string;
-export declare function refElement<T extends Record<string, any> | undefined>(obj: T): Exclude<T, ComponentPublicInstance> | HTMLElement;
+export declare function refElement(obj: ComponentPublicInstance<any> | HTMLElement): HTMLElement | undefined;
 export declare function omit<T extends object, K extends keyof T>(obj: T, fields: K[]): Omit<T, K>;
 export declare function findChildrenWithProvide(key: InjectionKey<any> | symbol, vnode?: VNodeChild | {
     [key: string]: any;
@@ -192,11 +190,15 @@ export declare function plurals(n: number, opts: string[]): string;
  * @param size
  */
 export declare function chunk(str: string, size?: number): string[];
+export declare function defer(timeout: number, cb: () => void): () => void;
+export declare function isValidElement(element: any): any;
 export declare function noop(): void;
 /**
  * Types
  */
 export declare type MaybeRef<T> = T | Ref<T>;
+declare type VNodeChildAtom = VNode | string | number | boolean | null | undefined | void;
+export declare type VueNode = VNodeChildAtom | VNodeChildAtom[] | JSX.Element;
 export declare type SelectItemKey = TItemKey;
 export declare type MaybePick<T extends object, U extends Extract<keyof T, string>> = Record<string, unknown> extends T ? Partial<Pick<T, U>> : Pick<T, U>;
 export declare type EventProp<T = (...args: any[]) => any> = T;

package/dist/utils/index.d.ts

@@ -6,6 +6,8 @@ export * from './use/eagerComputed';
 export * from './use/pickAttrs';
 export * from './use/cache';
 export * from './use/copyToClipboard';
+export * from './use/flattenChildren';
+export * from './use/listener';
 export * from './changeCase/noCase';
 export * from './changeCase/lowerCase';
 export * from './changeCase/pascalCase';
@@ -22,5 +24,6 @@ export * from './dom/wrapperRaf';
 export * from './dom/warn';
 export * from './dom/classNames';
 export * from './dom/hRender';
+export * from './dom/bindProps';
 export * from './colorsUtils';
 export { default as colors } from './colors';

package/dist/utils/use/flattenChildren.d.ts

@@ -0,0 +1,3 @@
+export declare function flattenChildren(children?: any[], filterEmpty?: boolean): any[];
+export declare function filterEmpty(children?: any[]): any[];
+export declare function isEmptyElement(c: Record<string, any>): boolean | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@central-design-system/components",
-  "version": "3.0.0-beta.22",
+  "version": "3.0.0-beta.23",
   "description": "Central Design System on the Vue 3.0 and TypeScript",
   "author": "magersoft",
   "license": "ISC",

package/src/scss/mixins/typo.scss

@@ -117,7 +117,6 @@
   font-size: var(--cds-font-body-size-s);
   line-height: var(--cds-font-height-helper);
   font-weight: var(--cds-font-weight-normal);
-  max-width: $max-width;
 }
 @mixin cds-font-description($max-width: 32rem) {
   font-family: var(--cds-font-family-sans);
@@ -132,6 +131,4 @@
   font-size: var(--cds-font-body-size-xs);
   line-height: var(--cds-font-height-helper);
   font-weight: var(--cds-font-weight-normal);
-  max-width: $max-width;
-  width: 75%;
 }

package/src/scss/modules/_transition.scss

@@ -10,6 +10,24 @@ $standard-duration: $cds-duration-fast + ms;
 $accent-duration: $cds-duration-normal + ms;
 
 @mixin transition-default() {
+  &-enter-active {
+    transition-duration: $standard-duration !important;
+    transition-timing-function: $standard-easing !important;
+  }
+
+  &-leave-active {
+    transition-duration: $standard-duration !important;
+    transition-timing-function: $standard-easing !important;
+  }
+
+  &-move {
+    transition-duration: 0.5s !important;
+    transition-property: transform !important;
+    transition-timing-function: $standard-easing !important;
+  }
+}
+
+@mixin transition-minimal() {
   &-enter-active {
     transition: $standard-duration $standard-easing;
   }
@@ -36,6 +54,19 @@ $accent-duration: $cds-duration-normal + ms;
 .fade-transition {
   @include transition-default();
 
+  &-enter-from, &-leave-to {
+    opacity: 0 !important;
+  }
+
+  &-enter-active,
+  &-leave-active {
+    transition-property: opacity !important;
+  }
+}
+
+.fade-transition-minimal {
+  @include transition-minimal();
+
   &-leave-active {
     position: absolute;
   }