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

package/dist-react/esm/components/ds-checkbox-group/styles/common.styles.js

@@ -18,6 +18,93 @@ var t = e`
         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);
+    }
+
+    .checkboxes-container {
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+    }
+    .horizontal .checkboxes-container {
+        display: flex;
+        gap: var(--ds-spacing-m-4);
+    }
+    .vertical .checkboxes-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);
+    }
 `;
 //#endregion
 export { t as commonStyles };

package/dist-react/esm/components/ds-icon-button-group/styles/common.styles.js

@@ -14,6 +14,15 @@ var t = e`
         border-radius: var(--ds-border-radius-xs, 6px);
         overflow: hidden;
     }
+
+    .container {
+        background-image: linear-gradient(
+            179.78deg,
+            var(--ds-color-interaction-subtle-alternative-bg-default-start) 0.73%,
+            var(--ds-color-interaction-subtle-alternative-bg-default-mid) 84.63%,
+            var(--ds-color-interaction-subtle-alternative-bg-default-end) 99.44%
+        );
+    }
 `;
 //#endregion
 export { t as commonStyles };

package/dist-react/esm/components/ds-interactive-card/styles/common.styles.js

@@ -5,6 +5,220 @@ var t = e`
     :host {
         display: contents;
     }
+
+    .container {
+        position: relative;
+        backdrop-filter: blur(60px);
+        border: 1px solid var(--ds-color-border-default);
+        border-radius: var(--ds-border-radius-m);
+        padding: var(--ds-spacing-m-2);
+        width: 320px;
+        background: var(--ds-card-bg-color-default);
+        display: flex;
+        flex-direction: column;
+        cursor: pointer;
+        box-sizing: border-box;
+    }
+
+    .container:not(.error):hover {
+        background: var(--ds-card-bg-color-hover);
+    }
+    .container:not(.error):active {
+        background: var(--ds-card-bg-color-pressed);
+    }
+    .container:not(.error):focus-visible {
+        outline: var(--ds-border-width-l) solid var(--ds-color-border-focus-ring);
+        outline-offset: 2px;
+    }
+    .container:not(.error).selected {
+        border: var(--ds-border-width-m) solid var(--ds-color-border-selected-subtle);
+        background: var(--ds-card-bg-color-default);
+    }
+
+    .container.error {
+        pointer-events: none;
+    }
+
+    .header {
+        display: flex;
+        padding: var(--ds-spacing-s-1);
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--ds-spacing-s-5);
+        align-self: stretch;
+    }
+
+    .header-main {
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+        gap: 8px;
+        width: 100%;
+    }
+
+    .title {
+        flex: 1 1 auto;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        color: var(--ds-color-text-default);
+        font-family: var(--ds-typography-family-primary), sans-serif;
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+        font-weight: 500;
+    }
+
+    .subtitle {
+        white-space: nowrap;
+        color: var(--ds-color-text-default-subtlest);
+        font-family: var(--ds-typography-family-primary), sans-serif;
+        font-weight: 350;
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-m);
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+    }
+
+    .meta {
+        width: 100%;
+        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);
+    }
+    .content {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        width: 100%;
+        color: var(--ds-color-text-default-subtlest);
+        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);
+    }
+
+    .cta {
+        width: 100%;
+    }
+
+    .error {
+        display: flex;
+        width: 320px;
+        padding: var(--ds-spacing-m-2);
+        align-items: flex-start;
+        gap: var(--ds-spacing-s-5);
+        border-radius: var(--ds-border-radius-m);
+        border: var(--ds-border-width-m) solid var(--ds-color-border-default);
+        background: var(--ds-card-bg-color-default);
+        backdrop-filter: blur(60px);
+    }
+
+    .error-content {
+        display: flex;
+        padding: var(--ds-spacing-s-1);
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--ds-spacing-s-5);
+        flex: 1 0 0;
+        align-self: stretch;
+    }
+
+    .error-title {
+        color: var(--ds-color-text-default);
+
+        font-family: var(--ds-typography-family-primary);
+        font-style: normal;
+        font-weight: 500;
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+    }
+
+    .error-text {
+        color: var(--ds-color-text-default);
+
+        font-family: var(--ds-typography-family-primary);
+        font-style: normal;
+        font-weight: 350;
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+    }
+
+    .large .error-title {
+        font-size: var(--ds-typography-size-body-l);
+        line-height: var(--ds-typography-height-body-l);
+    }
+
+    .large .error-text {
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-m);
+    }
+
+    .medium .error-title {
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-m);
+    }
+
+    .medium .error-text {
+        font-size: var(--ds-typography-size-body-s);
+        line-height: var(--ds-typography-height-body-s);
+    }
+
+    .icon {
+        --ui-kit-icon-color: var(--ds-color-icon-feedback-error);
+        --ui-kit-icon-width: 18px;
+        --ui-kit-icon-height: 18px;
+    }
+
+    .container.medium {
+        gap: var(--ds-spacing-s-5);
+    }
+
+    .container.medium .title {
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-m);
+    }
+
+    .container.medium .subtitle {
+        font-size: var(--ds-typography-size-body-s);
+        line-height: var(--ds-typography-height-body-s);
+    }
+
+    .container.medium .meta,
+    .container.medium .content {
+        font-size: var(--ds-typography-size-body-s);
+        line-height: var(--ds-typography-height-body-s);
+    }
+
+    .container.large {
+        gap: var(--ds-spacing-m-2);
+    }
+
+    .container.large .title {
+        font-size: var(--ds-typography-size-body-l);
+        line-height: var(--ds-typography-height-body-l);
+    }
+
+    .container.large .subtitle {
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-m);
+    }
+
+    .container.large .meta,
+    .container.medium .content {
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-m);
+    }
+
+    .close-button {
+        position: absolute;
+        top: var(--ds-spacing-s-5);
+        right: var(--ds-spacing-s-5);
+    }
+
+    .has-close .header-main {
+        box-sizing: border-box;
+        padding-right: var(--ds-spacing-l-2);
+    }
 `;
 //#endregion
 export { t as commonStyles };

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

@@ -7,6 +7,43 @@ var t = e`
         width: fit-content;
         padding: 16px 0;
     }
+
+    .ds-list {
+        display: flex;
+        flex-direction: column;
+        row-gap: var(--ds-sizing-16);
+        font-family: var(--ds-typography-family-primary);
+    }
+
+    ::slotted([slot='title']) {
+        color: var(--ds-color-neutral-10);
+        font-weight: 400;
+    }
+
+    ::slotted([slot='subtitle']) {
+        color: var(--ds-color-neutral-60);
+        font-weight: 400;
+    }
+
+    :host([size='medium']) ::slotted([slot='title']) {
+        font-size: var(--ds-typography-size-headline-xxs);
+        line-height: var(--ds-typography-height-headline-xxs);
+    }
+
+    :host([size='large']) ::slotted([slot='title']) {
+        font-size: var(--ds-typography-size-headline-xxs);
+        line-height: var(--ds-typography-height-headline-xxs);
+    }
+
+    :host([size='medium']) ::slotted([slot='subtitle']) {
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-xs);
+    }
+
+    :host([size='large']) ::slotted([slot='subtitle']) {
+        font-size: var(--ds-typography-size-body-l);
+        line-height: var(--ds-typography-height-body-s);
+    }
 `;
 //#endregion
 export { t as commonStyles };

package/dist-react/esm/components/ds-main-title/styles/common.styles.js

@@ -20,6 +20,64 @@ var t = e`
     ::slotted(*) {
         margin: 0;
     }
+
+    .container {
+        width: 100%;
+        gap: var(--ds-spacing-s-3);
+        box-sizing: border-box;
+    }
+
+    .container.alignment-center {
+        align-items: center;
+    }
+
+    .container.alignment-left {
+        align-items: flex-start;
+    }
+
+    ::slotted([slot='title']) {
+        margin: 0;
+        font-family: var(--ds-typography-family-primary);
+        font-weight: 300;
+        letter-spacing: var(--ds-typography-letter-spacing-base);
+        color: var(--ds-color-text-default);
+        font-size: var(--ds-typography-size-headline-m);
+        line-height: var(--ds-typography-height-headline-m);
+    }
+
+    ::slotted([slot='subtitle']) {
+        margin: 0;
+        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);
+        font-weight: 350;
+        color: var(--ds-color-text-default-subtlest);
+    }
+
+    .container.alignment-center ::slotted([slot='title']),
+    .container.alignment-center ::slotted([slot='subtitle']) {
+        text-align: center;
+    }
+
+    .container.alignment-left ::slotted([slot='title']),
+    .container.alignment-left ::slotted([slot='subtitle']) {
+        text-align: left;
+    }
+
+    @media (min-width: 1440px) {
+        ::slotted([slot='title']) {
+            font-size: var(--ds-typography-size-headline-m);
+            line-height: var(--ds-typography-height-headline-m);
+        }
+    }
+
+    @media (min-width: 1920px) {
+        ::slotted([slot='title']) {
+            font-size: var(--ds-typography-size-headline-l);
+            line-height: var(--ds-typography-height-headline-l);
+        }
+    }
 `;
 //#endregion
 export { t as commonStyles };

package/dist-react/esm/components/ds-media-control/styles/common.styles.js

@@ -47,6 +47,10 @@ var t = e`
     [part='container']:focus-visible {
         box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
     }
+
+    :host {
+        --ui-kit-icon-color: var(--ds-color-icon-default);
+    }
 `;
 //#endregion
 export { t as commonStyles };

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

@@ -16,6 +16,29 @@ var t = e`
         gap: var(--ui-kit-private-navigation-controls-section-gap, 12px);
         align-items: center;
     }
+
+    .container {
+        padding: var(--ds-spacing-s-5);
+        border-radius: var(--ds-border-radius-s);
+        border: var(--ds-border-width-m) solid var(--ds-color-border-default);
+        background: var(--ds-color-border-default);
+        backdrop-filter: blur(var(--ds-blur-level-03));
+        -webkit-backdrop-filter: blur(var(--ds-blur-level-03));
+    }
+
+    ::slotted(*:not(:first-child)) {
+        padding-inline-start: calc(var(--ds-spacing-m-3) + var(--ds-border-width-m));
+        background-image: linear-gradient(var(--ds-color-border-default), var(--ds-color-border-default));
+        background-size: var(--ds-border-width-m) 24px;
+        background-repeat: no-repeat;
+        background-position: calc(var(--ds-spacing-m-3) / 2) center;
+    }
+
+    @media (max-width: 1439px) {
+        :host {
+            --ui-kit-private-navigation-controls-section-gap: var(--ds-spacing-s-4);
+        }
+    }
 `;
 //#endregion
 export { t as commonStyles };

package/dist-react/esm/components/ds-password-input/ds-password-input.js

@@ -8,8 +8,9 @@ import { o as a } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit
 import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/if-defined.js";
 import "../ds-icon-button/ds-icon-button.js";
 import { DsTextInput as o } from "../ds-text-input/ds-text-input.js";
+import { commonStyles as s } from "./styles/common.styles.js";
 //#region src/components/ds-password-input/ds-password-input.ts
-var s = class extends o {
+var c, l = (c = class extends o {
 	constructor(...e) {
 		super(...e), this.dataAriaLabelHideButton = "", this.dataAriaLabelShowButton = "", this.visible = !1, this.handleClickIcon = () => {
 			this.visible ? (this.nativeInput.setAttribute("type", "password"), this.visible = !1) : (this.nativeInput.setAttribute("type", "text"), this.visible = !0);
@@ -28,12 +29,12 @@ var s = class extends o {
             data-aria-pressed=${String(this.visible)}
         ></ds-icon-button>`;
 	}
-};
+}, c.styles = [...o.styles, s], c);
 n([e({
 	type: String,
 	attribute: "data-aria-label-hide-button"
-})], s.prototype, "dataAriaLabelHideButton", void 0), n([e({
+})], l.prototype, "dataAriaLabelHideButton", void 0), n([e({
 	type: String,
 	attribute: "data-aria-label-show-button"
-})], s.prototype, "dataAriaLabelShowButton", void 0), n([t()], s.prototype, "visible", void 0), s = n([r("ds-password-input", { extendComponentNames: ["ds-text-input"] })], s);
+})], l.prototype, "dataAriaLabelShowButton", void 0), n([t()], l.prototype, "visible", void 0), l = n([r("ds-password-input", { extendComponentNames: ["ds-text-input"] })], l);
 //#endregion

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

@@ -0,0 +1,13 @@
+import { i as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+//#region src/components/ds-password-input/styles/common.styles.ts
+var t = e`
+    ::slotted(input[type='password']) {
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        display: flex;
+    }
+`;
+//#endregion
+export { t as commonStyles };

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

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