@cupra/ui-kit 1.0.0 → 1.1.0-canary.1

package/THIRD_PARTY_LICENSES.MD

@@ -75,5 +75,34 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
 -----------
 
+The following npm package may be included in this product:
+
+ - @floating-ui/dom@1.7.4
+
+This package contains the following license:
+
+MIT License
+
+Copyright (c) 2021-present Floating UI contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+-----------
+
 This file was generated with the generate-license-file npm package!
 https://www.npmjs.com/package/generate-license-file

package/dist/components/ds-drawer/ds-drawer.d.ts

@@ -0,0 +1,14 @@
+import { UiKitElement } from '../base/UiKitElement.ts';
+import { PropertyValues } from 'lit';
+import type { DsDrawerAttrs } from './ds-drawer.types.ts';
+export declare class DsDrawer extends UiKitElement {
+    static styles: import("lit").CSSResult[];
+    open: DsDrawerAttrs['open'];
+    private get classes();
+    private handleOverlayClick;
+    private handleKeyDown;
+    private getIconButtonTemplate;
+    updated(changed: PropertyValues): void;
+    disconnectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/ds-drawer/ds-drawer.js

@@ -0,0 +1,87 @@
+import { UiKitElement as d } from "../base/UiKitElement.js";
+import { customUiKitElement as p } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as m } from "../../utils/booleanConverter.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as v } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { property as h } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { classMap as l } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { commonStyles as u, iconStyles as f } from "./styles/common.styles.js";
+import { themeConfig as w } from "./theme-config.js";
+var y = Object.defineProperty, b = Object.getOwnPropertyDescriptor, c = (e, t, n, s) => {
+  for (var o = s > 1 ? void 0 : s ? b(t, n) : t, a = e.length - 1, i; a >= 0; a--)
+    (i = e[a]) && (o = (s ? i(t, n, o) : i(o)) || o);
+  return s && o && y(t, n, o), o;
+};
+let r = class extends d {
+  constructor() {
+    super(...arguments), this.open = !1, this.handleOverlayClick = () => {
+      this.dispatchEvent(
+        new Event("ds-drawer:close", {
+          bubbles: !0,
+          composed: !0
+        })
+      ), this.open = !1;
+    }, this.handleKeyDown = (e) => {
+      (e.key === "Escape" || e.key === "Esc") && this.open && this.handleOverlayClick();
+    };
+  }
+  get classes() {
+    return {
+      container: !0,
+      open: !!this.open
+    };
+  }
+  getIconButtonTemplate() {
+    var t;
+    const e = (t = w[this.theme]) == null ? void 0 : t["icon-button-variant"];
+    return this.componentFactory.createIconButton({
+      class: "close-button visible",
+      "data-testid": "close-button",
+      "data-aria-label": "close-button",
+      "@click": this.handleOverlayClick,
+      size: "medium",
+      "icon-name": "cross",
+      variant: e,
+      mode: "dark"
+    });
+  }
+  updated(e) {
+    var t;
+    (t = super.updated) == null || t.call(this, e), e.has && e.has("open") && window.addEventListener("keydown", this.handleKeyDown);
+  }
+  disconnectedCallback() {
+    window.removeEventListener("keydown", this.handleKeyDown), super.disconnectedCallback();
+  }
+  render() {
+    return v`          
+            <div class=${l({ overlay: !0, open: !!this.open })} @click=${this.handleOverlayClick}></div>
+            <div data-testid="ds-drawer-container" class=${l(this.classes)}>
+                <div class="scroll-area">
+                    <div class="drawer-header">
+                        <slot name="header"></slot>                        
+                        ${this.getIconButtonTemplate()}
+                    </div>
+
+                    <div class="drawer-content">
+                        <slot name="content"></slot>
+                    </div>
+                </div>
+
+                <div class="drawer-footer">
+                    <slot name="footer"></slot>
+                </div>
+            </div>
+        `;
+  }
+};
+r.styles = [u, f];
+c([
+  h({ type: Boolean, converter: m })
+], r.prototype, "open", 2);
+r = c([
+  p("ds-drawer")
+], r);
+export {
+  r as DsDrawer
+};

package/dist/components/ds-drawer/ds-drawer.test.d.ts

@@ -0,0 +1,7 @@
+import type { DsDrawer } from './ds-drawer';
+import './ds-drawer.ts';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ds-drawer': DsDrawer;
+    }
+}

package/dist/components/ds-drawer/ds-drawer.types.d.ts

@@ -0,0 +1,4 @@
+import { CommonAttrs } from '../../types/types';
+export interface DsDrawerAttrs extends CommonAttrs {
+    open: boolean;
+}

package/dist/components/ds-drawer/styles/common.styles.d.ts

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

package/dist/components/ds-drawer/styles/common.styles.js

@@ -0,0 +1,117 @@
+import { cssQueries as o } from "../../../utils/cssQueries.js";
+import { cssWithTokens as a } from "../../../utils/cssWithTokens.js";
+const e = a`
+    :host {
+        display: block;
+    }
+
+    .overlay {
+        position: fixed;
+        inset: 0;        
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 300ms ease;
+        z-index: 9998;
+        background: var(--dg-global-opacity-black-40);
+        backdrop-filter: var(--dg-elevation-blur-soft);
+    }
+
+    .overlay.open {
+        opacity: 1;
+        pointer-events: auto;
+    }
+
+    .container {
+        position: fixed;
+        z-index: 9999;        
+        transition: transform 320ms ease;
+        will-change: transform;
+        display: flex;
+        flex-direction: column;
+        overflow: auto;  
+        border-radius: 0;  
+        height: 100vh; 
+        width: 100%;
+        bottom: 0; 
+        right: 0;
+        transform: translateY(100%);
+
+        ${o.m} {
+            border-radius: var(--dg-border-radius-m) 0px 0px var(--dg-border-radius-m);           
+            top: 0;           
+            transform: translateX(100%);
+            width: 491px;         
+        }
+
+        ${o.l} {            
+            width: 579px;
+        }
+
+        ${o.xl} {             
+            width: 588px;
+        }
+
+        ${o.xxl} {             
+            width: 780px;
+        }
+    }     
+      
+    .container.open { 
+        transform: translateY(0);
+        ${o.m} {
+            transform: translateX(0);
+            box-shadow: 0 -8px 32px 0 var(--ds-opacity-black-60, rgba(9, 9, 11, 0.60));
+        }  
+    }    
+
+    .drawer-header,
+    .drawer-content,
+    .drawer-footer {
+        padding-left: var(--dg-layout-margin); 
+        padding-right: var(--dg-layout-margin);       
+    }  
+
+    .drawer-header {
+        padding-top: var(--dg-spacing-layout-s); 
+        padding-bottom: var(--dg-spacing-m-3);
+        ${o.m} {
+            padding-bottom: var(--dg-spacing-layout-m); 
+        }  
+    }
+    
+    .drawer-footer {
+        padding-top: var(--dg-spacing-layout-m);   
+        padding-bottom: var(--dg-spacing-layout-l);            
+    }
+
+    .drawer-footer ::slotted(*) {
+        display: flex;
+        flex-direction: column;
+        gap: var(--dg-spacing-m-2);
+        ${o.s} {
+            flex-direction: row;
+        }  
+    }
+
+    .drawer-content {       
+        flex: 0 0 auto;       
+    }
+   
+    .scroll-area {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;        
+    }    
+`, i = a`
+   .close-button {
+        position: absolute;
+        top: calc(var(--dg-spacing-layout-s) - 2px);
+        right: var(--dg-spacing-layout-xl);         
+    }
+`;
+export {
+  e as commonStyles,
+  i as iconStyles
+};

package/dist/components/ds-drawer/theme-config.d.ts

@@ -0,0 +1,8 @@
+type BrandConfig = {
+    'icon-button-variant': string;
+};
+export type ThemeConfig = {
+    [brand: string]: BrandConfig;
+};
+export declare const themeConfig: ThemeConfig;
+export {};

package/dist/components/ds-drawer/theme-config.js

@@ -0,0 +1,14 @@
+const t = {
+  cupra: {
+    "icon-button-variant": "primary"
+  },
+  "cupra-diagonal": {
+    "icon-button-variant": "tertiary"
+  },
+  seat: {
+    "icon-button-variant": "rounded"
+  }
+};
+export {
+  t as themeConfig
+};

package/dist/components/ds-radio-button/styles/common.styles.js

@@ -5,7 +5,6 @@ import { css as t } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.
 const n = t`
     :host {
         display: block;
-        flex: 0 0 auto;
     }
 
     :host:has(.disabled) {

package/dist/components/ds-theme-provider/ds-theme-provider.js

@@ -54,7 +54,7 @@ let m = class extends v {
   }
   loadThemeStyles() {
     return this.loadStyles ? new Promise((t, o) => {
-      const s = "/1.0.0", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
+      const s = "/1.1.0-canary.1", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
       if (document.head.querySelector(`link[href="${r}"]`)) t();
       else {
         const e = `ui-kit-theme-${s}`, a = document.getElementById(e), n = document.createElement("link");

package/dist/components/index.d.ts

@@ -11,6 +11,7 @@ import './ds-dialog-footer/ds-dialog-footer.ts';
 import './ds-dialog-header/ds-dialog-header.ts';
 import './ds-dialog/ds-dialog.ts';
 import './ds-divider/ds-divider.ts';
+import './ds-drawer/ds-drawer.ts';
 import './ds-hyperlink/ds-hyperlink.ts';
 import './ds-icon-button/ds-icon-button.ts';
 import './ds-icon/ds-icon.ts';

package/dist/index.js

@@ -11,6 +11,7 @@ import "./components/ds-dialog-footer/ds-dialog-footer.js";
 import "./components/ds-dialog-header/ds-dialog-header.js";
 import "./components/ds-dialog/ds-dialog.js";
 import "./components/ds-divider/ds-divider.js";
+import "./components/ds-drawer/ds-drawer.js";
 import "./components/ds-hyperlink/ds-hyperlink.js";
 import "./components/ds-icon-button/ds-icon-button.js";
 import "./components/ds-icon/ds-icon.js";
@@ -57,7 +58,7 @@ import "./components/ds-interactive-card/ds-interactive-card.js";
 import "./components/ds-radio-button-group/ds-radio-button-group.js";
 import "./components/ds-sidebar-navigation/ds-sidebar-navigation.js";
 import "./components/ds-badge/ds-badge.js";
-import { iconNames as ao } from "./components/ds-icon/iconNames.js";
+import { iconNames as co } from "./components/ds-icon/iconNames.js";
 export {
-  ao as iconNames
+  co as iconNames
 };

package/dist/utils/IconsManager.js

@@ -12,10 +12,10 @@ class f {
       !this.theme && s && (this.theme = s);
       const t = this.icons[e];
       if (t) return await t;
-      const n = this.loadIcon(e, i).catch((a) => {
+      const o = this.loadIcon(e, i).catch((a) => {
         throw delete this.icons[e], a;
       });
-      return this.icons[e] = n, n;
+      return this.icons[e] = o, o;
     }, this.loadIcon = (e, { cache: i = "force-cache", ...s }) => this.theme ? fetch(`https://ds-assets.cupra.com/icons/${this.theme}/${e}.svg`, {
       cache: i,
       ...s
@@ -25,15 +25,15 @@ class f {
     }) : Promise.resolve('<svg class="ds-icon"></svg>'), l.subscribe("theme", this.handleChangeTheme);
   }
 }
-const c = Symbol.for("@cupra/ui-kit/icons-manager/1.0.0"), h = globalThis;
-let o = h[c];
-o || (o = new f(), Object.defineProperty(h, c, {
-  value: o,
+const c = Symbol.for("@cupra/ui-kit/icons-manager/1.1.0-canary.1"), h = globalThis;
+let n = h[c];
+n || (n = new f(), Object.defineProperty(h, c, {
+  value: n,
   writable: !1,
   configurable: !1,
   enumerable: !1
 }));
-const b = o;
+const b = n;
 export {
   b as iconsManager
 };

package/dist/utils/PubSub.js

@@ -1,4 +1,4 @@
-class c {
+class e {
   constructor() {
     this.subscribers = {}, this.lastPublishedData = {};
   }
@@ -12,15 +12,15 @@ class c {
     this.lastPublishedData[s] = r, this.subscribers[s] && this.subscribers[s].forEach((i) => {
       try {
         i(r);
-      } catch (e) {
-        console.error(`Error in subscriber for event "${s}":`, e);
+      } catch (c) {
+        console.error(`Error in subscriber for event "${s}":`, c);
       }
     });
   }
 }
-const u = Symbol.for("@cupra/ui-kit/pubsub/1.0.0"), t = globalThis;
+const u = Symbol.for("@cupra/ui-kit/pubsub/1.1.0-canary.1"), t = globalThis;
 let b = t[u];
-b || (b = new c(), Object.defineProperty(t, u, {
+b || (b = new e(), Object.defineProperty(t, u, {
   value: b,
   writable: !1,
   configurable: !1,
@@ -28,6 +28,6 @@ b || (b = new c(), Object.defineProperty(t, u, {
 }));
 const a = b;
 export {
-  c as PubSub,
+  e as PubSub,
   a as pubSub
 };

package/dist/utils/StylesRegistry/StylesRegistry.js

@@ -5,7 +5,7 @@ class s {
       theme: t
     }) => {
       if (!t || !e) return;
-      const c = `https://ds-assets.cupra.com/1.0.0/styles/${t}/components/${e}.css`, r = this.getCachedStyleSheetPromise({ url: c });
+      const c = `https://ds-assets.cupra.com/1.1.0-canary.1/styles/${t}/components/${e}.css`, r = this.getCachedStyleSheetPromise({ url: c });
       if (r) return r;
       const i = this.fetchStyle({ url: c }).then((n) => (n || this.stylePromises.delete(c), n));
       return this.stylePromises.set(c, i), this.stylePromises.get(c);
@@ -26,7 +26,7 @@ class s {
     return s.instance || (s.instance = new s()), s.instance;
   }
 }
-const h = s.getInstance();
+const a = s.getInstance();
 export {
-  h as stylesRegistry
+  a as stylesRegistry
 };

package/dist/utils/cssWithTokens.js

@@ -1,10 +1,10 @@
 import "../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
 import "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
 import "../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
-import { unsafeCSS as o, css as n } from "../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+import { unsafeCSS as n, css as o } from "../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
 function x(t, ...r) {
-  const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0"), i = o(e);
-  return n`${i}`;
+  const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-1-0-canary-1"), i = n(e);
+  return o`${i}`;
 }
 export {
   x as cssWithTokens

package/dist/utils/htmlWithTokens.js

@@ -1,11 +1,11 @@
 import "../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import { html as i } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import { html as n } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
 import "../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
-import { unsafeHTML as n } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.js";
-function T(t, ...o) {
-  const r = String.raw({ raw: t }, ...o).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0"), e = n(r);
-  return i`${e}`;
+import { unsafeHTML as i } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.js";
+function x(t, ...r) {
+  const o = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-1-0-canary-1"), e = i(o);
+  return n`${e}`;
 }
 export {
-  T as htmlWithTokens
+  x as htmlWithTokens
 };

package/dist-react/components/ds-drawer/ds-drawer.d.ts

@@ -0,0 +1,14 @@
+import { UiKitElement } from '../base/UiKitElement.ts';
+import { PropertyValues } from 'lit';
+import type { DsDrawerAttrs } from './ds-drawer.types.ts';
+export declare class DsDrawer extends UiKitElement {
+    static styles: import("lit").CSSResult[];
+    open: DsDrawerAttrs['open'];
+    private get classes();
+    private handleOverlayClick;
+    private handleKeyDown;
+    private getIconButtonTemplate;
+    updated(changed: PropertyValues): void;
+    disconnectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist-react/components/ds-drawer/ds-drawer.js

@@ -0,0 +1,87 @@
+import { UiKitElement as d } from "../base/UiKitElement.js";
+import { customUiKitElement as p } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as m } from "../../utils/booleanConverter.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as v } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { property as h } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { classMap as l } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { commonStyles as u, iconStyles as f } from "./styles/common.styles.js";
+import { themeConfig as w } from "./theme-config.js";
+var y = Object.defineProperty, b = Object.getOwnPropertyDescriptor, c = (e, t, n, s) => {
+  for (var o = s > 1 ? void 0 : s ? b(t, n) : t, a = e.length - 1, i; a >= 0; a--)
+    (i = e[a]) && (o = (s ? i(t, n, o) : i(o)) || o);
+  return s && o && y(t, n, o), o;
+};
+let r = class extends d {
+  constructor() {
+    super(...arguments), this.open = !1, this.handleOverlayClick = () => {
+      this.dispatchEvent(
+        new Event("ds-drawer:close", {
+          bubbles: !0,
+          composed: !0
+        })
+      ), this.open = !1;
+    }, this.handleKeyDown = (e) => {
+      (e.key === "Escape" || e.key === "Esc") && this.open && this.handleOverlayClick();
+    };
+  }
+  get classes() {
+    return {
+      container: !0,
+      open: !!this.open
+    };
+  }
+  getIconButtonTemplate() {
+    var t;
+    const e = (t = w[this.theme]) == null ? void 0 : t["icon-button-variant"];
+    return this.componentFactory.createIconButton({
+      class: "close-button visible",
+      "data-testid": "close-button",
+      "data-aria-label": "close-button",
+      "@click": this.handleOverlayClick,
+      size: "medium",
+      "icon-name": "cross",
+      variant: e,
+      mode: "dark"
+    });
+  }
+  updated(e) {
+    var t;
+    (t = super.updated) == null || t.call(this, e), e.has && e.has("open") && window.addEventListener("keydown", this.handleKeyDown);
+  }
+  disconnectedCallback() {
+    window.removeEventListener("keydown", this.handleKeyDown), super.disconnectedCallback();
+  }
+  render() {
+    return v`          
+            <div class=${l({ overlay: !0, open: !!this.open })} @click=${this.handleOverlayClick}></div>
+            <div data-testid="ds-drawer-container" class=${l(this.classes)}>
+                <div class="scroll-area">
+                    <div class="drawer-header">
+                        <slot name="header"></slot>                        
+                        ${this.getIconButtonTemplate()}
+                    </div>
+
+                    <div class="drawer-content">
+                        <slot name="content"></slot>
+                    </div>
+                </div>
+
+                <div class="drawer-footer">
+                    <slot name="footer"></slot>
+                </div>
+            </div>
+        `;
+  }
+};
+r.styles = [u, f];
+c([
+  h({ type: Boolean, converter: m })
+], r.prototype, "open", 2);
+r = c([
+  p("ds-drawer")
+], r);
+export {
+  r as DsDrawer
+};

package/dist-react/components/ds-drawer/ds-drawer.test.d.ts

@@ -0,0 +1,7 @@
+import type { DsDrawer } from './ds-drawer';
+import './ds-drawer.ts';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ds-drawer': DsDrawer;
+    }
+}

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

@@ -0,0 +1,4 @@
+import { CommonAttrs } from '../../types/types';
+export interface DsDrawerAttrs extends CommonAttrs {
+    open: boolean;
+}

package/dist-react/components/ds-drawer/styles/common.styles.d.ts

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

package/dist-react/components/ds-drawer/styles/common.styles.js

@@ -0,0 +1,117 @@
+import { cssQueries as o } from "../../../utils/cssQueries.js";
+import { cssWithTokens as a } from "../../../utils/cssWithTokens.js";
+const e = a`
+    :host {
+        display: block;
+    }
+
+    .overlay {
+        position: fixed;
+        inset: 0;        
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 300ms ease;
+        z-index: 9998;
+        background: var(--dg-global-opacity-black-40);
+        backdrop-filter: var(--dg-elevation-blur-soft);
+    }
+
+    .overlay.open {
+        opacity: 1;
+        pointer-events: auto;
+    }
+
+    .container {
+        position: fixed;
+        z-index: 9999;        
+        transition: transform 320ms ease;
+        will-change: transform;
+        display: flex;
+        flex-direction: column;
+        overflow: auto;  
+        border-radius: 0;  
+        height: 100vh; 
+        width: 100%;
+        bottom: 0; 
+        right: 0;
+        transform: translateY(100%);
+
+        ${o.m} {
+            border-radius: var(--dg-border-radius-m) 0px 0px var(--dg-border-radius-m);           
+            top: 0;           
+            transform: translateX(100%);
+            width: 491px;         
+        }
+
+        ${o.l} {            
+            width: 579px;
+        }
+
+        ${o.xl} {             
+            width: 588px;
+        }
+
+        ${o.xxl} {             
+            width: 780px;
+        }
+    }     
+      
+    .container.open { 
+        transform: translateY(0);
+        ${o.m} {
+            transform: translateX(0);
+            box-shadow: 0 -8px 32px 0 var(--ds-opacity-black-60, rgba(9, 9, 11, 0.60));
+        }  
+    }    
+
+    .drawer-header,
+    .drawer-content,
+    .drawer-footer {
+        padding-left: var(--dg-layout-margin); 
+        padding-right: var(--dg-layout-margin);       
+    }  
+
+    .drawer-header {
+        padding-top: var(--dg-spacing-layout-s); 
+        padding-bottom: var(--dg-spacing-m-3);
+        ${o.m} {
+            padding-bottom: var(--dg-spacing-layout-m); 
+        }  
+    }
+    
+    .drawer-footer {
+        padding-top: var(--dg-spacing-layout-m);   
+        padding-bottom: var(--dg-spacing-layout-l);            
+    }
+
+    .drawer-footer ::slotted(*) {
+        display: flex;
+        flex-direction: column;
+        gap: var(--dg-spacing-m-2);
+        ${o.s} {
+            flex-direction: row;
+        }  
+    }
+
+    .drawer-content {       
+        flex: 0 0 auto;       
+    }
+   
+    .scroll-area {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;        
+    }    
+`, i = a`
+   .close-button {
+        position: absolute;
+        top: calc(var(--dg-spacing-layout-s) - 2px);
+        right: var(--dg-spacing-layout-xl);         
+    }
+`;
+export {
+  e as commonStyles,
+  i as iconStyles
+};

package/dist-react/components/ds-drawer/theme-config.d.ts

@@ -0,0 +1,8 @@
+type BrandConfig = {
+    'icon-button-variant': string;
+};
+export type ThemeConfig = {
+    [brand: string]: BrandConfig;
+};
+export declare const themeConfig: ThemeConfig;
+export {};

package/dist-react/components/ds-drawer/theme-config.js

@@ -0,0 +1,14 @@
+const t = {
+  cupra: {
+    "icon-button-variant": "primary"
+  },
+  "cupra-diagonal": {
+    "icon-button-variant": "tertiary"
+  },
+  seat: {
+    "icon-button-variant": "rounded"
+  }
+};
+export {
+  t as themeConfig
+};

package/dist-react/components/ds-radio-button/styles/common.styles.js

@@ -5,7 +5,6 @@ import { css as t } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.
 const n = t`
     :host {
         display: block;
-        flex: 0 0 auto;
     }
 
     :host:has(.disabled) {

package/dist-react/components/ds-theme-provider/ds-theme-provider.js

@@ -54,7 +54,7 @@ let m = class extends v {
   }
   loadThemeStyles() {
     return this.loadStyles ? new Promise((t, o) => {
-      const s = "/1.0.0", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
+      const s = "/1.1.0-canary.1", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
       if (document.head.querySelector(`link[href="${r}"]`)) t();
       else {
         const e = `ui-kit-theme-${s}`, a = document.getElementById(e), n = document.createElement("link");

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

@@ -11,6 +11,7 @@ import './ds-dialog-footer/ds-dialog-footer.ts';
 import './ds-dialog-header/ds-dialog-header.ts';
 import './ds-dialog/ds-dialog.ts';
 import './ds-divider/ds-divider.ts';
+import './ds-drawer/ds-drawer.ts';
 import './ds-hyperlink/ds-hyperlink.ts';
 import './ds-icon-button/ds-icon-button.ts';
 import './ds-icon/ds-icon.ts';

package/dist-react/index.js

@@ -11,6 +11,7 @@ import "./components/ds-dialog-footer/ds-dialog-footer.js";
 import "./components/ds-dialog-header/ds-dialog-header.js";
 import "./components/ds-dialog/ds-dialog.js";
 import "./components/ds-divider/ds-divider.js";
+import "./components/ds-drawer/ds-drawer.js";
 import "./components/ds-hyperlink/ds-hyperlink.js";
 import "./components/ds-icon-button/ds-icon-button.js";
 import "./components/ds-icon/ds-icon.js";
@@ -57,7 +58,7 @@ import "./components/ds-interactive-card/ds-interactive-card.js";
 import "./components/ds-radio-button-group/ds-radio-button-group.js";
 import "./components/ds-sidebar-navigation/ds-sidebar-navigation.js";
 import "./components/ds-badge/ds-badge.js";
-import { iconNames as ao } from "./components/ds-icon/iconNames.js";
+import { iconNames as co } from "./components/ds-icon/iconNames.js";
 export {
-  ao as iconNames
+  co as iconNames
 };

package/dist-react/utils/IconsManager.js

@@ -12,10 +12,10 @@ class f {
       !this.theme && s && (this.theme = s);
       const t = this.icons[e];
       if (t) return await t;
-      const n = this.loadIcon(e, i).catch((a) => {
+      const o = this.loadIcon(e, i).catch((a) => {
         throw delete this.icons[e], a;
       });
-      return this.icons[e] = n, n;
+      return this.icons[e] = o, o;
     }, this.loadIcon = (e, { cache: i = "force-cache", ...s }) => this.theme ? fetch(`https://ds-assets.cupra.com/icons/${this.theme}/${e}.svg`, {
       cache: i,
       ...s
@@ -25,15 +25,15 @@ class f {
     }) : Promise.resolve('<svg class="ds-icon"></svg>'), l.subscribe("theme", this.handleChangeTheme);
   }
 }
-const c = Symbol.for("@cupra/ui-kit/icons-manager/1.0.0"), h = globalThis;
-let o = h[c];
-o || (o = new f(), Object.defineProperty(h, c, {
-  value: o,
+const c = Symbol.for("@cupra/ui-kit/icons-manager/1.1.0-canary.1"), h = globalThis;
+let n = h[c];
+n || (n = new f(), Object.defineProperty(h, c, {
+  value: n,
   writable: !1,
   configurable: !1,
   enumerable: !1
 }));
-const b = o;
+const b = n;
 export {
   b as iconsManager
 };

package/dist-react/utils/PubSub.js

@@ -1,4 +1,4 @@
-class c {
+class e {
   constructor() {
     this.subscribers = {}, this.lastPublishedData = {};
   }
@@ -12,15 +12,15 @@ class c {
     this.lastPublishedData[s] = r, this.subscribers[s] && this.subscribers[s].forEach((i) => {
       try {
         i(r);
-      } catch (e) {
-        console.error(`Error in subscriber for event "${s}":`, e);
+      } catch (c) {
+        console.error(`Error in subscriber for event "${s}":`, c);
       }
     });
   }
 }
-const u = Symbol.for("@cupra/ui-kit/pubsub/1.0.0"), t = globalThis;
+const u = Symbol.for("@cupra/ui-kit/pubsub/1.1.0-canary.1"), t = globalThis;
 let b = t[u];
-b || (b = new c(), Object.defineProperty(t, u, {
+b || (b = new e(), Object.defineProperty(t, u, {
   value: b,
   writable: !1,
   configurable: !1,
@@ -28,6 +28,6 @@ b || (b = new c(), Object.defineProperty(t, u, {
 }));
 const a = b;
 export {
-  c as PubSub,
+  e as PubSub,
   a as pubSub
 };

package/dist-react/utils/StylesRegistry/StylesRegistry.js

@@ -5,7 +5,7 @@ class s {
       theme: t
     }) => {
       if (!t || !e) return;
-      const c = `https://ds-assets.cupra.com/1.0.0/styles/${t}/components/${e}.css`, r = this.getCachedStyleSheetPromise({ url: c });
+      const c = `https://ds-assets.cupra.com/1.1.0-canary.1/styles/${t}/components/${e}.css`, r = this.getCachedStyleSheetPromise({ url: c });
       if (r) return r;
       const i = this.fetchStyle({ url: c }).then((n) => (n || this.stylePromises.delete(c), n));
       return this.stylePromises.set(c, i), this.stylePromises.get(c);
@@ -26,7 +26,7 @@ class s {
     return s.instance || (s.instance = new s()), s.instance;
   }
 }
-const h = s.getInstance();
+const a = s.getInstance();
 export {
-  h as stylesRegistry
+  a as stylesRegistry
 };

package/dist-react/utils/cssWithTokens.js

@@ -1,10 +1,10 @@
 import "../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
 import "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
 import "../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
-import { unsafeCSS as o, css as n } from "../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+import { unsafeCSS as n, css as o } from "../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
 function x(t, ...r) {
-  const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0"), i = o(e);
-  return n`${i}`;
+  const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-1-0-canary-1"), i = n(e);
+  return o`${i}`;
 }
 export {
   x as cssWithTokens

package/dist-react/utils/htmlWithTokens.js

@@ -1,11 +1,11 @@
 import "../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import { html as i } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import { html as n } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
 import "../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
-import { unsafeHTML as n } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.js";
-function T(t, ...o) {
-  const r = String.raw({ raw: t }, ...o).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0"), e = n(r);
-  return i`${e}`;
+import { unsafeHTML as i } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.js";
+function x(t, ...r) {
+  const o = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-1-0-canary-1"), e = i(o);
+  return n`${e}`;
 }
 export {
-  T as htmlWithTokens
+  x as htmlWithTokens
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cupra/ui-kit",
-  "version": "1.0.0",
+  "version": "1.1.0-canary.1",
   "description": "Web components library",
   "author": "SEAT S.A.",
   "license": "SEAT S.A. Library EULA 1.0",
@@ -95,7 +95,7 @@
     "postcss-simple-vars": "^7.0.1",
     "readline": "^1.3.0",
     "shadow-dom-testing-library": "^1.12.0",
-    "storybook": "^8.6.11",
+    "storybook": "^8.6.15",
     "ts-morph": "^26.0.0",
     "tsc-alias": "^1.8.13",
     "typescript": "^5.8.2",