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

package/dist/esm/components/ds-breadcrumbs-item/ds-breadcrumbs-item.js

@@ -8,8 +8,9 @@ import { customUiKitElement as i } from "../../decorators/customUiKitElement.js"
 import { booleanConverter as a } from "../../utils/booleanConverter.js";
 import { e as o } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
 import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.js";
+import { commonStyles as s } from "./styles/common.styles.js";
 //#region src/components/ds-breadcrumbs-item/ds-breadcrumbs-item.ts
-var s = class extends r {
+var c, l = (c = class extends r {
 	constructor(...e) {
 		super(...e), this.selected = !1, this.disabled = !1, this.loading = !1;
 	}
@@ -29,18 +30,18 @@ var s = class extends r {
             </div>
         `;
 	}
-};
+}, c.styles = [s], c);
 n([t({
 	type: Boolean,
 	converter: a,
 	reflect: !0
-})], s.prototype, "selected", void 0), n([t({
+})], l.prototype, "selected", void 0), n([t({
 	type: Boolean,
 	converter: a,
 	reflect: !0
-})], s.prototype, "disabled", void 0), n([t({
+})], l.prototype, "disabled", void 0), n([t({
 	type: Boolean,
 	converter: a,
 	reflect: !0
-})], s.prototype, "loading", void 0), s = n([i("ds-breadcrumbs-item")], s);
+})], l.prototype, "loading", void 0), l = n([i("ds-breadcrumbs-item")], l);
 //#endregion

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

@@ -0,0 +1,77 @@
+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-breadcrumbs-item/styles/common.styles.ts
+var t = e`
+    .item-wrapper {
+        display: flex;
+        align-items: center;
+        width: fit-content;
+        cursor: default;
+
+        &:focus,
+        &:focus-visible {
+            outline-offset: var(--ds-border-radius-xxs);
+            border-radius: var(--ds-border-radius-xxs);
+            outline: var(--ds-border-width-l) solid var(--ds-color-border-focus-ring);
+        }
+    }
+
+    :host(:not([selected]):not([disabled]):not([loading]):hover) {
+        ::slotted([slot='item']) {
+            color: var(--ds-color-text-default-subtle);
+            cursor: pointer;
+        }
+    }
+
+    ::slotted([slot='item']) {
+        max-width: 208px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        display: inline-block;
+        vertical-align: middle;
+        color: var(--ds-color-text-default-subtlest);
+        font-family: var(--ds-typography-family-primary);
+        font-size: var(--ds-typography-size-body-l);
+        line-height: var(--ds-typography-height-body-l);
+        font-weight: var(--ds-typography-weight-body-secondary);
+        letter-spacing: var(--ds-typography-letter-spacing-base);
+        text-decoration: none;
+        cursor: default;
+    }
+
+    .selected ::slotted([slot='item']) {
+        color: var(--ds-color-text-selected-subtle);
+        font-weight: var(--ds-typography-weight-body-tertiary);
+    }
+
+    .disabled {
+        ::slotted([slot='item']) {
+            color: var(--ds-color-text-disabled);
+        }
+
+        &:hover {
+            color: var(--ds-color-text-disabled);
+        }
+    }
+
+    @keyframes shimmer {
+        0% {
+            background-position: 200% 0;
+        }
+        100% {
+            background-position: -200% 0;
+        }
+    }
+
+    .loading .skeleton-placeholder {
+        display: block;
+        width: 48px;
+        height: 16px;
+        background: var(--ds-skeleton-bg-color-default);
+        background-size: 200% 100%;
+        animation: shimmer 3s infinite linear;
+    }
+`;
+//#endregion
+export { t as commonStyles };

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

@@ -42,6 +42,94 @@ var t = e`
     .days-row {
         display: contents;
     }
+
+    :host {
+        display: inline-block;
+    }
+
+    .calendar {
+        padding: var(--ds-spacing-m-2);
+        box-sizing: border-box;
+    }
+
+    .calendar.plane {
+        background: var(--ds-color-surface-default);
+        border-radius: var(--ds-border-radius-m);
+    }
+
+    .calendar.elevated {
+        background: var(--ds-color-surface-default-subtlest);
+        border-radius: var(--ds-border-radius-xs);
+        box-shadow: 0 8px 32px 0 var(--ds-opacity-black-60);
+        backdrop-filter: blur(80px);
+    }
+
+    .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: var(--ds-spacing-m-1);
+    }
+
+    .month-year {
+        font-family: var(--ds-typography-family-primary);
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-m);
+        font-weight: var(--ds-typography-weight-body-secondary);
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+        color: var(--ds-color-text-default);
+        text-align: center;
+        flex: 1;
+    }
+
+    .nav-button {
+        flex-shrink: 0;
+    }
+
+    .weekdays {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        gap: var(--ds-spacing-s-3);
+        margin-bottom: var(--ds-spacing-s-3);
+    }
+
+    .weekday {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 44px;
+        font-family: var(--ds-typography-family-primary);
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-m);
+        font-weight: var(--ds-typography-weight-body-secondary);
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+        color: var(--ds-color-text-default-subtlest);
+    }
+
+    .days-grid {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        gap: var(--ds-spacing-s-3);
+    }
+
+    .calendar.medium {
+        padding: var(--ds-spacing-m-1);
+    }
+
+    .calendar.medium .header {
+        margin-bottom: var(--ds-spacing-s-3);
+    }
+
+    .calendar.medium .month-year {
+        font-size: var(--ds-typography-size-body-s);
+        line-height: var(--ds-typography-height-body-s);
+    }
+
+    .calendar.medium .weekday {
+        height: 32px;
+        font-size: var(--ds-typography-size-body-s);
+        line-height: var(--ds-typography-height-body-s);
+    }
 `;
 //#endregion
 export { t as commonStyles };

package/dist/esm/components/ds-calendar-day/styles/common.styles.js

@@ -23,6 +23,84 @@ var t = e`
         cursor: default;
         pointer-events: none;
     }
+
+    :host {
+        display: inline-flex;
+    }
+
+    .day {
+        width: var(--ds-spacing-44);
+        height: var(--ds-spacing-44);
+        border-radius: var(--ds-border-radius-full);
+        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-m);
+        font-weight: var(--ds-typography-weight-body-secondary);
+        color: var(--ds-color-text-default-subtlest);
+        background: transparent;
+        border: 1px solid transparent;
+        transition:
+            background-color 0.15s ease,
+            color 0.15s ease,
+            border-color 0.15s ease;
+    }
+
+    .day.outside-month {
+        color: var(--ds-color-text-disabled);
+        opacity: 0.5;
+        cursor: default;
+    }
+
+    .day:not(.outside-month):not(.disabled):not(.selected):not(.today) {
+        color: var(--ds-color-text-default);
+    }
+
+    .day:not(.disabled):not(.selected):hover {
+        color: var(--ds-color-text-default);
+        background: var(--ds-color-surface-container-hover);
+    }
+
+    .day:not(.disabled):not(.selected):active {
+        color: var(--ds-color-text-default);
+        background: var(--ds-color-surface-container-active);
+    }
+
+    .day.disabled {
+        color: var(--ds-color-text-disabled);
+        background: transparent;
+        border-color: transparent;
+    }
+
+    .day.selected {
+        color: var(--ds-color-text-selected-subtle);
+        background: var(--ds-color-surface-container-active);
+        border-color: var(--ds-color-border-selected-subtle);
+    }
+
+    .day.today:not(.selected) {
+        color: var(--ds-color-text-selected-subtle);
+        font-weight: var(--ds-typography-weight-body-primary);
+        background: transparent;
+        border-color: transparent;
+    }
+
+    .day.today.disabled {
+        color: var(--ds-color-text-disabled);
+        font-weight: var(--ds-typography-weight-body-primary);
+    }
+
+    .day:focus-visible {
+        outline: 2px solid var(--ds-color-border-focus-ring);
+        outline-offset: 2px;
+    }
+
+    .day.medium {
+        width: var(--ds-sizing-32);
+        height: var(--ds-sizing-32);
+        font-size: var(--ds-typography-size-body-s);
+        line-height: var(--ds-typography-height-body-s);
+    }
 `;
 //#endregion
 export { t as commonStyles };

package/dist/esm/components/ds-carousel-indicator/styles/common.styles.js

@@ -12,6 +12,56 @@ var t = e`
     .container {
         display: flex;
     }
+
+    .container {
+        padding: 8px;
+    }
+    .selector {
+        height: var(--ds-sizing-04);
+        transition:
+            width 0.3s cubic-bezier(0, 0, 0.2, 1),
+            margin 0.3s cubic-bezier(0, 0, 0.2, 1);
+        width: 40px;
+        margin: 0 2px;
+        border-radius: var(--ds-border-radius-full);
+        background: var(--ds-indicator-bg-color-default);
+    }
+    .selector.selected {
+        width: 64px;
+        background: var(--ds-indicator-bg-color-active-primary);
+    }
+    .selector.hidden {
+        width: 0px;
+        margin: 0px;
+    }
+    .infinite .selector.selected {
+        width: 40px;
+    }
+    .infinite .selector:not(.hidden):has(+ .hidden) {
+        width: 16px;
+    }
+    .infinite .selector.hidden:has(+ :not(.hidden)) + .selector {
+        width: 16px;
+    }
+    .infinite
+        .selector:first-child:not(.selected):not(.hidden):has(
+            + :not(.hidden):not(.selected) + :not(.hidden):not(.selected) + .selected:not(.hidden)
+        ) {
+        width: 16px;
+    }
+    .infinite
+        .selector.selected:not(.hidden)
+        + :not(.selected):not(.hidden)
+        + :not(.selected):not(.hidden)
+        + :not(.selected):not(.hidden):last-child {
+        width: 16px;
+    }
+    .infinite .selector:not(.hidden):has(+ :not(.hidden) + .hidden) {
+        width: 24px;
+    }
+    .infinite .selector.hidden:has(+ :not(.hidden) + :not(.hidden)) + .selector + .selector {
+        width: 24px;
+    }
 `;
 //#endregion
 export { t as commonStyles };

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