@mozaic-ds/web-components 1.0.0 → 1.1.0

package/dist/documentation/WebComponents/Introduction.mdx

@@ -31,7 +31,6 @@ Once installed, you can directly use the web components in your HTML or any fron
 
 Simply call the component as follows:
 
-
 ```html
 <m-button appearance="accent">This is an accent button</m-button>
 ```

package/dist/documentation/WebComponents/usingIcons.mdx

@@ -1,4 +1,4 @@
-import { Meta, Source} from '@storybook/addon-docs/blocks';
+import { Meta, Source } from '@storybook/addon-docs/blocks';
 
 <Meta title="Getting Started/Web Components/ Icons Usage (Web Components)" />
 
@@ -62,8 +62,7 @@ The naming convention for Mozaic icon web components follows a clear pattern:
 Each icon component accepts standard SVG attributes:
 
 ```svelte
-<more-64 width="16" height="16" fill="currentColor" aria-label="Close"
-></more-64>
+<more-64 width="16" height="16" fill="currentColor" aria-label="Close"></more-64>
 ```
 
 - width / height: Control size

package/dist/documentation/WebComponents/usingPresets.mdx

@@ -67,7 +67,7 @@ Each brand not only has specific styles but also uses a dedicated font.
 
 To apply the correct font in your project:
 
-```scss 
+```scss
 // LeroyMerlin
 @use '@mozaic-ds/styles/tools/t.font' as *;
 @include import-font-lm();
@@ -77,7 +77,7 @@ body {
 }
 ```
 
-```scss 
+```scss
 //ADEO
 @use '@mozaic-ds/styles/tools/t.font' as *;
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
@@ -87,7 +87,7 @@ body {
 }
 ```
 
-```scss 
+```scss
 //M-Brand
 @use '@mozaic-ds/styles/tools/t.font' as *;
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
@@ -97,7 +97,6 @@ body {
 }
 ```
 
-
 ---
 
 #### 📝 Specific case: **Leroy Merlin font**

package/dist/main.d.ts

@@ -28,6 +28,7 @@ import Select from './components/select/Select.svelte';
 import StatusBadge from './components/statusbadge/StatusBadge.svelte';
 import StatusDot from './components/statusdot/StatusDot.svelte';
 import StatusNotification from './components/statusnotification/StatusNotification.svelte';
+import SegmentedControl from './components/segmentedcontrol/SegmentedControl.svelte';
 import Tab from './components/tab/Tab.svelte';
 import Tabs from './components/tabs/Tabs.svelte';
 import Tag from './components/tags/Tag.svelte';
@@ -41,5 +42,5 @@ import Toaster from './components/toaster/Toaster.svelte';
 import Toggle from './components/toggle/Toggle.svelte';
 import ToggleGroup from './components/togglegroup/ToggleGroup.svelte';
 import Tooltip from './components/tooltip/Tooltip.svelte';
-export { Avatar, Breadcrumb, Button, Callout, Checkbox, CheckboxGroup, CircularProgressbar, Datepicker, Drawer, Field, Flag, IconButton, LinearProgressbarBuffer, LinearProgressbarPercentage, Link, Loader, LoadingOverlay, Modal, NumberBadge, Overlay, Pagination, PasswordInput, Pincode, QuantitySelector, Radio, RadioGroup, Select, StatusBadge, StatusDot, StatusNotification, Tab, Tabs, Tag, TagContextualised, TagInteractive, TagRemovable, TagSelectable, Textarea, Textinput, Toaster, Toggle, ToggleGroup, Tooltip, };
+export { Avatar, Breadcrumb, Button, Callout, Checkbox, CheckboxGroup, CircularProgressbar, Datepicker, Drawer, Field, Flag, IconButton, LinearProgressbarBuffer, LinearProgressbarPercentage, Link, Loader, LoadingOverlay, Modal, NumberBadge, Overlay, Pagination, PasswordInput, Pincode, QuantitySelector, Radio, RadioGroup, Select, StatusBadge, StatusDot, StatusNotification, SegmentedControl, Tab, Tabs, Tag, TagContextualised, TagInteractive, TagRemovable, TagSelectable, Textarea, Textinput, Toaster, Toggle, ToggleGroup, Tooltip, };
 //# sourceMappingURL=main.d.ts.map

package/dist/main.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,UAAU,MAAM,2CAA2C,CAAC;AACnE,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,OAAO,MAAM,qCAAqC,CAAC;AAC1D,OAAO,QAAQ,MAAM,uCAAuC,CAAC;AAC7D,OAAO,aAAa,MAAM,iDAAiD,CAAC;AAC5E,OAAO,mBAAmB,MAAM,6DAA6D,CAAC;AAC9F,OAAO,UAAU,MAAM,2CAA2C,CAAC;AACnE,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,KAAK,MAAM,iCAAiC,CAAC;AACpD,OAAO,IAAI,MAAM,+BAA+B,CAAC;AACjD,OAAO,UAAU,MAAM,2CAA2C,CAAC;AACnE,OAAO,uBAAuB,MAAM,qEAAqE,CAAC;AAC1G,OAAO,2BAA2B,MAAM,6EAA6E,CAAC;AACtH,OAAO,IAAI,MAAM,+BAA+B,CAAC;AACjD,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,cAAc,MAAM,mDAAmD,CAAC;AAC/E,OAAO,KAAK,MAAM,iCAAiC,CAAC;AACpD,OAAO,WAAW,MAAM,6CAA6C,CAAC;AACtE,OAAO,OAAO,MAAM,qCAAqC,CAAC;AAC1D,OAAO,UAAU,MAAM,2CAA2C,CAAC;AACnE,OAAO,aAAa,MAAM,iDAAiD,CAAC;AAC5E,OAAO,OAAO,MAAM,qCAAqC,CAAC;AAC1D,OAAO,gBAAgB,MAAM,uDAAuD,CAAC;AACrF,OAAO,KAAK,MAAM,iCAAiC,CAAC;AACpD,OAAO,UAAU,MAAM,2CAA2C,CAAC;AACnE,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,WAAW,MAAM,6CAA6C,CAAC;AACtE,OAAO,SAAS,MAAM,yCAAyC,CAAC;AAChE,OAAO,kBAAkB,MAAM,2DAA2D,CAAC;AAC3F,OAAO,GAAG,MAAM,6BAA6B,CAAC;AAC9C,OAAO,IAAI,MAAM,+BAA+B,CAAC;AACjD,OAAO,GAAG,MAAM,8BAA8B,CAAC;AAC/C,OAAO,iBAAiB,MAAM,4CAA4C,CAAC;AAC3E,OAAO,cAAc,MAAM,yCAAyC,CAAC;AACrE,OAAO,YAAY,MAAM,uCAAuC,CAAC;AACjE,OAAO,aAAa,MAAM,wCAAwC,CAAC;AACnE,OAAO,QAAQ,MAAM,uCAAuC,CAAC;AAC7D,OAAO,SAAS,MAAM,yCAAyC,CAAC;AAChE,OAAO,OAAO,MAAM,qCAAqC,CAAC;AAC1D,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,WAAW,MAAM,6CAA6C,CAAC;AACtE,OAAO,OAAO,MAAM,qCAAqC,CAAC;AAE1D,OAAO,EACL,MAAM,EACN,UAAU,EACV,MAAM,EACN,OAAO,EACP,QAAQ,EACR,aAAa,EACb,mBAAmB,EACnB,UAAU,EACV,MAAM,EACN,KAAK,EACL,IAAI,EACJ,UAAU,EACV,uBAAuB,EACvB,2BAA2B,EAC3B,IAAI,EACJ,MAAM,EACN,cAAc,EACd,KAAK,EACL,WAAW,EACX,OAAO,EACP,UAAU,EACV,aAAa,EACb,OAAO,EACP,gBAAgB,EAChB,KAAK,EACL,UAAU,EACV,MAAM,EACN,WAAW,EACX,SAAS,EACT,kBAAkB,EAClB,GAAG,EACH,IAAI,EACJ,GAAG,EACH,iBAAiB,EACjB,cAAc,EACd,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,SAAS,EACT,OAAO,EACP,MAAM,EACN,WAAW,EACX,OAAO,GACR,CAAC"}
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,UAAU,MAAM,2CAA2C,CAAC;AACnE,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,OAAO,MAAM,qCAAqC,CAAC;AAC1D,OAAO,QAAQ,MAAM,uCAAuC,CAAC;AAC7D,OAAO,aAAa,MAAM,iDAAiD,CAAC;AAC5E,OAAO,mBAAmB,MAAM,6DAA6D,CAAC;AAC9F,OAAO,UAAU,MAAM,2CAA2C,CAAC;AACnE,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,KAAK,MAAM,iCAAiC,CAAC;AACpD,OAAO,IAAI,MAAM,+BAA+B,CAAC;AACjD,OAAO,UAAU,MAAM,2CAA2C,CAAC;AACnE,OAAO,uBAAuB,MAAM,qEAAqE,CAAC;AAC1G,OAAO,2BAA2B,MAAM,6EAA6E,CAAC;AACtH,OAAO,IAAI,MAAM,+BAA+B,CAAC;AACjD,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,cAAc,MAAM,mDAAmD,CAAC;AAC/E,OAAO,KAAK,MAAM,iCAAiC,CAAC;AACpD,OAAO,WAAW,MAAM,6CAA6C,CAAC;AACtE,OAAO,OAAO,MAAM,qCAAqC,CAAC;AAC1D,OAAO,UAAU,MAAM,2CAA2C,CAAC;AACnE,OAAO,aAAa,MAAM,iDAAiD,CAAC;AAC5E,OAAO,OAAO,MAAM,qCAAqC,CAAC;AAC1D,OAAO,gBAAgB,MAAM,uDAAuD,CAAC;AACrF,OAAO,KAAK,MAAM,iCAAiC,CAAC;AACpD,OAAO,UAAU,MAAM,2CAA2C,CAAC;AACnE,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,WAAW,MAAM,6CAA6C,CAAC;AACtE,OAAO,SAAS,MAAM,yCAAyC,CAAC;AAChE,OAAO,kBAAkB,MAAM,2DAA2D,CAAC;AAC3F,OAAO,gBAAgB,MAAM,uDAAuD,CAAC;AACrF,OAAO,GAAG,MAAM,6BAA6B,CAAC;AAC9C,OAAO,IAAI,MAAM,+BAA+B,CAAC;AACjD,OAAO,GAAG,MAAM,8BAA8B,CAAC;AAC/C,OAAO,iBAAiB,MAAM,4CAA4C,CAAC;AAC3E,OAAO,cAAc,MAAM,yCAAyC,CAAC;AACrE,OAAO,YAAY,MAAM,uCAAuC,CAAC;AACjE,OAAO,aAAa,MAAM,wCAAwC,CAAC;AACnE,OAAO,QAAQ,MAAM,uCAAuC,CAAC;AAC7D,OAAO,SAAS,MAAM,yCAAyC,CAAC;AAChE,OAAO,OAAO,MAAM,qCAAqC,CAAC;AAC1D,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,WAAW,MAAM,6CAA6C,CAAC;AACtE,OAAO,OAAO,MAAM,qCAAqC,CAAC;AAE1D,OAAO,EACL,MAAM,EACN,UAAU,EACV,MAAM,EACN,OAAO,EACP,QAAQ,EACR,aAAa,EACb,mBAAmB,EACnB,UAAU,EACV,MAAM,EACN,KAAK,EACL,IAAI,EACJ,UAAU,EACV,uBAAuB,EACvB,2BAA2B,EAC3B,IAAI,EACJ,MAAM,EACN,cAAc,EACd,KAAK,EACL,WAAW,EACX,OAAO,EACP,UAAU,EACV,aAAa,EACb,OAAO,EACP,gBAAgB,EAChB,KAAK,EACL,UAAU,EACV,MAAM,EACN,WAAW,EACX,SAAS,EACT,kBAAkB,EAClB,gBAAgB,EAChB,GAAG,EACH,IAAI,EACJ,GAAG,EACH,iBAAiB,EACjB,cAAc,EACd,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,SAAS,EACT,OAAO,EACP,MAAM,EACN,WAAW,EACX,OAAO,GACR,CAAC"}

package/dist/main.js

@@ -28,6 +28,7 @@ import Select from './components/select/Select.svelte';
 import StatusBadge from './components/statusbadge/StatusBadge.svelte';
 import StatusDot from './components/statusdot/StatusDot.svelte';
 import StatusNotification from './components/statusnotification/StatusNotification.svelte';
+import SegmentedControl from './components/segmentedcontrol/SegmentedControl.svelte';
 import Tab from './components/tab/Tab.svelte';
 import Tabs from './components/tabs/Tabs.svelte';
 import Tag from './components/tags/Tag.svelte';
@@ -41,4 +42,4 @@ import Toaster from './components/toaster/Toaster.svelte';
 import Toggle from './components/toggle/Toggle.svelte';
 import ToggleGroup from './components/togglegroup/ToggleGroup.svelte';
 import Tooltip from './components/tooltip/Tooltip.svelte';
-export { Avatar, Breadcrumb, Button, Callout, Checkbox, CheckboxGroup, CircularProgressbar, Datepicker, Drawer, Field, Flag, IconButton, LinearProgressbarBuffer, LinearProgressbarPercentage, Link, Loader, LoadingOverlay, Modal, NumberBadge, Overlay, Pagination, PasswordInput, Pincode, QuantitySelector, Radio, RadioGroup, Select, StatusBadge, StatusDot, StatusNotification, Tab, Tabs, Tag, TagContextualised, TagInteractive, TagRemovable, TagSelectable, Textarea, Textinput, Toaster, Toggle, ToggleGroup, Tooltip, };
+export { Avatar, Breadcrumb, Button, Callout, Checkbox, CheckboxGroup, CircularProgressbar, Datepicker, Drawer, Field, Flag, IconButton, LinearProgressbarBuffer, LinearProgressbarPercentage, Link, Loader, LoadingOverlay, Modal, NumberBadge, Overlay, Pagination, PasswordInput, Pincode, QuantitySelector, Radio, RadioGroup, Select, StatusBadge, StatusDot, StatusNotification, SegmentedControl, Tab, Tabs, Tag, TagContextualised, TagInteractive, TagRemovable, TagSelectable, Textarea, Textinput, Toaster, Toggle, ToggleGroup, Tooltip, };

package/dist/utils/custom-element-forward-events.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"custom-element-forward-events.d.ts","sourceRoot":"","sources":["../../src/utils/custom-element-forward-events.ts"],"names":[],"mappings":"AAEA,wBAAgB,0BAA0B,CACxC,wBAAwB,EAAE,UAAU,WAAW,GAC9C,UAAU,WAAW,GAAG,SAAS,CAanC"}
+{"version":3,"file":"custom-element-forward-events.d.ts","sourceRoot":"","sources":["../../src/utils/custom-element-forward-events.ts"],"names":[],"mappings":"AAEA,wBAAgB,0BAA0B,CACxC,wBAAwB,EAAE,UAAU,WAAW,GAC9C,UAAU,WAAW,GAAG,SAAS,CAUnC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/web-components",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Web component Mozaic DS implementation",
   "license": "MIT",
   "engines": {
@@ -26,10 +26,16 @@
     "./package.json": "./dist/package.json"
   },
   "scripts": {
+    "dev": "vite dev",
     "build": "vite build",
     "watch": "vite build --watch",
     "build:svelte": "svelte-package --input src/",
-    "test": "vitest run",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
+    "format": "prettier --write .",
+    "lint": "prettier --check . && eslint .",
+    "test:unit": "vitest",
+    "test": "npm run test:unit -- --run",
     "clean": "rm -rf dist/",
     "start": "npm-run-all --parallel watch storybook",
     "build:storybook": "npm run build && storybook build --stats-json",
@@ -37,12 +43,7 @@
     "build:lib": "npm run clean && npm run build:svelte && npm run build",
     "storybook": "storybook dev -p 6006",
     "docs": "node generate-docs.js",
-    "check": "svelte-check --tsconfig ./tsconfig.json --compiler-warnings 'css-unused-selector:ignore'",
-    "eslint": "eslint src",
     "lint-staged": "lint-staged",
-    "lint": "prettier-eslint --write $PWD/'src/components/**/*.{js,ts,svelte}'",
-    "lint-check": "prettier-eslint --list-different $PWD/'src/**/*.{js,ts,svelte}'",
-    "lint:ci": "prettier-eslint $PWD/'src/**/*.{js,ts,svelte}",
     "start:wc": "npx serve dist",
     "chromatic": "chromatic --project-token=CHROMATIC_PROJECT_TOKEN",
     "release": "release-it",
@@ -55,8 +56,8 @@
   },
   "dependencies": {
     "@mozaic-ds/icons-svelte": "1.1.0",
-    "@mozaic-ds/styles": "2.0.0-beta.5",
-    "@mozaic-ds/tokens": "2.0.0-beta.2",
+    "@mozaic-ds/styles": "^2.0.1",
+    "@mozaic-ds/tokens": "^2.0.1",
     "@mozaic-ds/web-fonts": "1.65.0",
     "svelte": "^5.38.0"
   },
@@ -64,11 +65,13 @@
     "@chromatic-com/storybook": "^4.1.1",
     "@commitlint/cli": "^19.8.0",
     "@commitlint/config-conventional": "^19.8.0",
+    "@eslint/compat": "^1.4.0",
+    "@eslint/js": "^9.38.0",
     "@release-it/conventional-changelog": "^8.0.2",
     "@storybook/addon-a11y": "^9.1.5",
     "@storybook/addon-docs": "^9.1.5",
     "@storybook/addon-links": "^9.1.5",
-    "@storybook/addon-themes": "9.1.5",
+    "@storybook/addon-themes": "^9.1.13",
     "@storybook/web-components-vite": "^9.1.5",
     "@sveltejs/kit": "^2.20.8",
     "@sveltejs/package": "^2.5.0",
@@ -76,23 +79,20 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/svelte": "^5.2.8",
     "@tsconfig/svelte": "^5.0.4",
-    "@typescript-eslint/eslint-plugin": "^7.18.0",
-    "@typescript-eslint/parser": "^7.18.0",
     "@vitest/coverage-v8": "^3.2.4",
     "chromatic": "^6.3.3",
-    "eslint": "^8.57.0",
-    "eslint-plugin-storybook": "^9.1.5",
-    "eslint-plugin-svelte": "^2.45.1",
+    "eslint": "^9.38.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-storybook": "^9.1.13",
+    "eslint-plugin-svelte": "^3.12.5",
     "husky": "^6.0.0",
     "jsdom": "^27.0.0",
     "lint-staged": "^11.2.6",
-    "mdx-mermaid": "^1.3.2",
-    "mermaid": "^10.9.0",
+    "mdx-mermaid": "^2.0.3",
+    "mermaid": "^11.12.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.3.3",
-    "prettier-eslint": "^16.3.0",
-    "prettier-eslint-cli": "^8.0.1",
-    "prettier-plugin-svelte": "^3.2.7",
+    "prettier": "^3.6.2",
+    "prettier-plugin-svelte": "^3.4.0",
     "release-it": "^17.0.0",
     "sass": "^1.85.1",
     "storybook": "^9.1.5",
@@ -100,11 +100,13 @@
     "svelte-check": "^4.1.4",
     "svelte-loader": "^3.2.3",
     "typescript": "^5.5.0",
+    "typescript-eslint": "^8.46.2",
     "vite": "^6.2.1",
     "vitest": "^3.2.4"
   },
   "lint-staged": {
     "src/**/*.{js,ts,svelte}": [
+      "npm run format",
       "npm run lint"
     ]
   }