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

package/dist/components/six-tab-group.js

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-D512q9rn.js';
 import { s as scrollIntoView } from './p-BY6hIEFX.js';
 import { f as flipAnimate } from './p-SLlDVtvF.js';
-import { d as defineCustomElement$3 } from './p-BSHZAiyG.js';
-import { d as defineCustomElement$2 } from './p-Cosz73fX.js';
+import { d as defineCustomElement$3 } from './p-CT4IVFqs.js';
+import { d as defineCustomElement$2 } from './p-CoOyRFuR.js';
 
 const sixTabGroupCss = ":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:block}.tab-group{display:flex;border:solid 1px transparent;border-radius:0}.tab-group .tab-group__tabs{display:flex;position:relative}.tab-group--has-scroll-controls .tab-group__nav-container{position:relative;padding:0 var(--six-spacing-x-large)}.tab-group__scroll-button{display:flex;align-items:center;justify-content:center;position:absolute;top:0;bottom:0;width:var(--six-spacing-x-large)}.tab-group__scroll-button--left{left:0}.tab-group__scroll-button--right{right:0}.tab-group--top{flex-direction:column}.tab-group--top .tab-group__nav-container{order:1}.tab-group--top .tab-group__nav{display:flex;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tab-group--top .tab-group__nav::-webkit-scrollbar{width:0;height:0}.tab-group--top .tab-group__tabs{flex:1 1 auto;position:relative;flex-direction:row}.tab-group--top .tab-group__body{order:2}.tab-group--bottom{flex-direction:column}.tab-group--bottom .tab-group__nav-container{order:2}.tab-group--bottom .tab-group__nav{display:flex;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tab-group--bottom .tab-group__nav::-webkit-scrollbar{width:0;height:0}.tab-group--bottom .tab-group__tabs{flex:1 1 auto;position:relative;flex-direction:row}.tab-group--bottom .tab-group__body{order:1}.tab-group--left{flex-direction:row}.tab-group--left .tab-group__nav-container{order:1}.tab-group--left .tab-group__tabs{flex:0 0 auto;flex-direction:column}.tab-group--left .tab-group__body{flex:1 1 auto;order:2}.tab-group--right{flex-direction:row}.tab-group--right .tab-group__nav-container{order:2}.tab-group--right .tab-group__tabs{flex:0 0 auto;flex-direction:column}.tab-group--right .tab-group__body{flex:1 1 auto;order:1}";
 

package/dist/components/six-tab-panel.js

@@ -17,7 +17,7 @@ const SixTabPanel$1 = /*@__PURE__*/ proxyCustomElement(class SixTabPanel extends
     render() {
         return (
         // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels
-        h(Host, { key: 'b4c54fb42d68a3462abbd78dda16b1738e81dc57', id: this.host.id || this.componentId, style: { display: this.active ? 'block' : 'none' } }, h("div", { key: '734645855fb3a875a6a43e46383122ddad15bbb3', part: "base", class: "tab-panel", role: "tabpanel", "aria-selected": this.active ? 'true' : 'false', "aria-hidden": this.active ? 'false' : 'true' }, h("slot", { key: '1a789d112f5a048ac36f9a7e70208c99fb66c6c9' }))));
+        h(Host, { key: 'b1d310127f59020a935af04a8bf3df75e6416488', id: this.host.id || this.componentId, style: { display: this.active ? 'block' : 'none' } }, h("div", { key: 'cb6e790d83b3ad4d843fce91dde842af9bb4588c', part: "base", class: "tab-panel", role: "tabpanel", "aria-selected": this.active ? 'true' : 'false', "aria-hidden": this.active ? 'false' : 'true' }, h("slot", { key: '6e5588f2370b04b078c6567bd1dd0008203e6f43' }))));
     }
     get host() { return this; }
     static get style() { return sixTabPanelCss; }

package/dist/components/six-tab.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-D512q9rn.js';
-import { d as defineCustomElement$3 } from './p-BSHZAiyG.js';
-import { d as defineCustomElement$2 } from './p-Cosz73fX.js';
+import { d as defineCustomElement$3 } from './p-CT4IVFqs.js';
+import { d as defineCustomElement$2 } from './p-CoOyRFuR.js';
 
 const sixTabCss = ":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:flex}.tab{display:inline-flex;align-items:center;font-family:var(--six-font-family);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-semibold);color:var(--six-tab-color);padding:var(--six-spacing-medium) var(--six-spacing-large);white-space:nowrap;user-select:none;cursor:pointer;width:100%}.tab:focus{outline:none}.tab:focus-visible{outline:var(--six-focus-ring);outline-offset:calc(-1 * var(--six-focus-ring-width) - var(--six-focus-ring-offset))}.tab.tab--active:not(.tab--disabled){color:var(--six-tab-color-active);font-weight:var(--six-font-weight-bold)}.tab.tab--closable{padding-right:var(--six-spacing-small)}.tab.tab--disabled{color:var(--six-tab-color-disabled);cursor:not-allowed}.tab:hover:not(.tab--disabled){color:var(--six-tab-color-hover)}.tab.tab--left,.tab.tab--right{display:inline-block;text-align:left}.tab.tab--left::before,.tab.tab--right::before{display:block;font-weight:var(--six-font-weight-bold);content:attr(title);height:0;overflow:hidden;visibility:hidden}.tab__close-button{font-size:var(--six-font-size-large);margin-left:var(--six-spacing-xx-small)}.tab__close-button::part(base){padding:var(--six-spacing-xxx-small)}.tab__indicator{position:absolute}.tab__indicator.tab__indicator--active{background-color:var(--six-tab-border-color-active)}.tab--top{margin-bottom:var(--six-spacing-xxx-small)}.tab__indicator--top{width:100%;bottom:0;height:var(--six-tab-border-width)}.tab--bottom{margin-top:var(--six-spacing-xxx-small)}.tab__indicator--bottom{width:100%;top:0;height:var(--six-tab-border-width)}.tab--left{margin-right:var(--six-spacing-xxx-small)}.tab__indicator--left{height:100%;right:0;top:0;width:var(--six-tab-border-width)}.tab--right{margin-left:var(--six-spacing-xxx-small)}.tab__indicator--right{height:100%;left:0;top:0;width:var(--six-tab-border-width)}";
 
@@ -43,7 +43,7 @@ const SixTab$1 = /*@__PURE__*/ proxyCustomElement(class SixTab extends H {
         const placement = (_a = tabGroup === null || tabGroup === void 0 ? void 0 : tabGroup.placement) !== null && _a !== void 0 ? _a : 'top';
         return (
         // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels
-        h(Host, { key: '40b4042f28816b55ef585cf24570b64a44031863', id: this.host.id || this.componentId }, h("div", { key: 'e4e8ba43cf2e1384a421835fe1131ea411ac7a18', part: "base", ref: (el) => (this.tab = el), class: {
+        h(Host, { key: '15b2a74f3b77603857f6e2ff65b2ba60ff66b610', id: this.host.id || this.componentId }, h("div", { key: '6898094f10f1df9d600ed3250c1c264f4b9b1bfb', part: "base", ref: (el) => (this.tab = el), class: {
                 tab: true,
                 // Placements
                 'tab--top': placement === 'top',
@@ -54,7 +54,7 @@ const SixTab$1 = /*@__PURE__*/ proxyCustomElement(class SixTab extends H {
                 'tab--active': this.active,
                 'tab--closable': this.closable,
                 'tab--disabled': this.disabled,
-            }, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', tabindex: this.disabled || !this.active ? '-1' : '0', title: this.host.innerHTML }, h("slot", { key: '39b1a75c51726543e0371e2607c6aa9197483b34' }), this.closable && (h("six-icon-button", { key: 'b9b2468f19b875ea58292f9ed330b49cff084d7c', name: "close", size: "xSmall", exportparts: "base:close-button", class: "tab__close-button", onClick: this.handleCloseClick, tabIndex: -1, "aria-hidden": "true" }))), h("div", { key: 'da5cf7175879826bfb96f52cd8aca427372e32e6', part: this.active ? 'active-tab-indicator' : '', class: {
+            }, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', tabindex: this.disabled || !this.active ? '-1' : '0', title: this.host.innerHTML }, h("slot", { key: 'e2dd12b15187571813d183a159096341cf4c3c0f' }), this.closable && (h("six-icon-button", { key: '6403e9ac9b8574870dc97f96313b50ed133f952f', name: "close", size: "xSmall", exportparts: "base:close-button", class: "tab__close-button", onClick: this.handleCloseClick, tabIndex: -1, "aria-hidden": "true" }))), h("div", { key: '293c3734b3223eb57051bbd85003645ff1653e35', part: this.active ? 'active-tab-indicator' : '', class: {
                 tab__indicator: true,
                 'tab__indicator--active': this.active,
                 // Placements

package/dist/components/six-tag.js

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-D512q9rn.js';
 import { a as getTextContent } from './p-j3oIB5oT.js';
 import { a as debounce } from './p-CKhg9ibv.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 sixTagCss = ":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;overflow:hidden}.tag{display:flex;align-items:center;border:solid 1px;font-family:var(--six-font-family);line-height:1;white-space:nowrap;user-select:none;cursor:default}.tag__content{text-overflow:ellipsis;overflow:hidden}.tag__clear::part(base){color:inherit;padding:0}.tag--info{color:var(--six-color-white);background-color:var(--six-color-web-rock-900);border-color:var(--six-color-web-rock-900)}.tag--success{color:var(--six-color-web-rock-900);border-color:var(--six-color-success-500);background-color:var(--six-color-success-500)}.tag--primary{color:var(--six-color-web-rock-900);border-color:var(--six-color-clay-50);background-color:var(--six-color-clay-50)}.tag--warning{color:var(--six-color-web-rock-900);border-color:var(--six-color-warning-700);background-color:var(--six-color-warning-700)}.tag--danger{color:var(--six-color-white);border-color:var(--six-color-danger-800);background-color:var(--six-color-danger-800)}.tag--action{color:var(--six-color-white);border-color:var(--six-color-action-500);background-color:var(--six-color-action-500)}.tag--small{font-size:var(--six-button-font-size-small);height:calc(var(--six-height-small) * 0.8);line-height:calc(var(--six-height-small) - var(--six-border-width) * 2);border-radius:var(--six-input-border-radius-small);padding:0 var(--six-spacing-x-small)}.tag--small .tag__clear{margin-left:var(--six-spacing-xx-small);margin-right:calc(-1 * var(--six-spacing-xxx-small))}.tag--medium{font-size:var(--six-button-font-size-medium);height:calc(var(--six-height-medium) * 0.8);line-height:calc(var(--six-height-medium) - var(--six-border-width) * 2);border-radius:var(--six-input-border-radius-medium);padding:0 var(--six-spacing-small)}.tag--medium .tag__clear{margin-left:var(--six-spacing-xx-small);margin-right:calc(-1 * var(--six-spacing-xx-small))}.tag--large{font-size:var(--six-button-font-size-large);height:calc(var(--six-height-large) * 0.8);line-height:calc(var(--six-height-large) - var(--six-border-width) * 2);border-radius:var(--six-input-border-radius-large);padding:0 var(--six-spacing-medium)}.tag--large .tag__clear{margin-left:var(--six-spacing-xx-small);margin-right:calc(-1 * var(--six-spacing-x-small))}.tag--pill{border-radius:var(--six-border-radius-pill)}";
 
@@ -46,7 +46,7 @@ const SixTag$1 = /*@__PURE__*/ proxyCustomElement(class SixTag extends H {
         this.resizeObserver.disconnect();
     }
     render() {
-        return (h("span", { key: 'e8a2448511ebcfa91f9714c1e575679fca929310', part: "base", class: {
+        return (h("span", { key: 'fa118fba6c2beb1cec064e1dd3a8cc09937358c3', part: "base", class: {
                 tag: true,
                 // Types
                 'tag--primary': this.type === 'primary',
@@ -63,7 +63,7 @@ const SixTag$1 = /*@__PURE__*/ proxyCustomElement(class SixTag extends H {
                 // Modifers
                 'tag--pill': this.pill,
                 'tag--clear': this.clearable,
-            } }, h("six-tooltip", { key: 'a8bffabc14f61bff5f499cd9324cb17497a6082b', ref: (el) => (this.tooltipElement = el) }, h("span", { key: '28a60248833682018fa9f11be5d02372893645e5', ref: (el) => (this.contentElement = el), part: "content", class: "tag__content" }, h("slot", { key: 'd47d95687a69a4822575ac3219872a51f445441d', ref: (el) => (this.contentSlotElement = el) }))), this.clearable && (h("six-icon-button", { key: '477d12d125ff90d1cc0adb2bb62bf11bc6510927', exportparts: "base:clear-button", size: "xSmall", name: "clear", class: "tag__clear", onClick: this.handleClearClick }))));
+            } }, h("six-tooltip", { key: '306fac1cde857f9d06c7a646d1f53f4d99ac1464', ref: (el) => (this.tooltipElement = el) }, h("span", { key: 'd44fd48467dc7c31dc7afb213c079d6884183eb6', ref: (el) => (this.contentElement = el), part: "content", class: "tag__content" }, h("slot", { key: '3674beda2a1107fc6509123c655f598019008abf', ref: (el) => (this.contentSlotElement = el) }))), this.clearable && (h("six-icon-button", { key: '337b2bd5915e7d8581c1306f96e58a0f3759f9a5', exportparts: "base:clear-button", size: "xSmall", name: "clear", class: "tag__clear", onClick: this.handleClearClick }))));
     }
     static get style() { return sixTagCss; }
 }, [1, "six-tag", {

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-08-28T08:03:18",
+  "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"
         ],
@@ -2666,8 +2999,8 @@
       "filePath": "src/components/six-datepicker/six-datepicker.tsx",
       "encapsulation": "shadow",
       "tag": "six-datepicker",
-      "readme": "# six-datepicker\n\n<!-- EXAMPLES -->\n",
-      "docs": "<!-- EXAMPLES -->",
+      "readme": "# six-datepicker\n\n::: warning\nThe six-datepicker component is deprecated. Please use the [six-date](./six-date.md) component instead.\n:::\n\n<!-- EXAMPLES -->\n",
+      "docs": "::: warning\nThe six-datepicker component is deprecated. Please use the [six-date](./six-date.md) component instead.\n:::\n\n<!-- EXAMPLES -->",
       "docsTags": [
         {
           "name": "since",
@@ -2675,7 +3008,7 @@
         },
         {
           "name": "status",
-          "text": "stable"
+          "text": "deprecated. Use six-date instead."
         },
         {
           "name": "slot",
@@ -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"
     }
   }
 }