@cupra/ui-kit 2.0.0-canary.230 → 2.0.0-canary.232

package/dist/cjs/components/ds-toast-message/ds-toast-message.cjs

@@ -1,4 +1,4 @@
-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/uiKitHtml.cjs"),o=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 s=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 c=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/when.cjs");require("../ds-link-button/ds-link-button.cjs");const l=require("./styles/common.styles.cjs");var u=class extends r.UiKitElement{constructor(...e){super(...e),this.status=`default`,this.dataId=``,this.title=``,this.text=``}getIconName(){switch(this.status){case`success`:return`check-mark-circle`;case`error`:return`cross-circle`;case`warning`:return`exclamation-mark-circle`;case`info`:return`info-circle`;default:return`chat-bubble`}}handleClickCloseButton(){let e=new CustomEvent(`toast:remove`,{bubbles:!0,composed:!0,detail:{id:this.dataId}});this.dispatchEvent(e)}handleClickAction(){let e=new CustomEvent(`ds-toast:action-click`,{bubbles:!0,composed:!0,detail:{id:this.dataId}});this.dispatchEvent(e)}get toastMessageClasses(){return{container:!0,[this.status||`default`]:!0}}get iconTemplate(){return a.uiKitHtml`<ds-icon class="icon" icon-name=${s.ifDefined(this.getIconName())} size="24"></ds-icon>`}get headerTemplate(){return c.when(this.title||this.text,()=>e.html`
+const e=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.cjs"),t=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 n=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 r=require("../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.cjs"),i=require("../../decorators/customUiKitElement.cjs");require("../ds-icon/ds-icon.cjs");const a=require("../../utils/uiKitHtml.cjs"),o=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 s=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 c=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/when.cjs");require("../ds-link-button/ds-link-button.cjs");const l=require("./styles/common.styles.cjs");var u=class extends t.LitElement{constructor(...e){super(...e),this.status=`default`,this.dataId=``,this.title=``,this.text=``}getIconName(){switch(this.status){case`success`:return`check-mark-circle`;case`error`:return`cross-circle`;case`warning`:return`exclamation-mark-circle`;case`info`:return`info-circle`;default:return`chat-bubble`}}handleClickCloseButton(){let e=new CustomEvent(`toast:remove`,{bubbles:!0,composed:!0,detail:{id:this.dataId}});this.dispatchEvent(e)}handleClickAction(){let e=new CustomEvent(`ds-toast:action-click`,{bubbles:!0,composed:!0,detail:{id:this.dataId}});this.dispatchEvent(e)}get toastMessageClasses(){return{container:!0,[this.status||`default`]:!0}}get iconTemplate(){return a.uiKitHtml`<ds-icon class="icon" icon-name=${s.ifDefined(this.getIconName())} size="24"></ds-icon>`}get headerTemplate(){return c.when(this.title||this.text,()=>e.html`
                 <div class="header">
                     ${c.when(this.title,()=>e.html`<div class="title">${this.title}</div>`)}
                     ${c.when(this.text,()=>e.html`<div class="message">${this.text}</div>`)}
@@ -24,4 +24,4 @@ const e=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/l
                 </div>
                 ${this.closeButtonTemplate}
             </div>
-        `}},d=(u.styles=[l.toastMessageStyles],u);n.default([t.property({type:String,reflect:!0})],d.prototype,`status`,void 0),n.default([t.property({type:String,attribute:`data-id`,reflect:!0})],d.prototype,`dataId`,void 0),n.default([t.property({type:String,reflect:!0})],d.prototype,`title`,void 0),n.default([t.property({type:String,reflect:!0})],d.prototype,`text`,void 0),n.default([t.property({attribute:!1})],d.prototype,`action`,void 0),d=n.default([i.customUiKitElement(`ds-toast-message`)],d),Object.defineProperty(exports,"DsToastMessage",{enumerable:!0,get:function(){return d}});
+        `}},d=(u.styles=[l.toastMessageStyles],u);r.default([n.property({type:String,reflect:!0})],d.prototype,`status`,void 0),r.default([n.property({type:String,attribute:`data-id`,reflect:!0})],d.prototype,`dataId`,void 0),r.default([n.property({type:String,reflect:!0})],d.prototype,`title`,void 0),r.default([n.property({type:String,reflect:!0})],d.prototype,`text`,void 0),r.default([n.property({attribute:!1})],d.prototype,`action`,void 0),d=r.default([i.customUiKitElement(`ds-toast-message`)],d),Object.defineProperty(exports,"DsToastMessage",{enumerable:!0,get:function(){return d}});

package/dist/cjs/components/ds-toggle-button/ds-toggle-button.cjs

@@ -17,4 +17,4 @@ const e=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/l
                 ${this.checked?this.checkedText:this.uncheckedText}
                 ${o.when(this.iconPosition===`right`,()=>e.html`${this.iconTemplate}`)}
             </button>
-        `}};n.default([t.property({type:Boolean,converter:i.booleanConverter,reflect:!0})],c.prototype,`checked`,void 0),n.default([t.property({type:String,attribute:`checked-text`})],c.prototype,`checkedText`,void 0),n.default([t.property({type:String,attribute:`unchecked-text`})],c.prototype,`uncheckedText`,void 0),n.default([t.property({type:Boolean,converter:i.booleanConverter})],c.prototype,`rounded`,void 0),c=n.default([r.customUiKitElement(`ds-toggle-button`,{skipTagAsComponentName:!0,extendComponentNames:[`ds-button`]})],c),Object.defineProperty(exports,"DsToggleButton",{enumerable:!0,get:function(){return c}});
+        `}};n.default([t.property({type:Boolean,converter:i.booleanConverter,reflect:!0})],c.prototype,`checked`,void 0),n.default([t.property({type:String,attribute:`checked-text`})],c.prototype,`checkedText`,void 0),n.default([t.property({type:String,attribute:`unchecked-text`})],c.prototype,`uncheckedText`,void 0),n.default([t.property({type:Boolean,converter:i.booleanConverter})],c.prototype,`rounded`,void 0),c=n.default([r.customUiKitElement(`ds-toggle-button`)],c),Object.defineProperty(exports,"DsToggleButton",{enumerable:!0,get:function(){return c}});

package/dist/cjs/components/ds-toggle-switch/ds-toggle-switch.cjs

@@ -1,4 +1,4 @@
-require("../ds-theme-provider/themeContext.cjs");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");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.cjs");const r=require("../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.cjs"),i=require("../base/UiKitElement.cjs"),a=require("../../decorators/customUiKitElement.cjs"),o=require("../../utils/booleanConverter.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("./styles/common.styles.cjs");var l=class extends i.UiKitElement{constructor(...e){super(...e),this.size=`medium`,this._checked=void 0,this._checkedState=!1,this.disabled=!1,this.mode=`light`}get checked(){return this._checked??this._checkedState}set checked(e){this._checked=e}handleClick(){let e=!this.checked;this._checkedState=e,this._checked=void 0,this.dispatchEvent(new CustomEvent(`change`,{bubbles:!0,composed:!0,detail:{checked:e}}))}handleClickOff(e){e.stopPropagation(),this.checked&&this.handleClick()}handleClickOn(e){e.stopPropagation(),!this.checked&&this.handleClick()}get styleTokens(){return e.html`
+require("../ds-theme-provider/themeContext.cjs");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");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.cjs");const r=require("../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.cjs"),i=require("../base/UiKitElement.cjs"),a=require("../../decorators/customUiKitElement.cjs"),o=require("../../utils/booleanConverter.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("./styles/common.styles.cjs"),l=require("./styles/cupra-diagonal.styles.cjs"),u=require("./styles/cupra.styles.cjs"),d=require("./styles/seat-legacy.styles.cjs"),f=require("./styles/seat.styles.cjs");var p=class extends i.UiKitElement{constructor(...e){super(...e),this.size=`medium`,this._checked=void 0,this._checkedState=!1,this.disabled=!1,this.mode=`light`}get checked(){return this._checked??this._checkedState}set checked(e){this._checked=e}handleClick(){let e=!this.checked;this._checkedState=e,this._checked=void 0,this.dispatchEvent(new CustomEvent(`change`,{bubbles:!0,composed:!0,detail:{checked:e}}))}handleClickOff(e){e.stopPropagation(),this.checked&&this.handleClick()}handleClickOn(e){e.stopPropagation(),!this.checked&&this.handleClick()}get styleTokens(){return e.html`
             <style>
                 :host {
                     color-scheme: ${this.mode};
@@ -27,4 +27,4 @@ require("../ds-theme-provider/themeContext.cjs");const e=require("../../node_mod
                 </button>
                 <slot name="on" @click=${this.handleClickOn}></slot>
             </div>
-        `}},u=(l.styles=[c.commonStyles],l);r.default([t.property({type:String})],u.prototype,`size`,void 0),r.default([t.property({type:Boolean,attribute:`checked`,converter:o.booleanConverter,reflect:!0})],u.prototype,`_checked`,void 0),r.default([n.state()],u.prototype,`_checkedState`,void 0),r.default([t.property({type:Boolean,converter:o.booleanConverter,reflect:!0})],u.prototype,`disabled`,void 0),r.default([t.property({type:String,reflect:!0})],u.prototype,`mode`,void 0),r.default([t.property({type:String,attribute:`data-aria-label`})],u.prototype,`dataAriaLabel`,void 0),u=r.default([a.customUiKitElement(`ds-toggle-switch`)],u),Object.defineProperty(exports,"DsToggleSwitch",{enumerable:!0,get:function(){return u}});
+        `}},m=(p.styles=[c.commonStyles,l.cupraDiagonalStyles,f.seatStyles,u.cupraStyles,d.seatLegacyStyles],p);r.default([t.property({type:String})],m.prototype,`size`,void 0),r.default([t.property({type:Boolean,attribute:`checked`,converter:o.booleanConverter,reflect:!0})],m.prototype,`_checked`,void 0),r.default([n.state()],m.prototype,`_checkedState`,void 0),r.default([t.property({type:Boolean,converter:o.booleanConverter,reflect:!0})],m.prototype,`disabled`,void 0),r.default([t.property({type:String,reflect:!0})],m.prototype,`mode`,void 0),r.default([t.property({type:String,attribute:`data-aria-label`})],m.prototype,`dataAriaLabel`,void 0),m=r.default([a.customUiKitElement(`ds-toggle-switch`)],m),Object.defineProperty(exports,"DsToggleSwitch",{enumerable:!0,get:function(){return m}});

package/dist/cjs/components/ds-toggle-switch/styles/cupra-diagonal.styles.cjs

@@ -0,0 +1,188 @@
+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 {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--ds-spacing-s-5, 8px);
+        --ui-kit-private-dot-gap: 0.1875rem;
+        cursor: pointer;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.disabled {
+        pointer-events: none;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.medium {
+        min-height: var(--ds-sizing-40, 40px);
+        padding: var(--ds-spacing-s-2, 2px) var(--ds-spacing-s-5, 8px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.large {
+        min-height: var(--ds-sizing-48, 48px);
+        padding: var(--ds-spacing-s-2, 2px) var(--ds-spacing-s-5, 8px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:active:not(.disabled) {
+        border-radius: var(--ds-border-radius-xs);
+        background: var(--ds-switch-bg-color-pressed, rgba(195, 195, 203, 0.1));
+        --ui-kit-private-dot-gap: 0.0625rem;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:not(.disabled):hover {
+        --ui-kit-private-dot-gap: 0.0625rem;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='label']) {
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        user-select: none;
+        pointer-events: none;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-family: var(--ds-typography-family-primary, 'cupra-screen'), sans-serif;
+        font-style: normal;
+        font-weight: 400;
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.large ::slotted([slot='label']) {
+        font-size: var(--ds-typography-size-body-l, 16px);
+        line-height: var(--ds-typography-height-body-l, 24px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.medium ::slotted([slot='label']) {
+        font-size: var(--ds-typography-size-body-m, 14px);
+        line-height: var(--ds-typography-height-body-m, 20px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.disabled ::slotted([slot='label']) {
+        color: var(--ds-switch-text-color-label-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:not(.checked):not(.disabled) ::slotted([slot='label']) {
+        color: var(--ds-switch-text-color-label-default, #c3c3cb);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.checked:not(.disabled) ::slotted([slot='label']) {
+        color: var(--ds-switch-text-color-label-selected, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .track-container {
+        position: relative;
+        display: flex;
+        align-items: center;
+        border-radius: var(--ds-border-radius-full, 100000px);
+        border: var(--ds-border-width-m, 1px) solid var(--ds-switch-border-color-default, #aeaeb7);
+        background: none;
+        outline: none;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .medium .track-container {
+        width: var(--ds-sizing-32, 32px);
+        height: var(--ds-sizing-20, 20px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .large .track-container {
+        width: var(--ds-sizing-40, 40px);
+        height: var(--ds-sizing-24, 24px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.checked .track-container {
+        border-color: var(--ds-switch-border-color-selected, rgba(250, 250, 250, 0.3));
+        background: var(--ui-kit-toggle-switch-background, var(--ds-switch-bg-color-selected, #b2764d));
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.disabled .track-container {
+        border-color: var(--ds-switch-border-color-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.checked.disabled .track-container {
+        background: var(--ui-kit-toggle-switch-background-disabled, var(--ds-switch-bg-color-disabled, #34353c));
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .track-container:focus-visible {
+        outline: var(--ds-border-width-l, 2px) solid var(--ds-color-border-focus-ring, #6b8494);
+        outline-offset: 0.1875rem;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .dot {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        border-radius: var(--ds-border-radius-full, 100000px);
+        transition:
+            left 150ms ease,
+            width 150ms ease,
+            height 150ms ease;
+        left: var(--ui-kit-private-dot-gap);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.checked .dot {
+        left: calc(100% - var(--ui-kit-private-dot-gap) - var(--ui-kit-private-dot-size));
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .medium .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-08, 8px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+        background: var(--ds-switch-icon-color-default, #c3c3cb);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .large .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-12, 12px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+        background: var(--ds-switch-icon-color-default, #c3c3cb);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.checked.medium .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-12, 12px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+        background: var(--ds-switch-icon-color-selected, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.checked.large .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-16, 16px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+        background: var(--ds-switch-icon-color-selected, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:not(.disabled):hover.medium .dot,
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:active:not(.disabled).medium .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-12, 12px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:not(.disabled):hover.medium.checked .dot,
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:active:not(.disabled).medium.checked .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-16, 16px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+        background: var(--ds-switch-icon-color-selected, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:not(.disabled):hover.large .dot,
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:active:not(.disabled).large .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-16, 16px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:not(.disabled):hover.large.checked .dot,
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:active:not(.disabled).large.checked .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-20, 20px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+        background: var(--ds-switch-icon-color-selected, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.disabled .dot {
+        background: var(--ds-switch-icon-color-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.disabled.checked .dot {
+        background: var(--ds-switch-icon-color-default, #c3c3cb);
+    }
+`;exports.cupraDiagonalStyles=t;

package/dist/cjs/components/ds-toggle-switch/styles/cupra.styles.cjs

@@ -0,0 +1,83 @@
+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 {
+        gap: 0.75rem;
+        display: flex;
+    }
+    :host([data-ui-kit-theme='cupra']) ::slotted([slot='on']) {
+        font: var(--ds-font-cupra-regular-20-title);
+    }
+    :host([data-ui-kit-theme='cupra']) .light ::slotted([slot='on']) {
+        color: var(--ds-color-grey);
+    }
+    :host([data-ui-kit-theme='cupra']) .dark ::slotted([slot='on']) {
+        color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .checked.light ::slotted([slot='on']) {
+        color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .checked.dark ::slotted([slot='on']) {
+        color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) ::slotted([slot='off']) {
+        font: var(--ds-font-cupra-regular-20-title);
+    }
+    :host([data-ui-kit-theme='cupra']) .light ::slotted([slot='off']) {
+        color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .dark ::slotted([slot='off']) {
+        color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .checked.light ::slotted([slot='off']) {
+        color: var(--ds-color-grey);
+    }
+    :host([data-ui-kit-theme='cupra']) .checked.dark ::slotted([slot='off']) {
+        color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .track-container {
+        width: 3.5rem;
+        height: 1.25rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .track {
+        width: 100%;
+        height: 0.25rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .light .track {
+        background-color: var(--ds-color-medium-grey);
+    }
+    :host([data-ui-kit-theme='cupra']) .dark .track {
+        background-color: var(--ds-color-dark-grey);
+    }
+    :host([data-ui-kit-theme='cupra']) .fill {
+        width: 0;
+        height: 0.25rem;
+        margin-top: -0.125rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .checked .fill {
+        width: calc(100% - 0.625rem);
+    }
+    :host([data-ui-kit-theme='cupra']) .light .fill {
+        background-color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .dark .fill {
+        background-color: var(--ds-color-desert-sand-100);
+    }
+    :host([data-ui-kit-theme='cupra']) .dot {
+        width: 1.25rem;
+        height: 1.25rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .light .dot {
+        background-color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .light.checked .dot {
+        background-color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .dark .dot {
+        background-color: var(--ds-color-desert-sand-100);
+    }
+    :host([data-ui-kit-theme='cupra']) .dark.checked .dot {
+        background-color: var(--ds-color-desert-sand-100);
+    }
+    :host([data-ui-kit-theme='cupra']) .checked .dot {
+        left: calc(100% - 1.25rem);
+    }
+`;exports.cupraStyles=t;

package/dist/cjs/components/ds-toggle-switch/styles/seat-legacy.styles.cjs

@@ -0,0 +1,188 @@
+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 {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--ds-spacing-s-5, 8px);
+        --ui-kit-private-dot-gap: 0.1875rem;
+        cursor: pointer;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container.disabled {
+        pointer-events: none;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container.medium {
+        min-height: var(--ds-sizing-40, 40px);
+        padding: var(--ds-spacing-s-2, 2px) var(--ds-spacing-s-5, 8px);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container.large {
+        min-height: var(--ds-sizing-48, 48px);
+        padding: var(--ds-spacing-s-2, 2px) var(--ds-spacing-s-5, 8px);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container:active:not(.disabled) {
+        border-radius: var(--ds-border-radius-xs);
+        background: var(--ds-switch-bg-color-pressed, rgba(195, 195, 203, 0.1));
+        --ui-kit-private-dot-gap: 0.0625rem;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container:not(.disabled):hover {
+        --ui-kit-private-dot-gap: 0.0625rem;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) ::slotted([slot='label']) {
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        user-select: none;
+        pointer-events: none;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-family: var(--ds-typography-family-primary, 'cupra-screen'), sans-serif;
+        font-style: normal;
+        font-weight: 400;
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container.large ::slotted([slot='label']) {
+        font-size: var(--ds-typography-size-body-l, 16px);
+        line-height: var(--ds-typography-height-body-l, 24px);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container.medium ::slotted([slot='label']) {
+        font-size: var(--ds-typography-size-body-m, 14px);
+        line-height: var(--ds-typography-height-body-m, 20px);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container.disabled ::slotted([slot='label']) {
+        color: var(--ds-switch-text-color-label-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container:not(.checked):not(.disabled) ::slotted([slot='label']) {
+        color: var(--ds-switch-text-color-label-default, #c3c3cb);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container.checked:not(.disabled) ::slotted([slot='label']) {
+        color: var(--ds-switch-text-color-label-selected, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .track-container {
+        position: relative;
+        display: flex;
+        align-items: center;
+        border-radius: var(--ds-border-radius-full, 100000px);
+        border: var(--ds-border-width-m, 1px) solid var(--ds-switch-border-color-default, #aeaeb7);
+        background: none;
+        outline: none;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .medium .track-container {
+        width: var(--ds-sizing-32, 32px);
+        height: var(--ds-sizing-20, 20px);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .large .track-container {
+        width: var(--ds-sizing-40, 40px);
+        height: var(--ds-sizing-24, 24px);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container.checked .track-container {
+        border-color: var(--ds-switch-border-color-selected, rgba(250, 250, 250, 0.3));
+        background: var(--ui-kit-toggle-switch-background, var(--ds-switch-bg-color-selected, #b2764d));
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container.disabled .track-container {
+        border-color: var(--ds-switch-border-color-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container.checked.disabled .track-container {
+        background: var(--ui-kit-toggle-switch-background-disabled, var(--ds-switch-bg-color-disabled, #34353c));
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .track-container:focus-visible {
+        outline: var(--ds-border-width-l, 2px) solid var(--ds-color-border-focus-ring, #6b8494);
+        outline-offset: 0.1875rem;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .dot {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        border-radius: var(--ds-border-radius-full, 100000px);
+        transition:
+            left 150ms ease,
+            width 150ms ease,
+            height 150ms ease;
+        left: var(--ui-kit-private-dot-gap);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container.checked .dot {
+        left: calc(100% - var(--ui-kit-private-dot-gap) - var(--ui-kit-private-dot-size));
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .medium .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-08, 8px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+        background: var(--ds-switch-icon-color-default, #c3c3cb);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .large .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-12, 12px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+        background: var(--ds-switch-icon-color-default, #c3c3cb);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container.checked.medium .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-12, 12px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+        background: var(--ds-switch-icon-color-selected, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container.checked.large .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-16, 16px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+        background: var(--ds-switch-icon-color-selected, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container:not(.disabled):hover.medium .dot,
+    :host([data-ui-kit-theme='seat-legacy']) .container:active:not(.disabled).medium .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-12, 12px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container:not(.disabled):hover.medium.checked .dot,
+    :host([data-ui-kit-theme='seat-legacy']) .container:active:not(.disabled).medium.checked .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-16, 16px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+        background: var(--ds-switch-icon-color-selected, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container:not(.disabled):hover.large .dot,
+    :host([data-ui-kit-theme='seat-legacy']) .container:active:not(.disabled).large .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-16, 16px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container:not(.disabled):hover.large.checked .dot,
+    :host([data-ui-kit-theme='seat-legacy']) .container:active:not(.disabled).large.checked .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-20, 20px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+        background: var(--ds-switch-icon-color-selected, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container.disabled .dot {
+        background: var(--ds-switch-icon-color-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container.disabled.checked .dot {
+        background: var(--ds-switch-icon-color-default, #c3c3cb);
+    }
+`;exports.seatLegacyStyles=t;