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

package/dist-react/cjs/components/ds-sidebar-navigation/styles/seat.styles.cjs

@@ -0,0 +1,264 @@
+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']) {
+        --ui-kit-private-sidebar-navigation-nav-height: 5.5rem;
+    }
+
+    :host([data-ui-kit-theme='seat']) .nav {
+        padding: var(--ds-spacing-m-1, 12px) var(--ds-spacing-m-2, 16px);
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--ds-spacing-s-5, 8px);
+        background: var(--ds-color-surface-container-hover, rgba(250, 250, 250, 0.1));
+        -webkit-backdrop-filter: blur(3.75rem);
+        backdrop-filter: blur(3.75rem);
+
+        height: var(--ui-kit-private-sidebar-navigation-nav-height, 88px);
+    }
+
+    :host([data-ui-kit-theme='seat']) .aside {
+        display: flex;
+        padding: var(--ds-spacing-s-1, 0);
+        align-items: center;
+        justify-content: center;
+        gap: var(--ds-spacing-m-2, 16px);
+        flex: 1 1 auto;
+
+        font-family: var(--ds-typography-family-primary, 'cupra-screen'), sans-serif;
+        font-style: normal;
+        font-weight: 400;
+        letter-spacing: var(--ds-font-letter-spacing-0-5, 0.5px);
+
+        /* ellipsis styles */
+        overflow: hidden;
+        width: 100%;
+    }
+
+    :host([data-ui-kit-theme='seat']) .helper-text-container {
+        display: flex;
+        padding: var(--ds-spacing-s-1, 0);
+        justify-content: flex-start;
+        align-items: center;
+        gap: var(--ds-spacing-s-5, 8px);
+        flex: 1 1 auto;
+
+        /* ellipsis styles */
+        min-width: 0;
+    }
+
+    :host([data-ui-kit-theme='seat']) .aside ::slotted([slot='aside-text']) {
+        color: var(--ds-color-text-default, #fafafa);
+
+        font-size: var(--ds-font-size-14, 14px);
+        line-height: var(--ds-font-line-height-20, 20px);
+        flex: 0 0 auto;
+    }
+
+    :host([data-ui-kit-theme='seat']) .aside ::slotted([slot='aside-helper-text']) {
+        color: var(--ds-button-text-color-link-default, #fafafa);
+
+        font-size: var(--ds-typography-size-body-m, 14px);
+        line-height: var(--ds-typography-height-body-m, 20px);
+        /* ellipsis styles */
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    :host([data-ui-kit-theme='seat']) .aside ::slotted([slot='aside-icon']) {
+        flex: 0 0 auto;
+        --ui-kit-icon-color: var(--ds-button-text-color-link-default, #fafafa);
+        --ui-kit-icon-width: var(--ds-sizing-20, 20px);
+        --ui-kit-icon-height: var(--ds-sizing-20, 20px);
+    }
+
+    :host([data-ui-kit-theme='seat']) .actions-container {
+        display: flex;
+        padding: var(--ds-spacing-s-1, 0);
+        justify-content: flex-end;
+        align-items: center;
+        gap: var(--ds-spacing-s-5, 8px);
+        align-self: stretch;
+    }
+
+    :host([data-ui-kit-theme='seat']) ::slotted([slot='main-cta']) {
+        flex: 1 1 auto;
+    }
+
+    :host([data-ui-kit-theme='seat']) .modal {
+        visibility: hidden;
+        box-sizing: border-box;
+
+        -webkit-backdrop-filter: blur(0.75rem);
+
+        backdrop-filter: blur(0.75rem);
+        background: var(--ds-color-bg-overlay, rgba(9, 9, 11, 0.8));
+        display: flex;
+        justify-content: flex-end;
+        align-items: flex-end;
+        position: absolute;
+        width: 100%;
+        height: calc(100% - var(--ui-kit-private-sidebar-navigation-nav-height));
+        padding: var(--ds-spacing-m-2, 16px);
+        flex-direction: column;
+        gap: var(--ds-spacing-layout-s, 16px);
+        flex-shrink: 0;
+        left: 0;
+        top: 0;
+        z-index: var(--ds-z-index-modal);
+    }
+
+    :host([data-ui-kit-theme='seat']) .open .modal {
+        visibility: visible;
+    }
+
+    @media (min-width: 480px) {
+        :host([data-ui-kit-theme='seat']) {
+            --ui-kit-private-sidebar-navigation-nav-height: 5.875rem;
+        }
+
+        :host([data-ui-kit-theme='seat']) .nav {
+            padding: var(--ds-spacing-m-1, 12px) var(--ds-spacing-m-4, 24px);
+        }
+
+        :host([data-ui-kit-theme='seat']) .aside ::slotted([slot='aside-text']) {
+            font-size: var(--ds-font-size-18, 18px);
+            line-height: var(--ds-font-line-height-26, 26px);
+        }
+
+        :host([data-ui-kit-theme='seat']) .aside ::slotted([slot='aside-helper-text']) {
+            font-size: var(--ds-typography-size-body-l, 16px);
+            line-height: var(--ds-typography-height-body-l, 24px);
+        }
+
+        :host([data-ui-kit-theme='seat']) .aside ::slotted([slot='aside-icon']) {
+            --ui-kit-icon-width: var(--ds-sizing-24, 24px);
+            --ui-kit-icon-height: var(--ds-sizing-24, 24px);
+        }
+    }
+
+    @media (min-width: 768px) {
+        :host([data-ui-kit-theme='seat']) {
+            --ui-kit-private-sidebar-navigation-nav-height: 4.5rem;
+        }
+
+        :host([data-ui-kit-theme='seat']) .nav {
+            flex-direction: row;
+            padding: var(--ds-spacing-m-2, 16px) var(--ds-spacing-m-4, 24px);
+            align-items: center;
+            flex-shrink: 0;
+        }
+
+        :host([data-ui-kit-theme='seat']) .aside ::slotted([slot='aside-text']) {
+            font-size: var(--ds-font-size-24, 24px);
+            line-height: var(--ds-font-line-height-32, 32px);
+        }
+
+        :host([data-ui-kit-theme='seat']) .aside ::slotted([slot='aside-helper-text']) {
+            font-size: var(--ds-typography-size-body-l, 16px);
+            line-height: var(--ds-typography-height-body-l, 24px);
+        }
+
+        :host([data-ui-kit-theme='seat']) .actions-container {
+            flex: 0 0 auto;
+            gap: var(--ds-spacing-m-2, 16px);
+        }
+
+        :host([data-ui-kit-theme='seat']) ::slotted([slot='main-cta']) {
+            flex: 0 0 auto;
+        }
+    }
+
+    @media (min-width: 1024px) {
+        :host([data-ui-kit-theme='seat']) {
+            --ui-kit-private-sidebar-navigation-nav-height: 6.125rem;
+        }
+
+        :host([data-ui-kit-theme='seat']) .nav {
+            flex-direction: column;
+            padding: var(--ds-spacing-m-1, 12px) var(--ds-spacing-m-2, 16px);
+            align-items: flex-start;
+            gap: var(--ds-spacing-s-5, 8px);
+        }
+
+        :host([data-ui-kit-theme='seat']) .aside ::slotted([slot='aside-text']) {
+            font-size: var(--ds-font-size-18, 18px);
+            line-height: var(--ds-font-line-height-26, 26px);
+        }
+
+        :host([data-ui-kit-theme='seat']) .aside ::slotted([slot='aside-helper-text']) {
+            font-size: var(--ds-typography-size-body-m, 14px);
+            line-height: var(--ds-typography-height-body-m, 20px);
+        }
+
+        :host([data-ui-kit-theme='seat']) .aside ::slotted([slot='aside-icon']) {
+            --ui-kit-icon-width: var(--ds-sizing-20, 20px);
+            --ui-kit-icon-height: var(--ds-sizing-20, 20px);
+        }
+
+        :host([data-ui-kit-theme='seat']) .actions-container {
+            flex: 1 1 auto;
+            gap: var(--ds-spacing-m-2, 16px);
+        }
+
+        :host([data-ui-kit-theme='seat']) ::slotted([slot='main-cta']) {
+            flex: 1 1 auto;
+        }
+    }
+
+    @media (min-width: 1440px) {
+        :host([data-ui-kit-theme='seat']) {
+            --ui-kit-private-sidebar-navigation-nav-height: 7rem;
+        }
+
+        :host([data-ui-kit-theme='seat']) .aside ::slotted([slot='aside-text']) {
+            font-size: var(--ds-font-size-24, 24px);
+            line-height: var(--ds-font-line-height-32, 32px);
+        }
+
+        :host([data-ui-kit-theme='seat']) .aside ::slotted([slot='aside-helper-text']) {
+            font-size: var(--ds-typography-size-body-l, 16px);
+            line-height: var(--ds-typography-height-body-l, 24px);
+        }
+
+        :host([data-ui-kit-theme='seat']) .aside ::slotted([slot='aside-icon']) {
+            --ui-kit-icon-width: var(--ds-sizing-24, 24px);
+            --ui-kit-icon-height: var(--ds-sizing-24, 24px);
+        }
+
+        :host([data-ui-kit-theme='seat']) .actions-container {
+            gap: var(--ds-spacing-s-5, 8px);
+        }
+    }
+
+    @media (min-width: 1920px) {
+        :host([data-ui-kit-theme='seat']) {
+            --ui-kit-private-sidebar-navigation-nav-height: 4.5rem;
+        }
+
+        :host([data-ui-kit-theme='seat']) .nav {
+            flex-direction: row;
+            padding: var(--ds-spacing-m-1, 12px) var(--ds-spacing-m-4, 24px);
+            align-items: center;
+            flex-shrink: 0;
+        }
+
+        :host([data-ui-kit-theme='seat']) .aside ::slotted([slot='aside-text']) {
+            font-size: var(--ds-font-size-24, 24px);
+            line-height: var(--ds-font-line-height-32, 32px);
+        }
+
+        :host([data-ui-kit-theme='seat']) .aside ::slotted([slot='aside-helper-text']) {
+            font-size: var(--ds-typography-size-body-l, 16px);
+            line-height: var(--ds-typography-height-body-l, 24px);
+        }
+
+        :host([data-ui-kit-theme='seat']) .actions-container {
+            flex: 0 0 auto;
+            gap: var(--ds-spacing-m-2, 16px);
+        }
+
+        :host([data-ui-kit-theme='seat']) ::slotted([slot='main-cta']) {
+            flex: 0 0 auto;
+        }
+    }
+`;exports.seatStyles=t;

package/dist-react/cjs/components/ds-skeleton/ds-skeleton.cjs

@@ -1,8 +1,8 @@
-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"),a=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 o=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/style-map.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/style-map.cjs");const s=require("./styles/common.styles.cjs");var c=class extends r.UiKitElement{constructor(...e){super(...e),this.variant=`text`,this.animation=`shimmer`}get classes(){return{skeleton:!0,[`variant-${this.variant}`]:!0,[`animation-${this.animation}`]:!0}}get inlineStyles(){return{width:this.width??void 0,height:this.height??void 0}}render(){return 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"),a=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 o=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/style-map.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/style-map.cjs");const s=require("./styles/common.styles.cjs");var c=class extends t.LitElement{constructor(...e){super(...e),this.variant=`text`,this.animation=`shimmer`}get classes(){return{skeleton:!0,[`variant-${this.variant}`]:!0,[`animation-${this.animation}`]:!0}}get inlineStyles(){return{width:this.width??void 0,height:this.height??void 0}}render(){return e.html`
             <div
                 class=${a.classMap(this.classes)}
                 style=${o.styleMap(this.inlineStyles)}
                 role="presentation"
                 aria-hidden="true"
             ></div>
-        `}},l=(c.styles=[s.commonStyles],c);n.default([t.property({type:String})],l.prototype,`variant`,void 0),n.default([t.property({type:String})],l.prototype,`width`,void 0),n.default([t.property({type:String})],l.prototype,`height`,void 0),n.default([t.property({type:String})],l.prototype,`animation`,void 0),l=n.default([i.customUiKitElement(`ds-skeleton`)],l),Object.defineProperty(exports,"DsSkeleton",{enumerable:!0,get:function(){return l}});
+        `}},l=(c.styles=[s.commonStyles],c);r.default([n.property({type:String})],l.prototype,`variant`,void 0),r.default([n.property({type:String})],l.prototype,`width`,void 0),r.default([n.property({type:String})],l.prototype,`height`,void 0),r.default([n.property({type:String})],l.prototype,`animation`,void 0),l=r.default([i.customUiKitElement(`ds-skeleton`)],l),Object.defineProperty(exports,"DsSkeleton",{enumerable:!0,get:function(){return l}});

package/dist-react/cjs/components/ds-slider/ds-slider.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"),r=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/query.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.cjs");const i=require("../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.cjs"),a=require("../base/UiKitElement.cjs"),o=require("../../decorators/customUiKitElement.cjs"),s=require("../../utils/booleanConverter.cjs"),c=require("../../utils/uiKitHtml.cjs"),l=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 u=require("../../mixins/ViewportMixin.cjs"),d=require("../../utils/objectConverter.cjs"),f=require("../../utils/formatNumber/formatNumber.cjs");require("../ds-text-input/ds-text-input.cjs");const p=require("./utils/roundToDecimals/roundToDecimals.cjs"),m=require("./utils/getStepValue/getStepValue.cjs"),h=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/live.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/live.cjs");const g=require("./styles/common.styles.cjs");var _=class extends u.ViewportMixin(a.UiKitElement){constructor(...e){super(...e),this.variant=`primary`,this.min=0,this.max=100,this.minLabel=``,this.maxLabel=``,this.step=1,this.initialValueMin=0,this.mode=`light`,this.locale=void 0,this.localeMatcher=`lookup`,this.useGrouping=!0,this.minimumIntegerDigits=1,this.minimumFractionDigits=0,this.maximumFractionDigits=3,this.size=`medium`,this.disabled=!1,this.allowThumbOverlap=!1,this.keyboardMode=!1,this._initialValuesApplied=!1,this.getNewValue=e=>{let{width:t,left:n}=this.track.getBoundingClientRect(),r=this.thumbRadius,i=e.type.indexOf(`mouse`)===-1?e.touches[0].clientX:e.clientX,a=t-r*2,o=Math.min(Math.max(0,i-n-r),a),s=a>0?o*100/a:0;return this.min+s*(this.max-this.min)/100},this.setActiveThumb=e=>{let t=this.getNewValue(e);this.activeThumb=typeof this._valueMax!=`number`||t<=this._valueMin?`min`:t>=this._valueMax?`max`:t-this._valueMin<this._valueMax-t?`min`:`max`},this.handleMouseMove=e=>{this.animationFrameRequest&&cancelAnimationFrame(this.animationFrameRequest),this.animationFrameRequest=requestAnimationFrame(()=>{let t=this.getNewValue(e),n=this.activeThumb??`min`,{stepValue:r}=this.computeStep({proposedValue:t,role:n});this.handleChange({value:r,role:n})})},this.handleMouseDown=e=>{var t,n,r,i;this.disabled||(e==null||(t=e.preventDefault)==null||t.call(e),this.setActiveThumb(e),this.handleMouseMove(e),(n=window)==null||n.addEventListener(`mousemove`,this.handleMouseMove),(r=window)==null||r.addEventListener(`touchmove`,this.handleMouseMove),(i=window)==null||i.addEventListener(`pointerup`,this.handlePointerUp))},this.handlePointerUp=()=>{var e,t,n;(e=window)==null||e.removeEventListener(`mousemove`,this.handleMouseMove),(t=window)==null||t.removeEventListener(`touchmove`,this.handleMouseMove),(n=window)==null||n.removeEventListener(`pointerup`,this.handlePointerUp)},this.handleKeydown=()=>{this.keyboardMode=!0},this.handlePointerOrMouseDown=()=>{this.keyboardMode=!1},this.onInputFocus=(e,t)=>{let n=e.currentTarget,r=this.getRoleById(t);this.editingField=r,n.type=`number`,n.step=String(this.step??1);let i=r===`min`?this._valueMin:this._valueMax;n.value=String(i??``),this.keyboardMode&&n.classList.add(`focus-visible`)},this.commitInputValue=(e,t)=>{let n=e.currentTarget,r=this.getRoleById(t),{stepValue:i}=this.computeStep({proposedValue:Number(n.value),role:r}),a=p.roundToDecimals({value:i,fractionDigits:this.maximumFractionDigits});this.handleChange({value:a,role:r}),this.isControlled(r)||(n.value=String(a))},this.onInputBlur=e=>{var t;this.editingField=void 0;let n=e.currentTarget;n==null||(t=n.classList)==null||t.remove(`focus-visible`)},this.onInputKeyDown=(e,t)=>{e.key===`Enter`&&(e.preventDefault(),this.commitInputValue(e,t))},this.onThumbKeyDown=(e,t)=>{if(!this.disabled&&(e.key===`ArrowLeft`||e.key===`ArrowRight`)){e.preventDefault();let n=this.step??1,r=e.key===`ArrowLeft`?-n:n,i=this.getRoleById(t),a=i===`min`?this._valueMin:this._valueMax,{stepValue:o}=this.computeStep({proposedValue:a+r,role:i});this.handleChange({value:o,role:i})}}}get isRange(){return typeof this.initialValueMax==`number`||typeof this.valueMax==`number`}get sliderSizeToTextInputSize(){var e;return(typeof this.size==`string`?this.size:(e=this.size)==null?void 0:e[this.viewport])===`large`?`large`:`medium`}isControlled(e){return typeof(e===`min`?this.valueMin:this.valueMax)==`number`}getRoleById(e){return e===1?`min`:`max`}get currentValues(){return{1:this._valueMin,...typeof this._valueMax==`number`?{2:this._valueMax}:{}}}computeStep({proposedValue:e,role:t}){return m.getStepValue({step:this.step,min:this.min,max:this.max,proposedValue:e,role:t,currentValues:this.currentValues,allowOverlap:this.allowThumbOverlap})}willUpdate(e){super.willUpdate(e),typeof this.valueMin==`number`&&(this._valueMin=this.valueMin),typeof this.valueMax==`number`&&(this._valueMax=this.valueMax),this._initialValuesApplied||(this._initialValuesApplied=!0,this.applyInitialValues())}disconnectedCallback(){var e,t,n,r,i,a;super.disconnectedCallback(),(e=window)==null||e.removeEventListener(`mousemove`,this.handleMouseMove),(t=window)==null||t.removeEventListener(`touchmove`,this.handleMouseMove),(n=window)==null||n.removeEventListener(`pointerup`,this.handlePointerUp),(r=window)==null||r.removeEventListener(`keydown`,this.handleKeydown),(i=window)==null||i.removeEventListener(`mousedown`,this.handlePointerOrMouseDown),(a=window)==null||a.removeEventListener(`pointerdown`,this.handlePointerOrMouseDown)}firstUpdated(e){var t,n,r;super.firstUpdated(e),(t=window)==null||t.addEventListener(`keydown`,this.handleKeydown),(n=window)==null||n.addEventListener(`mousedown`,this.handlePointerOrMouseDown),(r=window)==null||r.addEventListener(`pointerdown`,this.handlePointerOrMouseDown)}applyInitialValues(){[`min`,`max`].forEach(e=>{if(this.isControlled(e))return;let t=e===`min`?`initialValueMin`:`initialValueMax`,n=this[t];if(typeof n!=`number`)return;let{stepValue:r}=this.computeStep({proposedValue:n,role:e}),i=e===`min`?`_valueMin`:`_valueMax`;this[i]!==r&&this.handleChange({value:r,role:e})})}getTrackPct(e){let t=this.max-this.min;return t===0?0:(e-this.min)/t*100}get thumbRadius(){var e;let t=(e=this.renderRoot)==null?void 0:e.querySelector(`.thumb`);return t?t.offsetWidth/2:0}trackPosition(e){let t=v.THUMB_RADIUS_CSS_VAR;return`calc(${t} + (100% - ${t} * 2) * ${e/100})`}trackWidth(e){return`calc((100% - ${v.THUMB_RADIUS_CSS_VAR} * 2) * ${e/100})`}handleChange({value:e,role:t}){let n=p.roundToDecimals({value:e,fractionDigits:this.maximumFractionDigits}),r=t===`min`?`_valueMin`:`_valueMax`;this[r]!==n&&(this.isControlled(t)||(this[r]=n),this.dispatchEvent(new CustomEvent(`change`,{bubbles:!0,composed:!0,detail:{role:t,value:n}})))}formatNumber(e){let t={value:e,locale:this.locale,...this.unitStyle&&{style:this.unitStyle},...this.currency&&{currency:this.currency},...this.unit&&{unit:this.unit},localeMatcher:this.localeMatcher,minimumIntegerDigits:this.minimumIntegerDigits,minimumFractionDigits:this.minimumFractionDigits,maximumFractionDigits:this.maximumFractionDigits,thousandSeparator:this.thousandSeparator,fractionSeparator:this.fractionSeparator,useGrouping:this.useGrouping};return f.formatNumber(t)}get rangeValuesTemplates(){let{formattedNumber:t,unitSymbol:n,unitSymbolPosition:r}=this.formatNumber(this.min),i=this.unitSymbol??n,a=this.unitSymbolPosition??r??(i?`right`:void 0),{formattedNumber:o}=this.formatNumber(this.max);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"),r=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/query.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.cjs");const i=require("../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.cjs"),a=require("../base/UiKitElement.cjs"),o=require("../../decorators/customUiKitElement.cjs"),s=require("../../utils/booleanConverter.cjs"),c=require("../../utils/uiKitHtml.cjs"),l=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 u=require("../../mixins/ViewportMixin.cjs"),d=require("../../utils/objectConverter.cjs"),f=require("../../utils/formatNumber/formatNumber.cjs");require("../ds-text-input/ds-text-input.cjs");const p=require("./utils/roundToDecimals/roundToDecimals.cjs"),m=require("./utils/getStepValue/getStepValue.cjs"),h=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/live.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/live.cjs");const g=require("./styles/common.styles.cjs"),_=require("./styles/cupra-diagonal.styles.cjs"),v=require("./styles/cupra.styles.cjs"),y=require("./styles/seat-legacy.styles.cjs"),b=require("./styles/seat.styles.cjs");var x=class extends u.ViewportMixin(a.UiKitElement){constructor(...e){super(...e),this.variant=`primary`,this.min=0,this.max=100,this.minLabel=``,this.maxLabel=``,this.step=1,this.initialValueMin=0,this.mode=`light`,this.locale=void 0,this.localeMatcher=`lookup`,this.useGrouping=!0,this.minimumIntegerDigits=1,this.minimumFractionDigits=0,this.maximumFractionDigits=3,this.size=`medium`,this.disabled=!1,this.allowThumbOverlap=!1,this.keyboardMode=!1,this._initialValuesApplied=!1,this.getNewValue=e=>{let{width:t,left:n}=this.track.getBoundingClientRect(),r=this.thumbRadius,i=e.type.indexOf(`mouse`)===-1?e.touches[0].clientX:e.clientX,a=t-r*2,o=Math.min(Math.max(0,i-n-r),a),s=a>0?o*100/a:0;return this.min+s*(this.max-this.min)/100},this.setActiveThumb=e=>{let t=this.getNewValue(e);this.activeThumb=typeof this._valueMax!=`number`||t<=this._valueMin?`min`:t>=this._valueMax?`max`:t-this._valueMin<this._valueMax-t?`min`:`max`},this.handleMouseMove=e=>{this.animationFrameRequest&&cancelAnimationFrame(this.animationFrameRequest),this.animationFrameRequest=requestAnimationFrame(()=>{let t=this.getNewValue(e),n=this.activeThumb??`min`,{stepValue:r}=this.computeStep({proposedValue:t,role:n});this.handleChange({value:r,role:n})})},this.handleMouseDown=e=>{var t,n,r,i;this.disabled||(e==null||(t=e.preventDefault)==null||t.call(e),this.setActiveThumb(e),this.handleMouseMove(e),(n=window)==null||n.addEventListener(`mousemove`,this.handleMouseMove),(r=window)==null||r.addEventListener(`touchmove`,this.handleMouseMove),(i=window)==null||i.addEventListener(`pointerup`,this.handlePointerUp))},this.handlePointerUp=()=>{var e,t,n;(e=window)==null||e.removeEventListener(`mousemove`,this.handleMouseMove),(t=window)==null||t.removeEventListener(`touchmove`,this.handleMouseMove),(n=window)==null||n.removeEventListener(`pointerup`,this.handlePointerUp)},this.handleKeydown=()=>{this.keyboardMode=!0},this.handlePointerOrMouseDown=()=>{this.keyboardMode=!1},this.onInputFocus=(e,t)=>{let n=e.currentTarget,r=this.getRoleById(t);this.editingField=r,n.type=`number`,n.step=String(this.step??1);let i=r===`min`?this._valueMin:this._valueMax;n.value=String(i??``),this.keyboardMode&&n.classList.add(`focus-visible`)},this.commitInputValue=(e,t)=>{let n=e.currentTarget,r=this.getRoleById(t),{stepValue:i}=this.computeStep({proposedValue:Number(n.value),role:r}),a=p.roundToDecimals({value:i,fractionDigits:this.maximumFractionDigits});this.handleChange({value:a,role:r}),this.isControlled(r)||(n.value=String(a))},this.onInputBlur=e=>{var t;this.editingField=void 0;let n=e.currentTarget;n==null||(t=n.classList)==null||t.remove(`focus-visible`)},this.onInputKeyDown=(e,t)=>{e.key===`Enter`&&(e.preventDefault(),this.commitInputValue(e,t))},this.onThumbKeyDown=(e,t)=>{if(!this.disabled&&(e.key===`ArrowLeft`||e.key===`ArrowRight`)){e.preventDefault();let n=this.step??1,r=e.key===`ArrowLeft`?-n:n,i=this.getRoleById(t),a=i===`min`?this._valueMin:this._valueMax,{stepValue:o}=this.computeStep({proposedValue:a+r,role:i});this.handleChange({value:o,role:i})}}}get isRange(){return typeof this.initialValueMax==`number`||typeof this.valueMax==`number`}get sliderSizeToTextInputSize(){var e;return(typeof this.size==`string`?this.size:(e=this.size)==null?void 0:e[this.viewport])===`large`?`large`:`medium`}isControlled(e){return typeof(e===`min`?this.valueMin:this.valueMax)==`number`}getRoleById(e){return e===1?`min`:`max`}get currentValues(){return{1:this._valueMin,...typeof this._valueMax==`number`?{2:this._valueMax}:{}}}computeStep({proposedValue:e,role:t}){return m.getStepValue({step:this.step,min:this.min,max:this.max,proposedValue:e,role:t,currentValues:this.currentValues,allowOverlap:this.allowThumbOverlap})}willUpdate(e){super.willUpdate(e),typeof this.valueMin==`number`&&(this._valueMin=this.valueMin),typeof this.valueMax==`number`&&(this._valueMax=this.valueMax),this._initialValuesApplied||(this._initialValuesApplied=!0,this.applyInitialValues())}disconnectedCallback(){var e,t,n,r,i,a;super.disconnectedCallback(),(e=window)==null||e.removeEventListener(`mousemove`,this.handleMouseMove),(t=window)==null||t.removeEventListener(`touchmove`,this.handleMouseMove),(n=window)==null||n.removeEventListener(`pointerup`,this.handlePointerUp),(r=window)==null||r.removeEventListener(`keydown`,this.handleKeydown),(i=window)==null||i.removeEventListener(`mousedown`,this.handlePointerOrMouseDown),(a=window)==null||a.removeEventListener(`pointerdown`,this.handlePointerOrMouseDown)}firstUpdated(e){var t,n,r;super.firstUpdated(e),(t=window)==null||t.addEventListener(`keydown`,this.handleKeydown),(n=window)==null||n.addEventListener(`mousedown`,this.handlePointerOrMouseDown),(r=window)==null||r.addEventListener(`pointerdown`,this.handlePointerOrMouseDown)}applyInitialValues(){[`min`,`max`].forEach(e=>{if(this.isControlled(e))return;let t=e===`min`?`initialValueMin`:`initialValueMax`,n=this[t];if(typeof n!=`number`)return;let{stepValue:r}=this.computeStep({proposedValue:n,role:e}),i=e===`min`?`_valueMin`:`_valueMax`;this[i]!==r&&this.handleChange({value:r,role:e})})}getTrackPct(e){let t=this.max-this.min;return t===0?0:(e-this.min)/t*100}get thumbRadius(){var e;let t=(e=this.renderRoot)==null?void 0:e.querySelector(`.thumb`);return t?t.offsetWidth/2:0}trackPosition(e){let t=S.THUMB_RADIUS_CSS_VAR;return`calc(${t} + (100% - ${t} * 2) * ${e/100})`}trackWidth(e){return`calc((100% - ${S.THUMB_RADIUS_CSS_VAR} * 2) * ${e/100})`}handleChange({value:e,role:t}){let n=p.roundToDecimals({value:e,fractionDigits:this.maximumFractionDigits}),r=t===`min`?`_valueMin`:`_valueMax`;this[r]!==n&&(this.isControlled(t)||(this[r]=n),this.dispatchEvent(new CustomEvent(`change`,{bubbles:!0,composed:!0,detail:{role:t,value:n}})))}formatNumber(e){let t={value:e,locale:this.locale,...this.unitStyle&&{style:this.unitStyle},...this.currency&&{currency:this.currency},...this.unit&&{unit:this.unit},localeMatcher:this.localeMatcher,minimumIntegerDigits:this.minimumIntegerDigits,minimumFractionDigits:this.minimumFractionDigits,maximumFractionDigits:this.maximumFractionDigits,thousandSeparator:this.thousandSeparator,fractionSeparator:this.fractionSeparator,useGrouping:this.useGrouping};return f.formatNumber(t)}get rangeValuesTemplates(){let{formattedNumber:t,unitSymbol:n,unitSymbolPosition:r}=this.formatNumber(this.min),i=this.unitSymbol??n,a=this.unitSymbolPosition??r??(i?`right`:void 0),{formattedNumber:o}=this.formatNumber(this.max);return e.html`
             <div class="range-value-text">
                 ${this.minLabel?e.html`<span class="range-value-label">${this.minLabel}</span>`:e.nothing}
                 ${a===`left`?e.html`<span>${i}</span>`:e.nothing}
@@ -120,4 +120,4 @@ require("../ds-theme-provider/themeContext.cjs");const e=require("../../node_mod
                 <div class="range-value-container">${this.rangeValuesTemplates}</div>
                 ${t?e.nothing:this.inputsTemplate}
             </div>
-        `}},v=_,y=(_.styles=[g.commonStyles,g.trackStyles,g.thumbStyles,g.currentValueStyles,g.rangeValueStyles,g.inputResetStyles],_.THUMB_RADIUS_CSS_VAR=`var(--ui-kit-private-slider-thumb-radius, 0px)`,_);i.default([t.property({type:String})],y.prototype,`variant`,void 0),i.default([t.property({type:Number})],y.prototype,`min`,void 0),i.default([t.property({type:Number})],y.prototype,`max`,void 0),i.default([t.property({type:String,attribute:`min-label`})],y.prototype,`minLabel`,void 0),i.default([t.property({type:String,attribute:`max-label`})],y.prototype,`maxLabel`,void 0),i.default([t.property({type:Number})],y.prototype,`step`,void 0),i.default([t.property({type:Number,attribute:`initial-value-min`})],y.prototype,`initialValueMin`,void 0),i.default([t.property({type:Number,attribute:`initial-value-max`})],y.prototype,`initialValueMax`,void 0),i.default([t.property({type:Number,attribute:`value-min`})],y.prototype,`valueMin`,void 0),i.default([t.property({type:Number,attribute:`value-max`})],y.prototype,`valueMax`,void 0),i.default([t.property({type:String,reflect:!0})],y.prototype,`mode`,void 0),i.default([t.property({type:String,attribute:`locale`})],y.prototype,`locale`,void 0),i.default([t.property({type:String,attribute:`locale-matcher`})],y.prototype,`localeMatcher`,void 0),i.default([t.property({type:String,attribute:`unit-symbol`})],y.prototype,`unitSymbol`,void 0),i.default([t.property({type:String,attribute:`unit-symbol-position`})],y.prototype,`unitSymbolPosition`,void 0),i.default([t.property({type:String,attribute:`unit-style`})],y.prototype,`unitStyle`,void 0),i.default([t.property({type:String,attribute:`currency`})],y.prototype,`currency`,void 0),i.default([t.property({type:String,attribute:`unit`})],y.prototype,`unit`,void 0),i.default([t.property({type:String,attribute:`use-grouping`,converter:e=>e===`auto`?`auto`:typeof e==`boolean`?e:e===`true`||e===``||e!==`false`})],y.prototype,`useGrouping`,void 0),i.default([t.property({type:Number,attribute:`minimum-integer-digits`})],y.prototype,`minimumIntegerDigits`,void 0),i.default([t.property({type:Number,attribute:`minimum-fraction-digits`})],y.prototype,`minimumFractionDigits`,void 0),i.default([t.property({type:Number,attribute:`maximum-fraction-digits`})],y.prototype,`maximumFractionDigits`,void 0),i.default([t.property({type:String,attribute:`thousand-separator`})],y.prototype,`thousandSeparator`,void 0),i.default([t.property({type:String,attribute:`fraction-separator`})],y.prototype,`fractionSeparator`,void 0),i.default([t.property({type:String,converter:d.objectConverter})],y.prototype,`size`,void 0),i.default([t.property({type:Boolean,converter:s.booleanConverter})],y.prototype,`disabled`,void 0),i.default([t.property({type:String,attribute:`input-min-aria-label`})],y.prototype,`inputMinAriaLabel`,void 0),i.default([t.property({type:String,attribute:`input-max-aria-label`})],y.prototype,`inputMaxAriaLabel`,void 0),i.default([t.property({type:Boolean,attribute:`allow-thumb-overlap`,converter:s.booleanConverter})],y.prototype,`allowThumbOverlap`,void 0),i.default([r.query(`.track`)],y.prototype,`track`,void 0),i.default([n.state()],y.prototype,`_valueMin`,void 0),i.default([n.state()],y.prototype,`_valueMax`,void 0),i.default([n.state()],y.prototype,`editingField`,void 0),y=v=i.default([o.customUiKitElement(`ds-slider`)],y),Object.defineProperty(exports,"DsSlider",{enumerable:!0,get:function(){return y}});
+        `}},S=x,C=(x.styles=[g.commonStyles,g.trackStyles,g.thumbStyles,g.currentValueStyles,g.rangeValueStyles,g.inputResetStyles,_.cupraDiagonalStyles,b.seatStyles,v.cupraStyles,y.seatLegacyStyles],x.THUMB_RADIUS_CSS_VAR=`var(--ui-kit-private-slider-thumb-radius, 0px)`,x);i.default([t.property({type:String})],C.prototype,`variant`,void 0),i.default([t.property({type:Number})],C.prototype,`min`,void 0),i.default([t.property({type:Number})],C.prototype,`max`,void 0),i.default([t.property({type:String,attribute:`min-label`})],C.prototype,`minLabel`,void 0),i.default([t.property({type:String,attribute:`max-label`})],C.prototype,`maxLabel`,void 0),i.default([t.property({type:Number})],C.prototype,`step`,void 0),i.default([t.property({type:Number,attribute:`initial-value-min`})],C.prototype,`initialValueMin`,void 0),i.default([t.property({type:Number,attribute:`initial-value-max`})],C.prototype,`initialValueMax`,void 0),i.default([t.property({type:Number,attribute:`value-min`})],C.prototype,`valueMin`,void 0),i.default([t.property({type:Number,attribute:`value-max`})],C.prototype,`valueMax`,void 0),i.default([t.property({type:String,reflect:!0})],C.prototype,`mode`,void 0),i.default([t.property({type:String,attribute:`locale`})],C.prototype,`locale`,void 0),i.default([t.property({type:String,attribute:`locale-matcher`})],C.prototype,`localeMatcher`,void 0),i.default([t.property({type:String,attribute:`unit-symbol`})],C.prototype,`unitSymbol`,void 0),i.default([t.property({type:String,attribute:`unit-symbol-position`})],C.prototype,`unitSymbolPosition`,void 0),i.default([t.property({type:String,attribute:`unit-style`})],C.prototype,`unitStyle`,void 0),i.default([t.property({type:String,attribute:`currency`})],C.prototype,`currency`,void 0),i.default([t.property({type:String,attribute:`unit`})],C.prototype,`unit`,void 0),i.default([t.property({type:String,attribute:`use-grouping`,converter:e=>e===`auto`?`auto`:typeof e==`boolean`?e:e===`true`||e===``||e!==`false`})],C.prototype,`useGrouping`,void 0),i.default([t.property({type:Number,attribute:`minimum-integer-digits`})],C.prototype,`minimumIntegerDigits`,void 0),i.default([t.property({type:Number,attribute:`minimum-fraction-digits`})],C.prototype,`minimumFractionDigits`,void 0),i.default([t.property({type:Number,attribute:`maximum-fraction-digits`})],C.prototype,`maximumFractionDigits`,void 0),i.default([t.property({type:String,attribute:`thousand-separator`})],C.prototype,`thousandSeparator`,void 0),i.default([t.property({type:String,attribute:`fraction-separator`})],C.prototype,`fractionSeparator`,void 0),i.default([t.property({type:String,converter:d.objectConverter})],C.prototype,`size`,void 0),i.default([t.property({type:Boolean,converter:s.booleanConverter})],C.prototype,`disabled`,void 0),i.default([t.property({type:String,attribute:`input-min-aria-label`})],C.prototype,`inputMinAriaLabel`,void 0),i.default([t.property({type:String,attribute:`input-max-aria-label`})],C.prototype,`inputMaxAriaLabel`,void 0),i.default([t.property({type:Boolean,attribute:`allow-thumb-overlap`,converter:s.booleanConverter})],C.prototype,`allowThumbOverlap`,void 0),i.default([r.query(`.track`)],C.prototype,`track`,void 0),i.default([n.state()],C.prototype,`_valueMin`,void 0),i.default([n.state()],C.prototype,`_valueMax`,void 0),i.default([n.state()],C.prototype,`editingField`,void 0),C=S=i.default([o.customUiKitElement(`ds-slider`)],C),Object.defineProperty(exports,"DsSlider",{enumerable:!0,get:function(){return C}});

package/dist-react/cjs/components/ds-slider/styles/cupra-diagonal.styles.cjs

@@ -0,0 +1,162 @@
+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']) .medium {
+        --ui-kit-private-slider-thumb-radius: 0.75rem;
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .large {
+        --ui-kit-private-slider-thumb-radius: 1rem;
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .range-value-text {
+        gap: var(--ds-spacing-s-2, 2px);
+        color: var(--ds-color-text-default-subtle, #aeaeb7);
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+        font: 400 var(--ds-typography-size-body-s, 12px) / var(--ds-typography-height-body-s, 16px)
+            var(--ds-typography-family-primary, 'cupra-screen');
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .large .range-value-text {
+        font: 400 var(--ds-typography-size-body-m, 14px) / var(--ds-typography-height-body-m, 20px)
+            var(--ds-typography-family-primary, 'cupra-screen');
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .track {
+        height: 0.25rem;
+        border-radius: var(--ds-border-radius-xxs, 4px);
+        background: var(--ui-kit-slider-track-background, var(--ds-color-surface-default-minimal, #343844));
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.disabled .track {
+        background: var(--ui-kit-slider-track-background-disabled, var(--ds-color-surface-disabled, #5a5c67));
+        cursor: not-allowed;
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .medium .track {
+        margin: 1.125rem 0;
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .large .track {
+        margin: 1.375rem 0;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .track-range {
+        height: 0.25rem;
+        border-radius: var(--ds-border-radius-xxs, 4px);
+        background: var(
+            --ui-kit-slider-track-range-background,
+            var(
+                --ds-indicator-bg-color-active-primary,
+                linear-gradient(47deg, #b77f58 0%, #9b613b 62.52%, #804620 96.18%)
+            )
+        );
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.disabled .track-range {
+        background: var(--ui-kit-slider-track-range-background-disabled, var(--ds-color-surface-disabled, #5a5c67));
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .thumb {
+        width: 1.5rem;
+        height: 1.5rem;
+        top: 50%;
+        margin-top: -0.75rem;
+        transform: translateX(-50%);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .large .thumb {
+        width: 2rem;
+        height: 2rem;
+        margin-top: -1rem;
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .thumb .thumb-svg {
+        width: 100%;
+        height: 100%;
+        display: block;
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .thumb .thumb-circle {
+        fill: var(--ds-color-icon-default, #fafafa);
+        stroke: var(--ds-color-border-default-subtle, rgba(250, 250, 250, 0.3));
+        stroke-width: 0.125rem;
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .thumb:hover .thumb-circle {
+        fill: var(--ds-color-control-icon-default, #ffffff);
+        stroke: var(--ds-color-border-default-subtle, rgba(250, 250, 250, 0.3));
+        stroke-width: 0.125rem;
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .track:active .thumb .thumb-circle {
+        fill: var(--ds-color-icon-default, #fafafa);
+        stroke: var(--ds-color-border-default-subtle, rgba(250, 250, 250, 0.3));
+        stroke-width: 0.125rem;
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .thumb:focus-visible .thumb-circle {
+        fill: var(--ds-color-control-icon-default, #ffffff);
+        stroke: var(--ds-color-border-default-subtle, rgba(250, 250, 250, 0.3));
+        stroke-width: 0.125rem;
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .thumb:focus-visible {
+        outline: var(--ds-border-width-l, 2px) solid var(--ds-color-border-focus-ring, #6b8494);
+        outline-offset: 0.4375rem;
+        border-radius: var(--ds-border-radius-full, 100000px);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.disabled .thumb .thumb-circle {
+        fill: var(--ds-color-icon-disabled, #8b8d97);
+        stroke: var(--ds-color-border-default, #8b8d97);
+        stroke-width: 0.0625rem;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .inputs-container {
+        display: flex;
+        justify-content: space-between;
+        margin-top: var(--ds-spacing-m-2, 16px);
+        gap: 0.25rem;
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .input-wrapper {
+        width: 100%;
+        max-width: var(--ui-kit-slider-input-width, 184px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.variant-secondary {
+        display: flex;
+        flex-direction: column;
+        gap: var(--ds-spacing-s-3, 4px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-secondary .secondary-inputs-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--ds-spacing-s-5, 8px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-secondary .secondary-input-group {
+        display: flex;
+        align-items: center;
+        gap: var(--ds-spacing-s-5, 8px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-secondary .secondary-input-wrapper {
+        --ui-kit-text-input-width: fit-content;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-secondary .secondary-input-value {
+        field-sizing: content;
+        min-width: 1ch;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-secondary .secondary-unit-text {
+        font: var(
+            --ds-font-currencies-figures-small-light,
+            300 var(--ds-typography-size-currency-small, 18px) / var(--ds-typography-height-currency-small, 26px)
+                var(--ds-typography-family-primary, 'cupra-screen')
+        );
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+        color: var(--ds-color-text-default-subtle, #aeaeb7);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.disabled.variant-secondary .secondary-unit-text {
+        color: var(--ds-color-text-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-secondary .secondary-inputs-separator {
+        font: var(
+            --ds-font-currencies-figures-small-light,
+            300 var(--ds-typography-size-currency-small, 18px) / var(--ds-typography-height-currency-small, 26px)
+                var(--ds-typography-family-primary, 'cupra-screen')
+        );
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+        color: var(--ds-color-text-default-subtle, #aeaeb7);
+        padding: 0 var(--ds-spacing-s-5, 8px);
+    }
+`;exports.cupraDiagonalStyles=t;

package/dist-react/cjs/components/ds-slider/styles/cupra.styles.cjs

@@ -0,0 +1,148 @@
+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-slider-thumb-radius: 0.625rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .current-value-container {
+        height: 1rem;
+        margin: 0 0 0.25rem 0;
+    }
+    :host([data-ui-kit-theme='cupra']) .current-value-text {
+        gap: 0.125rem;
+        font: var(--ds-cp-type-tiny-medium);
+    }
+    :host([data-ui-kit-theme='cupra']) .light .current-value-text {
+        color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .dark .current-value-text {
+        color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .range-value-container {
+        height: 1rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .range-value-text {
+        gap: 0.125rem;
+        font: var(--ds-cp-type-tiny-regular);
+    }
+    :host([data-ui-kit-theme='cupra']) .light .range-value-text {
+        color: var(--ds-color-grey);
+    }
+    :host([data-ui-kit-theme='cupra']) .dark .range-value-text {
+        color: var(--ds-color-grey-80);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .track {
+        height: 0.25rem;
+        padding: 0.5rem 0;
+    }
+    :host([data-ui-kit-theme='cupra']) .container.disabled .track {
+        background-color: var(--dg-color-bg-disabled, #c7c9ce);
+        cursor: not-allowed;
+    }
+    :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']) .track-range {
+        height: 0.25rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .light .track-range {
+        background-color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .dark .track-range {
+        background-color: var(--ds-color-desert-sand-100);
+    }
+    :host([data-ui-kit-theme='cupra']) .container.disabled .track-range {
+        background-color: var(--dg-color-bg-disabled, #c7c9ce);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .thumb {
+        width: 1.25rem;
+        height: 1.25rem;
+        margin-top: -0.5rem;
+        transform: translateX(-50%);
+    }
+    :host([data-ui-kit-theme='cupra']) .thumb .thumb-svg {
+        width: 100%;
+        height: 100%;
+        display: block;
+    }
+    :host([data-ui-kit-theme='cupra']) .light .thumb .thumb-circle {
+        fill: var(--ds-color-black);
+        stroke: none;
+    }
+    :host([data-ui-kit-theme='cupra']) .dark .thumb .thumb-circle {
+        fill: var(--ds-color-desert-sand-100);
+        stroke: none;
+    }
+    :host([data-ui-kit-theme='cupra']) .thumb:hover .thumb-circle {
+        fill: var(--dg-color-field-icon-over, currentColor);
+        stroke: var(--dg-color-border-strong, currentColor);
+        stroke-width: 0.125rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .track:active .thumb .thumb-circle {
+        fill: var(--dg-color-icon-strong, currentColor);
+        stroke: var(--dg-color-border-strong, currentColor);
+        stroke-width: 0.125rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .thumb:focus-visible .thumb-circle {
+        fill: var(--dg-color-field-icon-over, currentColor);
+        stroke: var(--dg-color-border-strong, currentColor);
+        stroke-width: 0.125rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .container.disabled .thumb .thumb-circle {
+        fill: var(--dg-color-icon-disabled, #8b8d97);
+        stroke: var(--dg-color-border-soft, #8b8d97);
+        stroke-width: 0.0625rem;
+    }
+
+    :host([data-ui-kit-theme='cupra']) .inputs-container {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 1rem;
+        gap: 0.25rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .input-value {
+        width: 100%;
+        border: none;
+        outline: none;
+        border-radius: var(--dg-border-radius-xxs, 4px) var(--dg-border-radius-xxs, 4px) var(--dg-border-radius-none, 0)
+            var(--dg-border-radius-none, 0);
+        box-sizing: border-box;
+        letter-spacing: var(--dg-font-letter-spacing-m, 0.5px);
+        word-spacing: -0.125rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .input-wrapper {
+        width: 100%;
+        max-width: 11.5rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .medium .input-value {
+        height: 2.5rem;
+        padding: var(--dg-spacing-s-1, 0) var(--dg-spacing-m-2, 16px);
+        font: var(--ds-cp-type-small-regular);
+    }
+    :host([data-ui-kit-theme='cupra']) .large .input-value {
+        height: 3rem;
+        padding: var(--dg-spacing-s-1, 0) var(--dg-spacing-m-2, 16px);
+        font: var(--ds-cp-type-body-regular);
+    }
+    :host([data-ui-kit-theme='cupra']) .dark .input-value {
+        border-bottom: var(--dg-border-width-m, 1px) solid var(--dg-color-filled-border-default, #aeaeb7);
+        background: var(--dg-color-field-bg-default, rgba(195, 195, 203, 0.05));
+        color: var(--dg-color-filled-text-default, #aeaeb7);
+    }
+    :host([data-ui-kit-theme='cupra']) .light .input-value {
+        background: var(--dg-global-color-neutral-10, #fafafa);
+        color: var(--dg-color-filled-text-default, #09090b);
+        border-bottom: var(--dg-border-width-m, 1px) solid var(--dg-color-filled-border-default, #d3d6d9);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .input-value:disabled,
+    :host([data-ui-kit-theme='cupra']) .container.disabled .input-value {
+        border-bottom-color: var(--dg-color-border-soft, #c7c9ce);
+        color: var(--dg-color-filled-text-disabled, #8b8d97);
+        cursor: not-allowed;
+    }
+`;exports.cupraStyles=t;