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

package/dist-react/cjs/components/ds-secondary-navigation/ds-secondary-navigation.cjs

@@ -1,7 +1,7 @@
-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"),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"),a=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/query-assigned-elements.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.cjs");const o=require("../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.cjs"),s=require("../../decorators/customUiKitElement.cjs");require("../ds-icon/ds-icon.cjs");const 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("../../mixins/ViewportMixin.cjs");require("../ds-icon-button/ds-icon-button.cjs"),require("../ds-button/ds-button.cjs");const d=require("./styles/common.styles.cjs");var f=class extends u.ViewportMixin(t.LitElement){constructor(...e){super(...e),this.dropdownButtonText=`Menu`,this.keepDropdownButtonText=!1,this.itemsMode=`auto`,this.actionsMode=`auto`,this.openItems=!1,this.openCtas=!1,this.hasScrollLeft=!1,this.hasScrollRight=!1,this.actionsCount=0,this.resizeObserver=new ResizeObserver(()=>{this.handleScroll()}),this.handleScroll=()=>{var e,t,n,r;let i=((e=this.itemsContainer)==null?void 0:e.scrollLeft)+((t=this.itemsContainer)==null?void 0:t.clientWidth);this.hasScrollLeft=((n=this.itemsContainer)==null?void 0:n.scrollLeft)>0,this.hasScrollRight=i<((r=this.itemsContainer)==null?void 0:r.scrollWidth)}}static resolveResponsive(e,t,n){let r;try{r=JSON.parse(e)}catch{return e}if(typeof r!=`object`||!r||Array.isArray(r))return e;let i=r,a=p.VIEWPORT_ORDER.indexOf(t);for(let e=a;e>=0;e--){let t=p.VIEWPORT_ORDER[e];if(t in i)return i[t]}return n}get resolvedItemsMode(){return p.resolveResponsive(this.itemsMode,this.viewport,`auto`)}get resolvedActionsMode(){return p.resolveResponsive(this.actionsMode,this.viewport,`auto`)}updated(e){super.updated(e),(e.has(`viewport`)||e.has(`actionsMode`))&&this.updateCtas(),e.has(`selectedIndex`)&&this.updateSelectedItem()}firstUpdated(e){var t;super.firstUpdated(e),this.handleScroll(),this.itemsContainer&&this.resizeObserver.observe(this.itemsContainer),window.addEventListener(`resize`,this.handleScroll),(t=this.itemsContainer)==null||t.addEventListener(`scroll`,this.handleScroll)}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver.disconnect(),window.removeEventListener(`resize`,this.handleScroll)}get selectedItemText(){var e;return this.keepDropdownButtonText?this.dropdownButtonText:((e=this.items)==null||(e=e[this.selectedIndex])==null||(e=e.textContent)==null?void 0:e.trim())||this.dropdownButtonText}get classes(){return{nav:!0,"ds-blur":!0,"scroll-left":this.hasScrollLeft,"scroll-right":this.hasScrollRight}}toggleItemsDropdown(){this.openItems=!this.openItems,this.openItems&&(this.openCtas=!1)}toggleActionsDropdown(){this.openCtas=!this.openCtas,this.openCtas&&(this.openItems=!1)}closeDropdowns(){this.openItems=!1}handleItemsSlotChange(){this.updateSelectedItem(),this.requestUpdate()}handleActionsSlotChange(){this.updateCtas()}updateSelectedItem(){var e;(e=this.items)==null||e.forEach((e,t)=>{t===this.selectedIndex?e.classList.add(`selected`):e.classList.remove(`selected`)})}updateCtas(){var e,t;this.actionsCount=((e=this.ctas)==null?void 0:e.length)??0,(t=this.ctas)==null||t.forEach(e=>{[`xxl`,`xl`].includes(this.viewport)?e==null||e.setAttribute(`size`,`large`):e==null||e.setAttribute(`size`,`medium`)})}handleItemClick(e){var t;let n=e.target,r=((t=this.items)==null?void 0:t.indexOf(n))??-1;if(r!==-1){var i;this.selectedIndex=r,this.updateSelectedItem();let e=((i=n.textContent)==null?void 0:i.trim())||n.getAttribute(`data-label`)||``;this.dispatchEvent(new CustomEvent(`ds-secondary-navigation:select`,{detail:{index:r,label:e},bubbles:!0,composed:!0})),this.closeDropdowns()}}get shouldShowItemsInline(){return this.resolvedItemsMode===`inline`?!0:this.resolvedItemsMode===`select`||this.resolvedItemsMode===`icon-button`?!1:[`l`,`xl`,`xxl`].includes(this.viewport)}get shouldShowItemsDropdownButton(){return this.resolvedItemsMode===`inline`?!1:this.resolvedItemsMode===`select`||this.resolvedItemsMode===`icon-button`||[`xxs`,`xs`,`s`,`m`].includes(this.viewport)}get shouldShowActionsInline(){if(this.resolvedActionsMode===`inline`)return!0;if(this.resolvedActionsMode===`dropdown`)return!1;let e=[`xxs`,`xs`,`s`].includes(this.viewport);return[`m`,`l`,`xl`,`xxl`].includes(this.viewport)||e&&!this.shouldShowActionsDropdownButton}get shouldShowActionsDropdownButton(){return this.resolvedActionsMode===`inline`?!1:this.resolvedActionsMode===`dropdown`||[`xxs`,`xs`,`s`].includes(this.viewport)&&this.actionsCount>1}render(){return e.html`
+const e=require("../../utils/PubSub.cjs"),t=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.cjs"),n=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 r=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.cjs"),i=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.cjs"),a=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/query.cjs"),o=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/query-assigned-elements.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");require("../ds-icon/ds-icon.cjs");const l=require("../../utils/uiKitHtml.cjs"),u=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 d=require("../../mixins/ViewportMixin.cjs");require("../ds-icon-button/ds-icon-button.cjs"),require("../ds-button/ds-button.cjs");const f=require("./styles/common.styles.cjs");var p=class extends d.ViewportMixin(n.LitElement){constructor(...e){super(...e),this.dropdownButtonText=`Menu`,this.keepDropdownButtonText=!1,this.itemsMode=`auto`,this.actionsMode=`auto`,this.openItems=!1,this.openCtas=!1,this.hasScrollLeft=!1,this.hasScrollRight=!1,this.actionsCount=0,this.resizeObserver=new ResizeObserver(()=>{this.handleScroll()}),this.handleScroll=()=>{var e,t,n;let r=Math.abs((e=this.itemsContainer)==null?void 0:e.scrollLeft),i=r+((t=this.itemsContainer)==null?void 0:t.clientWidth);this.hasScrollLeft=r>0,this.hasScrollRight=i<((n=this.itemsContainer)==null?void 0:n.scrollWidth)}}static resolveResponsive(e,t,n){let r;try{r=JSON.parse(e)}catch{return e}if(typeof r!=`object`||!r||Array.isArray(r))return e;let i=r,a=m.VIEWPORT_ORDER.indexOf(t);for(let e=a;e>=0;e--){let t=m.VIEWPORT_ORDER[e];if(t in i)return i[t]}return n}get resolvedItemsMode(){return m.resolveResponsive(this.itemsMode,this.viewport,`auto`)}get resolvedActionsMode(){return m.resolveResponsive(this.actionsMode,this.viewport,`auto`)}updated(e){super.updated(e),(e.has(`viewport`)||e.has(`actionsMode`))&&this.updateCtas(),e.has(`selectedIndex`)&&this.updateSelectedItem()}firstUpdated(t){var n;super.firstUpdated(t),this.handleScroll(),this.itemsContainer&&this.resizeObserver.observe(this.itemsContainer),window.addEventListener(`resize`,this.handleScroll),(n=this.itemsContainer)==null||n.addEventListener(`scroll`,this.handleScroll),e.pubSub.subscribe(`direction`,this.handleScroll)}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver.disconnect(),window.removeEventListener(`resize`,this.handleScroll),e.pubSub.unsubscribe(`direction`,this.handleScroll)}get selectedItemText(){var e;return this.keepDropdownButtonText?this.dropdownButtonText:((e=this.items)==null||(e=e[this.selectedIndex])==null||(e=e.textContent)==null?void 0:e.trim())||this.dropdownButtonText}get classes(){return{nav:!0,"ds-blur":!0,"scroll-left":this.hasScrollLeft,"scroll-right":this.hasScrollRight}}toggleItemsDropdown(){this.openItems=!this.openItems,this.openItems&&(this.openCtas=!1)}toggleActionsDropdown(){this.openCtas=!this.openCtas,this.openCtas&&(this.openItems=!1)}closeDropdowns(){this.openItems=!1}handleItemsSlotChange(){this.updateSelectedItem(),this.requestUpdate()}handleActionsSlotChange(){this.updateCtas()}updateSelectedItem(){var e;(e=this.items)==null||e.forEach((e,t)=>{t===this.selectedIndex?e.classList.add(`selected`):e.classList.remove(`selected`)})}updateCtas(){var e,t;this.actionsCount=((e=this.ctas)==null?void 0:e.length)??0,(t=this.ctas)==null||t.forEach(e=>{[`xxl`,`xl`].includes(this.viewport)?e==null||e.setAttribute(`size`,`large`):e==null||e.setAttribute(`size`,`medium`)})}handleItemClick(e){var t;let n=e.target,r=((t=this.items)==null?void 0:t.indexOf(n))??-1;if(r!==-1){var i;this.selectedIndex=r,this.updateSelectedItem();let e=((i=n.textContent)==null?void 0:i.trim())||n.getAttribute(`data-label`)||``;this.dispatchEvent(new CustomEvent(`ds-secondary-navigation:select`,{detail:{index:r,label:e},bubbles:!0,composed:!0})),this.closeDropdowns()}}get shouldShowItemsInline(){return this.resolvedItemsMode===`inline`?!0:this.resolvedItemsMode===`select`||this.resolvedItemsMode===`icon-button`?!1:[`l`,`xl`,`xxl`].includes(this.viewport)}get shouldShowItemsDropdownButton(){return this.resolvedItemsMode===`inline`?!1:this.resolvedItemsMode===`select`||this.resolvedItemsMode===`icon-button`||[`xxs`,`xs`,`s`,`m`].includes(this.viewport)}get shouldShowActionsInline(){if(this.resolvedActionsMode===`inline`)return!0;if(this.resolvedActionsMode===`dropdown`)return!1;let e=[`xxs`,`xs`,`s`].includes(this.viewport);return[`m`,`l`,`xl`,`xxl`].includes(this.viewport)||e&&!this.shouldShowActionsDropdownButton}get shouldShowActionsDropdownButton(){return this.resolvedActionsMode===`inline`?!1:this.resolvedActionsMode===`dropdown`||[`xxs`,`xs`,`s`].includes(this.viewport)&&this.actionsCount>1}render(){return t.html`
             ${this.backdropTemplate}
             <div class="container gutter">
-                <nav data-testid="ds-secondary-navigation-container" class=${l.classMap(this.classes)}>
+                <nav data-testid="ds-secondary-navigation-container" class=${u.classMap(this.classes)}>
                     ${this.itemsTemplate}
                     ${this.itemsDropdownButtonTemplate}
                     ${this.actionsTemplate}
@@ -10,35 +10,35 @@ const e=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/l
                     ${this.actionsDropdownTemplate}
                 </nav>
             </div>
-        `}get itemsTemplate(){return this.shouldShowItemsInline?e.html`
+        `}get itemsTemplate(){return this.shouldShowItemsInline?t.html`
             <div class="items-container">
                 <div>
                     <slot name="items" @slotchange=${this.handleItemsSlotChange} @click=${this.handleItemClick}></slot>
                 </div>
             </div>
-        `:e.nothing}get actionsTemplate(){return this.shouldShowActionsInline?e.html`
+        `:t.nothing}get actionsTemplate(){return this.shouldShowActionsInline?t.html`
             <div class="actions-container">
                 <slot name="actions" @slotchange=${this.handleActionsSlotChange}></slot>
             </div>
-        `:e.nothing}get iconTemplate(){return c.uiKitHtml`<ds-icon class="icon" icon-name=${this.openItems?`arrow-down`:`arrow-up`} size="20"></ds-icon>`}get itemsDropdownButtonTemplate(){return this.shouldShowItemsDropdownButton?this.resolvedItemsMode===`icon-button`?c.uiKitHtml`<ds-icon-button
+        `:t.nothing}get iconTemplate(){return l.uiKitHtml`<ds-icon class="icon" icon-name=${this.openItems?`arrow-down`:`arrow-up`} size="20"></ds-icon>`}get itemsDropdownButtonTemplate(){return this.shouldShowItemsDropdownButton?this.resolvedItemsMode===`icon-button`?l.uiKitHtml`<ds-icon-button
                 class="items-list-button"
-                data-aria-label="open items dropdown"
+                data-aria-label=${this.dataAriaLabelItemsDropdown||`open items dropdown`}
                 @click=${this.toggleItemsDropdown}
-                size=${p.RESPONSIVE_BUTTON_SIZE}
+                size=${m.RESPONSIVE_BUTTON_SIZE}
                 variant="secondary"
                 icon-name="list-line"
-            ></ds-icon-button>`:c.uiKitHtml`<ds-button
+            ></ds-icon-button>`:l.uiKitHtml`<ds-button
             class="items-dropdown-button"
             variant="secondary"
-            size=${p.RESPONSIVE_BUTTON_SIZE}
+            size=${m.RESPONSIVE_BUTTON_SIZE}
             icon-name=${this.openItems?`arrow-down`:`arrow-up`}
-            icon-position="right"
+            icon-position="end"
             @click=${this.toggleItemsDropdown}
             aria-expanded=${this.openItems}
             aria-haspopup="true"
-        ><span>${this.selectedItemText}</span></ds-button>`:e.nothing}get itemsDropdownTemplate(){return this.shouldShowItemsDropdownButton?e.html`
+        ><span>${this.selectedItemText}</span></ds-button>`:t.nothing}get itemsDropdownTemplate(){return this.shouldShowItemsDropdownButton?t.html`
             <div
-                class=${l.classMap({gutter:!0,"dropdown-container":!0,"items-dropdown":!0,open:this.openItems})}
+                class=${u.classMap({gutter:!0,"dropdown-container":!0,"items-dropdown":!0,open:this.openItems})}
                 role="menu"
                 aria-hidden=${!this.openItems}
                 ?inert=${!this.openItems}
@@ -47,15 +47,15 @@ const e=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/l
                     <slot name="items" @slotchange=${this.handleItemsSlotChange} @click=${this.handleItemClick}></slot>
                 </div>
             </div>
-        `:e.nothing}get actionsDropdownButtonTemplate(){return this.shouldShowActionsDropdownButton?c.uiKitHtml`<ds-icon-button
+        `:t.nothing}get actionsDropdownButtonTemplate(){return this.shouldShowActionsDropdownButton?l.uiKitHtml`<ds-icon-button
             class="nav-arrow"
-            data-aria-label="open actions dropdown"
+            data-aria-label=${this.dataAriaLabelActionsDropdown||`open actions dropdown`}
             @click=${this.toggleActionsDropdown}
-            size=${p.RESPONSIVE_BUTTON_SIZE}
+            size=${m.RESPONSIVE_BUTTON_SIZE}
             icon-name="triple-dot-v"
-        ></ds-icon-button>`:e.nothing}get actionsDropdownTemplate(){return this.shouldShowActionsDropdownButton?e.html`
+        ></ds-icon-button>`:t.nothing}get actionsDropdownTemplate(){return this.shouldShowActionsDropdownButton?t.html`
             <div
-                class=${l.classMap({gutter:!0,"dropdown-container":!0,"actions-dropdown":!0,open:this.openCtas})}
+                class=${u.classMap({gutter:!0,"dropdown-container":!0,"actions-dropdown":!0,open:this.openCtas})}
                 role="menu"
                 aria-hidden=${!this.openCtas}
                 ?inert=${!this.openCtas}
@@ -64,4 +64,4 @@ const e=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/l
                     <slot name="actions" @slotchange=${this.handleActionsSlotChange}></slot>
                 </div>
             </div>
-        `:e.nothing}get backdropTemplate(){return!this.openItems&&!this.openCtas?e.nothing:e.html`<div class="dropdown-backdrop" @click=${this.closeDropdowns}></div>`}},p=f,m=(f.styles=[d.commonStyles],f.RESPONSIVE_BUTTON_SIZE=JSON.stringify({xs:`medium`,s:`medium`,m:`medium`,l:`medium`,xl:`large`,xxl:`large`}),f.VIEWPORT_ORDER=[`xs`,`s`,`m`,`l`,`xl`,`xxl`],f);o.default([n.property({type:String,attribute:`dropdown-button-text`})],m.prototype,`dropdownButtonText`,void 0),o.default([n.property({type:Number,attribute:`selected-index`})],m.prototype,`selectedIndex`,void 0),o.default([n.property({type:Boolean,attribute:`keep-dropdown-button-text`})],m.prototype,`keepDropdownButtonText`,void 0),o.default([n.property({type:String,attribute:`items-mode`})],m.prototype,`itemsMode`,void 0),o.default([n.property({type:String,attribute:`actions-mode`})],m.prototype,`actionsMode`,void 0),o.default([r.state()],m.prototype,`openItems`,void 0),o.default([r.state()],m.prototype,`openCtas`,void 0),o.default([r.state()],m.prototype,`hasScrollLeft`,void 0),o.default([r.state()],m.prototype,`hasScrollRight`,void 0),o.default([r.state()],m.prototype,`actionsCount`,void 0),o.default([a.queryAssignedElements({slot:`items`})],m.prototype,`items`,void 0),o.default([a.queryAssignedElements({slot:`actions`})],m.prototype,`ctas`,void 0),o.default([i.query(`.items-container`)],m.prototype,`itemsContainer`,void 0),m=p=o.default([s.customUiKitElement(`ds-secondary-navigation`)],m),Object.defineProperty(exports,"DsSecondaryNavigation",{enumerable:!0,get:function(){return m}});
+        `:t.nothing}get backdropTemplate(){return!this.openItems&&!this.openCtas?t.nothing:t.html`<div class="dropdown-backdrop" @click=${this.closeDropdowns}></div>`}},m=p,h=(p.styles=[f.commonStyles],p.RESPONSIVE_BUTTON_SIZE=JSON.stringify({xs:`medium`,s:`medium`,m:`medium`,l:`medium`,xl:`large`,xxl:`large`}),p.VIEWPORT_ORDER=[`xs`,`s`,`m`,`l`,`xl`,`xxl`],p);s.default([r.property({type:String,attribute:`data-aria-label-items-dropdown`})],h.prototype,`dataAriaLabelItemsDropdown`,void 0),s.default([r.property({type:String,attribute:`data-aria-label-actions-dropdown`})],h.prototype,`dataAriaLabelActionsDropdown`,void 0),s.default([r.property({type:String,attribute:`dropdown-button-text`})],h.prototype,`dropdownButtonText`,void 0),s.default([r.property({type:Number,attribute:`selected-index`})],h.prototype,`selectedIndex`,void 0),s.default([r.property({type:Boolean,attribute:`keep-dropdown-button-text`})],h.prototype,`keepDropdownButtonText`,void 0),s.default([r.property({type:String,attribute:`items-mode`})],h.prototype,`itemsMode`,void 0),s.default([r.property({type:String,attribute:`actions-mode`})],h.prototype,`actionsMode`,void 0),s.default([i.state()],h.prototype,`openItems`,void 0),s.default([i.state()],h.prototype,`openCtas`,void 0),s.default([i.state()],h.prototype,`hasScrollLeft`,void 0),s.default([i.state()],h.prototype,`hasScrollRight`,void 0),s.default([i.state()],h.prototype,`actionsCount`,void 0),s.default([o.queryAssignedElements({slot:`items`})],h.prototype,`items`,void 0),s.default([o.queryAssignedElements({slot:`actions`})],h.prototype,`ctas`,void 0),s.default([a.query(`.items-container`)],h.prototype,`itemsContainer`,void 0),h=m=s.default([c.customUiKitElement(`ds-secondary-navigation`)],h),Object.defineProperty(exports,"DsSecondaryNavigation",{enumerable:!0,get:function(){return h}});

package/dist-react/cjs/components/ds-secondary-navigation/styles/common.styles.cjs

@@ -17,7 +17,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);
         backdrop-filter: blur(var(--ui-kit-private-blur-size));
         border-radius: var(--ui-kit-private-blur-border-radius, inherit);
@@ -134,6 +134,26 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
         );
     }
 
+    :host(:dir(rtl)) .scroll-left .items-container {
+        mask-image: linear-gradient(
+            to right,
+            rgba(0, 0, 0, 1) 0%,
+            rgba(0, 0, 0, 1) 80%,
+            rgba(0, 0, 0, 0.5) 95%,
+            rgba(0, 0, 0, 0) 100%
+        );
+    }
+
+    :host(:dir(rtl)) .scroll-right .items-container {
+        mask-image: linear-gradient(
+            to left,
+            rgba(0, 0, 0, 1) 0%,
+            rgba(0, 0, 0, 1) 80%,
+            rgba(0, 0, 0, 0.5) 95%,
+            rgba(0, 0, 0, 0) 100%
+        );
+    }
+
     .scroll-left.scroll-right .items-container {
         mask-image: linear-gradient(
             to right,
@@ -231,7 +251,7 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
         box-sizing: border-box;
         width: 100%;
         z-index: var(--ds-z-index-context-menu);
-        left: 0;
+        inset-inline-start: 0;
         bottom: calc(var(--ui-kit-private-secondary-navigation-container-height) + var(--ds-spacing-s-5));
     }
 
@@ -273,8 +293,8 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
     .dropdown-backdrop {
         position: fixed;
         top: 0;
-        left: 0;
-        right: 0;
+        inset-inline-start: 0;
+        inset-inline-end: 0;
         bottom: 0;
     }
 

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

@@ -1,4 +1,4 @@
-require("../ds-theme-provider/themeContext.cjs");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"),i=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/query-assigned-elements.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");require("../ds-icon/ds-icon.cjs");const c=require("../../utils/booleanConverter.cjs"),l=require("../../utils/uiKitHtml.cjs"),u=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 d=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-loader-spinner/ds-loader-spinner.cjs");const f=require("./controllers/SelectKeyboardController.cjs"),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");var v=class extends o.UiKitElement{constructor(...e){super(...e),this.mode=`light`,this.size=`large`,this.variant=`primary`,this.readonly=!1,this.loading=!1,this.loadingAriaLabel=`Loading`,this.iconName=void 0,this.dataAriaLabel=void 0,this._open=!1,this._keyboardNavigating=!1,this.nativeSelect=null,this.nativeLabel=null,this.nativeOptions=[],this.keyboardFocusIndex=-1,this.hasForcedError=!1,this.handleMutations=e=>{e.forEach(e=>{e.type===`childList`&&this.syncNativeOptions()}),this.requestUpdate()},this.syncNativeOptions=()=>{this.nativeOptions=Array.from(this.nativeSelect.options)},this.handleOpen=()=>{this.readonly||this.loading||(this._open=!0,this.keyboardFocusIndex=this.findSelectedOptionIndex(),this.focusDisplaySelect())},this.handleClose=()=>{this._open=!1},this.handleClickDisplaySelect=()=>{this._open?this.handleClose():(this._keyboardNavigating=!1,this.handleOpen())},this.handleKeydown=e=>{this._open?(this._keyboardNavigating=!0,f.SelectKeyboardController.handleKeydownWhenOpen(e,{commit:()=>this.commitSelection(),navigateNext:()=>this.advanceSelection(1),navigatePrev:()=>this.advanceSelection(-1),navigateFirst:()=>this.advanceToFirst(),navigateLast:()=>this.advanceToLast(),close:this.handleClose})):f.SelectKeyboardController.handleKeydownWhenClosed(e,{open:()=>{this._keyboardNavigating=!0,this.handleOpen()}})}}firstUpdated(){queueMicrotask(()=>this.initializeNativeSelect())}disconnectedCallback(){super.disconnectedCallback(),this.cleanup()}initializeNativeSelect(){var e,t;this.nativeSelect=(e=this.nativeSelects)==null?void 0:e[0],this.nativeLabel=(t=this.nativeLabels)==null?void 0:t[0],this.nativeSelect&&(this.syncNativeOptions(),this.setupNativeElementsAttributes(),this.setupEventListeners())}handleChangeForcedError(){var e;this.hasForcedError=((e=this.forcedError)==null?void 0:e.length)>0}setupNativeElementsAttributes(){this.nativeSelect.setAttribute(`aria-hidden`,`true`),this.nativeSelect.setAttribute(`tabindex`,`-1`)}setupEventListeners(){this.nativeSelect.addEventListener(`change`,this.syncNativeOptions),this.observer=new MutationObserver(this.handleMutations),this.observer.observe(this.nativeSelect,{childList:!0,subtree:!0,attributes:!0})}cleanup(){var e,t;(e=this.nativeSelect)==null||e.removeEventListener(`change`,this.syncNativeOptions),(t=this.observer)==null||t.disconnect()}findSelectedOptionIndex(){var e;let t=this.nativeOptions.findIndex(e=>e.value===this.nativeSelect.value);return(e=this.nativeOptions[t])!=null&&e.hidden?this.nativeOptions.findIndex(e=>!e.hidden):t}focusDisplaySelect(){this.updateComplete.then(()=>{var e;(e=this.displaySelect)==null||e.focus()})}advanceToFirst(){if(this.nativeOptions.length){let e=this.nativeOptions.findIndex(e=>!e.hidden);this.advanceSelection(e-this.keyboardFocusIndex)}}advanceToLast(){if(this.nativeOptions.length){let e=-1;for(let t=this.nativeOptions.length-1;t>=0;t--)if(!this.nativeOptions[t].hidden){e=t;break}this.advanceSelection(e-this.keyboardFocusIndex)}}advanceSelection(e){let t=this.nativeOptions.length;this.keyboardFocusIndex=(this.keyboardFocusIndex+e+t)%t,this.shouldSkipHiddenOption()?this.advanceSelection(Math.sign(e)):this.scrollToActive(this.nativeOptions[this.keyboardFocusIndex])}shouldSkipHiddenOption(){return this.nativeOptions.some(e=>!e.hidden)&&this.nativeOptions[this.keyboardFocusIndex].hidden}scrollToActive(e){var t;e==null||(t=e.scrollIntoView)==null||t.call(e,{block:`nearest`})}commitSelection(e=this.keyboardFocusIndex){this.handleClose();let t=this.nativeOptions[e];this.nativeSelect&&t!=null&&t.value&&this.updateNativeSelectValue(t.value)}updateNativeSelectValue(e){this.nativeSelect.value=e,[`input`,`change`].forEach(e=>this.nativeSelect.dispatchEvent(new Event(e,{bubbles:!0,composed:!0})))}get containerClasses(){var e,t,n;return{container:!0,open:this._open,disabled:!!((e=this.nativeSelect)!=null&&e.disabled),readonly:!!this.readonly,loading:!!this.loading,filled:!!((t=this.nativeOptions)!=null&&(t=t.find(e=>e.selected&&!e.hidden))!=null&&t.selected),invalid:!((n=this.nativeSelect)!=null&&n.validity.valid),error:this.hasForcedError,[this.size]:!!this.size,[this.mode]:!!this.mode,[this.variant]:!!this.variant}}set open(e){this._open=e}get open(){return this._open}render(){return e.html`
+require("../ds-theme-provider/themeContext.cjs");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"),i=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/query-assigned-elements.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");require("../ds-icon/ds-icon.cjs");const l=require("../../utils/uiKitHtml.cjs"),u=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 d=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-loader-spinner/ds-loader-spinner.cjs");const f=require("./controllers/SelectKeyboardController.cjs"),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");var v=class extends o.UiKitElement{constructor(...e){super(...e),this.mode=`light`,this.size=`large`,this.variant=`primary`,this.readonly=!1,this.loading=!1,this.loadingAriaLabel=`Loading`,this.iconName=void 0,this.dataAriaLabel=void 0,this._open=!1,this._keyboardNavigating=!1,this.nativeSelect=null,this.nativeLabel=null,this.nativeOptions=[],this.keyboardFocusIndex=-1,this.hasForcedError=!1,this.handleMutations=e=>{e.forEach(e=>{e.type===`childList`&&this.syncNativeOptions()}),this.requestUpdate()},this.syncNativeOptions=()=>{this.nativeOptions=Array.from(this.nativeSelect.options)},this.handleOpen=()=>{this.readonly||this.loading||(this._open=!0,this.keyboardFocusIndex=this.findSelectedOptionIndex(),this.focusDisplaySelect())},this.handleClose=()=>{this._open=!1},this.handleClickDisplaySelect=()=>{this._open?this.handleClose():(this._keyboardNavigating=!1,this.handleOpen())},this.handleKeydown=e=>{this._open?(this._keyboardNavigating=!0,f.SelectKeyboardController.handleKeydownWhenOpen(e,{commit:()=>this.commitSelection(),navigateNext:()=>this.advanceSelection(1),navigatePrev:()=>this.advanceSelection(-1),navigateFirst:()=>this.advanceToFirst(),navigateLast:()=>this.advanceToLast(),close:this.handleClose})):f.SelectKeyboardController.handleKeydownWhenClosed(e,{open:()=>{this._keyboardNavigating=!0,this.handleOpen()}})}}firstUpdated(){queueMicrotask(()=>this.initializeNativeSelect())}disconnectedCallback(){super.disconnectedCallback(),this.cleanup()}initializeNativeSelect(){var e,t;this.nativeSelect=(e=this.nativeSelects)==null?void 0:e[0],this.nativeLabel=(t=this.nativeLabels)==null?void 0:t[0],this.nativeSelect&&(this.syncNativeOptions(),this.setupNativeElementsAttributes(),this.setupEventListeners())}handleChangeForcedError(){var e;this.hasForcedError=((e=this.forcedError)==null?void 0:e.length)>0}setupNativeElementsAttributes(){this.nativeSelect.setAttribute(`aria-hidden`,`true`),this.nativeSelect.setAttribute(`tabindex`,`-1`)}setupEventListeners(){this.nativeSelect.addEventListener(`change`,this.syncNativeOptions),this.observer=new MutationObserver(this.handleMutations),this.observer.observe(this.nativeSelect,{childList:!0,subtree:!0,attributes:!0})}cleanup(){var e,t;(e=this.nativeSelect)==null||e.removeEventListener(`change`,this.syncNativeOptions),(t=this.observer)==null||t.disconnect()}findSelectedOptionIndex(){var e;let t=this.nativeOptions.findIndex(e=>e.value===this.nativeSelect.value);return(e=this.nativeOptions[t])!=null&&e.hidden?this.nativeOptions.findIndex(e=>!e.hidden):t}focusDisplaySelect(){this.updateComplete.then(()=>{var e;(e=this.displaySelect)==null||e.focus()})}advanceToFirst(){if(this.nativeOptions.length){let e=this.nativeOptions.findIndex(e=>!e.hidden);this.advanceSelection(e-this.keyboardFocusIndex)}}advanceToLast(){if(this.nativeOptions.length){let e=-1;for(let t=this.nativeOptions.length-1;t>=0;t--)if(!this.nativeOptions[t].hidden){e=t;break}this.advanceSelection(e-this.keyboardFocusIndex)}}advanceSelection(e){let t=this.nativeOptions.length;this.keyboardFocusIndex=(this.keyboardFocusIndex+e+t)%t,this.shouldSkipHiddenOption()?this.advanceSelection(Math.sign(e)):this.scrollToActive(this.nativeOptions[this.keyboardFocusIndex])}shouldSkipHiddenOption(){return this.nativeOptions.some(e=>!e.hidden)&&this.nativeOptions[this.keyboardFocusIndex].hidden}scrollToActive(e){var t;e==null||(t=e.scrollIntoView)==null||t.call(e,{block:`nearest`})}commitSelection(e=this.keyboardFocusIndex){this.handleClose();let t=this.nativeOptions[e];this.nativeSelect&&t!=null&&t.value&&this.updateNativeSelectValue(t.value)}updateNativeSelectValue(e){this.nativeSelect.value=e,[`input`,`change`].forEach(e=>this.nativeSelect.dispatchEvent(new Event(e,{bubbles:!0,composed:!0})))}get containerClasses(){var e,t,n;return{container:!0,open:this._open,disabled:!!((e=this.nativeSelect)!=null&&e.disabled),readonly:!!this.readonly,loading:!!this.loading,filled:!!((t=this.nativeOptions)!=null&&(t=t.find(e=>e.selected&&!e.hidden))!=null&&t.selected),invalid:!((n=this.nativeSelect)!=null&&n.validity.valid),error:this.hasForcedError,[this.size]:!!this.size,[this.mode]:!!this.mode,[this.variant]:!!this.variant}}set open(e){this._open=e}get open(){return this._open}render(){return e.html`
             <slot @slotchange=${this.initializeNativeSelect}></slot>
             <div class=${u.classMap(this.containerClasses)}>
                 ${this.displaySelectTemplate}

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

@@ -220,7 +220,8 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
         display: flex;
         width: 100%;
         box-sizing: border-box;
-        padding: var(--ds-spacing-s-5) var(--ds-spacing-s-5) var(--ds-spacing-s-5) var(--ds-spacing-m-2);
+        padding-block: var(--ds-spacing-s-5);
+        padding-inline: var(--ds-spacing-m-2) var(--ds-spacing-s-5);
         align-items: flex-start;
         gap: var(--ds-spacing-s-5);
         color: var(--ds-dropdown-select-list-text-color-input-default, #fafafa);
@@ -236,9 +237,10 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
             var(--ds-typography-family-primary);
     }
     :host([data-ui-kit-theme='cupra-diagonal']) .option.selected {
-        padding: var(--ds-spacing-s-5) var(--ds-spacing-s-5) var(--ds-spacing-s-5) calc(var(--ds-spacing-m-2) - 0.25rem);
+        padding-block: var(--ds-spacing-s-5);
+        padding-inline: calc(var(--ds-spacing-m-2) - 0.25rem) var(--ds-spacing-s-5);
         background: var(--ds-dropdown-select-list-bg-color-default, rgba(195, 195, 203, 0.05));
-        border-left: 4px solid var(--ds-color-surface-selected);
+        border-inline-start: 4px solid var(--ds-color-surface-selected);
         --ui-kit-icon-color: var(--ds-color-icon-selected, #b2764d);
     }
     :host([data-ui-kit-theme='cupra-diagonal']) .option:last-child {
@@ -253,10 +255,12 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
         background: var(--ds-dropdown-select-list-bg-color-hover, rgba(195, 195, 203, 0.1));
     }
     :host([data-ui-kit-theme='cupra-diagonal']) .primary.large .label {
-        padding: var(--ds-spacing-s-3, 4px) 0 0 var(--ds-spacing-m-2, 16px);
+        padding-block: var(--ds-spacing-s-3, 4px) 0;
+        padding-inline: var(--ds-spacing-m-2, 16px) 0;
     }
     :host([data-ui-kit-theme='cupra-diagonal']) .primary.medium .label {
-        padding: var(--ds-spacing-s-3, 4px) 0 0 var(--ds-spacing-m-1, 12px);
+        padding-block: var(--ds-spacing-s-3, 4px) 0;
+        padding-inline: var(--ds-spacing-m-1, 12px) 0;
         font: 350 var(--ds-typography-size-body-s, 12px) / var(--ds-typography-height-body-s, 16px)
             var(--ds-typography-family-primary);
     }
@@ -303,7 +307,7 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
     :host([data-ui-kit-theme='cupra-diagonal']) .large ::slotted([slot='helper-text']) {
         font: 350 var(--ds-typography-size-body-m) / var(--ds-typography-height-body-m)
             var(--ds-typography-family-primary);
-        padding-left: var(--ds-spacing-m-1, 12px);
+        padding-inline-start: var(--ds-spacing-m-1, 12px);
     }
     :host([data-ui-kit-theme='cupra-diagonal']) .medium ::slotted([slot='helper-text']) {
         font: 350 var(--ds-typography-size-body-s) / var(--ds-typography-height-body-s)
@@ -327,7 +331,7 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
     :host([data-ui-kit-theme='cupra-diagonal']) .large ::slotted([slot='readonly-text']) {
         font: 350 var(--ds-typography-size-body-m) / var(--ds-typography-height-body-m)
             var(--ds-typography-family-primary);
-        padding-left: var(--ds-spacing-m-1, 12px);
+        padding-inline-start: var(--ds-spacing-m-1, 12px);
     }
     :host([data-ui-kit-theme='cupra-diagonal']) .medium ::slotted([slot='readonly-text']) {
         font: 350 var(--ds-typography-size-body-s) / var(--ds-typography-height-body-s)
@@ -342,7 +346,7 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
     :host([data-ui-kit-theme='cupra-diagonal']) .large ::slotted([slot='forced-error']) {
         font: 350 var(--ds-typography-size-body-m) / var(--ds-typography-height-body-m)
             var(--ds-typography-family-primary);
-        padding-left: var(--ds-spacing-m-1, 12px);
+        padding-inline-start: var(--ds-spacing-m-1, 12px);
     }
     :host([data-ui-kit-theme='cupra-diagonal']) .medium ::slotted([slot='forced-error']) {
         font: 350 var(--ds-typography-size-body-s) / var(--ds-typography-height-body-s)
@@ -363,7 +367,7 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
     :host([data-ui-kit-theme='cupra-diagonal']) .large ::slotted([slot='invalid-error']) {
         font: 350 var(--ds-typography-size-body-m) / var(--ds-typography-height-body-m)
             var(--ds-typography-family-primary);
-        padding-left: var(--ds-spacing-m-1, 12px);
+        padding-inline-start: var(--ds-spacing-m-1, 12px);
     }
     :host([data-ui-kit-theme='cupra-diagonal']) .medium ::slotted([slot='invalid-error']) {
         font: 350 var(--ds-typography-size-body-s) / var(--ds-typography-height-body-s)

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

@@ -220,7 +220,8 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
         display: flex;
         width: 100%;
         box-sizing: border-box;
-        padding: var(--ds-spacing-s-5) var(--ds-spacing-s-5) var(--ds-spacing-s-5) var(--ds-spacing-m-2);
+        padding-block: var(--ds-spacing-s-5);
+        padding-inline: var(--ds-spacing-m-2) var(--ds-spacing-s-5);
         align-items: flex-start;
         gap: var(--ds-spacing-s-5);
         color: var(--ds-dropdown-select-list-text-color-input-default, #fafafa);
@@ -236,9 +237,10 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
             var(--ds-typography-family-primary);
     }
     :host([data-ui-kit-theme='seat']) .option.selected {
-        padding: var(--ds-spacing-s-5) var(--ds-spacing-s-5) var(--ds-spacing-s-5) calc(var(--ds-spacing-m-2) - 0.25rem);
+        padding-block: var(--ds-spacing-s-5);
+        padding-inline: calc(var(--ds-spacing-m-2) - 0.25rem) var(--ds-spacing-s-5);
         background: var(--ds-dropdown-select-list-bg-color-default, rgba(195, 195, 203, 0.05));
-        border-left: 4px solid var(--ds-color-surface-selected);
+        border-inline-start: 4px solid var(--ds-color-surface-selected);
     }
     :host([data-ui-kit-theme='seat']) .option:last-child {
         border-bottom: none;
@@ -250,10 +252,12 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
         background: var(--ds-dropdown-select-list-bg-color-hover, rgba(195, 195, 203, 0.1));
     }
     :host([data-ui-kit-theme='seat']) .primary.large .label {
-        padding: var(--ds-spacing-s-3, 4px) 0 0 var(--ds-spacing-m-2, 16px);
+        padding-block: var(--ds-spacing-s-3, 4px) 0;
+        padding-inline: var(--ds-spacing-m-2, 16px) 0;
     }
     :host([data-ui-kit-theme='seat']) .primary.medium .label {
-        padding: var(--ds-spacing-s-3, 4px) 0 0 var(--ds-spacing-m-1, 12px);
+        padding-block: var(--ds-spacing-s-3, 4px) 0;
+        padding-inline: var(--ds-spacing-m-1, 12px) 0;
         font: 350 var(--ds-typography-size-body-s, 12px) / var(--ds-typography-height-body-s, 16px)
             var(--ds-typography-family-primary);
     }
@@ -300,7 +304,7 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
     :host([data-ui-kit-theme='seat']) .large ::slotted([slot='helper-text']) {
         font: 350 var(--ds-typography-size-body-m) / var(--ds-typography-height-body-m)
             var(--ds-typography-family-primary);
-        padding-left: var(--ds-spacing-m-1, 12px);
+        padding-inline-start: var(--ds-spacing-m-1, 12px);
     }
     :host([data-ui-kit-theme='seat']) .medium ::slotted([slot='helper-text']) {
         font: 350 var(--ds-typography-size-body-s) / var(--ds-typography-height-body-s)
@@ -324,7 +328,7 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
     :host([data-ui-kit-theme='seat']) .large ::slotted([slot='readonly-text']) {
         font: 350 var(--ds-typography-size-body-m) / var(--ds-typography-height-body-m)
             var(--ds-typography-family-primary);
-        padding-left: var(--ds-spacing-m-1, 12px);
+        padding-inline-start: var(--ds-spacing-m-1, 12px);
     }
     :host([data-ui-kit-theme='seat']) .medium ::slotted([slot='readonly-text']) {
         font: 350 var(--ds-typography-size-body-s) / var(--ds-typography-height-body-s)
@@ -339,7 +343,7 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
     :host([data-ui-kit-theme='seat']) .large ::slotted([slot='forced-error']) {
         font: 350 var(--ds-typography-size-body-m) / var(--ds-typography-height-body-m)
             var(--ds-typography-family-primary);
-        padding-left: var(--ds-spacing-m-1, 12px);
+        padding-inline-start: var(--ds-spacing-m-1, 12px);
     }
     :host([data-ui-kit-theme='seat']) .medium ::slotted([slot='forced-error']) {
         font: 350 var(--ds-typography-size-body-s) / var(--ds-typography-height-body-s)
@@ -360,7 +364,7 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
     :host([data-ui-kit-theme='seat']) .large ::slotted([slot='invalid-error']) {
         font: 350 var(--ds-typography-size-body-m) / var(--ds-typography-height-body-m)
             var(--ds-typography-family-primary);
-        padding-left: var(--ds-spacing-m-1, 12px);
+        padding-inline-start: var(--ds-spacing-m-1, 12px);
     }
     :host([data-ui-kit-theme='seat']) .medium ::slotted([slot='invalid-error']) {
         font: 350 var(--ds-typography-size-body-s) / var(--ds-typography-height-body-s)

package/dist-react/cjs/components/ds-selection/ds-selection.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("../base/UiKitElement.cjs"),i=require("../../decorators/customUiKitElement.cjs");require("../ds-icon/ds-icon.cjs");const a=require("../../utils/booleanConverter.cjs"),o=require("../../utils/uiKitHtml.cjs"),s=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 c=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 l=require("./styles/common.styles.cjs"),u=require("./styles/cupra.styles.cjs");var d=class extends r.UiKitElement{get iconTemplate(){return o.uiKitHtml`<ds-icon class="icon" size="40" icon-name=${this.checked?`check`:`plus`}></ds-icon>`}get classes(){return{container:!0,checked:this.checked}}handleClick(){this.checked=!this.checked,this.dispatchEvent(new CustomEvent(`change`,{bubbles:!0,composed:!0,detail:{checked:this.checked}}))}render(){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("../base/UiKitElement.cjs"),i=require("../../decorators/customUiKitElement.cjs"),a=require("../../utils/booleanConverter.cjs");require("../ds-icon/ds-icon.cjs");const o=require("../../utils/uiKitHtml.cjs"),s=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 c=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 l=require("./styles/common.styles.cjs"),u=require("./styles/cupra.styles.cjs");var d=class extends r.UiKitElement{get iconTemplate(){return o.uiKitHtml`<ds-icon class="icon" size="40" icon-name=${this.checked?`check`:`plus`}></ds-icon>`}get classes(){return{container:!0,checked:this.checked}}handleClick(){this.checked=!this.checked,this.dispatchEvent(new CustomEvent(`change`,{bubbles:!0,composed:!0,detail:{checked:this.checked}}))}render(){return e.html`
             <span
                 data-testid="ds-selection-container"
                 class=${s.classMap(this.classes)}

package/dist-react/cjs/components/ds-sidebar-navigation/ds-sidebar-navigation.cjs

@@ -3,7 +3,7 @@ const e=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/l
             icon-name=${this.open?`cross`:`triple-dot-v`}
             @click=${this.toggleModal}
             data-testid="modal-button"
-            data-aria-label="more actions"
+            data-aria-label=${this.dataAriaLabelMoreActionsButton||`more actions`}
             variant="tertiary"
             size=${JSON.stringify({xxl:`large`,xl:`large`,l:`medium`,m:`medium`,s:`small`,xs:`small`,xxs:`small`})}
         ></ds-icon-button>`}classes(){return{container:!0,open:this.open}}render(){return e.html`
@@ -25,4 +25,4 @@ const e=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/l
                     <slot name="ctas" @slotchange=${this.handleCtasSlotChange}></slot>
                 </div>
             </div>
-        `}},h=(m.styles=[u.commonStyles,d.cupraDiagonalStyles,p.seatStyles,f.seatLegacyStyles],m);r.default([t.property({type:Boolean,converter:o.booleanConverter,reflect:!0})],h.prototype,`open`,void 0),r.default([n.queryAssignedElements({slot:`main-cta`,flatten:!0})],h.prototype,`mainCtas`,void 0),r.default([n.queryAssignedElements({slot:`ctas`,flatten:!0})],h.prototype,`ctasButtons`,void 0),h=r.default([a.customUiKitElement(`ds-sidebar-navigation`)],h),Object.defineProperty(exports,"DsSidebarNavigation",{enumerable:!0,get:function(){return h}});
+        `}},h=(m.styles=[u.commonStyles,d.cupraDiagonalStyles,p.seatStyles,f.seatLegacyStyles],m);r.default([t.property({type:String,attribute:`data-aria-label-more-actions-button`})],h.prototype,`dataAriaLabelMoreActionsButton`,void 0),r.default([t.property({type:Boolean,converter:o.booleanConverter,reflect:!0})],h.prototype,`open`,void 0),r.default([n.queryAssignedElements({slot:`main-cta`,flatten:!0})],h.prototype,`mainCtas`,void 0),r.default([n.queryAssignedElements({slot:`ctas`,flatten:!0})],h.prototype,`ctasButtons`,void 0),h=r.default([a.customUiKitElement(`ds-sidebar-navigation`)],h),Object.defineProperty(exports,"DsSidebarNavigation",{enumerable:!0,get:function(){return h}});

package/dist-react/cjs/components/ds-sidebar-navigation/styles/common.styles.cjs

@@ -9,7 +9,7 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
 
     .nav {
         position: absolute;
-        left: 0;
+        inset-inline-start: 0;
         bottom: 0;
         width: 100%;
         display: flex;

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

@@ -102,7 +102,7 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
         flex-direction: column;
         gap: var(--ds-spacing-layout-s, 16px);
         flex-shrink: 0;
-        left: 0;
+        inset-inline-start: 0;
         top: 0;
         z-index: var(--ds-z-index-modal);
     }

package/dist-react/cjs/components/ds-sidebar-navigation/styles/seat.styles.cjs

@@ -102,7 +102,7 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_mo
         flex-direction: column;
         gap: var(--ds-spacing-layout-s, 16px);
         flex-shrink: 0;
-        left: 0;
+        inset-inline-start: 0;
         top: 0;
         z-index: var(--ds-z-index-modal);
     }

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

@@ -1,20 +1,20 @@
-require("../ds-theme-provider/themeContext.cjs");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("../../mixins/ViewportMixin.cjs"),d=require("../../utils/objectConverter.cjs"),f=require("../../utils/formatNumber/formatNumber.cjs");require("../ds-text-input/ds-text-input.cjs");const p=require("./utils/roundToDecimals/roundToDecimals.cjs"),m=require("./utils/getStepValue/getStepValue.cjs"),h=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/live.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/live.cjs");const g=require("./styles/common.styles.cjs"),_=require("./styles/cupra-diagonal.styles.cjs"),v=require("./styles/cupra.styles.cjs"),y=require("./styles/seat-legacy.styles.cjs"),b=require("./styles/seat.styles.cjs");var x=class extends u.ViewportMixin(a.UiKitElement){constructor(...e){super(...e),this.variant=`primary`,this.min=0,this.max=100,this.minLabel=``,this.maxLabel=``,this.step=1,this.initialValueMin=0,this.mode=`light`,this.locale=void 0,this.localeMatcher=`lookup`,this.useGrouping=!0,this.minimumIntegerDigits=1,this.minimumFractionDigits=0,this.maximumFractionDigits=3,this.size=`medium`,this.disabled=!1,this.allowThumbOverlap=!1,this.keyboardMode=!1,this._initialValuesApplied=!1,this.getNewValue=e=>{let{width:t,left:n}=this.track.getBoundingClientRect(),r=this.thumbRadius,i=e.type.indexOf(`mouse`)===-1?e.touches[0].clientX:e.clientX,a=t-r*2,o=Math.min(Math.max(0,i-n-r),a),s=a>0?o*100/a:0;return this.min+s*(this.max-this.min)/100},this.setActiveThumb=e=>{let t=this.getNewValue(e);this.activeThumb=typeof this._valueMax!=`number`||t<=this._valueMin?`min`:t>=this._valueMax?`max`:t-this._valueMin<this._valueMax-t?`min`:`max`},this.handleMouseMove=e=>{this.animationFrameRequest&&cancelAnimationFrame(this.animationFrameRequest),this.animationFrameRequest=requestAnimationFrame(()=>{let t=this.getNewValue(e),n=this.activeThumb??`min`,{stepValue:r}=this.computeStep({proposedValue:t,role:n});this.handleChange({value:r,role:n})})},this.handleMouseDown=e=>{var t,n,r,i;this.disabled||(e==null||(t=e.preventDefault)==null||t.call(e),this.setActiveThumb(e),this.handleMouseMove(e),(n=window)==null||n.addEventListener(`mousemove`,this.handleMouseMove),(r=window)==null||r.addEventListener(`touchmove`,this.handleMouseMove),(i=window)==null||i.addEventListener(`pointerup`,this.handlePointerUp))},this.handlePointerUp=()=>{var e,t,n;(e=window)==null||e.removeEventListener(`mousemove`,this.handleMouseMove),(t=window)==null||t.removeEventListener(`touchmove`,this.handleMouseMove),(n=window)==null||n.removeEventListener(`pointerup`,this.handlePointerUp)},this.handleKeydown=()=>{this.keyboardMode=!0},this.handlePointerOrMouseDown=()=>{this.keyboardMode=!1},this.onInputFocus=(e,t)=>{let n=e.currentTarget,r=this.getRoleById(t);this.editingField=r,n.type=`number`,n.step=String(this.step??1);let i=r===`min`?this._valueMin:this._valueMax;n.value=String(i??``),this.keyboardMode&&n.classList.add(`focus-visible`)},this.commitInputValue=(e,t)=>{let n=e.currentTarget,r=this.getRoleById(t),{stepValue:i}=this.computeStep({proposedValue:Number(n.value),role:r}),a=p.roundToDecimals({value:i,fractionDigits:this.maximumFractionDigits});this.handleChange({value:a,role:r}),this.isControlled(r)||(n.value=String(a))},this.onInputBlur=e=>{var t;this.editingField=void 0;let n=e.currentTarget;n==null||(t=n.classList)==null||t.remove(`focus-visible`)},this.onInputKeyDown=(e,t)=>{e.key===`Enter`&&(e.preventDefault(),this.commitInputValue(e,t))},this.onThumbKeyDown=(e,t)=>{if(!this.disabled&&(e.key===`ArrowLeft`||e.key===`ArrowRight`)){e.preventDefault();let n=this.step??1,r=e.key===`ArrowLeft`?-n:n,i=this.getRoleById(t),a=i===`min`?this._valueMin:this._valueMax,{stepValue:o}=this.computeStep({proposedValue:a+r,role:i});this.handleChange({value:o,role:i})}}}get isRange(){return typeof this.initialValueMax==`number`||typeof this.valueMax==`number`}get sliderSizeToTextInputSize(){var e;return(typeof this.size==`string`?this.size:(e=this.size)==null?void 0:e[this.viewport])===`large`?`large`:`medium`}isControlled(e){return typeof(e===`min`?this.valueMin:this.valueMax)==`number`}getRoleById(e){return e===1?`min`:`max`}get currentValues(){return{1:this._valueMin,...typeof this._valueMax==`number`?{2:this._valueMax}:{}}}computeStep({proposedValue:e,role:t}){return m.getStepValue({step:this.step,min:this.min,max:this.max,proposedValue:e,role:t,currentValues:this.currentValues,allowOverlap:this.allowThumbOverlap})}willUpdate(e){super.willUpdate(e),typeof this.valueMin==`number`&&(this._valueMin=this.valueMin),typeof this.valueMax==`number`&&(this._valueMax=this.valueMax),this._initialValuesApplied||(this._initialValuesApplied=!0,this.applyInitialValues())}disconnectedCallback(){var e,t,n,r,i,a;super.disconnectedCallback(),(e=window)==null||e.removeEventListener(`mousemove`,this.handleMouseMove),(t=window)==null||t.removeEventListener(`touchmove`,this.handleMouseMove),(n=window)==null||n.removeEventListener(`pointerup`,this.handlePointerUp),(r=window)==null||r.removeEventListener(`keydown`,this.handleKeydown),(i=window)==null||i.removeEventListener(`mousedown`,this.handlePointerOrMouseDown),(a=window)==null||a.removeEventListener(`pointerdown`,this.handlePointerOrMouseDown)}firstUpdated(e){var t,n,r;super.firstUpdated(e),(t=window)==null||t.addEventListener(`keydown`,this.handleKeydown),(n=window)==null||n.addEventListener(`mousedown`,this.handlePointerOrMouseDown),(r=window)==null||r.addEventListener(`pointerdown`,this.handlePointerOrMouseDown)}applyInitialValues(){[`min`,`max`].forEach(e=>{if(this.isControlled(e))return;let t=e===`min`?`initialValueMin`:`initialValueMax`,n=this[t];if(typeof n!=`number`)return;let{stepValue:r}=this.computeStep({proposedValue:n,role:e}),i=e===`min`?`_valueMin`:`_valueMax`;this[i]!==r&&this.handleChange({value:r,role:e})})}getTrackPct(e){let t=this.max-this.min;return t===0?0:(e-this.min)/t*100}get thumbRadius(){var e;let t=(e=this.renderRoot)==null?void 0:e.querySelector(`.thumb`);return t?t.offsetWidth/2:0}trackPosition(e){let t=S.THUMB_RADIUS_CSS_VAR;return`calc(${t} + (100% - ${t} * 2) * ${e/100})`}trackWidth(e){return`calc((100% - ${S.THUMB_RADIUS_CSS_VAR} * 2) * ${e/100})`}handleChange({value:e,role:t}){let n=p.roundToDecimals({value:e,fractionDigits:this.maximumFractionDigits}),r=t===`min`?`_valueMin`:`_valueMax`;this[r]!==n&&(this.isControlled(t)||(this[r]=n),this.dispatchEvent(new CustomEvent(`change`,{bubbles:!0,composed:!0,detail:{role:t,value:n}})))}formatNumber(e){let t={value:e,locale:this.locale,...this.unitStyle&&{style:this.unitStyle},...this.currency&&{currency:this.currency},...this.unit&&{unit:this.unit},localeMatcher:this.localeMatcher,minimumIntegerDigits:this.minimumIntegerDigits,minimumFractionDigits:this.minimumFractionDigits,maximumFractionDigits:this.maximumFractionDigits,thousandSeparator:this.thousandSeparator,fractionSeparator:this.fractionSeparator,useGrouping:this.useGrouping};return f.formatNumber(t)}get rangeValuesTemplates(){let{formattedNumber:t,unitSymbol:n,unitSymbolPosition:r}=this.formatNumber(this.min),i=this.unitSymbol??n,a=this.unitSymbolPosition??r??(i?`right`:void 0),{formattedNumber:o}=this.formatNumber(this.max);return e.html`
+require("../ds-theme-provider/themeContext.cjs");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/getDirection/getDirection.cjs"),l=require("../../utils/uiKitHtml.cjs"),u=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 d=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 f=require("../../mixins/ViewportMixin.cjs"),p=require("../../utils/objectConverter.cjs"),m=require("../../utils/formatNumber/formatNumber.cjs");require("../ds-text-input/ds-text-input.cjs");const h=require("./utils/roundToDecimals/roundToDecimals.cjs"),g=require("./utils/getStepValue/getStepValue.cjs"),_=require("../../utils/normalizeDigits/normalizeDigits.cjs"),v=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/live.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/live.cjs");const y=require("./styles/common.styles.cjs"),b=require("./styles/cupra-diagonal.styles.cjs"),x=require("./styles/cupra.styles.cjs"),S=require("./styles/seat-legacy.styles.cjs"),C=require("./styles/seat.styles.cjs");var w=class extends f.ViewportMixin(a.UiKitElement){constructor(...e){super(...e),this.variant=`primary`,this.min=0,this.max=100,this.minLabel=``,this.maxLabel=``,this.step=1,this.initialValueMin=0,this.mode=`light`,this.locale=void 0,this.localeMatcher=`lookup`,this.useGrouping=!0,this.minimumIntegerDigits=1,this.minimumFractionDigits=0,this.maximumFractionDigits=3,this.size=`medium`,this.disabled=!1,this.allowThumbOverlap=!1,this.keyboardMode=!1,this._initialValuesApplied=!1,this.getNewValue=e=>{let{width:t,left:n}=this.track.getBoundingClientRect(),r=this.thumbRadius,i=e.type.indexOf(`mouse`)===-1?e.touches[0].clientX:e.clientX,a=t-r*2,o=Math.min(Math.max(0,i-n-r),a),s=a>0?o*100/a:0,l=c.getDirectionSign(this)===1?s:100-s;return this.min+l*(this.max-this.min)/100},this.setActiveThumb=e=>{let t=this.getNewValue(e);this.activeThumb=typeof this._valueMax!=`number`||t<=this._valueMin?`min`:t>=this._valueMax?`max`:t-this._valueMin<this._valueMax-t?`min`:`max`},this.handleMouseMove=e=>{this.animationFrameRequest&&cancelAnimationFrame(this.animationFrameRequest),this.animationFrameRequest=requestAnimationFrame(()=>{let t=this.getNewValue(e),n=this.activeThumb??`min`,{stepValue:r}=this.computeStep({proposedValue:t,role:n});this.handleChange({value:r,role:n})})},this.handleMouseDown=e=>{var t,n,r,i;this.disabled||(e==null||(t=e.preventDefault)==null||t.call(e),this.setActiveThumb(e),this.handleMouseMove(e),(n=window)==null||n.addEventListener(`mousemove`,this.handleMouseMove),(r=window)==null||r.addEventListener(`touchmove`,this.handleMouseMove),(i=window)==null||i.addEventListener(`pointerup`,this.handlePointerUp))},this.handlePointerUp=()=>{var e,t,n;(e=window)==null||e.removeEventListener(`mousemove`,this.handleMouseMove),(t=window)==null||t.removeEventListener(`touchmove`,this.handleMouseMove),(n=window)==null||n.removeEventListener(`pointerup`,this.handlePointerUp)},this.handleKeydown=()=>{this.keyboardMode=!0},this.handlePointerOrMouseDown=()=>{this.keyboardMode=!1},this.onInputFocus=(e,t)=>{let n=e.currentTarget,r=this.getRoleById(t);this.editingField=r,n.type=`number`,n.step=String(this.step??1);let i=r===`min`?this._valueMin:this._valueMax;n.value=String(i??``),this.keyboardMode&&n.classList.add(`focus-visible`)},this.commitInputValue=(e,t)=>{let n=e.currentTarget,r=this.getRoleById(t),i=_.normalizeDigits(n.value).trim(),a=Number(i);if(i===``||Number.isNaN(a)){let e=r===`min`?this._valueMin:this._valueMax;n.value=String(e??``);return}let{stepValue:o}=this.computeStep({proposedValue:a,role:r}),s=h.roundToDecimals({value:o,fractionDigits:this.maximumFractionDigits});this.handleChange({value:s,role:r}),this.isControlled(r)||(n.value=String(s))},this.onInputBlur=e=>{var t;this.editingField=void 0;let n=e.currentTarget;n==null||(t=n.classList)==null||t.remove(`focus-visible`)},this.onInputKeyDown=(e,t)=>{e.key===`Enter`&&(e.preventDefault(),this.commitInputValue(e,t))},this.onThumbKeyDown=(e,t)=>{if(this.disabled)return;let n=this.getRoleById(t),r=n===`min`?this._valueMin:this._valueMax,i=this.getProposedValueForKey({key:e.key,currentValue:r});if(i===null)return;e.preventDefault();let{stepValue:a}=this.computeStep({proposedValue:i,role:n});this.handleChange({value:a,role:n})}}get isRange(){return typeof this.initialValueMax==`number`||typeof this.valueMax==`number`}get sliderSizeToTextInputSize(){var e;return(typeof this.size==`string`?this.size:(e=this.size)==null?void 0:e[this.viewport])===`large`?`large`:`medium`}isControlled(e){return typeof(e===`min`?this.valueMin:this.valueMax)==`number`}getRoleById(e){return e===1?`min`:`max`}get currentValues(){return{1:this._valueMin,...typeof this._valueMax==`number`?{2:this._valueMax}:{}}}computeStep({proposedValue:e,role:t}){return g.getStepValue({step:this.step,min:this.min,max:this.max,proposedValue:e,role:t,currentValues:this.currentValues,allowOverlap:this.allowThumbOverlap})}willUpdate(e){super.willUpdate(e),typeof this.valueMin==`number`&&(this._valueMin=this.valueMin),typeof this.valueMax==`number`&&(this._valueMax=this.valueMax),this._initialValuesApplied||(this._initialValuesApplied=!0,this.applyInitialValues())}disconnectedCallback(){var e,t,n,r,i,a;super.disconnectedCallback(),(e=window)==null||e.removeEventListener(`mousemove`,this.handleMouseMove),(t=window)==null||t.removeEventListener(`touchmove`,this.handleMouseMove),(n=window)==null||n.removeEventListener(`pointerup`,this.handlePointerUp),(r=window)==null||r.removeEventListener(`keydown`,this.handleKeydown),(i=window)==null||i.removeEventListener(`mousedown`,this.handlePointerOrMouseDown),(a=window)==null||a.removeEventListener(`pointerdown`,this.handlePointerOrMouseDown)}firstUpdated(e){var t,n,r;super.firstUpdated(e),(t=window)==null||t.addEventListener(`keydown`,this.handleKeydown),(n=window)==null||n.addEventListener(`mousedown`,this.handlePointerOrMouseDown),(r=window)==null||r.addEventListener(`pointerdown`,this.handlePointerOrMouseDown)}applyInitialValues(){[`min`,`max`].forEach(e=>{if(this.isControlled(e))return;let t=e===`min`?`initialValueMin`:`initialValueMax`,n=this[t];if(typeof n!=`number`)return;let{stepValue:r}=this.computeStep({proposedValue:n,role:e}),i=e===`min`?`_valueMin`:`_valueMax`;this[i]!==r&&this.handleChange({value:r,role:e})})}getTrackPct(e){let t=this.max-this.min;return t===0?0:(e-this.min)/t*100}get thumbRadius(){var e;let t=(e=this.renderRoot)==null?void 0:e.querySelector(`.thumb`);return t?t.offsetWidth/2:0}trackPosition(e){let t=T.THUMB_RADIUS_CSS_VAR;return`calc(${t} + (100% - ${t} * 2) * ${e/100})`}trackWidth(e){return`calc((100% - ${T.THUMB_RADIUS_CSS_VAR} * 2) * ${e/100})`}handleChange({value:e,role:t}){let n=h.roundToDecimals({value:e,fractionDigits:this.maximumFractionDigits}),r=t===`min`?`_valueMin`:`_valueMax`;this[r]!==n&&(this.isControlled(t)||(this[r]=n),this.dispatchEvent(new CustomEvent(`change`,{bubbles:!0,composed:!0,detail:{role:t,value:n}})))}formatNumber(e){let t={value:e,locale:this.locale,...this.unitStyle&&{style:this.unitStyle},...this.currency&&{currency:this.currency},...this.unit&&{unit:this.unit},localeMatcher:this.localeMatcher,minimumIntegerDigits:this.minimumIntegerDigits,minimumFractionDigits:this.minimumFractionDigits,maximumFractionDigits:this.maximumFractionDigits,thousandSeparator:this.thousandSeparator,fractionSeparator:this.fractionSeparator,useGrouping:this.useGrouping};return m.formatNumber(t)}get rangeValuesTemplates(){let{formattedNumber:t,unitSymbol:n,unitSymbolPosition:r}=this.formatNumber(this.min),i=this.unitSymbol??n,a=this.isUnitSymbolFirst(r,`right`),{formattedNumber:o}=this.formatNumber(this.max);return e.html`
             <div class="range-value-text">
                 ${this.minLabel?e.html`<span class="range-value-label">${this.minLabel}</span>`:e.nothing}
-                ${a===`left`?e.html`<span>${i}</span>`:e.nothing}
-                <span>${t}</span>
-                ${a===`right`?e.html`<span>${i}</span>`:e.nothing}
+                ${i&&a?e.html`<span>${i}</span>`:e.nothing}
+                <span><bdi>${t}</bdi></span>
+                ${i&&!a?e.html`<span>${i}</span>`:e.nothing}
             </div>
             <div class="range-value-text">
                 ${this.maxLabel?e.html` <span class="range-value-label">${this.maxLabel}</span>`:e.nothing}
-                ${a===`left`?e.html`<span>${i}</span>`:e.nothing}
-                <span>${o}</span>
-                ${a===`right`?e.html`<span>${i}</span>`:e.nothing}
+                ${i&&a?e.html`<span>${i}</span>`:e.nothing}
+                <span><bdi>${o}</bdi></span>
+                ${i&&!a?e.html`<span>${i}</span>`:e.nothing}
             </div>
         `}getThumbTemplate(t){let n=this.getRoleById(t),r=n===`min`?this._valueMin:this._valueMax,{minLimit:i,maxLimit:a}=this.computeStep({proposedValue:r,role:n}),o=this.getTrackPct(r);return e.html`
             <style>
                 .thumb${t} {
-                    left: ${this.trackPosition(o)};
+                    inset-inline-start: ${this.trackPosition(o)};
                 }
             </style>
             <div
@@ -24,10 +24,11 @@ require("../ds-theme-provider/themeContext.cjs");const e=require("../../node_mod
                 role="slider"
                 tabindex=${this.disabled?-1:0}
                 aria-disabled=${String(!!this.disabled)}
-                aria-label=${t===1?`Minumum value`:`Maximum Value`}
+                aria-label=${(t===1?this.thumbMinAriaLabel:this.thumbMaxAriaLabel)??(t===1?`Minumum value`:`Maximum Value`)}
                 aria-valuemin=${i}
                 aria-valuemax=${a}
                 aria-valuenow=${r}
+                aria-valuetext=${this.getThumbValueText(r)}
             >
                 <svg
                     class="thumb-svg"
@@ -44,18 +45,19 @@ require("../ds-theme-provider/themeContext.cjs");const e=require("../../node_mod
         `}get trackRangeTemplate(){let t=this.getTrackPct(this._valueMin),n=this.isRange?this.trackPosition(t):`0px`,r=this.isRange?this.trackWidth(this.getTrackPct(this._valueMax)-t):this.trackPosition(t);return e.html`
             <style>
                 .track-range {
-                    left: ${n};
+                    inset-inline-start: ${n};
                     width: ${r};
                 }
             </style>
             <div class="track-range" role="presentation"></div>
-        `}getInputTemplate(e){let t=this.getRoleById(e),n=this.editingField===t,r=t===`min`?this._valueMin:this._valueMax,{formattedNumber:i,unitSymbol:a,unitSymbolPosition:o}=this.formatNumber(r),s=this.unitSymbolPosition??o,l=this.unitSymbol??a,u=l?s===`left`?`${l} ${i}`:`${i} ${l}`:`${i}`,d=n?`number`:`text`,f=n?String(r??``):u,p=e===1?this.inputMinAriaLabel:this.inputMaxAriaLabel,m=this.isRange?e===1?`Start value`:`End value`:`Value`,g=p??m;return c.uiKitHtml`
+        `}getProposedValueForKey({key:e,currentValue:t}){let n=this.step??1;switch(e){case`ArrowLeft`:return t-n*c.getDirectionSign(this);case`ArrowRight`:return t+n*c.getDirectionSign(this);case`Home`:return this.min;case`End`:return this.max;case`PageUp`:return t+n*T.PAGE_STEP_COUNT;case`PageDown`:return t-n*T.PAGE_STEP_COUNT;default:return null}}isUnitSymbolFirst(e,t){let n=c.getDirection(this)===`rtl`;return this.unitSymbolPosition===`start`?!0:this.unitSymbolPosition===`end`?!1:this.unitSymbolPosition===`left`?!n:this.unitSymbolPosition===`right`?n:(e??t)===`left`}getThumbValueText(e){let{formattedNumber:t,unitSymbol:n,unitSymbolPosition:r}=this.formatNumber(e),i=this.unitSymbol??n;return i?this.isUnitSymbolFirst(r,`right`)?`${i} ${t}`:`${t} ${i}`:t}getInputTemplate(e){let t=this.getRoleById(e),n=this.editingField===t,r=t===`min`?this._valueMin:this._valueMax,{formattedNumber:i,unitSymbol:a,unitSymbolPosition:o}=this.formatNumber(r),s=this.isUnitSymbolFirst(o,`right`),c=this.unitSymbol??a,u=c?s?`${c} ${i}`:`${i} ${c}`:`${i}`,f=n?`number`:`text`,p=n?String(r??``):u,m=e===1?this.inputMinAriaLabel:this.inputMaxAriaLabel,h=this.isRange?e===1?`Start value`:`End value`:`Value`,g=m??h;return l.uiKitHtml`
             <div class="input-wrapper">
                 <ds-text-input size=${this.sliderSizeToTextInputSize} hide-clear-button>
                     <input
                         class="input-value input-value-${e}"
-                        type=${d}
-                        .value=${h.live(f)}
+                        dir=${d.ifDefined(this.inputDir)}
+                        type=${f}
+                        .value=${v.live(p)}
                         step=${String(this.step??1)}
                         ?disabled=${this.disabled}
                         tabindex=${this.disabled?-1:0}
@@ -66,7 +68,7 @@ require("../ds-theme-provider/themeContext.cjs");const e=require("../../node_mod
                         @blur=${this.onInputBlur}
                         @change=${t=>this.commitInputValue(t,e)}
                         @keydown=${t=>this.onInputKeyDown(t,e)}
-                        title=${f}
+                        title=${p}
                     />
                 </ds-text-input>
             </div>
@@ -75,15 +77,16 @@ require("../ds-theme-provider/themeContext.cjs");const e=require("../../node_mod
                 ${this.getInputTemplate(1)}
                 ${this.isRange?this.getInputTemplate(2):e.nothing}
             </div>
-        `}getSecondaryInputTemplate(t){let n=this.getRoleById(t)===`min`?this._valueMin:this._valueMax,{unitSymbol:r,unitSymbolPosition:i}=this.formatNumber(n),a=this.unitSymbol??r,o=this.unitSymbolPosition??i??`right`,s=t===1?this.inputMinAriaLabel:this.inputMaxAriaLabel,l=this.isRange?t===1?`Start value`:`End value`:`Value`,u=s??l,d=a?e.html`<span class="secondary-unit-text">${a}</span>`:e.nothing;return c.uiKitHtml`
+        `}getSecondaryInputTemplate(t){let n=this.getRoleById(t)===`min`?this._valueMin:this._valueMax,{unitSymbol:r,unitSymbolPosition:i}=this.formatNumber(n),a=this.unitSymbol??r,o=this.isUnitSymbolFirst(i,`right`),s=t===1?this.inputMinAriaLabel:this.inputMaxAriaLabel,c=this.isRange?t===1?`Start value`:`End value`:`Value`,u=s??c,f=a?e.html`<span class="secondary-unit-text">${a}</span>`:e.nothing;return l.uiKitHtml`
             <div class="secondary-input-group">
-                ${o===`left`?d:e.nothing}
+                ${o?f:e.nothing}
                 <div class="secondary-input-wrapper">
                     <ds-text-input size="xlarge" hide-clear-button>
                         <input
                             class="secondary-input-value secondary-input-value-${t}"
+                            dir=${d.ifDefined(this.inputDir)}
                             type="number"
-                            .value=${h.live(String(n??``))}
+                            .value=${v.live(String(n??``))}
                             step=${String(this.step??1)}
                             ?disabled=${this.disabled}
                             tabindex=${this.disabled?-1:0}
@@ -96,7 +99,7 @@ require("../ds-theme-provider/themeContext.cjs");const e=require("../../node_mod
                         />
                     </ds-text-input>
                 </div>
-                ${o===`right`?d:e.nothing}
+                ${o?e.nothing:f}
             </div>
         `}get secondaryInputsTemplate(){return e.html`
             <div class="secondary-inputs-container">
@@ -111,7 +114,7 @@ require("../ds-theme-provider/themeContext.cjs");const e=require("../../node_mod
             </style>
         `}render(){let t=this.variant===`secondary`;return e.html`
             ${this.styleTokens}
-            <div class=${l.classMap(this.containerClasses)}>
+            <div class=${u.classMap(this.containerClasses)}>
                 ${t?this.secondaryInputsTemplate:e.nothing}
                 <div @touchstart=${this.handleMouseDown} @mousedown=${this.handleMouseDown} class="track" role="presentation">
                     ${this.thumbTemplates}
@@ -120,4 +123,4 @@ require("../ds-theme-provider/themeContext.cjs");const e=require("../../node_mod
                 <div class="range-value-container">${this.rangeValuesTemplates}</div>
                 ${t?e.nothing:this.inputsTemplate}
             </div>
-        `}},S=x,C=(x.styles=[g.commonStyles,g.trackStyles,g.thumbStyles,g.currentValueStyles,g.rangeValueStyles,g.inputResetStyles,_.cupraDiagonalStyles,b.seatStyles,v.cupraStyles,y.seatLegacyStyles],x.THUMB_RADIUS_CSS_VAR=`var(--ui-kit-private-slider-thumb-radius, 0px)`,x);i.default([t.property({type:String})],C.prototype,`variant`,void 0),i.default([t.property({type:Number})],C.prototype,`min`,void 0),i.default([t.property({type:Number})],C.prototype,`max`,void 0),i.default([t.property({type:String,attribute:`min-label`})],C.prototype,`minLabel`,void 0),i.default([t.property({type:String,attribute:`max-label`})],C.prototype,`maxLabel`,void 0),i.default([t.property({type:Number})],C.prototype,`step`,void 0),i.default([t.property({type:Number,attribute:`initial-value-min`})],C.prototype,`initialValueMin`,void 0),i.default([t.property({type:Number,attribute:`initial-value-max`})],C.prototype,`initialValueMax`,void 0),i.default([t.property({type:Number,attribute:`value-min`})],C.prototype,`valueMin`,void 0),i.default([t.property({type:Number,attribute:`value-max`})],C.prototype,`valueMax`,void 0),i.default([t.property({type:String,reflect:!0})],C.prototype,`mode`,void 0),i.default([t.property({type:String,attribute:`locale`})],C.prototype,`locale`,void 0),i.default([t.property({type:String,attribute:`locale-matcher`})],C.prototype,`localeMatcher`,void 0),i.default([t.property({type:String,attribute:`unit-symbol`})],C.prototype,`unitSymbol`,void 0),i.default([t.property({type:String,attribute:`unit-symbol-position`})],C.prototype,`unitSymbolPosition`,void 0),i.default([t.property({type:String,attribute:`unit-style`})],C.prototype,`unitStyle`,void 0),i.default([t.property({type:String,attribute:`currency`})],C.prototype,`currency`,void 0),i.default([t.property({type:String,attribute:`unit`})],C.prototype,`unit`,void 0),i.default([t.property({type:String,attribute:`use-grouping`,converter:e=>e===`auto`?`auto`:typeof e==`boolean`?e:e===`true`||e===``||e!==`false`})],C.prototype,`useGrouping`,void 0),i.default([t.property({type:Number,attribute:`minimum-integer-digits`})],C.prototype,`minimumIntegerDigits`,void 0),i.default([t.property({type:Number,attribute:`minimum-fraction-digits`})],C.prototype,`minimumFractionDigits`,void 0),i.default([t.property({type:Number,attribute:`maximum-fraction-digits`})],C.prototype,`maximumFractionDigits`,void 0),i.default([t.property({type:String,attribute:`thousand-separator`})],C.prototype,`thousandSeparator`,void 0),i.default([t.property({type:String,attribute:`fraction-separator`})],C.prototype,`fractionSeparator`,void 0),i.default([t.property({type:String,converter:d.objectConverter})],C.prototype,`size`,void 0),i.default([t.property({type:Boolean,converter:s.booleanConverter})],C.prototype,`disabled`,void 0),i.default([t.property({type:String,attribute:`input-min-aria-label`})],C.prototype,`inputMinAriaLabel`,void 0),i.default([t.property({type:String,attribute:`input-max-aria-label`})],C.prototype,`inputMaxAriaLabel`,void 0),i.default([t.property({type:Boolean,attribute:`allow-thumb-overlap`,converter:s.booleanConverter})],C.prototype,`allowThumbOverlap`,void 0),i.default([r.query(`.track`)],C.prototype,`track`,void 0),i.default([n.state()],C.prototype,`_valueMin`,void 0),i.default([n.state()],C.prototype,`_valueMax`,void 0),i.default([n.state()],C.prototype,`editingField`,void 0),C=S=i.default([o.customUiKitElement(`ds-slider`)],C),Object.defineProperty(exports,"DsSlider",{enumerable:!0,get:function(){return C}});
+        `}},T=w,E=(w.styles=[y.commonStyles,y.trackStyles,y.thumbStyles,y.currentValueStyles,y.rangeValueStyles,y.inputResetStyles,b.cupraDiagonalStyles,C.seatStyles,x.cupraStyles,S.seatLegacyStyles],w.PAGE_STEP_COUNT=10,w.THUMB_RADIUS_CSS_VAR=`var(--ui-kit-private-slider-thumb-radius, 0px)`,w);i.default([t.property({type:String})],E.prototype,`variant`,void 0),i.default([t.property({type:Number})],E.prototype,`min`,void 0),i.default([t.property({type:Number})],E.prototype,`max`,void 0),i.default([t.property({type:String,attribute:`min-label`})],E.prototype,`minLabel`,void 0),i.default([t.property({type:String,attribute:`max-label`})],E.prototype,`maxLabel`,void 0),i.default([t.property({type:Number})],E.prototype,`step`,void 0),i.default([t.property({type:Number,attribute:`initial-value-min`})],E.prototype,`initialValueMin`,void 0),i.default([t.property({type:Number,attribute:`initial-value-max`})],E.prototype,`initialValueMax`,void 0),i.default([t.property({type:Number,attribute:`value-min`})],E.prototype,`valueMin`,void 0),i.default([t.property({type:Number,attribute:`value-max`})],E.prototype,`valueMax`,void 0),i.default([t.property({type:String,reflect:!0})],E.prototype,`mode`,void 0),i.default([t.property({type:String,attribute:`locale`})],E.prototype,`locale`,void 0),i.default([t.property({type:String,attribute:`locale-matcher`})],E.prototype,`localeMatcher`,void 0),i.default([t.property({type:String,attribute:`unit-symbol`})],E.prototype,`unitSymbol`,void 0),i.default([t.property({type:String,attribute:`input-dir`})],E.prototype,`inputDir`,void 0),i.default([t.property({type:String,attribute:`unit-symbol-position`})],E.prototype,`unitSymbolPosition`,void 0),i.default([t.property({type:String,attribute:`unit-style`})],E.prototype,`unitStyle`,void 0),i.default([t.property({type:String,attribute:`currency`})],E.prototype,`currency`,void 0),i.default([t.property({type:String,attribute:`unit`})],E.prototype,`unit`,void 0),i.default([t.property({type:String,attribute:`use-grouping`,converter:e=>e===`auto`?`auto`:typeof e==`boolean`?e:e===`true`||e===``||e!==`false`})],E.prototype,`useGrouping`,void 0),i.default([t.property({type:Number,attribute:`minimum-integer-digits`})],E.prototype,`minimumIntegerDigits`,void 0),i.default([t.property({type:Number,attribute:`minimum-fraction-digits`})],E.prototype,`minimumFractionDigits`,void 0),i.default([t.property({type:Number,attribute:`maximum-fraction-digits`})],E.prototype,`maximumFractionDigits`,void 0),i.default([t.property({type:String,attribute:`thousand-separator`})],E.prototype,`thousandSeparator`,void 0),i.default([t.property({type:String,attribute:`fraction-separator`})],E.prototype,`fractionSeparator`,void 0),i.default([t.property({type:String,converter:p.objectConverter})],E.prototype,`size`,void 0),i.default([t.property({type:Boolean,converter:s.booleanConverter})],E.prototype,`disabled`,void 0),i.default([t.property({type:String,attribute:`thumb-min-aria-label`})],E.prototype,`thumbMinAriaLabel`,void 0),i.default([t.property({type:String,attribute:`thumb-max-aria-label`})],E.prototype,`thumbMaxAriaLabel`,void 0),i.default([t.property({type:String,attribute:`input-min-aria-label`})],E.prototype,`inputMinAriaLabel`,void 0),i.default([t.property({type:String,attribute:`input-max-aria-label`})],E.prototype,`inputMaxAriaLabel`,void 0),i.default([t.property({type:Boolean,attribute:`allow-thumb-overlap`,converter:s.booleanConverter})],E.prototype,`allowThumbOverlap`,void 0),i.default([r.query(`.track`)],E.prototype,`track`,void 0),i.default([n.state()],E.prototype,`_valueMin`,void 0),i.default([n.state()],E.prototype,`_valueMax`,void 0),i.default([n.state()],E.prototype,`editingField`,void 0),E=T=i.default([o.customUiKitElement(`ds-slider`)],E),Object.defineProperty(exports,"DsSlider",{enumerable:!0,get:function(){return E}});