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

package/dist/cjs/components/ds-checkbox-group/ds-checkbox-group.cjs

@@ -0,0 +1,15 @@
+const e=require("../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/create-context.cjs"),t=require("../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/decorators/provide.cjs"),n=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.cjs"),r=require("../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");const i=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.cjs");const a=require("../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.cjs"),o=require("../../decorators/customUiKitElement.cjs"),s=require("../../utils/booleanConverter.cjs"),c=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/class-map.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/class-map.cjs");const l=require("./styles/common.styles.cjs");var u,d=e.createContext(Symbol(`ds-checkbox-group:disabled`)),f=e.createContext(Symbol(`ds-checkbox-group:error`)),p=e.createContext(Symbol(`ds-checkbox-group:error-text`)),m=e.createContext(Symbol(`ds-checkbox-group:helper-text`)),h=e.createContext(Symbol(`ds-checkbox-group:size`)),g=(u=class extends r.LitElement{constructor(...e){super(...e),this.error=!1,this.errorText=``,this.helperText=``,this.disabled=!1,this.size=`medium`,this.orientation=`vertical`}get classes(){return{container:!0,error:this.error,disabled:!!this.disabled,[this.size]:!0,[this.orientation]:!0}}render(){return n.html`
+            <div
+                data-testid="ds-checkbox-group-container"
+                class=${c.classMap(this.classes)}
+                .aria-invalid=${this.error}
+            >
+                <slot name="title"></slot>
+                <slot name="description"></slot>
+                <div class="checkboxes-container">
+                    <slot></slot>
+                </div>
+                ${!this.error&&this.helperText?n.html`<div class="helper-text">${this.helperText}</div>`:n.nothing}
+                ${this.error&&this.errorText?n.html`<div class="error-text">${this.errorText}</div>`:n.nothing}
+            </div>
+        `}},u.styles=[l.commonStyles],u);a.default([t.provide({context:f}),i.property({type:Boolean,converter:s.booleanConverter})],g.prototype,`error`,void 0),a.default([t.provide({context:p}),i.property({type:String,attribute:`error-text`})],g.prototype,`errorText`,void 0),a.default([t.provide({context:m}),i.property({type:String,attribute:`helper-text`})],g.prototype,`helperText`,void 0),a.default([t.provide({context:d}),i.property({type:Boolean,converter:s.booleanConverter})],g.prototype,`disabled`,void 0),a.default([t.provide({context:h}),i.property({type:String})],g.prototype,`size`,void 0),a.default([i.property({type:String,reflect:!0})],g.prototype,`orientation`,void 0),g=a.default([o.customUiKitElement(`ds-checkbox-group`)],g),Object.defineProperty(exports,"DsCheckboxGroup",{enumerable:!0,get:function(){return g}}),exports.checkboxGroupDisabledContext=d,exports.checkboxGroupErrorContext=f,exports.checkboxGroupErrorTextContext=p,exports.checkboxGroupHelperTextContext=m,exports.checkboxGroupSizeContext=h;

package/dist/cjs/components/ds-checkbox-group/styles/common.styles.cjs

@@ -0,0 +1,105 @@
+const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.cjs");require("../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");var t=e.css`
+    :host {
+        display: contents;
+    }
+
+    .container {
+        display: block;
+    }
+
+    .container.vertical ::slotted(ds-checkbox) {
+        display: block;
+    }
+
+    .container.horizontal ::slotted(ds-checkbox) {
+        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);
+    }
+`;exports.commonStyles=t;

package/dist/cjs/components/ds-chip/ds-chip.cjs

@@ -1,22 +1,33 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("../base/UiKitElement.cjs"),p=require("../../decorators/customUiKitElement.cjs"),h=require("../../utils/booleanConverter.cjs"),u=require("../../utils/htmlWithTokens.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const a=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const i=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),y=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs"),m=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),b=require("./styles/common.styles.cjs");var C=Object.defineProperty,f=Object.getOwnPropertyDescriptor,s=(l,e,r,o)=>{for(var t=o>1?void 0:o?f(e,r):e,n=l.length-1,c;n>=0;n--)(c=l[n])&&(t=(o?c(e,r,t):c(t))||t);return o&&t&&C(e,r,t),t};exports.DsChip=class extends d.UiKitElement{constructor(){super(...arguments),this.mode="light",this.size="large",this.selected=!1,this.deselectable=!1,this.slottedText=""}firstUpdated(e){super.firstUpdated(e);const o=this.shadowRoot.querySelector("slot").assignedNodes({flatten:!0});this.slottedText=o.filter(t=>t.nodeType===Node.TEXT_NODE).map(t=>t.textContent.trim()).join(" ")}get classes(){return{container:!0,"ds-blur":!0,[this.size]:!0,[this.mode]:!!this.mode,selected:this.selected,deselectable:this.deselectable}}get styleTokens(){return u.htmlWithTokens`
+const e=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");const t=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.cjs");const n=require("../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.cjs"),r=require("../base/UiKitElement.cjs"),i=require("../../decorators/customUiKitElement.cjs");require("../ds-icon/ds-icon.cjs");const a=require("../../utils/booleanConverter.cjs"),o=require("../../utils/uiKitHtml.cjs"),s=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/class-map.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/class-map.cjs");const c=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/if-defined.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/if-defined.cjs");const l=require("./styles/common.styles.cjs"),u=require("./styles/cupra-diagonal.styles.cjs"),d=require("./styles/cupra.styles.cjs"),f=require("./styles/seat-legacy.styles.cjs"),p=require("./styles/seat.styles.cjs");var m=class extends r.UiKitElement{constructor(...e){super(...e),this.mode=`light`,this.size=`large`,this.selected=!1,this.deselectable=!1,this.slottedText=``,this.handleSlotChange=e=>{let t=e.target.assignedNodes({flatten:!0});this.slottedText=t.filter(e=>e.nodeType===Node.TEXT_NODE).map(e=>e.textContent.trim()).join(` `),this.requestUpdate()}}get classes(){return{container:!0,"ds-blur":!0,[this.size]:!0,[this.mode]:!!this.mode,selected:this.selected,deselectable:this.deselectable}}get styleTokens(){return e.html`
                 <style>
                     :host{
                         color-scheme: ${this.mode};
-                        pointer-events: ${this.selected?"none":"visible"};
+                        pointer-events: ${this.selected?`none`:`visible`};
                     }
                 </style>
-        `}handleClick(){this.selected||this.dispatchEvent(new CustomEvent("select",{bubbles:!0,composed:!0,detail:{value:this.value}}))}handleKeyDown(e){(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this.handleClick())}handleClickIcon(e){e.stopImmediatePropagation(),!(!this.deselectable||!this.selected)&&this.dispatchEvent(new CustomEvent("deselect",{bubbles:!0,composed:!0,detail:{value:this.value}}))}handleKeyDownIcon(e){(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this.handleClickIcon(e))}get iconTemplate(){if(!this.selected||!this.deselectable)return a.nothing;const e=this.mode==="light"?"dark":"light";return this.componentFactory.createIcon({class:"icon","icon-name":"cross","data-testid":"ds-chip-icon","@click":this.handleClickIcon,"@keydown":this.handleKeyDownIcon,role:"button","aria-label":`deselect ${this.slottedText}`,tabindex:"0",mode:e})}render(){return a.html`
+        `}handleClick(){this.selected||this.dispatchEvent(new CustomEvent(`select`,{bubbles:!0,composed:!0,detail:{value:this.value}}))}handleKeyDown(e){(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),this.handleClick())}handleClickIcon(e){e.stopImmediatePropagation(),this.deselectable&&this.selected&&this.dispatchEvent(new CustomEvent(`deselect`,{bubbles:!0,composed:!0,detail:{value:this.value}}))}handleKeyDownIcon(e){(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),this.handleClickIcon(e))}get leadingIconTemplate(){return this.iconName?o.uiKitHtml`<ds-icon class="icon" icon-name=${c.ifDefined(this.iconName)}></ds-icon>`:e.nothing}get iconTemplate(){if(!this.selected||!this.deselectable)return e.nothing;let t=this.mode===`light`?`dark`:`light`;return o.uiKitHtml`<ds-icon
+            class="icon"
+            icon-name="cross"
+            mode=${t}
+            data-testid="ds-chip-icon"
+            @click=${this.handleClickIcon}
+            @keydown=${this.handleKeyDownIcon}
+            role="button"
+            aria-label=${`deselect ${this.slottedText}`}
+            tabindex="0"
+        ></ds-icon>`}render(){return e.html`
             ${this.styleTokens}
             <div
                 role="button"
                 aria-label=${`chip ${this.slottedText}`}
                 tabindex="0"
                 data-testid="ds-chip-container"
-                class=${m.classMap(this.classes)}
+                class=${s.classMap(this.classes)}
                 @click=${this.handleClick}
                 @keydown=${this.handleKeyDown}
             >
-                <slot></slot>
+                ${this.leadingIconTemplate}
+                <slot @slotchange=${this.handleSlotChange}></slot>
                 ${this.iconTemplate}
             </div>
-        `}};exports.DsChip.styles=[b.commonStyles];s([i.property({type:String})],exports.DsChip.prototype,"value",2);s([i.property({type:String,reflect:!0})],exports.DsChip.prototype,"mode",2);s([i.property({type:String,reflect:!0})],exports.DsChip.prototype,"size",2);s([i.property({type:Boolean,converter:h.booleanConverter,reflect:!0})],exports.DsChip.prototype,"selected",2);s([i.property({type:Boolean,converter:h.booleanConverter})],exports.DsChip.prototype,"deselectable",2);s([y.state()],exports.DsChip.prototype,"slottedText",2);exports.DsChip=s([p.customUiKitElement("ds-chip")],exports.DsChip);
+        `}},h=(m.styles=[l.commonStyles,u.cupraDiagonalStyles,p.seatStyles,d.cupraStyles,f.seatLegacyStyles],m);n.default([t.property({type:String})],h.prototype,`value`,void 0),n.default([t.property({type:String,reflect:!0})],h.prototype,`mode`,void 0),n.default([t.property({type:String,reflect:!0})],h.prototype,`size`,void 0),n.default([t.property({type:Boolean,converter:a.booleanConverter,reflect:!0})],h.prototype,`selected`,void 0),n.default([t.property({type:Boolean,converter:a.booleanConverter})],h.prototype,`deselectable`,void 0),n.default([t.property({type:String,attribute:`icon-name`})],h.prototype,`iconName`,void 0),h=n.default([i.customUiKitElement(`ds-chip`)],h),Object.defineProperty(exports,"DsChip",{enumerable:!0,get:function(){return h}});

package/dist/cjs/components/ds-chip/styles/common.styles.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");require("../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs"),n=e.css`
+const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.cjs");require("../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");var t=e.css`
     :host {
         display: inline-block;
     }
@@ -15,4 +15,4 @@
         cursor: pointer;
         pointer-events: visible;
     }
-`;exports.commonStyles=n;
+`;exports.commonStyles=t;

package/dist/cjs/components/ds-chip/styles/cupra-diagonal.styles.cjs

@@ -0,0 +1,75 @@
+const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.cjs");require("../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");var t=e.css`
+    :host([data-ui-kit-theme='cupra-diagonal']) .ds-blur {
+        position: relative;
+        isolation: isolate;
+        overflow: visible;
+        background: transparent;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .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);
+        -webkit-backdrop-filter: blur(var(--ui-kit-private-blur-size));
+        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([data-ui-kit-theme='cupra-diagonal']) .container {
+        padding: 0 1rem;
+        gap: 0.375rem;
+        box-sizing: border-box;
+        min-width: var(--ds-sizing-80, 80px);
+        letter-spacing: var(--ds-typography-letter-spacing-base, 0.5px);
+        --ui-kit-private-blur-background: var(--ds-color-surface-container-default);
+        --ui-kit-private-blur-size: 2.5rem;
+        --ui-kit-private-blur-border: 1px solid transparent;
+        --ui-kit-private-blur-border-radius: var(--ds-border-radius-full);
+        color: var(--ds-color-text-default);
+        --ui-kit-icon-color: var(--ds-color-text-default);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.selected {
+        --ui-kit-private-blur-background: var(--ds-color-surface-container-active);
+        --ui-kit-private-blur-border: 1px solid var(--ds-color-border-selected-subtle);
+        color: var(--ds-color-text-selected-subtle);
+        --ui-kit-icon-color: var(--ds-color-text-selected-subtle);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:hover {
+        --ui-kit-private-blur-background: var(--ds-color-surface-container-hover);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:focus-visible {
+        --ui-kit-private-blur-background: var(--ds-color-surface-container-hover);
+        border-radius: var(--ds-border-radius-full, 100000px);
+        outline-width: var(--ds-border-width-l, 2px);
+        outline-offset: 0.125rem;
+        outline-color: var(--ds-button-outline-color-focus, #6b8494);
+        outline-style: solid;
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:active {
+        --ui-kit-private-blur-background: var(--ds-color-surface-container-active);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.large {
+        height: 3rem;
+        --ui-kit-icon-width: 1.5rem;
+        --ui-kit-icon-height: 1.5rem;
+        font: 400 var(--ds-typography-size-body-l) / var(--ds-typography-height-body-l)
+            var(--ds-typography-family-primary);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.medium {
+        height: 2.5rem;
+        --ui-kit-icon-width: 1.25rem;
+        --ui-kit-icon-height: 1.25rem;
+        font: 400 var(--ds-typography-size-body-l) / var(--ds-typography-height-body-l)
+            var(--ds-typography-family-primary);
+    }
+`;exports.cupraDiagonalStyles=t;

package/dist/cjs/components/ds-chip/styles/cupra.styles.cjs

@@ -0,0 +1,67 @@
+const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.cjs");require("../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");var t=e.css`
+    :host([data-ui-kit-theme='cupra']) .container {
+        padding: 0 1rem;
+        gap: var(--ds-cp-scale-on-8);
+        box-sizing: border-box;
+        border-radius: var(--ds-cp-scale-on-24);
+        border: var(--ui-kit-private-chip-border);
+        color: var(--ui-kit-private-chip-color);
+        background-color: var(--ui-kit-private-chip-bg, transparent);
+        --ui-kit-icon-color: var(--ui-kit-private-chip-color);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .container.light {
+        --ui-kit-private-chip-border: var(--ds-cp-scale-on-1) solid var(--ds-color-black);
+        --ui-kit-private-chip-color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .container.dark {
+        --ui-kit-private-chip-border: var(--ds-cp-scale-on-2) solid var(--ds-color-white);
+        --ui-kit-private-chip-color: var(--ds-color-white);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .container.selected {
+        --ui-kit-private-chip-border: none;
+        --ui-kit-private-chip-color: var(--ds-color-desert-sand-100);
+        --ui-kit-private-chip-bg: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .container.selected.dark {
+        --ui-kit-private-chip-color: var(--ds-color-black);
+        --ui-kit-private-chip-bg: var(--ds-color-desert-sand-100);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .container:not(.selected):hover {
+        --ui-kit-private-chip-border: var(--ds-cp-scale-on-2) solid var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .container:not(.selected):hover.dark {
+        --ui-kit-private-chip-border: var(--ds-cp-scale-on-2) solid var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .container:not(.selected):focus-visible,
+    :host([data-ui-kit-theme='cupra']) .container:not(.selected):active {
+        --ui-kit-private-chip-border: var(--ds-cp-scale-on-2) solid var(--ds-color-black);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .container.large {
+        height: 3rem;
+        font: var(--ds-font-cupra-regular-30-title);
+    }
+    :host([data-ui-kit-theme='cupra']) .container.medium {
+        height: 2.5rem;
+        font: var(--ds-font-cupra-regular-30-title);
+    }
+    :host([data-ui-kit-theme='cupra']) .container.small {
+        height: 2.25rem;
+        font: var(--ds-font-cupra-regular-20-title);
+    }
+    :host([data-ui-kit-theme='cupra']) .icon.large {
+        --ui-kit-icon-width: 1.5rem;
+        --ui-kit-icon-height: 1.5rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .icon.medium {
+        --ui-kit-icon-width: 1.25rem;
+        --ui-kit-icon-height: 1.25rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .icon.small {
+        --ui-kit-icon-width: 1rem;
+        --ui-kit-icon-height: 1rem;
+    }
+`;exports.cupraStyles=t;

package/dist/cjs/components/ds-chip/styles/seat-legacy.styles.cjs

@@ -0,0 +1,69 @@
+const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.cjs");require("../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");var t=e.css`
+    :host([data-ui-kit-theme='seat-legacy']) .container {
+        padding: 0 1rem;
+        gap: var(--dg-spacing-s-5);
+        box-sizing: border-box;
+        border-radius: var(--dg-border-radius-02);
+        border: var(--ui-kit-private-chip-border);
+        color: var(--ui-kit-private-chip-color);
+        font-family: var(--dg-font-family-base);
+        font-weight: 700;
+        background-color: var(--ui-kit-private-chip-bg, transparent);
+        --ui-kit-icon-color: var(--ui-kit-private-chip-color);
+        --ui-kit-icon-height: 1.5rem;
+        --ui-kit-icon-width: 1.5rem;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container.light {
+        --ui-kit-private-chip-border: var(--dg-border-width-m) solid var(--dg-color-field-border-filled);
+        --ui-kit-private-chip-color: var(--dg-color-text-strong);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container.dark {
+        --ui-kit-private-chip-border: var(--dg-border-width-m) solid var(--dg-color-text-inverted);
+        --ui-kit-private-chip-color: var(--dg-color-text-inverted);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container.selected {
+        --ui-kit-private-chip-color: var(--dg-color-text-inverted);
+        --ui-kit-private-chip-bg: var(--dg-global-color-black-100);
+        --ui-kit-private-chip-border: none;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container.selected.dark {
+        --ui-kit-private-chip-color: var(--dg-color-text-strong);
+        --ui-kit-private-chip-bg: var(--dg-color-field-bg-selected);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container:not(.selected):hover,
+    :host([data-ui-kit-theme='seat-legacy']) .container:not(.selected):focus-visible,
+    :host([data-ui-kit-theme='seat-legacy']) .container:not(.selected):active {
+        outline: var(--ui-kit-private-chip-border);
+        outline-offset: -0.125rem;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container.large {
+        height: 3rem;
+        font-size: var(--dg-font-size-body-l);
+        line-height: var(--dg-font-height-body-m);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container.medium {
+        height: 2.5rem;
+        font-size: var(--dg-font-size-body-m);
+        line-height: var(--dg-font-height-body-s);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container.small {
+        height: 2.25rem;
+        font-size: var(--dg-font-size-body-s);
+        line-height: var(--dg-font-height-body-xs);
+        --ui-kit-icon-height: 1.25rem;
+        --ui-kit-icon-width: 1.25rem;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .icon.large {
+        --ui-kit-icon-width: 1.5rem;
+        --ui-kit-icon-height: 1.5rem;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .icon.medium {
+        --ui-kit-icon-width: 1.25rem;
+        --ui-kit-icon-height: 1.25rem;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .icon.small {
+        --ui-kit-icon-width: 1rem;
+        --ui-kit-icon-height: 1rem;
+    }
+`;exports.seatLegacyStyles=t;

package/dist/cjs/components/ds-chip/styles/seat.styles.cjs

@@ -0,0 +1,75 @@
+const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.cjs");require("../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");var t=e.css`
+    :host([data-ui-kit-theme='seat']) .ds-blur {
+        position: relative;
+        isolation: isolate;
+        overflow: visible;
+        background: transparent;
+    }
+
+    :host([data-ui-kit-theme='seat']) .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);
+        -webkit-backdrop-filter: blur(var(--ui-kit-private-blur-size));
+        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([data-ui-kit-theme='seat']) .container {
+        padding: 0 1rem;
+        gap: 0.375rem;
+        box-sizing: border-box;
+        min-width: var(--ds-sizing-80, 80px);
+        letter-spacing: var(--ds-typography-letter-spacing-base, 0.5px);
+        --ui-kit-private-blur-background: var(--ds-color-surface-container-default);
+        --ui-kit-private-blur-size: 2.5rem;
+        --ui-kit-private-blur-border: 1px solid transparent;
+        --ui-kit-private-blur-border-radius: var(--ds-border-radius-full);
+        color: var(--ds-color-text-default);
+        --ui-kit-icon-color: var(--ds-color-text-default);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container.selected {
+        --ui-kit-private-blur-background: var(--ds-color-surface-container-active);
+        --ui-kit-private-blur-border: 1px solid var(--ds-color-border-selected-subtle);
+        color: var(--ds-color-text-selected-subtle);
+        --ui-kit-icon-color: var(--ds-color-text-selected-subtle);
+    }
+    :host([data-ui-kit-theme='seat']) .container:hover {
+        --ui-kit-private-blur-background: var(--ds-color-surface-container-hover);
+    }
+    :host([data-ui-kit-theme='seat']) .container:focus-visible {
+        --ui-kit-private-blur-background: var(--ds-color-surface-container-hover);
+        border-radius: var(--ds-border-radius-full, 100000px);
+        outline-width: var(--ds-border-width-l, 2px);
+        outline-offset: 0.125rem;
+        outline-color: var(--ds-button-outline-color-focus, #6b8494);
+        outline-style: solid;
+    }
+    :host([data-ui-kit-theme='seat']) .container:active {
+        --ui-kit-private-blur-background: var(--ds-color-surface-container-active);
+    }
+    :host([data-ui-kit-theme='seat']) .container.large {
+        height: 3rem;
+        --ui-kit-icon-width: 1.5rem;
+        --ui-kit-icon-height: 1.5rem;
+        font: 400 var(--ds-typography-size-body-l) / var(--ds-typography-height-body-l)
+            var(--ds-typography-family-primary);
+    }
+    :host([data-ui-kit-theme='seat']) .container.medium {
+        height: 2.5rem;
+        --ui-kit-icon-width: 1.25rem;
+        --ui-kit-icon-height: 1.25rem;
+        font: 400 var(--ds-typography-size-body-l) / var(--ds-typography-height-body-l)
+            var(--ds-typography-family-primary);
+    }
+`;exports.seatStyles=t;

package/dist/cjs/components/ds-chips/ds-chips.cjs

@@ -1,14 +1,23 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("../base/UiKitElement.cjs"),d=require("../../decorators/customUiKitElement.cjs"),u=require("../../utils/arrayConverter.cjs"),C=require("../../utils/booleanConverter.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const a=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const h=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),n=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs"),v=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.cjs"),m=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.cjs"),S=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),y=require("./styles/common.styles.cjs");var b=Object.defineProperty,f=Object.getOwnPropertyDescriptor,l=(o,e,t,s)=>{for(var i=s>1?void 0:s?f(e,t):e,r=o.length-1,c;r>=0;r--)(c=o[r])&&(i=(s?c(e,t,i):c(i))||i);return s&&i&&b(e,t,i),i};exports.DsChips=class extends p.UiKitElement{constructor(){super(...arguments),this.multiChoice=null,this.size="medium",this.mode="light",this.hasScrollLeft=!1,this.hasScrollRight=!1,this.resizeObserver=new ResizeObserver(()=>{this.handleScrollNav()}),this.handleScrollNav=()=>{var t,s,i,r;const e=((t=this.chipsContainer)==null?void 0:t.scrollLeft)+((s=this.chipsContainer)==null?void 0:s.clientWidth);this.hasScrollLeft=((i=this.chipsContainer)==null?void 0:i.scrollLeft)>0,this.hasScrollRight=e<((r=this.chipsContainer)==null?void 0:r.scrollWidth)},this.handleScrollLeft=()=>{this.chipsContainer.scrollBy({left:-150,behavior:"smooth"})},this.handleScrollRight=()=>{this.chipsContainer.scrollBy({left:150,behavior:"smooth"})}}firstUpdated(){this.handleScrollNav(),this.resizeObserver.observe(this.chipsContainer),this.chips.forEach(e=>this.resizeObserver.observe(e)),window.addEventListener("resize",this.handleScrollNav),this.chipsContainer.addEventListener("scroll",this.handleScrollNav)}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver.disconnect(),window.removeEventListener("resize",this.handleScrollNav),this.chipsContainer.removeEventListener("scroll",this.handleScrollNav)}getScrollButtonTemplate(e,t){if(e==="left"&&!this.hasScrollLeft||e==="right"&&!this.hasScrollRight)return a.nothing;const s=`arrow-${e}`;return this.componentFactory.createIconButton({class:`scroll-button ${e}`,"data-testid":`scroll-button-${e}`,"data-aria-label":`scroll-button-${e}`,"@click":t,size:this.size||"large","icon-name":s,variant:"naked",mode:this.mode})}updated(e){super.updated(e),(e.has("selectedChips")||e.has("multiChoice")||e.has("size")||e.has("mode"))&&this.updateChildChips()}updateChildChips(){var e;(e=this.chips)==null||e.forEach(t=>{var s,i;t.size=this.size,t.selected=(i=(s=this.selectedChips)==null?void 0:s.includes)==null?void 0:i.call(s,t.value),t.deselectable=!!this.multiChoice,t.mode=this.mode})}get chipsContainerClasses(){return{"chips-container":!0,"scroll-left":this.hasScrollLeft,"scroll-right":this.hasScrollRight}}handleSelect(e){var s,i;let t;this.multiChoice&&!((i=(s=this.selectedChips)==null?void 0:s.includes)!=null&&i.call(s,e.detail.value))?t=[...this.selectedChips||[],e.detail.value]:t=[e.detail.value],this.selectedChips=t,this.updateChildChips(),this.dispatchEvent(new CustomEvent("ds-chips:change",{bubbles:!0,composed:!0,detail:{selectedChips:t}}))}handleDeselect(e){const t=[...(this.selectedChips||[]).filter(s=>s!==e.detail.value)];this.selectedChips=t,this.updateChildChips(),this.dispatchEvent(new CustomEvent("ds-chips:change",{bubbles:!0,composed:!0,detail:{selectedChips:t}}))}render(){return a.html`
+const e=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");const t=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.cjs"),n=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.cjs"),r=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/query.cjs"),i=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/query-assigned-elements.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.cjs");const a=require("../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.cjs"),o=require("../base/UiKitElement.cjs"),s=require("../../decorators/customUiKitElement.cjs"),c=require("../../utils/booleanConverter.cjs"),l=require("../../utils/uiKitHtml.cjs"),u=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/class-map.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/class-map.cjs");const d=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/if-defined.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/if-defined.cjs"),require("../ds-icon-button/ds-icon-button.cjs");const f=require("../../utils/arrayConverter.cjs"),p=require("./styles/common.styles.cjs"),m=require("./styles/cupra-diagonal.styles.cjs"),h=require("./styles/cupra.styles.cjs"),g=require("./styles/seat-legacy.styles.cjs"),_=require("./styles/seat.styles.cjs");var v=class extends o.UiKitElement{constructor(...e){super(...e),this.multiChoice=null,this.size=`medium`,this.mode=`light`,this.hasScrollLeft=!1,this.hasScrollRight=!1,this.resizeObserver=new ResizeObserver(()=>{this.handleScrollNav()}),this.handleScrollNav=()=>{var e,t,n,r;let i=((e=this.chipsContainer)==null?void 0:e.scrollLeft)+((t=this.chipsContainer)==null?void 0:t.clientWidth);this.hasScrollLeft=((n=this.chipsContainer)==null?void 0:n.scrollLeft)>0,this.hasScrollRight=i<((r=this.chipsContainer)==null?void 0:r.scrollWidth)},this.handleScrollLeft=()=>{this.chipsContainer.scrollBy({left:-150,behavior:`smooth`})},this.handleScrollRight=()=>{this.chipsContainer.scrollBy({left:150,behavior:`smooth`})}}firstUpdated(){this.handleScrollNav(),this.resizeObserver.observe(this.chipsContainer),this.chips.forEach(e=>this.resizeObserver.observe(e)),window.addEventListener(`resize`,this.handleScrollNav),this.chipsContainer.addEventListener(`scroll`,this.handleScrollNav)}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver.disconnect(),window.removeEventListener(`resize`,this.handleScrollNav),this.chipsContainer.removeEventListener(`scroll`,this.handleScrollNav)}getScrollButtonTemplate(t,n){if(t===`left`&&!this.hasScrollLeft||t===`right`&&!this.hasScrollRight)return e.nothing;let r=`arrow-${t}`;return l.uiKitHtml`<ds-icon-button
+            class=${`scroll-button ${t}`}
+            data-testid=${`scroll-button-${t}`}
+            data-aria-label=${`scroll-button-${t}`}
+            @click=${n}
+            size=${this.size||`large`}
+            icon-name=${r}
+            variant="rounded"
+            mode=${d.ifDefined(this.mode)}
+        ></ds-icon-button>`}updated(e){super.updated(e),(e.has(`selectedChips`)||e.has(`multiChoice`)||e.has(`size`)||e.has(`mode`))&&this.updateChildChips()}updateChildChips(){var e;(e=this.chips)==null||e.forEach(e=>{var t,n;e.size=this.size,e.selected=(t=this.selectedChips)==null||(n=t.includes)==null?void 0:n.call(t,e.value),e.deselectable=!!this.multiChoice,e.mode=this.mode})}get chipsContainerClasses(){return{"chips-container":!0,"scroll-left":this.hasScrollLeft,"scroll-right":this.hasScrollRight}}handleSelect(e){var t,n;let r;r=this.multiChoice&&!((t=this.selectedChips)!=null&&(n=t.includes)!=null&&n.call(t,e.detail.value))?[...this.selectedChips||[],e.detail.value]:[e.detail.value],this.selectedChips=r,this.updateChildChips(),this.dispatchEvent(new CustomEvent(`ds-chips:change`,{bubbles:!0,composed:!0,detail:{selectedChips:r}}))}handleDeselect(e){let t=[...(this.selectedChips||[]).filter(t=>t!==e.detail.value)];this.selectedChips=t,this.updateChildChips(),this.dispatchEvent(new CustomEvent(`ds-chips:change`,{bubbles:!0,composed:!0,detail:{selectedChips:t}}))}render(){return e.html`
             <div
                 class="container"
                 data-testid="ds-chips-container"
                 @select=${this.handleSelect}
                 @deselect=${this.handleDeselect}
             >
-                ${this.getScrollButtonTemplate("left",this.handleScrollLeft)}
-                <nav tabindex="0" class=${S.classMap(this.chipsContainerClasses)}>
+                ${this.getScrollButtonTemplate(`left`,this.handleScrollLeft)}
+                <nav tabindex="0" class=${u.classMap(this.chipsContainerClasses)}>
                     <slot @slotchange=${this.updateChildChips}></slot>
                 </nav>
-                ${this.getScrollButtonTemplate("right",this.handleScrollRight)}
+                ${this.getScrollButtonTemplate(`right`,this.handleScrollRight)}
             </div>
-        `}};exports.DsChips.styles=[y.commonStyles];l([h.property({type:Array,attribute:"selected-chips",converter:u.arrayConverter,reflect:!0})],exports.DsChips.prototype,"selectedChips",2);l([h.property({type:Boolean,attribute:"multi-choice",converter:C.booleanConverter})],exports.DsChips.prototype,"multiChoice",2);l([h.property({type:String})],exports.DsChips.prototype,"size",2);l([h.property({type:String,reflect:!0})],exports.DsChips.prototype,"mode",2);l([n.state()],exports.DsChips.prototype,"hasScrollLeft",2);l([n.state()],exports.DsChips.prototype,"hasScrollRight",2);l([m.queryAssignedElements({slot:""})],exports.DsChips.prototype,"chips",2);l([v.query(".chips-container")],exports.DsChips.prototype,"chipsContainer",2);exports.DsChips=l([d.customUiKitElement("ds-chips")],exports.DsChips);
+        `}},y=(v.styles=[p.commonStyles,m.cupraDiagonalStyles,_.seatStyles,h.cupraStyles,g.seatLegacyStyles],v);a.default([t.property({type:Array,attribute:`selected-chips`,converter:f.stringArrayConverter,reflect:!0})],y.prototype,`selectedChips`,void 0),a.default([t.property({type:Boolean,attribute:`multi-choice`,converter:c.booleanConverter})],y.prototype,`multiChoice`,void 0),a.default([t.property({type:String})],y.prototype,`size`,void 0),a.default([t.property({type:String,reflect:!0})],y.prototype,`mode`,void 0),a.default([n.state()],y.prototype,`hasScrollLeft`,void 0),a.default([n.state()],y.prototype,`hasScrollRight`,void 0),a.default([i.queryAssignedElements({slot:``})],y.prototype,`chips`,void 0),a.default([r.query(`.chips-container`)],y.prototype,`chipsContainer`,void 0),y=a.default([s.customUiKitElement(`ds-chips`)],y),Object.defineProperty(exports,"DsChips",{enumerable:!0,get:function(){return y}});

package/dist/cjs/components/ds-chips/styles/common.styles.cjs

@@ -1,10 +1,9 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");require("../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs"),t=e.css`
+const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.cjs");require("../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");var t=e.css`
     .container {
         display: inline-flex;
         position: relative;
         max-width: 100%;
         position: relative;
-        --ds-chips-fade-width: 54px;
     }
 
     .chips-container {
@@ -16,40 +15,6 @@
         scroll-behavior: smooth;
     }
 
-    .chips-container.scroll-left:before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: var(--ds-chips-fade-width);
-        height: 100%;
-        pointer-events: none;
-        background: linear-gradient(
-            to right,
-            var(--ds-chips-fade-color) 0%,
-            var(--ds-chips-fade-color) 40%,
-            rgba(255, 255, 255, 0) 100%
-        );
-        z-index: var(--ds-z-index-default, 1);
-    }
-
-    .chips-container.scroll-right:after {
-        content: '';
-        position: absolute;
-        top: 0;
-        right: 0;
-        width: var(--ds-chips-fade-width);
-        height: 100%;
-        pointer-events: none;
-        background: linear-gradient(
-            to left,
-            var(--ds-chips-fade-color) 0%,
-            var(--ds-chips-fade-color) 40%,
-            rgba(255, 255, 255, 0) 100%
-        );
-        z-index: var(--ds-z-index-default, 1);
-    }
-
     //.chips-container.scroll-left.scroll-right {
     //    mask-image: linear-gradient(
     //        to right,
@@ -72,8 +37,10 @@
     }
 
     .scroll-button {
+        display: block;
         position: absolute;
-        top: 0;
+        top: 50%;
+        transform: translateY(-50%);
         z-index: 2;
     }
 
@@ -84,4 +51,4 @@
     .scroll-button.right {
         right: 0;
     }
-`;exports.commonStyles=t;
+`;exports.commonStyles=t;

package/dist/cjs/components/ds-chips/styles/cupra-diagonal.styles.cjs

@@ -0,0 +1,11 @@
+const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.cjs");require("../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");var t=e.css`
+    :host([data-ui-kit-theme='cupra-diagonal']) .container {
+        --ui-kit-private-chips-fade-color: #15181e;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .chips-container {
+        gap: 0.5rem;
+        border-radius: var(--ds-border-radius-full, 100000px);
+        overflow: hidden;
+    }
+`;exports.cupraDiagonalStyles=t;

package/dist/cjs/components/ds-chips/styles/cupra.styles.cjs

@@ -0,0 +1,13 @@
+const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.cjs");require("../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");var t=e.css`
+    :host([data-ui-kit-theme='cupra']) .container {
+        --ui-kit-private-chips-fade-color: white;
+    }
+
+    :host([data-ui-kit-theme='cupra']) .container.dark {
+        --ui-kit-private-chips-fade-color: black;
+    }
+
+    :host([data-ui-kit-theme='cupra']) .chips-container {
+        gap: var(--ds-cp-scale-on-8);
+    }
+`;exports.cupraStyles=t;