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

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

@@ -1,34 +1,37 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("../base/UiKitElement.cjs"),v=require("../../decorators/customUiKitElement.cjs"),a=require("../../node_modules/.pnpm/@floating-ui_dom@1.7.4/node_modules/@floating-ui/dom/dist/floating-ui.dom.cjs"),g=require("../../mixins/ViewportMixin.cjs"),c=require("../../utils/booleanConverter.cjs"),$=require("../../utils/debounce.cjs"),E=require("../../utils/htmlWithTokens.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const r=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"),f=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs"),m=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.cjs"),u=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.cjs"),d=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),P=require("./styles/common.styles.cjs");var D=Object.defineProperty,L=Object.getOwnPropertyDescriptor,o=(p,e,t,s)=>{for(var i=s>1?void 0:s?L(e,t):e,n=p.length-1,l;n>=0;n--)(l=p[n])&&(i=(s?l(e,t,i):l(i))||i);return s&&i&&D(e,t,i),i};exports.DsTooltip=class extends g.ViewportMixin(b.UiKitElement){constructor(){super(...arguments),this.mode="light",this.show=!1,this.disableHoverListener=!1,this.disableFocusListener=!1,this.disablePressListener=!1,this.tooltipId=`ds-tooltip-${Date.now()}-${Math.floor(Math.random()*1e6)}`,this.usingKeyboard=!1,this.handleKeyDown=()=>{this.usingKeyboard=!0},this.handlePointerDown=()=>{this.usingKeyboard=!1},this.handleResize=$.debounce({func:()=>this.requestUpdate()}),this.handleClose=()=>{this.show=!1},this.handleAnchorPointerDown=e=>{this.disablePressListener||e.button===0&&(this.show=!this.show)},this.handleAnchorMouseOver=()=>{this.disableHoverListener||(this.show=!0)},this.handleAnchorMouseOut=()=>{this.disableHoverListener||setTimeout(()=>{var e,t,s,i,n;!((t=(e=this.container)==null?void 0:e.matches)!=null&&t.call(e,":hover"))&&!((i=(s=this.arrow)==null?void 0:s.matches)!=null&&i.call(s,":hover"))&&!((n=this==null?void 0:this.matches)!=null&&n.call(this,":hover"))&&(this.show=!1)},150)},this.handleAnchorFocusIn=()=>{this.usingKeyboard&&(this.disableFocusListener||(this.show=!0))},this.handleAnchorFocusOut=()=>{this.usingKeyboard&&(this.disableFocusListener||(this.show=!1))},this.handlePressOutside=e=>{var s;if(this.disablePressListener||e.button!==0)return;const t=e.target;t===this||this.contains(t)||(s=this.shadowRoot)!=null&&s.contains(t)||this.anchorElements[0]===t||this.anchorElements[0].contains(t)||(this.show=!1)}}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this.handleResize),document.removeEventListener("pointerdown",this.handlePressOutside),document.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("pointerdown",this.handlePointerDown)}updated(e){document.addEventListener("keydown",this.handleKeyDown),document.addEventListener("pointerdown",this.handlePointerDown),this.updatePosition(),e.has("show")&&(this.show?(window.addEventListener("resize",this.handleResize),document.addEventListener("pointerdown",this.handlePressOutside)):(window.removeEventListener("resize",this.handleResize),document.removeEventListener("pointerdown",this.handlePressOutside)))}updatePosition(){requestAnimationFrame(()=>{var e;!this.anchorContainer||!this.container||!this.show||!((e=this.anchorElements)!=null&&e[0])||!(this.anchorContainer instanceof Element)||!(this.container instanceof Element)||!(this.arrow instanceof Element)||(a.computePosition(this.anchorContainer,this.container,{placement:"bottom-start",middleware:[a.flip(),a.shift(),a.offset(8),a.arrow({element:this.arrow}),a.size({apply({availableWidth:t,availableHeight:s,elements:i}){Object.assign(i.floating.style,{maxWidth:`${Math.min(240,t-8)}px`,maxHeight:`${Math.max(0,s-8)}px`})}})]}).then(t=>{const{x:s,y:i,middlewareData:n,placement:l}=t;if(this.tooltopPlacement=l,Object.assign(this.container.style,{left:`${s??0}px`,top:`${i??0}px`}),n.arrow){const{x:w,y}=n.arrow;Object.assign(this.arrow.style,{left:w!=null?`${w}px`:"",top:y!=null?`${y}px`:""})}}),this.requestUpdate())})}get arrowClasses(){var e;return{arrow:!0,[this.mode]:!0,"not-positionable":(this==null?void 0:this.offsetWidth)>((e=this.container)==null?void 0:e.offsetWidth)}}get containerClasses(){return{container:!0,[this.tooltopPlacement]:!!this.tooltopPlacement,[this.mode]:!0}}get headerClasses(){var e,t;return{"header-container":!0,hidden:((e=this.headerElements)==null?void 0:e.length)===0&&((t=this.closeButtonElements)==null?void 0:t.length)===0}}get contentClasses(){var e;return{"content-container":!0,"ds-scroll":!0,"ds-scroll--size-s":!0,hidden:((e=this.contentElements)==null?void 0:e.length)===0}}get arrowTemplate(){return r.html`
-            <svg id="arrow" xmlns="http://www.w3.org/2000/svg" width="17" height="9" viewBox="0 0 17 9" fill="none" class=${d.classMap(this.arrowClasses)} @mouseout="${this.handleAnchorMouseOut}" aria-hidden="true" focusable="false">
-                <path d="M5.77946 4.38048L0.5 9L16 9L11.1427 4.46656C9.88663 3.29419 9.25858 2.708 8.48883 2.69565C7.71909 2.68329 7.07255 3.24902 5.77946 4.38048Z" fill="#26262C" class="ds-tooltip-arrow-background"/>
-                <path d="M0.5 8.5L5.89467 4.11683C7.1398 3.10516 7.76236 2.59933 8.49029 2.6109C9.21822 2.62246 9.8244 3.14782 11.0368 4.19853L16 8.5" stroke="#FAFAFA" stroke-opacity="0.3" stroke-linecap="round" class="ds-tooltip-arrow-border"/>
-            </svg>`}get tooltipTemplate(){return this.show&&this.anchorElements.length>0?r.html`
-                <div
-                    id=${this.tooltipId}
-                    part="container"
-                    class=${d.classMap(this.containerClasses)}
-                    @mouseout=${this.handleAnchorMouseOut}
-                    role="tooltip"
-                >
-                    <header part="header" class=${d.classMap(this.headerClasses)}>
-                        <slot @slotchange=${this.updatePosition} name="header"></slot>
-                        <slot @slotchange=${this.updatePosition} name="close-button" @click=${this.handleClose}></slot>
-                    </header>
-                    <div part="content" class=${d.classMap(this.contentClasses)}>
-                        <slot @slotchange=${this.updatePosition} name="content"></slot>
-                    </div>
-                    <slot part="image" @slotchange=${this.updatePosition} name="image"></slot>
-                    ${this.arrowTemplate}
-                </div>`:r.nothing}get styleTokens(){return E.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"),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("../../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("../../utils/debounce.cjs"),d=require("../../node_modules/.pnpm/@floating-ui_dom@1.8.0/node_modules/@floating-ui/dom/dist/floating-ui.dom.cjs"),f=require("./styles/common.styles.cjs"),p=require("./styles/cupra-diagonal.styles.cjs"),m=require("./styles/cupra.styles.cjs"),h=require("./styles/seat-legacy.styles.cjs"),g=require("./styles/seat.styles.cjs");var _=class extends o.UiKitElement{constructor(...e){super(...e),this.mode=`light`,this.show=!1,this.disableHoverListener=!1,this.disableFocusListener=!1,this.disablePressListener=!1,this.tooltipId=`ds-tooltip-${Date.now()}-${Math.floor(Math.random()*1e6)}`,this.usingKeyboard=!1,this.handleKeyDown=()=>{this.usingKeyboard=!0},this.handlePointerDown=()=>{this.usingKeyboard=!1},this.handleTooltipPointerDown=e=>{e.stopImmediatePropagation()},this.handleContainerSlotChange=()=>{this.requestUpdate()},this.handleResize=u.debounce({func:()=>this.requestUpdate()}),this.handleClose=()=>{this.show=!1},this.handleAnchorPointerDown=e=>{this.disablePressListener||e.button===0&&(this.show=!this.show)},this.handleAnchorMouseOver=()=>{this.disableHoverListener||(this.show=!0)},this.handleAnchorMouseOut=()=>{this.disableHoverListener||setTimeout(()=>{var e,t,n,r,i,a;!((e=this.container)!=null&&(t=e.matches)!=null&&t.call(e,`:hover`))&&!((n=this.arrow)!=null&&(r=n.matches)!=null&&r.call(n,`:hover`))&&!((i=this)!=null&&(a=i.matches)!=null&&a.call(i,`:hover`))&&(this.show=!1)},150)},this.handleAnchorFocusIn=()=>{this.usingKeyboard&&(this.disableFocusListener||(this.show=!0))},this.handleAnchorFocusOut=()=>{this.usingKeyboard&&(this.disableFocusListener||(this.show=!1))},this.handlePressOutside=e=>{var t;if(this.disablePressListener||e.button!==0)return;let n=e.target;n===this||this.contains(n)||(t=this.shadowRoot)!=null&&t.contains(n)||this.anchorElements[0]===n||this.anchorElements[0].contains(n)||(this.show=!1)}}disconnectedCallback(){var e;super.disconnectedCallback(),(e=this.container)!=null&&e.matches(`:popover-open`)&&this.container.hidePopover(),window.removeEventListener(`resize`,this.handleResize),document.removeEventListener(`pointerdown`,this.handlePressOutside),document.removeEventListener(`keydown`,this.handleKeyDown),document.removeEventListener(`pointerdown`,this.handlePointerDown)}updated(e){var t,n;super.updated(e),document.addEventListener(`keydown`,this.handleKeyDown),document.addEventListener(`pointerdown`,this.handlePointerDown),this.show&&(t=this.container)!=null&&t.isConnected&&!this.container.matches(`:popover-open`)?this.container.showPopover():!this.show&&(n=this.container)!=null&&n.isConnected&&this.container.matches(`:popover-open`)&&this.container.hidePopover(),this.updatePosition(),e.has(`show`)&&(this.show?(window.addEventListener(`resize`,this.handleResize),document.addEventListener(`pointerdown`,this.handlePressOutside)):(window.removeEventListener(`resize`,this.handleResize),document.removeEventListener(`pointerdown`,this.handlePressOutside)))}updatePosition(){requestAnimationFrame(()=>{var e;this.anchorContainer&&this.container&&this.show&&(e=this.anchorElements)!=null&&e[0]&&this.anchorContainer instanceof Element&&this.container instanceof Element&&this.arrow instanceof Element&&(d.computePosition(this.anchorContainer,this.container,{strategy:`fixed`,placement:`bottom-start`,middleware:[d.offset(({placement:e})=>({mainAxis:8,crossAxis:e.endsWith(`-end`)?8:-8})),d.flip({crossAxis:!0}),d.shift(),d.arrow({element:this.arrow,padding:12}),d.size({apply({availableWidth:e,availableHeight:t,elements:n}){Object.assign(n.floating.style,{maxWidth:`${Math.min(240,e-8)}px`,maxHeight:`${Math.max(0,t-8)}px`})}})]}).then(e=>{let{x:t,y:n,middlewareData:r,placement:i}=e;if(this.tooltopPlacement=i,Object.assign(this.container.style,{left:`${t??0}px`,top:`${n??0}px`}),r.arrow){let{x:e,y:t}=r.arrow;Object.assign(this.arrow.style,{left:e==null?``:`${e}px`,top:t==null?``:`${t}px`})}}),this.requestUpdate())})}get arrowClasses(){var e,t;return{arrow:!0,[this.mode]:!0,"not-positionable":((e=this)==null?void 0:e.offsetWidth)>((t=this.container)==null?void 0:t.offsetWidth)}}get containerClasses(){return{container:!0,[this.tooltopPlacement]:!!this.tooltopPlacement,[this.mode]:!0}}get headerClasses(){var e,t;return{"header-container":!0,hidden:((e=this.headerElements)==null?void 0:e.length)===0&&((t=this.closeButtonElements)==null?void 0:t.length)===0}}get contentClasses(){var e;return{"content-container":!0,"ds-scroll":!0,"ds-scroll--size-s":!0,hidden:((e=this.contentElements)==null?void 0:e.length)===0}}get arrowTemplate(){return e.html`
+            <svg id="arrow" xmlns="http://www.w3.org/2000/svg" width="17" height="9" viewBox="0 0 17 9" fill="none" class=${l.classMap(this.arrowClasses)} @mouseout="${this.handleAnchorMouseOut}" aria-hidden="true" focusable="false">
+                <path d="M5.77946 4.38048L0.5 9L16 9L11.1427 4.46656C9.88663 3.29419 9.25858 2.708 8.48883 2.69565C7.71909 2.68329 7.07255 3.24902 5.77946 4.38048Z" class="ds-tooltip-arrow-background"/>
+                <path d="M0.5 8.5L5.89467 4.11683C7.1398 3.10516 7.76236 2.59933 8.49029 2.6109C9.21822 2.62246 9.8244 3.14782 11.0368 4.19853L16 8.5" stroke-opacity="1" stroke-linecap="round" class="ds-tooltip-arrow-border"/>
+            </svg>`}get tooltipTemplate(){return e.html`
+            <div
+                id=${this.tooltipId}
+                part="container"
+                class=${l.classMap(this.containerClasses)}
+                popover="manual"
+                @mouseout=${this.handleAnchorMouseOut}
+                role="tooltip"
+                @pointerdown=${this.handleTooltipPointerDown}
+            >
+                <header part="header" class=${l.classMap(this.headerClasses)}>
+                    <slot @slotchange=${this.handleContainerSlotChange} name="header"></slot>
+                    <slot @slotchange=${this.handleContainerSlotChange} name="close-button" @click=${this.handleClose}></slot>
+                </header>
+                <div part="content" class=${l.classMap(this.contentClasses)}>
+                    <slot @slotchange=${this.handleContainerSlotChange} name="content"></slot>
+                </div>
+                <slot part="image" @slotchange=${this.updatePosition} name="image"></slot>
+                ${this.arrowTemplate}
+            </div>
+        `}get styleTokens(){return e.html`
             <style>
                 :host {
                     color-scheme: ${this.mode};
                 }
             </style>
-        `}render(){return r.html`
+        `}render(){return e.html`
             <style>
                 .anchor {
-                    cursor: ${this.disablePressListener?"default":"pointer"};
+                    cursor: ${this.disablePressListener?`default`:`pointer`};
                 }
             </style>
             ${this.styleTokens}
@@ -36,11 +39,11 @@
                 id="button"
                 class="anchor"
                 tabindex="0"
-                role=${this.disablePressListener?r.nothing:"button"}
-                aria-controls=${this.tooltipId}
-                aria-expanded=${this.disablePressListener?r.nothing:String(this.show)}
-                aria-describedby=${this.show?this.tooltipId:r.nothing}
-                aria-label="open tooltip"
+                role=${this.disablePressListener?e.nothing:`button`}
+                aria-controls=${this.disablePressListener?e.nothing:this.tooltipId}
+                aria-expanded=${this.disablePressListener?e.nothing:String(this.show)}
+                aria-describedby=${this.show?this.tooltipId:e.nothing}
+                aria-label=${this.disablePressListener?e.nothing:`open tooltip`}
                 @mouseover="${this.handleAnchorMouseOver}"
                 @mouseout="${this.handleAnchorMouseOut}"
                 @pointerdown="${this.handleAnchorPointerDown}"
@@ -50,4 +53,4 @@
                 <slot></slot>
             </div>
             ${this.tooltipTemplate}
-        `}};exports.DsTooltip.styles=[P.commonStyles];o([h.property({type:String,reflect:!0})],exports.DsTooltip.prototype,"mode",2);o([h.property({type:Boolean,reflect:!0,converter:c.booleanConverter})],exports.DsTooltip.prototype,"show",2);o([h.property({type:Boolean,reflect:!0,converter:c.booleanConverter,attribute:"disable-hover-listener"})],exports.DsTooltip.prototype,"disableHoverListener",2);o([h.property({type:Boolean,reflect:!0,converter:c.booleanConverter,attribute:"disable-focus-listener"})],exports.DsTooltip.prototype,"disableFocusListener",2);o([h.property({type:Boolean,reflect:!0,converter:c.booleanConverter,attribute:"disable-press-listener"})],exports.DsTooltip.prototype,"disablePressListener",2);o([f.state()],exports.DsTooltip.prototype,"tooltopPlacement",2);o([f.state()],exports.DsTooltip.prototype,"tooltipId",2);o([m.query(".container")],exports.DsTooltip.prototype,"container",2);o([m.query("#button")],exports.DsTooltip.prototype,"anchorContainer",2);o([m.query("#arrow")],exports.DsTooltip.prototype,"arrow",2);o([u.queryAssignedElements({slot:""})],exports.DsTooltip.prototype,"anchorElements",2);o([u.queryAssignedElements({slot:"header"})],exports.DsTooltip.prototype,"headerElements",2);o([u.queryAssignedElements({slot:"close-button"})],exports.DsTooltip.prototype,"closeButtonElements",2);o([u.queryAssignedElements({slot:"content"})],exports.DsTooltip.prototype,"contentElements",2);exports.DsTooltip=o([v.customUiKitElement("ds-tooltip")],exports.DsTooltip);
+        `}},v=(_.styles=[f.commonStyles,p.cupraDiagonalStyles,g.seatStyles,m.cupraStyles,h.seatLegacyStyles],_);a.default([t.property({type:String,reflect:!0})],v.prototype,`mode`,void 0),a.default([t.property({type:Boolean,reflect:!0,converter:c.booleanConverter})],v.prototype,`show`,void 0),a.default([t.property({type:Boolean,reflect:!0,converter:c.booleanConverter,attribute:`disable-hover-listener`})],v.prototype,`disableHoverListener`,void 0),a.default([t.property({type:Boolean,reflect:!0,converter:c.booleanConverter,attribute:`disable-focus-listener`})],v.prototype,`disableFocusListener`,void 0),a.default([t.property({type:Boolean,reflect:!0,converter:c.booleanConverter,attribute:`disable-press-listener`})],v.prototype,`disablePressListener`,void 0),a.default([n.state()],v.prototype,`tooltopPlacement`,void 0),a.default([n.state()],v.prototype,`tooltipId`,void 0),a.default([r.query(`.container`)],v.prototype,`container`,void 0),a.default([r.query(`#button`)],v.prototype,`anchorContainer`,void 0),a.default([r.query(`#arrow`)],v.prototype,`arrow`,void 0),a.default([i.queryAssignedElements({slot:``})],v.prototype,`anchorElements`,void 0),a.default([i.queryAssignedElements({slot:`header`})],v.prototype,`headerElements`,void 0),a.default([i.queryAssignedElements({slot:`close-button`})],v.prototype,`closeButtonElements`,void 0),a.default([i.queryAssignedElements({slot:`content`})],v.prototype,`contentElements`,void 0),v=a.default([s.customUiKitElement(`ds-tooltip`)],v),Object.defineProperty(exports,"DsTooltip",{enumerable:!0,get:function(){return v}});

package/dist-react/cjs/components/ds-tooltip/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 t=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs"),o=t.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 {
         position: relative;
         display: inline-block;
@@ -26,7 +26,7 @@
     .container {
         white-space: normal;
         box-sizing: border-box;
-        display: flex;
+        display: none;
         flex-direction: column;
         justify-content: center;
         align-items: flex-start;
@@ -35,10 +35,17 @@
 
         z-index: var(--ds-z-index-tooltip, 1300);
 
-        position: absolute;
+        position: fixed;
+        inset: auto;
+        margin: 0;
+        overflow: visible;
         width: max-content;
     }
 
+    .container:popover-open {
+        display: flex;
+    }
+
     ::slotted([slot='image']) {
         width: 100%;
         height: auto;
@@ -52,8 +59,8 @@
         justify-content: space-between;
     }
 
-    .header-container.hidden,
-    .content-container.hidden {
+    :host .container .header-container.hidden,
+    :host .container .content-container.hidden {
         display: none;
     }
 
@@ -76,11 +83,11 @@
     }
 
     .ds-tooltip-arrow-background {
-        fill: var(--ds-tooltip-arrow-background-color);
+        fill: var(--ui-kit-private-tooltip-arrow-background-color);
     }
 
     .ds-tooltip-arrow-border {
-        stroke: var(--ds-tooltip-arrow-border-color);
+        stroke: var(--ui-kit-private-tooltip-arrow-border-color);
     }
 
     .anchor {
@@ -120,4 +127,4 @@
         margin-left: -9px;
         transform: rotate(270deg);
     }
-`;exports.commonStyles=o;
+`;exports.commonStyles=t;

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

@@ -0,0 +1,45 @@
+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 {
+        box-sizing: border-box;
+        box-shadow: 0 0.25rem 0.25rem var(--ds-opacity-black-20, rgba(9, 9, 11, 0.2));
+        gap: var(--ds-spacing-s-5, 8px);
+        border-radius: var(--ds-border-radius-xxs, 4px);
+        border: var(--ds-border-width-m, 1px) solid var(--ds-color-border-default-subtle, rgba(250, 250, 250, 0.3));
+        background: var(--ds-color-surface-default-subtlest, #26262c);
+        padding: var(--ds-spacing-m-1, 12px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='content']) {
+        font: var(--ds-typography-weight-body-secondary) var(--ds-typography-size-body-m) /
+            var(--ds-typography-height-body-m) var(--ds-typography-family-primary);
+        color: var(--ds-color-text-default);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .arrow {
+        --ui-kit-private-tooltip-arrow-background-color: var(--ds-color-surface-default-subtlest);
+        --ui-kit-private-tooltip-arrow-border-color: var(--ds-color-border-default-subtle);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .ds-scroll {
+        --ui-kit-private-tooltip-scrollbar-border-width: var(--ds-spacing-s-4);
+        --ui-kit-private-tooltip-scrollbar-size: calc(2 * var(--ds-spacing-s-4) + 0.25rem);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .ds-scroll::-webkit-scrollbar {
+        -webkit-appearance: none;
+        appearance: none;
+        height: var(--ui-kit-private-tooltip-scrollbar-size);
+        width: var(--ui-kit-private-tooltip-scrollbar-size);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .ds-scroll::-webkit-scrollbar-thumb {
+        border-radius: var(--ds-border-radius-full);
+        background-clip: padding-box;
+        background-color: var(--ds-color-text-default-subtlest);
+        border: var(--ui-kit-private-tooltip-scrollbar-border-width) solid transparent;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .ds-scroll::-webkit-scrollbar-track {
+        background-color: transparent;
+    }
+`;exports.cupraDiagonalStyles=t;

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

@@ -0,0 +1,44 @@
+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.5rem;
+    }
+
+    :host([data-ui-kit-theme='cupra']) .container.light {
+        background-color: var(--ds-color-black);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .container.dark {
+        background-color: var(--ds-color-white);
+    }
+
+    /* Nueva estructura */
+    :host([data-ui-kit-theme='cupra']) .header-container {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 0.5rem;
+        margin-bottom: 0.25rem;
+    }
+
+    :host([data-ui-kit-theme='cupra']) ::slotted([slot='content']) {
+        font: var(--ds-cp-type-tiny-regular);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .container.light ::slotted([slot='content']) {
+        color: var(--ds-color-off-white);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .container.dark ::slotted([slot='content']) {
+        color: var(--ds-color-grey);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .arrow.light {
+        --ui-kit-private-tooltip-arrow-background-color: var(--ds-color-black);
+        --ui-kit-private-tooltip-arrow-border-color: var(--ds-color-black);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .arrow.dark {
+        --ui-kit-private-tooltip-arrow-background-color: var(--ds-color-white);
+        --ui-kit-private-tooltip-arrow-border-color: var(--ds-color-white);
+    }
+`;exports.cupraStyles=t;

package/dist-react/cjs/components/ds-tooltip/styles/seat-legacy.styles.cjs

@@ -0,0 +1,40 @@
+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 {
+        box-sizing: border-box;
+        box-shadow: 0 0.25rem 0.25rem var(--ds-opacity-black-20, rgba(9, 9, 11, 0.2));
+        gap: var(--ds-spacing-s-5, 8px);
+        border-radius: var(--ds-border-radius-xxs, 4px);
+        border: var(--ds-border-width-m, 1px) solid var(--ds-color-border-default-subtle, rgba(250, 250, 250, 0.3));
+        background: var(--ds-color-surface-default-subtlest, #26262c);
+        padding: var(--ds-spacing-m-1, 12px);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) ::slotted([slot='content']) {
+        font: 400 var(--ds-typography-size-body-m) / var(--ds-typography-height-body-m)
+            var(--ds-typography-family-primary);
+        color: var(--ds-color-text-default, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .arrow {
+        --ui-kit-private-tooltip-arrow-background-color: #26262c;
+        --ui-kit-private-tooltip-arrow-border-color: #fafafa;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .ds-scroll::-webkit-scrollbar {
+        -webkit-appearance: none;
+        appearance: none;
+        height: var(--scrollbar-size-s);
+        width: var(--scrollbar-size-s);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .ds-scroll::-webkit-scrollbar-thumb {
+        border-radius: var(--ds-border-radius-full);
+        background-clip: padding-box;
+        background-color: var(--ds-opacity-white-70);
+        border: var(--scrollbar-border-width) solid transparent;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .ds-scroll::-webkit-scrollbar-track {
+        background-color: transparent;
+    }
+`;exports.seatLegacyStyles=t;

package/dist-react/cjs/components/ds-tooltip/styles/seat.styles.cjs

@@ -0,0 +1,45 @@
+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']) .container {
+        box-sizing: border-box;
+        box-shadow: 0 0.25rem 0.25rem var(--ds-opacity-black-20, rgba(9, 9, 11, 0.2));
+        gap: var(--ds-spacing-s-5, 8px);
+        border-radius: var(--ds-border-radius-xxs, 4px);
+        border: var(--ds-border-width-m, 1px) solid var(--ds-color-border-default-subtle, rgba(250, 250, 250, 0.3));
+        background: var(--ds-color-surface-default-subtlest, #26262c);
+        padding: var(--ds-spacing-m-1, 12px);
+    }
+
+    :host([data-ui-kit-theme='seat']) ::slotted([slot='content']) {
+        font: var(--ds-typography-weight-body-secondary) var(--ds-typography-size-body-m) /
+            var(--ds-typography-height-body-m) var(--ds-typography-family-primary);
+        color: var(--ds-color-text-default);
+    }
+
+    :host([data-ui-kit-theme='seat']) .arrow {
+        --ui-kit-private-tooltip-arrow-background-color: var(--ds-color-surface-default-subtlest);
+        --ui-kit-private-tooltip-arrow-border-color: var(--ds-color-border-default-subtle);
+    }
+
+    :host([data-ui-kit-theme='seat']) .ds-scroll {
+        --ui-kit-private-tooltip-scrollbar-border-width: var(--ds-spacing-s-4);
+        --ui-kit-private-tooltip-scrollbar-size: calc(2 * var(--ds-spacing-s-4) + 0.25rem);
+    }
+
+    :host([data-ui-kit-theme='seat']) .ds-scroll::-webkit-scrollbar {
+        -webkit-appearance: none;
+        appearance: none;
+        height: var(--ui-kit-private-tooltip-scrollbar-size);
+        width: var(--ui-kit-private-tooltip-scrollbar-size);
+    }
+
+    :host([data-ui-kit-theme='seat']) .ds-scroll::-webkit-scrollbar-thumb {
+        border-radius: var(--ds-border-radius-full);
+        background-clip: padding-box;
+        background-color: var(--ds-color-text-default-subtlest);
+        border: var(--ui-kit-private-tooltip-scrollbar-border-width) solid transparent;
+    }
+
+    :host([data-ui-kit-theme='seat']) .ds-scroll::-webkit-scrollbar-track {
+        background-color: transparent;
+    }
+`;exports.seatStyles=t;

package/dist-react/cjs/components/ds-value-unit/ds-value-unit.cjs

@@ -0,0 +1,10 @@
+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("./styles/common.styles.cjs"),s=require("./styles/cupra-diagonal.styles.cjs"),c=require("./styles/cupra.styles.cjs"),l=require("./styles/seat.styles.cjs");var u=class extends r.UiKitElement{constructor(...e){super(...e),this.size=`medium`,this.valueWeight=`regular`,this.unitWeight=`light`}render(){let t={value:!0,[`size-${this.size}`]:!0,[`value-weight-${this.valueWeight}`]:!0},n={unit:!0,[`size-${this.size}`]:!0,[`unit-weight-${this.unitWeight}`]:!0};return e.html`
+            <div class="container" part="container">
+                <span class=${a.classMap(t)} part="value">
+                    <slot name="value"></slot>
+                </span>
+                <span class=${a.classMap(n)} part="unit">
+                    <slot name="unit"></slot>
+                </span>
+            </div>
+        `}},d=(u.styles=[o.commonStyles,s.cupraDiagonalStyles,l.seatStyles,c.cupraStyles],u);n.default([t.property({type:String})],d.prototype,`size`,void 0),n.default([t.property({type:String,attribute:`value-weight`})],d.prototype,`valueWeight`,void 0),n.default([t.property({type:String,attribute:`unit-weight`})],d.prototype,`unitWeight`,void 0),d=n.default([i.customUiKitElement(`ds-value-unit`)],d),Object.defineProperty(exports,"DsValueUnit",{enumerable:!0,get:function(){return d}});

package/dist-react/cjs/components/ds-value-unit/styles/common.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 {
+        display: inline;
+    }
+
+    .container {
+        display: inline-flex;
+        align-items: baseline;
+        overflow: clip;
+    }
+`;exports.commonStyles=t;

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

@@ -0,0 +1,187 @@
+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 {
+        color: var(--ds-color-text-default);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .value,
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit {
+        font-family: var(--ds-typography-family-primary);
+        font-style: normal;
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+    }
+
+    /* ------------------------------------------------------------------ */
+    /* Container gap per size                                             */
+    /* ------------------------------------------------------------------ */
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:has(.size-colossal) {
+        gap: var(--ds-spacing-s-5);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:has(.size-huge) {
+        gap: var(--ds-spacing-s-4);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:has(.size-big),
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:has(.size-large) {
+        gap: var(--ds-spacing-s-3);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:has(.size-medium),
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:has(.size-small),
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:has(.size-micro),
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:has(.size-nano) {
+        gap: var(--ds-spacing-s-2);
+    }
+
+    /* ------------------------------------------------------------------ */
+    /* Value font sizes                                                   */
+    /* ------------------------------------------------------------------ */
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .value.size-colossal {
+        font-size: var(--ds-typography-size-currency-colossal);
+        line-height: var(--ds-typography-height-currency-colossal);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .value.size-huge {
+        font-size: var(--ds-typography-size-currency-huge);
+        line-height: var(--ds-typography-height-currency-huge);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .value.size-big {
+        font-size: var(--ds-typography-size-currency-big);
+        line-height: var(--ds-typography-height-currency-big);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .value.size-large {
+        font-size: var(--ds-typography-size-currency-large);
+        line-height: var(--ds-typography-height-currency-large);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .value.size-medium {
+        font-size: var(--ds-typography-size-currency-medium);
+        line-height: var(--ds-typography-height-currency-medium);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .value.size-small {
+        font-size: var(--ds-typography-size-currency-small);
+        line-height: var(--ds-typography-height-currency-small);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .value.size-micro {
+        font-size: var(--ds-typography-size-currency-micro);
+        line-height: var(--ds-typography-height-currency-micro);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .value.size-nano {
+        font-size: var(--ds-typography-size-currency-nano);
+        line-height: var(--ds-typography-height-currency-nano);
+    }
+
+    /* ------------------------------------------------------------------ */
+    /* Value font weights                                                 */
+    /* ------------------------------------------------------------------ */
+
+    /* value-weight="regular": uses "regular" weight (400 in Cupra) */
+    :host([data-ui-kit-theme='cupra-diagonal']) .value.value-weight-regular {
+        font-weight: var(--ds-typography-weight-currency-data-primary);
+    }
+
+    /* value-weight="light": uses "light" weight (300) for most sizes */
+    :host([data-ui-kit-theme='cupra-diagonal']) .value.value-weight-light.size-colossal,
+    :host([data-ui-kit-theme='cupra-diagonal']) .value.value-weight-light.size-huge,
+    :host([data-ui-kit-theme='cupra-diagonal']) .value.value-weight-light.size-big,
+    :host([data-ui-kit-theme='cupra-diagonal']) .value.value-weight-light.size-large,
+    :host([data-ui-kit-theme='cupra-diagonal']) .value.value-weight-light.size-medium,
+    :host([data-ui-kit-theme='cupra-diagonal']) .value.value-weight-light.size-small {
+        font-weight: var(--ds-typography-weight-currency-display-primary);
+    }
+
+    /* value-weight="light" micro/nano: uses "book" weight (350 in Cupra) */
+    :host([data-ui-kit-theme='cupra-diagonal']) .value.value-weight-light.size-micro,
+    :host([data-ui-kit-theme='cupra-diagonal']) .value.value-weight-light.size-nano {
+        font-weight: var(--ds-typography-weight-currency-data-secondary);
+    }
+
+    /* ------------------------------------------------------------------ */
+    /* Unit font sizes                                                    */
+    /* ------------------------------------------------------------------ */
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit.size-colossal {
+        font-size: var(--ds-typography-size-currency-large);
+        line-height: var(--ds-typography-height-currency-large);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit.size-huge {
+        font-size: var(--ds-typography-size-currency-medium);
+        line-height: var(--ds-typography-height-currency-medium);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit.size-big,
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit.size-large {
+        font-size: var(--ds-typography-size-currency-small);
+        line-height: var(--ds-typography-height-currency-small);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit.size-medium {
+        font-size: var(--ds-typography-size-currency-tiny);
+        line-height: var(--ds-typography-height-currency-tiny);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit.size-small,
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit.size-micro,
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit.size-nano {
+        font-size: var(--ds-typography-size-currency-nano);
+        line-height: var(--ds-typography-height-currency-nano);
+    }
+
+    /* ------------------------------------------------------------------ */
+    /* Unit font weights                                                  */
+    /* ------------------------------------------------------------------ */
+
+    /* unit-weight="light": uses "light" for large sizes (colossal-large) */
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit.unit-weight-light.size-colossal,
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit.unit-weight-light.size-huge,
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit.unit-weight-light.size-big,
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit.unit-weight-light.size-large {
+        font-weight: var(--ds-typography-weight-currency-display-primary);
+    }
+
+    /* unit-weight="light": uses "book" for small sizes (medium-nano) */
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit.unit-weight-light.size-medium,
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit.unit-weight-light.size-small,
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit.unit-weight-light.size-micro,
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit.unit-weight-light.size-nano {
+        font-weight: var(--ds-typography-weight-currency-data-secondary);
+    }
+
+    /* unit-weight="regular": uses "regular" for all sizes */
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit.unit-weight-regular {
+        font-weight: var(--ds-typography-weight-currency-data-primary);
+    }
+
+    /* ------------------------------------------------------------------ */
+    /* Unit bottom padding (baseline alignment) — unit-weight="light"     */
+    /* ------------------------------------------------------------------ */
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit.unit-weight-light.size-colossal {
+        padding-bottom: var(--ds-spacing-s-5);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit.unit-weight-light.size-huge {
+        padding-bottom: var(--ds-spacing-s-4);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit.unit-weight-light.size-big,
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit.unit-weight-light.size-large {
+        padding-bottom: var(--ds-spacing-s-3);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit.unit-weight-light.size-medium {
+        padding-bottom: var(--ds-spacing-s-2);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit.unit-weight-light.size-small {
+        padding-bottom: var(--ds-spacing-s-3);
+    }
+`;exports.cupraDiagonalStyles=t;