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

package/dist/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/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/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/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/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/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/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/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/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}});

package/dist/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/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/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/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/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/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/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 {