@cupra/ui-kit 2.0.0-canary.245 → 2.0.0-canary.246

package/README.md

@@ -164,7 +164,7 @@ How to consume the package, either through the CDN or your application build.
 | Attribute            | Type    | Required | Description                                                                                                     |
 |----------------------|---------|----------|-------------------------------------------------------------------------------------------------------------------|
 | `theme`              | string  | Yes      | Visual theme identifier (e.g. `cupra-diagonal`)                                                                 |
-| `load-fonts`         | boolean | Yes      | Auto-load DS-UI font files                                                                                       |
+| `load-fonts`         | boolean | Yes      | Auto-load `fonts.css`, the stylesheet that declares the theme's `@font-face` rules                               |
 | `load-styles`        | boolean | Yes      | Auto-load `theme.css`, the stylesheet the `ui-kit` components require                                           |
 | `load-unused-styles` | boolean | No, defaults to `true` | Auto-load `unused-styles.css`, the theme's `--ds-` tokens that `ui-kit` doesn't consume internally, only needed if your own CSS reads raw tokens |
 
@@ -191,16 +191,22 @@ controlling their priority: `theme.css` as a normal, high-priority stylesheet li
 turns into a stylesheet once loaded — or omitted entirely if you don't read raw tokens. If your own CSS
 does read raw tokens, load `unused-styles.css` with the same priority as `theme.css`.
 
+The same applies to fonts: disable `load-fonts` and add `fonts.css` to your `<head>` yourself. This is also
+the setup for server-side rendering, since no JavaScript is needed to load the fonts. See [Fonts](#fonts).
+
 ```html
-<!-- Preload fonts (one line per required font file) -->
+<!-- Preload fonts (one line per critical font file) -->
 <link
     rel="preload"
     as="font"
     type="font/woff2"
-    href="https://ds-assets.cupra.com/fonts/[theme]/[font-file]"
+    href="https://ds-assets.cupra.com/fonts/[theme]/[font-file].woff2"
     crossorigin
 />
 
+<!-- Declare the theme fonts -->
+<link rel="stylesheet" href="https://ds-assets.cupra.com/[version]/styles/[theme]/fonts.css" />
+
 <!-- Load the theme stylesheet normally, always required -->
 <link rel="stylesheet" href="https://ds-assets.cupra.com/[version]/styles/[theme]/theme.css" />
 
@@ -247,6 +253,41 @@ Replace `[theme]` with your theme name (e.g. `cupra-diagonal`).
 
 ---
 
+## Fonts
+
+Each theme publishes `fonts.css` next to `theme.css`. It only declares the theme's `@font-face` rules
+(woff2, `font-display: fallback`), so the browser downloads just the weights a page renders and only
+swaps the typeface within the first ~3 seconds: later, text doesn't shift. `<ds-theme-provider>` adds it while
+`load-fonts` is `true`; with `load-fonts="false"` link it yourself, as in the example above.
+
+**Preload the critical weights.** With `fallback` the browser waits about 100 ms for a font, then shows the
+fallback typeface and swaps to the real one if it arrives within ~3 seconds. After that it keeps the
+fallback for that page view and uses the real one on the next, cached, navigation. While `load-fonts` is `true`, the provider preloads the Regular and Medium weights of the theme
+next to `fonts.css`, while its content waits for `theme.css`. With `load-fonts="false"` or server-side
+rendering, add the preloads to your `<head>` yourself. Adding them there also helps with the provider:
+the download starts before the JavaScript loads, and the provider skips any preload already present.
+
+```html
+<link
+    rel="preload"
+    as="font"
+    type="font/woff2"
+    href="https://ds-assets.cupra.com/fonts/[theme]/[font-file].woff2"
+    crossorigin
+/>
+```
+
+- Preload only the weights rendered above the fold, usually Regular and Medium. Every preload competes
+  with other critical requests.
+- Keep `crossorigin`, even on the same origin. Fonts are fetched in CORS mode, and a preload without it
+  is not reused: the font downloads twice.
+- The `href` must match the URL in `fonts.css` exactly.
+
+| Theme            | `font-family`  | Font files (`[font-file]`)                                                                  |
+|---------|--------|-----------------------------------------------|
+| `seat`           | `seat`         | `SeatBcn-Book` (350), `SeatBcn-Regular` (400), `SeatBcn-Medium` (500), `SeatBcn-Bold` (700), `SeatBcn-Black` (900) |
+| `cupra-diagonal` | `cupra-screen` | `CupraScreen-Light` (300), `CupraScreen-Book` (350), `CupraScreen-Regular` (400), `CupraScreen-Medium` (500) |
+
 ## Icons
 
 Icons must always be consumed through the `<ds-icon>` Web Component — never by loading SVG files directly from the CDN.

package/dist/cjs/components/ds-theme-provider/ds-theme-provider.cjs

@@ -1,4 +1 @@
-const e=require("../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/decorators/provide.cjs"),t=require("./themeContext.cjs");require("../../core/theme.constants.cjs");const n=require("../../utils/PubSub.cjs"),r=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.cjs"),i=require("../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");const a=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.cjs"),o=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.cjs");const s=require("../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.cjs"),c=require("../../decorators/customUiKitElement.cjs"),l=require("../../utils/booleanConverter.cjs"),u=require("../../styles/source/shared/fonts-config.cjs");var d=class extends i.LitElement{constructor(...e){super(...e),this.loadFonts=!0,this.loadStyles=!0,this.loadUnusedStyles=!0,this.cssLoaded=!1,this.loadedFonts=new Set}connectedCallback(){super.connectedCallback(),this.publishDocumentAttributes(),this.observeDocumentAttributes()}disconnectedCallback(){var e;super.disconnectedCallback(),(e=this.documentAttributesObserver)==null||e.disconnect(),this.documentAttributesObserver=void 0}observeDocumentAttributes(){typeof MutationObserver<`u`&&typeof document<`u`&&(this.documentAttributesObserver=new MutationObserver(()=>this.publishDocumentAttributes()),this.documentAttributesObserver.observe(document.documentElement,{attributes:!0,attributeFilter:[`dir`,`lang`]}))}publishDocumentAttributes(){if(typeof document>`u`)return;let{documentElement:e}=document;n.pubSub.publish(`direction`,e.getAttribute(`dir`)===`rtl`?`rtl`:`ltr`),n.pubSub.publish(`lang`,e.getAttribute(`lang`))}updated(e){if(super.updated(e),e.has(`theme`)){var t,r;n.pubSub.publish(`theme`,this.theme),(t=sessionStorage)==null||t.setItem(`@cupra/ui-kit/theme`,this.theme),typeof FontFace<`u`&&(r=document)!=null&&r.fonts&&this.loadThemeFonts(),this.loadThemeStyles().then(()=>{this.cssLoaded=!0,this.dispatchEvent(new CustomEvent(`ui-kit:ready`,{bubbles:!0,composed:!0}))})}}loadThemeFonts(){var e;(e=u.fontsConfig[this.theme])==null||e.fonts.forEach(e=>{this.loadThemeFont(e)})}async loadThemeFont({weight:e,name:t,file:n,unicodeRange:r,display:i}){if(!this.loadFonts)return Promise.resolve();let a=r?`${t}-${e}-${r}`:`${t}-${e}`;if(this.loadedFonts.has(a))return;let o=new FontFace(t,`url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.woff2') format('woff2'),
-            url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.woff') format('woff'),
-            url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.ttf') format('truetype'),
-            url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.otf') format('opentype')`,{style:`normal`,weight:e,display:i??(r?`swap`:`optional`),...r&&{unicodeRange:r}});try{r||await o.load(),document.fonts.add(o),this.loadedFonts.add(a)}catch(n){console.error(`Error loading "${t}" font with "${e}" weight:`,n)}}loadThemeStyles(){let e=`/2.0.0-canary.245`;return this.loadUnusedStyles&&this.applyUnusedStyles(e),this.loadStyles?new Promise((t,n)=>{let r=`https://ds-assets.cupra.com${e}/styles/${this.theme}/theme.css`;if(document.head.querySelector(`link[href="${r}"]`))t();else{let i=`ui-kit-theme-${e}`,a=document.getElementById(i),o=document.createElement(`link`);o.id=i,o.rel=`stylesheet`,o.href=r,o.onload=()=>t(),o.onerror=()=>n(Error(`Failed to load theme CSS: ${r}`)),document.head.appendChild(o),a==null||a.remove()}}):Promise.resolve()}applyUnusedStyles(e){let t=`https://ds-assets.cupra.com${e}/styles/${this.theme}/unused-styles.css`;if(document.head.querySelector(`link[href="${t}"]`))return;let n=`ui-kit-unused-styles-${e}`,r=document.getElementById(n),i=document.createElement(`link`);i.id=n,i.rel=`preload`,i.as=`style`,i.href=t,i.onload=()=>{i.rel=`stylesheet`},document.head.appendChild(i),r==null||r.remove()}render(){return this.cssLoaded?r.html`<slot></slot>`:r.nothing}};s.default([a.property({type:Boolean,converter:l.booleanConverter,attribute:`load-fonts`})],d.prototype,`loadFonts`,void 0),s.default([a.property({type:Boolean,converter:l.booleanConverter,attribute:`load-styles`})],d.prototype,`loadStyles`,void 0),s.default([a.property({type:Boolean,converter:l.booleanConverter,attribute:`load-unused-styles`})],d.prototype,`loadUnusedStyles`,void 0),s.default([e.provide({context:t.themeContext}),a.property({type:String})],d.prototype,`theme`,void 0),s.default([o.state()],d.prototype,`cssLoaded`,void 0),s.default([o.state()],d.prototype,`loadedFonts`,void 0),d=s.default([c.customUiKitElement(`ds-theme-provider`)],d),Object.defineProperty(exports,"DsThemeProvider",{enumerable:!0,get:function(){return d}});
+const e=require("../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/decorators/provide.cjs"),t=require("./themeContext.cjs");require("../../core/theme.constants.cjs");const n=require("../../utils/PubSub.cjs"),r=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.cjs"),i=require("../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");const a=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.cjs"),o=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.cjs");const s=require("../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.cjs"),c=require("../../decorators/customUiKitElement.cjs"),l=require("../../utils/booleanConverter.cjs"),u=require("./themeFonts.cjs");var d=class extends i.LitElement{constructor(...e){super(...e),this.loadFonts=!0,this.loadStyles=!0,this.loadUnusedStyles=!0,this.cssLoaded=!1}connectedCallback(){super.connectedCallback(),this.publishDocumentAttributes(),this.observeDocumentAttributes()}disconnectedCallback(){var e;super.disconnectedCallback(),(e=this.documentAttributesObserver)==null||e.disconnect(),this.documentAttributesObserver=void 0}observeDocumentAttributes(){typeof MutationObserver<`u`&&typeof document<`u`&&(this.documentAttributesObserver=new MutationObserver(()=>this.publishDocumentAttributes()),this.documentAttributesObserver.observe(document.documentElement,{attributes:!0,attributeFilter:[`dir`,`lang`]}))}publishDocumentAttributes(){if(typeof document>`u`)return;let{documentElement:e}=document;n.pubSub.publish(`direction`,e.getAttribute(`dir`)===`rtl`?`rtl`:`ltr`),n.pubSub.publish(`lang`,e.getAttribute(`lang`))}updated(e){if(super.updated(e),e.has(`theme`)){var t;n.pubSub.publish(`theme`,this.theme),(t=sessionStorage)==null||t.setItem(`@cupra/ui-kit/theme`,this.theme),this.loadFonts&&u.addThemeFonts(this.theme),this.loadThemeStyles().then(()=>{this.cssLoaded=!0,this.dispatchEvent(new CustomEvent(`ui-kit:ready`,{bubbles:!0,composed:!0}))})}}loadThemeStyles(){let e=`/2.0.0-canary.246`;return this.loadUnusedStyles&&this.applyUnusedStyles(e),this.loadStyles?new Promise((t,n)=>{let r=`https://ds-assets.cupra.com${e}/styles/${this.theme}/theme.css`;if(document.head.querySelector(`link[href="${r}"]`))t();else{let i=`ui-kit-theme-${e}`,a=document.getElementById(i),o=document.createElement(`link`);o.id=i,o.rel=`stylesheet`,o.href=r,o.onload=()=>t(),o.onerror=()=>n(Error(`Failed to load theme CSS: ${r}`)),document.head.appendChild(o),a==null||a.remove()}}):Promise.resolve()}applyUnusedStyles(e){let t=`https://ds-assets.cupra.com${e}/styles/${this.theme}/unused-styles.css`;if(document.head.querySelector(`link[href="${t}"]`))return;let n=`ui-kit-unused-styles-${e}`,r=document.getElementById(n),i=document.createElement(`link`);i.id=n,i.rel=`preload`,i.as=`style`,i.href=t,i.onload=()=>{i.rel=`stylesheet`},document.head.appendChild(i),r==null||r.remove()}render(){return this.cssLoaded?r.html`<slot></slot>`:r.nothing}};s.default([a.property({type:Boolean,converter:l.booleanConverter,attribute:`load-fonts`})],d.prototype,`loadFonts`,void 0),s.default([a.property({type:Boolean,converter:l.booleanConverter,attribute:`load-styles`})],d.prototype,`loadStyles`,void 0),s.default([a.property({type:Boolean,converter:l.booleanConverter,attribute:`load-unused-styles`})],d.prototype,`loadUnusedStyles`,void 0),s.default([e.provide({context:t.themeContext}),a.property({type:String})],d.prototype,`theme`,void 0),s.default([o.state()],d.prototype,`cssLoaded`,void 0),d=s.default([c.customUiKitElement(`ds-theme-provider`)],d),Object.defineProperty(exports,"DsThemeProvider",{enumerable:!0,get:function(){return d}});

package/dist/cjs/components/ds-theme-provider/themeFonts.cjs

@@ -0,0 +1 @@
+var e={seat:[`SeatBcn-Regular`,`SeatBcn-Medium`],"seat-legacy":[`SeatBcn-Regular`,`SeatBcn-Medium`],"cupra-diagonal":[`CupraScreen-Regular`,`CupraScreen-Medium`],cupra:[`CupraScreen-Regular`,`CupraScreen-Medium`]};function t(t){var n;(n=e[t])==null||n.forEach(e=>r(t,e)),i(t)}function n(e,t){let n=`https://ds-assets.cupra.com/fonts/${e}/${t}.woff2`;return new URL(n,document.baseURI).href}function r(e,t){let r=n(e,t);if(Array.from(document.head.querySelectorAll(`link[rel="preload"]`)).some(e=>e.href===r))return;let i=document.createElement(`link`);i.rel=`preload`,i.as=`font`,i.type=`font/woff2`,i.href=r,i.crossOrigin=`anonymous`,document.head.appendChild(i)}function i(e){let t=`/2.0.0-canary.246`,n=`https://ds-assets.cupra.com${t}/styles/${e}/fonts.css`;if(document.head.querySelector(`link[href="${n}"]`))return;let r=`ui-kit-fonts-${t}`,i=document.getElementById(r),a=document.createElement(`link`);a.id=r,a.rel=`stylesheet`,a.href=n,document.head.appendChild(a),i==null||i.remove()}exports.addThemeFonts=t;

package/dist/cjs/decorators/customUiKitElement.cjs

@@ -1 +1 @@
-require("../utils/version.cjs");function e(e){return function(t){var n,r,i;if(!(t!=null&&t.prototype))throw TypeError(`@customUiKitElement requires a class that extends HTMLElement.`);let a=e;(n=globalThis)!=null&&(n=n.customElements)!=null&&n.get(a)||(r=globalThis)==null||(r=r.customElements)==null||(i=r.define)==null||i.call(r,a,class extends t{connectedCallback(){var n;(n=t.prototype.connectedCallback)==null||n.call(this),this.setAttribute(`data-ui-kit-version`,`2.0.0-canary.245`),this.setAttribute(`data-ui-kit-component-name`,e)}})}}exports.customUiKitElement=e;
+require("../utils/version.cjs");function e(e){return function(t){var n,r,i;if(!(t!=null&&t.prototype))throw TypeError(`@customUiKitElement requires a class that extends HTMLElement.`);let a=e;(n=globalThis)!=null&&(n=n.customElements)!=null&&n.get(a)||(r=globalThis)==null||(r=r.customElements)==null||(i=r.define)==null||i.call(r,a,class extends t{connectedCallback(){var n;(n=t.prototype.connectedCallback)==null||n.call(this),this.setAttribute(`data-ui-kit-version`,`2.0.0-canary.246`),this.setAttribute(`data-ui-kit-component-name`,e)}})}}exports.customUiKitElement=e;

package/dist/cjs/utils/IconsManager.cjs

@@ -1 +1 @@
-const e=require("../core/theme.constants.cjs"),t=require("./PubSub.cjs");var n=class{constructor(){this.icons={},this.handleChangeTheme=e=>{if(this.theme===e)return;this.theme=e;let t=Object.keys(this.icons);this.icons={},t.forEach(e=>this.fetchIcon(e))},this.fetchIcon=async(t,n={})=>{var r;let i=typeof sessionStorage<`u`?(r=sessionStorage)==null?void 0:r.getItem(e.THEME_STORAGE_KEY):null;!this.theme&&i&&(this.theme=i);let a=this.icons[t];if(a)return await a;let o=this.loadIcon(t,n).catch(e=>{throw delete this.icons[t],e});return this.icons[t]=o,o},this.loadIcon=(e,{cache:t=`force-cache`,...n})=>!this.theme||typeof fetch>`u`?Promise.resolve(`<svg class="ds-icon"></svg>`):fetch(`https://ds-assets.cupra.com/icons/${this.theme}/${e}.svg`,{cache:t,...n}).then(e=>e.text()).catch(t=>{if((t==null?void 0:t.name)===`AbortError`)throw t;return console.error(`Failed to fetch icon "${e}":`,t),``}),t.pubSub.subscribe(`theme`,this.handleChangeTheme)}},r=Symbol.for(`@cupra/ui-kit/icons-manager/2.0.0-canary.245`),i=globalThis,a=i[r];a||(a=new n,Object.defineProperty(i,r,{value:a,writable:!1,configurable:!1,enumerable:!1}));var o=a;exports.iconsManager=o;
+const e=require("../core/theme.constants.cjs"),t=require("./PubSub.cjs");var n=class{constructor(){this.icons={},this.handleChangeTheme=e=>{if(this.theme===e)return;this.theme=e;let t=Object.keys(this.icons);this.icons={},t.forEach(e=>this.fetchIcon(e))},this.fetchIcon=async(t,n={})=>{var r;let i=typeof sessionStorage<`u`?(r=sessionStorage)==null?void 0:r.getItem(e.THEME_STORAGE_KEY):null;!this.theme&&i&&(this.theme=i);let a=this.icons[t];if(a)return await a;let o=this.loadIcon(t,n).catch(e=>{throw delete this.icons[t],e});return this.icons[t]=o,o},this.loadIcon=(e,{cache:t=`force-cache`,...n})=>!this.theme||typeof fetch>`u`?Promise.resolve(`<svg class="ds-icon"></svg>`):fetch(`https://ds-assets.cupra.com/icons/${this.theme}/${e}.svg`,{cache:t,...n}).then(e=>e.text()).catch(t=>{if((t==null?void 0:t.name)===`AbortError`)throw t;return console.error(`Failed to fetch icon "${e}":`,t),``}),t.pubSub.subscribe(`theme`,this.handleChangeTheme)}},r=Symbol.for(`@cupra/ui-kit/icons-manager/2.0.0-canary.246`),i=globalThis,a=i[r];a||(a=new n,Object.defineProperty(i,r,{value:a,writable:!1,configurable:!1,enumerable:!1}));var o=a;exports.iconsManager=o;

package/dist/cjs/utils/PubSub.cjs

@@ -1 +1 @@
-var e=class{constructor(){this.subscribers={},this.lastPublishedData={}}subscribe(e,t){return this.subscribers[e]||(this.subscribers[e]=[]),this.subscribers[e].push(t),this.lastPublishedData[e]}unsubscribe(e,t){this.subscribers[e]&&(this.subscribers[e]=this.subscribers[e].filter(e=>e!==t))}publish(e,t){this.lastPublishedData[e]=t,this.subscribers[e]&&this.subscribers[e].forEach(n=>{try{n(t)}catch(t){console.error(`Error in subscriber for event "${e}":`,t)}})}},t=Symbol.for(`@cupra/ui-kit/pubsub/2.0.0-canary.245`),n=globalThis,r=n[t];r||(r=new e,Object.defineProperty(n,t,{value:r,writable:!1,configurable:!1,enumerable:!1}));var i=r;exports.PubSub=e,exports.pubSub=i;
+var e=class{constructor(){this.subscribers={},this.lastPublishedData={}}subscribe(e,t){return this.subscribers[e]||(this.subscribers[e]=[]),this.subscribers[e].push(t),this.lastPublishedData[e]}unsubscribe(e,t){this.subscribers[e]&&(this.subscribers[e]=this.subscribers[e].filter(e=>e!==t))}publish(e,t){this.lastPublishedData[e]=t,this.subscribers[e]&&this.subscribers[e].forEach(n=>{try{n(t)}catch(t){console.error(`Error in subscriber for event "${e}":`,t)}})}},t=Symbol.for(`@cupra/ui-kit/pubsub/2.0.0-canary.246`),n=globalThis,r=n[t];r||(r=new e,Object.defineProperty(n,t,{value:r,writable:!1,configurable:!1,enumerable:!1}));var i=r;exports.PubSub=e,exports.pubSub=i;

package/dist/cjs/utils/version.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=`2.0.0-canary.245`,t=`--v${e.replaceAll(`.`,`-`)}`;exports.VERSION=e,exports.VERSION_TAG_SUFFIX=t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=`2.0.0-canary.246`,t=`--v${e.replaceAll(`.`,`-`)}`;exports.VERSION=e,exports.VERSION_TAG_SUFFIX=t;

package/dist/esm/components/ds-theme-provider/ds-theme-provider.js

@@ -11,11 +11,11 @@ import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.js";
 import c from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
 import { customUiKitElement as l } from "../../decorators/customUiKitElement.js";
 import { booleanConverter as u } from "../../utils/booleanConverter.js";
-import { fontsConfig as d } from "../../styles/source/shared/fonts-config.js";
+import { addThemeFonts as d } from "./themeFonts.js";
 //#region src/components/ds-theme-provider/ds-theme-provider.ts
 var f = class extends a {
 	constructor(...e) {
-		super(...e), this.loadFonts = !0, this.loadStyles = !0, this.loadUnusedStyles = !0, this.cssLoaded = !1, this.loadedFonts = /* @__PURE__ */ new Set();
+		super(...e), this.loadFonts = !0, this.loadStyles = !0, this.loadUnusedStyles = !0, this.cssLoaded = !1;
 	}
 	connectedCallback() {
 		super.connectedCallback(), this.publishDocumentAttributes(), this.observeDocumentAttributes();
@@ -37,8 +37,8 @@ var f = class extends a {
 	}
 	updated(e) {
 		if (super.updated(e), e.has("theme")) {
-			var t, r;
-			n.publish("theme", this.theme), (t = sessionStorage) == null || t.setItem("@cupra/ui-kit/theme", this.theme), typeof FontFace < "u" && (r = document) != null && r.fonts && this.loadThemeFonts(), this.loadThemeStyles().then(() => {
+			var t;
+			n.publish("theme", this.theme), (t = sessionStorage) == null || t.setItem("@cupra/ui-kit/theme", this.theme), this.loadFonts && d(this.theme), this.loadThemeStyles().then(() => {
 				this.cssLoaded = !0, this.dispatchEvent(new CustomEvent("ui-kit:ready", {
 					bubbles: !0,
 					composed: !0
@@ -46,33 +46,8 @@ var f = class extends a {
 			});
 		}
 	}
-	loadThemeFonts() {
-		var e;
-		(e = d[this.theme]) == null || e.fonts.forEach((e) => {
-			this.loadThemeFont(e);
-		});
-	}
-	async loadThemeFont({ weight: e, name: t, file: n, unicodeRange: r, display: i }) {
-		if (!this.loadFonts) return Promise.resolve();
-		let a = r ? `${t}-${e}-${r}` : `${t}-${e}`;
-		if (this.loadedFonts.has(a)) return;
-		let o = new FontFace(t, `url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.woff2') format('woff2'),
-            url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.woff') format('woff'),
-            url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.ttf') format('truetype'),
-            url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.otf') format('opentype')`, {
-			style: "normal",
-			weight: e,
-			display: i ?? (r ? "swap" : "optional"),
-			...r && { unicodeRange: r }
-		});
-		try {
-			r || await o.load(), document.fonts.add(o), this.loadedFonts.add(a);
-		} catch (n) {
-			console.error(`Error loading "${t}" font with "${e}" weight:`, n);
-		}
-	}
 	loadThemeStyles() {
-		let e = "/2.0.0-canary.245";
+		let e = "/2.0.0-canary.246";
 		return this.loadUnusedStyles && this.applyUnusedStyles(e), this.loadStyles ? new Promise((t, n) => {
 			let r = `https://ds-assets.cupra.com${e}/styles/${this.theme}/theme.css`;
 			if (document.head.querySelector(`link[href="${r}"]`)) t();
@@ -106,6 +81,6 @@ c([o({
 	type: Boolean,
 	converter: u,
 	attribute: "load-unused-styles"
-})], f.prototype, "loadUnusedStyles", void 0), c([e({ context: t }), o({ type: String })], f.prototype, "theme", void 0), c([s()], f.prototype, "cssLoaded", void 0), c([s()], f.prototype, "loadedFonts", void 0), f = c([l("ds-theme-provider")], f);
+})], f.prototype, "loadUnusedStyles", void 0), c([e({ context: t }), o({ type: String })], f.prototype, "theme", void 0), c([s()], f.prototype, "cssLoaded", void 0), f = c([l("ds-theme-provider")], f);
 //#endregion
 export { f as DsThemeProvider };

package/dist/esm/components/ds-theme-provider/themeFonts.js

@@ -0,0 +1,29 @@
+//#region src/components/ds-theme-provider/themeFonts.ts
+var e = {
+	seat: ["SeatBcn-Regular", "SeatBcn-Medium"],
+	"seat-legacy": ["SeatBcn-Regular", "SeatBcn-Medium"],
+	"cupra-diagonal": ["CupraScreen-Regular", "CupraScreen-Medium"],
+	cupra: ["CupraScreen-Regular", "CupraScreen-Medium"]
+};
+function t(t) {
+	var n;
+	(n = e[t]) == null || n.forEach((e) => r(t, e)), i(t);
+}
+function n(e, t) {
+	let n = `https://ds-assets.cupra.com/fonts/${e}/${t}.woff2`;
+	return new URL(n, document.baseURI).href;
+}
+function r(e, t) {
+	let r = n(e, t);
+	if (Array.from(document.head.querySelectorAll("link[rel=\"preload\"]")).some((e) => e.href === r)) return;
+	let i = document.createElement("link");
+	i.rel = "preload", i.as = "font", i.type = "font/woff2", i.href = r, i.crossOrigin = "anonymous", document.head.appendChild(i);
+}
+function i(e) {
+	let t = "/2.0.0-canary.246", n = `https://ds-assets.cupra.com${t}/styles/${e}/fonts.css`;
+	if (document.head.querySelector(`link[href="${n}"]`)) return;
+	let r = `ui-kit-fonts-${t}`, i = document.getElementById(r), a = document.createElement("link");
+	a.id = r, a.rel = "stylesheet", a.href = n, document.head.appendChild(a), i == null || i.remove();
+}
+//#endregion
+export { t as addThemeFonts };

package/dist/esm/decorators/customUiKitElement.js

@@ -8,7 +8,7 @@ function e(e) {
 		(n = globalThis) != null && (n = n.customElements) != null && n.get(a) || (r = globalThis) == null || (r = r.customElements) == null || (i = r.define) == null || i.call(r, a, class extends t {
 			connectedCallback() {
 				var n;
-				(n = t.prototype.connectedCallback) == null || n.call(this), this.setAttribute("data-ui-kit-version", "2.0.0-canary.245"), this.setAttribute("data-ui-kit-component-name", e);
+				(n = t.prototype.connectedCallback) == null || n.call(this), this.setAttribute("data-ui-kit-version", "2.0.0-canary.246"), this.setAttribute("data-ui-kit-component-name", e);
 			}
 		});
 	};

package/dist/esm/utils/IconsManager.js

@@ -26,7 +26,7 @@ var n = class {
 			return console.error(`Failed to fetch icon "${e}":`, t), "";
 		}), t.subscribe("theme", this.handleChangeTheme);
 	}
-}, r = Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.245"), i = globalThis, a = i[r];
+}, r = Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.246"), i = globalThis, a = i[r];
 a || (a = new n(), Object.defineProperty(i, r, {
 	value: a,
 	writable: !1,

package/dist/esm/utils/PubSub.js

@@ -18,7 +18,7 @@ var e = class {
 			}
 		});
 	}
-}, t = Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.245"), n = globalThis, r = n[t];
+}, t = Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.246"), n = globalThis, r = n[t];
 r || (r = new e(), Object.defineProperty(n, t, {
 	value: r,
 	writable: !1,

package/dist/esm/utils/version.js

@@ -1,4 +1,4 @@
 //#region src/utils/version.ts
-var e = "2.0.0-canary.245", t = `--v${e.replaceAll(".", "-")}`;
+var e = "2.0.0-canary.246", t = `--v${e.replaceAll(".", "-")}`;
 //#endregion
 export { e as VERSION, t as VERSION_TAG_SUFFIX };

package/dist/types/components/ds-theme-provider/ds-theme-provider.d.ts

@@ -6,15 +6,12 @@ export declare class DsThemeProvider extends LitElement {
     loadUnusedStyles: DsThemeProviderAttrs['load-unused-styles'];
     theme: DsThemeProviderAttrs['theme'];
     private cssLoaded;
-    private loadedFonts;
     private documentAttributesObserver?;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private observeDocumentAttributes;
     private publishDocumentAttributes;
     protected updated(changedProperties: PropertyValues): void;
-    private loadThemeFonts;
-    private loadThemeFont;
     private loadThemeStyles;
     private applyUnusedStyles;
     render(): import("lit").TemplateResult<1> | typeof nothing;

package/dist/types/components/ds-theme-provider/themeFonts.d.ts

@@ -0,0 +1 @@
+export declare function addThemeFonts(theme: string): void;

package/dist-react/cjs/components/ds-theme-provider/ds-theme-provider.cjs

@@ -1,4 +1 @@
-const e=require("../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/decorators/provide.cjs"),t=require("./themeContext.cjs");require("../../core/theme.constants.cjs");const n=require("../../utils/PubSub.cjs"),r=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.cjs"),i=require("../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");const a=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.cjs"),o=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.cjs");const s=require("../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.cjs"),c=require("../../decorators/customUiKitElement.cjs"),l=require("../../utils/booleanConverter.cjs"),u=require("../../styles/source/shared/fonts-config.cjs");var d=class extends i.LitElement{constructor(...e){super(...e),this.loadFonts=!0,this.loadStyles=!0,this.loadUnusedStyles=!0,this.cssLoaded=!1,this.loadedFonts=new Set}connectedCallback(){super.connectedCallback(),this.publishDocumentAttributes(),this.observeDocumentAttributes()}disconnectedCallback(){var e;super.disconnectedCallback(),(e=this.documentAttributesObserver)==null||e.disconnect(),this.documentAttributesObserver=void 0}observeDocumentAttributes(){typeof MutationObserver<`u`&&typeof document<`u`&&(this.documentAttributesObserver=new MutationObserver(()=>this.publishDocumentAttributes()),this.documentAttributesObserver.observe(document.documentElement,{attributes:!0,attributeFilter:[`dir`,`lang`]}))}publishDocumentAttributes(){if(typeof document>`u`)return;let{documentElement:e}=document;n.pubSub.publish(`direction`,e.getAttribute(`dir`)===`rtl`?`rtl`:`ltr`),n.pubSub.publish(`lang`,e.getAttribute(`lang`))}updated(e){if(super.updated(e),e.has(`theme`)){var t,r;n.pubSub.publish(`theme`,this.theme),(t=sessionStorage)==null||t.setItem(`@cupra/ui-kit/theme`,this.theme),typeof FontFace<`u`&&(r=document)!=null&&r.fonts&&this.loadThemeFonts(),this.loadThemeStyles().then(()=>{this.cssLoaded=!0,this.dispatchEvent(new CustomEvent(`ui-kit:ready`,{bubbles:!0,composed:!0}))})}}loadThemeFonts(){var e;(e=u.fontsConfig[this.theme])==null||e.fonts.forEach(e=>{this.loadThemeFont(e)})}async loadThemeFont({weight:e,name:t,file:n,unicodeRange:r,display:i}){if(!this.loadFonts)return Promise.resolve();let a=r?`${t}-${e}-${r}`:`${t}-${e}`;if(this.loadedFonts.has(a))return;let o=new FontFace(t,`url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.woff2') format('woff2'),
-            url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.woff') format('woff'),
-            url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.ttf') format('truetype'),
-            url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.otf') format('opentype')`,{style:`normal`,weight:e,display:i??(r?`swap`:`optional`),...r&&{unicodeRange:r}});try{r||await o.load(),document.fonts.add(o),this.loadedFonts.add(a)}catch(n){console.error(`Error loading "${t}" font with "${e}" weight:`,n)}}loadThemeStyles(){let e=`/2.0.0-canary.245`;return this.loadUnusedStyles&&this.applyUnusedStyles(e),this.loadStyles?new Promise((t,n)=>{let r=`https://ds-assets.cupra.com${e}/styles/${this.theme}/theme.css`;if(document.head.querySelector(`link[href="${r}"]`))t();else{let i=`ui-kit-theme-${e}`,a=document.getElementById(i),o=document.createElement(`link`);o.id=i,o.rel=`stylesheet`,o.href=r,o.onload=()=>t(),o.onerror=()=>n(Error(`Failed to load theme CSS: ${r}`)),document.head.appendChild(o),a==null||a.remove()}}):Promise.resolve()}applyUnusedStyles(e){let t=`https://ds-assets.cupra.com${e}/styles/${this.theme}/unused-styles.css`;if(document.head.querySelector(`link[href="${t}"]`))return;let n=`ui-kit-unused-styles-${e}`,r=document.getElementById(n),i=document.createElement(`link`);i.id=n,i.rel=`preload`,i.as=`style`,i.href=t,i.onload=()=>{i.rel=`stylesheet`},document.head.appendChild(i),r==null||r.remove()}render(){return this.cssLoaded?r.html`<slot></slot>`:r.nothing}};s.default([a.property({type:Boolean,converter:l.booleanConverter,attribute:`load-fonts`})],d.prototype,`loadFonts`,void 0),s.default([a.property({type:Boolean,converter:l.booleanConverter,attribute:`load-styles`})],d.prototype,`loadStyles`,void 0),s.default([a.property({type:Boolean,converter:l.booleanConverter,attribute:`load-unused-styles`})],d.prototype,`loadUnusedStyles`,void 0),s.default([e.provide({context:t.themeContext}),a.property({type:String})],d.prototype,`theme`,void 0),s.default([o.state()],d.prototype,`cssLoaded`,void 0),s.default([o.state()],d.prototype,`loadedFonts`,void 0),d=s.default([c.customUiKitElement(`ds-theme-provider`)],d),Object.defineProperty(exports,"DsThemeProvider",{enumerable:!0,get:function(){return d}});
+const e=require("../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/decorators/provide.cjs"),t=require("./themeContext.cjs");require("../../core/theme.constants.cjs");const n=require("../../utils/PubSub.cjs"),r=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.cjs"),i=require("../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");const a=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.cjs"),o=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.cjs");const s=require("../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.cjs"),c=require("../../decorators/customUiKitElement.cjs"),l=require("../../utils/booleanConverter.cjs"),u=require("./themeFonts.cjs");var d=class extends i.LitElement{constructor(...e){super(...e),this.loadFonts=!0,this.loadStyles=!0,this.loadUnusedStyles=!0,this.cssLoaded=!1}connectedCallback(){super.connectedCallback(),this.publishDocumentAttributes(),this.observeDocumentAttributes()}disconnectedCallback(){var e;super.disconnectedCallback(),(e=this.documentAttributesObserver)==null||e.disconnect(),this.documentAttributesObserver=void 0}observeDocumentAttributes(){typeof MutationObserver<`u`&&typeof document<`u`&&(this.documentAttributesObserver=new MutationObserver(()=>this.publishDocumentAttributes()),this.documentAttributesObserver.observe(document.documentElement,{attributes:!0,attributeFilter:[`dir`,`lang`]}))}publishDocumentAttributes(){if(typeof document>`u`)return;let{documentElement:e}=document;n.pubSub.publish(`direction`,e.getAttribute(`dir`)===`rtl`?`rtl`:`ltr`),n.pubSub.publish(`lang`,e.getAttribute(`lang`))}updated(e){if(super.updated(e),e.has(`theme`)){var t;n.pubSub.publish(`theme`,this.theme),(t=sessionStorage)==null||t.setItem(`@cupra/ui-kit/theme`,this.theme),this.loadFonts&&u.addThemeFonts(this.theme),this.loadThemeStyles().then(()=>{this.cssLoaded=!0,this.dispatchEvent(new CustomEvent(`ui-kit:ready`,{bubbles:!0,composed:!0}))})}}loadThemeStyles(){let e=`/2.0.0-canary.246`;return this.loadUnusedStyles&&this.applyUnusedStyles(e),this.loadStyles?new Promise((t,n)=>{let r=`https://ds-assets.cupra.com${e}/styles/${this.theme}/theme.css`;if(document.head.querySelector(`link[href="${r}"]`))t();else{let i=`ui-kit-theme-${e}`,a=document.getElementById(i),o=document.createElement(`link`);o.id=i,o.rel=`stylesheet`,o.href=r,o.onload=()=>t(),o.onerror=()=>n(Error(`Failed to load theme CSS: ${r}`)),document.head.appendChild(o),a==null||a.remove()}}):Promise.resolve()}applyUnusedStyles(e){let t=`https://ds-assets.cupra.com${e}/styles/${this.theme}/unused-styles.css`;if(document.head.querySelector(`link[href="${t}"]`))return;let n=`ui-kit-unused-styles-${e}`,r=document.getElementById(n),i=document.createElement(`link`);i.id=n,i.rel=`preload`,i.as=`style`,i.href=t,i.onload=()=>{i.rel=`stylesheet`},document.head.appendChild(i),r==null||r.remove()}render(){return this.cssLoaded?r.html`<slot></slot>`:r.nothing}};s.default([a.property({type:Boolean,converter:l.booleanConverter,attribute:`load-fonts`})],d.prototype,`loadFonts`,void 0),s.default([a.property({type:Boolean,converter:l.booleanConverter,attribute:`load-styles`})],d.prototype,`loadStyles`,void 0),s.default([a.property({type:Boolean,converter:l.booleanConverter,attribute:`load-unused-styles`})],d.prototype,`loadUnusedStyles`,void 0),s.default([e.provide({context:t.themeContext}),a.property({type:String})],d.prototype,`theme`,void 0),s.default([o.state()],d.prototype,`cssLoaded`,void 0),d=s.default([c.customUiKitElement(`ds-theme-provider`)],d),Object.defineProperty(exports,"DsThemeProvider",{enumerable:!0,get:function(){return d}});

package/dist-react/cjs/components/ds-theme-provider/themeFonts.cjs

@@ -0,0 +1 @@
+var e={seat:[`SeatBcn-Regular`,`SeatBcn-Medium`],"seat-legacy":[`SeatBcn-Regular`,`SeatBcn-Medium`],"cupra-diagonal":[`CupraScreen-Regular`,`CupraScreen-Medium`],cupra:[`CupraScreen-Regular`,`CupraScreen-Medium`]};function t(t){var n;(n=e[t])==null||n.forEach(e=>r(t,e)),i(t)}function n(e,t){let n=`https://ds-assets.cupra.com/fonts/${e}/${t}.woff2`;return new URL(n,document.baseURI).href}function r(e,t){let r=n(e,t);if(Array.from(document.head.querySelectorAll(`link[rel="preload"]`)).some(e=>e.href===r))return;let i=document.createElement(`link`);i.rel=`preload`,i.as=`font`,i.type=`font/woff2`,i.href=r,i.crossOrigin=`anonymous`,document.head.appendChild(i)}function i(e){let t=`/2.0.0-canary.246`,n=`https://ds-assets.cupra.com${t}/styles/${e}/fonts.css`;if(document.head.querySelector(`link[href="${n}"]`))return;let r=`ui-kit-fonts-${t}`,i=document.getElementById(r),a=document.createElement(`link`);a.id=r,a.rel=`stylesheet`,a.href=n,document.head.appendChild(a),i==null||i.remove()}exports.addThemeFonts=t;

package/dist-react/cjs/decorators/customUiKitElement.cjs

@@ -1 +1 @@
-const e=require("../utils/version.cjs");function t(t){return function(n){var r,i,a;if(!(n!=null&&n.prototype))throw TypeError(`@customUiKitElement requires a class that extends HTMLElement.`);let o=`${t}${e.VERSION_TAG_SUFFIX}`;(r=globalThis)!=null&&(r=r.customElements)!=null&&r.get(o)||(i=globalThis)==null||(i=i.customElements)==null||(a=i.define)==null||a.call(i,o,class extends n{connectedCallback(){var e;(e=n.prototype.connectedCallback)==null||e.call(this),this.setAttribute(`data-ui-kit-version`,`2.0.0-canary.245`),this.setAttribute(`data-ui-kit-component-name`,t)}})}}exports.customUiKitElement=t;
+const e=require("../utils/version.cjs");function t(t){return function(n){var r,i,a;if(!(n!=null&&n.prototype))throw TypeError(`@customUiKitElement requires a class that extends HTMLElement.`);let o=`${t}${e.VERSION_TAG_SUFFIX}`;(r=globalThis)!=null&&(r=r.customElements)!=null&&r.get(o)||(i=globalThis)==null||(i=i.customElements)==null||(a=i.define)==null||a.call(i,o,class extends n{connectedCallback(){var e;(e=n.prototype.connectedCallback)==null||e.call(this),this.setAttribute(`data-ui-kit-version`,`2.0.0-canary.246`),this.setAttribute(`data-ui-kit-component-name`,t)}})}}exports.customUiKitElement=t;

package/dist-react/cjs/utils/IconsManager.cjs

@@ -1 +1 @@
-const e=require("../core/theme.constants.cjs"),t=require("./PubSub.cjs");var n=class{constructor(){this.icons={},this.handleChangeTheme=e=>{if(this.theme===e)return;this.theme=e;let t=Object.keys(this.icons);this.icons={},t.forEach(e=>this.fetchIcon(e))},this.fetchIcon=async(t,n={})=>{var r;let i=typeof sessionStorage<`u`?(r=sessionStorage)==null?void 0:r.getItem(e.THEME_STORAGE_KEY):null;!this.theme&&i&&(this.theme=i);let a=this.icons[t];if(a)return await a;let o=this.loadIcon(t,n).catch(e=>{throw delete this.icons[t],e});return this.icons[t]=o,o},this.loadIcon=(e,{cache:t=`force-cache`,...n})=>!this.theme||typeof fetch>`u`?Promise.resolve(`<svg class="ds-icon"></svg>`):fetch(`https://ds-assets.cupra.com/icons/${this.theme}/${e}.svg`,{cache:t,...n}).then(e=>e.text()).catch(t=>{if((t==null?void 0:t.name)===`AbortError`)throw t;return console.error(`Failed to fetch icon "${e}":`,t),``}),t.pubSub.subscribe(`theme`,this.handleChangeTheme)}},r=Symbol.for(`@cupra/ui-kit/icons-manager/2.0.0-canary.245`),i=globalThis,a=i[r];a||(a=new n,Object.defineProperty(i,r,{value:a,writable:!1,configurable:!1,enumerable:!1}));var o=a;exports.iconsManager=o;
+const e=require("../core/theme.constants.cjs"),t=require("./PubSub.cjs");var n=class{constructor(){this.icons={},this.handleChangeTheme=e=>{if(this.theme===e)return;this.theme=e;let t=Object.keys(this.icons);this.icons={},t.forEach(e=>this.fetchIcon(e))},this.fetchIcon=async(t,n={})=>{var r;let i=typeof sessionStorage<`u`?(r=sessionStorage)==null?void 0:r.getItem(e.THEME_STORAGE_KEY):null;!this.theme&&i&&(this.theme=i);let a=this.icons[t];if(a)return await a;let o=this.loadIcon(t,n).catch(e=>{throw delete this.icons[t],e});return this.icons[t]=o,o},this.loadIcon=(e,{cache:t=`force-cache`,...n})=>!this.theme||typeof fetch>`u`?Promise.resolve(`<svg class="ds-icon"></svg>`):fetch(`https://ds-assets.cupra.com/icons/${this.theme}/${e}.svg`,{cache:t,...n}).then(e=>e.text()).catch(t=>{if((t==null?void 0:t.name)===`AbortError`)throw t;return console.error(`Failed to fetch icon "${e}":`,t),``}),t.pubSub.subscribe(`theme`,this.handleChangeTheme)}},r=Symbol.for(`@cupra/ui-kit/icons-manager/2.0.0-canary.246`),i=globalThis,a=i[r];a||(a=new n,Object.defineProperty(i,r,{value:a,writable:!1,configurable:!1,enumerable:!1}));var o=a;exports.iconsManager=o;

package/dist-react/cjs/utils/PubSub.cjs

@@ -1 +1 @@
-var e=class{constructor(){this.subscribers={},this.lastPublishedData={}}subscribe(e,t){return this.subscribers[e]||(this.subscribers[e]=[]),this.subscribers[e].push(t),this.lastPublishedData[e]}unsubscribe(e,t){this.subscribers[e]&&(this.subscribers[e]=this.subscribers[e].filter(e=>e!==t))}publish(e,t){this.lastPublishedData[e]=t,this.subscribers[e]&&this.subscribers[e].forEach(n=>{try{n(t)}catch(t){console.error(`Error in subscriber for event "${e}":`,t)}})}},t=Symbol.for(`@cupra/ui-kit/pubsub/2.0.0-canary.245`),n=globalThis,r=n[t];r||(r=new e,Object.defineProperty(n,t,{value:r,writable:!1,configurable:!1,enumerable:!1}));var i=r;exports.PubSub=e,exports.pubSub=i;
+var e=class{constructor(){this.subscribers={},this.lastPublishedData={}}subscribe(e,t){return this.subscribers[e]||(this.subscribers[e]=[]),this.subscribers[e].push(t),this.lastPublishedData[e]}unsubscribe(e,t){this.subscribers[e]&&(this.subscribers[e]=this.subscribers[e].filter(e=>e!==t))}publish(e,t){this.lastPublishedData[e]=t,this.subscribers[e]&&this.subscribers[e].forEach(n=>{try{n(t)}catch(t){console.error(`Error in subscriber for event "${e}":`,t)}})}},t=Symbol.for(`@cupra/ui-kit/pubsub/2.0.0-canary.246`),n=globalThis,r=n[t];r||(r=new e,Object.defineProperty(n,t,{value:r,writable:!1,configurable:!1,enumerable:!1}));var i=r;exports.PubSub=e,exports.pubSub=i;

package/dist-react/cjs/utils/version.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=`2.0.0-canary.245`,t=`--v${e.replaceAll(`.`,`-`)}`;exports.VERSION=e,exports.VERSION_TAG_SUFFIX=t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=`2.0.0-canary.246`,t=`--v${e.replaceAll(`.`,`-`)}`;exports.VERSION=e,exports.VERSION_TAG_SUFFIX=t;

package/dist-react/esm/components/ds-theme-provider/ds-theme-provider.js

@@ -11,11 +11,11 @@ import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.js";
 import c from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
 import { customUiKitElement as l } from "../../decorators/customUiKitElement.js";
 import { booleanConverter as u } from "../../utils/booleanConverter.js";
-import { fontsConfig as d } from "../../styles/source/shared/fonts-config.js";
+import { addThemeFonts as d } from "./themeFonts.js";
 //#region src/components/ds-theme-provider/ds-theme-provider.ts
 var f = class extends a {
 	constructor(...e) {
-		super(...e), this.loadFonts = !0, this.loadStyles = !0, this.loadUnusedStyles = !0, this.cssLoaded = !1, this.loadedFonts = /* @__PURE__ */ new Set();
+		super(...e), this.loadFonts = !0, this.loadStyles = !0, this.loadUnusedStyles = !0, this.cssLoaded = !1;
 	}
 	connectedCallback() {
 		super.connectedCallback(), this.publishDocumentAttributes(), this.observeDocumentAttributes();
@@ -37,8 +37,8 @@ var f = class extends a {
 	}
 	updated(e) {
 		if (super.updated(e), e.has("theme")) {
-			var t, r;
-			n.publish("theme", this.theme), (t = sessionStorage) == null || t.setItem("@cupra/ui-kit/theme", this.theme), typeof FontFace < "u" && (r = document) != null && r.fonts && this.loadThemeFonts(), this.loadThemeStyles().then(() => {
+			var t;
+			n.publish("theme", this.theme), (t = sessionStorage) == null || t.setItem("@cupra/ui-kit/theme", this.theme), this.loadFonts && d(this.theme), this.loadThemeStyles().then(() => {
 				this.cssLoaded = !0, this.dispatchEvent(new CustomEvent("ui-kit:ready", {
 					bubbles: !0,
 					composed: !0
@@ -46,33 +46,8 @@ var f = class extends a {
 			});
 		}
 	}
-	loadThemeFonts() {
-		var e;
-		(e = d[this.theme]) == null || e.fonts.forEach((e) => {
-			this.loadThemeFont(e);
-		});
-	}
-	async loadThemeFont({ weight: e, name: t, file: n, unicodeRange: r, display: i }) {
-		if (!this.loadFonts) return Promise.resolve();
-		let a = r ? `${t}-${e}-${r}` : `${t}-${e}`;
-		if (this.loadedFonts.has(a)) return;
-		let o = new FontFace(t, `url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.woff2') format('woff2'),
-            url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.woff') format('woff'),
-            url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.ttf') format('truetype'),
-            url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.otf') format('opentype')`, {
-			style: "normal",
-			weight: e,
-			display: i ?? (r ? "swap" : "optional"),
-			...r && { unicodeRange: r }
-		});
-		try {
-			r || await o.load(), document.fonts.add(o), this.loadedFonts.add(a);
-		} catch (n) {
-			console.error(`Error loading "${t}" font with "${e}" weight:`, n);
-		}
-	}
 	loadThemeStyles() {
-		let e = "/2.0.0-canary.245";
+		let e = "/2.0.0-canary.246";
 		return this.loadUnusedStyles && this.applyUnusedStyles(e), this.loadStyles ? new Promise((t, n) => {
 			let r = `https://ds-assets.cupra.com${e}/styles/${this.theme}/theme.css`;
 			if (document.head.querySelector(`link[href="${r}"]`)) t();
@@ -106,6 +81,6 @@ c([o({
 	type: Boolean,
 	converter: u,
 	attribute: "load-unused-styles"
-})], f.prototype, "loadUnusedStyles", void 0), c([e({ context: t }), o({ type: String })], f.prototype, "theme", void 0), c([s()], f.prototype, "cssLoaded", void 0), c([s()], f.prototype, "loadedFonts", void 0), f = c([l("ds-theme-provider")], f);
+})], f.prototype, "loadUnusedStyles", void 0), c([e({ context: t }), o({ type: String })], f.prototype, "theme", void 0), c([s()], f.prototype, "cssLoaded", void 0), f = c([l("ds-theme-provider")], f);
 //#endregion
 export { f as DsThemeProvider };

package/dist-react/esm/components/ds-theme-provider/themeFonts.js

@@ -0,0 +1,29 @@
+//#region src/components/ds-theme-provider/themeFonts.ts
+var e = {
+	seat: ["SeatBcn-Regular", "SeatBcn-Medium"],
+	"seat-legacy": ["SeatBcn-Regular", "SeatBcn-Medium"],
+	"cupra-diagonal": ["CupraScreen-Regular", "CupraScreen-Medium"],
+	cupra: ["CupraScreen-Regular", "CupraScreen-Medium"]
+};
+function t(t) {
+	var n;
+	(n = e[t]) == null || n.forEach((e) => r(t, e)), i(t);
+}
+function n(e, t) {
+	let n = `https://ds-assets.cupra.com/fonts/${e}/${t}.woff2`;
+	return new URL(n, document.baseURI).href;
+}
+function r(e, t) {
+	let r = n(e, t);
+	if (Array.from(document.head.querySelectorAll("link[rel=\"preload\"]")).some((e) => e.href === r)) return;
+	let i = document.createElement("link");
+	i.rel = "preload", i.as = "font", i.type = "font/woff2", i.href = r, i.crossOrigin = "anonymous", document.head.appendChild(i);
+}
+function i(e) {
+	let t = "/2.0.0-canary.246", n = `https://ds-assets.cupra.com${t}/styles/${e}/fonts.css`;
+	if (document.head.querySelector(`link[href="${n}"]`)) return;
+	let r = `ui-kit-fonts-${t}`, i = document.getElementById(r), a = document.createElement("link");
+	a.id = r, a.rel = "stylesheet", a.href = n, document.head.appendChild(a), i == null || i.remove();
+}
+//#endregion
+export { t as addThemeFonts };

package/dist-react/esm/decorators/customUiKitElement.js

@@ -8,7 +8,7 @@ function t(t) {
 		(r = globalThis) != null && (r = r.customElements) != null && r.get(o) || (i = globalThis) == null || (i = i.customElements) == null || (a = i.define) == null || a.call(i, o, class extends n {
 			connectedCallback() {
 				var e;
-				(e = n.prototype.connectedCallback) == null || e.call(this), this.setAttribute("data-ui-kit-version", "2.0.0-canary.245"), this.setAttribute("data-ui-kit-component-name", t);
+				(e = n.prototype.connectedCallback) == null || e.call(this), this.setAttribute("data-ui-kit-version", "2.0.0-canary.246"), this.setAttribute("data-ui-kit-component-name", t);
 			}
 		});
 	};

package/dist-react/esm/utils/IconsManager.js

@@ -26,7 +26,7 @@ var n = class {
 			return console.error(`Failed to fetch icon "${e}":`, t), "";
 		}), t.subscribe("theme", this.handleChangeTheme);
 	}
-}, r = Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.245"), i = globalThis, a = i[r];
+}, r = Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.246"), i = globalThis, a = i[r];
 a || (a = new n(), Object.defineProperty(i, r, {
 	value: a,
 	writable: !1,

package/dist-react/esm/utils/PubSub.js

@@ -18,7 +18,7 @@ var e = class {
 			}
 		});
 	}
-}, t = Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.245"), n = globalThis, r = n[t];
+}, t = Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.246"), n = globalThis, r = n[t];
 r || (r = new e(), Object.defineProperty(n, t, {
 	value: r,
 	writable: !1,

package/dist-react/esm/utils/version.js

@@ -1,4 +1,4 @@
 //#region src/utils/version.ts
-var e = "2.0.0-canary.245", t = `--v${e.replaceAll(".", "-")}`;
+var e = "2.0.0-canary.246", t = `--v${e.replaceAll(".", "-")}`;
 //#endregion
 export { e as VERSION, t as VERSION_TAG_SUFFIX };

package/dist-react/types/components/ds-theme-provider/ds-theme-provider.d.ts

@@ -6,15 +6,12 @@ export declare class DsThemeProvider extends LitElement {
     loadUnusedStyles: DsThemeProviderAttrs['load-unused-styles'];
     theme: DsThemeProviderAttrs['theme'];
     private cssLoaded;
-    private loadedFonts;
     private documentAttributesObserver?;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private observeDocumentAttributes;
     private publishDocumentAttributes;
     protected updated(changedProperties: PropertyValues): void;
-    private loadThemeFonts;
-    private loadThemeFont;
     private loadThemeStyles;
     private applyUnusedStyles;
     render(): import("lit").TemplateResult<1> | typeof nothing;

package/dist-react/types/components/ds-theme-provider/themeFonts.d.ts

@@ -0,0 +1 @@
+export declare function addThemeFonts(theme: string): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cupra/ui-kit",
-  "version": "2.0.0-canary.245",
+  "version": "2.0.0-canary.246",
   "description": "Web components library",
   "author": "SEAT S.A.",
   "license": "SEAT S.A. Library EULA 1.0",
@@ -144,7 +144,7 @@
     "clean-dist:react": "rm -rf ./dist-react",
     "build-ts": "tsc -p tsconfig.prod.json && tsc-alias -p tsconfig.prod.json",
     "build-ts:react": "tsc -p tsconfig.react.json && tsc-alias -p tsconfig.react.json",
-    "build-assets": "pnpm build:tokens && postcss src/styles/source/themes/**/theme.css --dir .tmp/styles --base src/styles/source/themes && node scripts/split-theme-tokens/split-theme-tokens.js && node scripts/build-icons-zip/build-icons-zip.js",
+    "build-assets": "pnpm build:tokens && postcss src/styles/source/themes/**/theme.css --dir .tmp/styles --base src/styles/source/themes && node scripts/split-theme-tokens/split-theme-tokens.js && postcss src/styles/source/themes/**/fonts.css --dir public/assets/styles --base src/styles/source/themes && node scripts/build-icons-zip/build-icons-zip.js",
     "build-breakpoints": "mkdir -p dist/styles && cp src/styles/source/shared/breakpoints.css dist/styles/breakpoints.css",
     "build": "pnpm build-assets && pnpm clean-dist && pnpm build-ts && BUILD_FORMAT=esm vite build --emptyOutDir false && BUILD_FORMAT=cjs vite build --emptyOutDir false && pnpm build-breakpoints",
     "build-cdn": "pnpm build-assets && pnpm clean-dist-cdn && vite build --config vite.cdn.config.js --mode production",

package/dist/cjs/styles/source/shared/fonts-config.cjs

@@ -1 +0,0 @@
-var e={cupra:{fonts:[{name:`cupra-screen`,weight:`300`,file:`CupraScreen-Light`},{name:`cupra-screen`,weight:`350`,file:`CupraScreen-Book`},{name:`cupra-screen`,weight:`400`,file:`CupraScreen-Regular`},{name:`cupra-screen`,weight:`500`,file:`CupraScreen-Medium`}]},"cupra-diagonal":{fonts:[{name:`cupra-screen`,weight:`300`,file:`CupraScreen-Light`},{name:`cupra-screen`,weight:`350`,file:`CupraScreen-Book`},{name:`cupra-screen`,weight:`400`,file:`CupraScreen-Regular`},{name:`cupra-screen`,weight:`500`,file:`CupraScreen-Medium`}]},seat:{fonts:[{name:`seat`,weight:`350`,file:`SeatBcn-Book`},{name:`seat`,weight:`400`,file:`SeatBcn-Regular`},{name:`seat`,weight:`500`,file:`SeatBcn-Medium`},{name:`seat`,weight:`700`,file:`SeatBcn-Bold`},{name:`seat`,weight:`900`,file:`SeatBcn-Black`}]},"seat-legacy":{fonts:[{name:`seat`,weight:`400`,file:`SeatBcn-Regular`},{name:`seat`,weight:`500`,file:`SeatBcn-Medium`},{name:`seat`,weight:`700`,file:`SeatBcn-Bold`}]}};exports.fontsConfig=e;

package/dist/esm/styles/source/shared/fonts-config.js

@@ -1,93 +0,0 @@
-//#region src/styles/source/shared/fonts-config.ts
-var e = {
-	cupra: { fonts: [
-		{
-			name: "cupra-screen",
-			weight: "300",
-			file: "CupraScreen-Light"
-		},
-		{
-			name: "cupra-screen",
-			weight: "350",
-			file: "CupraScreen-Book"
-		},
-		{
-			name: "cupra-screen",
-			weight: "400",
-			file: "CupraScreen-Regular"
-		},
-		{
-			name: "cupra-screen",
-			weight: "500",
-			file: "CupraScreen-Medium"
-		}
-	] },
-	"cupra-diagonal": { fonts: [
-		{
-			name: "cupra-screen",
-			weight: "300",
-			file: "CupraScreen-Light"
-		},
-		{
-			name: "cupra-screen",
-			weight: "350",
-			file: "CupraScreen-Book"
-		},
-		{
-			name: "cupra-screen",
-			weight: "400",
-			file: "CupraScreen-Regular"
-		},
-		{
-			name: "cupra-screen",
-			weight: "500",
-			file: "CupraScreen-Medium"
-		}
-	] },
-	seat: { fonts: [
-		{
-			name: "seat",
-			weight: "350",
-			file: "SeatBcn-Book"
-		},
-		{
-			name: "seat",
-			weight: "400",
-			file: "SeatBcn-Regular"
-		},
-		{
-			name: "seat",
-			weight: "500",
-			file: "SeatBcn-Medium"
-		},
-		{
-			name: "seat",
-			weight: "700",
-			file: "SeatBcn-Bold"
-		},
-		{
-			name: "seat",
-			weight: "900",
-			file: "SeatBcn-Black"
-		}
-	] },
-	"seat-legacy": { fonts: [
-		{
-			name: "seat",
-			weight: "400",
-			file: "SeatBcn-Regular"
-		},
-		{
-			name: "seat",
-			weight: "500",
-			file: "SeatBcn-Medium"
-		},
-		{
-			name: "seat",
-			weight: "700",
-			file: "SeatBcn-Bold"
-		}
-	] }
-};
-//#endregion
-export { e as fontsConfig };

package/dist/types/styles/source/shared/fonts-config.d.ts

@@ -1,15 +0,0 @@
-type FontDisplay = 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
-export interface FontConfig {
-    name: string;
-    weight: string;
-    file: string;
-    unicodeRange?: string;
-    display?: FontDisplay;
-}
-interface FontsConfig {
-    [key: string]: {
-        fonts: Array<FontConfig>;
-    };
-}
-export declare const fontsConfig: FontsConfig;
-export {};

package/dist-react/cjs/styles/source/shared/fonts-config.cjs

@@ -1 +0,0 @@
-var e={cupra:{fonts:[{name:`cupra-screen`,weight:`300`,file:`CupraScreen-Light`},{name:`cupra-screen`,weight:`350`,file:`CupraScreen-Book`},{name:`cupra-screen`,weight:`400`,file:`CupraScreen-Regular`},{name:`cupra-screen`,weight:`500`,file:`CupraScreen-Medium`}]},"cupra-diagonal":{fonts:[{name:`cupra-screen`,weight:`300`,file:`CupraScreen-Light`},{name:`cupra-screen`,weight:`350`,file:`CupraScreen-Book`},{name:`cupra-screen`,weight:`400`,file:`CupraScreen-Regular`},{name:`cupra-screen`,weight:`500`,file:`CupraScreen-Medium`}]},seat:{fonts:[{name:`seat`,weight:`350`,file:`SeatBcn-Book`},{name:`seat`,weight:`400`,file:`SeatBcn-Regular`},{name:`seat`,weight:`500`,file:`SeatBcn-Medium`},{name:`seat`,weight:`700`,file:`SeatBcn-Bold`},{name:`seat`,weight:`900`,file:`SeatBcn-Black`}]},"seat-legacy":{fonts:[{name:`seat`,weight:`400`,file:`SeatBcn-Regular`},{name:`seat`,weight:`500`,file:`SeatBcn-Medium`},{name:`seat`,weight:`700`,file:`SeatBcn-Bold`}]}};exports.fontsConfig=e;

package/dist-react/esm/styles/source/shared/fonts-config.js

@@ -1,93 +0,0 @@
-//#region src/styles/source/shared/fonts-config.ts
-var e = {
-	cupra: { fonts: [
-		{
-			name: "cupra-screen",
-			weight: "300",
-			file: "CupraScreen-Light"
-		},
-		{
-			name: "cupra-screen",
-			weight: "350",
-			file: "CupraScreen-Book"
-		},
-		{
-			name: "cupra-screen",
-			weight: "400",
-			file: "CupraScreen-Regular"
-		},
-		{
-			name: "cupra-screen",
-			weight: "500",
-			file: "CupraScreen-Medium"
-		}
-	] },
-	"cupra-diagonal": { fonts: [
-		{
-			name: "cupra-screen",
-			weight: "300",
-			file: "CupraScreen-Light"
-		},
-		{
-			name: "cupra-screen",
-			weight: "350",
-			file: "CupraScreen-Book"
-		},
-		{
-			name: "cupra-screen",
-			weight: "400",
-			file: "CupraScreen-Regular"
-		},
-		{
-			name: "cupra-screen",
-			weight: "500",
-			file: "CupraScreen-Medium"
-		}
-	] },
-	seat: { fonts: [
-		{
-			name: "seat",
-			weight: "350",
-			file: "SeatBcn-Book"
-		},
-		{
-			name: "seat",
-			weight: "400",
-			file: "SeatBcn-Regular"
-		},
-		{
-			name: "seat",
-			weight: "500",
-			file: "SeatBcn-Medium"
-		},
-		{
-			name: "seat",
-			weight: "700",
-			file: "SeatBcn-Bold"
-		},
-		{
-			name: "seat",
-			weight: "900",
-			file: "SeatBcn-Black"
-		}
-	] },
-	"seat-legacy": { fonts: [
-		{
-			name: "seat",
-			weight: "400",
-			file: "SeatBcn-Regular"
-		},
-		{
-			name: "seat",
-			weight: "500",
-			file: "SeatBcn-Medium"
-		},
-		{
-			name: "seat",
-			weight: "700",
-			file: "SeatBcn-Bold"
-		}
-	] }
-};
-//#endregion
-export { e as fontsConfig };

package/dist-react/types/styles/source/shared/fonts-config.d.ts

@@ -1,15 +0,0 @@
-type FontDisplay = 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
-export interface FontConfig {
-    name: string;
-    weight: string;
-    file: string;
-    unicodeRange?: string;
-    display?: FontDisplay;
-}
-interface FontsConfig {
-    [key: string]: {
-        fonts: Array<FontConfig>;
-    };
-}
-export declare const fontsConfig: FontsConfig;
-export {};