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

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

@@ -5,6 +5,123 @@ var t = e`
     :host {
         display: contents;
     }
+
+    .container {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: var(--ds-border-radius-full);
+        background: var(--ds-icon-button-bg-color-rounded-default);
+        user-select: none;
+        cursor: pointer;
+        overflow: hidden;
+        transition: all 0.3s cubic-bezier(0, 0, 0.2, 1);
+        flex: 0 0 auto;
+    }
+
+    .container:not(.disabled):hover {
+        background: var(--ds-icon-button-bg-color-rounded-hover);
+    }
+
+    .container:not(.disabled):active {
+        background: var(--ds-icon-button-bg-color-rounded-pressed);
+    }
+
+    .container:focus-visible {
+        outline: var(--ds-border-width-l) solid var(--ds-color-border-focus-ring);
+        outline-offset: 2px;
+        background: var(--ds-icon-button-bg-color-rounded-focus);
+    }
+
+    .container.disabled {
+        background: var(--ds-icon-button-bg-color-rounded-disabled);
+    }
+
+    .container.large {
+        width: var(--ds-sizing-48);
+        height: var(--ds-sizing-48);
+    }
+
+    .container.medium {
+        width: var(--ds-sizing-40);
+        height: var(--ds-sizing-40);
+    }
+
+    .container.small {
+        width: var(--ds-sizing-36);
+        height: var(--ds-sizing-36);
+    }
+
+    .container .icon {
+        --ui-kit-icon-color: var(--ds-icon-button-icon-color-quaternary-default);
+    }
+
+    .container.large .icon {
+        --ui-kit-icon-width: var(--ds-sizing-24);
+        --ui-kit-icon-height: var(--ds-sizing-24);
+    }
+    .container.medium .icon {
+        --ui-kit-icon-width: var(--ds-sizing-20);
+        --ui-kit-icon-height: var(--ds-sizing-20);
+    }
+    .container.small .icon {
+        --ui-kit-icon-width: var(--ds-sizing-16);
+        --ui-kit-icon-height: var(--ds-sizing-16);
+    }
+
+    .container.disabled .icon {
+        --ui-kit-icon-color: var(--ds-icon-button-icon-color-quaternary-disabled);
+    }
+
+    .container .initials {
+        overflow: hidden;
+        color: var(--ds-color-text-default-static);
+        text-align: center;
+        text-overflow: ellipsis;
+        font-family: var(--ds-typography-family-primary);
+        font-style: normal;
+        font-weight: var(--ds-typography-weight-body-secondary);
+        letter-spacing: var(--ds-typography-letter-spacing-base);
+    }
+
+    .container.large .initials {
+        font-size: var(--ds-typography-size-body-l);
+        line-height: var(--ds-typography-height-body-l);
+    }
+    .container.medium .initials {
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-m);
+    }
+    .container.small .initials {
+        font-size: var(--ds-typography-size-body-s);
+        line-height: var(--ds-typography-height-body-s);
+    }
+
+    .container.disabled .initials {
+        color: var(--ds-color-text-disabled);
+    }
+
+    ::slotted(img[slot='media']) {
+        width: 100%;
+        object-fit: cover;
+        display: block;
+    }
+
+    .mode-media.container {
+        filter: brightness(1);
+    }
+
+    .mode-media.container:not(.disabled):hover {
+        filter: brightness(1.1);
+    }
+
+    .mode-media.container:not(.disabled):active {
+        filter: brightness(1.25);
+    }
+
+    .mode-media.container.disabled {
+        filter: grayscale(1) brightness(0.5);
+    }
 `;
 //#endregion
 export { t as commonStyles };

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

@@ -5,6 +5,48 @@ var t = e`
     :host {
         display: inline-flex;
     }
+
+    .container {
+        border-radius: var(--ds-border-radius-full);
+    }
+
+    .number {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: var(--ds-typography-family-primary);
+        font-weight: 400;
+    }
+
+    .number.size-large {
+        width: var(--ds-sizing-24);
+        height: var(--ds-sizing-24);
+        font-size: var(--ds-typography-size-body-s);
+        line-height: var(--ds-typography-height-body-s);
+    }
+
+    .number.size-medium {
+        width: var(--ds-sizing-16);
+        height: var(--ds-sizing-16);
+        font-size: var(--ds-typography-size-body-xs);
+        line-height: var(--ds-typography-height-body-xs);
+    }
+
+    .variant-base {
+        color: var(--ds-color-text-default);
+        background-color: var(--ds-color-bg-default);
+    }
+
+    .variant-inverted {
+        background-color: var(--ds-color-bg-default-inverted);
+        color: var(--ds-color-text-default-inverted);
+    }
+
+    .dot {
+        width: var(--ds-sizing-08);
+        height: var(--ds-sizing-08);
+        background-color: var(--ds-color-surface-feedback-error);
+    }
 `;
 //#endregion
 export { t as commonStyles };

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

@@ -13,18 +13,19 @@ import "../ds-tooltip/ds-tooltip.js";
 import { s, u as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/static.js";
 import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/static-html.js";
 import "../ds-breadcrumbs-item/ds-breadcrumbs-item.js";
+import { commonStyles as l } from "./styles/common.styles.js";
 //#region src/components/ds-breadcrumbs/ds-breadcrumbs.ts
-var l = [{
+var u, d = [{
 	below: 768,
 	maxItems: 3
 }, {
 	below: 1024,
 	maxItems: 4
-}], u = 5, d = class extends r {
+}], f = 5, p = (u = class extends r {
 	constructor(...e) {
-		super(...e), this.items = [], this.maxItems = u, this.itemTag = "ds-breadcrumbs-item", this.onResize = () => {
-			let e = l.find(({ below: e }) => window.innerWidth < e);
-			this.maxItems = (e == null ? void 0 : e.maxItems) ?? u;
+		super(...e), this.items = [], this.maxItems = f, this.itemTag = "ds-breadcrumbs-item", this.onResize = () => {
+			let e = d.find(({ below: e }) => window.innerWidth < e);
+			this.maxItems = (e == null ? void 0 : e.maxItems) ?? f;
 		};
 	}
 	async firstUpdated(e) {
@@ -113,6 +114,6 @@ var l = [{
             </nav>
         `;
 	}
-};
-n([t()], d.prototype, "items", void 0), n([t()], d.prototype, "maxItems", void 0), n([t()], d.prototype, "itemTag", void 0), d = n([i("ds-breadcrumbs")], d);
+}, u.styles = [l], u);
+n([t()], p.prototype, "items", void 0), n([t()], p.prototype, "maxItems", void 0), n([t()], p.prototype, "itemTag", void 0), p = n([i("ds-breadcrumbs")], p);
 //#endregion

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

@@ -0,0 +1,112 @@
+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/styles/common.styles.ts
+var t = e`
+    .breadcrumb-list {
+        display: flex;
+        align-items: center;
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        flex-wrap: nowrap;
+        gap: var(--ds-spacing-s-3);
+        width: 100%;
+    }
+
+    .breadcrumb-list-item {
+        display: flex;
+        align-items: center;
+        gap: var(--ds-spacing-s-3);
+    }
+
+    .separator-icon {
+        --ui-kit-icon-color: var(--ds-color-text-default-subtlest);
+    }
+
+    .breadcrumbs-tooltip::part(container) {
+        max-height: none;
+        max-width: none;
+        overflow: visible;
+        padding: 0;
+    }
+
+    .overflow-item-wrapper {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--ds-spacing-s-3);
+    }
+
+    .overflow-trigger {
+        background: none;
+        border: none;
+        padding: 0;
+        cursor: pointer;
+
+        &: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);
+        }
+
+        &:disabled {
+            cursor: default;
+
+            .overflow-label {
+                color: var(--ds-color-text-disabled);
+            }
+        }
+    }
+
+    .overflow-label {
+        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);
+    }
+
+    .overflow-menu {
+        display: flex;
+        flex-direction: column;
+        padding: 0;
+        margin: 0;
+    }
+
+    .overflow-menu-item {
+        display: flex;
+        min-height: 40px;
+        padding: var(--ds-spacing-s-5) var(--ds-spacing-m-1);
+        align-items: center;
+        gap: var(--ds-spacing-s-5);
+        align-self: stretch;
+        border-radius: var(--ds-border-radius-none);
+        border-bottom: 1px solid var(--ds-color-border-default-subtle);
+        text-decoration: none;
+
+        &:hover {
+            cursor: pointer;
+            background: var(--ds-color-control-bg-hover);
+        }
+
+        &:focus,
+        &:focus-visible {
+            background: var(--ds-color-control-bg-hover);
+            outline: var(--ds-border-width-l) solid var(--ds-color-border-focus-ring);
+        }
+    }
+
+    .overflow-menu-link {
+        overflow: hidden;
+        color: var(--ds-color-text-default);
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font: var(--ds-typography-weight-body-secondary) var(--ds-typography-size-body-m) /
+            var(--ds-typography-height-body-m) var(--ds-typography-family-primary);
+        letter-spacing: var(--ds-typography-letter-spacing-base);
+        margin: 0;
+        text-decoration: none;
+    }
+`;
+//#endregion
+export { t as commonStyles };

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