npm - @cupra/ui-kit - Versions diffs - 2.0.0-canary.23 → 2.0.0-canary.231 - Mend

@cupra/ui-kit 2.0.0-canary.23 → 2.0.0-canary.231

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2482) hide show

package/dist-react/esm/components/ds-select/styles/seat-legacy.styles.js ADDED Viewed

@@ -0,0 +1,324 @@
+import { css as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
+//#region src/components/ds-select/styles/seat-legacy.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat-legacy']) .container {
+        position: relative;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container.primary {
+        --ui-kit-icon-color: var(--dg-color-glass-text-default);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container.secondary {
+        --ui-kit-icon-color: var(--dg-color-field-text-default);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container.secondary:has(:hover) {
+        --ui-kit-icon-color: var(--dg-color-field-text-hover);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container.secondary:has(:focus-visible) {
+        --ui-kit-icon-color: var(--dg-color-field-text-focus);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container.secondary.open {
+        --ui-kit-icon-color: var(--dg-color-field-text-selected);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container.secondary.filled {
+        --ui-kit-icon-color: var(--dg-color-field-text-filled);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container.primary.disabled {
+        --ui-kit-icon-color: var(--dg-color-glass-text-disabled);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container.secondary.disabled {
+        --ui-kit-icon-color: var(--dg-color-field-icon-disabled);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container.medium {
+        --ui-kit-icon-width: 1.25rem;
+        --ui-kit-icon-height: 1.25rem;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container.small {
+        --ui-kit-icon-width: 1.25rem;
+        --ui-kit-icon-height: 1.25rem;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container.large {
+        --ui-kit-icon-width: 1.5rem;
+        --ui-kit-icon-height: 1.5rem;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .select-outline {
+        border-radius: var(--dg-border-radius-xxs);
+        outline-style: solid;
+        outline-width: 0.125rem;
+        outline-offset: 0.125rem;
+        outline-color: transparent;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .select-outline:has(.select:focus-visible) {
+        outline-color: var(--dg-button-outline-color-focus);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .select-container {
+        display: flex;
+        flex-direction: column;
+        box-sizing: border-box;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .primary .select-container {
+        justify-content: center;
+        gap: var(--dg-spacing-s-3);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .secondary .select-container {
+        gap: var(--dg-spacing-s-1);
+        border-radius: var(--dg-border-radius-xxs) var(--dg-border-radius-xxs) var(--dg-border-radius-none)
+            var(--dg-border-radius-none);
+        border-bottom: var(--dg-border-width-m) solid var(--dg-color-field-border-default);
+        background: var(--dg-color-field-bg-default);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .secondary.filled .select-container {
+        border-bottom: var(--dg-border-width-m) solid var(--dg-color-field-border-filled);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .secondary.open .select-container {
+        border-bottom: var(--dg-border-width-l) solid var(--dg-color-field-border-selected-default);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .secondary.invalid .select-container {
+        border-bottom: var(--dg-border-width-m) solid var(--dg-color-field-border-error);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .secondary.error .select-container {
+        border-bottom: var(--dg-border-width-m) solid var(--dg-color-field-border-error);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .secondary.disabled .select-container {
+        border-bottom: var(--dg-border-width-m) solid var(--dg-color-field-border-disabled);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .secondary.medium .select-container {
+        height: var(--dg-size-64, 64px);
+        padding: var(--dg-spacing-s-5) var(--dg-spacing-m-1) var(--dg-spacing-s-1) var(--dg-spacing-m-1);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .secondary.small .select-container {
+        padding: var(--dg-spacing-s-5) var(--dg-spacing-s-5) var(--dg-spacing-s-1) var(--dg-spacing-s-5);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .secondary.large .select-container {
+        height: var(--dg-size-76, 76px);
+        padding: var(--dg-spacing-s-5) var(--dg-spacing-m-1) var(--dg-spacing-s-1) var(--dg-spacing-m-1);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .select {
+        transition: all 200ms ease-in-out;
+        outline: none;
+        display: flex;
+        box-sizing: border-box;
+        align-items: center;
+        justify-content: space-between;
+        flex: 1 1 auto;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        letter-spacing: var(--dg-font-letter-spacing-m);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .primary.medium .select {
+        height: var(--dg-size-48);
+        padding: var(--dg-spacing-m-1) var(--dg-spacing-m-2);
+        font: 700 var(--dg-font-size-body-l) / var(--dg-font-height-body-l) var(--dg-font-family-base);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .primary.large .select {
+        height: var(--dg-size-48);
+        padding: var(--dg-spacing-m-1) var(--dg-spacing-m-2);
+        font: 700 var(--dg-font-size-body-l) / var(--dg-font-height-body-l) var(--dg-font-family-base);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .primary.small .select {
+        height: var(--dg-size-40);
+        padding: var(--dg-spacing-s-5) var(--dg-spacing-m-1);
+        font: 700 var(--dg-font-size-body-m) / var(--dg-font-height-body-m) var(--dg-font-family-base);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .secondary.medium .select {
+        padding: var(--dg-spacing-m-1) 0;
+        font: 400 var(--dg-font-size-body-m) / var(--dg-font-height-body-m) var(--dg-font-family-base);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .secondary.large .select {
+        padding: var(--dg-spacing-s-5) 0;
+        min-height: var(--dg-size-48);
+        font: 400 var(--dg-font-size-body-l) / var(--dg-font-height-body-l) var(--dg-font-family-base);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .secondary.small .select {
+        padding: var(--dg-spacing-s-5) 0;
+        font: 700 var(--dg-font-size-body-m) / var(--dg-font-height-body-m) var(--dg-font-family-base);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .primary .select {
+        border-radius: var(--dg-border-radius-xxxs);
+        border: var(--dg-border-width-m) solid var(--dg-color-field-text-default);
+        background: transparent;
+        color: var(--dg-color-glass-text-default);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .primary.filled .select {
+        border: var(--dg-border-width-m) solid var(--dg-color-glass-border-filled);
+        background: transparent;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .primary.invalid .select {
+        border: var(--dg-border-width-m) solid var(--dg-color-glass-border-error);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .primary.error .select {
+        border: var(--dg-border-width-m) solid var(--dg-color-glass-border-error);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .primary.disabled .select {
+        border: var(--dg-border-width-m) solid var(--dg-color-glass-border-disabled);
+        background: transparent;
+        color: var(--dg-color-glass-text-disabled);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .primary .select:hover {
+        border: var(--dg-border-width-l) solid var(--dg-color-field-text-default);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .primary .select:focus-visible {
+        border: var(--dg-border-width-l) solid var(--dg-color-field-text-default);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .primary.open .select {
+        background: transparent;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .secondary .select {
+        color: var(--dg-color-field-text-default);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .secondary .select:hover {
+        color: var(--dg-color-field-text-hover);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .secondary .select:focus-visible {
+        color: var(--dg-color-field-text-focus);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .secondary.open .select {
+        color: var(--dg-color-field-text-selected);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .secondary.filled .select {
+        color: var(--dg-color-field-text-filled);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .secondary.disabled .select {
+        color: var(--dg-color-field-icon-disabled);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .select-content {
+        flex: 1 1 auto;
+        box-sizing: border-box;
+        align-items: center;
+        gap: var(--dg-spacing-s-5);
+        display: flex;
+        overflow: hidden;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .select-content .text {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: 100%;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .options-container {
+        display: none;
+        box-sizing: border-box;
+        margin-top: var(--dg-spacing-s-3);
+        width: 100%;
+        position: absolute;
+        z-index: var(--ds-z-index-default);
+        padding: var(--dg-spacing-s-5) 0;
+        flex-direction: column;
+        align-items: flex-start;
+        border-radius: var(--dg-border-radius-xxxs);
+        border-style: solid;
+        border-width: var(--dg-border-width-m);
+        border-color: var(--dg-color-glass-border-default);
+        background: var(--dg-color-bg-base);
+        box-shadow: none;
+        max-height: 15rem;
+        overflow-y: auto;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .open .options-container {
+        display: flex;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .option {
+        display: flex;
+        width: 100%;
+        box-sizing: border-box;
+        padding: var(--dg-spacing-s-5) var(--dg-spacing-s-5) var(--dg-spacing-s-5) var(--dg-spacing-m-2);
+        align-items: flex-start;
+        gap: var(--dg-spacing-s-5);
+        color: var(--dg-color-text-strong);
+        letter-spacing: var(--dg-font-letter-spacing-m);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .medium .option,
+    :host([data-ui-kit-theme='seat-legacy']) .large .option {
+        font: 400 var(--dg-font-size-body-l) / var(--dg-font-height-body-l) var(--dg-font-family-base);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .small .option {
+        font: 400 var(--dg-font-size-body-m) / var(--dg-font-height-body-m) var(--dg-font-family-base);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .option.selected {
+        padding: var(--dg-spacing-s-5) var(--dg-spacing-s-5) var(--dg-spacing-s-5) calc(var(--dg-spacing-m-2) - 0.25rem);
+        background: var(--dg-color-field-bg-selected-surface);
+        border-left: 4px solid var(--dg-color-field-bg-selected);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .option:last-child {
+        border-bottom: none;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .option:hover {
+        background: var(--dg-color-field-bg-selected-surface);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .primary.medium .label {
+        padding: var(--dg-spacing-s-3) 0 0 var(--dg-spacing-m-2);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .primary.small .label {
+        padding: var(--dg-spacing-s-3) 0 0 var(--dg-spacing-m-1);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .label {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        letter-spacing: var(--dg-font-letter-spacing-m);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .primary .label {
+        color: var(--dg-color-field-text-default);
+        font: 400 var(--dg-font-size-body-m) / var(--dg-font-height-body-m) var(--dg-font-family-base);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .secondary.medium .label,
+    :host([data-ui-kit-theme='seat-legacy']) .secondary.large .label {
+        color: var(--ds-field-text-color-label-default, #2d2d2d);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .secondary.large .label {
+        font-size: var(--dg-font-size-body-m);
+        line-height: var(--dg-font-height-body-m);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .secondary.small .label {
+        color: var(--dg-color-field-text-default);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .primary.medium.disabled .label {
+        color: var(--dg-color-field-text-focus-specific);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .primary.small.disabled .label {
+        color: var(--dg-color-field-text-disabled);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .secondary.medium.disabled .label,
+    :host([data-ui-kit-theme='seat-legacy']) .secondary.large.disabled .label {
+        color: var(--dg-color-field-text-disabled);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .secondary.small.disabled .label {
+        color: var(--dg-color-text-disabled);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .secondary .label {
+        font: 350 var(--dg-font-size-body-s) / var(--dg-font-height-body-s) var(--dg-font-family-base);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) ::slotted([slot='forced-error']) {
+        margin-top: var(--dg-spacing-s-3);
+        color: var(--dg-color-field-text-error);
+        letter-spacing: var(--dg-font-letter-spacing-m);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .medium ::slotted([slot='forced-error']),
+    :host([data-ui-kit-theme='seat-legacy']) .large ::slotted([slot='forced-error']) {
+        font: 400 var(--dg-font-size-body-m) / var(--dg-font-height-body-m) var(--dg-font-family-base);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .small ::slotted([slot='forced-error']) {
+        font: 400 var(--dg-font-size-body-s) / var(--dg-font-height-body-s) var(--dg-font-family-base);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .error ::slotted([slot='invalid-error']) {
+        display: none;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container:not(.invalid) ::slotted([slot='invalid-error']) {
+        display: none;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) ::slotted([slot='invalid-error']) {
+        margin-top: var(--dg-spacing-s-3);
+        color: var(--dg-color-field-text-error);
+        letter-spacing: var(--dg-font-letter-spacing-m);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .medium ::slotted([slot='invalid-error']),
+    :host([data-ui-kit-theme='seat-legacy']) .large ::slotted([slot='invalid-error']) {
+        font: 400 var(--dg-font-size-body-m) / var(--dg-font-height-body-m) var(--dg-font-family-base);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .small ::slotted([slot='invalid-error']) {
+        font: 400 var(--dg-font-size-body-s) / var(--dg-font-height-body-s) var(--dg-font-family-base);
+    }
+`;
+//#endregion
+export { t as seatLegacyStyles };