@cupra/ui-kit 2.0.0-canary.51 → 2.0.0-canary.53

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/dist/cjs/components/ds-chip/ds-chip.cjs +5 -4
  2. package/dist/cjs/components/ds-theme-provider/ds-theme-provider.cjs +1 -1
  3. package/dist/cjs/utils/IconsManager.cjs +1 -1
  4. package/dist/cjs/utils/PubSub.cjs +1 -1
  5. package/dist/cjs/utils/StylesRegistry/StylesRegistry.cjs +1 -1
  6. package/dist/cjs/utils/cssWithTokens.cjs +1 -1
  7. package/dist/cjs/utils/htmlWithTokens.cjs +1 -1
  8. package/dist/esm/components/ds-chip/ds-chip.js +38 -28
  9. package/dist/esm/components/ds-text/ds-text.js +3 -3
  10. package/dist/esm/components/ds-theme-provider/ds-theme-provider.js +1 -1
  11. package/dist/esm/node_modules/.pnpm/@floating-ui_dom@1.7.4/node_modules/@floating-ui/dom/dist/floating-ui.dom.js +3 -3
  12. package/dist/esm/utils/IconsManager.js +1 -1
  13. package/dist/esm/utils/PubSub.js +1 -1
  14. package/dist/esm/utils/StylesRegistry/StylesRegistry.js +1 -1
  15. package/dist/esm/utils/cssWithTokens.js +1 -1
  16. package/dist/esm/utils/htmlWithTokens.js +1 -1
  17. package/dist/types/components/ds-chip/ds-chip.d.ts +2 -0
  18. package/dist/types/components/ds-chip/ds-chip.types.d.ts +2 -0
  19. package/dist-react/cjs/components/ds-chip/ds-chip.cjs +5 -4
  20. package/dist-react/cjs/components/ds-theme-provider/ds-theme-provider.cjs +1 -1
  21. package/dist-react/cjs/utils/IconsManager.cjs +1 -1
  22. package/dist-react/cjs/utils/PubSub.cjs +1 -1
  23. package/dist-react/cjs/utils/StylesRegistry/StylesRegistry.cjs +1 -1
  24. package/dist-react/cjs/utils/cssWithTokens.cjs +1 -1
  25. package/dist-react/cjs/utils/htmlWithTokens.cjs +1 -1
  26. package/dist-react/esm/components/ds-chip/ds-chip.js +38 -28
  27. package/dist-react/esm/components/ds-text/ds-text.js +3 -3
  28. package/dist-react/esm/components/ds-theme-provider/ds-theme-provider.js +1 -1
  29. package/dist-react/esm/node_modules/.pnpm/@floating-ui_dom@1.7.4/node_modules/@floating-ui/dom/dist/floating-ui.dom.js +3 -3
  30. package/dist-react/esm/utils/IconsManager.js +1 -1
  31. package/dist-react/esm/utils/PubSub.js +1 -1
  32. package/dist-react/esm/utils/StylesRegistry/StylesRegistry.js +1 -1
  33. package/dist-react/esm/utils/cssWithTokens.js +1 -1
  34. package/dist-react/esm/utils/htmlWithTokens.js +1 -1
  35. package/dist-react/types/components/ds-chip/ds-chip.d.ts +2 -0
  36. package/dist-react/types/components/ds-chip/ds-chip.types.d.ts +2 -0
  37. package/package.json +4 -4
package/dist/cjs/components/ds-chip/ds-chip.cjs CHANGED
@@ -1,22 +1,23 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("../base/UiKitElement.cjs"),p=require("../../decorators/customUiKitElement.cjs"),h=require("../../utils/booleanConverter.cjs"),u=require("../../utils/htmlWithTokens.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const a=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const i=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),y=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs"),m=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),b=require("./styles/common.styles.cjs");var C=Object.defineProperty,f=Object.getOwnPropertyDescriptor,s=(l,e,r,o)=>{for(var t=o>1?void 0:o?f(e,r):e,n=l.length-1,c;n>=0;n--)(c=l[n])&&(t=(o?c(e,r,t):c(t))||t);return o&&t&&C(e,r,t),t};exports.DsChip=class extends d.UiKitElement{constructor(){super(...arguments),this.mode="light",this.size="large",this.selected=!1,this.deselectable=!1,this.slottedText=""}firstUpdated(e){super.firstUpdated(e);const o=this.shadowRoot.querySelector("slot").assignedNodes({flatten:!0});this.slottedText=o.filter(t=>t.nodeType===Node.TEXT_NODE).map(t=>t.textContent.trim()).join(" ")}get classes(){return{container:!0,"ds-blur":!0,[this.size]:!0,[this.mode]:!!this.mode,selected:this.selected,deselectable:this.deselectable}}get styleTokens(){return u.htmlWithTokens`
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("../base/UiKitElement.cjs"),d=require("../../decorators/customUiKitElement.cjs"),h=require("../../utils/booleanConverter.cjs"),u=require("../../utils/htmlWithTokens.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const a=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const i=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),m=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs"),y=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),b=require("./styles/common.styles.cjs");var C=Object.defineProperty,f=Object.getOwnPropertyDescriptor,s=(n,e,r,o)=>{for(var t=o>1?void 0:o?f(e,r):e,l=n.length-1,c;l>=0;l--)(c=n[l])&&(t=(o?c(e,r,t):c(t))||t);return o&&t&&C(e,r,t),t};exports.DsChip=class extends p.UiKitElement{constructor(){super(...arguments),this.mode="light",this.size="large",this.selected=!1,this.deselectable=!1,this.slottedText=""}firstUpdated(e){super.firstUpdated(e);const o=this.shadowRoot.querySelector("slot").assignedNodes({flatten:!0});this.slottedText=o.filter(t=>t.nodeType===Node.TEXT_NODE).map(t=>t.textContent.trim()).join(" ")}get classes(){return{container:!0,"ds-blur":!0,[this.size]:!0,[this.mode]:!!this.mode,selected:this.selected,deselectable:this.deselectable}}get styleTokens(){return u.htmlWithTokens`
2
2
  <style>
3
3
  :host{
4
4
  color-scheme: ${this.mode};
5
5
  pointer-events: ${this.selected?"none":"visible"};
6
6
  }
7
7
  </style>
8
- `}handleClick(){this.selected||this.dispatchEvent(new CustomEvent("select",{bubbles:!0,composed:!0,detail:{value:this.value}}))}handleKeyDown(e){(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this.handleClick())}handleClickIcon(e){e.stopImmediatePropagation(),!(!this.deselectable||!this.selected)&&this.dispatchEvent(new CustomEvent("deselect",{bubbles:!0,composed:!0,detail:{value:this.value}}))}handleKeyDownIcon(e){(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this.handleClickIcon(e))}get iconTemplate(){if(!this.selected||!this.deselectable)return a.nothing;const e=this.mode==="light"?"dark":"light";return this.componentFactory.createIcon({class:"icon","icon-name":"cross","data-testid":"ds-chip-icon","@click":this.handleClickIcon,"@keydown":this.handleKeyDownIcon,role:"button","aria-label":`deselect ${this.slottedText}`,tabindex:"0",mode:e})}render(){return a.html`
8
+ `}handleClick(){this.selected||this.dispatchEvent(new CustomEvent("select",{bubbles:!0,composed:!0,detail:{value:this.value}}))}handleKeyDown(e){(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this.handleClick())}handleClickIcon(e){e.stopImmediatePropagation(),!(!this.deselectable||!this.selected)&&this.dispatchEvent(new CustomEvent("deselect",{bubbles:!0,composed:!0,detail:{value:this.value}}))}handleKeyDownIcon(e){(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this.handleClickIcon(e))}get leadingIconTemplate(){return this.iconName?this.componentFactory.createIcon({class:"icon","icon-name":this.iconName}):a.nothing}get iconTemplate(){if(!this.selected||!this.deselectable)return a.nothing;const e=this.mode==="light"?"dark":"light";return this.componentFactory.createIcon({class:"icon","icon-name":"cross","data-testid":"ds-chip-icon","@click":this.handleClickIcon,"@keydown":this.handleKeyDownIcon,role:"button","aria-label":`deselect ${this.slottedText}`,tabindex:"0",mode:e})}render(){return a.html`
9
9
  ${this.styleTokens}
10
10
  <div
11
11
  role="button"
12
12
  aria-label=${`chip ${this.slottedText}`}
13
13
  tabindex="0"
14
14
  data-testid="ds-chip-container"
15
- class=${m.classMap(this.classes)}
15
+ class=${y.classMap(this.classes)}
16
16
  @click=${this.handleClick}
17
17
  @keydown=${this.handleKeyDown}
18
18
  >
19
+ ${this.leadingIconTemplate}
19
20
  <slot></slot>
20
21
  ${this.iconTemplate}
21
22
  </div>
22
- `}};exports.DsChip.styles=[b.commonStyles];s([i.property({type:String})],exports.DsChip.prototype,"value",2);s([i.property({type:String,reflect:!0})],exports.DsChip.prototype,"mode",2);s([i.property({type:String,reflect:!0})],exports.DsChip.prototype,"size",2);s([i.property({type:Boolean,converter:h.booleanConverter,reflect:!0})],exports.DsChip.prototype,"selected",2);s([i.property({type:Boolean,converter:h.booleanConverter})],exports.DsChip.prototype,"deselectable",2);s([y.state()],exports.DsChip.prototype,"slottedText",2);exports.DsChip=s([p.customUiKitElement("ds-chip")],exports.DsChip);
23
+ `}};exports.DsChip.styles=[b.commonStyles];s([i.property({type:String})],exports.DsChip.prototype,"value",2);s([i.property({type:String,reflect:!0})],exports.DsChip.prototype,"mode",2);s([i.property({type:String,reflect:!0})],exports.DsChip.prototype,"size",2);s([i.property({type:Boolean,converter:h.booleanConverter,reflect:!0})],exports.DsChip.prototype,"selected",2);s([i.property({type:Boolean,converter:h.booleanConverter})],exports.DsChip.prototype,"deselectable",2);s([i.property({type:String,attribute:"icon-name"})],exports.DsChip.prototype,"iconName",2);s([m.state()],exports.DsChip.prototype,"slottedText",2);exports.DsChip=s([d.customUiKitElement("ds-chip")],exports.DsChip);
package/dist/cjs/components/ds-theme-provider/ds-theme-provider.cjs CHANGED
@@ -1,4 +1,4 @@
1
1
  "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../../core/theme.constants.cjs"),p=require("../../decorators/customUiKitElement.cjs"),f=require("../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/decorators/provide.cjs"),y=require("../../utils/PubSub.cjs"),m=require("../../utils/booleanConverter.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const l=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs"),v=require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs"),h=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),u=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs"),$=require("../../styles/source/shared/fonts-config.cjs"),T=require("./themeContext.cjs");var b=Object.defineProperty,P=Object.getOwnPropertyDescriptor,d=(a,e,s,o)=>{for(var t=o>1?void 0:o?P(e,s):e,r=a.length-1,n;r>=0;r--)(n=a[r])&&(t=(o?n(e,s,t):n(t))||t);return o&&t&&b(e,s,t),t};exports.DsThemeProvider=class extends v.LitElement{constructor(){super(...arguments),this.loadFonts=!0,this.loadStyles=!0,this.cssLoaded=!1,this.loadedFonts=new Set}updated(e){super.updated(e),e.has("theme")&&(y.pubSub.publish("theme",this.theme),sessionStorage==null||sessionStorage.setItem(c.THEME_STORAGE_KEY,this.theme),typeof FontFace<"u"&&(document!=null&&document.fonts)&&this.loadThemeFonts(),this.loadThemeStyles().then(()=>{this.cssLoaded=!0,this.dispatchEvent(new CustomEvent("ui-kit:ready",{bubbles:!0,composed:!0}))}))}loadThemeFonts(){var e;(e=$.fontsConfig[this.theme])==null||e.fonts.forEach(s=>{this.loadThemeFont(s)})}async loadThemeFont({weight:e,name:s,file:o}){if(!this.loadFonts)return Promise.resolve();const t=`${s}-${e}`;if(this.loadedFonts.has(t))return;const r=new FontFace(s,`url('https://ds-assets.cupra.com/fonts/${this.theme}/${o}.woff2') format('woff2'),
2
2
  url('https://ds-assets.cupra.com/fonts/${this.theme}/${o}.woff') format('woff'),
3
3
  url('https://ds-assets.cupra.com/fonts/${this.theme}/${o}.ttf') format('truetype'),
4
- url('https://ds-assets.cupra.com/fonts/${this.theme}/${o}.otf') format('opentype')`,{style:"normal",weight:e,display:"swap"});try{await r.load(),document.fonts.add(r),this.loadedFonts.add(t)}catch(n){console.error(`Error loading "${s}" font with "${e}" weight:`,n)}}loadThemeStyles(){return this.loadStyles?new Promise((e,s)=>{const o="/2.0.0-canary.51",t=`https://ds-assets.cupra.com${o}/styles/${this.theme}/theme.css`;if(document.head.querySelector(`link[href="${t}"]`))e();else{const r=`ui-kit-theme-${o}`,n=document.getElementById(r),i=document.createElement("link");i.id=r,i.rel="stylesheet",i.href=t,i.onload=()=>e(),i.onerror=()=>s(new Error(`Failed to load theme CSS: ${t}`)),document.head.appendChild(i),n==null||n.remove()}}):Promise.resolve()}render(){return this.cssLoaded?l.html`<slot></slot>`:l.nothing}};d([h.property({type:Boolean,converter:m.booleanConverter,attribute:"load-fonts"})],exports.DsThemeProvider.prototype,"loadFonts",2);d([h.property({type:Boolean,converter:m.booleanConverter,attribute:"load-styles"})],exports.DsThemeProvider.prototype,"loadStyles",2);d([f.provide({context:T.themeContext}),h.property({type:String})],exports.DsThemeProvider.prototype,"theme",2);d([u.state()],exports.DsThemeProvider.prototype,"cssLoaded",2);d([u.state()],exports.DsThemeProvider.prototype,"loadedFonts",2);exports.DsThemeProvider=d([p.customUiKitElement("ds-theme-provider")],exports.DsThemeProvider);
4
+ url('https://ds-assets.cupra.com/fonts/${this.theme}/${o}.otf') format('opentype')`,{style:"normal",weight:e,display:"swap"});try{await r.load(),document.fonts.add(r),this.loadedFonts.add(t)}catch(n){console.error(`Error loading "${s}" font with "${e}" weight:`,n)}}loadThemeStyles(){return this.loadStyles?new Promise((e,s)=>{const o="/2.0.0-canary.53",t=`https://ds-assets.cupra.com${o}/styles/${this.theme}/theme.css`;if(document.head.querySelector(`link[href="${t}"]`))e();else{const r=`ui-kit-theme-${o}`,n=document.getElementById(r),i=document.createElement("link");i.id=r,i.rel="stylesheet",i.href=t,i.onload=()=>e(),i.onerror=()=>s(new Error(`Failed to load theme CSS: ${t}`)),document.head.appendChild(i),n==null||n.remove()}}):Promise.resolve()}render(){return this.cssLoaded?l.html`<slot></slot>`:l.nothing}};d([h.property({type:Boolean,converter:m.booleanConverter,attribute:"load-fonts"})],exports.DsThemeProvider.prototype,"loadFonts",2);d([h.property({type:Boolean,converter:m.booleanConverter,attribute:"load-styles"})],exports.DsThemeProvider.prototype,"loadStyles",2);d([f.provide({context:T.themeContext}),h.property({type:String})],exports.DsThemeProvider.prototype,"theme",2);d([u.state()],exports.DsThemeProvider.prototype,"cssLoaded",2);d([u.state()],exports.DsThemeProvider.prototype,"loadedFonts",2);exports.DsThemeProvider=d([p.customUiKitElement("ds-theme-provider")],exports.DsThemeProvider);
package/dist/cjs/utils/IconsManager.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../core/theme.constants.cjs"),l=require("./PubSub.cjs");class u{constructor(){this.icons={},this.handleChangeTheme=e=>{if(this.theme===e)return;this.theme=e;const n=Object.keys(this.icons);this.icons={},n.forEach(s=>this.fetchIcon(s))},this.fetchIcon=async(e,n={})=>{const s=typeof sessionStorage<"u"?sessionStorage==null?void 0:sessionStorage.getItem(r.THEME_STORAGE_KEY):null;!this.theme&&s&&(this.theme=s);const t=this.icons[e];if(t)return await t;const i=this.loadIcon(e,n).catch(a=>{throw delete this.icons[e],a});return this.icons[e]=i,i},this.loadIcon=(e,{cache:n="force-cache",...s})=>!this.theme||typeof fetch>"u"?Promise.resolve('<svg class="ds-icon"></svg>'):fetch(`https://ds-assets.cupra.com/icons/${this.theme}/${e}.svg`,{cache:n,...s}).then(t=>t.text()).catch(t=>{if((t==null?void 0:t.name)==="AbortError")throw t;return console.error(`Failed to fetch icon "${e}":`,t),""}),l.pubSub.subscribe("theme",this.handleChangeTheme)}}const o=Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.51"),h=globalThis;let c=h[o];c||(c=new u,Object.defineProperty(h,o,{value:c,writable:!1,configurable:!1,enumerable:!1}));const f=c;exports.iconsManager=f;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../core/theme.constants.cjs"),l=require("./PubSub.cjs");class u{constructor(){this.icons={},this.handleChangeTheme=e=>{if(this.theme===e)return;this.theme=e;const n=Object.keys(this.icons);this.icons={},n.forEach(s=>this.fetchIcon(s))},this.fetchIcon=async(e,n={})=>{const s=typeof sessionStorage<"u"?sessionStorage==null?void 0:sessionStorage.getItem(r.THEME_STORAGE_KEY):null;!this.theme&&s&&(this.theme=s);const t=this.icons[e];if(t)return await t;const i=this.loadIcon(e,n).catch(a=>{throw delete this.icons[e],a});return this.icons[e]=i,i},this.loadIcon=(e,{cache:n="force-cache",...s})=>!this.theme||typeof fetch>"u"?Promise.resolve('<svg class="ds-icon"></svg>'):fetch(`https://ds-assets.cupra.com/icons/${this.theme}/${e}.svg`,{cache:n,...s}).then(t=>t.text()).catch(t=>{if((t==null?void 0:t.name)==="AbortError")throw t;return console.error(`Failed to fetch icon "${e}":`,t),""}),l.pubSub.subscribe("theme",this.handleChangeTheme)}}const o=Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.53"),h=globalThis;let c=h[o];c||(c=new u,Object.defineProperty(h,o,{value:c,writable:!1,configurable:!1,enumerable:!1}));const f=c;exports.iconsManager=f;
package/dist/cjs/utils/PubSub.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class u{constructor(){this.subscribers={},this.lastPublishedData={}}subscribe(s,r){return this.subscribers[s]||(this.subscribers[s]=[]),this.subscribers[s].push(r),this.lastPublishedData[s]}unsubscribe(s,r){this.subscribers[s]&&(this.subscribers[s]=this.subscribers[s].filter(i=>i!==r))}publish(s,r){this.lastPublishedData[s]=r,this.subscribers[s]&&this.subscribers[s].forEach(i=>{try{i(r)}catch(c){console.error(`Error in subscriber for event "${s}":`,c)}})}}const t=Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.51"),e=globalThis;let b=e[t];b||(b=new u,Object.defineProperty(e,t,{value:b,writable:!1,configurable:!1,enumerable:!1}));const l=b;exports.PubSub=u;exports.pubSub=l;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class u{constructor(){this.subscribers={},this.lastPublishedData={}}subscribe(s,r){return this.subscribers[s]||(this.subscribers[s]=[]),this.subscribers[s].push(r),this.lastPublishedData[s]}unsubscribe(s,r){this.subscribers[s]&&(this.subscribers[s]=this.subscribers[s].filter(i=>i!==r))}publish(s,r){this.lastPublishedData[s]=r,this.subscribers[s]&&this.subscribers[s].forEach(i=>{try{i(r)}catch(c){console.error(`Error in subscriber for event "${s}":`,c)}})}}const t=Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.53"),e=globalThis;let b=e[t];b||(b=new u,Object.defineProperty(e,t,{value:b,writable:!1,configurable:!1,enumerable:!1}));const l=b;exports.PubSub=u;exports.pubSub=l;
package/dist/cjs/utils/StylesRegistry/StylesRegistry.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class s{constructor(){this.stylePromises=new Map,this.getStyles=async({componentName:e,theme:t})=>{if(!t||!e)return;const r=`https://ds-assets.cupra.com/2.0.0-canary.51/styles/${t}/components/${e}.css`,c=this.getCachedStyleSheetPromise({url:r});if(c)return c;const i=this.fetchStyle({url:r}).then(n=>(n||this.stylePromises.delete(r),n));return this.stylePromises.set(r,i),this.stylePromises.get(r)}}async fetchStyle({url:e}){try{if(typeof fetch>"u")return;const t=await fetch(e,{cache:"force-cache"});if(t.ok)return t.text()}catch(t){console.error(`Failed to fetch Style Sheet "${e}":`,t)}}getCachedStyleSheetPromise({url:e}){return this.stylePromises.get(e)}static getInstance(){return s.instance||(s.instance=new s),s.instance}}const o=s.getInstance();exports.stylesRegistry=o;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class s{constructor(){this.stylePromises=new Map,this.getStyles=async({componentName:e,theme:t})=>{if(!t||!e)return;const r=`https://ds-assets.cupra.com/2.0.0-canary.53/styles/${t}/components/${e}.css`,c=this.getCachedStyleSheetPromise({url:r});if(c)return c;const i=this.fetchStyle({url:r}).then(n=>(n||this.stylePromises.delete(r),n));return this.stylePromises.set(r,i),this.stylePromises.get(r)}}async fetchStyle({url:e}){try{if(typeof fetch>"u")return;const t=await fetch(e,{cache:"force-cache"});if(t.ok)return t.text()}catch(t){console.error(`Failed to fetch Style Sheet "${e}":`,t)}}getCachedStyleSheetPromise({url:e}){return this.stylePromises.get(e)}static getInstance(){return s.instance||(s.instance=new s),s.instance}}const o=s.getInstance();exports.stylesRegistry=o;
package/dist/cjs/utils/cssWithTokens.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");require("../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const e=require("../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs");function i(r,...t){const s=String.raw({raw:r},...t).replace(/(--private-[\w-]+)(?=\s*[):,])/g,"$1-v2-0-0-canary-51"),n=e.unsafeCSS(s);return e.css`${n}`}exports.cssWithTokens=i;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");require("../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const e=require("../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs");function i(r,...t){const s=String.raw({raw:r},...t).replace(/(--private-[\w-]+)(?=\s*[):,])/g,"$1-v2-0-0-canary-53"),n=e.unsafeCSS(s);return e.css`${n}`}exports.cssWithTokens=i;
package/dist/cjs/utils/htmlWithTokens.cjs CHANGED
@@ -1 +1 @@
1
- "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");const i=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 o=require("../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.cjs");function a(e,...t){const r=String.raw({raw:e},...t).replace(/(--private-[\w-]+)(?=\s*[):,])/g,"$1-v2-0-0-canary-51"),n=o.unsafeHTML(r);return i.html`${n}`}exports.htmlWithTokens=a;
1
+ "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");const i=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 o=require("../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.cjs");function a(e,...t){const r=String.raw({raw:e},...t).replace(/(--private-[\w-]+)(?=\s*[):,])/g,"$1-v2-0-0-canary-53"),n=o.unsafeHTML(r);return i.html`${n}`}exports.htmlWithTokens=a;
package/dist/esm/components/ds-chip/ds-chip.js CHANGED
@@ -1,27 +1,27 @@
1
- import { UiKitElement as h } from "../base/UiKitElement.js";
2
- import { customUiKitElement as p } from "../../decorators/customUiKitElement.js";
3
- import { booleanConverter as d } from "../../utils/booleanConverter.js";
4
- import { htmlWithTokens as m } from "../../utils/htmlWithTokens.js";
1
+ import { UiKitElement as p } from "../base/UiKitElement.js";
2
+ import { customUiKitElement as m } from "../../decorators/customUiKitElement.js";
3
+ import { booleanConverter as h } from "../../utils/booleanConverter.js";
4
+ import { htmlWithTokens as u } from "../../utils/htmlWithTokens.js";
5
5
  import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
6
- import { nothing as u, html as y } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
6
+ import { nothing as d, html as y } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
7
7
  import "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
8
- import { property as n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
8
+ import { property as r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
9
9
  import { state as f } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
10
10
  import { classMap as b } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
11
11
  import { commonStyles as v } from "./styles/common.styles.js";
12
- var g = Object.defineProperty, k = Object.getOwnPropertyDescriptor, i = (e, l, r, s) => {
13
- for (var o = s > 1 ? void 0 : s ? k(l, r) : l, a = e.length - 1, c; a >= 0; a--)
14
- (c = e[a]) && (o = (s ? c(l, r, o) : c(o)) || o);
15
- return s && o && g(l, r, o), o;
12
+ var g = Object.defineProperty, T = Object.getOwnPropertyDescriptor, o = (e, l, n, s) => {
13
+ for (var i = s > 1 ? void 0 : s ? T(l, n) : l, a = e.length - 1, c; a >= 0; a--)
14
+ (c = e[a]) && (i = (s ? c(l, n, i) : c(i)) || i);
15
+ return s && i && g(l, n, i), i;
16
16
  };
17
- let t = class extends h {
17
+ let t = class extends p {
18
18
  constructor() {
19
19
  super(...arguments), this.mode = "light", this.size = "large", this.selected = !1, this.deselectable = !1, this.slottedText = "";
20
20
  }
21
21
  firstUpdated(e) {
22
22
  super.firstUpdated(e);
23
- const r = this.shadowRoot.querySelector("slot").assignedNodes({ flatten: !0 });
24
- this.slottedText = r.filter((s) => s.nodeType === Node.TEXT_NODE).map((s) => s.textContent.trim()).join(" ");
23
+ const n = this.shadowRoot.querySelector("slot").assignedNodes({ flatten: !0 });
24
+ this.slottedText = n.filter((s) => s.nodeType === Node.TEXT_NODE).map((s) => s.textContent.trim()).join(" ");
25
25
  }
26
26
  get classes() {
27
27
  return {
@@ -34,7 +34,7 @@ let t = class extends h {
34
34
  };
35
35
  }
36
36
  get styleTokens() {
37
- return m`
37
+ return u`
38
38
  <style>
39
39
  :host{
40
40
  color-scheme: ${this.mode};
@@ -71,8 +71,14 @@ let t = class extends h {
71
71
  handleKeyDownIcon(e) {
72
72
  (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.handleClickIcon(e));
73
73
  }
74
+ get leadingIconTemplate() {
75
+ return this.iconName ? this.componentFactory.createIcon({
76
+ class: "icon",
77
+ "icon-name": this.iconName
78
+ }) : d;
79
+ }
74
80
  get iconTemplate() {
75
- if (!this.selected || !this.deselectable) return u;
81
+ if (!this.selected || !this.deselectable) return d;
76
82
  const e = this.mode === "light" ? "dark" : "light";
77
83
  return this.componentFactory.createIcon({
78
84
  class: "icon",
@@ -98,6 +104,7 @@ let t = class extends h {
98
104
  @click=${this.handleClick}
99
105
  @keydown=${this.handleKeyDown}
100
106
  >
107
+ ${this.leadingIconTemplate}
101
108
  <slot></slot>
102
109
  ${this.iconTemplate}
103
110
  </div>
@@ -105,26 +112,29 @@ let t = class extends h {
105
112
  }
106
113
  };
107
114
  t.styles = [v];
108
- i([
109
- n({ type: String })
115
+ o([
116
+ r({ type: String })
110
117
  ], t.prototype, "value", 2);
111
- i([
112
- n({ type: String, reflect: !0 })
118
+ o([
119
+ r({ type: String, reflect: !0 })
113
120
  ], t.prototype, "mode", 2);
114
- i([
115
- n({ type: String, reflect: !0 })
121
+ o([
122
+ r({ type: String, reflect: !0 })
116
123
  ], t.prototype, "size", 2);
117
- i([
118
- n({ type: Boolean, converter: d, reflect: !0 })
124
+ o([
125
+ r({ type: Boolean, converter: h, reflect: !0 })
119
126
  ], t.prototype, "selected", 2);
120
- i([
121
- n({ type: Boolean, converter: d })
127
+ o([
128
+ r({ type: Boolean, converter: h })
122
129
  ], t.prototype, "deselectable", 2);
123
- i([
130
+ o([
131
+ r({ type: String, attribute: "icon-name" })
132
+ ], t.prototype, "iconName", 2);
133
+ o([
124
134
  f()
125
135
  ], t.prototype, "slottedText", 2);
126
- t = i([
127
- p("ds-chip")
136
+ t = o([
137
+ m("ds-chip")
128
138
  ], t);
129
139
  export {
130
140
  t as DsChip
package/dist/esm/components/ds-text/ds-text.js CHANGED
@@ -10,7 +10,7 @@ import { property as i } from "../../node_modules/.pnpm/@lit_reactive-element@2.
10
10
  import { queryAssignedNodes as f } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-nodes.js";
11
11
  import { classMap as d } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
12
12
  import { styleMap as v } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/style-map.js";
13
- import { unsafeStatic as w, html as S } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/static.js";
13
+ import { html as w, unsafeStatic as S } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/static.js";
14
14
  import { commonStyles as N } from "./styles/common.styles.js";
15
15
  var $ = Object.defineProperty, T = Object.getOwnPropertyDescriptor, o = (s, e, r, p) => {
16
16
  for (var a = p > 1 ? void 0 : p ? T(e, r) : e, n = s.length - 1, m; n >= 0; n--)
@@ -50,8 +50,8 @@ let t = class extends c(l) {
50
50
  };
51
51
  }
52
52
  render() {
53
- const s = (this.htmlTagName ?? "").toLowerCase(), e = _.has(s) ? s : "span", r = w(e);
54
- return S`
53
+ const s = (this.htmlTagName ?? "").toLowerCase(), e = _.has(s) ? s : "span", r = S(e);
54
+ return w`
55
55
  <${r}
56
56
  part="container"
57
57
  data-testid="ds-text-container"
package/dist/esm/components/ds-theme-provider/ds-theme-provider.js CHANGED
@@ -54,7 +54,7 @@ let m = class extends v {
54
54
  }
55
55
  loadThemeStyles() {
56
56
  return this.loadStyles ? new Promise((t, o) => {
57
- const s = "/2.0.0-canary.51", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
57
+ const s = "/2.0.0-canary.53", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
58
58
  if (document.head.querySelector(`link[href="${r}"]`)) t();
59
59
  else {
60
60
  const e = `ui-kit-theme-${s}`, a = document.getElementById(e), n = document.createElement("link");
package/dist/esm/node_modules/.pnpm/@floating-ui_dom@1.7.4/node_modules/@floating-ui/dom/dist/floating-ui.dom.js CHANGED
@@ -1,4 +1,4 @@
1
- import { flip as Z, shift as tt, offset as et, arrow as ot, size as it, computePosition as nt } from "../../../../../@floating-ui_core@1.7.3/node_modules/@floating-ui/core/dist/floating-ui.core.js";
1
+ import { computePosition as Z, flip as tt, shift as et, offset as ot, arrow as it, size as nt } from "../../../../../@floating-ui_core@1.7.3/node_modules/@floating-ui/core/dist/floating-ui.core.js";
2
2
  import { createCoords as d, round as W, max as O, min as A, rectToClientRect as X } from "../../../../../@floating-ui_utils@0.2.10/node_modules/@floating-ui/utils/dist/floating-ui.utils.js";
3
3
  import { isElement as p, getDocumentElement as m, getComputedStyle as w, isHTMLElement as x, getWindow as b, isTopLayer as D, getParentNode as T, isLastTraversableNode as S, isTableElement as st, isContainingBlock as _, getContainingBlock as rt, getNodeName as N, isOverflowElement as H, getNodeScroll as E, getOverflowAncestors as ct, getFrameElement as M, isWebKit as P } from "../../../../../@floating-ui_utils@0.2.10/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.js";
4
4
  function K(t) {
@@ -288,7 +288,7 @@ const Lt = {
288
288
  getScale: R,
289
289
  isElement: p,
290
290
  isRTL: bt
291
- }, vt = et, Wt = tt, St = Z, Et = it, Ft = ot, Bt = (t, e, i) => {
291
+ }, vt = ot, Wt = et, St = tt, Et = nt, Ft = it, Bt = (t, e, i) => {
292
292
  const o = /* @__PURE__ */ new Map(), n = {
293
293
  platform: Lt,
294
294
  ...i
@@ -296,7 +296,7 @@ const Lt = {
296
296
  ...n.platform,
297
297
  _c: o
298
298
  };
299
- return nt(t, e, {
299
+ return Z(t, e, {
300
300
  ...n,
301
301
  platform: r
302
302
  });
package/dist/esm/utils/IconsManager.js CHANGED
@@ -25,7 +25,7 @@ class l {
25
25
  }), f.subscribe("theme", this.handleChangeTheme);
26
26
  }
27
27
  }
28
- const c = Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.51"), h = globalThis;
28
+ const c = Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.53"), h = globalThis;
29
29
  let i = h[c];
30
30
  i || (i = new l(), Object.defineProperty(h, c, {
31
31
  value: i,
package/dist/esm/utils/PubSub.js CHANGED
@@ -18,7 +18,7 @@ class e {
18
18
  });
19
19
  }
20
20
  }
21
- const u = Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.51"), t = globalThis;
21
+ const u = Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.53"), t = globalThis;
22
22
  let b = t[u];
23
23
  b || (b = new e(), Object.defineProperty(t, u, {
24
24
  value: b,
package/dist/esm/utils/StylesRegistry/StylesRegistry.js CHANGED
@@ -5,7 +5,7 @@ class s {
5
5
  theme: t
6
6
  }) => {
7
7
  if (!t || !e) return;
8
- const r = `https://ds-assets.cupra.com/2.0.0-canary.51/styles/${t}/components/${e}.css`, c = this.getCachedStyleSheetPromise({ url: r });
8
+ const r = `https://ds-assets.cupra.com/2.0.0-canary.53/styles/${t}/components/${e}.css`, c = this.getCachedStyleSheetPromise({ url: r });
9
9
  if (c) return c;
10
10
  const i = this.fetchStyle({ url: r }).then((n) => (n || this.stylePromises.delete(r), n));
11
11
  return this.stylePromises.set(r, i), this.stylePromises.get(r);
package/dist/esm/utils/cssWithTokens.js CHANGED
@@ -3,7 +3,7 @@ import "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
3
3
  import "../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
4
4
  import { unsafeCSS as n, css as o } from "../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
5
5
  function x(t, ...r) {
6
- const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v2-0-0-canary-51"), i = n(e);
6
+ const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v2-0-0-canary-53"), i = n(e);
7
7
  return o`${i}`;
8
8
  }
9
9
  export {
package/dist/esm/utils/htmlWithTokens.js CHANGED
@@ -3,7 +3,7 @@ import { html as n } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit
3
3
  import "../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
4
4
  import { unsafeHTML as i } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.js";
5
5
  function x(t, ...r) {
6
- const o = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v2-0-0-canary-51"), e = i(o);
6
+ const o = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v2-0-0-canary-53"), e = i(o);
7
7
  return n`${e}`;
8
8
  }
9
9
  export {
package/dist/types/components/ds-chip/ds-chip.d.ts CHANGED
@@ -8,6 +8,7 @@ export declare class DsChip extends UiKitElement {
8
8
  size: DsChipAttrs['size'];
9
9
  selected: DsChipAttrs['selected'];
10
10
  deselectable: DsChipAttrs['deselectable'];
11
+ iconName: DsChipAttrs['icon-name'];
11
12
  slottedText: string;
12
13
  protected firstUpdated(changedProps: PropertyValues): void;
13
14
  private get classes();
@@ -16,6 +17,7 @@ export declare class DsChip extends UiKitElement {
16
17
  handleKeyDown(event: KeyboardEvent): void;
17
18
  private handleClickIcon;
18
19
  private handleKeyDownIcon;
20
+ private get leadingIconTemplate();
19
21
  protected get iconTemplate(): any;
20
22
  render(): import("lit").TemplateResult<1>;
21
23
  }
package/dist/types/components/ds-chip/ds-chip.types.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import type { DsIconAttrs } from '../ds-icon/ds-icon.types.ts';
1
2
  import type { CommonAttrs } from '../../types/types';
2
3
  export type DsChipAttrs = {
3
4
  value: string;
@@ -5,4 +6,5 @@ export type DsChipAttrs = {
5
6
  size?: 'large' | 'medium' | 'small';
6
7
  selected?: boolean;
7
8
  deselectable?: boolean;
9
+ 'icon-name'?: DsIconAttrs['icon-name'];
8
10
  } & CommonAttrs;
package/dist-react/cjs/components/ds-chip/ds-chip.cjs CHANGED
@@ -1,22 +1,23 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("../base/UiKitElement.cjs"),p=require("../../decorators/customUiKitElement.cjs"),h=require("../../utils/booleanConverter.cjs"),u=require("../../utils/htmlWithTokens.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const a=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const i=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),y=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs"),m=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),b=require("./styles/common.styles.cjs");var C=Object.defineProperty,f=Object.getOwnPropertyDescriptor,s=(l,e,r,o)=>{for(var t=o>1?void 0:o?f(e,r):e,n=l.length-1,c;n>=0;n--)(c=l[n])&&(t=(o?c(e,r,t):c(t))||t);return o&&t&&C(e,r,t),t};exports.DsChip=class extends d.UiKitElement{constructor(){super(...arguments),this.mode="light",this.size="large",this.selected=!1,this.deselectable=!1,this.slottedText=""}firstUpdated(e){super.firstUpdated(e);const o=this.shadowRoot.querySelector("slot").assignedNodes({flatten:!0});this.slottedText=o.filter(t=>t.nodeType===Node.TEXT_NODE).map(t=>t.textContent.trim()).join(" ")}get classes(){return{container:!0,"ds-blur":!0,[this.size]:!0,[this.mode]:!!this.mode,selected:this.selected,deselectable:this.deselectable}}get styleTokens(){return u.htmlWithTokens`
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("../base/UiKitElement.cjs"),d=require("../../decorators/customUiKitElement.cjs"),h=require("../../utils/booleanConverter.cjs"),u=require("../../utils/htmlWithTokens.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const a=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const i=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),m=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs"),y=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),b=require("./styles/common.styles.cjs");var C=Object.defineProperty,f=Object.getOwnPropertyDescriptor,s=(n,e,r,o)=>{for(var t=o>1?void 0:o?f(e,r):e,l=n.length-1,c;l>=0;l--)(c=n[l])&&(t=(o?c(e,r,t):c(t))||t);return o&&t&&C(e,r,t),t};exports.DsChip=class extends p.UiKitElement{constructor(){super(...arguments),this.mode="light",this.size="large",this.selected=!1,this.deselectable=!1,this.slottedText=""}firstUpdated(e){super.firstUpdated(e);const o=this.shadowRoot.querySelector("slot").assignedNodes({flatten:!0});this.slottedText=o.filter(t=>t.nodeType===Node.TEXT_NODE).map(t=>t.textContent.trim()).join(" ")}get classes(){return{container:!0,"ds-blur":!0,[this.size]:!0,[this.mode]:!!this.mode,selected:this.selected,deselectable:this.deselectable}}get styleTokens(){return u.htmlWithTokens`
2
2
  <style>
3
3
  :host{
4
4
  color-scheme: ${this.mode};
5
5
  pointer-events: ${this.selected?"none":"visible"};
6
6
  }
7
7
  </style>
8
- `}handleClick(){this.selected||this.dispatchEvent(new CustomEvent("select",{bubbles:!0,composed:!0,detail:{value:this.value}}))}handleKeyDown(e){(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this.handleClick())}handleClickIcon(e){e.stopImmediatePropagation(),!(!this.deselectable||!this.selected)&&this.dispatchEvent(new CustomEvent("deselect",{bubbles:!0,composed:!0,detail:{value:this.value}}))}handleKeyDownIcon(e){(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this.handleClickIcon(e))}get iconTemplate(){if(!this.selected||!this.deselectable)return a.nothing;const e=this.mode==="light"?"dark":"light";return this.componentFactory.createIcon({class:"icon","icon-name":"cross","data-testid":"ds-chip-icon","@click":this.handleClickIcon,"@keydown":this.handleKeyDownIcon,role:"button","aria-label":`deselect ${this.slottedText}`,tabindex:"0",mode:e})}render(){return a.html`
8
+ `}handleClick(){this.selected||this.dispatchEvent(new CustomEvent("select",{bubbles:!0,composed:!0,detail:{value:this.value}}))}handleKeyDown(e){(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this.handleClick())}handleClickIcon(e){e.stopImmediatePropagation(),!(!this.deselectable||!this.selected)&&this.dispatchEvent(new CustomEvent("deselect",{bubbles:!0,composed:!0,detail:{value:this.value}}))}handleKeyDownIcon(e){(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this.handleClickIcon(e))}get leadingIconTemplate(){return this.iconName?this.componentFactory.createIcon({class:"icon","icon-name":this.iconName}):a.nothing}get iconTemplate(){if(!this.selected||!this.deselectable)return a.nothing;const e=this.mode==="light"?"dark":"light";return this.componentFactory.createIcon({class:"icon","icon-name":"cross","data-testid":"ds-chip-icon","@click":this.handleClickIcon,"@keydown":this.handleKeyDownIcon,role:"button","aria-label":`deselect ${this.slottedText}`,tabindex:"0",mode:e})}render(){return a.html`
9
9
  ${this.styleTokens}
10
10
  <div
11
11
  role="button"
12
12
  aria-label=${`chip ${this.slottedText}`}
13
13
  tabindex="0"
14
14
  data-testid="ds-chip-container"
15
- class=${m.classMap(this.classes)}
15
+ class=${y.classMap(this.classes)}
16
16
  @click=${this.handleClick}
17
17
  @keydown=${this.handleKeyDown}
18
18
  >
19
+ ${this.leadingIconTemplate}
19
20
  <slot></slot>
20
21
  ${this.iconTemplate}
21
22
  </div>
22
- `}};exports.DsChip.styles=[b.commonStyles];s([i.property({type:String})],exports.DsChip.prototype,"value",2);s([i.property({type:String,reflect:!0})],exports.DsChip.prototype,"mode",2);s([i.property({type:String,reflect:!0})],exports.DsChip.prototype,"size",2);s([i.property({type:Boolean,converter:h.booleanConverter,reflect:!0})],exports.DsChip.prototype,"selected",2);s([i.property({type:Boolean,converter:h.booleanConverter})],exports.DsChip.prototype,"deselectable",2);s([y.state()],exports.DsChip.prototype,"slottedText",2);exports.DsChip=s([p.customUiKitElement("ds-chip")],exports.DsChip);
23
+ `}};exports.DsChip.styles=[b.commonStyles];s([i.property({type:String})],exports.DsChip.prototype,"value",2);s([i.property({type:String,reflect:!0})],exports.DsChip.prototype,"mode",2);s([i.property({type:String,reflect:!0})],exports.DsChip.prototype,"size",2);s([i.property({type:Boolean,converter:h.booleanConverter,reflect:!0})],exports.DsChip.prototype,"selected",2);s([i.property({type:Boolean,converter:h.booleanConverter})],exports.DsChip.prototype,"deselectable",2);s([i.property({type:String,attribute:"icon-name"})],exports.DsChip.prototype,"iconName",2);s([m.state()],exports.DsChip.prototype,"slottedText",2);exports.DsChip=s([d.customUiKitElement("ds-chip")],exports.DsChip);
package/dist-react/cjs/components/ds-theme-provider/ds-theme-provider.cjs CHANGED
@@ -1,4 +1,4 @@
1
1
  "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../../core/theme.constants.cjs"),p=require("../../decorators/customUiKitElement.cjs"),f=require("../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/decorators/provide.cjs"),y=require("../../utils/PubSub.cjs"),m=require("../../utils/booleanConverter.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const l=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs"),v=require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs"),h=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),u=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs"),$=require("../../styles/source/shared/fonts-config.cjs"),T=require("./themeContext.cjs");var b=Object.defineProperty,P=Object.getOwnPropertyDescriptor,d=(a,e,s,o)=>{for(var t=o>1?void 0:o?P(e,s):e,r=a.length-1,n;r>=0;r--)(n=a[r])&&(t=(o?n(e,s,t):n(t))||t);return o&&t&&b(e,s,t),t};exports.DsThemeProvider=class extends v.LitElement{constructor(){super(...arguments),this.loadFonts=!0,this.loadStyles=!0,this.cssLoaded=!1,this.loadedFonts=new Set}updated(e){super.updated(e),e.has("theme")&&(y.pubSub.publish("theme",this.theme),sessionStorage==null||sessionStorage.setItem(c.THEME_STORAGE_KEY,this.theme),typeof FontFace<"u"&&(document!=null&&document.fonts)&&this.loadThemeFonts(),this.loadThemeStyles().then(()=>{this.cssLoaded=!0,this.dispatchEvent(new CustomEvent("ui-kit:ready",{bubbles:!0,composed:!0}))}))}loadThemeFonts(){var e;(e=$.fontsConfig[this.theme])==null||e.fonts.forEach(s=>{this.loadThemeFont(s)})}async loadThemeFont({weight:e,name:s,file:o}){if(!this.loadFonts)return Promise.resolve();const t=`${s}-${e}`;if(this.loadedFonts.has(t))return;const r=new FontFace(s,`url('https://ds-assets.cupra.com/fonts/${this.theme}/${o}.woff2') format('woff2'),
2
2
  url('https://ds-assets.cupra.com/fonts/${this.theme}/${o}.woff') format('woff'),
3
3
  url('https://ds-assets.cupra.com/fonts/${this.theme}/${o}.ttf') format('truetype'),
4
- url('https://ds-assets.cupra.com/fonts/${this.theme}/${o}.otf') format('opentype')`,{style:"normal",weight:e,display:"swap"});try{await r.load(),document.fonts.add(r),this.loadedFonts.add(t)}catch(n){console.error(`Error loading "${s}" font with "${e}" weight:`,n)}}loadThemeStyles(){return this.loadStyles?new Promise((e,s)=>{const o="/2.0.0-canary.51",t=`https://ds-assets.cupra.com${o}/styles/${this.theme}/theme.css`;if(document.head.querySelector(`link[href="${t}"]`))e();else{const r=`ui-kit-theme-${o}`,n=document.getElementById(r),i=document.createElement("link");i.id=r,i.rel="stylesheet",i.href=t,i.onload=()=>e(),i.onerror=()=>s(new Error(`Failed to load theme CSS: ${t}`)),document.head.appendChild(i),n==null||n.remove()}}):Promise.resolve()}render(){return this.cssLoaded?l.html`<slot></slot>`:l.nothing}};d([h.property({type:Boolean,converter:m.booleanConverter,attribute:"load-fonts"})],exports.DsThemeProvider.prototype,"loadFonts",2);d([h.property({type:Boolean,converter:m.booleanConverter,attribute:"load-styles"})],exports.DsThemeProvider.prototype,"loadStyles",2);d([f.provide({context:T.themeContext}),h.property({type:String})],exports.DsThemeProvider.prototype,"theme",2);d([u.state()],exports.DsThemeProvider.prototype,"cssLoaded",2);d([u.state()],exports.DsThemeProvider.prototype,"loadedFonts",2);exports.DsThemeProvider=d([p.customUiKitElement("ds-theme-provider")],exports.DsThemeProvider);
4
+ url('https://ds-assets.cupra.com/fonts/${this.theme}/${o}.otf') format('opentype')`,{style:"normal",weight:e,display:"swap"});try{await r.load(),document.fonts.add(r),this.loadedFonts.add(t)}catch(n){console.error(`Error loading "${s}" font with "${e}" weight:`,n)}}loadThemeStyles(){return this.loadStyles?new Promise((e,s)=>{const o="/2.0.0-canary.53",t=`https://ds-assets.cupra.com${o}/styles/${this.theme}/theme.css`;if(document.head.querySelector(`link[href="${t}"]`))e();else{const r=`ui-kit-theme-${o}`,n=document.getElementById(r),i=document.createElement("link");i.id=r,i.rel="stylesheet",i.href=t,i.onload=()=>e(),i.onerror=()=>s(new Error(`Failed to load theme CSS: ${t}`)),document.head.appendChild(i),n==null||n.remove()}}):Promise.resolve()}render(){return this.cssLoaded?l.html`<slot></slot>`:l.nothing}};d([h.property({type:Boolean,converter:m.booleanConverter,attribute:"load-fonts"})],exports.DsThemeProvider.prototype,"loadFonts",2);d([h.property({type:Boolean,converter:m.booleanConverter,attribute:"load-styles"})],exports.DsThemeProvider.prototype,"loadStyles",2);d([f.provide({context:T.themeContext}),h.property({type:String})],exports.DsThemeProvider.prototype,"theme",2);d([u.state()],exports.DsThemeProvider.prototype,"cssLoaded",2);d([u.state()],exports.DsThemeProvider.prototype,"loadedFonts",2);exports.DsThemeProvider=d([p.customUiKitElement("ds-theme-provider")],exports.DsThemeProvider);
package/dist-react/cjs/utils/IconsManager.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../core/theme.constants.cjs"),l=require("./PubSub.cjs");class u{constructor(){this.icons={},this.handleChangeTheme=e=>{if(this.theme===e)return;this.theme=e;const n=Object.keys(this.icons);this.icons={},n.forEach(s=>this.fetchIcon(s))},this.fetchIcon=async(e,n={})=>{const s=typeof sessionStorage<"u"?sessionStorage==null?void 0:sessionStorage.getItem(r.THEME_STORAGE_KEY):null;!this.theme&&s&&(this.theme=s);const t=this.icons[e];if(t)return await t;const i=this.loadIcon(e,n).catch(a=>{throw delete this.icons[e],a});return this.icons[e]=i,i},this.loadIcon=(e,{cache:n="force-cache",...s})=>!this.theme||typeof fetch>"u"?Promise.resolve('<svg class="ds-icon"></svg>'):fetch(`https://ds-assets.cupra.com/icons/${this.theme}/${e}.svg`,{cache:n,...s}).then(t=>t.text()).catch(t=>{if((t==null?void 0:t.name)==="AbortError")throw t;return console.error(`Failed to fetch icon "${e}":`,t),""}),l.pubSub.subscribe("theme",this.handleChangeTheme)}}const o=Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.51"),h=globalThis;let c=h[o];c||(c=new u,Object.defineProperty(h,o,{value:c,writable:!1,configurable:!1,enumerable:!1}));const f=c;exports.iconsManager=f;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../core/theme.constants.cjs"),l=require("./PubSub.cjs");class u{constructor(){this.icons={},this.handleChangeTheme=e=>{if(this.theme===e)return;this.theme=e;const n=Object.keys(this.icons);this.icons={},n.forEach(s=>this.fetchIcon(s))},this.fetchIcon=async(e,n={})=>{const s=typeof sessionStorage<"u"?sessionStorage==null?void 0:sessionStorage.getItem(r.THEME_STORAGE_KEY):null;!this.theme&&s&&(this.theme=s);const t=this.icons[e];if(t)return await t;const i=this.loadIcon(e,n).catch(a=>{throw delete this.icons[e],a});return this.icons[e]=i,i},this.loadIcon=(e,{cache:n="force-cache",...s})=>!this.theme||typeof fetch>"u"?Promise.resolve('<svg class="ds-icon"></svg>'):fetch(`https://ds-assets.cupra.com/icons/${this.theme}/${e}.svg`,{cache:n,...s}).then(t=>t.text()).catch(t=>{if((t==null?void 0:t.name)==="AbortError")throw t;return console.error(`Failed to fetch icon "${e}":`,t),""}),l.pubSub.subscribe("theme",this.handleChangeTheme)}}const o=Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.53"),h=globalThis;let c=h[o];c||(c=new u,Object.defineProperty(h,o,{value:c,writable:!1,configurable:!1,enumerable:!1}));const f=c;exports.iconsManager=f;
package/dist-react/cjs/utils/PubSub.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class u{constructor(){this.subscribers={},this.lastPublishedData={}}subscribe(s,r){return this.subscribers[s]||(this.subscribers[s]=[]),this.subscribers[s].push(r),this.lastPublishedData[s]}unsubscribe(s,r){this.subscribers[s]&&(this.subscribers[s]=this.subscribers[s].filter(i=>i!==r))}publish(s,r){this.lastPublishedData[s]=r,this.subscribers[s]&&this.subscribers[s].forEach(i=>{try{i(r)}catch(c){console.error(`Error in subscriber for event "${s}":`,c)}})}}const t=Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.51"),e=globalThis;let b=e[t];b||(b=new u,Object.defineProperty(e,t,{value:b,writable:!1,configurable:!1,enumerable:!1}));const l=b;exports.PubSub=u;exports.pubSub=l;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class u{constructor(){this.subscribers={},this.lastPublishedData={}}subscribe(s,r){return this.subscribers[s]||(this.subscribers[s]=[]),this.subscribers[s].push(r),this.lastPublishedData[s]}unsubscribe(s,r){this.subscribers[s]&&(this.subscribers[s]=this.subscribers[s].filter(i=>i!==r))}publish(s,r){this.lastPublishedData[s]=r,this.subscribers[s]&&this.subscribers[s].forEach(i=>{try{i(r)}catch(c){console.error(`Error in subscriber for event "${s}":`,c)}})}}const t=Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.53"),e=globalThis;let b=e[t];b||(b=new u,Object.defineProperty(e,t,{value:b,writable:!1,configurable:!1,enumerable:!1}));const l=b;exports.PubSub=u;exports.pubSub=l;
package/dist-react/cjs/utils/StylesRegistry/StylesRegistry.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class s{constructor(){this.stylePromises=new Map,this.getStyles=async({componentName:e,theme:t})=>{if(!t||!e)return;const r=`https://ds-assets.cupra.com/2.0.0-canary.51/styles/${t}/components/${e}.css`,c=this.getCachedStyleSheetPromise({url:r});if(c)return c;const i=this.fetchStyle({url:r}).then(n=>(n||this.stylePromises.delete(r),n));return this.stylePromises.set(r,i),this.stylePromises.get(r)}}async fetchStyle({url:e}){try{if(typeof fetch>"u")return;const t=await fetch(e,{cache:"force-cache"});if(t.ok)return t.text()}catch(t){console.error(`Failed to fetch Style Sheet "${e}":`,t)}}getCachedStyleSheetPromise({url:e}){return this.stylePromises.get(e)}static getInstance(){return s.instance||(s.instance=new s),s.instance}}const o=s.getInstance();exports.stylesRegistry=o;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class s{constructor(){this.stylePromises=new Map,this.getStyles=async({componentName:e,theme:t})=>{if(!t||!e)return;const r=`https://ds-assets.cupra.com/2.0.0-canary.53/styles/${t}/components/${e}.css`,c=this.getCachedStyleSheetPromise({url:r});if(c)return c;const i=this.fetchStyle({url:r}).then(n=>(n||this.stylePromises.delete(r),n));return this.stylePromises.set(r,i),this.stylePromises.get(r)}}async fetchStyle({url:e}){try{if(typeof fetch>"u")return;const t=await fetch(e,{cache:"force-cache"});if(t.ok)return t.text()}catch(t){console.error(`Failed to fetch Style Sheet "${e}":`,t)}}getCachedStyleSheetPromise({url:e}){return this.stylePromises.get(e)}static getInstance(){return s.instance||(s.instance=new s),s.instance}}const o=s.getInstance();exports.stylesRegistry=o;
package/dist-react/cjs/utils/cssWithTokens.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");require("../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const e=require("../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs");function i(r,...t){const s=String.raw({raw:r},...t).replace(/(--private-[\w-]+)(?=\s*[):,])/g,"$1-v2-0-0-canary-51"),n=e.unsafeCSS(s);return e.css`${n}`}exports.cssWithTokens=i;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");require("../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const e=require("../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs");function i(r,...t){const s=String.raw({raw:r},...t).replace(/(--private-[\w-]+)(?=\s*[):,])/g,"$1-v2-0-0-canary-53"),n=e.unsafeCSS(s);return e.css`${n}`}exports.cssWithTokens=i;
package/dist-react/cjs/utils/htmlWithTokens.cjs CHANGED
@@ -1 +1 @@
1
- "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");const i=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 o=require("../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.cjs");function a(e,...t){const r=String.raw({raw:e},...t).replace(/(--private-[\w-]+)(?=\s*[):,])/g,"$1-v2-0-0-canary-51"),n=o.unsafeHTML(r);return i.html`${n}`}exports.htmlWithTokens=a;
1
+ "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");const i=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 o=require("../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.cjs");function a(e,...t){const r=String.raw({raw:e},...t).replace(/(--private-[\w-]+)(?=\s*[):,])/g,"$1-v2-0-0-canary-53"),n=o.unsafeHTML(r);return i.html`${n}`}exports.htmlWithTokens=a;
package/dist-react/esm/components/ds-chip/ds-chip.js CHANGED
@@ -1,27 +1,27 @@
1
- import { UiKitElement as h } from "../base/UiKitElement.js";
2
- import { customUiKitElement as p } from "../../decorators/customUiKitElement.js";
3
- import { booleanConverter as d } from "../../utils/booleanConverter.js";
4
- import { htmlWithTokens as m } from "../../utils/htmlWithTokens.js";
1
+ import { UiKitElement as p } from "../base/UiKitElement.js";
2
+ import { customUiKitElement as m } from "../../decorators/customUiKitElement.js";
3
+ import { booleanConverter as h } from "../../utils/booleanConverter.js";
4
+ import { htmlWithTokens as u } from "../../utils/htmlWithTokens.js";
5
5
  import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
6
- import { nothing as u, html as y } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
6
+ import { nothing as d, html as y } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
7
7
  import "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
8
- import { property as n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
8
+ import { property as r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
9
9
  import { state as f } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
10
10
  import { classMap as b } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
11
11
  import { commonStyles as v } from "./styles/common.styles.js";
12
- var g = Object.defineProperty, k = Object.getOwnPropertyDescriptor, i = (e, l, r, s) => {
13
- for (var o = s > 1 ? void 0 : s ? k(l, r) : l, a = e.length - 1, c; a >= 0; a--)
14
- (c = e[a]) && (o = (s ? c(l, r, o) : c(o)) || o);
15
- return s && o && g(l, r, o), o;
12
+ var g = Object.defineProperty, T = Object.getOwnPropertyDescriptor, o = (e, l, n, s) => {
13
+ for (var i = s > 1 ? void 0 : s ? T(l, n) : l, a = e.length - 1, c; a >= 0; a--)
14
+ (c = e[a]) && (i = (s ? c(l, n, i) : c(i)) || i);
15
+ return s && i && g(l, n, i), i;
16
16
  };
17
- let t = class extends h {
17
+ let t = class extends p {
18
18
  constructor() {
19
19
  super(...arguments), this.mode = "light", this.size = "large", this.selected = !1, this.deselectable = !1, this.slottedText = "";
20
20
  }
21
21
  firstUpdated(e) {
22
22
  super.firstUpdated(e);
23
- const r = this.shadowRoot.querySelector("slot").assignedNodes({ flatten: !0 });
24
- this.slottedText = r.filter((s) => s.nodeType === Node.TEXT_NODE).map((s) => s.textContent.trim()).join(" ");
23
+ const n = this.shadowRoot.querySelector("slot").assignedNodes({ flatten: !0 });
24
+ this.slottedText = n.filter((s) => s.nodeType === Node.TEXT_NODE).map((s) => s.textContent.trim()).join(" ");
25
25
  }
26
26
  get classes() {
27
27
  return {
@@ -34,7 +34,7 @@ let t = class extends h {
34
34
  };
35
35
  }
36
36
  get styleTokens() {
37
- return m`
37
+ return u`
38
38
  <style>
39
39
  :host{
40
40
  color-scheme: ${this.mode};
@@ -71,8 +71,14 @@ let t = class extends h {
71
71
  handleKeyDownIcon(e) {
72
72
  (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.handleClickIcon(e));
73
73
  }
74
+ get leadingIconTemplate() {
75
+ return this.iconName ? this.componentFactory.createIcon({
76
+ class: "icon",
77
+ "icon-name": this.iconName
78
+ }) : d;
79
+ }
74
80
  get iconTemplate() {
75
- if (!this.selected || !this.deselectable) return u;
81
+ if (!this.selected || !this.deselectable) return d;
76
82
  const e = this.mode === "light" ? "dark" : "light";
77
83
  return this.componentFactory.createIcon({
78
84
  class: "icon",
@@ -98,6 +104,7 @@ let t = class extends h {
98
104
  @click=${this.handleClick}
99
105
  @keydown=${this.handleKeyDown}
100
106
  >
107
+ ${this.leadingIconTemplate}
101
108
  <slot></slot>
102
109
  ${this.iconTemplate}
103
110
  </div>
@@ -105,26 +112,29 @@ let t = class extends h {
105
112
  }
106
113
  };
107
114
  t.styles = [v];
108
- i([
109
- n({ type: String })
115
+ o([
116
+ r({ type: String })
110
117
  ], t.prototype, "value", 2);
111
- i([
112
- n({ type: String, reflect: !0 })
118
+ o([
119
+ r({ type: String, reflect: !0 })
113
120
  ], t.prototype, "mode", 2);
114
- i([
115
- n({ type: String, reflect: !0 })
121
+ o([
122
+ r({ type: String, reflect: !0 })
116
123
  ], t.prototype, "size", 2);
117
- i([
118
- n({ type: Boolean, converter: d, reflect: !0 })
124
+ o([
125
+ r({ type: Boolean, converter: h, reflect: !0 })
119
126
  ], t.prototype, "selected", 2);
120
- i([
121
- n({ type: Boolean, converter: d })
127
+ o([
128
+ r({ type: Boolean, converter: h })
122
129
  ], t.prototype, "deselectable", 2);
123
- i([
130
+ o([
131
+ r({ type: String, attribute: "icon-name" })
132
+ ], t.prototype, "iconName", 2);
133
+ o([
124
134
  f()
125
135
  ], t.prototype, "slottedText", 2);
126
- t = i([
127
- p("ds-chip")
136
+ t = o([
137
+ m("ds-chip")
128
138
  ], t);
129
139
  export {
130
140
  t as DsChip
package/dist-react/esm/components/ds-text/ds-text.js CHANGED
@@ -10,7 +10,7 @@ import { property as i } from "../../node_modules/.pnpm/@lit_reactive-element@2.
10
10
  import { queryAssignedNodes as f } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-nodes.js";
11
11
  import { classMap as d } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
12
12
  import { styleMap as v } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/style-map.js";
13
- import { unsafeStatic as w, html as S } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/static.js";
13
+ import { html as w, unsafeStatic as S } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/static.js";
14
14
  import { commonStyles as N } from "./styles/common.styles.js";
15
15
  var $ = Object.defineProperty, T = Object.getOwnPropertyDescriptor, o = (s, e, r, p) => {
16
16
  for (var a = p > 1 ? void 0 : p ? T(e, r) : e, n = s.length - 1, m; n >= 0; n--)
@@ -50,8 +50,8 @@ let t = class extends c(l) {
50
50
  };
51
51
  }
52
52
  render() {
53
- const s = (this.htmlTagName ?? "").toLowerCase(), e = _.has(s) ? s : "span", r = w(e);
54
- return S`
53
+ const s = (this.htmlTagName ?? "").toLowerCase(), e = _.has(s) ? s : "span", r = S(e);
54
+ return w`
55
55
  <${r}
56
56
  part="container"
57
57
  data-testid="ds-text-container"
package/dist-react/esm/components/ds-theme-provider/ds-theme-provider.js CHANGED
@@ -54,7 +54,7 @@ let m = class extends v {
54
54
  }
55
55
  loadThemeStyles() {
56
56
  return this.loadStyles ? new Promise((t, o) => {
57
- const s = "/2.0.0-canary.51", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
57
+ const s = "/2.0.0-canary.53", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
58
58
  if (document.head.querySelector(`link[href="${r}"]`)) t();
59
59
  else {
60
60
  const e = `ui-kit-theme-${s}`, a = document.getElementById(e), n = document.createElement("link");
package/dist-react/esm/node_modules/.pnpm/@floating-ui_dom@1.7.4/node_modules/@floating-ui/dom/dist/floating-ui.dom.js CHANGED
@@ -1,4 +1,4 @@
1
- import { flip as Z, shift as tt, offset as et, arrow as ot, size as it, computePosition as nt } from "../../../../../@floating-ui_core@1.7.3/node_modules/@floating-ui/core/dist/floating-ui.core.js";
1
+ import { computePosition as Z, flip as tt, shift as et, offset as ot, arrow as it, size as nt } from "../../../../../@floating-ui_core@1.7.3/node_modules/@floating-ui/core/dist/floating-ui.core.js";
2
2
  import { createCoords as d, round as W, max as O, min as A, rectToClientRect as X } from "../../../../../@floating-ui_utils@0.2.10/node_modules/@floating-ui/utils/dist/floating-ui.utils.js";
3
3
  import { isElement as p, getDocumentElement as m, getComputedStyle as w, isHTMLElement as x, getWindow as b, isTopLayer as D, getParentNode as T, isLastTraversableNode as S, isTableElement as st, isContainingBlock as _, getContainingBlock as rt, getNodeName as N, isOverflowElement as H, getNodeScroll as E, getOverflowAncestors as ct, getFrameElement as M, isWebKit as P } from "../../../../../@floating-ui_utils@0.2.10/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.js";
4
4
  function K(t) {
@@ -288,7 +288,7 @@ const Lt = {
288
288
  getScale: R,
289
289
  isElement: p,
290
290
  isRTL: bt
291
- }, vt = et, Wt = tt, St = Z, Et = it, Ft = ot, Bt = (t, e, i) => {
291
+ }, vt = ot, Wt = et, St = tt, Et = nt, Ft = it, Bt = (t, e, i) => {
292
292
  const o = /* @__PURE__ */ new Map(), n = {
293
293
  platform: Lt,
294
294
  ...i
@@ -296,7 +296,7 @@ const Lt = {
296
296
  ...n.platform,
297
297
  _c: o
298
298
  };
299
- return nt(t, e, {
299
+ return Z(t, e, {
300
300
  ...n,
301
301
  platform: r
302
302
  });
package/dist-react/esm/utils/IconsManager.js CHANGED
@@ -25,7 +25,7 @@ class l {
25
25
  }), f.subscribe("theme", this.handleChangeTheme);
26
26
  }
27
27
  }
28
- const c = Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.51"), h = globalThis;
28
+ const c = Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.53"), h = globalThis;
29
29
  let i = h[c];
30
30
  i || (i = new l(), Object.defineProperty(h, c, {
31
31
  value: i,
package/dist-react/esm/utils/PubSub.js CHANGED
@@ -18,7 +18,7 @@ class e {
18
18
  });
19
19
  }
20
20
  }
21
- const u = Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.51"), t = globalThis;
21
+ const u = Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.53"), t = globalThis;
22
22
  let b = t[u];
23
23
  b || (b = new e(), Object.defineProperty(t, u, {
24
24
  value: b,
package/dist-react/esm/utils/StylesRegistry/StylesRegistry.js CHANGED
@@ -5,7 +5,7 @@ class s {
5
5
  theme: t
6
6
  }) => {
7
7
  if (!t || !e) return;
8
- const r = `https://ds-assets.cupra.com/2.0.0-canary.51/styles/${t}/components/${e}.css`, c = this.getCachedStyleSheetPromise({ url: r });
8
+ const r = `https://ds-assets.cupra.com/2.0.0-canary.53/styles/${t}/components/${e}.css`, c = this.getCachedStyleSheetPromise({ url: r });
9
9
  if (c) return c;
10
10
  const i = this.fetchStyle({ url: r }).then((n) => (n || this.stylePromises.delete(r), n));
11
11
  return this.stylePromises.set(r, i), this.stylePromises.get(r);
package/dist-react/esm/utils/cssWithTokens.js CHANGED
@@ -3,7 +3,7 @@ import "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
3
3
  import "../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
4
4
  import { unsafeCSS as n, css as o } from "../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
5
5
  function x(t, ...r) {
6
- const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v2-0-0-canary-51"), i = n(e);
6
+ const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v2-0-0-canary-53"), i = n(e);
7
7
  return o`${i}`;
8
8
  }
9
9
  export {
package/dist-react/esm/utils/htmlWithTokens.js CHANGED
@@ -3,7 +3,7 @@ import { html as n } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit
3
3
  import "../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
4
4
  import { unsafeHTML as i } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.js";
5
5
  function x(t, ...r) {
6
- const o = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v2-0-0-canary-51"), e = i(o);
6
+ const o = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v2-0-0-canary-53"), e = i(o);
7
7
  return n`${e}`;
8
8
  }
9
9
  export {
package/dist-react/types/components/ds-chip/ds-chip.d.ts CHANGED
@@ -8,6 +8,7 @@ export declare class DsChip extends UiKitElement {
8
8
  size: DsChipAttrs['size'];
9
9
  selected: DsChipAttrs['selected'];
10
10
  deselectable: DsChipAttrs['deselectable'];
11
+ iconName: DsChipAttrs['icon-name'];
11
12
  slottedText: string;
12
13
  protected firstUpdated(changedProps: PropertyValues): void;
13
14
  private get classes();
@@ -16,6 +17,7 @@ export declare class DsChip extends UiKitElement {
16
17
  handleKeyDown(event: KeyboardEvent): void;
17
18
  private handleClickIcon;
18
19
  private handleKeyDownIcon;
20
+ private get leadingIconTemplate();
19
21
  protected get iconTemplate(): any;
20
22
  render(): import("lit").TemplateResult<1>;
21
23
  }
package/dist-react/types/components/ds-chip/ds-chip.types.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import type { DsIconAttrs } from '../ds-icon/ds-icon.types.ts';
1
2
  import type { CommonAttrs } from '../../types/types';
2
3
  export type DsChipAttrs = {
3
4
  value: string;
@@ -5,4 +6,5 @@ export type DsChipAttrs = {
5
6
  size?: 'large' | 'medium' | 'small';
6
7
  selected?: boolean;
7
8
  deselectable?: boolean;
9
+ 'icon-name'?: DsIconAttrs['icon-name'];
8
10
  } & CommonAttrs;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cupra/ui-kit",
3
- "version": "2.0.0-canary.51",
3
+ "version": "2.0.0-canary.53",
4
4
  "description": "Web components library",
5
5
  "author": "SEAT S.A.",
6
6
  "license": "SEAT S.A. Library EULA 1.0",
@@ -118,7 +118,7 @@
118
118
  "jsdom": "^26.0.0",
119
119
  "lodash": "^4.17.23",
120
120
  "lottie-web": "^5.13.0",
121
- "nodemon": "^3.1.10",
121
+ "nodemon": "^3.1.14",
122
122
  "playwright": "1.56.1",
123
123
  "postcss": "^8.5.3",
124
124
  "postcss-cli": "^11.0.1",
@@ -128,8 +128,8 @@
128
128
  "postcss-simple-vars": "^7.0.1",
129
129
  "readline": "^1.3.0",
130
130
  "shadow-dom-testing-library": "^1.12.0",
131
- "storybook": "^8.6.15",
132
- "style-dictionary": "^5.3.0",
131
+ "storybook": "^8.6.17",
132
+ "style-dictionary": "^5.3.2",
133
133
  "ts-morph": "^27.0.2",
134
134
  "tsc-alias": "^1.8.13",
135
135
  "typescript": "^5.8.2",