@cupra/ui-kit 2.0.0-canary.22 → 2.0.0-canary.220

package/dist-react/types/components/ds-theme-switch/ds-theme-switch.types.d.ts

@@ -0,0 +1,2 @@
+import type { CommonAttrs } from '../../types/types';
+export type DsThemeSwitchAttrs = CommonAttrs;

package/dist-react/types/components/ds-toast/ds-toast.d.ts

@@ -1,4 +1,5 @@
-import { UiKitElement } from '../base/UiKitElement.ts';
+import { UiKitElement } from '@base/UiKitElement.ts';
+import '@components/ds-toast-message/ds-toast-message.ts';
 import type { DsToastAttrs } from './ds-toast.types.ts';
 export declare class DsToast extends UiKitElement {
     static styles: import("lit").CSSResult[];

package/dist-react/types/components/ds-toast/ds-toast.types.d.ts

@@ -6,7 +6,10 @@ export interface ToastOptions {
     text?: string;
     status?: ToastStatus;
     duration?: number;
-    referenceId?: string;
+    action?: {
+        text: string;
+        callback?: () => void;
+    };
 }
 export interface Toast extends ToastOptions {
     timeoutId?: number;

package/dist-react/types/components/ds-toast/utils/ToastManager.d.ts

@@ -1,10 +1,18 @@
 import type { Toast, ToastManagerSubscriber, ToastOptions } from '../ds-toast.types';
 type AddEvent = CustomEvent<ToastOptions>;
-type RemoveEvent = CustomEvent<Extract<ToastOptions, 'id | referenceId'>>;
+type RemoveEvent = CustomEvent<Pick<ToastOptions, 'id'>>;
+type ActionClickEvent = CustomEvent<{
+    id: string;
+}>;
+type ActionEvent = CustomEvent<{
+    toastId: string;
+}>;
 declare global {
     interface WindowEventMap {
         'toast:add': AddEvent;
         'toast:remove': RemoveEvent;
+        'ds-toast:action-click': ActionClickEvent;
+        'ds-toast:action': ActionEvent;
     }
 }
 export declare const generateId: () => string;
@@ -18,6 +26,7 @@ declare class ToastManager {
     static getInstance(): ToastManager;
     private handleAddToast;
     private handleRemoveToast;
+    private handleActionClick;
     removeToast(id: string): void;
     getToasts(): Toast[];
     subscribe(subscriber: ToastManagerSubscriber): () => void;

package/dist-react/types/components/ds-toast-message/ds-toast-message.d.ts

@@ -1,5 +1,7 @@
-import { UiKitElement } from '../base/UiKitElement.ts';
-import { nothing } from 'lit';
+import { UiKitElement } from '@base/UiKitElement.ts';
+import '@components/ds-icon-button/ds-icon-button.ts';
+import '@components/ds-icon/ds-icon.ts';
+import '@components/ds-link-button/ds-link-button.ts';
 import type { DsToastMessageAttrs } from './ds-toast-message.types.ts';
 export declare class DsToastMessage extends UiKitElement {
     static styles: import("lit").CSSResult[];
@@ -7,14 +9,17 @@ export declare class DsToastMessage extends UiKitElement {
     dataId: DsToastMessageAttrs['data-id'];
     title: DsToastMessageAttrs['title'];
     text: DsToastMessageAttrs['text'];
-    dataTemplate: DsToastMessageAttrs['data-template'];
+    action: DsToastMessageAttrs['action'];
     private getIconName;
     private handleClickCloseButton;
+    private handleClickAction;
     protected get toastMessageClasses(): {
         [x: string]: boolean;
         container: boolean;
     };
-    protected get iconTemplate(): any;
-    protected get closeButtonTemplate(): any;
-    render(): typeof nothing | import("lit").TemplateResult<1>;
+    protected get iconTemplate(): import("lit").HTMLTemplateResult;
+    protected get headerTemplate(): import("lit").TemplateResult<1>;
+    protected get closeButtonTemplate(): import("lit").HTMLTemplateResult;
+    protected get actionTemplate(): import("lit").HTMLTemplateResult;
+    render(): import("lit").TemplateResult<1>;
 }

package/dist-react/types/components/ds-toast-message/ds-toast-message.types.d.ts

@@ -5,5 +5,8 @@ export type DsToastMessageAttrs = {
     'data-id': string;
     title?: string;
     text?: string;
-    'data-template'?: boolean;
+    action?: {
+        text: string;
+        callback?: () => void;
+    };
 } & CommonAttrs;

package/dist-react/types/components/ds-toggle-switch/ds-toggle-switch.d.ts

@@ -1,16 +1,19 @@
-import { UiKitElement } from '../base/UiKitElement.ts';
-import type { DsToggleSwitchAttrs } from '../ds-toggle-switch/ds-toggle-switch.types';
+import { UiKitElement } from '@base/UiKitElement.ts';
+import type { DsToggleSwitchAttrs } from './ds-toggle-switch.types';
 export declare class DsToggleSwitch extends UiKitElement {
     static styles: import("lit").CSSResult[];
     size: DsToggleSwitchAttrs['size'];
-    checked: DsToggleSwitchAttrs['checked'];
+    _checked: DsToggleSwitchAttrs['checked'];
+    private _checkedState;
+    get checked(): boolean;
+    set checked(value: DsToggleSwitchAttrs['checked']);
     disabled: DsToggleSwitchAttrs['disabled'];
     mode: DsToggleSwitchAttrs['mode'];
     dataAriaLabel: DsToggleSwitchAttrs['data-aria-label'];
     protected handleClick(): void;
-    protected handleClickOff(): void;
-    protected handleClickOn(): void;
-    protected get styleTokens(): import("lit").HTMLTemplateResult;
+    protected handleClickOff(event: Event): void;
+    protected handleClickOn(event: Event): void;
+    protected get styleTokens(): import("lit").TemplateResult<1>;
     protected get labelClasses(): {
         [x: string]: boolean;
         container: boolean;

package/dist-react/types/components/ds-tooltip/ds-tooltip.d.ts

@@ -1,9 +1,7 @@
-import { UiKitElement } from '../base/UiKitElement.ts';
+import { UiKitElement } from '@base/UiKitElement.ts';
 import { type Placement } from '@floating-ui/dom';
-import { nothing } from 'lit';
 import type { DsTooltipAttrs } from './ds-tooltip.types';
-declare const DsTooltip_base: (new (...args: any[]) => import("../../mixins/ViewportMixin").ViewportInterface) & typeof UiKitElement;
-export declare class DsTooltip extends DsTooltip_base {
+export declare class DsTooltip extends UiKitElement {
     static styles: import("lit").CSSResult[];
     mode: DsTooltipAttrs['mode'];
     show: DsTooltipAttrs['show'];
@@ -25,6 +23,7 @@ export declare class DsTooltip extends DsTooltip_base {
     protected updatePosition(): void;
     protected handleKeyDown: () => void;
     protected handlePointerDown: () => void;
+    protected handleTooltipPointerDown: (event: Event) => void;
     protected handleResize: (params?: any) => void | Function;
     protected get arrowClasses(): {
         [x: string]: boolean;
@@ -47,8 +46,8 @@ export declare class DsTooltip extends DsTooltip_base {
     };
     protected handleClose: () => void;
     protected get arrowTemplate(): import("lit").TemplateResult<1>;
-    protected get tooltipTemplate(): typeof nothing | import("lit").TemplateResult<1>;
-    protected get styleTokens(): import("lit").HTMLTemplateResult;
+    protected get tooltipTemplate(): import("lit").TemplateResult<1>;
+    protected get styleTokens(): import("lit").TemplateResult<1>;
     protected handleAnchorPointerDown: (event: PointerEvent) => void;
     protected handleAnchorMouseOver: () => void;
     protected handleAnchorMouseOut: () => void;
@@ -57,4 +56,3 @@ export declare class DsTooltip extends DsTooltip_base {
     protected handlePressOutside: (event: MouseEvent) => void;
     render(): import("lit").TemplateResult<1>;
 }
-export {};

package/dist-react/types/components/ds-value-unit/ds-value-unit.d.ts

@@ -0,0 +1,9 @@
+import { UiKitElement } from '@base/UiKitElement.ts';
+import type { ValueFontWeight, ValueUnitSize } from '@components/ds-value-unit/ds-value-unit.types.ts';
+export declare class DsValueUnit extends UiKitElement {
+    static styles: import("lit").CSSResult[];
+    size: ValueUnitSize;
+    valueWeight: ValueFontWeight;
+    unitWeight: ValueFontWeight;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist-react/types/components/ds-value-unit/ds-value-unit.types.d.ts

@@ -0,0 +1,8 @@
+import type { CommonAttrs } from '../../types/types';
+export type ValueUnitSize = 'colossal' | 'huge' | 'big' | 'large' | 'medium' | 'small' | 'micro' | 'nano';
+export type ValueFontWeight = 'regular' | 'light';
+export type DsValueUnitAttrs = CommonAttrs & {
+    size?: ValueUnitSize;
+    'value-weight'?: ValueFontWeight;
+    'unit-weight'?: ValueFontWeight;
+};

package/dist-react/types/components/ds-value-unit/styles/common.styles.d.ts

@@ -0,0 +1 @@
+export declare const commonStyles: import("lit").CSSResult;

package/dist-react/types/components/index.d.ts

@@ -1,69 +1,85 @@
-import './ds-accordion/ds-accordion.ts';
-import './ds-avatar/ds-avatar.ts';
-import './ds-badge/ds-badge.ts';
-import './ds-basic-card/ds-basic-card.ts';
-import './ds-basic-card-image/ds-basic-card-image.ts';
-import './ds-basic-card-header/ds-basic-card-header.ts';
-import './ds-basic-card-section/ds-basic-card-section.ts';
-import './ds-bullets/ds-bullets.ts';
-import './ds-button/ds-button.ts';
-import './ds-carousel-indicator/ds-carousel-indicator.ts';
-import './ds-checkbox/ds-checkbox.ts';
-import './ds-chip/ds-chip.ts';
-import './ds-chips/ds-chips.ts';
-import './ds-currency/ds-currency.ts';
-import './ds-dialog/ds-dialog.ts';
-import './ds-dialog-body/ds-dialog-body.ts';
-import './ds-dialog-footer/ds-dialog-footer.ts';
-import './ds-dialog-fullscreen/ds-dialog-fullscreen.ts';
-import './ds-dialog-header/ds-dialog-header.ts';
-import './ds-divider/ds-divider.ts';
-import './ds-drawer/ds-drawer.ts';
-import './ds-hyperlink/ds-hyperlink.ts';
-import './ds-icon/ds-icon.ts';
-import './ds-icon-button/ds-icon-button.ts';
-import './ds-input/ds-input.ts';
-import './ds-interactive-card/ds-interactive-card.ts';
-import './ds-link-button/ds-link-button.ts';
-import './ds-loader-bar/ds-loader-bar.ts';
-import './ds-loader-dots/ds-loader-dots.ts';
-import './ds-loader-logo/ds-loader-logo.ts';
-import './ds-loader-spinner/ds-loader-spinner.ts';
-import './ds-logo/ds-logo.ts';
-import './ds-main-title/ds-main-title.ts';
-import './ds-map-pin/ds-map-pin.ts';
-import './ds-modal/ds-modal.ts';
-import './ds-password-input/ds-password-input.ts';
-import './ds-picker-item/ds-picker-item.ts';
-import './ds-portal/ds-portal.ts';
-import './ds-progress-bar/ds-progress-bar.ts';
-import './ds-radio/ds-radio.ts';
-import './ds-radio-button/ds-radio-button.ts';
-import './ds-radio-button-group/ds-radio-button-group.ts';
-import './ds-radio-group/ds-radio-group.ts';
-import './ds-rating/ds-rating.ts';
-import './ds-search/ds-search.ts';
-import './ds-search-input/ds-search-input.ts';
-import './ds-secondary-navigation/ds-secondary-navigation.ts';
-import './ds-segmented-control/ds-segmented-control.ts';
-import './ds-select/ds-select.ts';
-import './ds-selection/ds-selection.ts';
-import './ds-sidebar-navigation/ds-sidebar-navigation.ts';
-import './ds-slider/ds-slider.ts';
-import './ds-static-box/ds-static-box.ts';
-import './ds-stepper/ds-stepper.ts';
-import './ds-tabs/ds-tabs.ts';
-import './ds-tag/ds-tag.ts';
-import './ds-text/ds-text.ts';
-import './ds-text-input/ds-text-input.ts';
-import './ds-textarea/ds-textarea.ts';
-import './ds-theme-provider/ds-theme-provider.ts';
-import './ds-toast/ds-toast.ts';
-import './ds-toast-message/ds-toast-message.ts';
-import './ds-inline-alert/ds-inline-alert.ts';
-import './ds-toggle-button/ds-toggle-button.ts';
-import './ds-toggle-switch/ds-toggle-switch.ts';
-import './ds-tooltip/ds-tooltip.ts';
-import './ds-media-control/ds-media-control.ts';
-import './ds-list-item/ds-list-item.ts';
-import './ds-list/ds-list.ts';
+import '@components/ds-accordion/ds-accordion.ts';
+import '@components/ds-avatar/ds-avatar.ts';
+import '@components/ds-badge/ds-badge.ts';
+import '@components/ds-banner/ds-banner.ts';
+import '@components/ds-basic-card/ds-basic-card.ts';
+import '@components/ds-basic-card-image/ds-basic-card-image.ts';
+import '@components/ds-basic-card-header/ds-basic-card-header.ts';
+import '@components/ds-basic-card-section/ds-basic-card-section.ts';
+import '@components/ds-breadcrumbs/ds-breadcrumbs.ts';
+import '@components/ds-breadcrumbs-item/ds-breadcrumbs-item.ts';
+import '@components/ds-bullets/ds-bullets.ts';
+import '@components/ds-button/ds-button.ts';
+import '@components/ds-calendar/ds-calendar.ts';
+import '@components/ds-calendar-day/ds-calendar-day.ts';
+import '@components/ds-carousel-indicator/ds-carousel-indicator.ts';
+import '@components/ds-checkbox/ds-checkbox.ts';
+import '@components/ds-checkbox-group/ds-checkbox-group.ts';
+import '@components/ds-chip/ds-chip.ts';
+import '@components/ds-chips/ds-chips.ts';
+import '@components/ds-currency/ds-currency.ts';
+import '@components/ds-date-picker/ds-date-picker.ts';
+import '@components/ds-dialog/ds-dialog.ts';
+import '@components/ds-dialog-body/ds-dialog-body.ts';
+import '@components/ds-dialog-footer/ds-dialog-footer.ts';
+import '@components/ds-dialog-fullscreen/ds-dialog-fullscreen.ts';
+import '@components/ds-dialog-header/ds-dialog-header.ts';
+import '@components/ds-divider/ds-divider.ts';
+import '@components/ds-drawer/ds-drawer.ts';
+import '@components/ds-favourite-action/ds-favourite-action.ts';
+import '@components/ds-hyperlink/ds-hyperlink.ts';
+import '@components/ds-icon/ds-icon.ts';
+import '@components/ds-icon-button/ds-icon-button.ts';
+import '@components/ds-input/ds-input.ts';
+import '@components/ds-interactive-card/ds-interactive-card.ts';
+import '@components/ds-link-button/ds-link-button.ts';
+import '@components/ds-loader-bar/ds-loader-bar.ts';
+import '@components/ds-loader-dots/ds-loader-dots.ts';
+import '@components/ds-loader-logo/ds-loader-logo.ts';
+import '@components/ds-loader-spinner/ds-loader-spinner.ts';
+import '@components/ds-logo/ds-logo.ts';
+import '@components/ds-main-title/ds-main-title.ts';
+import '@components/ds-map-pin/ds-map-pin.ts';
+import '@components/ds-modal/ds-modal.ts';
+import '@components/ds-password-input/ds-password-input.ts';
+import '@components/ds-picker-item/ds-picker-item.ts';
+import '@components/ds-portal/ds-portal.ts';
+import '@components/ds-progress-bar/ds-progress-bar.ts';
+import '@components/ds-radio/ds-radio.ts';
+import '@components/ds-radio-button/ds-radio-button.ts';
+import '@components/ds-radio-button-group/ds-radio-button-group.ts';
+import '@components/ds-radio-group/ds-radio-group.ts';
+import '@components/ds-rating/ds-rating.ts';
+import '@components/ds-search/ds-search.ts';
+import '@components/ds-search-input/ds-search-input.ts';
+import '@components/ds-secondary-navigation/ds-secondary-navigation.ts';
+import '@components/ds-segmented-control/ds-segmented-control.ts';
+import '@components/ds-select/ds-select.ts';
+import '@components/ds-selection/ds-selection.ts';
+import '@components/ds-skeleton/ds-skeleton.ts';
+import '@components/ds-sidebar-navigation/ds-sidebar-navigation.ts';
+import '@components/ds-slider/ds-slider.ts';
+import '@components/ds-static-box/ds-static-box.ts';
+import '@components/ds-stepper/ds-stepper.ts';
+import '@components/ds-tabs/ds-tabs.ts';
+import '@components/ds-tag/ds-tag.ts';
+import '@components/ds-text/ds-text.ts';
+import '@components/ds-text-input/ds-text-input.ts';
+import '@components/ds-textarea/ds-textarea.ts';
+import '@components/ds-theme-provider/ds-theme-provider.ts';
+import '@components/ds-theme-switch/ds-theme-switch.ts';
+import '@components/ds-toast/ds-toast.ts';
+import '@components/ds-toast-message/ds-toast-message.ts';
+import '@components/ds-inline-alert/ds-inline-alert.ts';
+import '@components/ds-toggle-button/ds-toggle-button.ts';
+import '@components/ds-toggle-switch/ds-toggle-switch.ts';
+import '@components/ds-tooltip/ds-tooltip.ts';
+import '@components/ds-value-unit/ds-value-unit.ts';
+import '@components/ds-media-control/ds-media-control.ts';
+import '@components/ds-list-item/ds-list-item.ts';
+import '@components/ds-list/ds-list.ts';
+import '@components/ds-icon-button-group/ds-icon-button-group.ts';
+import '@components/ds-navigation-controls/ds-navigation-controls.ts';
+import '@components/ds-table/ds-table.ts';
+import '@components/ds-table-row/ds-table-row.ts';
+import '@components/ds-table-cell/ds-table-cell.ts';

package/dist-react/types/index.d.ts

@@ -1,2 +1,3 @@
 import './components/index';
-export { iconNames } from './components/ds-icon/iconNames.ts';
+export { iconNames } from '@components/ds-icon/iconNames.ts';
+export { VERSION, VERSION_TAG_SUFFIX } from '@utils/version.ts';

package/dist-react/types/mixins/inputStatesMixin.d.ts

@@ -8,6 +8,7 @@ export interface InputStatesInterface {
         invalid: boolean;
         filled: boolean;
         disabled: boolean;
+        readonly: boolean;
     };
     nativeInput: HTMLInputElement | HTMLTextAreaElement | undefined;
 }

package/dist-react/types/utils/IconsManager.d.ts

@@ -1,4 +1,4 @@
-import type { Icons } from '../components/ds-icon/Icons.type.ts';
+import type { Icons } from '@components/ds-icon/Icons.type.ts';
 declare class IconsManager {
     private icons;
     private theme;

package/dist-react/types/utils/StylesRegistry/StylesRegistry.d.ts

@@ -1,4 +1,4 @@
-import { Theme } from '../../components/ds-theme-provider/themeContext.ts';
+import { Theme } from '@components/ds-theme-provider/themeContext.ts';
 declare class StylesRegistry {
     private static instance;
     private stylePromises;

package/dist-react/types/utils/arrayConverter.d.ts

@@ -1,4 +1,8 @@
-export declare const arrayConverter: {
-    fromAttribute(value: string): unknown[];
-    toAttribute(value: unknown[]): string;
+export declare const stringArrayConverter: {
+    fromAttribute(value: string | null): string[];
+    toAttribute(value: string[]): string;
+};
+export declare const numberArrayConverter: {
+    fromAttribute(value: string | null): number[];
+    toAttribute(value: number[]): string;
 };

package/dist-react/types/utils/breakpoints.d.ts

@@ -1,4 +1,3 @@
-type Viewports = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
+export type Viewports = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
 export declare const breakpoints: Record<Viewports, number>;
 export declare const viewportQueries: Record<Viewports, string>;
-export {};

package/dist-react/types/utils/concurrencyLimit.d.ts

@@ -0,0 +1,4 @@
+type Callback<T> = () => Promise<T>;
+type LimitedPromises = <T>(callback: Callback<T>) => Promise<T>;
+export declare function concurrencyLimit(maxConcurrent: number): LimitedPromises;
+export {};

package/dist-react/types/utils/formatNumber/formatNumber.d.ts

@@ -197,6 +197,7 @@ export type Integer1To21 = Integer1To20 | 21;
 export type Locale = {
     [K in keyof Locales]: Locales[K] extends '' ? K : `${K}-${Locales[K]}`;
 }[keyof Locales];
+export type SymbolOverrides = Record<string, string | Partial<Record<Locale, string>>>;
 export type Currency = {
     style: 'currency';
     currency: string;
@@ -233,11 +234,14 @@ export type FormatNumberProps = UnitStyle & {
     thousandSeparator?: string;
     fractionSeparator?: string;
     useGrouping?: 'auto' | 'always' | 'min2' | boolean;
+    currencyDisplay?: 'symbol' | 'narrowSymbol' | 'code' | 'name';
+    symbolOverrides?: SymbolOverrides | string;
 };
 export type FormatedNumber = {
+    formattedNumber: string;
     formattedValue: string;
     unitSymbol?: string;
     unitSymbolPosition?: 'left' | 'right';
 };
-export declare function formatNumber({ value, locale, style, unit, currency, localeMatcher, minimumIntegerDigits, minimumFractionDigits, maximumFractionDigits, thousandSeparator, fractionSeparator, useGrouping, }: FormatNumberProps): FormatedNumber;
+export declare function formatNumber({ value, locale, style, unit, currency, localeMatcher, minimumIntegerDigits, minimumFractionDigits, maximumFractionDigits, thousandSeparator, fractionSeparator, useGrouping, currencyDisplay, symbolOverrides, }: FormatNumberProps): FormatedNumber;
 export {};

package/dist-react/types/utils/objectConverter.d.ts

@@ -1 +1,4 @@
-export declare const objectConverter: (value: unknown) => any;
+import { Viewports } from './breakpoints';
+type Size = string | Viewports;
+export declare const objectConverter: (value: unknown) => Size;
+export {};

package/dist-react/types/utils/observeScroll/observeScroll.d.ts

@@ -0,0 +1,7 @@
+export type ScrollState = {
+    top: boolean;
+    bottom: boolean;
+    left: boolean;
+    right: boolean;
+};
+export declare function observeScroll(element: HTMLElement, callback: (state: ScrollState) => void): () => void;

package/dist-react/types/utils/scrollLock.d.ts

@@ -0,0 +1,6 @@
+export declare class ScrollLock {
+    #private;
+    lock(): void;
+    unlock(): void;
+}
+export declare const scrollLock: ScrollLock;

package/dist-react/types/utils/uiKitHtml.d.ts

@@ -0,0 +1,2 @@
+import { type HTMLTemplateResult } from 'lit';
+export declare function uiKitHtml(strings: TemplateStringsArray, ...values: unknown[]): HTMLTemplateResult;

package/dist-react/types/utils/version.d.ts

@@ -0,0 +1,2 @@
+export declare const VERSION: string;
+export declare const VERSION_TAG_SUFFIX: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cupra/ui-kit",
-  "version": "2.0.0-canary.22",
+  "version": "2.0.0-canary.220",
   "description": "Web components library",
   "author": "SEAT S.A.",
   "license": "SEAT S.A. Library EULA 1.0",
@@ -71,7 +71,8 @@
         "./dist-react/cjs/utils/*/*.cjs"
       ]
     },
-    "./react/types/*": "./dist-react/types/components/*/*.types.d.ts"
+    "./react/types/*": "./dist-react/types/components/*/*.types.d.ts",
+    "./styles/breakpoints.css": "./dist/styles/breakpoints.css"
   },
   "files": [
     "LICENSE",
@@ -85,53 +86,55 @@
   },
   "private": false,
   "dependencies": {
-    "@floating-ui/dom": "^1.7.4",
-    "@lit/context": "^1.1.4",
-    "lit": "^3.2.1"
+    "@floating-ui/dom": "^1.8.0",
+    "@lit/context": "^1.1.6",
+    "lit": "^3.3.3"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.6",
-    "@inquirer/prompts": "^7.4.0",
+    "@chromatic-com/storybook": "^5.3.1",
+    "@inquirer/prompts": "^7.10.1",
     "@open-wc/testing": "^4.0.0",
     "@playwright/test": "1.56.1",
-    "@storybook/addon-a11y": "^8.6.11",
-    "@storybook/addon-essentials": "^8.6.11",
-    "@storybook/addon-interactions": "^8.6.11",
-    "@storybook/addon-links": "^8.6.11",
-    "@storybook/addon-viewport": "^8.6.11",
-    "@storybook/blocks": "^8.6.11",
-    "@storybook/manager-api": "^8.6.14",
-    "@storybook/test": "^8.6.11",
-    "@storybook/theming": "^8.6.14",
-    "@storybook/web-components": "^8.6.11",
-    "@storybook/web-components-vite": "^8.6.11",
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/user-event": "^14.6.1",
-    "@types/react": "^18.3.20",
-    "ajv": "^8.17.1",
-    "autoprefixer": "^10.4.20",
+    "@storybook/addon-a11y": "^10.6.0",
+    "@storybook/addon-docs": "^10.6.0",
+    "@storybook/addon-links": "^10.6.0",
+    "@storybook/addon-vitest": "^10.6.0",
+    "@storybook/web-components": "^10.6.0",
+    "@storybook/web-components-vite": "^10.6.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/user-event": "^14.6.7",
+    "@types/react": "^18.3.31",
+    "@vitest/browser": "^4.1.11",
+    "@vitest/browser-playwright": "^4.1.11",
+    "ajv": "^8.20.0",
+    "autoprefixer": "^10.5.5",
     "camelcase": "^8.0.0",
-    "chromatic": "^11.27.0",
-    "cssnano": "^7.0.6",
-    "dotenv": "^16.4.7",
-    "jsdom": "^26.0.0",
-    "lodash": "^4.17.23",
-    "nodemon": "^3.1.10",
+    "chromatic": "^11.29.0",
+    "cssnano": "^7.1.9",
+    "dotenv": "^16.6.1",
+    "es-check": "^9.6.4",
+    "jsdom": "^26.1.0",
+    "lodash": "^4.18.1",
+    "lottie-web": "^5.13.0",
+    "nodemon": "^3.1.14",
     "playwright": "1.56.1",
-    "postcss": "^8.5.3",
+    "postcss": "^8.5.28",
     "postcss-cli": "^11.0.1",
     "postcss-custom-media": "^11.0.6",
-    "postcss-import": "^16.1.0",
+    "postcss-import": "^16.2.0",
     "postcss-pxtorem": "^6.1.0",
     "postcss-simple-vars": "^7.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "readline": "^1.3.0",
-    "shadow-dom-testing-library": "^1.12.0",
-    "storybook": "^8.6.15",
-    "ts-morph": "^26.0.0",
-    "tsc-alias": "^1.8.13",
-    "typescript": "^5.8.2",
-    "vite": "^6.4.1",
+    "shadow-dom-testing-library": "^1.14.1",
+    "storybook": "^10.6.0",
+    "style-dictionary": "^5.5.2",
+    "ts-morph": "^27.0.2",
+    "tsc-alias": "^1.9.4",
+    "typescript": "^5.9.3",
+    "vite": "^8.2.2",
     "vite-bundle-analyzer": "^0.22.3",
     "xml2js": "^0.6.2"
   },
@@ -141,9 +144,11 @@
     "clean-dist:react": "rm -rf ./dist-react",
     "build-ts": "tsc -p tsconfig.prod.json && tsc-alias -p tsconfig.prod.json",
     "build-ts:react": "tsc -p tsconfig.react.json && tsc-alias -p tsconfig.react.json",
-    "build-assets": "postcss src/styles/**/theme.css --dir public/assets/styles --base src/styles && node scripts/build-component-styles/build-component-styles.js",
-    "build": "pnpm build-assets && pnpm clean-dist && pnpm build-ts && BUILD_FORMAT=esm vite build --emptyOutDir false && BUILD_FORMAT=cjs vite build --emptyOutDir false",
+    "build-assets": "pnpm build:tokens && postcss src/styles/source/themes/**/theme.css --dir .tmp/styles --base src/styles/source/themes && node scripts/split-theme-tokens/split-theme-tokens.js && node scripts/build-component-styles/build-component-styles.js && node scripts/build-icons-zip/build-icons-zip.js",
+    "build-breakpoints": "mkdir -p dist/styles && cp src/styles/source/shared/breakpoints.css dist/styles/breakpoints.css",
+    "build": "pnpm build-assets && pnpm clean-dist && pnpm build-ts && BUILD_FORMAT=esm vite build --emptyOutDir false && BUILD_FORMAT=cjs vite build --emptyOutDir false && pnpm build-breakpoints",
     "build-cdn": "pnpm build-assets && pnpm clean-dist-cdn && vite build --config vite.cdn.config.js --mode production",
+    "check:browser-compat": "es-check es2020 dist-cdn/*.iife.js",
     "build:react": "pnpm build-assets && pnpm clean-dist:react && pnpm build-ts:react && BUILD_FORMAT=esm vite build --config vite.react.config.js --emptyOutDir false && BUILD_FORMAT=cjs vite build --config vite.react.config.js --emptyOutDir false",
     "build:react:dev": "pnpm build-assets && pnpm clean-dist:react && pnpm build-ts:react && BUILD_FORMAT=esm vite build --mode development --config vite.react.config.js --emptyOutDir false && BUILD_FORMAT=cjs vite build --mode development --config vite.react.config.js --emptyOutDir false",
     "analyze": "pnpm clean-dist && pnpm build-ts && ANALYZE=true  vite build --mode production",
@@ -153,16 +158,21 @@
     "dev:watch": "nodemon --exec \"pnpm build-cdn --mode development && pnpm build-assets && vite\"",
     "preview": "vite preview",
     "storybook": "pnpm build-cdn --mode development && pnpm build-assets && storybook dev -p 6006 --ci",
-    "storybook:watch": "nodemon --exec \"pnpm build-cdn --mode development && pnpm build-assets && storybook dev -p 6006 --ci -- --force\"",
-    "storybook:cupra-diagonal": "VITE_DS_CDN_URL=./assets pnpm build-cdn --mode development && pnpm build-assets && storybook dev --config-dir .storybook/themes/cupra-diagonal -p 6006 --ci -- --force",
-    "storybook:watch:cupra-diagonal": "nodemon --exec \"VITE_DS_CDN_URL=./assets pnpm build-cdn --mode development && pnpm build-assets && storybook dev --config-dir .storybook/themes/cupra-diagonal -p 6006 --ci -- --force\"",
+    "storybook:watch": "nodemon --exec \"pnpm build-cdn --mode development && pnpm build-assets && storybook dev -p 6006 --ci\"",
+    "storybook:cupra-diagonal": "VITE_DS_CDN_URL=./assets pnpm build-cdn --mode development && pnpm build-assets && storybook dev --config-dir .storybook/themes/cupra-diagonal -p 6006 --ci",
+    "storybook:watch:cupra-diagonal": "nodemon --exec \"VITE_DS_CDN_URL=./assets pnpm build-cdn --mode development && pnpm build-assets && storybook dev --config-dir .storybook/themes/cupra-diagonal -p 6006 --ci\"",
     "build-storybook:cupra-diagonal": "pnpm build-cdn && pnpm build-assets && storybook build --config-dir .storybook/themes/cupra-diagonal --output-dir dist-storybook/cupra-diagonal",
+    "storybook:seat": "VITE_DS_CDN_URL=./assets pnpm build-cdn --mode development && pnpm build-assets && storybook dev --config-dir .storybook/themes/seat -p 6007 --ci",
+    "storybook:watch:seat": "nodemon --exec \"VITE_DS_CDN_URL=./assets pnpm build-cdn --mode development && pnpm build-assets && storybook dev --config-dir .storybook/themes/seat -p 6007 --ci\"",
+    "build-storybook:seat": "pnpm build-cdn && pnpm build-assets && storybook build --config-dir .storybook/themes/seat --output-dir dist-storybook/seat",
+    "build:tokens": "node style-dictionary.config.js && biome format --write src/styles/generated-tokens-css/",
     "process-icons": "node scripts/process-icons/process-icons.js && git add .",
     "process-docs": "node scripts/process-docs/process-docs.js",
     "create-wc": "node scripts/create-wc/create-wc.js && git add .",
     "chromatic": "chromatic --exit-zero-on-changes",
-    "test": "vitest run",
-    "test:visual:github": "pnpm build-cdn --mode development && playwright test --config=visual-tests/playwright.config.ts",
+    "test": "vitest run --project unit",
+    "test:storybook": "vitest run --project storybook-cupra-diagonal --project storybook-seat",
+    "test:storybook:coverage": "vitest run --coverage --project storybook-cupra-diagonal --project storybook-seat",
     "test:visual:update": "docker build -f $(git rev-parse --show-toplevel)/Dockerfile.visual.update -t ds-visual-tests-update $(git rev-parse --show-toplevel) && docker run --rm -v $(git rev-parse --show-toplevel):/app ds-visual-tests-update && pnpm install --force",
     "test:visual:check": "docker build -f $(git rev-parse --show-toplevel)/Dockerfile.visual.check -t ds-visual-tests-check $(git rev-parse --show-toplevel) && docker run --rm -v $(git rev-parse --show-toplevel):/app ds-visual-tests-check && pnpm install --force",
     "validate:icons": "node scripts/validate-icons/validate-icons.js",