@cupra/ui-kit 2.0.0-canary.237 → 2.0.0-canary.239

package/dist-react/cjs/components/ds-slider/styles/common.styles.cjs

@@ -1,4 +1,8 @@
 const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.cjs");require("../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");var t=e.css`
+    :host(:dir(rtl)) {
+        --ui-kit-private-dir: -1;
+    }
+
     :host {
         display: block;
     }

package/dist-react/cjs/components/ds-slider/styles/cupra-diagonal.styles.cjs

@@ -53,7 +53,7 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
         height: 1.5rem;
         top: 50%;
         margin-top: -0.75rem;
-        transform: translateX(-50%);
+        transform: translateX(calc(-50% * var(--ui-kit-private-dir, 1)));
     }
     :host([data-ui-kit-theme='cupra-diagonal']) .large .thumb {
         width: 2rem;

package/dist-react/cjs/components/ds-slider/styles/seat.styles.cjs

@@ -53,7 +53,7 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
         height: 1.5rem;
         top: 50%;
         margin-top: -0.75rem;
-        transform: translateX(-50%);
+        transform: translateX(calc(-50% * var(--ui-kit-private-dir, 1)));
     }
     :host([data-ui-kit-theme='seat']) .large .thumb {
         width: 2rem;

package/dist-react/cjs/components/ds-static-box/styles/cupra-diagonal.styles.cjs

@@ -38,18 +38,18 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
 
     :host([data-ui-kit-theme='cupra-diagonal']) .container.small .header,
     :host([data-ui-kit-theme='cupra-diagonal']) .container.small .main {
-        padding-left: var(--ds-spacing-m-2);
-        padding-right: var(--ds-spacing-m-2);
+        padding-inline-start: var(--ds-spacing-m-2);
+        padding-inline-end: var(--ds-spacing-m-2);
     }
     :host([data-ui-kit-theme='cupra-diagonal']) .container.medium .header,
     :host([data-ui-kit-theme='cupra-diagonal']) .container.medium .main {
-        padding-left: var(--ds-spacing-m-3);
-        padding-right: var(--ds-spacing-m-3);
+        padding-inline-start: var(--ds-spacing-m-3);
+        padding-inline-end: var(--ds-spacing-m-3);
     }
     :host([data-ui-kit-theme='cupra-diagonal']) .container.large .header,
     :host([data-ui-kit-theme='cupra-diagonal']) .container.large .main {
-        padding-left: var(--ds-spacing-m-4);
-        padding-right: var(--ds-spacing-m-4);
+        padding-inline-start: var(--ds-spacing-m-4);
+        padding-inline-end: var(--ds-spacing-m-4);
     }
 
     :host([data-ui-kit-theme='cupra-diagonal']) .container.small ::slotted([slot='main']) {
@@ -82,8 +82,8 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
     :host([data-ui-kit-theme='cupra-diagonal']) .container .main-wrapper::after {
         content: '';
         position: absolute;
-        left: 0;
-        right: 0;
+        inset-inline-start: 0;
+        inset-inline-end: 0;
         height: 2rem;
         pointer-events: none;
         opacity: 0;

package/dist-react/cjs/components/ds-static-box/styles/seat.styles.cjs

@@ -38,18 +38,18 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
 
     :host([data-ui-kit-theme='seat']) .container.small .header,
     :host([data-ui-kit-theme='seat']) .container.small .main {
-        padding-left: var(--ds-spacing-m-2);
-        padding-right: var(--ds-spacing-m-2);
+        padding-inline-start: var(--ds-spacing-m-2);
+        padding-inline-end: var(--ds-spacing-m-2);
     }
     :host([data-ui-kit-theme='seat']) .container.medium .header,
     :host([data-ui-kit-theme='seat']) .container.medium .main {
-        padding-left: var(--ds-spacing-m-3);
-        padding-right: var(--ds-spacing-m-3);
+        padding-inline-start: var(--ds-spacing-m-3);
+        padding-inline-end: var(--ds-spacing-m-3);
     }
     :host([data-ui-kit-theme='seat']) .container.large .header,
     :host([data-ui-kit-theme='seat']) .container.large .main {
-        padding-left: var(--ds-spacing-m-4);
-        padding-right: var(--ds-spacing-m-4);
+        padding-inline-start: var(--ds-spacing-m-4);
+        padding-inline-end: var(--ds-spacing-m-4);
     }
 
     :host([data-ui-kit-theme='seat']) .container.small ::slotted([slot='main']) {
@@ -82,8 +82,8 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
     :host([data-ui-kit-theme='seat']) .container .main-wrapper::after {
         content: '';
         position: absolute;
-        left: 0;
-        right: 0;
+        inset-inline-start: 0;
+        inset-inline-end: 0;
         height: 2rem;
         pointer-events: none;
         opacity: 0;

package/dist-react/cjs/components/ds-stepper/ds-stepper.cjs

@@ -8,7 +8,7 @@ const e=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/l
                 data-testid="ds-stepper-steps-row"
                 class="steps-row"
                 role="list"
-                aria-label="Steps"
+                aria-label=${this.dataAriaLabel||`Steps`}
             >
                 ${Array.from({length:this.steps},(t,n)=>{let r=n<=this.clampedCurrentStep,i=n===this.clampedCurrentStep;return e.html`<span class=${a.classMap({step:!0,active:r,current:i})} role="listitem" aria-posinset=${n+1} aria-setsize=${this.steps} aria-current=${i?`step`:`false`}></span>`})}
             </div>
@@ -20,4 +20,4 @@ const e=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/l
                 ${this.headerTemplate}
                 ${this.stepsRowTemplate}
             </div>
-        `:e.nothing}},c=(s.styles=[o.commonStyles],s);r.default([n.property({type:Number,attribute:`steps`,reflect:!0})],c.prototype,`steps`,void 0),r.default([n.property({type:Number,attribute:`current-step`,reflect:!0})],c.prototype,`currentStep`,void 0),r.default([n.property({type:String,attribute:`section-name`,reflect:!0})],c.prototype,`sectionName`,void 0),c=r.default([i.customUiKitElement(`ds-stepper`)],c),Object.defineProperty(exports,"DsStepper",{enumerable:!0,get:function(){return c}});
+        `:e.nothing}},c=(s.styles=[o.commonStyles],s);r.default([n.property({type:String,attribute:`data-aria-label`})],c.prototype,`dataAriaLabel`,void 0),r.default([n.property({type:Number,attribute:`steps`,reflect:!0})],c.prototype,`steps`,void 0),r.default([n.property({type:Number,attribute:`current-step`,reflect:!0})],c.prototype,`currentStep`,void 0),r.default([n.property({type:String,attribute:`section-name`,reflect:!0})],c.prototype,`sectionName`,void 0),c=r.default([i.customUiKitElement(`ds-stepper`)],c),Object.defineProperty(exports,"DsStepper",{enumerable:!0,get:function(){return c}});

package/dist-react/cjs/components/ds-table-cell/styles/common.styles.cjs

@@ -19,12 +19,12 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
         letter-spacing: var(--ds-typography-letter-spacing-base);
         color: var(--ds-color-text-default);
         border-top: 1px solid var(--ds-color-border-default-subtle);
-        border-left: 1px solid var(--ds-color-border-default-subtle);
+        border-inline-start: 1px solid var(--ds-color-border-default-subtle);
         box-sizing: border-box;
     }
 
     :host(:first-child) .cell {
-        border-left: none;
+        border-inline-start: none;
     }
 
     :host([variant='header']) .cell {

package/dist-react/cjs/components/ds-tabs/ds-tabs.cjs

@@ -1,14 +1,15 @@
-const e=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");const t=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.cjs"),n=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.cjs"),r=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/query.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.cjs");const i=require("../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.cjs"),a=require("../base/UiKitElement.cjs"),o=require("../../decorators/customUiKitElement.cjs"),s=require("../../utils/booleanConverter.cjs"),c=require("../../utils/uiKitHtml.cjs"),l=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/class-map.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/class-map.cjs");const u=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/if-defined.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/if-defined.cjs"),require("../ds-icon-button/ds-icon-button.cjs");const d=require("./styles/common.styles.cjs"),f=require("./styles/cupra-diagonal.styles.cjs"),p=require("./styles/cupra.styles.cjs"),m=require("./styles/seat-legacy.styles.cjs"),h=require("./styles/seat.styles.cjs"),g=require("./theme-config.cjs");var _=class extends a.UiKitElement{constructor(...e){super(...e),this._selectedTab=void 0,this._selectedTabState=0,this.mode=`light`,this.variant=`primary`,this.size=`large`,this.disabled=!1,this.focusedTabIndex=-1,this.handleKeyDown=e=>{if(!(this.focusedTabIndex<0))switch(e.key){case`ArrowRight`:case`Right`:var t;if(e.preventDefault(),this.focusedTabIndex+1<((t=this.tabs)==null?void 0:t.length)){var n;this.focusedTabIndex+=1,(n=this.tabs[this.focusedTabIndex])==null||n.focus()}break;case`ArrowLeft`:case`Left`:if(e.preventDefault(),this.focusedTabIndex-1>=0){var r;--this.focusedTabIndex,(r=this.tabs[this.focusedTabIndex])==null||r.focus()}break;case`Enter`:case` `:var i;e.preventDefault(),this.focusedTabIndex>=0&&this.focusedTabIndex<((i=this.tabs)==null?void 0:i.length)&&this.handleChangeSelectedTab(this.focusedTabIndex)}},this.hasScrollLeft=!1,this.hasScrollRight=!1,this.resizeObserver=new ResizeObserver(()=>{this.handleScrollNav()}),this.handleScrollNav=()=>{var e,t,n,r;let i=((e=this.nav)==null?void 0:e.scrollLeft)+((t=this.nav)==null?void 0:t.clientWidth);this.hasScrollLeft=((n=this.nav)==null?void 0:n.scrollLeft)>0,this.hasScrollRight=i<((r=this.nav)==null?void 0:r.scrollWidth)},this.handleScrollLeft=()=>{this.nav.scrollBy({left:-150,behavior:`smooth`})},this.handleScrollRight=()=>{this.nav.scrollBy({left:150,behavior:`smooth`})},this.handleFocus=e=>{var t;let n=e.target,r=((t=this.tabs)==null?void 0:t.findIndex(e=>e===n))??-1;if(r<0||this.disabled){e.preventDefault();return}this.focusedTabIndex=r},this.handleBlur=()=>{this.focusedTabIndex=-1}}get selectedTab(){return this._selectedTab??this._selectedTabState}set selectedTab(e){this._selectedTab=e}connectedCallback(){super.connectedCallback(),this.tabs=Array.from(this.querySelectorAll(`[slot=tab]`)),this.panels=Array.from(this.querySelectorAll(`[slot=panel]`))}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver.disconnect(),window.removeEventListener(`resize`,this.handleScrollNav)}getScrollButtonTemplate(t,n){var r;if(!this.theme||t===`left`&&!this.hasScrollLeft||t===`right`&&!this.hasScrollRight)return e.nothing;let i=`arrow-${t}`,a=(r=g.themeConfig[this.theme])==null?void 0:r[`icon-button-variant`];return c.uiKitHtml`<ds-icon-button
-            class=${`nav-arrow ${t}`}
-            data-aria-label=${`nav-arrow-${t}`}
+const e=require("../../utils/PubSub.cjs"),t=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");const n=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.cjs"),r=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.cjs"),i=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/query.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.cjs");const a=require("../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.cjs"),o=require("../base/UiKitElement.cjs"),s=require("../../decorators/customUiKitElement.cjs"),c=require("../../utils/booleanConverter.cjs"),l=require("../../utils/getDirection/getDirection.cjs"),u=require("../../utils/uiKitHtml.cjs"),d=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/class-map.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/class-map.cjs");const f=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/if-defined.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/if-defined.cjs"),require("../ds-icon-button/ds-icon-button.cjs");const p=require("./styles/common.styles.cjs"),m=require("./styles/cupra-diagonal.styles.cjs"),h=require("./styles/cupra.styles.cjs"),g=require("./styles/seat-legacy.styles.cjs"),_=require("./styles/seat.styles.cjs"),v=require("./theme-config.cjs");var y=class extends o.UiKitElement{constructor(...e){super(...e),this._selectedTab=void 0,this._selectedTabState=0,this.mode=`light`,this.variant=`primary`,this.size=`large`,this.disabled=!1,this.focusedTabIndex=-1,this.handleKeyDown=e=>{if(!(this.focusedTabIndex<0))switch(e.key){case`ArrowRight`:case`Right`:e.preventDefault(),this.moveFocus(l.getDirectionSign(this));break;case`ArrowLeft`:case`Left`:e.preventDefault(),this.moveFocus(-l.getDirectionSign(this));break;case`Enter`:case` `:var t;e.preventDefault(),this.focusedTabIndex>=0&&this.focusedTabIndex<((t=this.tabs)==null?void 0:t.length)&&this.handleChangeSelectedTab(this.focusedTabIndex)}},this.hasScrollLeft=!1,this.hasScrollRight=!1,this.resizeObserver=new ResizeObserver(()=>{this.handleScrollNav()}),this.handleScrollNav=()=>{var e,t,n;let r=Math.abs((e=this.nav)==null?void 0:e.scrollLeft),i=r+((t=this.nav)==null?void 0:t.clientWidth);this.hasScrollLeft=r>0,this.hasScrollRight=i<((n=this.nav)==null?void 0:n.scrollWidth)},this.handleScrollLeft=()=>{this.nav.scrollBy({left:-150*l.getDirectionSign(this),behavior:`smooth`})},this.handleScrollRight=()=>{this.nav.scrollBy({left:150*l.getDirectionSign(this),behavior:`smooth`})},this.handleFocus=e=>{var t;let n=e.target,r=((t=this.tabs)==null?void 0:t.findIndex(e=>e===n))??-1;if(r<0||this.disabled){e.preventDefault();return}this.focusedTabIndex=r},this.handleBlur=()=>{this.focusedTabIndex=-1}}get selectedTab(){return this._selectedTab??this._selectedTabState}set selectedTab(e){this._selectedTab=e}moveFocus(e){var t,n;let r=this.focusedTabIndex+e;r<0||r>=((t=this.tabs)==null?void 0:t.length)||(this.focusedTabIndex=r,(n=this.tabs[r])==null||n.focus())}connectedCallback(){super.connectedCallback(),this.tabs=Array.from(this.querySelectorAll(`[slot=tab]`)),this.panels=Array.from(this.querySelectorAll(`[slot=panel]`))}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver.disconnect(),window.removeEventListener(`resize`,this.handleScrollNav),e.pubSub.unsubscribe(`direction`,this.handleScrollNav)}getScrollButtonTemplate(e,n){var r;if(!this.theme||e===`left`&&!this.hasScrollLeft||e===`right`&&!this.hasScrollRight)return t.nothing;let i=`arrow-${e}`,a=(r=v.themeConfig[this.theme])==null?void 0:r[`icon-button-variant`];return u.uiKitHtml`<ds-icon-button
+            class=${`nav-arrow ${e}`}
+            data-aria-label=${this.dataAriaLabelNavArrow||`nav-arrow-${e}`}
             @click=${n}
             size=${this.size===`medium`?`medium`:`large`}
             icon-name=${i}
-            mode=${u.ifDefined(this.mode)}
-            variant=${u.ifDefined(a)}
-        ></ds-icon-button>`}firstUpdated(){this.handleScrollNav(),this.resizeObserver.observe(this.nav),this.tabs.forEach(e=>this.resizeObserver.observe(e)),window.addEventListener(`resize`,this.handleScrollNav),this.nav.addEventListener(`scroll`,this.handleScrollNav),this.setTabsFocusable()}updated(e){if(super.updated(e),(e.has(`_selectedTab`)||e.has(`_selectedTabState`))&&this.selectTab(this.selectedTab),e.has(`variant`)){let e=this.variant===`secondary`||this.variant===`primary`?this.variant:`primary`;this.variant!==e&&(this.variant=e)}this.setupTabAccessibility()}handleTabsSlotchange(e){this.tabs=e.target.assignedNodes({flatten:!0}),this.setTabsFocusable()}handlePanelSlotchange(e){this.panels=e.target.assignedNodes({flatten:!0}),this.setTabsFocusable()}setTabsFocusable(){var e;(e=this.tabs)==null||e.forEach(e=>{e.setAttribute(`tabindex`,`0`)})}selectTab(e){var t,n,r,i,a;(t=this.tabs)==null||t.forEach((t,n)=>{t.removeAttribute(`selected`),t.setAttribute(`aria-selected`,n===e?`true`:`false`)}),(n=this.tabs[e])==null||n.setAttribute(`selected`,``),this.panels.forEach(e=>e.removeAttribute(`selected`)),(r=this.panels[e])==null||r.setAttribute(`selected`,``);let o=(i=this.tabs)==null?void 0:i[this.selectedTab];this.nav.scrollLeft=(o==null?void 0:o.offsetLeft)-((a=this.nav)==null?void 0:a.offsetWidth)/2}setupTabAccessibility(){var e;(e=this.tabs)==null||e.forEach((e,t)=>{e.setAttribute(`role`,`tab`),e.setAttribute(`tabindex`,t===this.selectedTab&&!this.disabled?`0`:`-1`),e.addEventListener(`focus`,this.handleFocus),e.addEventListener(`blur`,this.handleBlur)})}handleChangeSelectedTab(e){this.dispatchEvent(new CustomEvent(`change`,{bubbles:!0,composed:!0,detail:{selectedTab:e}})),this._selectedTabState=e,this._selectedTab=void 0}handleSelect(e){let t;this.tabs.forEach((n,r)=>{(n===e.target||n.contains(e.target))&&(t=r)}),typeof t==`number`&&t!==this.selectedTab&&this.handleChangeSelectedTab(t)}get classes(){return{container:!0,[this.size]:!0,[this.mode]:!0,[this.variant]:!0,disabled:this.disabled}}get navContainerClasses(){return{"nav-container":!0,"ds-blur":!0,"scroll-left":this.hasScrollLeft,"scroll-right":this.hasScrollRight}}render(){return e.html`
-            <div part="container" class=${l.classMap(this.classes)}>
-                <div class=${l.classMap(this.navContainerClasses)}>
+            mirror
+            mode=${f.ifDefined(this.mode)}
+            variant=${f.ifDefined(a)}
+        ></ds-icon-button>`}firstUpdated(){this.handleScrollNav(),this.resizeObserver.observe(this.nav),this.tabs.forEach(e=>this.resizeObserver.observe(e)),window.addEventListener(`resize`,this.handleScrollNav),this.nav.addEventListener(`scroll`,this.handleScrollNav),e.pubSub.subscribe(`direction`,this.handleScrollNav),this.setTabsFocusable()}updated(e){if(super.updated(e),(e.has(`_selectedTab`)||e.has(`_selectedTabState`))&&this.selectTab(this.selectedTab),e.has(`variant`)){let e=this.variant===`secondary`||this.variant===`primary`?this.variant:`primary`;this.variant!==e&&(this.variant=e)}this.setupTabAccessibility()}handleTabsSlotchange(e){this.tabs=e.target.assignedNodes({flatten:!0}),this.setTabsFocusable()}handlePanelSlotchange(e){this.panels=e.target.assignedNodes({flatten:!0}),this.setTabsFocusable()}setTabsFocusable(){var e;(e=this.tabs)==null||e.forEach(e=>{e.setAttribute(`tabindex`,`0`)})}selectTab(e){var t,n,r,i;(t=this.tabs)==null||t.forEach((t,n)=>{t.removeAttribute(`selected`),t.setAttribute(`aria-selected`,n===e?`true`:`false`)}),(n=this.tabs[e])==null||n.setAttribute(`selected`,``),this.panels.forEach(e=>e.removeAttribute(`selected`)),(r=this.panels[e])==null||r.setAttribute(`selected`,``);let a=(i=this.tabs)==null?void 0:i[this.selectedTab];this.nav.scrollLeft=this.getCenteredScrollLeft(a)}getCenteredScrollLeft(e){var t;let n=(e==null?void 0:e.offsetLeft)-((t=this.nav)==null?void 0:t.offsetWidth)/2;return l.getDirectionSign(this)===1?n:n-(this.nav.scrollWidth-this.nav.clientWidth)}setupTabAccessibility(){var e;(e=this.tabs)==null||e.forEach((e,t)=>{e.setAttribute(`role`,`tab`),e.setAttribute(`tabindex`,t===this.selectedTab&&!this.disabled?`0`:`-1`),e.addEventListener(`focus`,this.handleFocus),e.addEventListener(`blur`,this.handleBlur)})}handleChangeSelectedTab(e){this.dispatchEvent(new CustomEvent(`change`,{bubbles:!0,composed:!0,detail:{selectedTab:e}})),this._selectedTabState=e,this._selectedTab=void 0}handleSelect(e){let t;this.tabs.forEach((n,r)=>{(n===e.target||n.contains(e.target))&&(t=r)}),typeof t==`number`&&t!==this.selectedTab&&this.handleChangeSelectedTab(t)}get classes(){return{container:!0,[this.size]:!0,[this.mode]:!0,[this.variant]:!0,disabled:this.disabled}}get navContainerClasses(){return{"nav-container":!0,"ds-blur":!0,"scroll-left":this.hasScrollLeft,"scroll-right":this.hasScrollRight}}render(){return t.html`
+            <div part="container" class=${d.classMap(this.classes)}>
+                <div class=${d.classMap(this.navContainerClasses)}>
                     ${this.getScrollButtonTemplate(`left`,this.handleScrollLeft)}
                     <nav tabindex="0" role="tablist" @scroll=${this.handleScrollNav} @keydown=${this.handleKeyDown}>
                         <slot @slotchange=${this.handleTabsSlotchange} name="tab" @click=${this.handleSelect}></slot>
@@ -18,4 +19,4 @@ const e=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/l
                 </div>
                 <slot @slotchange=${this.handlePanelSlotchange} name="panel"></slot>
             </div>
-        `}},v=(_.styles=[d.commonStyles,d.navigationStyles,d.tabsStyles,d.panelsStyles,f.cupraDiagonalStyles,h.seatStyles,p.cupraStyles,m.seatLegacyStyles],_);i.default([t.property({type:Number,attribute:`selected-tab`,reflect:!0})],v.prototype,`_selectedTab`,void 0),i.default([n.state()],v.prototype,`_selectedTabState`,void 0),i.default([t.property({type:String,reflect:!0})],v.prototype,`mode`,void 0),i.default([t.property({type:String,reflect:!0})],v.prototype,`variant`,void 0),i.default([t.property({type:String})],v.prototype,`size`,void 0),i.default([t.property({type:Boolean,converter:s.booleanConverter})],v.prototype,`disabled`,void 0),i.default([n.state()],v.prototype,`focusedTabIndex`,void 0),i.default([r.query(`nav`)],v.prototype,`nav`,void 0),i.default([n.state()],v.prototype,`tabs`,void 0),i.default([n.state()],v.prototype,`panels`,void 0),i.default([n.state()],v.prototype,`hasScrollLeft`,void 0),i.default([n.state()],v.prototype,`hasScrollRight`,void 0),v=i.default([o.customUiKitElement(`ds-tabs`)],v),Object.defineProperty(exports,"DsTabs",{enumerable:!0,get:function(){return v}});
+        `}},b=(y.styles=[p.commonStyles,p.navigationStyles,p.tabsStyles,p.panelsStyles,m.cupraDiagonalStyles,_.seatStyles,h.cupraStyles,g.seatLegacyStyles],y);a.default([n.property({type:String,attribute:`data-aria-label-nav-arrow`})],b.prototype,`dataAriaLabelNavArrow`,void 0),a.default([n.property({type:Number,attribute:`selected-tab`,reflect:!0})],b.prototype,`_selectedTab`,void 0),a.default([r.state()],b.prototype,`_selectedTabState`,void 0),a.default([n.property({type:String,reflect:!0})],b.prototype,`mode`,void 0),a.default([n.property({type:String,reflect:!0})],b.prototype,`variant`,void 0),a.default([n.property({type:String})],b.prototype,`size`,void 0),a.default([n.property({type:Boolean,converter:c.booleanConverter})],b.prototype,`disabled`,void 0),a.default([r.state()],b.prototype,`focusedTabIndex`,void 0),a.default([i.query(`nav`)],b.prototype,`nav`,void 0),a.default([r.state()],b.prototype,`tabs`,void 0),a.default([r.state()],b.prototype,`panels`,void 0),a.default([r.state()],b.prototype,`hasScrollLeft`,void 0),a.default([r.state()],b.prototype,`hasScrollRight`,void 0),b=a.default([s.customUiKitElement(`ds-tabs`)],b),Object.defineProperty(exports,"DsTabs",{enumerable:!0,get:function(){return b}});

package/dist-react/cjs/components/ds-tabs/styles/common.styles.cjs

@@ -31,7 +31,7 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
         content: '';
         position: absolute;
         top: 0;
-        left: 0;
+        inset-inline-start: 0;
         bottom: 0;
         width: 32px;
         background: linear-gradient(to right, var(--ds-color-surface-contrast-subtle) 0%, transparent 100%);
@@ -41,12 +41,20 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
         content: '';
         position: absolute;
         top: 0;
-        right: 0;
+        inset-inline-end: 0;
         bottom: 0;
         width: 32px;
         background: linear-gradient(to left, var(--ds-color-surface-contrast-subtle) 0%, transparent 100%);
     }
 
+    :host(:dir(rtl)) .nav-container.scroll-left .scroll-fade::before {
+        background: linear-gradient(to left, var(--ds-color-surface-contrast-subtle) 0%, transparent 100%);
+    }
+
+    :host(:dir(rtl)) .nav-container.scroll-right .scroll-fade::after {
+        background: linear-gradient(to right, var(--ds-color-surface-contrast-subtle) 0%, transparent 100%);
+    }
+
     .nav-arrow {
         visibility: hidden;
     }

package/dist-react/cjs/components/ds-tabs/styles/cupra-diagonal.styles.cjs

@@ -13,7 +13,7 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
         width: 100%;
         height: 100%;
         top: 0;
-        left: 0;
+        inset-inline-start: 0;
         background: var(--ui-kit-private-blur-background);
         -webkit-backdrop-filter: blur(var(--ui-kit-private-blur-size));
         backdrop-filter: blur(var(--ui-kit-private-blur-size));
@@ -116,20 +116,19 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
         pointer-events: none;
         z-index: 0;
         bottom: 0;
-        left: var(--ui-kit-private-tab-horizontal-padding);
-        right: var(--ui-kit-private-tab-horizontal-padding);
+        inset-inline: var(--ui-kit-private-tab-horizontal-padding);
     }
 
     :host([data-ui-kit-theme='cupra-diagonal']) .secondary ::slotted([slot='tab']:first-child) {
-        margin-right: 0.0625rem;
+        margin-inline-end: 0.0625rem;
         text-transform: uppercase;
     }
 
     :host([data-ui-kit-theme='cupra-diagonal']) .secondary ::slotted([slot='tab']:first-child)::after {
         content: '';
         position: absolute;
-        right: 0;
-        margin-right: -0.0625rem;
+        inset-inline-end: 0;
+        margin-inline-end: -0.0625rem;
         width: 0.0625rem;
         height: 2rem;
         border-radius: var(--ds-border-radius-00, 0);
@@ -150,11 +149,11 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
     }
 
     :host([data-ui-kit-theme='cupra-diagonal']) .nav-arrow.left {
-        left: 0;
+        inset-inline-start: 0;
     }
 
     :host([data-ui-kit-theme='cupra-diagonal']) .nav-arrow.right {
-        right: 0;
+        inset-inline-end: 0;
     }
 
     :host([data-ui-kit-theme='cupra-diagonal']) .container {

package/dist-react/cjs/components/ds-tabs/styles/seat.styles.cjs

@@ -13,7 +13,7 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
         width: 100%;
         height: 100%;
         top: 0;
-        left: 0;
+        inset-inline-start: 0;
         background: var(--ui-kit-private-blur-background);
         -webkit-backdrop-filter: blur(var(--ui-kit-private-blur-size));
         backdrop-filter: blur(var(--ui-kit-private-blur-size));
@@ -116,20 +116,19 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
         pointer-events: none;
         z-index: 0;
         bottom: 0;
-        left: var(--ui-kit-private-tab-horizontal-padding);
-        right: var(--ui-kit-private-tab-horizontal-padding);
+        inset-inline: var(--ui-kit-private-tab-horizontal-padding);
     }
 
     :host([data-ui-kit-theme='seat']) .secondary ::slotted([slot='tab']:first-child) {
-        margin-right: 0.0625rem;
+        margin-inline-end: 0.0625rem;
         text-transform: uppercase;
     }
 
     :host([data-ui-kit-theme='seat']) .secondary ::slotted([slot='tab']:first-child)::after {
         content: '';
         position: absolute;
-        right: 0;
-        margin-right: -0.0625rem;
+        inset-inline-end: 0;
+        margin-inline-end: -0.0625rem;
         width: 0.0625rem;
         height: 2rem;
         border-radius: var(--ds-border-radius-00, 0);
@@ -150,11 +149,11 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
     }
 
     :host([data-ui-kit-theme='seat']) .nav-arrow.left {
-        left: 0;
+        inset-inline-start: 0;
     }
 
     :host([data-ui-kit-theme='seat']) .nav-arrow.right {
-        right: 0;
+        inset-inline-end: 0;
     }
 
     :host([data-ui-kit-theme='seat']) .container {

package/dist-react/cjs/components/ds-tag/ds-tag.cjs

@@ -1,7 +1,6 @@
-const e=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");const t=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.cjs"),n=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.cjs");const r=require("../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.cjs"),i=require("../base/UiKitElement.cjs"),a=require("../../decorators/customUiKitElement.cjs");require("../ds-icon/ds-icon.cjs");const o=require("../../utils/booleanConverter.cjs"),s=require("../../utils/uiKitHtml.cjs"),c=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/class-map.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/class-map.cjs");const l=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/if-defined.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/if-defined.cjs");const u=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/when.cjs"),d=require("./styles/common.styles.cjs"),f=require("./styles/cupra-diagonal.styles.cjs"),p=require("./styles/cupra.styles.cjs"),m=require("./styles/seat-legacy.styles.cjs"),h=require("./styles/seat.styles.cjs");var g=class extends i.UiKitElement{constructor(...e){super(...e),this.show=!0,this.clickableIcon=!1,this.iconPosition=`left`}get classes(){return{container:!0,[this.variant||this.color]:!0}}get iconClasses(){return{icon:!0,clicable:!!this.clickableIcon}}handleClickIcon(){if(!this.clickableIcon)return;let e=new CustomEvent(`clickicon`,{bubbles:!0,composed:!0});this.dispatchEvent(e)}get iconTemplate(){return this.iconName?s.uiKitHtml`<ds-icon class=${c.classMap(this.iconClasses)} icon-name=${l.ifDefined(this.iconName)} size="16" @click=${this.handleClickIcon}></ds-icon>`:e.nothing}render(){return this.show?e.html`
+const e=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");const t=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.cjs"),n=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.cjs");const r=require("../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.cjs"),i=require("../base/UiKitElement.cjs"),a=require("../../decorators/customUiKitElement.cjs"),o=require("../../utils/booleanConverter.cjs");require("../ds-icon/ds-icon.cjs");const s=require("../../utils/uiKitHtml.cjs"),c=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/class-map.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/class-map.cjs");const l=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/if-defined.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/if-defined.cjs");const u=require("./styles/common.styles.cjs"),d=require("./styles/cupra-diagonal.styles.cjs"),f=require("./styles/cupra.styles.cjs"),p=require("./styles/seat-legacy.styles.cjs"),m=require("./styles/seat.styles.cjs");var h=class extends i.UiKitElement{constructor(...e){super(...e),this.show=!0,this.clickableIcon=!1,this.iconPosition=`left`}get classes(){return{container:!0,[this.variant||this.color]:!0}}get iconClasses(){return{icon:!0,[`icon-${this.iconPosition}`]:!!this.iconPosition,clicable:!!this.clickableIcon}}handleClickIcon(){if(!this.clickableIcon)return;let e=new CustomEvent(`clickicon`,{bubbles:!0,composed:!0});this.dispatchEvent(e)}get iconTemplate(){return this.iconName?s.uiKitHtml`<ds-icon class=${c.classMap(this.iconClasses)} icon-name=${l.ifDefined(this.iconName)} size="16" @click=${this.handleClickIcon}></ds-icon>`:e.nothing}render(){return this.show?e.html`
                 <div class=${c.classMap(this.classes)}>
-                    ${u.when(this.iconPosition===`left`,()=>e.html`${this.iconTemplate}`)}
                     <slot></slot>
-                    ${u.when(this.iconPosition===`right`,()=>e.html`${this.iconTemplate}`)}
+                    ${this.iconTemplate}
                 </div>
-            `:e.nothing}},_=(g.styles=[d.commonStyles,d.iconStyles,f.cupraDiagonalStyles,h.seatStyles,p.cupraStyles,m.seatLegacyStyles],g);r.default([t.property({type:Boolean,converter:o.booleanConverter})],_.prototype,`show`,void 0),r.default([t.property({type:Boolean,converter:o.booleanConverter,attribute:`clickable-icon`})],_.prototype,`clickableIcon`,void 0),r.default([t.property({type:String,attribute:`icon-name`})],_.prototype,`iconName`,void 0),r.default([t.property({type:String,attribute:`icon-position`})],_.prototype,`iconPosition`,void 0),r.default([t.property({type:String,attribute:`color`})],_.prototype,`color`,void 0),r.default([t.property({type:String,attribute:`variant`})],_.prototype,`variant`,void 0),r.default([n.state()],_.prototype,`onClickHandler`,void 0),_=r.default([a.customUiKitElement(`ds-tag`)],_),Object.defineProperty(exports,"DsTag",{enumerable:!0,get:function(){return _}});
+            `:e.nothing}},g=(h.styles=[u.commonStyles,u.iconStyles,d.cupraDiagonalStyles,m.seatStyles,f.cupraStyles,p.seatLegacyStyles],h);r.default([t.property({type:Boolean,converter:o.booleanConverter})],g.prototype,`show`,void 0),r.default([t.property({type:Boolean,converter:o.booleanConverter,attribute:`clickable-icon`})],g.prototype,`clickableIcon`,void 0),r.default([t.property({type:String,attribute:`icon-name`})],g.prototype,`iconName`,void 0),r.default([t.property({type:String,attribute:`icon-position`})],g.prototype,`iconPosition`,void 0),r.default([t.property({type:String,attribute:`color`})],g.prototype,`color`,void 0),r.default([t.property({type:String,attribute:`variant`})],g.prototype,`variant`,void 0),r.default([n.state()],g.prototype,`onClickHandler`,void 0),g=r.default([a.customUiKitElement(`ds-tag`)],g),Object.defineProperty(exports,"DsTag",{enumerable:!0,get:function(){return g}});

package/dist-react/cjs/components/ds-tag/styles/common.styles.cjs

@@ -12,4 +12,17 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
     .icon.clicable {
         cursor: pointer;
     }
+
+    .icon-start,
+    .icon-left {
+        order: -1;
+    }
+
+    :host(:dir(rtl)) .icon-left {
+        order: 0;
+    }
+
+    :host(:dir(rtl)) .icon-right {
+        order: -1;
+    }
 `;exports.commonStyles=t,exports.iconStyles=n;

package/dist-react/cjs/components/ds-textarea/styles/cupra-diagonal.styles.cjs

@@ -99,7 +99,8 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
     :host([data-ui-kit-theme='cupra-diagonal']) .input-container {
         box-sizing: border-box;
         width: 100%;
-        padding: var(--ds-spacing-s-5) var(--ds-spacing-s-5) 0 var(--ds-spacing-m-1);
+        padding-block: var(--ds-spacing-s-5) 0;
+        padding-inline: var(--ds-spacing-m-1) var(--ds-spacing-s-5);
         background: var(--ds-field-bg-color-default, rgba(195, 195, 203, 0.05));
         border-radius: var(--ds-border-radius-xxs) var(--ds-border-radius-xxs) var(--ds-border-radius-none)
             var(--ds-border-radius-none);
@@ -107,7 +108,7 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
     }
 
     :host([data-ui-kit-theme='cupra-diagonal']) .medium .input-container {
-        padding-left: var(--ds-spacing-s-5);
+        padding-inline-start: var(--ds-spacing-s-5);
     }
 
     :host([data-ui-kit-theme='cupra-diagonal']) .input-container:hover,

package/dist-react/cjs/components/ds-textarea/styles/seat.styles.cjs

@@ -99,7 +99,8 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
     :host([data-ui-kit-theme='seat']) .input-container {
         box-sizing: border-box;
         width: 100%;
-        padding: var(--ds-spacing-s-5) var(--ds-spacing-s-5) 0 var(--ds-spacing-m-1);
+        padding-block: var(--ds-spacing-s-5) 0;
+        padding-inline: var(--ds-spacing-m-1) var(--ds-spacing-s-5);
         background: var(--ds-field-bg-color-default, rgba(195, 195, 203, 0.05));
         border-radius: var(--ds-border-radius-xxs) var(--ds-border-radius-xxs) var(--ds-border-radius-none)
             var(--ds-border-radius-none);
@@ -107,7 +108,7 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
     }
 
     :host([data-ui-kit-theme='seat']) .medium .input-container {
-        padding-left: var(--ds-spacing-s-5);
+        padding-inline-start: var(--ds-spacing-s-5);
     }
 
     :host([data-ui-kit-theme='seat']) .input-container:hover,

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

@@ -1,4 +1,4 @@
-const e=require("../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/decorators/provide.cjs"),t=require("./themeContext.cjs");require("../../core/theme.constants.cjs");const n=require("../../utils/PubSub.cjs"),r=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.cjs"),i=require("../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");const a=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.cjs"),o=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.cjs");const s=require("../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.cjs"),c=require("../../decorators/customUiKitElement.cjs"),l=require("../../utils/booleanConverter.cjs"),u=require("../../styles/source/shared/fonts-config.cjs");var d=class extends i.LitElement{constructor(...e){super(...e),this.loadFonts=!0,this.loadStyles=!0,this.loadUnusedStyles=!0,this.cssLoaded=!1,this.loadedFonts=new Set}updated(e){if(super.updated(e),e.has(`theme`)){var t,r;n.pubSub.publish(`theme`,this.theme),(t=sessionStorage)==null||t.setItem(`@cupra/ui-kit/theme`,this.theme),typeof FontFace<`u`&&(r=document)!=null&&r.fonts&&this.loadThemeFonts(),this.loadThemeStyles().then(()=>{this.cssLoaded=!0,this.dispatchEvent(new CustomEvent(`ui-kit:ready`,{bubbles:!0,composed:!0}))})}}loadThemeFonts(){var e;(e=u.fontsConfig[this.theme])==null||e.fonts.forEach(e=>{this.loadThemeFont(e)})}async loadThemeFont({weight:e,name:t,file:n}){if(!this.loadFonts)return Promise.resolve();let r=`${t}-${e}`;if(this.loadedFonts.has(r))return;let i=new FontFace(t,`url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.woff2') format('woff2'),
+const e=require("../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/decorators/provide.cjs"),t=require("./themeContext.cjs");require("../../core/theme.constants.cjs");const n=require("../../utils/PubSub.cjs"),r=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.cjs"),i=require("../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");const a=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.cjs"),o=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.cjs");const s=require("../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.cjs"),c=require("../../decorators/customUiKitElement.cjs"),l=require("../../utils/booleanConverter.cjs"),u=require("../../styles/source/shared/fonts-config.cjs");var d=class extends i.LitElement{constructor(...e){super(...e),this.loadFonts=!0,this.loadStyles=!0,this.loadUnusedStyles=!0,this.cssLoaded=!1,this.loadedFonts=new Set}connectedCallback(){super.connectedCallback(),this.publishDocumentAttributes(),this.observeDocumentAttributes()}disconnectedCallback(){var e;super.disconnectedCallback(),(e=this.documentAttributesObserver)==null||e.disconnect(),this.documentAttributesObserver=void 0}observeDocumentAttributes(){typeof MutationObserver<`u`&&typeof document<`u`&&(this.documentAttributesObserver=new MutationObserver(()=>this.publishDocumentAttributes()),this.documentAttributesObserver.observe(document.documentElement,{attributes:!0,attributeFilter:[`dir`,`lang`]}))}publishDocumentAttributes(){if(typeof document>`u`)return;let{documentElement:e}=document;n.pubSub.publish(`direction`,e.getAttribute(`dir`)===`rtl`?`rtl`:`ltr`),n.pubSub.publish(`lang`,e.getAttribute(`lang`))}updated(e){if(super.updated(e),e.has(`theme`)){var t,r;n.pubSub.publish(`theme`,this.theme),(t=sessionStorage)==null||t.setItem(`@cupra/ui-kit/theme`,this.theme),typeof FontFace<`u`&&(r=document)!=null&&r.fonts&&this.loadThemeFonts(),this.loadThemeStyles().then(()=>{this.cssLoaded=!0,this.dispatchEvent(new CustomEvent(`ui-kit:ready`,{bubbles:!0,composed:!0}))})}}loadThemeFonts(){var e;(e=u.fontsConfig[this.theme])==null||e.fonts.forEach(e=>{this.loadThemeFont(e)})}async loadThemeFont({weight:e,name:t,file:n,unicodeRange:r,display:i}){if(!this.loadFonts)return Promise.resolve();let a=r?`${t}-${e}-${r}`:`${t}-${e}`;if(this.loadedFonts.has(a))return;let o=new FontFace(t,`url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.woff2') format('woff2'),
             url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.woff') format('woff'),
             url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.ttf') format('truetype'),
-            url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.otf') format('opentype')`,{style:`normal`,weight:e,display:`optional`});try{await i.load(),document.fonts.add(i),this.loadedFonts.add(r)}catch(n){console.error(`Error loading "${t}" font with "${e}" weight:`,n)}}loadThemeStyles(){let e=`/2.0.0-canary.237`;return this.loadUnusedStyles&&this.applyUnusedStyles(e),this.loadStyles?new Promise((t,n)=>{let r=`https://ds-assets.cupra.com${e}/styles/${this.theme}/theme.css`;if(document.head.querySelector(`link[href="${r}"]`))t();else{let i=`ui-kit-theme-${e}`,a=document.getElementById(i),o=document.createElement(`link`);o.id=i,o.rel=`stylesheet`,o.href=r,o.onload=()=>t(),o.onerror=()=>n(Error(`Failed to load theme CSS: ${r}`)),document.head.appendChild(o),a==null||a.remove()}}):Promise.resolve()}applyUnusedStyles(e){let t=`https://ds-assets.cupra.com${e}/styles/${this.theme}/unused-styles.css`;if(document.head.querySelector(`link[href="${t}"]`))return;let n=`ui-kit-unused-styles-${e}`,r=document.getElementById(n),i=document.createElement(`link`);i.id=n,i.rel=`preload`,i.as=`style`,i.href=t,i.onload=()=>{i.rel=`stylesheet`},document.head.appendChild(i),r==null||r.remove()}render(){return this.cssLoaded?r.html`<slot></slot>`:r.nothing}};s.default([a.property({type:Boolean,converter:l.booleanConverter,attribute:`load-fonts`})],d.prototype,`loadFonts`,void 0),s.default([a.property({type:Boolean,converter:l.booleanConverter,attribute:`load-styles`})],d.prototype,`loadStyles`,void 0),s.default([a.property({type:Boolean,converter:l.booleanConverter,attribute:`load-unused-styles`})],d.prototype,`loadUnusedStyles`,void 0),s.default([e.provide({context:t.themeContext}),a.property({type:String})],d.prototype,`theme`,void 0),s.default([o.state()],d.prototype,`cssLoaded`,void 0),s.default([o.state()],d.prototype,`loadedFonts`,void 0),d=s.default([c.customUiKitElement(`ds-theme-provider`)],d),Object.defineProperty(exports,"DsThemeProvider",{enumerable:!0,get:function(){return d}});
+            url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.otf') format('opentype')`,{style:`normal`,weight:e,display:i??(r?`swap`:`optional`),...r&&{unicodeRange:r}});try{r||await o.load(),document.fonts.add(o),this.loadedFonts.add(a)}catch(n){console.error(`Error loading "${t}" font with "${e}" weight:`,n)}}loadThemeStyles(){let e=`/2.0.0-canary.239`;return this.loadUnusedStyles&&this.applyUnusedStyles(e),this.loadStyles?new Promise((t,n)=>{let r=`https://ds-assets.cupra.com${e}/styles/${this.theme}/theme.css`;if(document.head.querySelector(`link[href="${r}"]`))t();else{let i=`ui-kit-theme-${e}`,a=document.getElementById(i),o=document.createElement(`link`);o.id=i,o.rel=`stylesheet`,o.href=r,o.onload=()=>t(),o.onerror=()=>n(Error(`Failed to load theme CSS: ${r}`)),document.head.appendChild(o),a==null||a.remove()}}):Promise.resolve()}applyUnusedStyles(e){let t=`https://ds-assets.cupra.com${e}/styles/${this.theme}/unused-styles.css`;if(document.head.querySelector(`link[href="${t}"]`))return;let n=`ui-kit-unused-styles-${e}`,r=document.getElementById(n),i=document.createElement(`link`);i.id=n,i.rel=`preload`,i.as=`style`,i.href=t,i.onload=()=>{i.rel=`stylesheet`},document.head.appendChild(i),r==null||r.remove()}render(){return this.cssLoaded?r.html`<slot></slot>`:r.nothing}};s.default([a.property({type:Boolean,converter:l.booleanConverter,attribute:`load-fonts`})],d.prototype,`loadFonts`,void 0),s.default([a.property({type:Boolean,converter:l.booleanConverter,attribute:`load-styles`})],d.prototype,`loadStyles`,void 0),s.default([a.property({type:Boolean,converter:l.booleanConverter,attribute:`load-unused-styles`})],d.prototype,`loadUnusedStyles`,void 0),s.default([e.provide({context:t.themeContext}),a.property({type:String})],d.prototype,`theme`,void 0),s.default([o.state()],d.prototype,`cssLoaded`,void 0),s.default([o.state()],d.prototype,`loadedFonts`,void 0),d=s.default([c.customUiKitElement(`ds-theme-provider`)],d),Object.defineProperty(exports,"DsThemeProvider",{enumerable:!0,get:function(){return d}});

package/dist-react/cjs/components/ds-toast/styles/common.styles.cjs

@@ -1,4 +1,8 @@
 const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.cjs");require("../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");var t=e.css`
+    :host(:dir(rtl)) {
+        --ui-kit-private-dir: -1;
+    }
+
     :host {
         display: contents;
     }
@@ -11,6 +15,37 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
         pointer-events: none;
     }
 
+    .toast-container.top-end,
+    .toast-container.top-start {
+        top: 1rem;
+    }
+
+    .toast-container.top-end {
+        inset-inline-end: 1rem;
+        align-items: flex-end;
+    }
+
+    .toast-container.top-start {
+        inset-inline-start: 1rem;
+        align-items: flex-start;
+    }
+
+    .toast-container.bottom-end,
+    .toast-container.bottom-start {
+        flex-direction: column;
+        bottom: 1rem;
+    }
+
+    .toast-container.bottom-end {
+        inset-inline-end: 1rem;
+        align-items: flex-end;
+    }
+
+    .toast-container.bottom-start {
+        inset-inline-start: 1rem;
+        align-items: flex-start;
+    }
+
     .toast-container.top-right {
         top: 1rem;
         right: 1rem;
@@ -26,16 +61,15 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
     .toast-container.bottom-right,
     .toast-container.bottom-left {
         flex-direction: column;
+        bottom: 1rem;
     }
 
     .toast-container.bottom-right {
-        bottom: 1rem;
         right: 1rem;
         align-items: flex-end;
     }
 
     .toast-container.bottom-left {
-        bottom: 1rem;
         left: 1rem;
         align-items: flex-start;
     }
@@ -87,7 +121,7 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
         }
         to {
             opacity: 0;
-            transform: translateX(-1rem);
+            transform: translateX(calc(-1rem * var(--ui-kit-private-dir, 1)));
         }
     }
 
@@ -98,7 +132,7 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
         }
         to {
             opacity: 0;
-            transform: translateX(1rem);
+            transform: translateX(calc(1rem * var(--ui-kit-private-dir, 1)));
         }
     }
 `;exports.containerStyles=t,exports.toastStyles=n;

package/dist-react/cjs/components/ds-toast-message/ds-toast-message.cjs

@@ -1,10 +1,10 @@
-const e=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.cjs"),t=require("../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");const n=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.cjs");const r=require("../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.cjs"),i=require("../../decorators/customUiKitElement.cjs");require("../ds-icon/ds-icon.cjs");const a=require("../../utils/uiKitHtml.cjs"),o=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/class-map.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/class-map.cjs");const s=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/if-defined.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/if-defined.cjs"),require("../ds-icon-button/ds-icon-button.cjs");const c=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/when.cjs");require("../ds-link-button/ds-link-button.cjs");const l=require("./styles/common.styles.cjs");var u=class extends t.LitElement{constructor(...e){super(...e),this.status=`default`,this.dataId=``,this.title=``,this.text=``}getIconName(){switch(this.status){case`success`:return`check-mark-circle`;case`error`:return`cross-circle`;case`warning`:return`exclamation-mark-circle`;case`info`:return`info-circle`;default:return`chat-bubble`}}handleClickCloseButton(){let e=new CustomEvent(`toast:remove`,{bubbles:!0,composed:!0,detail:{id:this.dataId}});this.dispatchEvent(e)}handleClickAction(){let e=new CustomEvent(`ds-toast:action-click`,{bubbles:!0,composed:!0,detail:{id:this.dataId}});this.dispatchEvent(e)}get toastMessageClasses(){return{container:!0,[this.status||`default`]:!0}}get iconTemplate(){return a.uiKitHtml`<ds-icon class="icon" icon-name=${s.ifDefined(this.getIconName())} size="24"></ds-icon>`}get headerTemplate(){return c.when(this.title||this.text,()=>e.html`
+const e=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.cjs"),t=require("../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");const n=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.cjs");const r=require("../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.cjs"),i=require("../../decorators/customUiKitElement.cjs");require("../ds-icon/ds-icon.cjs");const a=require("../../utils/uiKitHtml.cjs"),o=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/class-map.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/class-map.cjs");const s=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/if-defined.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/if-defined.cjs"),require("../ds-icon-button/ds-icon-button.cjs"),require("../ds-link-button/ds-link-button.cjs");const c=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/when.cjs"),l=require("./styles/common.styles.cjs");var u=class extends t.LitElement{constructor(...e){super(...e),this.status=`default`,this.dataId=``,this.title=``,this.text=``}getIconName(){switch(this.status){case`success`:return`check-mark-circle`;case`error`:return`cross-circle`;case`warning`:return`exclamation-mark-circle`;case`info`:return`info-circle`;default:return`chat-bubble`}}handleClickCloseButton(){let e=new CustomEvent(`toast:remove`,{bubbles:!0,composed:!0,detail:{id:this.dataId}});this.dispatchEvent(e)}handleClickAction(){let e=new CustomEvent(`ds-toast:action-click`,{bubbles:!0,composed:!0,detail:{id:this.dataId}});this.dispatchEvent(e)}get toastMessageClasses(){return{container:!0,[this.status||`default`]:!0}}get iconTemplate(){return a.uiKitHtml`<ds-icon class="icon" icon-name=${s.ifDefined(this.getIconName())} size="24"></ds-icon>`}get headerTemplate(){return c.when(this.title||this.text,()=>e.html`
                 <div class="header">
                     ${c.when(this.title,()=>e.html`<div class="title">${this.title}</div>`)}
                     ${c.when(this.text,()=>e.html`<div class="message">${this.text}</div>`)}
                 </div>
             `)}get closeButtonTemplate(){return a.uiKitHtml`<ds-icon-button
-            data-aria-label="close-button"
+            data-aria-label=${this.dataAriaLabelCloseButton||`close-button`}
             @click=${this.handleClickCloseButton}
             icon-name="cross"
             variant="naked"
@@ -24,4 +24,4 @@ const e=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/l
                 </div>
                 ${this.closeButtonTemplate}
             </div>
-        `}},d=(u.styles=[l.toastMessageStyles],u);r.default([n.property({type:String,reflect:!0})],d.prototype,`status`,void 0),r.default([n.property({type:String,attribute:`data-id`,reflect:!0})],d.prototype,`dataId`,void 0),r.default([n.property({type:String,reflect:!0})],d.prototype,`title`,void 0),r.default([n.property({type:String,reflect:!0})],d.prototype,`text`,void 0),r.default([n.property({attribute:!1})],d.prototype,`action`,void 0),d=r.default([i.customUiKitElement(`ds-toast-message`)],d),Object.defineProperty(exports,"DsToastMessage",{enumerable:!0,get:function(){return d}});
+        `}},d=(u.styles=[l.toastMessageStyles],u);r.default([n.property({type:String,attribute:`data-aria-label-close-button`})],d.prototype,`dataAriaLabelCloseButton`,void 0),r.default([n.property({type:String,reflect:!0})],d.prototype,`status`,void 0),r.default([n.property({type:String,attribute:`data-id`,reflect:!0})],d.prototype,`dataId`,void 0),r.default([n.property({type:String,reflect:!0})],d.prototype,`title`,void 0),r.default([n.property({type:String,reflect:!0})],d.prototype,`text`,void 0),r.default([n.property({attribute:!1})],d.prototype,`action`,void 0),d=r.default([i.customUiKitElement(`ds-toast-message`)],d),Object.defineProperty(exports,"DsToastMessage",{enumerable:!0,get:function(){return d}});

package/dist-react/cjs/components/ds-toast-message/styles/common.styles.cjs

@@ -101,7 +101,7 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
         -webkit-box-orient: vertical;
         -webkit-line-clamp: 4;
         overflow: hidden;
-        text-align: left;
+        text-align: start;
     }
 
     @media (min-width: 480px) {

package/dist-react/cjs/components/ds-toggle-button/ds-toggle-button.cjs

@@ -1,4 +1,4 @@
-const e=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");const t=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.cjs");const n=require("../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.cjs"),r=require("../../decorators/customUiKitElement.cjs"),i=require("../../utils/booleanConverter.cjs"),a=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/class-map.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/class-map.cjs");const o=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/when.cjs"),s=require("../ds-button/ds-button.cjs");var c=class extends s.DsButton{constructor(...e){super(...e),this.checked=!1,this.checkedText=``,this.uncheckedText=``,this.rounded=!0}updated(e){super.updated(e),this.iconName=this.checked?`minus`:`plus`,this.variant=this.checked?`primary`:`secondary`}handleClick(){this.checked=!this.checked,this.dispatchEvent(new CustomEvent(`change`,{bubbles:!0,composed:!0,detail:{checked:this.checked}}))}render(){var t;return e.html`
+const e=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");const t=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.cjs");const n=require("../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.cjs"),r=require("../../decorators/customUiKitElement.cjs"),i=require("../../utils/booleanConverter.cjs"),a=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/class-map.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/class-map.cjs");const o=require("../ds-button/ds-button.cjs");var s=class extends o.DsButton{constructor(...e){super(...e),this.checked=!1,this.checkedText=``,this.uncheckedText=``,this.rounded=!0}updated(e){super.updated(e),this.iconName=this.checked?`minus`:`plus`,this.variant=this.checked?`primary`:`secondary`}handleClick(){this.checked=!this.checked,this.dispatchEvent(new CustomEvent(`change`,{bubbles:!0,composed:!0,detail:{checked:this.checked}}))}render(){var t;return e.html`
             <style>
                 :host {
                     pointer-events: ${this.disabled?`none`:`visible`};
@@ -13,8 +13,7 @@ const e=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/l
                 type=${this.type}
                 @click=${this.handleClick}
             >
-                ${o.when(this.iconPosition===`left`,()=>e.html`${this.iconTemplate}`)}
                 ${this.checked?this.checkedText:this.uncheckedText}
-                ${o.when(this.iconPosition===`right`,()=>e.html`${this.iconTemplate}`)}
+                ${this.iconTemplate}
             </button>
-        `}};n.default([t.property({type:Boolean,converter:i.booleanConverter,reflect:!0})],c.prototype,`checked`,void 0),n.default([t.property({type:String,attribute:`checked-text`})],c.prototype,`checkedText`,void 0),n.default([t.property({type:String,attribute:`unchecked-text`})],c.prototype,`uncheckedText`,void 0),n.default([t.property({type:Boolean,converter:i.booleanConverter})],c.prototype,`rounded`,void 0),c=n.default([r.customUiKitElement(`ds-toggle-button`)],c),Object.defineProperty(exports,"DsToggleButton",{enumerable:!0,get:function(){return c}});
+        `}};n.default([t.property({type:Boolean,converter:i.booleanConverter,reflect:!0})],s.prototype,`checked`,void 0),n.default([t.property({type:String,attribute:`checked-text`})],s.prototype,`checkedText`,void 0),n.default([t.property({type:String,attribute:`unchecked-text`})],s.prototype,`uncheckedText`,void 0),n.default([t.property({type:Boolean,converter:i.booleanConverter})],s.prototype,`rounded`,void 0),s=n.default([r.customUiKitElement(`ds-toggle-button`)],s),Object.defineProperty(exports,"DsToggleButton",{enumerable:!0,get:function(){return s}});

package/dist-react/cjs/components/ds-toggle-switch/styles/common.styles.cjs

@@ -26,7 +26,7 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
     .fill {
         transition: width 200ms ease-in-out;
         position: absolute;
-        left: 0;
+        inset-inline-start: 0;
         top: 50%;
     }
 
@@ -36,7 +36,7 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
         top: 50%;
         transform: translateY(-50%);
         transition:
-            left 0.3s cubic-bezier(0, 0, 0.2, 1),
+            inset-inline-start 0.3s cubic-bezier(0, 0, 0.2, 1),
             width 0.3s cubic-bezier(0, 0, 0.2, 1),
             height 0.3s cubic-bezier(0, 0, 0.2, 1),
             background-color 0.3s cubic-bezier(0, 0, 0.2, 1);