@six-group/ui-library 5.0.0 → 5.1.0-rc.1

package/dist/components/six-textarea.js

@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, c as createEvent, h } from './p-D512q9rn.js
 import { F as FormControl } from './p-DIkvCBxr.js';
 import { h as hasSlot } from './p-j3oIB5oT.js';
 import { E as EventListeners } from './p-C4h4qpGl.js';
-import { d as defineCustomElement$2 } from './p-CWKq6Dyt.js';
+import { d as defineCustomElement$2 } from './p-BLocui1Z.js';
 
 const sixTextareaCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none;text-align:left}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:\"*\";transform:scale(1.1);margin-left:var(--six-spacing-xxx-small);position:absolute}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{--height:100%;display:block}.textarea{display:flex;align-items:center;position:relative;width:100%;font-family:var(--six-font-family);font-weight:var(--six-input-font-weight);line-height:var(--six-line-height-normal);letter-spacing:var(--six-input-letter-spacing);background-color:var(--six-input-background-color);border:solid var(--six-border-width) var(--six-input-border-color);vertical-align:middle;transition:var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;cursor:text}.textarea:hover:not(.textarea--disabled){background-color:var(--six-input-background-color-hover);border-color:var(--six-input-border-color-hover)}.textarea:hover:not(.textarea--disabled) .textarea__control{color:var(--six-input-color-hover)}.textarea.textarea--focused:not(.textarea--disabled){background-color:var(--six-input-background-color-focus);box-shadow:var(--six-input-focus-shadow);border-color:var(--six-input-border-color-focus);color:var(--six-input-color-focus)}.textarea.textarea--focused:not(.textarea--disabled) .textarea__control{color:var(--six-input-color-focus)}.textarea.textarea--disabled{background-color:var(--six-input-background-color-disabled);border-color:var(--six-input-border-color-disabled);cursor:not-allowed}.textarea.textarea--disabled .textarea__control{color:var(--six-input-color-disabled)}.textarea.textarea--disabled .textarea__control::placeholder{color:var(--six-input-placeholder-color-disabled)}.textarea__control{flex:1 1 auto;height:calc(var(--height) - 2 * var(--six-border-width));font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1.4;color:var(--sl-input-color);border:none;background:none;box-shadow:none;cursor:inherit;-webkit-appearance:none}.textarea__control::-webkit-search-decoration,.textarea__control::-webkit-search-cancel-button,.textarea__control::-webkit-search-results-button,.textarea__control::-webkit-search-results-decoration{-webkit-appearance:none}.textarea__control::placeholder{color:var(--six-input-placeholder-color);user-select:none}.textarea__control:focus{outline:none}.textarea--invalid:not(.textarea--disabled):not(.textarea--focused){border-color:var(--six-input-border-color-danger)}.textarea--small{border-radius:var(--six-input-border-radius-small);font-size:var(--six-input-font-size-small)}.textarea--small .textarea__control{padding:0.5em var(--six-input-spacing-small)}.textarea--medium{border-radius:var(--six-input-border-radius-medium);font-size:var(--six-input-font-size-medium)}.textarea--medium .textarea__control{padding:0.5em var(--six-input-spacing-medium)}.textarea--large{border-radius:var(--six-input-border-radius-large);font-size:var(--six-input-font-size-large)}.textarea--large .textarea__control{padding:0.5em var(--six-input-spacing-large)}.textarea--resize-none .textarea__control{resize:none}.textarea--resize-vertical .textarea__control{resize:vertical}.textarea--resize-auto .textarea__control{height:auto;resize:none}";
 
@@ -174,7 +174,7 @@ const SixTextarea$1 = /*@__PURE__*/ proxyCustomElement(class SixTextarea extends
         return ((_a = this.value) !== null && _a !== void 0 ? _a : '').toString();
     }
     render() {
-        return (h(FormControl, { key: '82dacccbeabf732b3d49738f0b5b9d725938014d', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, hasErrorTextSlot: this.hasErrorTextSlot, size: this.size, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { key: '88ddaeed09431fd06608350652de1280e729d44d', part: "base", class: {
+        return (h(FormControl, { key: '2cb6f77780f4c2c6ffc04ec457b813be55b0a6ee', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, hasErrorTextSlot: this.hasErrorTextSlot, size: this.size, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { key: '8e00496d1e0053f422375bcd2493cd84626aaf64', part: "base", class: {
                 textarea: true,
                 // Sizes
                 'textarea--small': this.size === 'small',
@@ -189,7 +189,7 @@ const SixTextarea$1 = /*@__PURE__*/ proxyCustomElement(class SixTextarea extends
                 'textarea--resize-none': this.resize === 'none',
                 'textarea--resize-vertical': this.resize === 'vertical',
                 'textarea--resize-auto': this.resize === 'auto',
-            } }, h("textarea", { key: '59838f0a6a739c7f6ed950f7ec73c228571e201a', part: "textarea", ref: (el) => (this.nativeTextarea = el), id: this.inputId, class: "textarea__control", name: this.name, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, rows: this.rows, minLength: this.minlength, maxLength: this.maxlength, value: this.getValue(), autoCapitalize: this.autocapitalize, autoCorrect: this.autocorrect, autoFocus: this.autofocus, spellcheck: this.spellcheck, required: this.required, inputMode: this.inputmode, "aria-labelledby": this.labelId, onChange: this.handleChange, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur }))));
+            } }, h("textarea", { key: 'e79fefc554fc6d8d4b26b561a40eae2cc7433b11', part: "textarea", ref: (el) => (this.nativeTextarea = el), id: this.inputId, class: "textarea__control", name: this.name, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, rows: this.rows, minLength: this.minlength, maxLength: this.maxlength, value: this.getValue(), autoCapitalize: this.autocapitalize, autoCorrect: this.autocorrect, autoFocus: this.autofocus, spellcheck: this.spellcheck, required: this.required, inputMode: this.inputmode, "aria-labelledby": this.labelId, onChange: this.handleChange, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur }))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/six-tile.js

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-D512q9rn.js';
 import { h as hasSlot, g as getSlot } from './p-j3oIB5oT.js';
-import { d as defineCustomElement$4 } from './p-BSHZAiyG.js';
-import { d as defineCustomElement$3 } from './p-Cosz73fX.js';
-import { d as defineCustomElement$2 } from './p-ClylOmYH.js';
+import { d as defineCustomElement$4 } from './p-CT4IVFqs.js';
+import { d as defineCustomElement$3 } from './p-CoOyRFuR.js';
+import { d as defineCustomElement$2 } from './p-jflTvJ8E.js';
 
 const sixTileCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:inline-block}.tile{min-height:var(--tile-size);width:var(--tile-size);background-color:var(--six-color-clay-50);display:inline-grid;grid-template-columns:100%;grid-template-areas:\"header\" \"middle\" \"footer\"}.tile--small{--tile-size:80px;--tile-padding-size:var(--six-spacing-medium)}.tile--medium{--tile-size:120px;--tile-padding-size:var(--six-spacing-large)}.tile--large{--tile-size:160px;--tile-padding-size:var(--six-spacing-x-large)}.tile:not(.tile--visible){visibility:hidden}.tile--elevated{border:0;box-shadow:var(--six-shadow-medium)}.tile__header{grid-area:header;height:5%;justify-self:right;display:flex;justify-content:right;opacity:0;transition:var(--six-transition-fast) opacity}.tile:hover>.tile__header{opacity:1}.tile__header--hidden{visibility:hidden}.tile__header six-icon-button{margin-top:-6px;margin-right:-6px;margin-bottom:-16px}.tile__body,.tile__body--large,.tile__body--medium,.tile__body--small{grid-area:middle;display:grid;place-items:center;cursor:pointer;padding-left:var(--tile-padding-size);padding-right:var(--tile-padding-size)}.tile__body six-icon::part(base),.tile__body--large six-icon::part(base),.tile__body--medium six-icon::part(base),.tile__body--small six-icon::part(base){padding:0}.tile__body--small{--tile-padding-size:var(--six-spacing-medium)}.tile__body--medium{--tile-padding-size:var(--six-spacing-large)}.tile__body--large{--tile-padding-size:var(--six-spacing-x-large)}.tile__footer,.tile__footer--large,.tile__footer--medium,.tile__footer--small{grid-area:footer;display:flex;justify-content:center;cursor:pointer;font-weight:var(--six-font-weight-normal);color:var(--six-color-web-rock-900)}.tile__footer--small{font-size:var(--six-font-size-xxx-small)}.tile__footer--medium{font-size:var(--six-font-size-xx-small)}.tile__footer--large{font-size:var(--six-font-size-small)}.tile__footer .label__footer,.tile__footer--small .label__footer,.tile__footer--medium .label__footer,.tile__footer--large .label__footer{overflow:hidden;text-overflow:ellipsis;width:calc(var(--tile-size) - 2em);text-align:center}";
 
@@ -62,22 +62,22 @@ const SixTile$1 = /*@__PURE__*/ proxyCustomElement(class SixTile extends H {
         this.handleSlotChange();
     }
     render() {
-        return (h("six-tooltip", { key: '165474a4301eff8d60788826d0378f33640476f4', disabled: this.disableTooltip || this.label === '', content: this.label }, h("div", { key: 'ae643873a589d648887ab54c614be1cae1e01a95', part: "base", class: {
+        return (h("six-tooltip", { key: '2b2b13f07d07c1f0c90cdfe50f274a98118550a1', disabled: this.disableTooltip || this.label === '', content: this.label }, h("div", { key: 'f3ed6365066484ec1b4699c9e5311348747cd8d8', part: "base", class: {
                 tile: true,
                 'tile--visible': this.visible,
                 'tile--small': this.size === 'small',
                 'tile--medium': this.size === 'medium',
                 'tile--large': this.size === 'large',
                 'tile--elevated': this.elevated,
-            } }, h("div", { key: 'b1fc1fabbf6f853611c7e7401bc007ba23a80985', part: "header", class: "tile__header" }, h("six-icon-button", { key: '3c8241f94b14ddbc2aeded4a7471e003112850bf', class: {
+            } }, h("div", { key: 'c27ba89ba037b289754169db65bfab716792b551', part: "header", class: "tile__header" }, h("six-icon-button", { key: '9eb0eea2c2ec217cdda335b5d5412ac0e5944297', class: {
                 'tile__header--hidden': !this.closeable,
-            }, name: "close", size: closeIconSize(this.size), onClick: this.handleCloseClickEvent })), h("div", { key: '334757a44525044c0d7f78fccf55c9076267c4ff', part: "body", class: "tile__body" }, this.iconName && (h("six-icon", { key: 'ec0904b8125e608d4d1f5ebeeb1b1fd8f8202a18', onClick: this.handleClickEvent, size: iconSize(this.size) }, this.iconName)), this.hasIconSlot && h("slot", { key: '5c4d950efc7de4268da7285024c0900066020c19', name: "icon" })), h("div", { key: '145edac16dcbf511d60d4f044bae7bdd397d939e', part: "footer", class: {
+            }, name: "close", size: closeIconSize(this.size), onClick: this.handleCloseClickEvent })), h("div", { key: 'f146d52f032ecf33b3c0cd06471f17c419fd47c0', part: "body", class: "tile__body" }, this.iconName && (h("six-icon", { key: '716cb94b53b0b2272fb70450d0fd77f5a3480d18', onClick: this.handleClickEvent, size: iconSize(this.size) }, this.iconName)), this.hasIconSlot && h("slot", { key: '791d752d7a3360fdf7424cbafa375ee22d0063b1', name: "icon" })), h("div", { key: 'e03ab0f392a7defc5107f2ec73b0b60b6d3387ca', part: "footer", class: {
                 'tile__footer--small': this.size === 'small',
                 'tile__footer--medium': this.size === 'medium',
                 'tile__footer--large': this.size === 'large',
-            } }, this.label && (h("div", { key: 'e11277aca9e4b1d30050f582fef25f4b77815bfd', class: {
+            } }, this.label && (h("div", { key: '869d56ac50b7c27c1c42ce0ba1368d6bb52d5344', class: {
                 '.label__footer': true,
-            }, onClick: this.handleClickEvent }, this.label)), this.hasLabelSlot && h("slot", { key: '39e4128ecdb2166b5fba7955a5370e59beae9801', name: "label" })))));
+            }, onClick: this.handleClickEvent }, this.label)), this.hasLabelSlot && h("slot", { key: '8d5cad1b2b36a42e4f34d78201d03f7160b7ddbd', name: "label" })))));
     }
     get host() { return this; }
     static get style() { return sixTileCss; }

package/dist/components/six-timepicker.js

@@ -1,4 +1,4 @@
-import { S as SixTimepicker$1, d as defineCustomElement$1 } from './p-CAJFkiLw.js';
+import { S as SixTimepicker$1, d as defineCustomElement$1 } from './p-CIsPrMgs.js';
 
 const SixTimepicker = SixTimepicker$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/six-tooltip.js

@@ -1,4 +1,4 @@
-import { S as SixTooltip$1, d as defineCustomElement$1 } from './p-ClylOmYH.js';
+import { S as SixTooltip$1, d as defineCustomElement$1 } from './p-jflTvJ8E.js';
 
 const SixTooltip = SixTooltip$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-09-11T10:00:15",
+  "timestamp": "2025-09-24T14:49:54",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.32.0",
@@ -771,6 +771,335 @@
       "dependencies": [],
       "dependencyGraph": {}
     },
+    {
+      "filePath": "src/components/six-breadcrumbs/six-breadcrumbs.tsx",
+      "encapsulation": "shadow",
+      "tag": "six-breadcrumbs",
+      "readme": "# six-breadcrumbs\n\n<!-- EXAMPLES -->\n",
+      "docs": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.",
+      "docsTags": [
+        {
+          "name": "since",
+          "text": "5.0"
+        },
+        {
+          "name": "status",
+          "text": "beta"
+        },
+        {
+          "name": "slot",
+          "text": "- One or more breadcrumb items to display."
+        },
+        {
+          "name": "slot",
+          "text": "separator - The separator to use between breadcrumb items. Works best with six-icon."
+        },
+        {
+          "name": "part",
+          "text": "base - The component's base wrapper."
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "separatorIcon",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "separator-icon",
+          "reflectToAttr": true,
+          "docs": "Defines an icon as a separator without having to place a slot *",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "''"
+            }
+          ],
+          "default": "''",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [
+        {
+          "name": "",
+          "docs": "One or more breadcrumb items to display."
+        },
+        {
+          "name": "separator",
+          "docs": "The separator to use between breadcrumb items. Works best with six-icon."
+        }
+      ],
+      "parts": [
+        {
+          "name": "base",
+          "docs": "The component's base wrapper."
+        }
+      ],
+      "dependents": [],
+      "dependencies": [
+        "six-icon"
+      ],
+      "dependencyGraph": {
+        "six-breadcrumbs": [
+          "six-icon"
+        ]
+      }
+    },
+    {
+      "filePath": "src/components/six-breadcrumbs-item/six-breadcrumbs-item.tsx",
+      "encapsulation": "shadow",
+      "tag": "six-breadcrumbs-item",
+      "readme": "# six-breadcrumbs-item\n\n<!-- EXAMPLES -->\n",
+      "docs": "Breadcrumb items are used inside breadcrumbs to represent different links.",
+      "docsTags": [
+        {
+          "name": "since",
+          "text": "5.0"
+        },
+        {
+          "name": "status",
+          "text": "beta"
+        },
+        {
+          "name": "slot",
+          "text": "- The breadcrumb item’s label."
+        },
+        {
+          "name": "slot",
+          "text": "prefix - An optional prefix, usually an icon or icon button."
+        },
+        {
+          "name": "slot",
+          "text": "suffix - An optional suffix, usually an icon or icon button."
+        },
+        {
+          "name": "slot",
+          "text": "separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on six-breadcrumbs instead."
+        },
+        {
+          "name": "part",
+          "text": "base - The component's base wrapper."
+        },
+        {
+          "name": "part",
+          "text": "button - The button that renders the item"
+        },
+        {
+          "name": "part",
+          "text": "separator - The separator"
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "href",
+          "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "href",
+          "reflectToAttr": false,
+          "docs": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "readonly",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "read-only",
+          "reflectToAttr": true,
+          "docs": "Set to true to readonly the breadcrumb item.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "size",
+          "type": "\"large\" | \"medium\" | \"small\"",
+          "complexType": {
+            "original": "'small' | 'medium' | 'large'",
+            "resolved": "\"large\" | \"medium\" | \"small\"",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "size",
+          "reflectToAttr": true,
+          "docs": "The breadcrumbs item size.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'medium'"
+            }
+          ],
+          "default": "'medium'",
+          "values": [
+            {
+              "value": "large",
+              "type": "string"
+            },
+            {
+              "value": "medium",
+              "type": "string"
+            },
+            {
+              "value": "small",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "target",
+          "type": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\" | undefined",
+          "complexType": {
+            "original": "'_blank' | '_parent' | '_self' | '_top'",
+            "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\" | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "target",
+          "reflectToAttr": false,
+          "docs": "Tells the browser where to open the link. Only used when `href` is set.",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "_blank",
+              "type": "string"
+            },
+            {
+              "value": "_parent",
+              "type": "string"
+            },
+            {
+              "value": "_self",
+              "type": "string"
+            },
+            {
+              "value": "_top",
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [
+        {
+          "name": "--last-item-color",
+          "annotation": "prop",
+          "docs": "The color of the last breadcrumbs item"
+        },
+        {
+          "name": "--separator-color",
+          "annotation": "prop",
+          "docs": "The color of the separator"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "docs": "The breadcrumb item’s label."
+        },
+        {
+          "name": "prefix",
+          "docs": "An optional prefix, usually an icon or icon button."
+        },
+        {
+          "name": "separator",
+          "docs": "The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on six-breadcrumbs instead."
+        },
+        {
+          "name": "suffix",
+          "docs": "An optional suffix, usually an icon or icon button."
+        }
+      ],
+      "parts": [
+        {
+          "name": "base",
+          "docs": "The component's base wrapper."
+        },
+        {
+          "name": "button",
+          "docs": "The button that renders the item"
+        },
+        {
+          "name": "separator",
+          "docs": "The separator"
+        }
+      ],
+      "dependents": [],
+      "dependencies": [
+        "six-button"
+      ],
+      "dependencyGraph": {
+        "six-breadcrumbs-item": [
+          "six-button"
+        ],
+        "six-button": [
+          "six-spinner"
+        ]
+      }
+    },
     {
       "filePath": "src/components/six-button/six-button.tsx",
       "encapsulation": "shadow",
@@ -1413,6 +1742,7 @@
         }
       ],
       "dependents": [
+        "six-breadcrumbs-item",
         "six-header-menu-button",
         "six-select"
       ],
@@ -1423,6 +1753,9 @@
         "six-button": [
           "six-spinner"
         ],
+        "six-breadcrumbs-item": [
+          "six-button"
+        ],
         "six-header-menu-button": [
           "six-button"
         ],
@@ -7658,6 +7991,43 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "library",
+          "type": "\"material-icons\" | \"material-symbols\" | undefined",
+          "complexType": {
+            "original": "IconLibrary",
+            "resolved": "\"material-icons\" | \"material-symbols\" | undefined",
+            "references": {
+              "IconLibrary": {
+                "location": "import",
+                "path": "../../utils/icon",
+                "id": "src/utils/icon.ts::IconLibrary"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "library",
+          "reflectToAttr": true,
+          "docs": "Icon library for this instance. Overrides the global default.\n- \"material-icons\"  → Material Icons\n- \"material-symbols\"  → Material Symbols",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "material-icons",
+              "type": "string"
+            },
+            {
+              "value": "material-symbols",
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "size",
           "type": "\"inherit\" | \"large\" | \"medium\" | \"small\" | \"xLarge\" | \"xSmall\" | \"xxLarge\" | \"xxxLarge\"",
@@ -7730,6 +8100,7 @@
       "parts": [],
       "dependents": [
         "six-avatar",
+        "six-breadcrumbs",
         "six-date",
         "six-datepicker",
         "six-details",
@@ -7754,6 +8125,9 @@
         "six-avatar": [
           "six-icon"
         ],
+        "six-breadcrumbs": [
+          "six-icon"
+        ],
         "six-date": [
           "six-icon"
         ],
@@ -19855,6 +20229,11 @@
       "declaration": "\"es\" | \"de\" | \"fr\" | \"it\" | \"en\"",
       "docstring": "",
       "path": "src/utils/error-messages.ts"
+    },
+    "src/utils/icon.ts::IconLibrary": {
+      "declaration": "export type IconLibrary = 'material-icons' | 'material-symbols';",
+      "docstring": "",
+      "path": "src/utils/icon.ts"
     }
   }
 }

package/dist/esm/icon-DqHJRLQQ.js

@@ -0,0 +1,14 @@
+let defaultLibrary = 'material-icons';
+/** Sets the global default for all <six-icon> instances that don't specify `library`. */
+function setDefaultIconLibrary(lib) {
+    defaultLibrary = lib;
+}
+/** Returns the global default (fallback is 'material-icons'). */
+function getDefaultIconLibrary() {
+    return defaultLibrary;
+}
+
+export { getDefaultIconLibrary as g, setDefaultIconLibrary as s };
+//# sourceMappingURL=icon-DqHJRLQQ.js.map
+
+//# sourceMappingURL=icon-DqHJRLQQ.js.map

package/dist/esm/icon-DqHJRLQQ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-DqHJRLQQ.js","sources":["src/utils/icon.ts"],"sourcesContent":["export type IconLibrary = 'material-icons' | 'material-symbols';\n\nlet defaultLibrary: IconLibrary = 'material-icons';\n\n/** Sets the global default for all <six-icon> instances that don't specify `library`. */\nexport function setDefaultIconLibrary(lib: IconLibrary) {\n  defaultLibrary = lib;\n}\n\n/** Returns the global default (fallback is 'material-icons'). */\nexport function getDefaultIconLibrary(): IconLibrary {\n  return defaultLibrary;\n}\n"],"names":[],"mappings":"AAEA,IAAI,cAAc,GAAgB,gBAAgB;AAElD;AACM,SAAU,qBAAqB,CAAC,GAAgB,EAAA;IACpD,cAAc,GAAG,GAAG;AACtB;AAEA;SACgB,qBAAqB,GAAA;AACnC,IAAA,OAAO,cAAc;AACvB;;;;"}

package/dist/esm/index-JoG9I7EO.js

@@ -79,6 +79,14 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './six-badge.entry.js').then(processMod, consoleError);
+                case 'six-breadcrumbs':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './six-breadcrumbs.entry.js').then(processMod, consoleError);
+                case 'six-breadcrumbs-item':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './six-breadcrumbs-item.entry.js').then(processMod, consoleError);
                 case 'six-card':
                     return import(
                       /* webpackMode: "lazy" */
@@ -251,10 +259,6 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './six-timepicker.entry.js').then(processMod, consoleError);
-                case 'six-button':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './six-button.entry.js').then(processMod, consoleError);
                 case 'six-dropdown_2':
                     return import(
                       /* webpackMode: "lazy" */
@@ -267,14 +271,14 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './six-tooltip.entry.js').then(processMod, consoleError);
-                case 'six-checkbox_2':
+                case 'six-button_2':
                     return import(
                       /* webpackMode: "lazy" */
-                      './six-checkbox_2.entry.js').then(processMod, consoleError);
-                case 'six-spinner':
+                      './six-button_2.entry.js').then(processMod, consoleError);
+                case 'six-checkbox_2':
                     return import(
                       /* webpackMode: "lazy" */
-                      './six-spinner.entry.js').then(processMod, consoleError);
+                      './six-checkbox_2.entry.js').then(processMod, consoleError);
                 case 'six-input':
                     return import(
                       /* webpackMode: "lazy" */

package/dist/esm/index.js

@@ -1,4 +1,5 @@
 export { g as getErrorMessage, a as getLanguage, l as languages } from './error-messages-1oJarDAY.js';
+export { g as getDefaultIconLibrary, s as setDefaultIconLibrary } from './icon-DqHJRLQQ.js';
 
 /**
  * Displays an alert on the toast stack with a specified message and optional configuration.

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["src/utils/alert.ts"],"sourcesContent":["import { AlertType } from '../components/six-alert/six-alert';\n\n/**\n * Displays an alert on the toast stack with a specified message and optional configuration.\n *\n * @param message - The message to be displayed in the alert.\n * @param alertType - The type of the alert. Valid values are 'primary', 'info', 'success', 'warning', 'danger'. Default is 'info'.\n * @param duration - The duration in milliseconds for which the alert is displayed. If not provided, a default duration is set based on the alert type.\n * @param iconName - The name of the icon to be displayed in the alert. If not provided, a default icon is set based on the alert type.\n */\nexport function showAlert(message: string, alertType?: AlertType, duration?: number, iconName?: string): void {\n  const type = alertType ?? 'info';\n  const icon = iconName ?? getIcon(type);\n  const alert = Object.assign(document.createElement('six-alert'), {\n    type,\n    duration: duration ?? getDuration(type),\n    innerHTML: `<six-icon slot=\"icon\">${icon}</six-icon>${escapeHtml(message)}`,\n    closable: true,\n  });\n  document.body.append(alert);\n  alert.toast();\n}\n\nfunction escapeHtml(html: string): string {\n  const div = document.createElement('div');\n  div.textContent = html;\n  return div.innerHTML;\n}\n\nfunction getIcon(messageType: AlertType): string {\n  switch (messageType) {\n    case 'primary':\n      return 'info';\n    case 'info':\n      return 'info';\n    case 'success':\n      return 'check_circle';\n    case 'warning':\n      return 'warning';\n    case 'danger':\n      return 'report';\n  }\n}\n\nfunction getDuration(messageType: AlertType): number {\n  switch (messageType) {\n    case 'primary':\n      return 10000;\n    case 'info':\n      return 10000;\n    case 'success':\n      return 10000;\n    case 'warning':\n      return 20000;\n    case 'danger':\n      return 20000;\n  }\n}\n"],"names":[],"mappings":";;AAEA;;;;;;;AAOG;AACG,SAAU,SAAS,CAAC,OAAe,EAAE,SAAqB,EAAE,QAAiB,EAAE,QAAiB,EAAA;IACpG,MAAM,IAAI,GAAG,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,MAAA,GAAA,SAAS,GAAI,MAAM;AAChC,IAAA,MAAM,IAAI,GAAG,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAA,MAAA,GAAR,QAAQ,GAAI,OAAO,CAAC,IAAI,CAAC;AACtC,IAAA,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAC,EAAE;QAC/D,IAAI;QACJ,QAAQ,EAAE,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAA,MAAA,GAAR,QAAQ,GAAI,WAAW,CAAC,IAAI,CAAC;QACvC,SAAS,EAAE,yBAAyB,IAAI,CAAA,WAAA,EAAc,UAAU,CAAC,OAAO,CAAC,CAAE,CAAA;AAC3E,QAAA,QAAQ,EAAE,IAAI;AACf,KAAA,CAAC;AACF,IAAA,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;IAC3B,KAAK,CAAC,KAAK,EAAE;AACf;AAEA,SAAS,UAAU,CAAC,IAAY,EAAA;IAC9B,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AACzC,IAAA,GAAG,CAAC,WAAW,GAAG,IAAI;IACtB,OAAO,GAAG,CAAC,SAAS;AACtB;AAEA,SAAS,OAAO,CAAC,WAAsB,EAAA;IACrC,QAAQ,WAAW;AACjB,QAAA,KAAK,SAAS;AACZ,YAAA,OAAO,MAAM;AACf,QAAA,KAAK,MAAM;AACT,YAAA,OAAO,MAAM;AACf,QAAA,KAAK,SAAS;AACZ,YAAA,OAAO,cAAc;AACvB,QAAA,KAAK,SAAS;AACZ,YAAA,OAAO,SAAS;AAClB,QAAA,KAAK,QAAQ;AACX,YAAA,OAAO,QAAQ;;AAErB;AAEA,SAAS,WAAW,CAAC,WAAsB,EAAA;IACzC,QAAQ,WAAW;AACjB,QAAA,KAAK,SAAS;AACZ,YAAA,OAAO,KAAK;AACd,QAAA,KAAK,MAAM;AACT,YAAA,OAAO,KAAK;AACd,QAAA,KAAK,SAAS;AACZ,YAAA,OAAO,KAAK;AACd,QAAA,KAAK,SAAS;AACZ,YAAA,OAAO,KAAK;AACd,QAAA,KAAK,QAAQ;AACX,YAAA,OAAO,KAAK;;AAElB;;;;"}
+{"version":3,"file":"index.js","sources":["src/utils/alert.ts"],"sourcesContent":["import { AlertType } from '../components/six-alert/six-alert';\n\n/**\n * Displays an alert on the toast stack with a specified message and optional configuration.\n *\n * @param message - The message to be displayed in the alert.\n * @param alertType - The type of the alert. Valid values are 'primary', 'info', 'success', 'warning', 'danger'. Default is 'info'.\n * @param duration - The duration in milliseconds for which the alert is displayed. If not provided, a default duration is set based on the alert type.\n * @param iconName - The name of the icon to be displayed in the alert. If not provided, a default icon is set based on the alert type.\n */\nexport function showAlert(message: string, alertType?: AlertType, duration?: number, iconName?: string): void {\n  const type = alertType ?? 'info';\n  const icon = iconName ?? getIcon(type);\n  const alert = Object.assign(document.createElement('six-alert'), {\n    type,\n    duration: duration ?? getDuration(type),\n    innerHTML: `<six-icon slot=\"icon\">${icon}</six-icon>${escapeHtml(message)}`,\n    closable: true,\n  });\n  document.body.append(alert);\n  alert.toast();\n}\n\nfunction escapeHtml(html: string): string {\n  const div = document.createElement('div');\n  div.textContent = html;\n  return div.innerHTML;\n}\n\nfunction getIcon(messageType: AlertType): string {\n  switch (messageType) {\n    case 'primary':\n      return 'info';\n    case 'info':\n      return 'info';\n    case 'success':\n      return 'check_circle';\n    case 'warning':\n      return 'warning';\n    case 'danger':\n      return 'report';\n  }\n}\n\nfunction getDuration(messageType: AlertType): number {\n  switch (messageType) {\n    case 'primary':\n      return 10000;\n    case 'info':\n      return 10000;\n    case 'success':\n      return 10000;\n    case 'warning':\n      return 20000;\n    case 'danger':\n      return 20000;\n  }\n}\n"],"names":[],"mappings":";;;AAEA;;;;;;;AAOG;AACG,SAAU,SAAS,CAAC,OAAe,EAAE,SAAqB,EAAE,QAAiB,EAAE,QAAiB,EAAA;IACpG,MAAM,IAAI,GAAG,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,MAAA,GAAA,SAAS,GAAI,MAAM;AAChC,IAAA,MAAM,IAAI,GAAG,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAA,MAAA,GAAR,QAAQ,GAAI,OAAO,CAAC,IAAI,CAAC;AACtC,IAAA,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAC,EAAE;QAC/D,IAAI;QACJ,QAAQ,EAAE,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAA,MAAA,GAAR,QAAQ,GAAI,WAAW,CAAC,IAAI,CAAC;QACvC,SAAS,EAAE,yBAAyB,IAAI,CAAA,WAAA,EAAc,UAAU,CAAC,OAAO,CAAC,CAAE,CAAA;AAC3E,QAAA,QAAQ,EAAE,IAAI;AACf,KAAA,CAAC;AACF,IAAA,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;IAC3B,KAAK,CAAC,KAAK,EAAE;AACf;AAEA,SAAS,UAAU,CAAC,IAAY,EAAA;IAC9B,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AACzC,IAAA,GAAG,CAAC,WAAW,GAAG,IAAI;IACtB,OAAO,GAAG,CAAC,SAAS;AACtB;AAEA,SAAS,OAAO,CAAC,WAAsB,EAAA;IACrC,QAAQ,WAAW;AACjB,QAAA,KAAK,SAAS;AACZ,YAAA,OAAO,MAAM;AACf,QAAA,KAAK,MAAM;AACT,YAAA,OAAO,MAAM;AACf,QAAA,KAAK,SAAS;AACZ,YAAA,OAAO,cAAc;AACvB,QAAA,KAAK,SAAS;AACZ,YAAA,OAAO,SAAS;AAClB,QAAA,KAAK,QAAQ;AACX,YAAA,OAAO,QAAQ;;AAErB;AAEA,SAAS,WAAW,CAAC,WAAsB,EAAA;IACzC,QAAQ,WAAW;AACjB,QAAA,KAAK,SAAS;AACZ,YAAA,OAAO,KAAK;AACd,QAAA,KAAK,MAAM;AACT,YAAA,OAAO,KAAK;AACd,QAAA,KAAK,SAAS;AACZ,YAAA,OAAO,KAAK;AACd,QAAA,KAAK,SAAS;AACZ,YAAA,OAAO,KAAK;AACd,QAAA,KAAK,QAAQ;AACX,YAAA,OAAO,KAAK;;AAElB;;;;"}