@cupra/ui-kit 2.0.0-canary.180 → 2.0.0-canary.182

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

@@ -13,4 +13,27 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_mo
         gap: var(--ui-kit-private-navigation-controls-section-gap, 12px);
         align-items: center;
     }
+
+    .container {
+        padding: var(--ds-spacing-s-5);
+        border-radius: var(--ds-border-radius-s);
+        border: var(--ds-border-width-m) solid var(--ds-color-border-default);
+        background: var(--ds-color-border-default);
+        backdrop-filter: blur(var(--ds-blur-level-03));
+        -webkit-backdrop-filter: blur(var(--ds-blur-level-03));
+    }
+
+    ::slotted(*:not(:first-child)) {
+        padding-inline-start: calc(var(--ds-spacing-m-3) + var(--ds-border-width-m));
+        background-image: linear-gradient(var(--ds-color-border-default), var(--ds-color-border-default));
+        background-size: var(--ds-border-width-m) 24px;
+        background-repeat: no-repeat;
+        background-position: calc(var(--ds-spacing-m-3) / 2) center;
+    }
+
+    @media (max-width: 1439px) {
+        :host {
+            --ui-kit-private-navigation-controls-section-gap: var(--ds-spacing-s-4);
+        }
+    }
 `;exports.commonStyles=t;

package/dist-react/cjs/components/ds-password-input/ds-password-input.cjs

@@ -1,4 +1,4 @@
-const e=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),t=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs");require("../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.cjs");const n=require("../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.cjs"),r=require("../../decorators/customUiKitElement.cjs"),i=require("../../utils/uiKitHtml.cjs"),a=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/if-defined.cjs");require("../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/if-defined.cjs"),require("../ds-icon-button/ds-icon-button.cjs");const o=require("../ds-text-input/ds-text-input.cjs");var s=class extends o.DsTextInput{constructor(...e){super(...e),this.dataAriaLabelHideButton=``,this.dataAriaLabelShowButton=``,this.visible=!1,this.handleClickIcon=()=>{this.visible?(this.nativeInput.setAttribute(`type`,`password`),this.visible=!1):(this.nativeInput.setAttribute(`type`,`text`),this.visible=!0)}}get iconTemplate(){var e;return i.uiKitHtml`<ds-icon-button
+const e=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),t=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs");require("../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.cjs");const n=require("../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.cjs"),r=require("../../decorators/customUiKitElement.cjs"),i=require("../../utils/uiKitHtml.cjs"),a=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/if-defined.cjs");require("../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/if-defined.cjs"),require("../ds-icon-button/ds-icon-button.cjs");const o=require("../ds-text-input/ds-text-input.cjs"),s=require("./styles/common.styles.cjs");var c,l=(c=class extends o.DsTextInput{constructor(...e){super(...e),this.dataAriaLabelHideButton=``,this.dataAriaLabelShowButton=``,this.visible=!1,this.handleClickIcon=()=>{this.visible?(this.nativeInput.setAttribute(`type`,`password`),this.visible=!1):(this.nativeInput.setAttribute(`type`,`text`),this.visible=!0)}}get iconTemplate(){var e;return i.uiKitHtml`<ds-icon-button
             class="icon-button"
             icon-name=${this.visible?`eye`:`eye-crossed-out`}
             ?disabled=${!!((e=this.nativeInput)!=null&&e.disabled)}
@@ -7,4 +7,4 @@ const e=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modul
             @click=${this.handleClickIcon}
             data-aria-label=${this.visible?this.dataAriaLabelHideButton||`hide`:this.dataAriaLabelShowButton||`show`}
             data-aria-pressed=${String(this.visible)}
-        ></ds-icon-button>`}};n.__decorate([e.n({type:String,attribute:`data-aria-label-hide-button`})],s.prototype,`dataAriaLabelHideButton`,void 0),n.__decorate([e.n({type:String,attribute:`data-aria-label-show-button`})],s.prototype,`dataAriaLabelShowButton`,void 0),n.__decorate([t.r()],s.prototype,`visible`,void 0),s=n.__decorate([r.customUiKitElement(`ds-password-input`,{extendComponentNames:[`ds-text-input`]})],s);
+        ></ds-icon-button>`}},c.styles=[...o.DsTextInput.styles,s.commonStyles],c);n.__decorate([e.n({type:String,attribute:`data-aria-label-hide-button`})],l.prototype,`dataAriaLabelHideButton`,void 0),n.__decorate([e.n({type:String,attribute:`data-aria-label-show-button`})],l.prototype,`dataAriaLabelShowButton`,void 0),n.__decorate([t.r()],l.prototype,`visible`,void 0),l=n.__decorate([r.customUiKitElement(`ds-password-input`,{extendComponentNames:[`ds-text-input`]})],l);

package/dist-react/cjs/components/ds-password-input/styles/common.styles.cjs

@@ -0,0 +1,8 @@
+const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs");require("../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs");var t=e.i`
+    ::slotted(input[type='password']) {
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        display: flex;
+    }
+`;exports.commonStyles=t;

package/dist-react/cjs/components/ds-picker-item/styles/common.styles.cjs

@@ -2,4 +2,179 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_mo
     :host {
         display: contents;
     }
+
+    .container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        box-sizing: border-box;
+        cursor: pointer;
+        position: relative;
+        background: transparent;
+        border: none;
+        padding: 0;
+    }
+
+    .container.x-small {
+        width: 40px;
+        height: 40px;
+        border-radius: var(--ds-border-radius-xs);
+    }
+
+    .container.small {
+        width: 48px;
+        height: 48px;
+        border-radius: var(--ds-border-radius-s);
+    }
+
+    .container.medium {
+        width: 80px;
+        height: 80px;
+        border-radius: var(--ds-border-radius-l);
+    }
+
+    .container.large {
+        width: 104px;
+        height: 104px;
+        border-radius: var(--ds-border-radius-l);
+    }
+
+    .container::before {
+        content: '';
+        position: absolute;
+        z-index: -1;
+        pointer-events: none;
+        transition: var(--ui-kit-picker-item-transition);
+    }
+
+    .container.x-small::before {
+        inset: -4px;
+        border-radius: var(--ds-border-radius-s);
+    }
+
+    .container.small::before {
+        inset: -4px;
+        border-radius: var(--ds-border-radius-m);
+    }
+
+    .container.medium::before {
+        inset: -4px;
+        border-radius: var(--ds-border-radius-xl);
+    }
+
+    .container.large::before {
+        inset: -7px;
+        border-radius: var(--ds-border-radius-xl);
+    }
+
+    .container:hover::before {
+        background: var(--ds-color-control-bg-hover);
+    }
+
+    .container.selected::before {
+        border: var(--ds-border-width-m) solid var(--ds-color-border-selected-subtle);
+        background: var(--ds-color-control-bg-pressed);
+    }
+
+    .container.selected {
+        cursor: auto;
+    }
+
+    .container.loading {
+        cursor: auto;
+    }
+
+    .image-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+        box-sizing: border-box;
+    }
+
+    .container.x-small .image-container {
+        width: 40px;
+        height: 40px;
+        border-radius: var(--ds-border-radius-xs);
+    }
+
+    .container.small .image-container {
+        width: 48px;
+        height: 48px;
+        border-radius: var(--ds-border-radius-s);
+    }
+
+    .container.medium .image-container {
+        width: 80px;
+        height: 80px;
+        border-radius: var(--ds-border-radius-l);
+    }
+
+    .container.large .image-container {
+        width: 104px;
+        height: 104px;
+        border-radius: var(--ds-border-radius-l);
+    }
+
+    .image-container.with-border {
+        outline: var(--ds-border-width-m) solid var(--ds-color-border-default);
+        outline-offset: -1px;
+    }
+
+    .image-container.without-border {
+        outline: none;
+    }
+
+    ::slotted(img) {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        display: block;
+        overflow-clip-margin: unset;
+        overflow: visible;
+    }
+
+    .overlay {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(0deg, var(--ds-color-bg-overlay) 0%, var(--ds-color-bg-overlay) 100%);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: inherit;
+        pointer-events: none;
+    }
+
+    .spinner {
+        animation: spin 1s linear infinite;
+    }
+
+    .container.x-small .spinner {
+        width: 24px;
+        height: 24px;
+    }
+
+    .container.small .spinner {
+        width: 24px;
+        height: 24px;
+    }
+
+    .container.medium .spinner {
+        width: 40px;
+        height: 40px;
+    }
+
+    .container.large .spinner {
+        width: 40px;
+        height: 40px;
+    }
+
+    @keyframes spin {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
 `;exports.pickerItemStyles=t;

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

@@ -41,4 +41,182 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_mo
     ::slotted([slot='label']) {
         cursor: pointer;
     }
+
+    .container {
+        display: flex;
+        gap: var(--ds-spacing-s-5);
+        padding: var(--ds-spacing-s-2) var(--ds-spacing-s-5);
+    }
+    .container.right {
+        flex-direction: row-reverse;
+        justify-content: space-between;
+    }
+    .container:not(.disabled):active {
+        background-color: var(--ds-radio-button-bg-color-pressed);
+        border-radius: var(--ds-border-radius-xs);
+    }
+    .text-container {
+        display: flex;
+        pointer-events: none;
+        flex-direction: column;
+        flex: 1 1 auto;
+        align-items: flex-start;
+        gap: var(--ds-spacing-s-3);
+    }
+    .large .text-container {
+        margin: var(--ds-spacing-s-3) 0 0 0;
+    }
+    .medium .text-container {
+        margin: var(--ds-spacing-s-2) 0 0 0;
+    }
+    .input-container {
+        pointer-events: none;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        padding: var(--ds-spacing-s-1);
+        gap: var(--ds-spacing-s-1);
+        flex-shrink: 0;
+    }
+    .large .input-container {
+        width: var(--ds-sizing-32);
+        height: var(--ds-sizing-32);
+    }
+    .medium .input-container {
+        width: var(--ds-sizing-24);
+        height: var(--ds-sizing-24);
+    }
+    ::slotted([slot='input']) {
+        position: relative;
+        display: flex;
+        outline: none;
+        padding: var(--ds-spacing-s-1);
+        justify-content: center;
+        align-items: center;
+        gap: var(--ds-spacing-s-1);
+        flex-shrink: 0;
+        border-radius: var(--ds-border-radius-full);
+        border: var(--ds-border-width-m) solid var(--ds-radio-button-border-color-default);
+    }
+    .large ::slotted([slot='input']) {
+        width: var(--ds-sizing-24);
+        height: var(--ds-sizing-24);
+    }
+    .medium ::slotted([slot='input']) {
+        width: var(--ds-sizing-16);
+        height: var(--ds-sizing-16);
+    }
+    ::slotted([slot='input']:checked) {
+        border: var(--ds-border-width-m) solid var(--ds-radio-button-border-color-selected);
+    }
+
+    .error ::slotted([slot='input']) {
+        border: var(--ds-border-width-m) solid var(--ds-radio-button-border-color-error);
+    }
+    .disabled ::slotted([slot='input']) {
+        border: var(--ds-border-width-m) solid var(--ds-radio-button-border-color-disabled);
+    }
+    :not(.disabled):not(.error):active ::slotted([slot='input']) {
+        border-color: var(--ds-radio-button-border-color-pressed);
+    }
+    ::slotted([slot='input'])::before {
+        content: '';
+        position: absolute;
+        z-index: -1;
+        border-radius: var(--ds-border-radius-full);
+        background-color: transparent;
+        outline-style: solid;
+        outline-offset: 0;
+        outline-color: transparent;
+    }
+    .large ::slotted([slot='input'])::before {
+        width: var(--ds-sizing-32);
+        height: var(--ds-sizing-32);
+    }
+    .medium ::slotted([slot='input'])::before {
+        width: var(--ds-sizing-24);
+        height: var(--ds-sizing-24);
+    }
+    :hover ::slotted([slot='input'])::before {
+        background-color: var(--ds-radio-button-bg-color-hover);
+    }
+    ::slotted([slot='input']:focus-visible)::before {
+        background-color: var(--ds-radio-button-bg-color-focus);
+        outline-color: var(--ds-color-border-focus-ring);
+        outline-width: 2px;
+    }
+    :active ::slotted([slot='input'])::before {
+        background-color: transparent;
+    }
+    .large ::slotted([slot='input'])::after {
+        width: var(--ds-sizing-12);
+        height: var(--ds-sizing-12);
+    }
+    .medium ::slotted([slot='input'])::after {
+        width: var(--ds-sizing-08);
+        height: var(--ds-sizing-08);
+    }
+    ::slotted([slot='input']:checked)::after {
+        background-color: var(--ds-radio-button-bg-color-selected);
+    }
+    .error ::slotted([slot='input'])::after {
+        background-color: var(--ds-radio-button-bg-color-error);
+    }
+    ::slotted([slot='input']:disabled)::after {
+        background-color: var(--ds-radio-button-bg-color-disabled);
+    }
+    ::slotted([slot='label']) {
+        display: flex;
+        width: 100%;
+        align-items: center;
+        justify-content: space-between;
+        gap: 10px;
+        color: var(--ds-radio-button-text-color-label-default);
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+    }
+    .large ::slotted([slot='label']) {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font: 400 var(--ds-typography-size-body-l) / var(--ds-typography-height-body-l)
+            var(--ds-typography-family-primary);
+    }
+    .disabled ::slotted([slot='label']) {
+        color: var(--ds-radio-button-text-color-label-disabled);
+    }
+    .medium ::slotted([slot='label']) {
+        font: 400 var(--ds-typography-size-body-m) / var(--ds-typography-height-body-m)
+            var(--ds-typography-family-primary);
+    }
+    .helper-text {
+        overflow: hidden;
+        color: var(--ds-radio-button-text-color-caption-default);
+        text-overflow: ellipsis;
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+    }
+    .medium .helper-text {
+        font: 400 var(--ds-typography-size-body-s) / var(--ds-typography-height-body-s)
+            var(--ds-typography-family-primary);
+    }
+    .large .helper-text {
+        font: 350 var(--ds-typography-size-body-m) / var(--ds-typography-height-body-m)
+            var(--ds-typography-family-primary);
+    }
+    .error-text {
+        overflow: hidden;
+        color: var(--ds-radio-button-text-color-caption-error);
+        text-overflow: ellipsis;
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+    }
+    .disabled .error-text,
+    .disabled .helper-text {
+        color: var(--ds-radio-button-text-color-caption-disabled);
+    }
+    .medium .error-text {
+        font: 400 var(--ds-typography-size-body-s) / var(--ds-typography-height-body-s)
+            var(--ds-typography-family-primary);
+    }
+    .large .error-text {
+        font: 350 var(--ds-typography-size-body-m) / var(--ds-typography-height-body-m)
+            var(--ds-typography-family-primary);
+    }
 `;exports.commonStyles=t;

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

@@ -15,4 +15,91 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_mo
         display: inline-flex;
         vertical-align: top;
     }
+
+    :host {
+        display: contents;
+    }
+
+    .container {
+        display: flex;
+        padding: var(--ds-spacing-s-1);
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--ds-spacing-s-5);
+        align-self: stretch;
+    }
+
+    .container ::slotted([slot='title']) {
+        color: var(--ds-color-text-default);
+        font-family: var(--ds-typography-family-primary);
+        font-style: normal;
+        font-weight: 400;
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+        text-transform: uppercase;
+    }
+
+    .container.large ::slotted([slot='title']) {
+        font-size: var(--ds-typography-size-headline-xxs);
+        line-height: var(--ds-typography-height-headline-xxs);
+    }
+    .container.medium ::slotted([slot='title']) {
+        font-size: var(--ds-typography-size-headline-xxs);
+        line-height: var(--ds-typography-height-headline-xxs);
+    }
+
+    .container ::slotted([slot='description']) {
+        color: var(--ds-color-text-default-subtle);
+        font-family: var(--ds-typography-family-primary);
+        font-style: normal;
+        font-weight: 400;
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+    }
+
+    .container.large ::slotted([slot='description']) {
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-m);
+    }
+    .container.medium ::slotted([slot='description']) {
+        font-size: var(--ds-typography-size-body-s);
+        line-height: var(--ds-typography-height-body-s);
+    }
+
+    .radio-buttons-container {
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+    }
+    .horizontal .radio-buttons-container {
+        display: flex;
+        gap: var(--ds-spacing-m-4);
+    }
+    .vertical .radio-buttons-container {
+        flex-direction: column;
+        gap: var(--ds-spacing-s-5);
+    }
+
+    .error-text {
+        color: var(--ds-color-text-feedback-error);
+        font-family: var(--ds-typography-family-primary);
+        font-size: var(--ds-typography-size-body-m);
+        font-style: normal;
+        font-weight: 400;
+        line-height: var(--ds-typography-height-body-m);
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+    }
+
+    .container .helper-text {
+        color: var(--ds-color-text-default-subtle);
+        font-family: var(--ds-typography-family-primary);
+        font-size: var(--ds-typography-size-body-m);
+        font-style: normal;
+        font-weight: 400;
+        line-height: var(--ds-typography-height-body-m);
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+    }
+
+    .disabled .error-text,
+    .disabled .helper-text {
+        color: var(--ds-color-text-disabled);
+    }
 `;exports.commonStyles=t;

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

@@ -4,4 +4,28 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_mo
         display: flex;
         align-items: center;
     }
+
+    .container {
+        gap: 8px;
+    }
+
+    .stars-wrapper {
+        padding: var(--ds-spacing-s-1);
+        gap: var(--ds-spacing-s-3);
+    }
+
+    .star-icon {
+        --ui-kit-icon-color: var(--ds-color-icon-selected);
+    }
+
+    .container.disabled .star-icon {
+        --ui-kit-icon-color: var(--ds-color-icon-disabled);
+    }
+
+    .rating-text {
+        font: 400 var(--ds-typography-size-body-m) / var(--ds-typography-height-body-m)
+            var(--ds-typography-family-primary);
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+        color: var(--ds-color-text-default);
+    }
 `;exports.commonStyles=t;

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

@@ -1,4 +1,4 @@
-const e=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs");const t=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),n=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs"),r=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.cjs"),i=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.cjs");require("../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.cjs");const a=require("../../_virtual/_@oxc-project_runtime@0.133.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/uiKitHtml.cjs"),l=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs");require("../../node_modules/.pnpm/lit@3.3.1/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,p,m=(f=class extends u.ViewportMixin(o.UiKitElement){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.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()}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;(e=this.ctas)==null||e.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`?!0:[`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`?!0:[`xxs`,`xs`,`s`].includes(this.viewport)&&this.ctas.length>1}render(){return e.x`
+const e=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs");const t=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),n=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs"),r=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.cjs"),i=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.cjs");require("../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.cjs");const a=require("../../_virtual/_@oxc-project_runtime@0.133.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/uiKitHtml.cjs"),l=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs");require("../../node_modules/.pnpm/lit@3.3.1/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,p,m=(f=class extends u.ViewportMixin(o.UiKitElement){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()}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`?!0:[`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`?!0:[`xxs`,`xs`,`s`].includes(this.viewport)&&this.actionsCount>1}render(){return e.x`
             ${this.backdropTemplate}
             <div class="container gutter">
                 <nav data-testid="ds-secondary-navigation-container" class=${l.e(this.classes)}>
@@ -61,7 +61,7 @@ const e=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/l
                 ?inert=${!this.openCtas}
             >
                 <div class="dropdown ds-blur">
-                    <slot name="actions"></slot>
+                    <slot name="actions" @slotchange=${this.handleActionsSlotChange}></slot>
                 </div>
             </div>
-        `:e.E}get backdropTemplate(){return!this.openItems&&!this.openCtas?e.E:e.x`<div class="dropdown-backdrop" @click=${this.closeDropdowns}></div>`}},p=f,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);a.__decorate([t.n({type:String,attribute:`dropdown-button-text`})],m.prototype,`dropdownButtonText`,void 0),a.__decorate([t.n({type:Number,attribute:`selected-index`})],m.prototype,`selectedIndex`,void 0),a.__decorate([t.n({type:Boolean,attribute:`keep-dropdown-button-text`})],m.prototype,`keepDropdownButtonText`,void 0),a.__decorate([t.n({type:String,attribute:`items-mode`})],m.prototype,`itemsMode`,void 0),a.__decorate([t.n({type:String,attribute:`actions-mode`})],m.prototype,`actionsMode`,void 0),a.__decorate([n.r()],m.prototype,`openItems`,void 0),a.__decorate([n.r()],m.prototype,`openCtas`,void 0),a.__decorate([n.r()],m.prototype,`hasScrollLeft`,void 0),a.__decorate([n.r()],m.prototype,`hasScrollRight`,void 0),a.__decorate([i.o({slot:`items`})],m.prototype,`items`,void 0),a.__decorate([i.o({slot:`actions`})],m.prototype,`ctas`,void 0),a.__decorate([r.e(`.items-container`)],m.prototype,`itemsContainer`,void 0),m=p=a.__decorate([s.customUiKitElement(`ds-secondary-navigation`)],m);
+        `:e.E}get backdropTemplate(){return!this.openItems&&!this.openCtas?e.E:e.x`<div class="dropdown-backdrop" @click=${this.closeDropdowns}></div>`}},p=f,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);a.__decorate([t.n({type:String,attribute:`dropdown-button-text`})],m.prototype,`dropdownButtonText`,void 0),a.__decorate([t.n({type:Number,attribute:`selected-index`})],m.prototype,`selectedIndex`,void 0),a.__decorate([t.n({type:Boolean,attribute:`keep-dropdown-button-text`})],m.prototype,`keepDropdownButtonText`,void 0),a.__decorate([t.n({type:String,attribute:`items-mode`})],m.prototype,`itemsMode`,void 0),a.__decorate([t.n({type:String,attribute:`actions-mode`})],m.prototype,`actionsMode`,void 0),a.__decorate([n.r()],m.prototype,`openItems`,void 0),a.__decorate([n.r()],m.prototype,`openCtas`,void 0),a.__decorate([n.r()],m.prototype,`hasScrollLeft`,void 0),a.__decorate([n.r()],m.prototype,`hasScrollRight`,void 0),a.__decorate([n.r()],m.prototype,`actionsCount`,void 0),a.__decorate([i.o({slot:`items`})],m.prototype,`items`,void 0),a.__decorate([i.o({slot:`actions`})],m.prototype,`ctas`,void 0),a.__decorate([r.e(`.items-container`)],m.prototype,`itemsContainer`,void 0),m=p=a.__decorate([s.customUiKitElement(`ds-secondary-navigation`)],m);