@cupra/ui-kit 2.0.0-canary.19 → 2.0.0-canary.191

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

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");require("../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const t=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs"),e=t.css`
+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`
     :host {
         display: contents;
     }
@@ -15,4 +15,91 @@
         display: inline-flex;
         vertical-align: top;
     }
-`;exports.commonStyles=e;
+
+    :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-radio-group/ds-radio-group.cjs

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("../../decorators/customUiKitElement.cjs"),n=require("../../mixins/FormAssociatedMixin.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const l=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs"),c=require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs"),i=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),m=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.cjs"),h=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),y=require("./ds-radio-group.styles.cjs");var R=Object.defineProperty,f=Object.getOwnPropertyDescriptor,o=(a,e,s,r)=>{for(var t=r>1?void 0:r?f(e,s):e,p=a.length-1,d;p>=0;p--)(d=a[p])&&(t=(r?d(e,s,t):d(t))||t);return r&&t&&R(e,s,t),t};exports.DsRadioGroup=class extends n.FormAssociatedMixin(c.LitElement){constructor(){super(...arguments),this.mode="light",this.size="large"}updateRadioChecked(){requestAnimationFrame(()=>{this.radioElements.forEach(e=>{e.checked=e.value===this.value})})}setRadioProps(e){requestAnimationFrame(()=>{["name","size","mode"].forEach(r=>{e.has(r)&&this.radioElements.forEach(t=>{t[r]=this[r]})})})}updated(e){super.updated(e),this.setRadioProps(e)}firstUpdated(e){super.firstUpdated(e),this.updateRadioChecked(),this.setRadioProps(e)}handleChangeRadio(e){var s;this.value=(s=e.detail)==null?void 0:s.value}get classes(){return{container:!0}}render(){return l.html`
-            <fieldset class=${h.classMap(this.classes)} @change=${this.handleChangeRadio}>
+const e=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs"),t=require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");require("../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs");const n=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),r=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 i=require("../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.cjs"),a=require("../../decorators/customUiKitElement.cjs"),o=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 s=require("../../mixins/FormAssociatedMixin.cjs"),c=require("./ds-radio-group.styles.cjs");var l,u=(l=class extends s.FormAssociatedMixin(t.i){constructor(...e){super(...e),this.mode=`light`,this.size=`large`}updateRadioChecked(){requestAnimationFrame(()=>{this.radioElements.forEach(e=>{e.checked=e.value===this.value})})}setRadioProps(e){requestAnimationFrame(()=>{[`name`,`size`,`mode`].forEach(t=>{e.has(t)&&this.radioElements.forEach(e=>{e[t]=this[t]})})})}updated(e){super.updated(e),this.setRadioProps(e)}firstUpdated(e){super.firstUpdated(e),this.updateRadioChecked(),this.setRadioProps(e)}handleChangeRadio(e){var t;this.value=(t=e.detail)==null?void 0:t.value}get classes(){return{container:!0}}render(){return e.x`
+            <fieldset class=${o.e(this.classes)} @change=${this.handleChangeRadio}>
                 <slot></slot>
             </fieldset>
-        `}};exports.DsRadioGroup.styles=[y.commonStyles];o([i.property({type:String})],exports.DsRadioGroup.prototype,"name",2);o([i.property({type:String,reflect:!0})],exports.DsRadioGroup.prototype,"value",2);o([i.property({type:String,reflect:!0})],exports.DsRadioGroup.prototype,"mode",2);o([i.property({type:String})],exports.DsRadioGroup.prototype,"size",2);o([m.queryAssignedElements({selector:"ds-radio"})],exports.DsRadioGroup.prototype,"radioElements",2);exports.DsRadioGroup=o([u.customUiKitElement("ds-radio-group",{skipTagAsComponentName:!0})],exports.DsRadioGroup);
+        `}},l.styles=[c.commonStyles],l);i.__decorate([n.n({type:String})],u.prototype,`name`,void 0),i.__decorate([n.n({type:String,reflect:!0})],u.prototype,`value`,void 0),i.__decorate([n.n({type:String,reflect:!0})],u.prototype,`mode`,void 0),i.__decorate([n.n({type:String})],u.prototype,`size`,void 0),i.__decorate([r.o({selector:`ds-radio`})],u.prototype,`radioElements`,void 0),u=i.__decorate([a.customUiKitElement(`ds-radio-group`,{skipTagAsComponentName:!0})],u);

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

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const e=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs"),t=e.css`
+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`
     :host {
         display: flex;
         flex-direction: column;
@@ -11,4 +11,4 @@
         border: none;
         display: contents;
     }
-`;exports.commonStyles=t;
+`;exports.commonStyles=t;

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

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("../base/UiKitElement.cjs"),m=require("../../decorators/customUiKitElement.cjs"),c=require("../../utils/booleanConverter.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const u=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const l=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),h=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs");require("../ds-icon/ds-icon.cjs");const d=require("./styles/common.styles.cjs");var g=Object.defineProperty,v=Object.getOwnPropertyDescriptor,a=(i,e,t,r)=>{for(var s=r>1?void 0:r?v(e,t):e,n=i.length-1,o;n>=0;n--)(o=i[n])&&(s=(r?o(e,t,s):o(s))||s);return r&&s&&g(e,t,s),s};exports.DsRating=class extends p.UiKitElement{constructor(){super(...arguments),this.disabled=!1,this.hideRatingText=!1}get displayValue(){if(this.value===void 0||this.value===null||this.value<0)return 0;const e=Math.max(0,Math.min(5,this.value)),t=Math.floor(e),r=Number((e-t).toFixed(2));return t+Math.round(r/.5)*.5}get classes(){return{container:!0,disabled:this.disabled}}getStarIconName(e,t){return t>=e?"star-filled":t>=e-.5?"half-star-filled":"star"}get starsTemplate(){const e=this.displayValue,t=[];for(let r=1;r<=5;r++){const s=this.getStarIconName(r,e);s&&t.push(this.componentFactory.createIcon({class:"star-icon","icon-name":s,size:16}))}return t}render(){const e=this.value!==void 0&&this.value>=0?this.value:0,r=Math.max(0,Math.min(5,e)).toString();return u.html`
-            <div class=${h.classMap(this.classes)} aria-label=${`Rating: ${r} out of 5`} role="img">
+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");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("../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.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 c=require("./styles/common.styles.cjs");var l,u=(l=class extends r.UiKitElement{constructor(...e){super(...e),this.disabled=!1,this.hideRatingText=!1}get displayValue(){if(this.value===void 0||this.value===null||this.value<0)return 0;let e=Math.max(0,Math.min(5,this.value)),t=Math.floor(e),n=Number((e-t).toFixed(2));return t+Math.round(n/.5)*.5}get classes(){return{container:!0,disabled:this.disabled}}getStarIconName(e,t){return t>=e?`star-filled`:t>=e-.5?`half-star-filled`:`star`}get starsTemplate(){let e=this.displayValue,t=[];for(let n=1;n<=5;n++){let r=this.getStarIconName(n,e);t.push(o.uiKitHtml`<ds-icon class="star-icon" icon-name=${r} size="16"></ds-icon>`)}return t}render(){let t=this.value!==void 0&&this.value>=0?this.value:0,n=Math.max(0,Math.min(5,t)).toString();return e.x`
+            <div class=${s.e(this.classes)} aria-label=${`Rating: ${n} out of 5`} role="img">
                 <div class="stars-wrapper">${this.starsTemplate}</div>
-                ${this.hideRatingText?"":u.html`<span class="rating-text">${r}</span>`}
+                ${this.hideRatingText?``:e.x`<span class="rating-text">${n}</span>`}
             </div>
-        `}};exports.DsRating.styles=[d.commonStyles];a([l.property({type:Number})],exports.DsRating.prototype,"value",2);a([l.property({type:Boolean,converter:c.booleanConverter,reflect:!0})],exports.DsRating.prototype,"disabled",2);a([l.property({type:Boolean,converter:c.booleanConverter,attribute:"hide-rating-text"})],exports.DsRating.prototype,"hideRatingText",2);exports.DsRating=a([m.customUiKitElement("ds-rating")],exports.DsRating);
+        `}},l.styles=[c.commonStyles],l);n.__decorate([t.n({type:Number})],u.prototype,`value`,void 0),n.__decorate([t.n({type:Boolean,converter:a.booleanConverter,reflect:!0})],u.prototype,`disabled`,void 0),n.__decorate([t.n({type:Boolean,converter:a.booleanConverter,attribute:`hide-rating-text`})],u.prototype,`hideRatingText`,void 0),u=n.__decorate([i.customUiKitElement(`ds-rating`)],u);

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

@@ -1,7 +1,31 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");require("../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs"),r=e.css`
+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`
     .container,
     .stars-wrapper {
         display: flex;
         align-items: center;
     }
-`;exports.commonStyles=r;
+
+    .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-search/ds-search.cjs

@@ -1,10 +1,10 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("../base/UiKitElement.cjs"),y=require("../../decorators/customUiKitElement.cjs"),m=require("../../mixins/FormAssociatedMixin.cjs"),p=require("../../utils/booleanConverter.cjs"),v=require("../../utils/htmlWithTokens.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const s=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const r=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),u=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs"),S=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.cjs"),g=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),a=require("./styles/common.styles.cjs");var T=Object.defineProperty,b=Object.getOwnPropertyDescriptor,e=(n,t,o,l)=>{for(var i=l>1?void 0:l?b(t,o):t,c=n.length-1,h;c>=0;c--)(h=n[c])&&(i=(l?h(t,o,i):h(i))||i);return l&&i&&T(t,o,i),i};exports.DsSearch=class extends m.FormAssociatedMixin(d.UiKitElement){constructor(){super(...arguments),this.initialValue="",this.label="",this.helperText="",this.errorText="",this.disabled=!1,this.success=!1,this.mode="light",this.size="large",this.name="",this.placeholder="",this.type="text",this.focused=!1,this.handleFocus=()=>{this.focused=!0},this.handleBlur=()=>{this.focused=!1},this.handleClickClearIcon=()=>{this._value="",this.dispatchEvent(new CustomEvent("ds-search:clear",{bubbles:!0,composed:!0}))},this.handleInput=t=>{const o=t.target;this._value=o.value||""},this.handleSuccess=t=>{this.dispatchEvent(new CustomEvent("ds-search:position-success",{bubbles:!0,composed:!0,detail:{position:t}}))},this.handleError=t=>{this.dispatchEvent(new CustomEvent("ds-search:position-error",{bubbles:!0,composed:!0,detail:{error:t}}))}}firstUpdated(){this._value=this.initialValue}get value(){return this._value}set value(t){this._value=t}get classes(){return{container:!0,focused:this.focused,error:!!this.errorText,success:this.success,disabled:this.disabled,[this.size]:!0,[this.mode]:!0}}get searchIconTemplate(){return s.html`
-            ${this.componentFactory.createIcon({class:"search-icon","icon-name":"magnifying-glass"})}
-        `}get positionIconTemplate(){return s.html`
-            ${this.componentFactory.createIcon({class:"position-icon","icon-name":"position"})}
-        `}get clearIconTemplate(){return s.html`
-            ${this.componentFactory.createIcon({class:"clear-icon","data-testid":"clear-icon","icon-name":"cross","@click":this.handleClickClearIcon})}
-        `}get inputTemplate(){return s.html`
+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");require("../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.cjs");const i=require("../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.cjs"),a=require("../base/UiKitElement.cjs"),o=require("../../decorators/customUiKitElement.cjs");require("../ds-icon/ds-icon.cjs");const s=require("../../utils/booleanConverter.cjs"),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/FormAssociatedMixin.cjs"),d=require("./styles/common.styles.cjs");var f,p=(f=class extends u.FormAssociatedMixin(a.UiKitElement){constructor(...e){super(...e),this.initialValue=``,this.label=``,this.helperText=``,this.errorText=``,this.disabled=!1,this.success=!1,this.mode=`light`,this.size=`large`,this.name=``,this.placeholder=``,this.type=`text`,this.focused=!1,this.handleFocus=()=>{this.focused=!0},this.handleBlur=()=>{this.focused=!1},this.handleClickClearIcon=()=>{this._value=``,this.dispatchEvent(new CustomEvent(`ds-search:clear`,{bubbles:!0,composed:!0}))},this.handleInput=e=>{let t=e.target;this._value=t.value||``},this.handleSuccess=e=>{this.dispatchEvent(new CustomEvent(`ds-search:position-success`,{bubbles:!0,composed:!0,detail:{position:e}}))},this.handleError=e=>{this.dispatchEvent(new CustomEvent(`ds-search:position-error`,{bubbles:!0,composed:!0,detail:{error:e}}))}}firstUpdated(){this._value=this.initialValue}get value(){return this._value}set value(e){this._value=e}get classes(){return{container:!0,focused:this.focused,error:!!this.errorText,success:this.success,disabled:this.disabled,[this.size]:!0,[this.mode]:!0}}get searchIconTemplate(){return e.x`
+            ${c.uiKitHtml`<ds-icon class="search-icon" icon-name="magnifying-glass"></ds-icon>`}
+        `}get positionIconTemplate(){return e.x`
+            ${c.uiKitHtml`<ds-icon class="position-icon" icon-name="position"></ds-icon>`}
+        `}get clearIconTemplate(){return e.x`
+            ${c.uiKitHtml`<ds-icon class="clear-icon" data-testid="clear-icon" icon-name="cross" @click=${this.handleClickClearIcon}></ds-icon>`}
+        `}get inputTemplate(){return e.x`
             <input
                 class="input-field"
                 type=${this.type}
@@ -18,21 +18,21 @@
                 @input=${this.handleInput}
                 ?disabled=${this.disabled}
             />
-        `}get helperTextTemplate(){return this.helperText?s.html`
+        `}get helperTextTemplate(){return this.helperText?e.x`
             <div class="helper-text" @click=${this.handleClickHelperText}>
                 ${this.positionIconTemplate}
                 ${this.helperText}
             </div>
-        `:s.nothing}get errorTextTemplate(){return this.errorText?s.html`<div class="error-text">${this.errorText}</div>`:s.nothing}get styleTokens(){return v.htmlWithTokens`
+        `:e.E}get errorTextTemplate(){return this.errorText?e.x`<div class="error-text">${this.errorText}</div>`:e.E}get styleTokens(){return e.x`
             <style>
                 :host{
                     color-scheme: ${this.mode};
-                    pointer-events: ${this.disabled?"none":"visible"};
+                    pointer-events: ${this.disabled?`none`:`visible`};
                 }
             </style>
-        `}handleClickHelperText(){navigator.geolocation.getCurrentPosition(this.handleSuccess,this.handleError)}render(){return s.html`
+        `}handleClickHelperText(){navigator.geolocation.getCurrentPosition(this.handleSuccess,this.handleError)}render(){return e.x`
             ${this.styleTokens}
-            <div class=${g.classMap(this.classes)}>
+            <div class=${l.e(this.classes)}>
                 <div class="input-container">
                     ${this.searchIconTemplate}
                     ${this.inputTemplate}
@@ -41,4 +41,4 @@
                 ${this.errorTextTemplate}
                 ${this.helperTextTemplate}
             </div>
-        `}};exports.DsSearch.styles=[a.commonStyles,a.containerStyles,a.helperTextStyles,a.inputFieldStyles,a.inputContainerStyles];e([r.property({type:String,reflect:!0,attribute:"initial-value"})],exports.DsSearch.prototype,"initialValue",2);e([r.property({type:String})],exports.DsSearch.prototype,"label",2);e([r.property({type:String,attribute:"helper-text"})],exports.DsSearch.prototype,"helperText",2);e([r.property({type:String,attribute:"error-text"})],exports.DsSearch.prototype,"errorText",2);e([r.property({type:Boolean,converter:p.booleanConverter})],exports.DsSearch.prototype,"disabled",2);e([r.property({type:Boolean,converter:p.booleanConverter})],exports.DsSearch.prototype,"success",2);e([r.property({type:String,reflect:!0})],exports.DsSearch.prototype,"mode",2);e([r.property({type:String})],exports.DsSearch.prototype,"size",2);e([r.property({type:String})],exports.DsSearch.prototype,"name",2);e([r.property({type:String})],exports.DsSearch.prototype,"placeholder",2);e([r.property({type:String,attribute:"max-length"})],exports.DsSearch.prototype,"maxLength",2);e([r.property({type:String})],exports.DsSearch.prototype,"type",2);e([u.state()],exports.DsSearch.prototype,"_value",2);e([u.state()],exports.DsSearch.prototype,"focused",2);e([S.query(".input-field")],exports.DsSearch.prototype,"inputField",2);exports.DsSearch=e([y.customUiKitElement("ds-search")],exports.DsSearch);
+        `}},f.styles=[d.commonStyles,d.containerStyles,d.helperTextStyles,d.inputFieldStyles,d.inputContainerStyles],f);i.__decorate([t.n({type:String,reflect:!0,attribute:`initial-value`})],p.prototype,`initialValue`,void 0),i.__decorate([t.n({type:String})],p.prototype,`label`,void 0),i.__decorate([t.n({type:String,attribute:`helper-text`})],p.prototype,`helperText`,void 0),i.__decorate([t.n({type:String,attribute:`error-text`})],p.prototype,`errorText`,void 0),i.__decorate([t.n({type:Boolean,converter:s.booleanConverter})],p.prototype,`disabled`,void 0),i.__decorate([t.n({type:Boolean,converter:s.booleanConverter})],p.prototype,`success`,void 0),i.__decorate([t.n({type:String,reflect:!0})],p.prototype,`mode`,void 0),i.__decorate([t.n({type:String})],p.prototype,`size`,void 0),i.__decorate([t.n({type:String})],p.prototype,`name`,void 0),i.__decorate([t.n({type:String})],p.prototype,`placeholder`,void 0),i.__decorate([t.n({type:String,attribute:`max-length`})],p.prototype,`maxLength`,void 0),i.__decorate([t.n({type:String})],p.prototype,`type`,void 0),i.__decorate([n.r()],p.prototype,`_value`,void 0),i.__decorate([n.r()],p.prototype,`focused`,void 0),i.__decorate([r.e(`.input-field`)],p.prototype,`inputField`,void 0),p=i.__decorate([o.customUiKitElement(`ds-search`)],p);

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

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");require("../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs"),t=e.css`
+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`
     :host {
         display: block;
         width: 100%;
@@ -8,11 +8,11 @@
     .helper-text {
         user-select: none;
     }
-`,n=e.css`
+`,n=e.i`
     .container {
         position: relative;
     }
-`,i=e.css`
+`,r=e.i`
     .input-field::-webkit-search-decoration,
     .input-field::-webkit-search-cancel-button,
     .input-field::-webkit-search-results-button,
@@ -33,18 +33,18 @@
     .input-field:focus {
         outline: none;
     }
-`,s=e.css`
+`,i=e.i`
     .helper-text {
         cursor: pointer;
         display: flex;
         justify-content: flex-start;
         align-items: center;
     }
-`,r=e.css`
+`,a=e.i`
     .input-container {
         align-items: center;
         justify-content: center;
         display: flex;
         position: relative;
     }
-`;exports.commonStyles=t;exports.containerStyles=n;exports.helperTextStyles=s;exports.inputContainerStyles=r;exports.inputFieldStyles=i;
+`;exports.commonStyles=t,exports.containerStyles=n,exports.helperTextStyles=i,exports.inputContainerStyles=a,exports.inputFieldStyles=r;

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

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("../base/UiKitElement.cjs"),c=require("../../decorators/customUiKitElement.cjs"),d=require("../../mixins/inputStatesMixin.cjs"),h=require("../../utils/booleanConverter.cjs"),v=require("../../utils/validateMaxLength.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const e=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const a=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),m=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),g=require("./styles/common.styles.cjs");var b=Object.defineProperty,y=Object.getOwnPropertyDescriptor,o=(s,t,r,i)=>{for(var n=i>1?void 0:i?y(t,r):t,p=s.length-1,l;p>=0;p--)(l=s[p])&&(n=(i?l(t,r,n):l(n))||n);return i&&n&&b(t,r,n),n};exports.DsSearchInput=class extends d.inputStatesMixin(u.UiKitElement){constructor(){super(...arguments),this.size="medium",this.variant="primary",this.loading=!1,this.helperText="",this.forcedError="",this.invalidError="",this.dataAriaLabelRemoveButton="",this.dataAriaLabelPositionButton="",this.withPositionButton=!0,this.handleRemove=()=>{this.nativeInput.value="",this.nativeInput.focus(),["input","change"].forEach(t=>this.nativeInput.dispatchEvent(new Event(t,{bubbles:!0,composed:!0})))},this.handleClickPositionButton=()=>{this.dispatchEvent(new Event("ds-search-input:click-position-button",{bubbles:!0,composed:!0}))}}get classes(){return{container:!0,error:!!this.forcedError,loading:this.loading,[this.size]:!!this.size,[this.variant]:!!this.variant,disabled:this.inputStates.disabled,filled:this.inputStates.filled,invalid:this.inputStates.invalid,focus:this.inputStates.focus,"focus-visible":this.inputStates.focusVisible}}render(){return e.html`
-            <div part="container" class=${m.classMap(this.classes)}>
+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");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("../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.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 c=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 l=require("../../mixins/inputStatesMixin.cjs");require("../ds-loader-spinner/ds-loader-spinner.cjs");const u=require("../../utils/validateMaxLength.cjs"),d=require("./styles/common.styles.cjs");var f,p=(f=class extends l.inputStatesMixin(r.UiKitElement){constructor(...e){super(...e),this.size=`large`,this.variant=`primary`,this.loading=!1,this.helperText=``,this.forcedError=``,this.invalidError=``,this.dataAriaLabelRemoveButton=``,this.dataAriaLabelPositionButton=``,this.withPositionButton=!0,this.handleRemove=()=>{this.nativeInput.value=``,this.nativeInput.focus(),[`input`,`change`].forEach(e=>this.nativeInput.dispatchEvent(new Event(e,{bubbles:!0,composed:!0})))},this.handleClickPositionButton=()=>{this.dispatchEvent(new Event(`ds-search-input:click-position-button`,{bubbles:!0,composed:!0}))}}get classes(){return{container:!0,error:!!this.forcedError,loading:this.loading,[this.size]:!!this.size,[this.variant]:!!this.variant,disabled:this.inputStates.disabled,filled:this.inputStates.filled,invalid:this.inputStates.invalid,focus:this.inputStates.focus,"focus-visible":this.inputStates.focusVisible}}render(){return e.x`
+            <div part="container" class=${s.e(this.classes)}>
                 <div part="input-container" class="input-container">
                     ${this.searchIconTemplate}
                     <slot></slot>
@@ -11,11 +11,27 @@
                 </div>
                 ${this.footerTemplate}
             </div>
-        `}get searchIconTemplate(){return this.componentFactory.createIcon({class:"icon","icon-name":"magnifying-glass",variant:"standard"})}get removeTemplate(){var t,r,i;return!((r=(t=this.nativeInput)==null?void 0:t.value)!=null&&r.length)||this.loading?e.nothing:this.componentFactory.createIconButton({class:"remove-icon-button","icon-name":"cross",disabled:!!((i=this.nativeInput)!=null&&i.disabled),size:this.size,variant:"naked","@click":this.handleRemove,"data-aria-label":this.dataAriaLabelRemoveButton||"remove button"})}get positionTemplate(){var t;return this.loading||!this.withPositionButton?e.nothing:this.componentFactory.createIconButton({class:"position-icon-button","icon-name":"position",disabled:!!((t=this.nativeInput)!=null&&t.disabled),size:this.size,variant:"naked","@click":this.handleClickPositionButton,"data-aria-label":this.dataAriaLabelPositionButton||"position button"})}get loaderSpinnerTemplate(){return this.componentFactory.createLoaderSpinner({show:this.loading})}get footerTemplate(){var t,r;return!((t=this.helperText)!=null&&t.length)&&!this.forcedError&&(!this.inputStates.invalid||!this.invalidError)&&Number((r=this.nativeInput)==null?void 0:r.maxLength)<0?e.nothing:e.html`
+        `}get searchIconTemplate(){return o.uiKitHtml`<ds-icon class="icon" icon-name="magnifying-glass"></ds-icon>`}get removeTemplate(){var t,n;return!(!((t=this.nativeInput)==null||(t=t.value)==null)&&t.length)||this.loading?e.E:o.uiKitHtml`<ds-icon-button
+            class="remove-icon-button"
+            icon-name="cross"
+            ?disabled=${!!((n=this.nativeInput)!=null&&n.disabled)}
+            size=${c.o(this.size)}
+            variant="naked"
+            @click=${this.handleRemove}
+            data-aria-label=${this.dataAriaLabelRemoveButton||`remove button`}
+        ></ds-icon-button>`}get positionTemplate(){var t;return this.loading||!this.withPositionButton?e.E:o.uiKitHtml`<ds-icon-button
+            class="position-icon-button"
+            icon-name="position"
+            ?disabled=${!!((t=this.nativeInput)!=null&&t.disabled)}
+            size=${c.o(this.size)}
+            variant="naked"
+            @click=${this.handleClickPositionButton}
+            data-aria-label=${this.dataAriaLabelPositionButton||`position button`}
+        ></ds-icon-button>`}get loaderSpinnerTemplate(){return o.uiKitHtml`<ds-loader-spinner ?show=${this.loading}></ds-loader-spinner>`}get footerTemplate(){var t,n;return!((t=this.helperText)!=null&&t.length)&&!this.forcedError&&(!this.inputStates.invalid||!this.invalidError)&&Number((n=this.nativeInput)==null?void 0:n.maxLength)<0?e.E:e.x`
             <div class="footer">
                 ${this.helperTextTemplate}
                 ${this.forcedErrorTemplate}
                 ${this.invalidErrorTemplate}
                 ${this.lengthTemplate}
             </div>
-        `}get helperTextTemplate(){var t;return this.forcedError||this.inputStates.invalid&&this.invalidError||!((t=this.helperText)!=null&&t.length)?e.nothing:e.html`<span class="support-text helper-text">${this.helperText}</span>`}get forcedErrorTemplate(){return this.forcedError?e.html`<span class="support-text error-text forced-error">${this.forcedError}</span>`:e.nothing}get invalidErrorTemplate(){return this.forcedError||!this.inputStates.invalid||!this.invalidError?e.nothing:e.html`<span class="support-text error-text invalid-error">${this.invalidError}</span>`}get lengthTemplate(){var r,i,n;const t=(i=(r=this.nativeInput)==null?void 0:r.maxLength)==null?void 0:i.toString();return v.validateMaxLength(t)?e.html`<span class="char-counter">${((n=this.inputStates.currentValue)==null?void 0:n.length)||0}/${t}</span>`:e.nothing}};exports.DsSearchInput.styles=[g.commonStyles];o([a.property({type:String})],exports.DsSearchInput.prototype,"size",2);o([a.property({type:String})],exports.DsSearchInput.prototype,"variant",2);o([a.property({type:Boolean,converter:h.booleanConverter})],exports.DsSearchInput.prototype,"loading",2);o([a.property({type:String,attribute:"helper-text"})],exports.DsSearchInput.prototype,"helperText",2);o([a.property({type:String,attribute:"forced-error"})],exports.DsSearchInput.prototype,"forcedError",2);o([a.property({type:String,attribute:"invalid-error"})],exports.DsSearchInput.prototype,"invalidError",2);o([a.property({type:String,attribute:"data-aria-label-remove-button"})],exports.DsSearchInput.prototype,"dataAriaLabelRemoveButton",2);o([a.property({type:String,attribute:"data-aria-label-position-button"})],exports.DsSearchInput.prototype,"dataAriaLabelPositionButton",2);o([a.property({type:Boolean,converter:h.booleanConverter,attribute:"with-position-button"})],exports.DsSearchInput.prototype,"withPositionButton",2);exports.DsSearchInput=o([c.customUiKitElement("ds-search-input")],exports.DsSearchInput);
+        `}get helperTextTemplate(){var t;return this.forcedError||this.inputStates.invalid&&this.invalidError||!((t=this.helperText)!=null&&t.length)?e.E:e.x`<span class="support-text helper-text">${this.helperText}</span>`}get forcedErrorTemplate(){return this.forcedError?e.x`<span class="support-text error-text forced-error">${this.forcedError}</span>`:e.E}get invalidErrorTemplate(){return this.forcedError||!this.inputStates.invalid||!this.invalidError?e.E:e.x`<span class="support-text error-text invalid-error">${this.invalidError}</span>`}get lengthTemplate(){var t,n;let r=(t=this.nativeInput)==null||(t=t.maxLength)==null?void 0:t.toString();return u.validateMaxLength(r)?e.x`<span class="char-counter">${((n=this.inputStates.currentValue)==null?void 0:n.length)||0}/${r}</span>`:e.E}},f.styles=[d.commonStyles],f);n.__decorate([t.n({type:String})],p.prototype,`size`,void 0),n.__decorate([t.n({type:String})],p.prototype,`variant`,void 0),n.__decorate([t.n({type:Boolean,converter:a.booleanConverter})],p.prototype,`loading`,void 0),n.__decorate([t.n({type:String,attribute:`helper-text`})],p.prototype,`helperText`,void 0),n.__decorate([t.n({type:String,attribute:`forced-error`})],p.prototype,`forcedError`,void 0),n.__decorate([t.n({type:String,attribute:`invalid-error`})],p.prototype,`invalidError`,void 0),n.__decorate([t.n({type:String,attribute:`data-aria-label-remove-button`})],p.prototype,`dataAriaLabelRemoveButton`,void 0),n.__decorate([t.n({type:String,attribute:`data-aria-label-position-button`})],p.prototype,`dataAriaLabelPositionButton`,void 0),n.__decorate([t.n({type:Boolean,converter:a.booleanConverter,attribute:`with-position-button`})],p.prototype,`withPositionButton`,void 0),p=n.__decorate([i.customUiKitElement(`ds-search-input`)],p);

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

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");require("../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs"),s=e.css`
+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`
     :host {
         display: contents;
     }
-`;exports.commonStyles=s;
+`;exports.commonStyles=t;

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

@@ -1,58 +1,67 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("../base/UiKitElement.cjs"),u=require("../../decorators/customUiKitElement.cjs"),g=require("../../mixins/ViewportMixin.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const i=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const h=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),l=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs"),v=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.cjs"),p=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.cjs"),c=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),w=require("./styles/common.styles.cjs");var y=Object.defineProperty,x=Object.getOwnPropertyDescriptor,n=(d,e,t,s)=>{for(var o=s>1?void 0:s?x(e,t):e,r=d.length-1,a;r>=0;r--)(a=d[r])&&(o=(s?a(e,t,o):a(o))||o);return s&&o&&y(e,t,o),o};exports.DsSecondaryNavigation=class extends g.ViewportMixin(m.UiKitElement){constructor(){super(...arguments),this.dropdownButtonText="Menu",this.openItems=!1,this.openCtas=!1,this.hasScrollLeft=!1,this.hasScrollRight=!1,this.resizeObserver=new ResizeObserver(()=>{this.handleScroll()}),this.handleScroll=()=>{var t,s,o,r;const e=((t=this.itemsContainer)==null?void 0:t.scrollLeft)+((s=this.itemsContainer)==null?void 0:s.clientWidth);this.hasScrollLeft=((o=this.itemsContainer)==null?void 0:o.scrollLeft)>0,this.hasScrollRight=e<((r=this.itemsContainer)==null?void 0:r.scrollWidth)}}updated(e){super.updated(e),e.has("viewport")&&this.updateCtas(),e.has("selectedIndex")&&this.updateSelectedItem()}firstUpdated(e){var t;super.firstUpdated(e),this.handleScroll(),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,t,s;return((s=(t=(e=this.items)==null?void 0:e[this.selectedIndex])==null?void 0:t.textContent)==null?void 0:s.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,this.openCtas=!1}handleItemsSlotChange(){this.updateSelectedItem()}handleActionsSlotChange(){this.updateCtas()}updateSelectedItem(){var e;(e=this.items)==null||e.forEach((t,s)=>{s===this.selectedIndex?t.classList.add("selected"):t.classList.remove("selected")})}updateCtas(){var e;(e=this.ctas)==null||e.forEach(t=>{["xxl","xl"].includes(this.viewport)?t==null||t.setAttribute("size","large"):t==null||t.setAttribute("size","medium")})}handleItemClick(e){var o,r;const t=e.target,s=((o=this.items)==null?void 0:o.indexOf(t))??-1;if(s!==-1){this.selectedIndex=s,this.updateSelectedItem();const a=((r=t.textContent)==null?void 0:r.trim())||t.getAttribute("data-label")||"";this.dispatchEvent(new CustomEvent("ds-secondary-navigation:select",{detail:{index:s,label:a},bubbles:!0,composed:!0})),this.closeDropdowns()}}render(){return i.html`
+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=${c.classMap(this.classes)}>
+                <nav data-testid="ds-secondary-navigation-container" class=${l.e(this.classes)}>
                     ${this.itemsTemplate}
                     ${this.itemsDropdownButtonTemplate}
                     ${this.actionsTemplate}
                     ${this.actionsDropdownButtonTemplate}
+                    ${this.itemsDropdownTemplate}
+                    ${this.actionsDropdownTemplate}
                 </nav>
-                ${this.itemsDropdownTemplate}
-                ${this.actionsDropdownTemplate}
             </div>
-        `}get itemsTemplate(){return["l","xl","xxl"].includes(this.viewport)?i.html`
+        `}get itemsTemplate(){return this.shouldShowItemsInline?e.x`
             <div class="items-container">
                 <div>
                     <slot name="items" @slotchange=${this.handleItemsSlotChange} @click=${this.handleItemClick}></slot>
                 </div>
             </div>
-        `:i.nothing}get actionsTemplate(){return["m","l","xl","xxl"].includes(this.viewport)?i.html`
+        `:e.E}get actionsTemplate(){return this.shouldShowActionsInline?e.x`
             <div class="actions-container">
                 <slot name="actions" @slotchange=${this.handleActionsSlotChange}></slot>
             </div>
-        `:i.nothing}get iconTemplate(){return this.componentFactory.createIcon({class:"icon","icon-name":this.openItems?"arrow-up":"arrow-down",size:20})}get itemsDropdownButtonTemplate(){return["xxs","xs","s","m"].includes(this.viewport)?i.html`
-            <button
-                class="items-dropdown-button"
+        `:e.E}get iconTemplate(){return c.uiKitHtml`<ds-icon class="icon" icon-name=${this.openItems?`arrow-down`:`arrow-up`} size="20"></ds-icon>`}get itemsDropdownButtonTemplate(){return this.shouldShowItemsDropdownButton?this.resolvedItemsMode===`icon-button`?c.uiKitHtml`<ds-icon-button
+                class="items-list-button"
+                data-aria-label="open items dropdown"
                 @click=${this.toggleItemsDropdown}
-                aria-expanded=${this.openItems}
-                aria-haspopup="true"
-            >
-                <span>${this.selectedItemText}</span>
-                ${this.iconTemplate}
-            </button>
-        `:i.nothing}get itemsDropdownTemplate(){return["xxs","xs","s","m"].includes(this.viewport)?i.html`
+                size=${p.RESPONSIVE_BUTTON_SIZE}
+                variant="secondary"
+                icon-name="list-line"
+            ></ds-icon-button>`:c.uiKitHtml`<ds-button
+            class="items-dropdown-button"
+            variant="secondary"
+            size=${p.RESPONSIVE_BUTTON_SIZE}
+            icon-name=${this.openItems?`arrow-down`:`arrow-up`}
+            icon-position="right"
+            @click=${this.toggleItemsDropdown}
+            aria-expanded=${this.openItems}
+            aria-haspopup="true"
+        ><span>${this.selectedItemText}</span></ds-button>`:e.E}get itemsDropdownTemplate(){return this.shouldShowItemsDropdownButton?e.x`
             <div
-                class=${c.classMap({gutter:!0,"dropdown-container":!0,"items-dropdown":!0,open:this.openItems})}
+                class=${l.e({gutter:!0,"dropdown-container":!0,"items-dropdown":!0,open:this.openItems})}
                 role="menu"
                 aria-hidden=${!this.openItems}
+                ?inert=${!this.openItems}
             >
-                <div
-                    class="dropdown ds-blur"
-                >
+                <div class="dropdown ds-blur">
                     <slot name="items" @slotchange=${this.handleItemsSlotChange} @click=${this.handleItemClick}></slot>
                 </div>
             </div>
-        `:i.nothing}get actionsDropdownButtonTemplate(){return["xxs","xs","s"].includes(this.viewport)?this.componentFactory.createIconButton({class:"nav-arrow","data-aria-label":"open actions dropdown","@click":this.toggleActionsDropdown,size:"medium","icon-name":"triple-dot-v"}):i.nothing}get actionsDropdownTemplate(){return["xxs","xs","s"].includes(this.viewport)?i.html`
-            <div                     
-                class=${c.classMap({gutter:!0,"dropdown-container":!0,"actions-dropdown":!0,open:this.openCtas})}                    
+        `:e.E}get actionsDropdownButtonTemplate(){return this.shouldShowActionsDropdownButton?c.uiKitHtml`<ds-icon-button
+            class="nav-arrow"
+            data-aria-label="open actions dropdown"
+            @click=${this.toggleActionsDropdown}
+            size=${p.RESPONSIVE_BUTTON_SIZE}
+            icon-name="triple-dot-v"
+        ></ds-icon-button>`:e.E}get actionsDropdownTemplate(){return this.shouldShowActionsDropdownButton?e.x`
+            <div
+                class=${l.e({gutter:!0,"dropdown-container":!0,"actions-dropdown":!0,open:this.openCtas})}
                 role="menu"
                 aria-hidden=${!this.openCtas}
+                ?inert=${!this.openCtas}
             >
-                <div
-                    class="dropdown ds-blur"
-
-                >
-                    <slot name="actions"></slot>
+                <div class="dropdown ds-blur">
+                    <slot name="actions" @slotchange=${this.handleActionsSlotChange}></slot>
                 </div>
             </div>
-        `:i.nothing}get backdropTemplate(){return!this.openItems&&!this.openCtas?i.nothing:i.html`<div class="dropdown-backdrop" @click=${this.closeDropdowns}></div>`}};exports.DsSecondaryNavigation.styles=[w.commonStyles];n([h.property({type:String,attribute:"dropdown-button-text"})],exports.DsSecondaryNavigation.prototype,"dropdownButtonText",2);n([h.property({type:Number,attribute:"selected-index"})],exports.DsSecondaryNavigation.prototype,"selectedIndex",2);n([l.state()],exports.DsSecondaryNavigation.prototype,"openItems",2);n([l.state()],exports.DsSecondaryNavigation.prototype,"openCtas",2);n([l.state()],exports.DsSecondaryNavigation.prototype,"hasScrollLeft",2);n([l.state()],exports.DsSecondaryNavigation.prototype,"hasScrollRight",2);n([p.queryAssignedElements({slot:"items"})],exports.DsSecondaryNavigation.prototype,"items",2);n([p.queryAssignedElements({slot:"actions"})],exports.DsSecondaryNavigation.prototype,"ctas",2);n([v.query(".items-container")],exports.DsSecondaryNavigation.prototype,"itemsContainer",2);exports.DsSecondaryNavigation=n([u.customUiKitElement("ds-secondary-navigation")],exports.DsSecondaryNavigation);
+        `: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);