@mozaic-ds/web-components 1.0.0-alpha.9 → 1.0.0-beta.1

package/dist/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","sources":["../node_modules/svelte/src/internal/client/dom/elements/bindings/input.js"],"sourcesContent":["import { DEV } from 'esm-env';\nimport { render_effect, teardown } from '../../../reactivity/effects.js';\nimport { listen_to_event_and_reset_event } from './shared.js';\nimport * as e from '../../../errors.js';\nimport { is } from '../../../proxy.js';\nimport { queue_micro_task } from '../../task.js';\nimport { hydrating } from '../../hydration.js';\nimport { untrack } from '../../../runtime.js';\nimport { is_runes } from '../../../context.js';\n\n/**\n * @param {HTMLInputElement} input\n * @param {() => unknown} get\n * @param {(value: unknown) => void} set\n * @returns {void}\n */\nexport function bind_value(input, get, set = get) {\n\tvar runes = is_runes();\n\n\tlisten_to_event_and_reset_event(input, 'input', (is_reset) => {\n\t\tif (DEV && input.type === 'checkbox') {\n\t\t\t// TODO should this happen in prod too?\n\t\t\te.bind_invalid_checkbox_value();\n\t\t}\n\n\t\t/** @type {any} */\n\t\tvar value = is_reset ? input.defaultValue : input.value;\n\t\tvalue = is_numberlike_input(input) ? to_number(value) : value;\n\t\tset(value);\n\n\t\t// In runes mode, respect any validation in accessors (doesn't apply in legacy mode,\n\t\t// because we use mutable state which ensures the render effect always runs)\n\t\tif (runes && value !== (value = get())) {\n\t\t\tvar start = input.selectionStart;\n\t\t\tvar end = input.selectionEnd;\n\n\t\t\t// the value is coerced on assignment\n\t\t\tinput.value = value ?? '';\n\n\t\t\t// Restore selection\n\t\t\tif (end !== null) {\n\t\t\t\tinput.selectionStart = start;\n\t\t\t\tinput.selectionEnd = Math.min(end, input.value.length);\n\t\t\t}\n\t\t}\n\t});\n\n\tif (\n\t\t// If we are hydrating and the value has since changed,\n\t\t// then use the updated value from the input instead.\n\t\t(hydrating && input.defaultValue !== input.value) ||\n\t\t// If defaultValue is set, then value == defaultValue\n\t\t// TODO Svelte 6: remove input.value check and set to empty string?\n\t\t(untrack(get) == null && input.value)\n\t) {\n\t\tset(is_numberlike_input(input) ? to_number(input.value) : input.value);\n\t}\n\n\trender_effect(() => {\n\t\tif (DEV && input.type === 'checkbox') {\n\t\t\t// TODO should this happen in prod too?\n\t\t\te.bind_invalid_checkbox_value();\n\t\t}\n\n\t\tvar value = get();\n\n\t\tif (is_numberlike_input(input) && value === to_number(input.value)) {\n\t\t\t// handles 0 vs 00 case (see https://github.com/sveltejs/svelte/issues/9959)\n\t\t\treturn;\n\t\t}\n\n\t\tif (input.type === 'date' && !value && !input.value) {\n\t\t\t// Handles the case where a temporarily invalid date is set (while typing, for example with a leading 0 for the day)\n\t\t\t// and prevents this state from clearing the other parts of the date input (see https://github.com/sveltejs/svelte/issues/7897)\n\t\t\treturn;\n\t\t}\n\n\t\t// don't set the value of the input if it's the same to allow\n\t\t// minlength to work properly\n\t\tif (value !== input.value) {\n\t\t\t// @ts-expect-error the value is coerced on assignment\n\t\t\tinput.value = value ?? '';\n\t\t}\n\t});\n}\n\n/** @type {Set<HTMLInputElement[]>} */\nconst pending = new Set();\n\n/**\n * @param {HTMLInputElement[]} inputs\n * @param {null | [number]} group_index\n * @param {HTMLInputElement} input\n * @param {() => unknown} get\n * @param {(value: unknown) => void} set\n * @returns {void}\n */\nexport function bind_group(inputs, group_index, input, get, set = get) {\n\tvar is_checkbox = input.getAttribute('type') === 'checkbox';\n\tvar binding_group = inputs;\n\n\t// needs to be let or related code isn't treeshaken out if it's always false\n\tlet hydration_mismatch = false;\n\n\tif (group_index !== null) {\n\t\tfor (var index of group_index) {\n\t\t\t// @ts-expect-error\n\t\t\tbinding_group = binding_group[index] ??= [];\n\t\t}\n\t}\n\n\tbinding_group.push(input);\n\n\tlisten_to_event_and_reset_event(\n\t\tinput,\n\t\t'change',\n\t\t() => {\n\t\t\t// @ts-ignore\n\t\t\tvar value = input.__value;\n\n\t\t\tif (is_checkbox) {\n\t\t\t\tvalue = get_binding_group_value(binding_group, value, input.checked);\n\t\t\t}\n\n\t\t\tset(value);\n\t\t},\n\t\t// TODO better default value handling\n\t\t() => set(is_checkbox ? [] : null)\n\t);\n\n\trender_effect(() => {\n\t\tvar value = get();\n\n\t\t// If we are hydrating and the value has since changed, then use the update value\n\t\t// from the input instead.\n\t\tif (hydrating && input.defaultChecked !== input.checked) {\n\t\t\thydration_mismatch = true;\n\t\t\treturn;\n\t\t}\n\n\t\tif (is_checkbox) {\n\t\t\tvalue = value || [];\n\t\t\t// @ts-ignore\n\t\t\tinput.checked = value.includes(input.__value);\n\t\t} else {\n\t\t\t// @ts-ignore\n\t\t\tinput.checked = is(input.__value, value);\n\t\t}\n\t});\n\n\tteardown(() => {\n\t\tvar index = binding_group.indexOf(input);\n\n\t\tif (index !== -1) {\n\t\t\tbinding_group.splice(index, 1);\n\t\t}\n\t});\n\n\tif (!pending.has(binding_group)) {\n\t\tpending.add(binding_group);\n\n\t\tqueue_micro_task(() => {\n\t\t\t// necessary to maintain binding group order in all insertion scenarios\n\t\t\tbinding_group.sort((a, b) => (a.compareDocumentPosition(b) === 4 ? -1 : 1));\n\t\t\tpending.delete(binding_group);\n\t\t});\n\t}\n\n\tqueue_micro_task(() => {\n\t\tif (hydration_mismatch) {\n\t\t\tvar value;\n\n\t\t\tif (is_checkbox) {\n\t\t\t\tvalue = get_binding_group_value(binding_group, value, input.checked);\n\t\t\t} else {\n\t\t\t\tvar hydration_input = binding_group.find((input) => input.checked);\n\t\t\t\t// @ts-ignore\n\t\t\t\tvalue = hydration_input?.__value;\n\t\t\t}\n\n\t\t\tset(value);\n\t\t}\n\t});\n}\n\n/**\n * @param {HTMLInputElement} input\n * @param {() => unknown} get\n * @param {(value: unknown) => void} set\n * @returns {void}\n */\nexport function bind_checked(input, get, set = get) {\n\tlisten_to_event_and_reset_event(input, 'change', (is_reset) => {\n\t\tvar value = is_reset ? input.defaultChecked : input.checked;\n\t\tset(value);\n\t});\n\n\tif (\n\t\t// If we are hydrating and the value has since changed,\n\t\t// then use the update value from the input instead.\n\t\t(hydrating && input.defaultChecked !== input.checked) ||\n\t\t// If defaultChecked is set, then checked == defaultChecked\n\t\tuntrack(get) == null\n\t) {\n\t\tset(input.checked);\n\t}\n\n\trender_effect(() => {\n\t\tvar value = get();\n\t\tinput.checked = Boolean(value);\n\t});\n}\n\n/**\n * @template V\n * @param {Array<HTMLInputElement>} group\n * @param {V} __value\n * @param {boolean} checked\n * @returns {V[]}\n */\nfunction get_binding_group_value(group, __value, checked) {\n\tvar value = new Set();\n\n\tfor (var i = 0; i < group.length; i += 1) {\n\t\tif (group[i].checked) {\n\t\t\t// @ts-ignore\n\t\t\tvalue.add(group[i].__value);\n\t\t}\n\t}\n\n\tif (!checked) {\n\t\tvalue.delete(__value);\n\t}\n\n\treturn Array.from(value);\n}\n\n/**\n * @param {HTMLInputElement} input\n */\nfunction is_numberlike_input(input) {\n\tvar type = input.type;\n\treturn type === 'number' || type === 'range';\n}\n\n/**\n * @param {string} value\n */\nfunction to_number(value) {\n\treturn value === '' ? null : +value;\n}\n\n/**\n * @param {HTMLInputElement} input\n * @param {() => FileList | null} get\n * @param {(value: FileList | null) => void} set\n */\nexport function bind_files(input, get, set = get) {\n\tlisten_to_event_and_reset_event(input, 'change', () => {\n\t\tset(input.files);\n\t});\n\n\tif (\n\t\t// If we are hydrating and the value has since changed,\n\t\t// then use the updated value from the input instead.\n\t\thydrating &&\n\t\tinput.files\n\t) {\n\t\tset(input.files);\n\t}\n\n\trender_effect(() => {\n\t\tinput.files = get();\n\t});\n}\n"],"names":["bind_value","input","get","set","runes","is_runes","listen_to_event_and_reset_event","is_reset","value","is_numberlike_input","to_number","start","end","hydrating","untrack","render_effect","pending","bind_group","inputs","group_index","is_checkbox","binding_group","hydration_mismatch","index","get_binding_group_value","is","teardown","queue_micro_task","a","b","hydration_input","bind_checked","group","__value","checked","i","type"],"mappings":"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","x_google_ignoreList":[0]}
+{"version":3,"file":"input.js","sources":["../node_modules/svelte/src/internal/client/dom/elements/bindings/input.js"],"sourcesContent":["import { DEV } from 'esm-env';\nimport { render_effect, teardown } from '../../../reactivity/effects.js';\nimport { listen_to_event_and_reset_event } from './shared.js';\nimport * as e from '../../../errors.js';\nimport { is } from '../../../proxy.js';\nimport { queue_micro_task } from '../../task.js';\nimport { hydrating } from '../../hydration.js';\nimport { untrack } from '../../../runtime.js';\nimport { is_runes } from '../../../context.js';\n\n/**\n * @param {HTMLInputElement} input\n * @param {() => unknown} get\n * @param {(value: unknown) => void} set\n * @returns {void}\n */\nexport function bind_value(input, get, set = get) {\n\tvar runes = is_runes();\n\n\tlisten_to_event_and_reset_event(input, 'input', (is_reset) => {\n\t\tif (DEV && input.type === 'checkbox') {\n\t\t\t// TODO should this happen in prod too?\n\t\t\te.bind_invalid_checkbox_value();\n\t\t}\n\n\t\t/** @type {any} */\n\t\tvar value = is_reset ? input.defaultValue : input.value;\n\t\tvalue = is_numberlike_input(input) ? to_number(value) : value;\n\t\tset(value);\n\n\t\t// In runes mode, respect any validation in accessors (doesn't apply in legacy mode,\n\t\t// because we use mutable state which ensures the render effect always runs)\n\t\tif (runes && value !== (value = get())) {\n\t\t\tvar start = input.selectionStart;\n\t\t\tvar end = input.selectionEnd;\n\n\t\t\t// the value is coerced on assignment\n\t\t\tinput.value = value ?? '';\n\n\t\t\t// Restore selection\n\t\t\tif (end !== null) {\n\t\t\t\tinput.selectionStart = start;\n\t\t\t\tinput.selectionEnd = Math.min(end, input.value.length);\n\t\t\t}\n\t\t}\n\t});\n\n\tif (\n\t\t// If we are hydrating and the value has since changed,\n\t\t// then use the updated value from the input instead.\n\t\t(hydrating && input.defaultValue !== input.value) ||\n\t\t// If defaultValue is set, then value == defaultValue\n\t\t// TODO Svelte 6: remove input.value check and set to empty string?\n\t\t(untrack(get) == null && input.value)\n\t) {\n\t\tset(is_numberlike_input(input) ? to_number(input.value) : input.value);\n\t}\n\n\trender_effect(() => {\n\t\tif (DEV && input.type === 'checkbox') {\n\t\t\t// TODO should this happen in prod too?\n\t\t\te.bind_invalid_checkbox_value();\n\t\t}\n\n\t\tvar value = get();\n\n\t\tif (is_numberlike_input(input) && value === to_number(input.value)) {\n\t\t\t// handles 0 vs 00 case (see https://github.com/sveltejs/svelte/issues/9959)\n\t\t\treturn;\n\t\t}\n\n\t\tif (input.type === 'date' && !value && !input.value) {\n\t\t\t// Handles the case where a temporarily invalid date is set (while typing, for example with a leading 0 for the day)\n\t\t\t// and prevents this state from clearing the other parts of the date input (see https://github.com/sveltejs/svelte/issues/7897)\n\t\t\treturn;\n\t\t}\n\n\t\t// don't set the value of the input if it's the same to allow\n\t\t// minlength to work properly\n\t\tif (value !== input.value) {\n\t\t\t// @ts-expect-error the value is coerced on assignment\n\t\t\tinput.value = value ?? '';\n\t\t}\n\t});\n}\n\n/** @type {Set<HTMLInputElement[]>} */\nconst pending = new Set();\n\n/**\n * @param {HTMLInputElement[]} inputs\n * @param {null | [number]} group_index\n * @param {HTMLInputElement} input\n * @param {() => unknown} get\n * @param {(value: unknown) => void} set\n * @returns {void}\n */\nexport function bind_group(inputs, group_index, input, get, set = get) {\n\tvar is_checkbox = input.getAttribute('type') === 'checkbox';\n\tvar binding_group = inputs;\n\n\t// needs to be let or related code isn't treeshaken out if it's always false\n\tlet hydration_mismatch = false;\n\n\tif (group_index !== null) {\n\t\tfor (var index of group_index) {\n\t\t\t// @ts-expect-error\n\t\t\tbinding_group = binding_group[index] ??= [];\n\t\t}\n\t}\n\n\tbinding_group.push(input);\n\n\tlisten_to_event_and_reset_event(\n\t\tinput,\n\t\t'change',\n\t\t() => {\n\t\t\t// @ts-ignore\n\t\t\tvar value = input.__value;\n\n\t\t\tif (is_checkbox) {\n\t\t\t\tvalue = get_binding_group_value(binding_group, value, input.checked);\n\t\t\t}\n\n\t\t\tset(value);\n\t\t},\n\t\t// TODO better default value handling\n\t\t() => set(is_checkbox ? [] : null)\n\t);\n\n\trender_effect(() => {\n\t\tvar value = get();\n\n\t\t// If we are hydrating and the value has since changed, then use the update value\n\t\t// from the input instead.\n\t\tif (hydrating && input.defaultChecked !== input.checked) {\n\t\t\thydration_mismatch = true;\n\t\t\treturn;\n\t\t}\n\n\t\tif (is_checkbox) {\n\t\t\tvalue = value || [];\n\t\t\t// @ts-ignore\n\t\t\tinput.checked = value.includes(input.__value);\n\t\t} else {\n\t\t\t// @ts-ignore\n\t\t\tinput.checked = is(input.__value, value);\n\t\t}\n\t});\n\n\tteardown(() => {\n\t\tvar index = binding_group.indexOf(input);\n\n\t\tif (index !== -1) {\n\t\t\tbinding_group.splice(index, 1);\n\t\t}\n\t});\n\n\tif (!pending.has(binding_group)) {\n\t\tpending.add(binding_group);\n\n\t\tqueue_micro_task(() => {\n\t\t\t// necessary to maintain binding group order in all insertion scenarios\n\t\t\tbinding_group.sort((a, b) => (a.compareDocumentPosition(b) === 4 ? -1 : 1));\n\t\t\tpending.delete(binding_group);\n\t\t});\n\t}\n\n\tqueue_micro_task(() => {\n\t\tif (hydration_mismatch) {\n\t\t\tvar value;\n\n\t\t\tif (is_checkbox) {\n\t\t\t\tvalue = get_binding_group_value(binding_group, value, input.checked);\n\t\t\t} else {\n\t\t\t\tvar hydration_input = binding_group.find((input) => input.checked);\n\t\t\t\t// @ts-ignore\n\t\t\t\tvalue = hydration_input?.__value;\n\t\t\t}\n\n\t\t\tset(value);\n\t\t}\n\t});\n}\n\n/**\n * @param {HTMLInputElement} input\n * @param {() => unknown} get\n * @param {(value: unknown) => void} set\n * @returns {void}\n */\nexport function bind_checked(input, get, set = get) {\n\tlisten_to_event_and_reset_event(input, 'change', (is_reset) => {\n\t\tvar value = is_reset ? input.defaultChecked : input.checked;\n\t\tset(value);\n\t});\n\n\tif (\n\t\t// If we are hydrating and the value has since changed,\n\t\t// then use the update value from the input instead.\n\t\t(hydrating && input.defaultChecked !== input.checked) ||\n\t\t// If defaultChecked is set, then checked == defaultChecked\n\t\tuntrack(get) == null\n\t) {\n\t\tset(input.checked);\n\t}\n\n\trender_effect(() => {\n\t\tvar value = get();\n\t\tinput.checked = Boolean(value);\n\t});\n}\n\n/**\n * @template V\n * @param {Array<HTMLInputElement>} group\n * @param {V} __value\n * @param {boolean} checked\n * @returns {V[]}\n */\nfunction get_binding_group_value(group, __value, checked) {\n\tvar value = new Set();\n\n\tfor (var i = 0; i < group.length; i += 1) {\n\t\tif (group[i].checked) {\n\t\t\t// @ts-ignore\n\t\t\tvalue.add(group[i].__value);\n\t\t}\n\t}\n\n\tif (!checked) {\n\t\tvalue.delete(__value);\n\t}\n\n\treturn Array.from(value);\n}\n\n/**\n * @param {HTMLInputElement} input\n */\nfunction is_numberlike_input(input) {\n\tvar type = input.type;\n\treturn type === 'number' || type === 'range';\n}\n\n/**\n * @param {string} value\n */\nfunction to_number(value) {\n\treturn value === '' ? null : +value;\n}\n\n/**\n * @param {HTMLInputElement} input\n * @param {() => FileList | null} get\n * @param {(value: FileList | null) => void} set\n */\nexport function bind_files(input, get, set = get) {\n\tlisten_to_event_and_reset_event(input, 'change', () => {\n\t\tset(input.files);\n\t});\n\n\tif (\n\t\t// If we are hydrating and the value has since changed,\n\t\t// then use the updated value from the input instead.\n\t\thydrating &&\n\t\tinput.files\n\t) {\n\t\tset(input.files);\n\t}\n\n\trender_effect(() => {\n\t\tinput.files = get();\n\t});\n}\n"],"names":["bind_value","input","get","set","runes","is_runes","listen_to_event_and_reset_event","is_reset","value","is_numberlike_input","to_number","start","end","hydrating","untrack","render_effect","pending","bind_group","inputs","group_index","is_checkbox","binding_group","hydration_mismatch","index","get_binding_group_value","is","teardown","queue_micro_task","a","b","hydration_input","bind_checked","group","__value","checked","i","type"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/legacy.js

@@ -0,0 +1,2 @@
+import{X as a}from"./custom-element.js";a();
+//# sourceMappingURL=legacy.js.map

package/dist/legacy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"legacy.js","sources":["../node_modules/svelte/src/internal/flags/legacy.js"],"sourcesContent":["import { enable_legacy_mode_flag } from './index.js';\n\nenable_legacy_mode_flag();\n"],"names":["enable_legacy_mode_flag"],"mappings":"wCAEAA,EAAyB","x_google_ignoreList":[0]}

package/dist/main.d.ts

@@ -1,6 +1,7 @@
 import Button from './components/button/Button.svelte';
+import IconButton from './components/button/IconButton.svelte';
 import Checkbox from './components/checkbox/Checkbox.svelte';
-import CheckboxGroup from './components/checkboxgroup/checkboxGroup.svelte';
+import CheckboxGroup from './components/checkboxgroup/CheckboxGroup.svelte';
 import Textarea from './components/textarea/Textarea.svelte';
 import Select from './components/select/Select.svelte';
 import Toggle from './components/toggle/Toggle.svelte';
@@ -13,6 +14,11 @@ import OverlayLoader from './components/overlay/OverlayLoader.svelte';
 import Radio from './components/radio/Radio.svelte';
 import RadioGroup from './components/radiogroup/RadioGroup.svelte';
 import QuantitySelector from './components/quantityselector/QuantitySelector.svelte';
-import Badge from './components/badge/Badge.svelte';
-export { Button, Checkbox, CheckboxGroup, Textarea, Select, Toggle, Field, Link, Loader, Textinput, Overlay, OverlayLoader, Radio, RadioGroup, QuantitySelector, Badge, };
+import NumberBadge from './components/number-badge/NumberBadge.svelte';
+import StatusBadge from './components/statusbadge/StatusBadge.svelte';
+import ToggleGroup from './components/togglegroup/ToggleGroup.svelte';
+import Breadcrumb from './components/breadcrumb/Breadcrumb.svelte';
+import StatusNotification from './components/statusnotification/StatusNotification.svelte';
+import PasswordInput from './components/passwordinput/PasswordInput.svelte';
+export { Button, IconButton, Checkbox, CheckboxGroup, Textarea, Select, Toggle, Field, Link, Loader, Textinput, Overlay, OverlayLoader, Radio, RadioGroup, QuantitySelector, NumberBadge, StatusBadge, ToggleGroup, Breadcrumb, StatusNotification, PasswordInput, };
 //# 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,QAAQ,MAAM,uCAAuC,CAAC;AAC7D,OAAO,aAAa,MAAM,iDAAiD,CAAC;AAC5E,OAAO,QAAQ,MAAM,uCAAuC,CAAC;AAC7D,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,KAAK,MAAM,iCAAiC,CAAC;AACpD,OAAO,IAAI,MAAM,+BAA+B,CAAC;AACjD,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,SAAS,MAAM,yCAAyC,CAAC;AAChE,OAAO,OAAO,MAAM,qCAAqC,CAAC;AAC1D,OAAO,aAAa,MAAM,2CAA2C,CAAC;AACtE,OAAO,KAAK,MAAM,iCAAiC,CAAC;AACpD,OAAO,UAAU,MAAM,2CAA2C,CAAC;AACnE,OAAO,gBAAgB,MAAM,uDAAuD,CAAC;AACrF,OAAO,KAAK,MAAM,iCAAiC,CAAC;AAEpD,OAAO,EACL,MAAM,EACN,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,MAAM,EACN,MAAM,EACN,KAAK,EACL,IAAI,EACJ,MAAM,EACN,SAAS,EACT,OAAO,EACP,aAAa,EACb,KAAK,EACL,UAAU,EACV,gBAAgB,EAChB,KAAK,GACN,CAAC"}
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,UAAU,MAAM,uCAAuC,CAAC;AAC/D,OAAO,QAAQ,MAAM,uCAAuC,CAAC;AAC7D,OAAO,aAAa,MAAM,iDAAiD,CAAC;AAC5E,OAAO,QAAQ,MAAM,uCAAuC,CAAC;AAC7D,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,KAAK,MAAM,iCAAiC,CAAC;AACpD,OAAO,IAAI,MAAM,+BAA+B,CAAC;AACjD,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,SAAS,MAAM,yCAAyC,CAAC;AAChE,OAAO,OAAO,MAAM,qCAAqC,CAAC;AAC1D,OAAO,aAAa,MAAM,2CAA2C,CAAC;AACtE,OAAO,KAAK,MAAM,iCAAiC,CAAC;AACpD,OAAO,UAAU,MAAM,2CAA2C,CAAC;AACnE,OAAO,gBAAgB,MAAM,uDAAuD,CAAC;AACrF,OAAO,WAAW,MAAM,8CAA8C,CAAC;AACvE,OAAO,WAAW,MAAM,6CAA6C,CAAC;AACtE,OAAO,WAAW,MAAM,6CAA6C,CAAC;AACtE,OAAO,UAAU,MAAM,2CAA2C,CAAC;AACnE,OAAO,kBAAkB,MAAM,2DAA2D,CAAC;AAC3F,OAAO,aAAa,MAAM,iDAAiD,CAAC;AAE5E,OAAO,EACL,MAAM,EACN,UAAU,EACV,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,MAAM,EACN,MAAM,EACN,KAAK,EACL,IAAI,EACJ,MAAM,EACN,SAAS,EACT,OAAO,EACP,aAAa,EACb,KAAK,EACL,UAAU,EACV,gBAAgB,EAChB,WAAW,EACX,WAAW,EACX,WAAW,EACX,UAAU,EACV,kBAAkB,EAClB,aAAa,GACd,CAAC"}

package/dist/main.js

@@ -1,6 +1,7 @@
 import Button from './components/button/Button.svelte';
+import IconButton from './components/button/IconButton.svelte';
 import Checkbox from './components/checkbox/Checkbox.svelte';
-import CheckboxGroup from './components/checkboxgroup/checkboxGroup.svelte';
+import CheckboxGroup from './components/checkboxgroup/CheckboxGroup.svelte';
 import Textarea from './components/textarea/Textarea.svelte';
 import Select from './components/select/Select.svelte';
 import Toggle from './components/toggle/Toggle.svelte';
@@ -13,5 +14,10 @@ import OverlayLoader from './components/overlay/OverlayLoader.svelte';
 import Radio from './components/radio/Radio.svelte';
 import RadioGroup from './components/radiogroup/RadioGroup.svelte';
 import QuantitySelector from './components/quantityselector/QuantitySelector.svelte';
-import Badge from './components/badge/Badge.svelte';
-export { Button, Checkbox, CheckboxGroup, Textarea, Select, Toggle, Field, Link, Loader, Textinput, Overlay, OverlayLoader, Radio, RadioGroup, QuantitySelector, Badge, };
+import NumberBadge from './components/number-badge/NumberBadge.svelte';
+import StatusBadge from './components/statusbadge/StatusBadge.svelte';
+import ToggleGroup from './components/togglegroup/ToggleGroup.svelte';
+import Breadcrumb from './components/breadcrumb/Breadcrumb.svelte';
+import StatusNotification from './components/statusnotification/StatusNotification.svelte';
+import PasswordInput from './components/passwordinput/PasswordInput.svelte';
+export { Button, IconButton, Checkbox, CheckboxGroup, Textarea, Select, Toggle, Field, Link, Loader, Textinput, Overlay, OverlayLoader, Radio, RadioGroup, QuantitySelector, NumberBadge, StatusBadge, ToggleGroup, Breadcrumb, StatusNotification, PasswordInput, };

package/dist/slot.js

@@ -1,2 +1,2 @@
-import{a1 as r,ac as l}from"./custom-element.js";function d(i,t,e,a,o){var f;r&&l();var n=(f=t.$$slots)==null?void 0:f[e],s=!1;n===!0&&(n=t[e==="default"?"children":e],s=!0),n===void 0||n(i,s?()=>a:a)}function c(i){const t={};i.children&&(t.default=!0);for(const e in i.$$slots)t[e]=!0;return t}export{d as a,c as s};
+import{C as n,D 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};
 //# 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","sanitize_slots","props","sanitized","key"],"mappings":"iDASO,SAASA,EAAKC,EAAQC,EAASC,EAAMC,EAAYC,EAAa,OAChEC,GACHC,EAAc,EAGf,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,CAMO,SAASO,EAAeC,EAAO,CAErC,MAAMC,EAAY,CAAE,EAChBD,EAAM,WAAUC,EAAU,QAAU,IACxC,UAAWC,KAAOF,EAAM,QACvBC,EAAUC,CAAG,EAAI,GAElB,OAAOD,CACR","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","_a","is_interop"],"mappings":"+CASO,SAASA,EAAKC,EAAQC,EAASC,EAAMC,EAAYC,EAAa,OAChEC,GACHC,EAAc,EAGf,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]}

package/dist/stories/breadcrumb/Breadcrumb.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryFn } from '@storybook/html';
+declare const _default: Meta;
+export default _default;
+export declare const Default: StoryFn;
+export declare const Inverse: StoryFn;
+//# sourceMappingURL=Breadcrumb.stories.d.ts.map

package/dist/stories/breadcrumb/Breadcrumb.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/breadcrumb/Breadcrumb.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;wBA4BhD,IAAI;AAxBT,wBAwBU;AAsBV,eAAO,MAAM,OAAO,SAAoB,CAAC;AAsBzC,eAAO,MAAM,OAAO,SAAoB,CAAC"}

package/dist/stories/breadcrumb/Breadcrumb.stories.js

@@ -0,0 +1,78 @@
+import { within, expect } from '@storybook/test';
+// --- Documentation setup
+export default {
+    title: 'Navigation/Breadcrumb',
+    tags: ['autodocs', 'new'],
+    parameters: {
+        docs: {
+            description: {
+                component: 'A breadcrumb displays the hierarchical path to the current page and helps users navigate back to previous levels easily.<br/>' +
+                    'The `m-breadcrumb` component is the **Svelte / WebComponent** implementation of the **Breadcrumb** from the Mozaic Design System.<br/>' +
+                    'See the [Mozaic documentation](https://mozaic.adeo.cloud/components/breadcrumb/) for design guidelines.',
+            },
+        },
+    },
+    argTypes: {
+        appearance: {
+            description: 'Define the visual appearance of the breadcrumb',
+            control: { type: 'select' },
+            options: ['standard', 'inverse'],
+        },
+        links: {
+            description: 'List of breadcrumb links (label + href)',
+            control: 'object',
+        },
+    },
+};
+// --- Template function
+const Template = (args) => {
+    const breadcrumb = document.createElement('m-breadcrumb');
+    breadcrumb.setAttribute('appearance', args.appearance || 'standard');
+    // Inject links directly as property
+    breadcrumb.links = args.links || [];
+    return breadcrumb;
+};
+// --- Base args
+const baseLinks = [
+    { label: 'Home', href: '#' },
+    { label: 'level 01', href: '#' },
+    { label: 'level 02', href: '#' },
+    { label: 'Current Page', href: '#' },
+];
+// --- Default story
+export const Default = Template.bind({});
+Default.args = {
+    appearance: 'standard',
+    links: baseLinks,
+};
+Default.play = async ({ canvasElement }) => {
+    const breadcrumbEl = canvasElement.querySelector('m-breadcrumb');
+    const shadowRoot = breadcrumbEl?.shadowRoot;
+    if (!shadowRoot)
+        throw new Error('ShadowRoot not found');
+    const links = shadowRoot.querySelectorAll('a');
+    expect(links.length).toBe(4);
+    const lastLink = links[links.length - 1];
+    expect(lastLink.classList.contains('mc-breadcrumb__current')).toBe(true);
+    const nav = shadowRoot.querySelector('nav');
+    expect(nav?.classList.contains('mc-breadcrumb--standard')).toBe(true);
+};
+// --- Inverse appearance story
+export const Inverse = Template.bind({});
+Inverse.parameters = {
+    backgrounds: {
+        default: 'Inverse',
+    },
+};
+Inverse.args = {
+    appearance: 'inverse',
+    links: baseLinks,
+};
+Inverse.play = async ({ canvasElement }) => {
+    const breadcrumbEl = canvasElement.querySelector('m-breadcrumb');
+    const shadowRoot = breadcrumbEl?.shadowRoot;
+    if (!shadowRoot)
+        throw new Error('ShadowRoot not found');
+    const nav = shadowRoot.querySelector('nav');
+    expect(nav?.classList.contains('mc-breadcrumb--inverse')).toBe(true);
+};

package/dist/stories/button/Button.stories.d.ts

@@ -1,4 +1,10 @@
 import type { StoryFn, Meta } from '@storybook/html';
+/**
+ * Buttons are used to trigger actions. Their appearance depends on the type of action required from the user or the context.
+ *
+ * The `MButton` component is the **Svelte / WebComponent** implementation of the **Button** component of Mozaic Design System.
+ * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/buttons/).
+ */
 declare const _default: Meta;
 export default _default;
 export declare const Filled: StoryFn;

package/dist/stories/button/Button.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/button/Button.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;wBAwEhD,IAAI;AA7DT,wBA6DU;AAyBV,eAAO,MAAM,MAAM,SAAoB,CAAC;AAUxC,eAAO,MAAM,QAAQ,SAAoB,CAAC;AAc1C,eAAO,MAAM,KAAK,SAAoB,CAAC;AAqBvC,eAAO,MAAM,IAAI,SAAoB,CAAC"}
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/button/Button.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAErD;;;;;GAKG;wBA8DE,IAAI;AA5DT,wBA4DU;AA6BV,eAAO,MAAM,MAAM,SAAoB,CAAC;AAUxC,eAAO,MAAM,QAAQ,SAAoB,CAAC;AAc1C,eAAO,MAAM,KAAK,SAAoB,CAAC;AAqBvC,eAAO,MAAM,IAAI,SAAoB,CAAC"}

package/dist/stories/button/Button.stories.js

@@ -1,8 +1,15 @@
 import { action } from '@storybook/addon-actions';
-import { BADGE } from '@geometricpanda/storybook-addon-badges';
 import { userEvent, expect, within, fn } from '@storybook/test';
+/**
+ * Buttons are used to trigger actions. Their appearance depends on the type of action required from the user or the context.
+ *
+ * The `MButton` component is the **Svelte / WebComponent** implementation of the **Button** component of Mozaic Design System.
+ * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/buttons/).
+ */
 export default {
     title: 'Action/Button',
+    tags: ['autodocs', 'beta', 'version:2.0.0'],
+    context: 'sidebar',
     args: {
         size: 'm',
     },
@@ -57,9 +64,6 @@ export default {
             },
         },
     },
-    parameters: {
-        badges: [BADGE.STABLE],
-    },
 };
 const Template = (args) => {
     const primary = document.createElement('m-button');
@@ -70,7 +74,11 @@ const Template = (args) => {
     primary.addEventListener('click', action('click'));
     const label = document.createElement('span');
     label.innerText = 'Button Label';
+    const icon = document.createElement('ui-chevron-right-32');
+    icon.setAttribute('slot', 'icon');
+    icon.setAttribute('style', 'height: 100%');
     primary.appendChild(label);
+    primary.appendChild(icon);
     if (args.outlined)
         primary.setAttribute('outlined', 'true');
     if (args.ghost)
@@ -80,9 +88,9 @@ const Template = (args) => {
     if (args.disabled)
         primary.setAttribute('disabled', 'true');
     if (args.iconmode)
-        primary.setAttribute('iconmode', args.iconmode);
-    if (args.iconname)
-        primary.setAttribute('iconname', args.iconname);
+        primary.setAttribute('iconmode', args.iconmode || 'left');
+    if (args.hasiconslot)
+        primary.setAttribute('hasiconslot', args.hasiconslot);
     if (args.isloading)
         primary.setAttribute('isloading', args.isloading);
     return primary;
@@ -91,7 +99,7 @@ export const Filled = Template.bind({});
 Filled.args = {};
 Filled.play = async ({ canvasElement }) => {
     const MButton = canvasElement.querySelector('m-button');
-    const button = MButton === null || MButton === void 0 ? void 0 : MButton.shadowRoot.querySelector('button');
+    const button = MButton?.shadowRoot.querySelector('button');
     expect(button).not.toBeNull();
     await userEvent.click(button);
     expect(MButton).toHaveTextContent('Button Label');
@@ -103,7 +111,7 @@ Outlined.args = {
 };
 Outlined.play = async ({ canvasElement }) => {
     const MButton = canvasElement.querySelector('m-button');
-    const button = MButton === null || MButton === void 0 ? void 0 : MButton.shadowRoot.querySelector('button');
+    const button = MButton?.shadowRoot.querySelector('button');
     expect(button).not.toBeNull();
     await userEvent.click(button);
     expect(MButton).toHaveTextContent('Button Label');
@@ -123,7 +131,7 @@ Ghost.argTypes = {
 };
 Ghost.play = async ({ canvasElement }) => {
     const MButton = canvasElement.querySelector('m-button');
-    const button = MButton === null || MButton === void 0 ? void 0 : MButton.shadowRoot.querySelector('button');
+    const button = MButton?.shadowRoot.querySelector('button');
     expect(button).not.toBeNull();
     await userEvent.click(button);
     expect(MButton).toHaveTextContent('Button Label');
@@ -131,7 +139,7 @@ Ghost.play = async ({ canvasElement }) => {
 };
 export const Icon = Template.bind({});
 Icon.args = {
-    iconname: 'ui-chevron-right-32',
+    hasiconslot: true,
     iconmode: 'left',
 };
 Icon.argTypes = {
@@ -144,8 +152,7 @@ Icon.argTypes = {
 Icon.play = async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const MButton = canvasElement.querySelector('m-button');
-    const button = MButton === null || MButton === void 0 ? void 0 : MButton.shadowRoot.querySelector('button');
+    const button = MButton?.shadowRoot.querySelector('button');
     expect(button).not.toBeNull();
     await userEvent.click(MButton);
-    expect(MButton).toHaveAttribute('iconname', 'ui-chevron-right-32');
 };

package/dist/stories/button/IconButton.stories.d.ts

@@ -1,4 +1,9 @@
 import type { StoryFn, Meta } from '@storybook/html';
+/**
+ * Icon Buttons are used to trigger actions where an icon is preferable over text.
+ * The `MIconButton` component is the **Svelte / WebComponent** implementation of the **Icon Button** component of Mozaic Design System.
+ * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/buttons/).
+ */
 declare const _default: Meta;
 export default _default;
 export declare const Filled: StoryFn;

package/dist/stories/button/IconButton.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/button/IconButton.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;wBAsBhD,IAAI;AAXT,wBAWU;AAmBV,eAAO,MAAM,MAAM,SAAoB,CAAC;AAUxC,eAAO,MAAM,QAAQ,SAAoB,CAAC;AAa1C,eAAO,MAAM,KAAK,SAAoB,CAAC"}
+{"version":3,"file":"IconButton.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/button/IconButton.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAIrD;;;;GAIG;wBAWE,IAAI;AATT,wBASU;AAsBV,eAAO,MAAM,MAAM,SAAoB,CAAC;AAUxC,eAAO,MAAM,QAAQ,SAAoB,CAAC;AAY1C,eAAO,MAAM,KAAK,SAAoB,CAAC"}

package/dist/stories/button/IconButton.stories.js

@@ -1,13 +1,19 @@
 import { action } from '@storybook/addon-actions';
-import { BADGE } from '@geometricpanda/storybook-addon-badges';
 import { userEvent, within, expect } from '@storybook/test';
 import * as ButtonStories from './Button.stories';
+/**
+ * Icon Buttons are used to trigger actions where an icon is preferable over text.
+ * The `MIconButton` component is the **Svelte / WebComponent** implementation of the **Icon Button** component of Mozaic Design System.
+ * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/buttons/).
+ */
 export default {
     title: 'Action/Icon Button',
-    args: Object.assign({}, ButtonStories.default.args),
-    argTypes: Object.assign({}, ButtonStories.default.argTypes),
-    parameters: {
-        badges: [BADGE.STABLE],
+    tags: ['autodocs', 'new'],
+    args: {
+        ...ButtonStories.default.args,
+    },
+    argTypes: {
+        ...ButtonStories.default.argTypes,
     },
 };
 const Template = (args) => {
@@ -16,7 +22,10 @@ const Template = (args) => {
     primary.setAttribute('type', args.type);
     primary.setAttribute('appearance', args.appearance || 'standard');
     primary.setAttribute('size', args.size);
-    primary.setAttribute('iconname', args.iconname || 'ui-chevron-right-24');
+    const icon = document.createElement('ui-chevron-right-24');
+    icon.setAttribute('slot', 'icon');
+    icon.setAttribute('style', 'height: 100%');
+    primary.appendChild(icon);
     primary.addEventListener('click', action('click'));
     if (args.outlined)
         primary.setAttribute('outlined', 'true');
@@ -29,8 +38,8 @@ const Template = (args) => {
 export const Filled = Template.bind({});
 Filled.args = {};
 Filled.play = async ({ canvasElement }) => {
-    const button = within(canvasElement).getByRole('button');
     const MIconButton = canvasElement.querySelector('m-icon-button');
+    const button = MIconButton?.shadowRoot.querySelector('button');
     expect(button).not.toBeNull();
     await userEvent.click(button);
     expect(MIconButton).toHaveAttribute('appearance', 'standard');
@@ -40,12 +49,11 @@ Outlined.args = {
     outlined: true,
 };
 Outlined.play = async ({ canvasElement }) => {
-    const button = within(canvasElement).getByRole('button');
     const MIconButton = canvasElement.querySelector('m-icon-button');
+    const button = MIconButton?.shadowRoot.querySelector('button');
     expect(button).not.toBeNull();
     await userEvent.click(button);
     expect(MIconButton).toHaveAttribute('outlined', 'true');
-    expect(MIconButton).toHaveAttribute('iconname', 'ui-chevron-right-24');
 };
 export const Ghost = Template.bind({});
 Ghost.args = {
@@ -59,10 +67,9 @@ Ghost.argTypes = {
     },
 };
 Ghost.play = async ({ canvasElement }) => {
-    const button = within(canvasElement).getByRole('button');
     const MIconButton = canvasElement.querySelector('m-icon-button');
+    const button = MIconButton?.shadowRoot.querySelector('button');
     expect(button).not.toBeNull();
     await userEvent.click(button);
     expect(MIconButton).toHaveAttribute('ghost', 'true');
-    expect(MIconButton).toHaveAttribute('iconname', 'ui-chevron-right-24');
 };

package/dist/stories/checkbox/Checkbox.stories.d.ts

@@ -1,4 +1,11 @@
-import type { StoryFn, Meta } from '@storybook/html';
+import type { Meta, StoryFn } from '@storybook/html';
+/**
+ * Checkboxes are used to select one or multiple options in a list.
+ * They usually find their place in forms and are also used to accept terms.
+ *
+ * The `MCheckbox` component is the **Svelte / WebComponent** implementation of the **Checkbox** component of Mozaic Design System.
+ * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/form/checkbox/).
+ */
 declare const _default: Meta;
 export default _default;
 export declare const Default: StoryFn;

package/dist/stories/checkbox/Checkbox.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/checkbox/Checkbox.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;wBAsDhD,IAAI;AA1CT,wBA0CU;AAgBV,eAAO,MAAM,OAAO,SAAoB,CAAC;AASzC,eAAO,MAAM,OAAO,SAAoB,CAAC;AAUzC,eAAO,MAAM,aAAa,SAAoB,CAAC;AAU/C,eAAO,MAAM,QAAQ,SAAoB,CAAC;AAU1C,eAAO,MAAM,OAAO,SAAoB,CAAC"}
+{"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/checkbox/Checkbox.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAGrD;;;;;;GAMG;wBAiDE,IAAI;AA/CT,wBA+CU;AAkBV,eAAO,MAAM,OAAO,SAAoB,CAAC;AASzC,eAAO,MAAM,OAAO,SAAoB,CAAC;AAUzC,eAAO,MAAM,aAAa,SAAoB,CAAC;AAU/C,eAAO,MAAM,QAAQ,SAAoB,CAAC;AAU1C,eAAO,MAAM,OAAO,SAAoB,CAAC"}

package/dist/stories/checkbox/Checkbox.stories.js

@@ -1,8 +1,15 @@
 import { action } from '@storybook/addon-actions';
-import { BADGE } from '@geometricpanda/storybook-addon-badges';
-import { userEvent, within, expect } from '@storybook/test';
+import { expect, userEvent } from '@storybook/test';
+/**
+ * Checkboxes are used to select one or multiple options in a list.
+ * They usually find their place in forms and are also used to accept terms.
+ *
+ * The `MCheckbox` component is the **Svelte / WebComponent** implementation of the **Checkbox** component of Mozaic Design System.
+ * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/form/checkbox/).
+ */
 export default {
     title: 'Form Elements/Checkbox',
+    tags: ['autodocs', 'beta'],
     argTypes: {
         label: {
             description: 'Specify the label of the checkbox',
@@ -16,7 +23,7 @@ export default {
             description: 'Specify the id of the checkbox',
             control: 'text',
         },
-        ischecked: {
+        checked: {
             description: 'Determine whether the checkbox is checked',
             control: 'boolean',
         },
@@ -39,17 +46,23 @@ export default {
                 category: 'Events',
             },
         },
-    },
-    parameters: {
-        badges: [BADGE.STABLE],
+        onBlur: {
+            description: 'Event that occurs when the checkbox state is blurred',
+            action: 'blur',
+            table: {
+                category: 'Events',
+            },
+        },
     },
 };
 const Template = (args) => {
     const checkbox = document.createElement('m-checkbox');
     checkbox.setAttribute('name', args.name || 'checkbox');
     checkbox.setAttribute('label', args.label || 'Checkbox label');
-    if (args.ischecked)
-        checkbox.setAttribute('ischecked', 'true');
+    if (args.id)
+        checkbox.setAttribute('id', args.id);
+    if (args.checked)
+        checkbox.setAttribute('checked', 'true');
     if (args.indeterminate)
         checkbox.setAttribute('indeterminate', 'true');
     if (args.disabled)
@@ -57,23 +70,24 @@ const Template = (args) => {
     if (args.isinvalid)
         checkbox.setAttribute('isinvalid', 'true');
     checkbox.addEventListener('change', action('onChange'));
+    checkbox.addEventListener('blur', action('onBlur'));
     return checkbox;
 };
 export const Default = Template.bind({});
 Default.play = async ({ canvasElement }) => {
     const checkbox = canvasElement.querySelector('m-checkbox');
-    const input = checkbox === null || checkbox === void 0 ? void 0 : checkbox.shadowRoot.querySelector('input');
+    const input = checkbox?.shadowRoot?.querySelector('input');
     expect(checkbox).not.toBeNull();
     await userEvent.click(input);
     expect(input).toBeChecked();
 };
 export const Checked = Template.bind({});
 Checked.args = {
-    ischecked: true,
+    checked: true,
 };
 Checked.play = async ({ canvasElement }) => {
     const checkbox = canvasElement.querySelector('m-checkbox');
-    const input = checkbox === null || checkbox === void 0 ? void 0 : checkbox.shadowRoot.querySelector('input');
+    const input = checkbox?.shadowRoot?.querySelector('input');
     expect(input).toBeChecked();
 };
 export const Indeterminate = Template.bind({});
@@ -82,8 +96,8 @@ Indeterminate.args = {
 };
 Indeterminate.play = async ({ canvasElement }) => {
     const checkbox = canvasElement.querySelector('m-checkbox');
-    const input = checkbox === null || checkbox === void 0 ? void 0 : checkbox.shadowRoot.querySelector('input');
-    expect(checkbox).toHaveAttribute('indeterminate', 'true');
+    const input = checkbox?.shadowRoot?.querySelector('input');
+    expect(input?.indeterminate).toBeTruthy();
 };
 export const Disabled = Template.bind({});
 Disabled.args = {
@@ -91,8 +105,8 @@ Disabled.args = {
 };
 Disabled.play = async ({ canvasElement }) => {
     const checkbox = canvasElement.querySelector('m-checkbox');
-    const input = checkbox === null || checkbox === void 0 ? void 0 : checkbox.shadowRoot.querySelector('input');
-    expect(checkbox).toBeDisabled();
+    const input = checkbox?.shadowRoot?.querySelector('input');
+    expect(input).toBeDisabled();
 };
 export const Invalid = Template.bind({});
 Invalid.args = {
@@ -100,6 +114,6 @@ Invalid.args = {
 };
 Invalid.play = async ({ canvasElement }) => {
     const checkbox = canvasElement.querySelector('m-checkbox');
-    const input = checkbox === null || checkbox === void 0 ? void 0 : checkbox.shadowRoot.querySelector('input');
-    expect(checkbox).toHaveAttribute('isinvalid', 'true');
+    const input = checkbox?.shadowRoot?.querySelector('input');
+    expect(input).toHaveAttribute('aria-invalid', 'true');
 };

package/dist/stories/checkbox-group/Checkbox-group.stories.d.ts

@@ -1,4 +1,11 @@
 import type { StoryFn, Meta } from '@storybook/html';
+/**
+ * Checkbox Groups are used to manage multiple checkbox selections within a group.
+ * They usually find their place in forms and allow users to choose multiple options.
+ *
+ * The `MCheckboxGroup` component is the **Svelte / WebComponent** implementation of the **Checkbox group** component of Mozaic Design System.
+ * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/form/checkbox/#checkbox-group).
+ */
 declare const _default: Meta;
 export default _default;
 export declare const Default: StoryFn;

package/dist/stories/checkbox-group/Checkbox-group.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox-group.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/checkbox-group/Checkbox-group.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;wBA2ChD,IAAI;AA/BT,wBA+BU;AAYV,eAAO,MAAM,OAAO,SAAoB,CAAC;AAmCzC,eAAO,MAAM,UAAU,SAAoB,CAAC;AAgC5C,eAAO,MAAM,YAAY,SAAoB,CAAC"}
+{"version":3,"file":"Checkbox-group.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/checkbox-group/Checkbox-group.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAGrD;;;;;;GAMG;wBAsCE,IAAI;AApCT,wBAoCU;AAaV,eAAO,MAAM,OAAO,SAAoB,CAAC;AAiCzC,eAAO,MAAM,UAAU,SAAoB,CAAC;AA+B5C,eAAO,MAAM,YAAY,SAAoB,CAAC"}