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

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

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

@@ -2,4 +2,294 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_mo
     :host {
         display: contents;
     }
+
+    .ds-blur {
+        position: relative;
+        isolation: isolate;
+        overflow: visible;
+        background: transparent;
+    }
+
+    .ds-blur::before {
+        content: '';
+        box-sizing: border-box;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        background: var(--ui-kit-private-blur-background);
+        backdrop-filter: blur(var(--ui-kit-private-blur-size));
+        border-radius: var(--ui-kit-private-blur-border-radius, inherit);
+        border: var(--ui-kit-private-blur-border, inherit);
+        pointer-events: none;
+        z-index: -1;
+        will-change: filter;
+    }
+
+    :host {
+        --ui-kit-private-secondary-navigation-container-height: 58px;
+    }
+
+    .container {
+        position: relative;
+        margin: 0 auto;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+    }
+
+    .nav {
+        position: relative;
+        width: 100%;
+        height: var(--ui-kit-private-secondary-navigation-container-height);
+        display: flex;
+        padding: var(--ds-spacing-s-5);
+        justify-content: space-between;
+        align-items: center;
+        gap: var(--ds-spacing-m-1);
+        max-width: 100%;
+        box-sizing: border-box;
+        pointer-events: auto;
+    }
+
+    .nav::before {
+        border-radius: var(--ds-border-radius-s);
+        border: var(--ds-border-width-m) solid var(--ds-color-border-default);
+        --ui-kit-private-blur-background: var(--ds-color-surface-container-hover);
+        --ui-kit-private-blur-size: 40px;
+    }
+
+    .gutter {
+        padding: 0 var(--ds-spacing-s-5);
+    }
+
+    @media (min-width: 480px) {
+        .gutter {
+            padding: 0 var(--ds-spacing-m-1);
+        }
+    }
+
+    @media (min-width: 768px) {
+        .gutter {
+            padding: 0 var(--ds-spacing-m-2);
+        }
+        .nav {
+            flex-wrap: wrap;
+        }
+    }
+
+    @media (min-width: 1024px) {
+        .gutter {
+            padding: 0;
+            max-width: 1375px;
+        }
+        .nav {
+            width: auto;
+            flex-wrap: nowrap;
+        }
+    }
+
+    @media (min-width: 1440px) {
+        :host {
+            --ui-kit-private-secondary-navigation-container-height: 66px;
+        }
+        .gutter {
+            max-width: 1360px;
+        }
+    }
+
+    @media (min-width: 1920px) {
+        .gutter {
+            max-width: 1824px;
+        }
+    }
+
+    .items-container {
+        flex: 1 1 auto;
+        overflow-x: auto;
+        display: flex;
+        min-width: 0;
+    }
+
+    .scroll-left .items-container {
+        mask-image: linear-gradient(
+            to left,
+            rgba(0, 0, 0, 1) 0%,
+            rgba(0, 0, 0, 1) 80%,
+            rgba(0, 0, 0, 0.5) 95%,
+            rgba(0, 0, 0, 0) 100%
+        );
+    }
+
+    .scroll-right .items-container {
+        mask-image: linear-gradient(
+            to right,
+            rgba(0, 0, 0, 1) 0%,
+            rgba(0, 0, 0, 1) 80%,
+            rgba(0, 0, 0, 0.5) 95%,
+            rgba(0, 0, 0, 0) 100%
+        );
+    }
+
+    .scroll-left.scroll-right .items-container {
+        mask-image: linear-gradient(
+            to right,
+            rgba(0, 0, 0, 0) 0%,
+            rgba(0, 0, 0, 0.5) 5%,
+            rgba(0, 0, 0, 1) 10%,
+            rgba(0, 0, 0, 1) 80%,
+            rgba(0, 0, 0, 0.5) 95%,
+            rgba(0, 0, 0, 0) 100%
+        );
+    }
+
+    .items-container::-webkit-scrollbar {
+        display: none;
+    }
+
+    .items-container div {
+        display: flex;
+        text-transform: var(--ui-kit-secondary-navigation-text-transform);
+    }
+
+    ::slotted([slot='items']) {
+        width: auto;
+        max-width: 300px;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1;
+        overflow: hidden;
+        color: var(--ds-color-text-default) !important;
+        text-align: center;
+        text-overflow: ellipsis;
+        font-family: var(--ds-typography-family-primary);
+        font-size: var(--ds-typography-size-body-l);
+        font-style: normal;
+        font-weight: 400;
+        line-height: var(--ds-typography-height-body-l);
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+        text-decoration: none;
+        display: inline-flex;
+        padding: var(--ds-spacing-s-5) var(--ds-spacing-m-1);
+        align-items: center;
+        border-radius: var(--ds-border-radius-xs);
+        border: none;
+        background: transparent;
+        cursor: pointer;
+        flex: 0 0 auto;
+    }
+
+    ::slotted([slot='items']:hover) {
+        color: var(--ds-color-text-default-subtle);
+    }
+
+    ::slotted([slot='items'].selected) {
+        border: var(--ds-border-width-m) solid var(--ds-color-border-selected-subtle);
+        background: var(--ds-color-surface-container-active);
+        color: var(--ds-color-text-selected-subtle) !important;
+    }
+
+    :host a:-webkit-any-link {
+        all: unset;
+        color: -webkit-link;
+        text-decoration: underline;
+        cursor: auto;
+    }
+
+    @media (min-width: 768px) {
+        ::slotted([slot='items']) {
+            padding: var(--ds-spacing-s-5) var(--ds-spacing-m-1);
+        }
+    }
+
+    @media (min-width: 1440px) {
+        ::slotted([slot='items']) {
+            padding: var(--ds-spacing-m-1);
+        }
+    }
+
+    .actions-container {
+        display: flex;
+        align-items: center;
+        gap: var(--ds-spacing-m-1);
+        flex: 0 0 auto;
+        text-overflow: ellipsis;
+        text-transform: var(--ui-kit-secondary-navigation-text-transform);
+    }
+
+    @media (min-width: 0px) {
+        .nav {
+            gap: var(--ds-spacing-s-4);
+        }
+    }
+
+    .dropdown-container {
+        display: none;
+        position: absolute;
+        box-sizing: border-box;
+        width: 100%;
+        z-index: var(--ds-z-index-context-menu);
+        left: 0;
+        bottom: calc(var(--ui-kit-private-secondary-navigation-container-height) + var(--ds-spacing-s-5));
+    }
+
+    .dropdown-container.open {
+        display: flex;
+    }
+
+    .dropdown {
+        width: 100%;
+        display: flex;
+        padding: var(--ds-spacing-s-5);
+        flex-direction: column;
+        gap: var(--ds-spacing-m-1);
+        align-self: stretch;
+        border-radius: var(--ds-border-radius-s);
+        border: var(--ds-border-width-m) solid var(--ds-color-border-default);
+        max-height: 75dvh;
+        overflow-y: scroll;
+        text-transform: var(--ui-kit-secondary-navigation-text-transform);
+
+        --ui-kit-private-blur-background: var(--ds-color-surface-container-hover);
+        --ui-kit-private-blur-size: 40px;
+    }
+
+    .items-dropdown,
+    .actions-dropdown {
+        pointer-events: auto;
+    }
+
+    .items-dropdown.open .dropdown {
+        align-items: flex-start;
+    }
+
+    .actions-dropdown.open .dropdown {
+        justify-content: flex-end;
+        align-items: flex-end;
+    }
+
+    .dropdown-backdrop {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+    }
+
+    .items-dropdown-button {
+        --ui-kit-button-background: var(--ds-dropdown-select-bg-color-default);
+        --ui-kit-button-background-hover: var(--ds-dropdown-select-bg-color-hover);
+        --ui-kit-button-background-focus: var(--ds-dropdown-select-bg-color-focus);
+        --ui-kit-button-background-active: var(--ds-dropdown-select-bg-color-pressed);
+        --ui-kit-button-color: var(--ds-dropdown-select-text-color-input-default);
+        --ui-kit-button-color-hover: var(--ds-icon-button-icon-color-secondary-hover);
+        --ui-kit-button-border-color: var(--ds-dropdown-select-border-color-default);
+        --ui-kit-button-border-color-hover: var(--ds-icon-button-border-color-secondary-hover);
+        --ui-kit-button-border-color-active: var(--ds-dropdown-select-border-color-pressed);
+        --ui-kit-button-border-width: var(--ds-border-width-m);
+        --ui-kit-button-font-weight: var(--ds-typography-weight-body-primary);
+        --ui-kit-button-text-transform: none;
+    }
 `;exports.commonStyles=t;

package/dist/cjs/components/ds-skeleton/styles/common.styles.cjs

@@ -2,4 +2,42 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_mo
     :host {
         display: block;
     }
+
+    .skeleton {
+        position: relative;
+        overflow: hidden;
+        background: linear-gradient(
+            90deg,
+            var(--ds-color-surface-skeleton-start) 0%,
+            var(--ds-color-surface-skeleton-mid) 50%,
+            var(--ds-color-surface-skeleton-end) 100%
+        );
+        background-size: 200% 100%;
+    }
+
+    .skeleton.variant-text {
+        height: 16px;
+        border-radius: var(--ds-border-radius-04);
+    }
+
+    .skeleton.variant-circular {
+        border-radius: var(--ds-border-radius-full);
+    }
+
+    .skeleton.variant-rectangular {
+        border-radius: var(--ds-border-radius-00);
+    }
+
+    .skeleton.animation-shimmer {
+        animation: shimmer 1.5s ease-in-out infinite;
+    }
+
+    @keyframes shimmer {
+        0% {
+            background-position: 200% 0;
+        }
+        100% {
+            background-position: -200% 0;
+        }
+    }
 `;exports.commonStyles=t;