@sellmate/design-system-vue 1.0.21 → 1.0.22

package/README.md

@@ -19,18 +19,19 @@ yarn add @sellmate/design-system-vue
 ### Vue 3
 
 ```ts
+import '@sellmate/design-system/styles.css';
 import { createApp } from 'vue';
-import { defineCustomElementsDesignSystem } from '@sellmate/design-system-vue/loader';
+import { StencilVuePlugin } from '@sellmate/design-system-vue';
 import App from './App.vue';
 
 const app = createApp(App);
 
-// Define custom elements
-defineCustomElementsDesignSystem();
-
+app.use(StencilVuePlugin);
 app.mount('#app');
 ```
 
+Import `@sellmate/design-system/styles.css` once at app entry so global token CSS variables are available for components like `sd-button`.
+
 ### Vite Configuration
 
 If you are using Vite, you need to configure `vite-plugin-static-copy` to serve the design system assets (icons, lazy-loaded components) correctly.

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import '@sellmate/design-system/styles.css';
 export * from './components';
 export * from './plugin';
 export { default as SdTable } from './SdTable';

package/dist/index.js

@@ -1,3 +1,4 @@
+import '@sellmate/design-system/styles.css';
 export * from './components';
 export * from './plugin';
 export { default as SdTable } from './SdTable';

package/lib/css.d.ts

@@ -0,0 +1 @@
+declare module '@sellmate/design-system/styles.css';

package/lib/index.ts

@@ -1,3 +1,5 @@
+import '@sellmate/design-system/styles.css';
+
 export * from './components';
 export * from './plugin';
 export { default as SdTable } from './SdTable';

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@sellmate/design-system-vue",
- "version": "1.0.21",
+ "version": "1.0.22",
  "description": "Design System - Vue Component Wrappers",
  "keywords": [
   "vue",
@@ -45,7 +45,7 @@
   "vue": "^3.4.38"
  },
  "dependencies": {
-  "@sellmate/design-system": "^1.0.20",
+  "@sellmate/design-system": "^1.0.21",
   "@stencil/vue-output-target": "^0.11.8"
  },
  "peerDependencies": {