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

package/dist-react/esm/components/ds-select/ds-select.js

@@ -9,8 +9,8 @@ import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.js";
 import o from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
 import { UiKitElement as s } from "../base/UiKitElement.js";
 import { customUiKitElement as c } from "../../decorators/customUiKitElement.js";
-import "../ds-icon/ds-icon.js";
 import { booleanConverter as l } from "../../utils/booleanConverter.js";
+import "../ds-icon/ds-icon.js";
 import { uiKitHtml as u } from "../../utils/uiKitHtml.js";
 import { classMap as d } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/class-map.js";
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/class-map.js";

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

@@ -223,7 +223,8 @@ var t = e`
         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);
@@ -239,9 +240,10 @@ var t = e`
             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 {
@@ -256,10 +258,12 @@ var t = e`
         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);
     }
@@ -306,7 +310,7 @@ var t = e`
     :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)
@@ -330,7 +334,7 @@ var t = e`
     :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)
@@ -345,7 +349,7 @@ var t = e`
     :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)
@@ -366,7 +370,7 @@ var t = e`
     :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/esm/components/ds-select/styles/seat.styles.js

@@ -223,7 +223,8 @@ var t = e`
         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);
@@ -239,9 +240,10 @@ var t = e`
             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;
@@ -253,10 +255,12 @@ var t = e`
         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);
     }
@@ -303,7 +307,7 @@ var t = e`
     :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)
@@ -327,7 +331,7 @@ var t = e`
     :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)
@@ -342,7 +346,7 @@ var t = e`
     :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)
@@ -363,7 +367,7 @@ var t = e`
     :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/esm/components/ds-selection/ds-selection.js

@@ -5,8 +5,8 @@ import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.js";
 import n from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
 import { UiKitElement as r } from "../base/UiKitElement.js";
 import { customUiKitElement as i } from "../../decorators/customUiKitElement.js";
-import "../ds-icon/ds-icon.js";
 import { booleanConverter as a } from "../../utils/booleanConverter.js";
+import "../ds-icon/ds-icon.js";
 import { uiKitHtml as o } from "../../utils/uiKitHtml.js";
 import { classMap as s } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/class-map.js";
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/class-map.js";

package/dist-react/esm/components/ds-sidebar-navigation/ds-sidebar-navigation.js

@@ -66,7 +66,7 @@ var m = class extends i {
             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",
@@ -114,6 +114,9 @@ var m = class extends i {
 	f
 ], m);
 r([t({
+	type: String,
+	attribute: "data-aria-label-more-actions-button"
+})], h.prototype, "dataAriaLabelMoreActionsButton", void 0), r([t({
 	type: Boolean,
 	converter: o,
 	reflect: !0

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

@@ -12,7 +12,7 @@ var t = e`
 
     .nav {
         position: absolute;
-        left: 0;
+        inset-inline-start: 0;
         bottom: 0;
         width: 100%;
         display: flex;

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

@@ -105,7 +105,7 @@ var t = e`
         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/esm/components/ds-sidebar-navigation/styles/seat.styles.js

@@ -105,7 +105,7 @@ var t = e`
         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);
     }