@mozaic-ds/web-components 1.0.0 → 1.2.0

package/dist/main.js

@@ -5,11 +5,14 @@ import Callout from './components/callout/Callout.svelte';
 import Checkbox from './components/checkbox/Checkbox.svelte';
 import CheckboxGroup from './components/checkboxgroup/CheckboxGroup.svelte';
 import CircularProgressbar from './components/circularprogressbar/CircularProgressbar.svelte';
+import Container from './components/container/Container.svelte';
 import Datepicker from './components/datepicker/Datepicker.svelte';
+import Divider from './components/divider/Divider.svelte';
 import Drawer from './components/drawer/Drawer.svelte';
 import Field from './components/field/Field.svelte';
 import Flag from './components/flag/Flag.svelte';
 import IconButton from './components/iconbutton/IconButton.svelte';
+import KpiItem from './components/kpiitem/KpiItem.svelte';
 import LinearProgressbarBuffer from './components/linearprogressbarbuffer/LinearProgressbarBuffer.svelte';
 import LinearProgressbarPercentage from './components/linearprogressbarpercentage/LinearProgressbarPercentage.svelte';
 import Link from './components/link/Link.svelte';
@@ -27,18 +30,17 @@ import RadioGroup from './components/radiogroup/RadioGroup.svelte';
 import Select from './components/select/Select.svelte';
 import StatusBadge from './components/statusbadge/StatusBadge.svelte';
 import StatusDot from './components/statusdot/StatusDot.svelte';
+import StatusMessage from './components/statusmessage/StatusMessage.svelte';
 import StatusNotification from './components/statusnotification/StatusNotification.svelte';
+import SegmentedControl from './components/segmentedcontrol/SegmentedControl.svelte';
+import StepperCompact from './components/steppercompact/StepperCompact.svelte';
 import Tab from './components/tab/Tab.svelte';
 import Tabs from './components/tabs/Tabs.svelte';
-import Tag from './components/tags/Tag.svelte';
-import TagContextualised from './components/tags/TagContextualised.svelte';
-import TagInteractive from './components/tags/TagInteractive.svelte';
-import TagRemovable from './components/tags/TagRemovable.svelte';
-import TagSelectable from './components/tags/TagSelectable.svelte';
+import Tag from './components/tag/Tag.svelte';
 import Textarea from './components/textarea/Textarea.svelte';
 import Textinput from './components/textinput/Textinput.svelte';
 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, Container, Datepicker, Divider, Drawer, Field, Flag, IconButton, KpiItem, LinearProgressbarBuffer, LinearProgressbarPercentage, Link, Loader, LoadingOverlay, Modal, NumberBadge, Overlay, Pagination, PasswordInput, Pincode, QuantitySelector, Radio, RadioGroup, Select, StatusBadge, StatusDot, StatusMessage, StatusNotification, StepperCompact, SegmentedControl, Tab, Tabs, Tag, Textarea, Textinput, Toaster, Toggle, ToggleGroup, Tooltip, };

package/dist/slot.js

@@ -1,2 +1,2 @@
-import{I as n,J as s}from"./custom-element.js";function u(l,f,e,i,d){var r;n&&s();var t=(r=f.$$slots)==null?void 0:r[e],a=!1;t===!0&&(t=f[e==="default"?"children":e],a=!0),t===void 0||t(l,a?()=>i:i)}export{u as s};
+import{I as l,J as n}from"./custom-element.js";function o(r,f,e,i,s){l&&n();var t=f.$$slots?.[e],a=!1;t===!0&&(t=f[e==="default"?"children":e],a=!0),t===void 0||t(r,a?()=>i:i)}export{o as s};
 //# sourceMappingURL=slot.js.map

package/dist/slot.js.map

@@ -1 +1 @@
-{"version":3,"file":"slot.js","sources":["../node_modules/svelte/src/internal/client/dom/blocks/slot.js"],"sourcesContent":["import { hydrate_next, hydrating } from '../hydration.js';\n\n/**\n * @param {Comment} anchor\n * @param {Record<string, any>} $$props\n * @param {string} name\n * @param {Record<string, unknown>} slot_props\n * @param {null | ((anchor: Comment) => void)} fallback_fn\n */\nexport function slot(anchor, $$props, name, slot_props, fallback_fn) {\n\tif (hydrating) {\n\t\thydrate_next();\n\t}\n\n\tvar slot_fn = $$props.$$slots?.[name];\n\t// Interop: Can use snippets to fill slots\n\tvar is_interop = false;\n\tif (slot_fn === true) {\n\t\tslot_fn = $$props[name === 'default' ? 'children' : name];\n\t\tis_interop = true;\n\t}\n\n\tif (slot_fn === undefined) {\n\t\tif (fallback_fn !== null) {\n\t\t\tfallback_fn(anchor);\n\t\t}\n\t} else {\n\t\tslot_fn(anchor, is_interop ? () => slot_props : slot_props);\n\t}\n}\n\n/**\n * @param {Record<string, any>} props\n * @returns {Record<string, boolean>}\n */\nexport function sanitize_slots(props) {\n\t/** @type {Record<string, boolean>} */\n\tconst sanitized = {};\n\tif (props.children) sanitized.default = true;\n\tfor (const key in props.$$slots) {\n\t\tsanitized[key] = true;\n\t}\n\treturn sanitized;\n}\n"],"names":["slot","anchor","$$props","name","slot_props","fallback_fn","hydrating","hydrate_next","slot_fn","_a","is_interop"],"mappings":"+CASO,SAASA,EAAKC,EAAQC,EAASC,EAAMC,EAAYC,EAAa,OAChEC,GACHC,EAAY,EAGb,IAAIC,GAAUC,EAAAP,EAAQ,UAAR,YAAAO,EAAkBN,GAE5BO,EAAa,GACbF,IAAY,KACfA,EAAUN,EAAQC,IAAS,UAAY,WAAaA,CAAI,EACxDO,EAAa,IAGVF,IAAY,QAKfA,EAAQP,EAAQS,EAAa,IAAMN,EAAaA,CAAU,CAE5D","x_google_ignoreList":[0]}
+{"version":3,"file":"slot.js","sources":["../node_modules/svelte/src/internal/client/dom/blocks/slot.js"],"sourcesContent":["import { hydrate_next, hydrating } from '../hydration.js';\n\n/**\n * @param {Comment} anchor\n * @param {Record<string, any>} $$props\n * @param {string} name\n * @param {Record<string, unknown>} slot_props\n * @param {null | ((anchor: Comment) => void)} fallback_fn\n */\nexport function slot(anchor, $$props, name, slot_props, fallback_fn) {\n\tif (hydrating) {\n\t\thydrate_next();\n\t}\n\n\tvar slot_fn = $$props.$$slots?.[name];\n\t// Interop: Can use snippets to fill slots\n\tvar is_interop = false;\n\tif (slot_fn === true) {\n\t\tslot_fn = $$props[name === 'default' ? 'children' : name];\n\t\tis_interop = true;\n\t}\n\n\tif (slot_fn === undefined) {\n\t\tif (fallback_fn !== null) {\n\t\t\tfallback_fn(anchor);\n\t\t}\n\t} else {\n\t\tslot_fn(anchor, is_interop ? () => slot_props : slot_props);\n\t}\n}\n\n/**\n * @param {Record<string, any>} props\n * @returns {Record<string, boolean>}\n */\nexport function sanitize_slots(props) {\n\t/** @type {Record<string, boolean>} */\n\tconst sanitized = {};\n\tif (props.children) sanitized.default = true;\n\tfor (const key in props.$$slots) {\n\t\tsanitized[key] = true;\n\t}\n\treturn sanitized;\n}\n"],"names":["slot","anchor","$$props","name","slot_props","fallback_fn","hydrating","hydrate_next","slot_fn","is_interop"],"mappings":"+CASO,SAASA,EAAKC,EAAQC,EAASC,EAAMC,EAAYC,EAAa,CAChEC,GACHC,EAAY,EAGb,IAAIC,EAAUN,EAAQ,UAAUC,CAAI,EAEhCM,EAAa,GACbD,IAAY,KACfA,EAAUN,EAAQC,IAAS,UAAY,WAAaA,CAAI,EACxDM,EAAa,IAGVD,IAAY,QAKfA,EAAQP,EAAQQ,EAAa,IAAML,EAAaA,CAAU,CAE5D","x_google_ignoreList":[0]}

package/dist/svelte-component.js

@@ -0,0 +1,2 @@
+import{G as s,H as c,I as m,J as i}from"./custom-element.js";import{B as p}from"./if.js";function l(n,r,o){m&&i();var e=new p(n);s(()=>{var a=r()??null;e.ensure(a,a&&(t=>o(t,a)))},c)}export{l as c};
+//# sourceMappingURL=svelte-component.js.map

package/dist/svelte-component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"svelte-component.js","sources":["../node_modules/svelte/src/internal/client/dom/blocks/svelte-component.js"],"sourcesContent":["/** @import { TemplateNode, Dom } from '#client' */\nimport { EFFECT_TRANSPARENT } from '#client/constants';\nimport { block } from '../../reactivity/effects.js';\nimport { hydrate_next, hydrating } from '../hydration.js';\nimport { BranchManager } from './branches.js';\n\n/**\n * @template P\n * @template {(props: P) => void} C\n * @param {TemplateNode} node\n * @param {() => C} get_component\n * @param {(anchor: TemplateNode, component: C) => Dom | void} render_fn\n * @returns {void}\n */\nexport function component(node, get_component, render_fn) {\n\tif (hydrating) {\n\t\thydrate_next();\n\t}\n\n\tvar branches = new BranchManager(node);\n\n\tblock(() => {\n\t\tvar component = get_component() ?? null;\n\t\tbranches.ensure(component, component && ((target) => render_fn(target, component)));\n\t}, EFFECT_TRANSPARENT);\n}\n"],"names":["component","node","get_component","render_fn","hydrating","hydrate_next","branches","BranchManager","block","target","EFFECT_TRANSPARENT"],"mappings":"yFAcO,SAASA,EAAUC,EAAMC,EAAeC,EAAW,CACrDC,GACHC,EAAY,EAGb,IAAIC,EAAW,IAAIC,EAAcN,CAAI,EAErCO,EAAM,IAAM,CACX,IAAIR,EAAYE,EAAa,GAAM,KACnCI,EAAS,OAAON,EAAWA,IAAeS,GAAWN,EAAUM,EAAQT,CAAS,EAAE,CACnF,EAAGU,CAAkB,CACtB","x_google_ignoreList":[0]}

package/dist/this.js

@@ -1,2 +1,2 @@
-import{P as q,ay as B,q as S,ao as T,aB as c}from"./custom-element.js";function k(i,r){return i===r||(i==null?void 0:i[c])===r}function y(i={},r,a,h){return q(()=>{var s,f;return B(()=>{s=f,f=(h==null?void 0:h())||[],S(()=>{i!==a(...f)&&(r(i,...f),s&&k(a(...s),i)&&r(null,...s))})}),()=>{T(()=>{f&&k(a(...f),i)&&r(null,...f)})}}),i}export{y as b};
+import{M as h,aB as k,q,a5 as B,aD as M}from"./custom-element.js";function u(r,i){return r===i||r?.[M]===i}function T(r={},i,f,b){return h(()=>{var a,s;return k(()=>{a=s,s=b?.()||[],q(()=>{r!==f(...s)&&(i(r,...s),a&&u(f(...a),r)&&i(null,...a))})}),()=>{B(()=>{s&&u(f(...s),r)&&i(null,...s)})}}),r}export{T as b};
 //# sourceMappingURL=this.js.map

package/dist/this.js.map

@@ -1 +1 @@
-{"version":3,"file":"this.js","sources":["../node_modules/svelte/src/internal/client/dom/elements/bindings/this.js"],"sourcesContent":["import { STATE_SYMBOL } from '#client/constants';\nimport { effect, render_effect } from '../../../reactivity/effects.js';\nimport { untrack } from '../../../runtime.js';\nimport { queue_micro_task } from '../../task.js';\n\n/**\n * @param {any} bound_value\n * @param {Element} element_or_component\n * @returns {boolean}\n */\nfunction is_bound_this(bound_value, element_or_component) {\n\treturn (\n\t\tbound_value === element_or_component || bound_value?.[STATE_SYMBOL] === element_or_component\n\t);\n}\n\n/**\n * @param {any} element_or_component\n * @param {(value: unknown, ...parts: unknown[]) => void} update\n * @param {(...parts: unknown[]) => unknown} get_value\n * @param {() => unknown[]} [get_parts] Set if the this binding is used inside an each block,\n * \t\t\t\t\t\t\t\t\t\treturns all the parts of the each block context that are used in the expression\n * @returns {void}\n */\nexport function bind_this(element_or_component = {}, update, get_value, get_parts) {\n\teffect(() => {\n\t\t/** @type {unknown[]} */\n\t\tvar old_parts;\n\n\t\t/** @type {unknown[]} */\n\t\tvar parts;\n\n\t\trender_effect(() => {\n\t\t\told_parts = parts;\n\t\t\t// We only track changes to the parts, not the value itself to avoid unnecessary reruns.\n\t\t\tparts = get_parts?.() || [];\n\n\t\t\tuntrack(() => {\n\t\t\t\tif (element_or_component !== get_value(...parts)) {\n\t\t\t\t\tupdate(element_or_component, ...parts);\n\t\t\t\t\t// If this is an effect rerun (cause: each block context changes), then nullfiy the binding at\n\t\t\t\t\t// the previous position if it isn't already taken over by a different effect.\n\t\t\t\t\tif (old_parts && is_bound_this(get_value(...old_parts), element_or_component)) {\n\t\t\t\t\t\tupdate(null, ...old_parts);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\n\t\treturn () => {\n\t\t\t// We cannot use effects in the teardown phase, we we use a microtask instead.\n\t\t\tqueue_micro_task(() => {\n\t\t\t\tif (parts && is_bound_this(get_value(...parts), element_or_component)) {\n\t\t\t\t\tupdate(null, ...parts);\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\t});\n\n\treturn element_or_component;\n}\n"],"names":["is_bound_this","bound_value","element_or_component","STATE_SYMBOL","bind_this","update","get_value","get_parts","effect","old_parts","parts","render_effect","untrack","queue_micro_task"],"mappings":"uEAUA,SAASA,EAAcC,EAAaC,EAAsB,CACzD,OACCD,IAAgBC,IAAwBD,GAAA,YAAAA,EAAcE,MAAkBD,CAE1E,CAUO,SAASE,EAAUF,EAAuB,CAAA,EAAIG,EAAQC,EAAWC,EAAW,CAClF,OAAAC,EAAO,IAAM,CAEZ,IAAIC,EAGAC,EAEJ,OAAAC,EAAc,IAAM,CACnBF,EAAYC,EAEZA,GAAQH,GAAA,YAAAA,MAAiB,CAAA,EAEzBK,EAAQ,IAAM,CACTV,IAAyBI,EAAU,GAAGI,CAAK,IAC9CL,EAAOH,EAAsB,GAAGQ,CAAK,EAGjCD,GAAaT,EAAcM,EAAU,GAAGG,CAAS,EAAGP,CAAoB,GAC3EG,EAAO,KAAM,GAAGI,CAAS,EAG5B,CAAC,CACF,CAAC,EAEM,IAAM,CAEZI,EAAiB,IAAM,CAClBH,GAASV,EAAcM,EAAU,GAAGI,CAAK,EAAGR,CAAoB,GACnEG,EAAO,KAAM,GAAGK,CAAK,CAEvB,CAAC,CACF,CACD,CAAC,EAEMR,CACR","x_google_ignoreList":[0]}
+{"version":3,"file":"this.js","sources":["../node_modules/svelte/src/internal/client/dom/elements/bindings/this.js"],"sourcesContent":["import { STATE_SYMBOL } from '#client/constants';\nimport { effect, render_effect } from '../../../reactivity/effects.js';\nimport { untrack } from '../../../runtime.js';\nimport { queue_micro_task } from '../../task.js';\n\n/**\n * @param {any} bound_value\n * @param {Element} element_or_component\n * @returns {boolean}\n */\nfunction is_bound_this(bound_value, element_or_component) {\n\treturn (\n\t\tbound_value === element_or_component || bound_value?.[STATE_SYMBOL] === element_or_component\n\t);\n}\n\n/**\n * @param {any} element_or_component\n * @param {(value: unknown, ...parts: unknown[]) => void} update\n * @param {(...parts: unknown[]) => unknown} get_value\n * @param {() => unknown[]} [get_parts] Set if the this binding is used inside an each block,\n * \t\t\t\t\t\t\t\t\t\treturns all the parts of the each block context that are used in the expression\n * @returns {void}\n */\nexport function bind_this(element_or_component = {}, update, get_value, get_parts) {\n\teffect(() => {\n\t\t/** @type {unknown[]} */\n\t\tvar old_parts;\n\n\t\t/** @type {unknown[]} */\n\t\tvar parts;\n\n\t\trender_effect(() => {\n\t\t\told_parts = parts;\n\t\t\t// We only track changes to the parts, not the value itself to avoid unnecessary reruns.\n\t\t\tparts = get_parts?.() || [];\n\n\t\t\tuntrack(() => {\n\t\t\t\tif (element_or_component !== get_value(...parts)) {\n\t\t\t\t\tupdate(element_or_component, ...parts);\n\t\t\t\t\t// If this is an effect rerun (cause: each block context changes), then nullfiy the binding at\n\t\t\t\t\t// the previous position if it isn't already taken over by a different effect.\n\t\t\t\t\tif (old_parts && is_bound_this(get_value(...old_parts), element_or_component)) {\n\t\t\t\t\t\tupdate(null, ...old_parts);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\n\t\treturn () => {\n\t\t\t// We cannot use effects in the teardown phase, we we use a microtask instead.\n\t\t\tqueue_micro_task(() => {\n\t\t\t\tif (parts && is_bound_this(get_value(...parts), element_or_component)) {\n\t\t\t\t\tupdate(null, ...parts);\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\t});\n\n\treturn element_or_component;\n}\n"],"names":["is_bound_this","bound_value","element_or_component","STATE_SYMBOL","bind_this","update","get_value","get_parts","effect","old_parts","parts","render_effect","untrack","queue_micro_task"],"mappings":"kEAUA,SAASA,EAAcC,EAAaC,EAAsB,CACzD,OACCD,IAAgBC,GAAwBD,IAAcE,CAAY,IAAMD,CAE1E,CAUO,SAASE,EAAUF,EAAuB,CAAA,EAAIG,EAAQC,EAAWC,EAAW,CAClF,OAAAC,EAAO,IAAM,CAEZ,IAAIC,EAGAC,EAEJ,OAAAC,EAAc,IAAM,CACnBF,EAAYC,EAEZA,EAAQH,IAAS,GAAQ,CAAA,EAEzBK,EAAQ,IAAM,CACTV,IAAyBI,EAAU,GAAGI,CAAK,IAC9CL,EAAOH,EAAsB,GAAGQ,CAAK,EAGjCD,GAAaT,EAAcM,EAAU,GAAGG,CAAS,EAAGP,CAAoB,GAC3EG,EAAO,KAAM,GAAGI,CAAS,EAG5B,CAAC,CACF,CAAC,EAEM,IAAM,CAEZI,EAAiB,IAAM,CAClBH,GAASV,EAAcM,EAAU,GAAGI,CAAK,EAAGR,CAAoB,GACnEG,EAAO,KAAM,GAAGK,CAAK,CAEvB,CAAC,CACF,CACD,CAAC,EAEMR,CACR","x_google_ignoreList":[0]}

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.2.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,14 +43,8 @@
     "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",
     "release:beta": "release-it --preRelease=beta  --npm.tag=beta --github.preRelease",
     "release:alpha": "release-it --preRelease=alpha --npm.tag=alpha --github.preRelease",
@@ -55,56 +55,55 @@
   },
   "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.5.0",
+    "@mozaic-ds/tokens": "^2.5.0",
     "@mozaic-ds/web-fonts": "1.65.0",
     "svelte": "^5.38.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^4.1.1",
-    "@commitlint/cli": "^19.8.0",
-    "@commitlint/config-conventional": "^19.8.0",
-    "@release-it/conventional-changelog": "^8.0.2",
+    "@commitlint/cli": "^20.1.0",
+    "@commitlint/config-conventional": "^20.0.0",
+    "@eslint/compat": "^1.4.0",
+    "@eslint/js": "^9.38.0",
+    "@release-it/conventional-changelog": "^10.0.1",
     "@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",
-    "@sveltejs/vite-plugin-svelte": "^5.1.1",
+    "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@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",
-    "husky": "^6.0.0",
+    "@vitest/coverage-v8": "^4.0.7",
+    "eslint": "^9.38.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-storybook": "^9.1.13",
+    "eslint-plugin-svelte": "^3.12.5",
+    "glob": "^11.0.3",
+    "husky": "^9.1.7",
     "jsdom": "^27.0.0",
-    "lint-staged": "^11.2.6",
-    "mdx-mermaid": "^1.3.2",
-    "mermaid": "^10.9.0",
+    "lint-staged": "^16.2.6",
+    "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",
-    "release-it": "^17.0.0",
+    "prettier": "^3.6.2",
+    "prettier-plugin-svelte": "^3.4.0",
+    "release-it": "^19.0.5",
     "sass": "^1.85.1",
     "storybook": "^9.1.5",
     "storybook-addon-tag-badges": "^2.0.2",
     "svelte-check": "^4.1.4",
     "svelte-loader": "^3.2.3",
     "typescript": "^5.5.0",
-    "vite": "^6.2.1",
-    "vitest": "^3.2.4"
+    "typescript-eslint": "^8.46.2",
+    "vite": "^7.1.12",
+    "vitest": "^4.0.7"
   },
   "lint-staged": {
     "src/**/*.{js,ts,svelte}": [
+      "npm run format",
       "npm run lint"
     ]
   }

package/dist/components/tags/README.md

@@ -1,9 +0,0 @@
-# `mc-tag`
-
-## Props
-
-| Name | Description | Type | Default |
-|------|-------------|------|---------|
-| `label*` |  | `string` |   |
-| `size` |  | `'s'` `'m'` `'l'` | `m` |
-

package/dist/components/tags/Tag.js

@@ -1,4 +0,0 @@
-import{c as m,p as f,a as b,b as c,f as h,z as p,t as w,i as x,j,k as i,d,r as n,h as k}from"../../custom-element.js";import{b as _}from"../../attributes.js";var E=h('<span><span class="mc-tag__label svelte-ajo7cu"> </span></span>');const C={hash:"svelte-ajo7cu",code:`/**
- * Do not edit directly, this file was auto-generated.
- */.mc-tag.svelte-ajo7cu {font-size:var(--font-size-100, 0.875rem);border-radius:2rem;height:2rem;padding-inline:0.75rem;box-sizing:border-box;display:inline-flex;align-items:center;background:var(--tag-color-background-standard, #ffffff);color:var(--tag-color-text-standard, #242938);border:var(--border-s, 1px) solid var(--tag-color-border, #999999);}.mc-tag--s.svelte-ajo7cu {font-size:var(--font-size-50, 0.75rem);border-radius:1.5rem;height:1.5rem;padding-inline:0.5rem;}.mc-tag--l.svelte-ajo7cu {font-size:var(--font-size-100, 0.875rem);border-radius:2.5rem;height:2.5rem;padding-inline:1rem;}.mc-tag.is-disabled.svelte-ajo7cu, .mc-tag.svelte-ajo7cu:disabled {cursor:not-allowed;background:var(--color-background-disabled, #d9d9d9);color:var(--color-text-disabled, #737373);border-color:var(--color-background-disabled, #d9d9d9);box-shadow:none;}.mc-tag-interactive.svelte-ajo7cu {text-decoration:none;outline:none;cursor:pointer;font-weight:var(--font-weight-semi-bold, 600);}.mc-tag-interactive.svelte-ajo7cu:not(:disabled):hover {box-shadow:inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);}.mc-tag-interactive.svelte-ajo7cu:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-tag-contextualised.svelte-ajo7cu {gap:0.25rem;text-decoration:none;outline:none;color:var(--tag-color-text-inverse, #ffffff);border:none;background:var(--tag-color-background-selected, #117f03);cursor:pointer;font-weight:var(--font-weight-semi-bold, 600);padding-inline-end:1rem;padding-inline-start:0.5rem;}.mc-tag-contextualised.svelte-ajo7cu:not(:disabled):hover {background:var(--tag-color-background-selected-hover, #006902);}.mc-tag-contextualised.svelte-ajo7cu:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-tag-contextualised.mc-tag--s.svelte-ajo7cu {padding-inline-end:0.5rem;padding-inline-start:0.25rem;}.mc-tag-removable.svelte-ajo7cu {padding:0 0 0 1rem;background:var(--tag-color-background-inverse, #242938);color:var(--tag-color-text-inverse, #ffffff);border:none;}.mc-tag-removable__remove.svelte-ajo7cu {width:2rem;height:2rem;background-size:1.5rem;background:transparent;border:none;margin:0 0 0 0.125rem;padding:0.25rem;display:block;cursor:pointer;border-radius:var(--radius-full, 100%);}.mc-tag-removable__remove.svelte-ajo7cu:hover {background:var(--tag-color-background-inverse-hover, #343b4c);}.mc-tag-removable__remove.svelte-ajo7cu:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-tag-removable__icon.svelte-ajo7cu {fill:var(--tag-color-delete-icon, #c9d0de);width:1.5rem;height:1.5rem;}.mc-tag-removable__text.svelte-ajo7cu {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-tag-removable.mc-tag--s.svelte-ajo7cu {padding:0 0 0 0.5rem;}.mc-tag-selectable.svelte-ajo7cu {gap:0.25rem;white-space:nowrap;cursor:pointer;padding-inline-start:0.5rem;font-weight:var(--font-weight-semi-bold, 600);}.mc-tag-selectable.svelte-ajo7cu:hover {box-shadow:inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);}.mc-tag-selectable.svelte-ajo7cu:has(:where(.svelte-ajo7cu):focus-visible) {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-tag-selectable.svelte-ajo7cu:has(:where(.svelte-ajo7cu):checked) {background:var(--tag-color-background-selected, #117f03);color:var(--tag-color-text-inverse, #ffffff);border:none;}.mc-tag-selectable.svelte-ajo7cu:has(:where(.svelte-ajo7cu):checked)::before {display:inline-block;content:"";height:1.25rem;width:1.25rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--tag-color-text-inverse, %23ffffff)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-tag-selectable.svelte-ajo7cu:has(:where(.svelte-ajo7cu):checked):not(:has(:disabled)):hover {background:var(--tag-color-background-selected-hover, #006902);border-color:var(--tag-color-background-selected-hover, #006902);box-shadow:none;}.mc-tag-selectable.svelte-ajo7cu:has(:where(.svelte-ajo7cu):disabled) {cursor:not-allowed;background:var(--color-background-disabled, #d9d9d9);color:var(--color-text-disabled, #737373);border-color:var(--color-background-disabled, #d9d9d9);box-shadow:none;}.mc-tag-selectable.svelte-ajo7cu:has(:where(.svelte-ajo7cu):disabled)::before {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--color-text-disabled, %23737373)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-tag-selectable.svelte-ajo7cu .mc-tag__label:where(.svelte-ajo7cu) {user-select:none;}.mc-tag-selectable.mc-tag--s.svelte-ajo7cu {padding-inline-start:0.25rem;gap:0.125rem;}.mc-tag-selectable.mc-tag--l.svelte-ajo7cu {padding-inline-start:0.75rem;}`};function z(l,e){f(e,!0),b(l,C);let r=c(e,"label",7),o=c(e,"size",7,"m"),u=p(e,["$$slots","$$events","$$legacy","$$host","label","size"]);var v={get label(){return r()},set label(t){r(t),i()},get size(){return o()},set size(t="m"){o(t),i()}},a=E();_(a,()=>({class:`mc-tag  ${o()!=="m"?`mc-tag--${o()}`:""}`,...u}),void 0,void 0,"svelte-ajo7cu");var s=d(a),g=d(s,!0);return n(s),n(a),w(()=>k(g,r())),x(l,a),j(v)}customElements.define("mc-tag",m(z,{label:{},size:{}},[],[],!0));
-//# sourceMappingURL=Tag.js.map

package/dist/components/tags/Tag.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tag.js","sources":["../../../src/components/tags/Tag.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'mc-tag' }} />\n\n<script lang=\"ts\">\n  interface Props {\n    label: string;\n    size?: 's' | 'm' | 'l';\n    [key: string]: any;\n  }\n\n  let { label, size = 'm', ...attrs }: Props = $props();\n</script>\n\n<span class={`mc-tag  ${size !== 'm' ? `mc-tag--${size}` : ''}`} {...attrs}>\n  <span class=\"mc-tag__label\">{label}</span>\n</span>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/tag';\n  @use '@mozaic-ds/styles/components/tag/c.tag-selectable';\n</style>\n"],"names":["label","$.prop","$$props","size","attrs","$.rest_props"],"mappings":";;oiMAAA,oBASQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,eAAO,GAAG,EAAKC,EAAKC,EAAAH,EAAA,CAAA,UAAA,WAAA,WAAA,SAAA,QAAA,MAAA,CAAA,0FAAb,IAAG,4BAGD,MAAA,WAAAC,EAAI,IAAK,IAAG,WAAcA,EAAI,IAAK,EAAE,MAAQC,mFACtCJ,EAAK,CAAA,CAAA,aAHpC"}

package/dist/components/tags/Tag.svelte

@@ -1,218 +0,0 @@
-<svelte:options customElement={{ tag: 'mc-tag' }} />
-
-<script lang="ts">
-  interface Props {
-    label: string;
-    size?: 's' | 'm' | 'l';
-    [key: string]: any;
-  }
-
-  let { label, size = 'm', ...attrs }: Props = $props();
-</script>
-
-<span class={`mc-tag  ${size !== 'm' ? `mc-tag--${size}` : ''}`} {...attrs}>
-  <span class="mc-tag__label">{label}</span>
-</span>
-
-<style>/**
- * Do not edit directly, this file was auto-generated.
- */
-.mc-tag {
-  font-size: var(--font-size-100, 0.875rem);
-  border-radius: 2rem;
-  height: 2rem;
-  padding-inline: 0.75rem;
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  background: var(--tag-color-background-standard, #ffffff);
-  color: var(--tag-color-text-standard, #242938);
-  border: var(--border-s, 1px) solid var(--tag-color-border, #999999);
-}
-.mc-tag--s {
-  font-size: var(--font-size-50, 0.75rem);
-  border-radius: 1.5rem;
-  height: 1.5rem;
-  padding-inline: 0.5rem;
-}
-.mc-tag--l {
-  font-size: var(--font-size-100, 0.875rem);
-  border-radius: 2.5rem;
-  height: 2.5rem;
-  padding-inline: 1rem;
-}
-.mc-tag.is-disabled, .mc-tag:disabled {
-  cursor: not-allowed;
-  background: var(--color-background-disabled, #d9d9d9);
-  color: var(--color-text-disabled, #737373);
-  border-color: var(--color-background-disabled, #d9d9d9);
-  box-shadow: none;
-}
-.mc-tag.is-disabled .mc-badge, .mc-tag:disabled .mc-badge {
-  color: currentColor;
-}
-
-.mc-tag-interactive {
-  text-decoration: none;
-  outline: none;
-  cursor: pointer;
-  font-weight: var(--font-weight-semi-bold, 600);
-}
-.mc-tag-interactive:not(:disabled):hover {
-  box-shadow: inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);
-}
-.mc-tag-interactive:focus-visible {
-  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
-  outline: 0.125rem solid transparent;
-  outline-offset: 0.125rem;
-}
-
-.mc-tag-contextualised {
-  gap: 0.25rem;
-  text-decoration: none;
-  outline: none;
-  color: var(--tag-color-text-inverse, #ffffff);
-  border: none;
-  background: var(--tag-color-background-selected, #117f03);
-  cursor: pointer;
-  font-weight: var(--font-weight-semi-bold, 600);
-  padding-inline-end: 1rem;
-  padding-inline-start: 0.5rem;
-}
-.mc-tag-contextualised:not(:disabled):hover {
-  background: var(--tag-color-background-selected-hover, #006902);
-}
-.mc-tag-contextualised:focus-visible {
-  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
-  outline: 0.125rem solid transparent;
-  outline-offset: 0.125rem;
-}
-.mc-tag-contextualised.mc-tag--s {
-  padding-inline-end: 0.5rem;
-  padding-inline-start: 0.25rem;
-}
-
-.mc-tag-removable {
-  padding: 0 0 0 1rem;
-  background: var(--tag-color-background-inverse, #242938);
-  color: var(--tag-color-text-inverse, #ffffff);
-  border: none;
-}
-.mc-tag-removable__remove {
-  width: 2rem;
-  height: 2rem;
-  background-size: 1.5rem;
-  background: transparent;
-  border: none;
-  margin: 0 0 0 0.125rem;
-  padding: 0.25rem;
-  display: block;
-  cursor: pointer;
-  border-radius: var(--radius-full, 100%);
-}
-.mc-tag-removable__remove:hover {
-  background: var(--tag-color-background-inverse-hover, #343b4c);
-}
-.mc-tag-removable__remove:focus-visible {
-  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
-  outline: 0.125rem solid transparent;
-  outline-offset: 0.125rem;
-}
-.mc-tag-removable__icon {
-  fill: var(--tag-color-delete-icon, #c9d0de);
-  width: 1.5rem;
-  height: 1.5rem;
-}
-.mc-tag-removable__text {
-  clip-path: inset(100%);
-  clip: rect(1px, 1px, 1px, 1px);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  padding: 0;
-  width: 1px;
-}
-.mc-tag-removable.mc-tag--s {
-  padding: 0 0 0 0.5rem;
-}
-.mc-tag-removable.mc-tag--s .mc-tag-removable__remove {
-  width: 1.5rem;
-  height: 1.5rem;
-  padding: 0.125rem;
-}
-.mc-tag-removable.mc-tag--s .mc-tag-removable__icon {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-.mc-tag-removable.mc-tag--l .mc-tag-removable__remove {
-  width: 2.5rem;
-  height: 2.5rem;
-}
-.mc-tag-removable.mc-tag--l .mc-tag-removable__icon {
-  width: 2rem;
-  height: 2rem;
-}
-
-.mc-tag-selectable {
-  gap: 0.25rem;
-  white-space: nowrap;
-  cursor: pointer;
-  padding-inline-start: 0.5rem;
-  font-weight: var(--font-weight-semi-bold, 600);
-}
-.mc-tag-selectable:hover {
-  box-shadow: inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);
-}
-.mc-tag-selectable:has(:focus-visible) {
-  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
-  outline: 0.125rem solid transparent;
-  outline-offset: 0.125rem;
-}
-.mc-tag-selectable:has(:checked) {
-  background: var(--tag-color-background-selected, #117f03);
-  color: var(--tag-color-text-inverse, #ffffff);
-  border: none;
-}
-.mc-tag-selectable:has(:checked)::before {
-  display: inline-block;
-  content: "";
-  height: 1.25rem;
-  width: 1.25rem;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--tag-color-text-inverse, %23ffffff)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
-}
-.mc-tag-selectable:has(:checked):not(:has(:disabled)):hover {
-  background: var(--tag-color-background-selected-hover, #006902);
-  border-color: var(--tag-color-background-selected-hover, #006902);
-  box-shadow: none;
-}
-.mc-tag-selectable:has(:disabled) {
-  cursor: not-allowed;
-  background: var(--color-background-disabled, #d9d9d9);
-  color: var(--color-text-disabled, #737373);
-  border-color: var(--color-background-disabled, #d9d9d9);
-  box-shadow: none;
-}
-.mc-tag-selectable:has(:disabled)::before {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--color-text-disabled, %23737373)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
-}
-.mc-tag-selectable .mc-tag__input {
-  clip-path: inset(100%);
-  clip: rect(1px, 1px, 1px, 1px);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  padding: 0;
-  width: 1px;
-}
-.mc-tag-selectable .mc-tag__label {
-  user-select: none;
-}
-.mc-tag-selectable.mc-tag--s {
-  padding-inline-start: 0.25rem;
-  gap: 0.125rem;
-}
-.mc-tag-selectable.mc-tag--l {
-  padding-inline-start: 0.75rem;
-}</style>

package/dist/components/tags/Tag.svelte.d.ts

@@ -1,9 +0,0 @@
-interface Props {
-    label: string;
-    size?: 's' | 'm' | 'l';
-    [key: string]: any;
-}
-declare const Tag: import("svelte").Component<Props, {}, "">;
-type Tag = ReturnType<typeof Tag>;
-export default Tag;
-//# sourceMappingURL=Tag.svelte.d.ts.map

package/dist/components/tags/Tag.svelte.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tag.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/tags/Tag.svelte.ts"],"names":[],"mappings":"AAGE,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAiBH,QAAA,MAAM,GAAG,2CAAwC,CAAC;AAClD,KAAK,GAAG,GAAG,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC;AAClC,eAAe,GAAG,CAAC"}

package/dist/components/tags/TagContextualised.js

@@ -1,4 +0,0 @@
-import{c as w,p,a as x,b as o,f as k,z as _,d as g,s as C,t as E,i as z,j as N,k as l,r as v,h as y}from"../../custom-element.js";import{b as M}from"../../attributes.js";import{N as P}from"../numberbadge/NumberBadge.js";var B=k('<button><!> <span class="mc-tag__label svelte-ra288w"> </span></button>');const H={hash:"svelte-ra288w",code:`/**
- * Do not edit directly, this file was auto-generated.
- */.mc-tag.svelte-ra288w {font-size:var(--font-size-100, 0.875rem);border-radius:2rem;height:2rem;padding-inline:0.75rem;box-sizing:border-box;display:inline-flex;align-items:center;background:var(--tag-color-background-standard, #ffffff);color:var(--tag-color-text-standard, #242938);border:var(--border-s, 1px) solid var(--tag-color-border, #999999);}.mc-tag--s.svelte-ra288w {font-size:var(--font-size-50, 0.75rem);border-radius:1.5rem;height:1.5rem;padding-inline:0.5rem;}.mc-tag--l.svelte-ra288w {font-size:var(--font-size-100, 0.875rem);border-radius:2.5rem;height:2.5rem;padding-inline:1rem;}.mc-tag.is-disabled.svelte-ra288w, .mc-tag.svelte-ra288w:disabled {cursor:not-allowed;background:var(--color-background-disabled, #d9d9d9);color:var(--color-text-disabled, #737373);border-color:var(--color-background-disabled, #d9d9d9);box-shadow:none;}.mc-tag-interactive.svelte-ra288w {text-decoration:none;outline:none;cursor:pointer;font-weight:var(--font-weight-semi-bold, 600);}.mc-tag-interactive.svelte-ra288w:not(:disabled):hover {box-shadow:inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);}.mc-tag-interactive.svelte-ra288w:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-tag-contextualised.svelte-ra288w {gap:0.25rem;text-decoration:none;outline:none;color:var(--tag-color-text-inverse, #ffffff);border:none;background:var(--tag-color-background-selected, #117f03);cursor:pointer;font-weight:var(--font-weight-semi-bold, 600);padding-inline-end:1rem;padding-inline-start:0.5rem;}.mc-tag-contextualised.svelte-ra288w:not(:disabled):hover {background:var(--tag-color-background-selected-hover, #006902);}.mc-tag-contextualised.svelte-ra288w:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-tag-contextualised.mc-tag--s.svelte-ra288w {padding-inline-end:0.5rem;padding-inline-start:0.25rem;}.mc-tag-removable.svelte-ra288w {padding:0 0 0 1rem;background:var(--tag-color-background-inverse, #242938);color:var(--tag-color-text-inverse, #ffffff);border:none;}.mc-tag-removable__remove.svelte-ra288w {width:2rem;height:2rem;background-size:1.5rem;background:transparent;border:none;margin:0 0 0 0.125rem;padding:0.25rem;display:block;cursor:pointer;border-radius:var(--radius-full, 100%);}.mc-tag-removable__remove.svelte-ra288w:hover {background:var(--tag-color-background-inverse-hover, #343b4c);}.mc-tag-removable__remove.svelte-ra288w:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-tag-removable__icon.svelte-ra288w {fill:var(--tag-color-delete-icon, #c9d0de);width:1.5rem;height:1.5rem;}.mc-tag-removable__text.svelte-ra288w {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-tag-removable.mc-tag--s.svelte-ra288w {padding:0 0 0 0.5rem;}.mc-tag-selectable.svelte-ra288w {gap:0.25rem;white-space:nowrap;cursor:pointer;padding-inline-start:0.5rem;font-weight:var(--font-weight-semi-bold, 600);}.mc-tag-selectable.svelte-ra288w:hover {box-shadow:inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);}.mc-tag-selectable.svelte-ra288w:has(:where(.svelte-ra288w):focus-visible) {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-tag-selectable.svelte-ra288w:has(:where(.svelte-ra288w):checked) {background:var(--tag-color-background-selected, #117f03);color:var(--tag-color-text-inverse, #ffffff);border:none;}.mc-tag-selectable.svelte-ra288w:has(:where(.svelte-ra288w):checked)::before {display:inline-block;content:"";height:1.25rem;width:1.25rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--tag-color-text-inverse, %23ffffff)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-tag-selectable.svelte-ra288w:has(:where(.svelte-ra288w):checked):not(:has(:disabled)):hover {background:var(--tag-color-background-selected-hover, #006902);border-color:var(--tag-color-background-selected-hover, #006902);box-shadow:none;}.mc-tag-selectable.svelte-ra288w:has(:where(.svelte-ra288w):disabled) {cursor:not-allowed;background:var(--color-background-disabled, #d9d9d9);color:var(--color-text-disabled, #737373);border-color:var(--color-background-disabled, #d9d9d9);box-shadow:none;}.mc-tag-selectable.svelte-ra288w:has(:where(.svelte-ra288w):disabled)::before {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--color-text-disabled, %23737373)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-tag-selectable.svelte-ra288w .mc-tag__label:where(.svelte-ra288w) {user-select:none;}.mc-tag-selectable.mc-tag--s.svelte-ra288w {padding-inline-start:0.25rem;gap:0.125rem;}.mc-tag-selectable.mc-tag--l.svelte-ra288w {padding-inline-start:0.75rem;}`};function S(c,r){p(r,!0),x(c,H);let s=o(r,"label",7),i=o(r,"contextualisedNumber",7,"99"),a=o(r,"size",7,"m"),d=o(r,"disabled",7,!1),f=_(r,["$$slots","$$events","$$legacy","$$host","label","contextualisedNumber","size","disabled"]);const u=a()==="l"?"m":"s";var b={get label(){return s()},set label(e){s(e),l()},get contextualisedNumber(){return i()},set contextualisedNumber(e="99"){i(e),l()},get size(){return a()},set size(e="m"){a(e),l()},get disabled(){return d()},set disabled(e=!1){d(e),l()}},t=B();M(t,()=>({class:`mc-tag mc-tag-contextualised ${a()!=="m"?`mc-tag--${a()}`:""}`,disabled:d(),...f}),void 0,void 0,"svelte-ra288w");var n=g(t);P(n,{appearance:"inverse",get label(){return i()},get size(){return u}});var m=C(n,2),h=g(m,!0);return v(m),v(t),E(()=>y(h,s())),z(c,t),N(b)}customElements.define("mc-tag-contextualised",w(S,{label:{},contextualisedNumber:{},size:{},disabled:{}},[],[],!0));
-//# sourceMappingURL=TagContextualised.js.map

package/dist/components/tags/TagContextualised.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TagContextualised.js","sources":["../../../src/components/tags/TagContextualised.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'mc-tag-contextualised' }} />\n\n<script lang=\"ts\">\n  import NumberBadge from '../numberbadge/NumberBadge.svelte';\n\n  interface Props {\n    label: string;\n    contextualisedNumber?: string;\n    size?: 's' | 'm' | 'l' | undefined;\n    disabled?: boolean;\n    [key: string]: any;\n  }\n\n  let {\n    label,\n    contextualisedNumber = '99',\n    size = 'm',\n    disabled = false,\n    ...attrs\n  }: Props = $props();\n\n  const badgeSize = size === 'l' ? 'm' : 's';\n</script>\n\n<button\n  class={`mc-tag mc-tag-contextualised ${size !== 'm' ? `mc-tag--${size}` : ''}`}\n  {disabled}\n  {...attrs}\n>\n  <NumberBadge\n    appearance=\"inverse\"\n    label={contextualisedNumber}\n    size={badgeSize}\n  />\n  <span class=\"mc-tag__label\">{label}</span>\n</button>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/tag';\n</style>\n"],"names":["label","$.prop","$$props","contextualisedNumber","size","disabled","attrs","$.rest_props","badgeSize"],"mappings":";;oiMAAA,oBAcIA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EACLC,+BAAuB,IAAI,EAC3BC,eAAO,GAAG,EACVC,mBAAW,EAAK,EACbC,EAAAC,EAAAL,EAAA,6FAGC,MAAAM,EAAYJ,EAAI,IAAK,IAAM,IAAM,4HANd,KAAI,6CACpB,IAAG,qDACC,GAAK,4BAQqB,MAAA,gCAAAA,EAAI,IAAK,IAAG,WAAcA,EAAI,IAAK,EAAE,mBAExEE,2FAIKH,EAAoB,qBACrBK,uDAEqBR,EAAK,CAAA,CAAA,aAZpC"}