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

package/dist/esm/components/ds-secondary-navigation/ds-secondary-navigation.js

@@ -19,7 +19,7 @@ import { commonStyles as f } from "./styles/common.styles.js";
 //#region src/components/ds-secondary-navigation/ds-secondary-navigation.ts
 var p, m, h = (p = class extends d(s) {
 	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(() => {
+		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;
@@ -92,8 +92,8 @@ var p, m, h = (p = class extends d(s) {
 		});
 	}
 	updateCtas() {
-		var e;
-		(e = this.ctas) == null || e.forEach((e) => {
+		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");
 		});
 	}
@@ -149,7 +149,7 @@ var p, m, h = (p = class extends d(s) {
 			"xxs",
 			"xs",
 			"s"
-		].includes(this.viewport) && this.ctas.length > 1;
+		].includes(this.viewport) && this.actionsCount > 1;
 	}
 	render() {
 		return t`
@@ -246,7 +246,7 @@ var p, m, h = (p = class extends d(s) {
                 ?inert=${!this.openCtas}
             >
                 <div class="dropdown ds-blur">
-                    <slot name="actions"></slot>
+                    <slot name="actions" @slotchange=${this.handleActionsSlotChange}></slot>
                 </div>
             </div>
         ` : e;
@@ -284,5 +284,5 @@ o([n({
 })], h.prototype, "itemsMode", void 0), o([n({
 	type: String,
 	attribute: "actions-mode"
-})], h.prototype, "actionsMode", void 0), o([r()], h.prototype, "openItems", void 0), o([r()], h.prototype, "openCtas", void 0), o([r()], h.prototype, "hasScrollLeft", void 0), o([r()], h.prototype, "hasScrollRight", void 0), o([a({ slot: "items" })], h.prototype, "items", void 0), o([a({ slot: "actions" })], h.prototype, "ctas", void 0), o([i(".items-container")], h.prototype, "itemsContainer", void 0), h = m = o([c("ds-secondary-navigation")], h);
+})], h.prototype, "actionsMode", void 0), o([r()], h.prototype, "openItems", void 0), o([r()], h.prototype, "openCtas", void 0), o([r()], h.prototype, "hasScrollLeft", void 0), o([r()], h.prototype, "hasScrollRight", void 0), o([r()], h.prototype, "actionsCount", void 0), o([a({ slot: "items" })], h.prototype, "items", void 0), o([a({ slot: "actions" })], h.prototype, "ctas", void 0), o([i(".items-container")], h.prototype, "itemsContainer", void 0), h = m = o([c("ds-secondary-navigation")], h);
 //#endregion

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

@@ -5,6 +5,296 @@ var t = e`
     :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;
+    }
 `;
 //#endregion
 export { t as commonStyles };

package/dist/esm/components/ds-skeleton/styles/common.styles.js

@@ -5,6 +5,44 @@ var t = e`
     :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;
+        }
+    }
 `;
 //#endregion
 export { t as commonStyles };

package/dist/esm/components/ds-stepper/styles/common.styles.js

@@ -5,6 +5,64 @@ var t = e`
     :host {
         display: contents;
     }
+
+    .container {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        gap: var(--ds-spacing-s-5);
+    }
+
+    .header {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--ds-spacing-s-5);
+    }
+
+    .section-name {
+        flex: 1 1 auto;
+        font-family: var(--ds-typography-family-primary);
+        font-size: var(--ds-typography-size-headline-xxs);
+        font-weight: var(--ds-typography-weight-headline-secondary);
+        line-height: var(--ds-typography-height-headline-xxs);
+        letter-spacing: var(--ds-typography-letter-spacing-base);
+        color: var(--ds-color-text-default);
+        text-transform: uppercase;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
+
+    .section-number {
+        flex: 0 0 auto;
+        font-family: var(--ds-typography-family-primary);
+        font-size: var(--ds-typography-size-body-m);
+        font-weight: var(--ds-typography-weight-body-secondary);
+        line-height: var(--ds-typography-height-body-m);
+        letter-spacing: var(--ds-typography-letter-spacing-base);
+        color: var(--ds-color-text-default-subtle);
+    }
+
+    .steps-row {
+        display: flex;
+        width: 100%;
+        height: 24px;
+        padding: var(--ds-spacing-s-1);
+        align-items: center;
+        gap: var(--ds-spacing-s-5);
+    }
+
+    .step {
+        flex: 1 1 auto;
+        height: var(--ds-sizing-04);
+        border-radius: var(--ds-border-radius-full);
+        background: var(--ds-indicator-bg-color-default);
+    }
+
+    .step.active {
+        background: var(--ds-indicator-bg-color-active-primary);
+    }
 `;
 //#endregion
 export { t as commonStyles };

package/dist/esm/components/ds-table/styles/common.styles.js

@@ -5,6 +5,41 @@ var t = e`
     :host {
         display: contents;
     }
+
+    .table-wrapper {
+        display: grid;
+        grid-template-columns: var(
+            --ui-kit-table-row-grid-template-columns,
+            var(--ui-kit-private-table-grid-template-columns-default)
+        );
+        grid-auto-flow: row;
+        grid-auto-columns: 1fr;
+        width: 100%;
+        border-radius: var(--ds-border-radius-s);
+        overflow: hidden;
+        border: 1px solid var(--ds-color-border-default-subtle);
+        background-color: var(--ds-color-bg-default);
+    }
+
+    .header {
+        display: contents;
+    }
+
+    .body {
+        display: contents;
+    }
+
+    .empty-state {
+        grid-column: 1 / -1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: var(--ds-sizing-24);
+        font-family: var(--ds-typography-family-primary);
+        font-size: var(--ds-typography-size-body-l);
+        line-height: var(--ds-typography-height-body-s);
+        color: var(--ds-color-text-subtle);
+    }
 `;
 //#endregion
 export { t as commonStyles };

package/dist/esm/components/ds-table-cell/styles/common.styles.js

@@ -6,6 +6,45 @@ var t = e`
         display: table-cell;
         box-sizing: border-box;
     }
+
+    :host {
+        display: contents;
+    }
+
+    .cell {
+        display: flex;
+        align-items: center;
+        gap: var(--ds-sizing-08);
+        padding: var(--ds-sizing-12);
+        font-family: var(--ds-typography-family-primary);
+        font-size: var(--ds-typography-size-body-l);
+        line-height: var(--ds-typography-height-body-l);
+        letter-spacing: var(--ds-typography-letter-spacing-base);
+        color: var(--ds-color-text-default);
+        border-top: 1px solid var(--ds-color-border-default-subtle);
+        border-left: 1px solid var(--ds-color-border-default-subtle);
+        box-sizing: border-box;
+    }
+
+    :host(:first-child) .cell {
+        border-left: none;
+    }
+
+    :host([variant='header']) .cell {
+        background-color: var(--ds-color-bg-default);
+        font-weight: var(--ds-typography-weight-body-primary);
+        border-top: none;
+    }
+
+    :host([variant='default']) .cell {
+        background-color: var(--ds-color-surface-default-subtlest);
+        font-weight: var(--ds-typography-weight-body-tertiary);
+    }
+
+    :host([variant='alternative']) .cell {
+        background-color: var(--ds-color-surface-default-subtle);
+        font-weight: var(--ds-typography-weight-body-tertiary);
+    }
 `;
 //#endregion
 export { t as commonStyles };

package/dist/esm/components/ds-table-row/styles/common.styles.js

@@ -5,6 +5,14 @@ var t = e`
     :host {
         display: table-row;
     }
+
+    :host {
+        display: contents;
+    }
+
+    .row {
+        display: contents;
+    }
 `;
 //#endregion
 export { t as commonStyles };

package/dist/esm/components/ds-theme-provider/ds-theme-provider.js

@@ -53,7 +53,7 @@ var f = class extends a {
 		}
 	}
 	loadThemeStyles() {
-		let e = "/2.0.0-canary.180";
+		let e = "/2.0.0-canary.182";
 		return this.loadUnusedStyles && this.applyUnusedStyles(e), this.loadStyles ? new Promise((t, n) => {
 			let r = `https://ds-assets.cupra.com${e}/styles/${this.theme}/theme.css`;
 			if (document.head.querySelector(`link[href="${r}"]`)) t();

package/dist/esm/components/ds-toast-message/styles/common.styles.js

@@ -5,6 +5,142 @@ var t = e`
     :host {
         display: contents;
     }
+
+    .container {
+        display: inline-flex;
+        box-sizing: border-box;
+        flex-direction: row;
+        width: auto;
+        min-width: 288px;
+        max-width: 317px;
+        padding: var(--ds-spacing-m-1);
+        align-items: flex-start;
+        gap: var(--ds-spacing-s-5);
+        border-radius: var(--ds-border-radius-m);
+        border-width: var(--ds-border-width-l);
+        border-style: solid;
+        border-color: var(--ds-color-border-selected);
+        background: var(--ds-card-bg-color-default);
+        box-shadow: 0px 4px 4px 0px var(--ds-opacity-black-20);
+        backdrop-filter: blur(60px);
+    }
+
+    .container.warning {
+        border-color: var(--ds-color-border-feedback-warning);
+    }
+
+    .container.info {
+        border-color: var(--ds-color-border-feedback-info);
+    }
+
+    .container.error {
+        border-color: var(--ds-color-border-feedback-error);
+    }
+
+    .container.success {
+        border-color: var(--ds-color-border-feedback-success);
+    }
+
+    .icon {
+        --ui-kit-icon-color: var(--ds-color-border-selected);
+    }
+
+    .container.warning .icon {
+        --ui-kit-icon-color: var(--ds-color-border-feedback-warning);
+    }
+
+    .container.info .icon {
+        --ui-kit-icon-color: var(--ds-color-border-feedback-info);
+    }
+
+    .container.error .icon {
+        --ui-kit-icon-color: var(--ds-color-border-feedback-error);
+    }
+
+    .container.success .icon {
+        --ui-kit-icon-color: var(--ds-color-border-feedback-success);
+    }
+
+    .content {
+        display: flex;
+        flex: 1 1 auto;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 8px;
+        align-self: stretch;
+    }
+
+    .header {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--ds-spacing-s-3);
+        align-self: stretch;
+    }
+
+    .title {
+        color: var(--ds-color-text-default);
+        font-family: var(--ds-typography-family-primary);
+        font-size: var(--ds-typography-size-headline-xs);
+        font-style: normal;
+        font-weight: 400;
+        line-height: var(--ds-typography-height-headline-xs);
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+    }
+
+    .message {
+        color: var(--ds-color-text-default);
+        font-family: var(--ds-typography-family-primary);
+        font-size: var(--ds-typography-size-body-m);
+        font-style: normal;
+        font-weight: 350;
+        line-height: var(--ds-typography-height-body-m);
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 4;
+        overflow: hidden;
+        text-align: left;
+    }
+
+    @media (min-width: 480px) {
+        .container {
+            min-width: 318px;
+            max-width: 456px;
+        }
+    }
+
+    @media (min-width: 768px) {
+        .container {
+            min-width: 457px;
+            max-width: 463px;
+        }
+    }
+
+    @media (min-width: 1024px) {
+        .container {
+            min-width: 464px;
+            max-width: 547px;
+        }
+    }
+
+    @media (min-width: 1440px) {
+        .container {
+            min-width: 548px;
+            max-width: 575px;
+        }
+    }
+
+    @media (min-width: 1920px) {
+        .container {
+            min-width: 576px;
+            max-width: 732px;
+        }
+    }
 `;
 //#endregion
 export { t as toastMessageStyles };