@cupra/ui-kit 1.0.0-canary.6 → 1.0.0-canary.8

package/README.md

@@ -115,30 +115,29 @@ How to consume the package, either through the CDN or your application build.
 <script src="https://ds-assets.cupra.com/[version]/dist/index.iife.js"></script>
 ```
 
-2) Load the theme CSS (link preferred for performance):
+2) Wrap your UI with the theme provider.  
 
-```html
-<link rel="stylesheet" href="https://ds-assets.cupra.com/[version]/styles/[theme]/theme.css" />
-```
-
-3) Wrap your UI with the theme provider.  
-   `load-fonts` and `load-styles` control whether the provider loads assets automatically.
+`load-fonts` and `load-styles` control whether the provider loads assets automatically.
+Replace `[theme]` with your theme name (e.g. `cupra-diagonal`).
 
 ```html
-<ds-theme-provider theme="cupra" load-fonts="true" load-styles="true">
+<ds-theme-provider theme="[theme]" load-fonts="true" load-styles="true">
     <ds-button variant="destructive" icon-name="filters-background">Hello</ds-button>
     <ds-icon icon-name="filters-background"></ds-icon>
 </ds-theme-provider>
 ```
 
 **Performance note:**  
-For optimal behaviour, manually preload the CSS (and fonts if required) and set the provider to not load them:
+For optimal behaviour, manually preload the fonts and load the theme CSS via a stylesheet link.
 
 ```html
-<link rel="preload" as="style" href="https://ds-assets.cupra.com/[version]/styles/cupra/theme.css" />
-<link rel="stylesheet" href="https://ds-assets.cupra.com/[version]/styles/cupra/theme.css" />
+<!-- Preload fonts (one line per required font file) -->
+<link rel="preload" as="font" type="font/woff2" href="https://ds-assets.cupra.com/fonts/[theme]/[font-file]" crossorigin />
+
+<!-- Load the theme stylesheet normally -->
+<link rel="stylesheet" href="https://ds-assets.cupra.com/[version]/styles/[theme]/theme.css" />
 
-<ds-theme-provider theme="cupra" load-fonts="false" load-styles="false">
+<ds-theme-provider theme="[theme]" load-fonts="false" load-styles="false">
     <!-- components -->
 </ds-theme-provider>
 ```
@@ -152,11 +151,18 @@ Install the package:
 npm install @cupra/ui-kit
 ```
 
-Then include the theme provider as in the CDN example.  
-CSS may be loaded manually (recommended) or automatically via the provider:
+Import the package once so the custom elements are registered:
+
+```js
+import '@cupra/ui-kit';
+```
+
+Then include the theme provider:
+
+Replace `[theme]` with your theme name (e.g. `cupra-diagonal`).
 
 ```html
-<ds-theme-provider theme="cupra" load-fonts="true" load-styles="true">
+<ds-theme-provider theme="[theme]" load-fonts="true" load-styles="true">
     <ds-button variant="primary">Button</ds-button>
 </ds-theme-provider>
 ```

package/dist/index.js

@@ -191,7 +191,7 @@ class se {
       theme: s
     }) => {
       if (!s || !e) return;
-      const i = `https://ds-assets.cupra.com/1.0.0-canary.6/styles/${s}/components/${e}.css`, o = this.getCachedStyleSheetPromise({ url: i });
+      const i = `https://ds-assets.cupra.com/1.0.0-canary.8/styles/${s}/components/${e}.css`, o = this.getCachedStyleSheetPromise({ url: i });
       if (o) return o;
       const n = this.fetchStyle({ url: i }).then((h) => (h || this.stylePromises.delete(i), h));
       return this.stylePromises.set(i, n), this.stylePromises.get(i);
@@ -1226,7 +1226,7 @@ let Ts = class extends Fs {
 Ts.directiveName = "unsafeHTML", Ts.resultType = 1;
 const os = js(Ts);
 function k(t, ...e) {
-  const r = String.raw({ raw: t }, ...e).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-6"), i = os(r);
+  const r = String.raw({ raw: t }, ...e).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-8"), i = os(r);
   return l`${i}`;
 }
 /**
@@ -3978,7 +3978,7 @@ Ae = zo([
   v("ds-loader-bar", { skipTagAsComponentName: !0 })
 ], Ae);
 function Jt(t, ...e) {
-  const r = String.raw({ raw: t }, ...e).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-6"), i = vi(r);
+  const r = String.raw({ raw: t }, ...e).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-8"), i = vi(r);
   return u`${i}`;
 }
 const Ao = Jt`
@@ -7944,7 +7944,7 @@ let Wt = class extends pt {
   }
   loadThemeStyles() {
     return this.loadStyles ? new Promise((t, e) => {
-      const s = "/1.0.0-canary.6", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
+      const s = "/1.0.0-canary.8", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
       if (document.head.querySelector(`link[href="${r}"]`)) t();
       else {
         const i = `ui-kit-theme-${s}`, o = document.getElementById(i), n = document.createElement("link");

package/dist-react/index.js

@@ -191,7 +191,7 @@ class se {
       theme: s
     }) => {
       if (!s || !e) return;
-      const i = `https://ds-assets.cupra.com/1.0.0-canary.6/styles/${s}/components/${e}.css`, o = this.getCachedStyleSheetPromise({ url: i });
+      const i = `https://ds-assets.cupra.com/1.0.0-canary.8/styles/${s}/components/${e}.css`, o = this.getCachedStyleSheetPromise({ url: i });
       if (o) return o;
       const n = this.fetchStyle({ url: i }).then((h) => (h || this.stylePromises.delete(i), h));
       return this.stylePromises.set(i, n), this.stylePromises.get(i);
@@ -1150,7 +1150,7 @@ let Ts = class extends Fs {
 Ts.directiveName = "unsafeHTML", Ts.resultType = 1;
 const os = js(Ts);
 function C(t, ...e) {
-  const r = String.raw({ raw: t }, ...e).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-6"), i = os(r);
+  const r = String.raw({ raw: t }, ...e).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-8"), i = os(r);
   return l`${i}`;
 }
 /**
@@ -3902,7 +3902,7 @@ Ae = Po([
   v("ds-loader-bar", { skipTagAsComponentName: !0 })
 ], Ae);
 function Jt(t, ...e) {
-  const r = String.raw({ raw: t }, ...e).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-6"), i = vi(r);
+  const r = String.raw({ raw: t }, ...e).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-8"), i = vi(r);
   return u`${i}`;
 }
 const Io = Jt`
@@ -7868,7 +7868,7 @@ let Wt = class extends pt {
   }
   loadThemeStyles() {
     return this.loadStyles ? new Promise((t, e) => {
-      const s = "/1.0.0-canary.6", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
+      const s = "/1.0.0-canary.8", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
       if (document.head.querySelector(`link[href="${r}"]`)) t();
       else {
         const i = `ui-kit-theme-${s}`, o = document.getElementById(i), n = document.createElement("link");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cupra/ui-kit",
-  "version": "1.0.0-canary.6",
+  "version": "1.0.0-canary.8",
   "description": "Web components library",
   "author": "SEAT S.A.",
   "license": "SEAT S.A. Library EULA 1.0",
@@ -20,10 +20,19 @@
   "type": "module",
   "types": "./dist/index.d.ts",
   "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./react": {
+      "types": "./dist-react/index.d.ts",
+      "import": "./dist-react/index.js",
+      "default": "./dist-react/index.js"
+    },
     "./*": "./dist/*.js",
     "./types/*": "./dist/components/*/*.types.d.ts",
     "./utils/*": "./dist/utils/*.js",
-    "./react": "./dist-react/index.js",
     "./react/types/*": "./dist-react/components/*/*.types.d.ts",
     "./react/utils/*": "./dist-react/utils/*.js"
   },