feat!: v3 — new components, Popover API, CSS anchor positioning, and major refactors

.gitignore

@@ -4,3 +4,5 @@ dist
 
 *storybook.log
 storybook-static
+
+!.vscode

.storybook/main.ts

@@ -1,17 +1,27 @@
 import type { StorybookConfig } from "@storybook/vue3-vite";
+import remarkGfm from "remark-gfm";
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
 
   addons: [
     "@storybook/addon-links",
     "@chromatic-com/storybook",
-    "@storybook/addon-docs"
+    {
+      name: "@storybook/addon-docs",
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
+        },
+      },
+    },
   ],
 
   framework: {
     name: "@storybook/vue3-vite",
     options: {},
-  }
+  },
 };
 export default config;

.storybook/preview.ts

@@ -1,6 +1,9 @@
 import type { Preview } from "@storybook/vue3-vite";
+import { getCurrentInstance } from 'vue';
 import { config } from '../src/config';
 
+let _storyCount = 0;
+
 const preview: Preview = {
   parameters: {
     controls: {
@@ -12,13 +15,18 @@ const preview: Preview = {
   },
 };
 
-// Reset config before each story to avoid conflicts
 export const decorators = [
-  (story: any) => {
-    // Always reset to default before rendering any story
-    config.iconPath = '/icons';
-    return story();
-  },
+  (_story: any) => ({
+    setup() {
+      // Give each story's Vue app a unique idPrefix so useId() doesn't
+      // collide when multiple stories share the same page (docs view).
+      const app = getCurrentInstance()?.appContext.app;
+      if (app) app.config.idPrefix = `s${_storyCount++}`;
+      // Always reset icon config to default before rendering any story.
+      config.iconPath = 'https://raw.githubusercontent.com/lucide-icons/lucide/refs/heads/main/icons';
+    },
+    template: '<story />',
+  }),
 ];
 
 export default preview;

.stylelintrc

@@ -4,6 +4,8 @@
     "stylelint-config-html/vue"
   ],
   "rules": {
-    "selector-class-pattern": null
+    "selector-class-pattern": null,
+    "selector-pseudo-class-no-unknown": [true, { "ignorePseudoClasses": ["deep"] }],
+    "custom-property-pattern": "^_?[a-z][a-z0-9]*(-[a-z0-9]+)*$"
   }
 }

.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+  "eslint.useFlatConfig": true,
+  "eslint.validate": ["javascript", "typescript", "vue"],
+  "stylelint.validate": ["css", "vue"],
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.stylelint": "explicit"
+  }
+}

README.md

@@ -19,9 +19,7 @@ Install the library
 npm i bocins
 ```
 
-Default icons are copied from `/node_modules/bocins/dist/icons` to `/public/icons/`. Replace them to use your own icons. Existing icons won't be replaced.
-
-To load icons from a custom path (e.g., a CDN), configure the icon path **before** importing components:
+By default, Lucide icons are used. To load icons from a custom path (e.g., a CDN), configure the icon path **before** importing components:
 
 ```ts
 // main.ts
@@ -42,7 +40,7 @@ import 'bocins/dist/index.css';
 @import 'bocins/dist/index.css';
 ```
 
-You can customize the theme using CSS custom properties and extending some base styles
+You can customize the theme using CSS custom properties and extending some base styles. See the full list of available custom properties in the [Theming reference](src/stories/Theming.mdx) or in the [Storybook docs](https://bocins.netlify.app/?path=/docs/configuration-theming--docs).
 
 ```css
 :root {
@@ -51,23 +49,23 @@ You can customize the theme using CSS custom properties and extending some base
 
   color-scheme: light dark;
 
-  --color-bg: light-dark(#f8f8f8, #333);
-  --color-text: light-dark(#333, #efefec);
-  --color-error: #d33;
-  --color-accent: #39f;
-  --btn-color: var(--color-accent);
+  --bg-color: light-dark(#f8f8f8, #333);
+  --text-color: light-dark(#333, #efefec);
+  --error-color: #d33;
+  --accent-color: #39f;
+  --btn-color: var(--accent-color);
 }
 
 body {
-  background-color: var(--color-bg);
-  color: var(--color-text);
+  background-color: var(--bg-color);
+  color: var(--text-color);
 }
 
-.btn[alert] { --color: var(--color-error); }
+.btn[delete] { --color: var(--error-color); }
 
 .switch {
-  --color-on: lightgreen;
-  --color-off: var(--color-error);
+  --on-color: lightgreen;
+  --off-color: var(--error-color);
 }
 ```
 

eslint.config.js

@@ -25,6 +25,7 @@ export default [
       },
     },
     rules: {
+      semi: ['error', 'always'],
       'max-len': ['error', {
         code: 100,
         ignoreTrailingComments: true,
@@ -49,6 +50,7 @@ export default [
       }],
       'vue/singleline-html-element-content-newline': 'off',
       'vue/no-dupe-keys': 'off',
+      'vue/require-default-prop': 'off',
     },
   },
   {