@six-group/ui-library 5.0.0 → 5.1.0

package/dist/collection/components/six-breadcrumbs-item/six-breadcrumbs-item.js

@@ -0,0 +1,123 @@
+import { h } from "@stencil/core";
+/**
+ * Breadcrumb items are used inside breadcrumbs to represent different links.
+ *
+ * @since 5.0
+ * @status beta
+ *
+ * @slot - The breadcrumb item’s label.
+ * @slot prefix - An optional prefix, usually an icon or icon button.
+ * @slot suffix - An optional suffix, usually an icon or icon button.
+ * @slot 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.
+ *
+ * @part base - The component's base wrapper.
+ * @part button - The button that renders the item
+ * @part separator - The separator
+ */
+export class SixBreadcrumbsItem {
+    constructor() {
+        /** The breadcrumbs item size. */
+        this.size = 'medium';
+        /** Set to true to readonly the breadcrumb item. */
+        this.readonly = false;
+    }
+    render() {
+        return (h("div", { key: 'c513737271cbfcd6755fa7b1effc526ec450bf04', part: "base" }, h("six-button", { key: '9f7fa7a98c83bcd536e864c486e696623a337aba', part: "button", type: "link", class: { 'breadcrumb-item-readonly': this.readonly }, href: this.readonly ? undefined : this.href, tabindex: this.readonly ? -1 : undefined, target: this.target, size: this.size }, h("slot", { key: '21702eca3e7529a8e6e2e63d640a079b9da3eef9', name: "prefix", slot: "prefix" }), h("slot", { key: 'eaeaac8681abaf25e4959615c0d7acbed2f51813' }), h("slot", { key: 'b7bf9a20d59cee15010f585e17fb3cdf1979573b', name: "suffix", slot: "suffix" })), h("span", { key: '0c4189811fa524e18bf0c0f94c7f6490c11018d9', part: "separator", class: "breadcrumb-item__separator", "aria-hidden": "true" }, h("slot", { key: '03ca6b113b73f75fbaeec04b0ec3d3224536c77b', name: "separator" }))));
+    }
+    static get is() { return "six-breadcrumbs-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-breadcrumbs-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-breadcrumbs-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "href": {
+                "type": "string",
+                "attribute": "href",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "target": {
+                "type": "string",
+                "attribute": "target",
+                "mutable": false,
+                "complexType": {
+                    "original": "'_blank' | '_parent' | '_self' | '_top'",
+                    "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Tells the browser where to open the link. Only used when `href` is set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The breadcrumbs item size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "'medium'"
+            },
+            "readonly": {
+                "type": "boolean",
+                "attribute": "read-only",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to readonly the breadcrumb item."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=six-breadcrumbs-item.js.map

package/dist/collection/components/six-breadcrumbs-item/six-breadcrumbs-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-breadcrumbs-item.js","sourceRoot":"","sources":["../../../src/components/six-breadcrumbs-item/six-breadcrumbs-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE5D;;;;;;;;;;;;;;GAcG;AAMH,MAAM,OAAO,kBAAkB;IAL/B;QAcE,iCAAiC;QACR,SAAI,GAAiC,QAAQ,CAAC;QAEvE,mDAAmD;QACF,aAAQ,GAAY,KAAK,CAAC;KAwB5E;IAtBC,MAAM;QACJ,OAAO,CACL,4DAAK,IAAI,EAAC,MAAM;YACd,mEACE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,EAAE,0BAA0B,EAAE,IAAI,CAAC,QAAQ,EAAE,EACpD,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAC3C,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EACxC,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI;gBAEf,6DAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAG;gBACpC,8DAAQ;gBACR,6DAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAG,CACzB;YACb,6DAAM,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,iBAAa,MAAM;gBAC1E,6DAAM,IAAI,EAAC,WAAW,GAAG,CACpB,CACH,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop } from '@stencil/core';\n\n/**\n * Breadcrumb items are used inside breadcrumbs to represent different links.\n *\n * @since 5.0\n * @status beta\n *\n * @slot - The breadcrumb item’s label.\n * @slot prefix - An optional prefix, usually an icon or icon button.\n * @slot suffix - An optional suffix, usually an icon or icon button.\n * @slot 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.\n *\n * @part base - The component's base wrapper.\n * @part button - The button that renders the item\n * @part separator - The separator\n */\n@Component({\n  tag: 'six-breadcrumbs-item',\n  styleUrl: 'six-breadcrumbs-item.scss',\n  shadow: true,\n})\nexport class SixBreadcrumbsItem {\n  @Element() host!: HTMLSixBreadcrumbsItemElement;\n\n  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */\n  @Prop() href?: string;\n\n  /** Tells the browser where to open the link. Only used when `href` is set. */\n  @Prop() target?: '_blank' | '_parent' | '_self' | '_top';\n\n  /** The breadcrumbs item size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Set to true to readonly the breadcrumb item. */\n  @Prop({ attribute: 'read-only', reflect: true }) readonly: boolean = false;\n\n  render() {\n    return (\n      <div part=\"base\">\n        <six-button\n          part=\"button\"\n          type=\"link\"\n          class={{ 'breadcrumb-item-readonly': this.readonly }}\n          href={this.readonly ? undefined : this.href}\n          tabindex={this.readonly ? -1 : undefined}\n          target={this.target}\n          size={this.size}\n        >\n          <slot name=\"prefix\" slot=\"prefix\" />\n          <slot />\n          <slot name=\"suffix\" slot=\"suffix\" />\n        </six-button>\n        <span part=\"separator\" class=\"breadcrumb-item__separator\" aria-hidden=\"true\">\n          <slot name=\"separator\" />\n        </span>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-button/six-button.js

@@ -104,7 +104,7 @@ export class SixButton {
         const isLink = this.href != null;
         const isButton = !isLink;
         const Button = isLink ? 'a' : 'button';
-        return (h("div", { key: '6eba8f1f34f9dfa51d29e4349870994acf7b89fb', onClick: this.handleClick, class: { 'button-wrapper--disabled': this.disabled } }, h(Button, { key: '77cd544148f4ea4dcf2c6b34c4c6d62d4372372d', ref: (el) => (this.nativeButton = el), part: "base", class: {
+        return (h("div", { key: 'c8cdb43580af7e80984c0cbf86f269b2726ef7c0', onClick: this.handleClick, class: { 'button-wrapper--disabled': this.disabled } }, h(Button, { key: '8daeb79358745e4cb021870fdb21ba83db9d6861', ref: (el) => (this.nativeButton = el), part: "base", class: {
                 button: true,
                 // Types
                 'button--secondary': this.type === 'secondary',
@@ -129,7 +129,7 @@ export class SixButton {
                 'button--has-label': this.hasLabel,
                 'button--has-prefix': this.hasPrefix,
                 'button--has-suffix': this.hasSuffix,
-            }, disabled: isButton ? this.disabled : undefined, tabindex: this.disabled ? '-1' : undefined, type: isButton ? (this.submit ? 'submit' : this.reset ? 'reset' : 'button') : undefined, name: isButton ? this.name : undefined, value: isButton ? this.value : undefined, href: isLink ? this.href : undefined, target: isLink && this.target != null ? this.target : undefined, download: isLink && this.download != null ? this.download : undefined, rel: isLink && this.target != null ? 'noreferrer noopener' : undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, "data-testid": "button" }, h("span", { key: '0fb19c85adc826ed6e92b306f734185e3557e30f', part: "prefix", class: "button__prefix" }, h("slot", { key: '8223eb8644d495ef27cd175a905ab68c3d10f14f', onSlotchange: this.handleSlotChange, name: "prefix" })), h("span", { key: '00d407ea8d28b9e515992a872cc91705e2906a24', part: "label", class: "button__label" }, h("slot", { key: '28fb5d1061bfdf0f404e2241ccf6f16b4e113ba7', onSlotchange: this.handleSlotChange })), h("span", { key: '65e82de3e6851445627b31212bbbeccc8ca85d35', part: "suffix", class: "button__suffix" }, h("slot", { key: 'd9608fad50cafb5fcc14e1eecd9e47cf99edcb14', onSlotchange: this.handleSlotChange, name: "suffix" })), this.caret && (h("span", { key: '4c8b4ad77d69e4a189621f53e3c20dbb7504c4cb', part: "caret", class: "button__caret" }, h("svg", { key: '16b2146dd6bd99677cadb4b2fe5cf67a4e32a39d', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '4cdd831978519dcb553a929fe54f6bd49b25fbc5', points: "6 9 12 15 18 9" })))), this.loading && h("six-spinner", { key: 'df087e05782f46995bdc6f6325b4a610f74ce971' }))));
+            }, disabled: isButton ? this.disabled : undefined, tabindex: this.disabled ? '-1' : undefined, type: isButton ? (this.submit ? 'submit' : this.reset ? 'reset' : 'button') : undefined, name: isButton ? this.name : undefined, value: isButton ? this.value : undefined, href: isLink ? this.href : undefined, target: isLink && this.target != null ? this.target : undefined, download: isLink && this.download != null ? this.download : undefined, rel: isLink && this.target != null ? 'noreferrer noopener' : undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, "data-testid": "button" }, h("span", { key: '703ca93447400bc9ec12ea9bf1ba36abd324e1cc', part: "prefix", class: "button__prefix" }, h("slot", { key: '0a2c7a1148878d455b7d1b6785729c62eda396d6', onSlotchange: this.handleSlotChange, name: "prefix" })), h("span", { key: '74e8386afffae9cba1a72ce52a4ee75da72abdcd', part: "label", class: "button__label" }, h("slot", { key: 'ce6e54dfc9e280efa178f009e556669ccf6f45b6', onSlotchange: this.handleSlotChange })), h("span", { key: '42b0f3b72007f57caa2a7a745f628a395c999f9a', part: "suffix", class: "button__suffix" }, h("slot", { key: '4741a3a3eeffb36182eb93005afca98522983ef1', onSlotchange: this.handleSlotChange, name: "suffix" })), this.caret && (h("span", { key: '3c5a5e7e2b0ed436d6576888eed7999eb50395c3', part: "caret", class: "button__caret" }, h("svg", { key: '82a715a604bd7ed1ab8242cd3994d67dfeba9e1d', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '5c870552f2138305088348ed5e3e3b787a5b598c', points: "6 9 12 15 18 9" })))), this.loading && h("six-spinner", { key: '4267336c2eb4b8bd71567d1a7ec4ee3f32362c2f' }))));
     }
     static get is() { return "six-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-card/six-card.js

@@ -7,7 +7,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SixCard {
     render() {
-        return (h(Host, { key: '8ba5461ffe1740e8f2b7061701cf8f06e24adc25' }, h("slot", { key: '95fde97191f2c89fe76643450e6e9eb4dcbe9fa2' })));
+        return (h(Host, { key: '9a56f190ccdf8545c4503284ae32a23220e1af37' }, h("slot", { key: 'db6e7fe7d83c4e41747ad39a85bf108ce581ae87' })));
     }
     static get is() { return "six-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-checkbox/six-checkbox.js

@@ -121,14 +121,14 @@ export class SixCheckbox {
         this.hasErrorSlot = hasSlot(this.host, 'error-text');
     }
     render() {
-        return (h(FormControl, { key: 'cf87dbd9fbe4063c8579a41e729f06f6ea4ad41c', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, errorTextId: this.errorTextId, hasErrorTextSlot: this.hasErrorSlot, errorText: this.errorText, errorTextCount: this.errorTextCount, size: "medium", disabled: this.disabled, required: this.required, displayError: this.invalid }, h("label", { key: 'c3b2be07e9c25c226cac5d2d71d76e4096af15f8', part: "base", class: {
+        return (h(FormControl, { key: '1ed8885c3a37d420684480a982a38944ca869a1a', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, errorTextId: this.errorTextId, hasErrorTextSlot: this.hasErrorSlot, errorText: this.errorText, errorTextCount: this.errorTextCount, size: "medium", disabled: this.disabled, required: this.required, displayError: this.invalid }, h("label", { key: '36a5a7bcfdd28499e70fcd432a38fc89cb48ce64', part: "base", class: {
                 checkbox: true,
                 'checkbox--checked': this.checked,
                 'checkbox--disabled': this.disabled,
                 'checkbox--focused': this.hasFocus,
                 'checkbox--invalid': this.invalid,
                 'checkbox--indeterminate': this.indeterminate,
-            }, htmlFor: this.inputId, onMouseDown: this.handleMouseDown }, h("span", { key: '9c01a62b12b784e69e8ce7fd52f48aed3e86c278', part: "control", class: "checkbox__control" }, this.checked && (h("span", { key: '9d755d8a162152a268f8883abaeb15d33c3a48e7', part: "checked-icon", class: "checkbox__icon" }, h("svg", { key: 'ca598e4be471eb72eb0c416a2d2bf6d79fa51fe4', viewBox: "0 0 16 16" }, h("g", { key: 'dd4db42d3000bf096968520e15cc85f94140c7e3', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "round" }, h("g", { key: '8d83aa9af87622aaf724fa2ed91c18ac3df9cba6', stroke: "currentColor", "stroke-width": "2" }, h("g", { key: 'dd5d60bb007d3f493f7ab19b9fa8b2973a596707', transform: "translate(3.428571, 3.428571)" }, h("path", { key: '474b99c56df6507a6013ffbc3fcb5dab7479c79e', d: "M0,5.71428571 L3.42857143,9.14285714" }), h("path", { key: '2b8965fb78d5eed486589c93473d0e3ec2569a16', d: "M9.14285714,0 L3.42857143,9.14285714" }))))))), !this.checked && this.indeterminate && (h("span", { key: '860e7c9141f737a325bd95731fd8600e00c35db4', part: "indeterminate-icon", class: "checkbox__icon" }, h("svg", { key: 'ef9a9f0d090da9bb754e85a06652c00433fa90a9', viewBox: "0 0 16 16" }, h("g", { key: 'dc8235d73ef8b7658519f3acfb7fd56349801404', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "round" }, h("g", { key: '62987b29c7c3f6bbacf4feef4e4beaf31bf722ed', stroke: "currentColor", "stroke-width": "2" }, h("g", { key: '6be444ed0dd4cbae66f570afa0b85152b1f4da96', transform: "translate(2.285714, 6.857143)" }, h("path", { key: 'bcd6968d3eee416a62ad75570a0402654c2efc04', d: "M10.2857143,1.14285714 L1.14285714,1.14285714" }))))))), h("input", { key: '38c2532ca810970494543d5eca8927c26cf92e78', ref: (el) => (this.nativeInput = el), id: this.inputId, type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, role: "checkbox", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus })), h("span", { key: '1c12af81f2b724803cf2224d4ff8178774b4f7ea', part: "text", id: this.textId, class: "checkbox__text" }, h("slot", { key: '488fe82970614b07112449e67d4374b1cc186dfe' })))));
+            }, htmlFor: this.inputId, onMouseDown: this.handleMouseDown }, h("span", { key: '837373ab4ae9a6f90852f4d9176ac6e844d31579', part: "control", class: "checkbox__control" }, this.checked && (h("span", { key: 'f7d9c7ba567ee2d28913714cfb8fdb972e0b9f25', part: "checked-icon", class: "checkbox__icon" }, h("svg", { key: '2193316f61d53f3302e14a43b587b07778ae590e', viewBox: "0 0 16 16" }, h("g", { key: '36990bcb579ade7b26a26d6b93a8dd4f8226781e', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "round" }, h("g", { key: '712be85f8623db8f143ef64f9c44b6433a530eab', stroke: "currentColor", "stroke-width": "2" }, h("g", { key: 'e716ffab7308468ccc86b294d0052428a2ca0602', transform: "translate(3.428571, 3.428571)" }, h("path", { key: 'a2ca8e37d8ff88bf94adfc7af850c447b9a4e9b4', d: "M0,5.71428571 L3.42857143,9.14285714" }), h("path", { key: '82f92da775cb1e49281eaee37792e326c5b41a60', d: "M9.14285714,0 L3.42857143,9.14285714" }))))))), !this.checked && this.indeterminate && (h("span", { key: 'b852b9c3dc0d083d9ba3b9f24c2f8f93f42bfe9b', part: "indeterminate-icon", class: "checkbox__icon" }, h("svg", { key: '2f888c93c3a69846ef8d96858f9064c7da02f37d', viewBox: "0 0 16 16" }, h("g", { key: '33828186ba162b59f88d3528453e497c59ea5211', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "round" }, h("g", { key: 'a71f0a3498aa7cab1e9be14f07558813b8f4b287', stroke: "currentColor", "stroke-width": "2" }, h("g", { key: '2ff1a113d888f14358845323cccae4b9d8bbd1e0', transform: "translate(2.285714, 6.857143)" }, h("path", { key: '737d8c10e532a2037e20997d5f41cc99fa84dc03', d: "M10.2857143,1.14285714 L1.14285714,1.14285714" }))))))), h("input", { key: '0fef28fe71ba5263a33eadda6a63329b3d2bec1f', ref: (el) => (this.nativeInput = el), id: this.inputId, type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, role: "checkbox", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus })), h("span", { key: 'db92ca95a892368e88b2aecfeff53a54eb5cc683', part: "text", id: this.textId, class: "checkbox__text" }, h("slot", { key: 'c2f6c9778b16dc344ad342254ef9ff2b624334f1' })))));
     }
     static get is() { return "six-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-date/six-date.js

@@ -242,7 +242,7 @@ export class SixDate {
         this.popoverHelper = undefined;
     }
     render() {
-        return (h("div", { key: '67c2f836f5a0ea61277913ca44a80293eedd918b', class: "container" }, h("six-input", { key: '5286b304057f010d92449309174cd773196ae475', ref: (el) => (this.inputElement = el), placeholder: this.placeholder == null ? this.dateFormat : this.placeholder, readonly: this.readonly, disabled: this.disabled, name: this.name, label: this.label, required: this.required, helpText: this.helpText, errorText: this.errorText, errorTextCount: this.errorTextCount, invalid: this.invalid, onKeyDown: this.handleInputKeyDown, onInput: this.handleInputChange, onBlur: this.handleInputBlur, "onSix-input-clear": this.handleInputClearClick, size: this.size, clearable: this.clearable, "aria-describedby": "date-format" }, h("six-icon", { key: '703b5a74be97b95359fc5fc368d798296dde318b', slot: "prefix", size: this.size === 'large' ? 'medium' : this.size }, "today"), hasSlot(this.host, 'label') ? (h("span", { slot: "label" }, h("slot", { name: "label" }))) : null, hasSlot(this.host, 'error-text') ? (h("span", { slot: "error-text" }, h("slot", { name: "error-text" }))) : null, hasSlot(this.host, 'help-text') ? (h("span", { slot: "help-text" }, h("slot", { name: "help-text" }))) : null), h("span", { key: 'fc7017ccfb60c332d81dda8b119ab86ee3bca1ce', id: "date-format", class: "sr-only" }, translateFormatHelp(this.language, this.dateFormat)), h("div", { key: '7426abbf8087e77dde6fb636454f1560ff9cb9da', ref: (el) => (this.positioner = el), class: "positioner" }, h("div", { key: '00596fb0f2710d52bdf8a74b0778622e73a7d998', class: "panel", ref: (el) => (this.panel = el) }, h("header", { key: '0bd4e94ee5e1ee032c98fb03b02f5835b86a1ba1', class: "panel__header" }, h("six-icon-button", { key: '54d5d8a3bdfa458f86b45f47fdc1742a9b355b2e', tabindex: "-1", class: "previous", onClick: this.handlePreviousClick, name: "arrow_back_ios" }), this.selectionMode === 'day' && (h("div", { key: '897b517718904cd3ddc2db09a8c69dbda8c941b5', class: "selector", onClick: () => (this.selectionMode = 'month') }, translateMonth(this.pointerDate.month, this.language), h("six-icon", { key: 'e3b05945fec95ee7d50ffff1758ac763b89773f9' }, "arrow_drop_down"))), this.selectionMode !== 'year' && (h("div", { key: '856d4133e83d45b76213391486b6365d30770e98', class: "selector", onClick: () => (this.selectionMode = 'year') }, this.pointerDate.year, h("six-icon", { key: '9e9318767a8e89c5e783dda3c6265a5adb88cb1f' }, "arrow_drop_down"))), this.selectionMode === 'year' && (h("div", { key: '52cbce14c980cab96acd2dccbb73a147ddf44373', class: "selector" }, this.pointerDate.year - Math.floor(NUMBER_OF_YEARS_SHOWN / 2), " \u2013", ' ', this.pointerDate.year + Math.floor(NUMBER_OF_YEARS_SHOWN / 2))), h("six-icon-button", { key: '421c1577505136a613405b4c878dc18ce49df323', tabindex: "-1", class: "next", onClick: this.handleNextClick, name: "arrow_forward_ios" })), this.selectionMode === 'day' && (h(DaySelection, { key: '7354b17d7e70534be7f3aaad0225156bbdd4a186', language: this.language, calendarGrid: createCalendarGrid({
+        return (h("div", { key: '915708e6b3815709fbf93546453a1527f0e2f4b2', class: "container" }, h("six-input", { key: '7beac04f73a37fba611860890c02a79d5a065fb6', ref: (el) => (this.inputElement = el), placeholder: this.placeholder == null ? this.dateFormat : this.placeholder, readonly: this.readonly, disabled: this.disabled, name: this.name, label: this.label, required: this.required, helpText: this.helpText, errorText: this.errorText, errorTextCount: this.errorTextCount, invalid: this.invalid, onKeyDown: this.handleInputKeyDown, onInput: this.handleInputChange, onBlur: this.handleInputBlur, "onSix-input-clear": this.handleInputClearClick, size: this.size, clearable: this.clearable, "aria-describedby": "date-format" }, h("six-icon", { key: '88f5d61c8d6af1627be1b9ed5ddf534669cbbedd', slot: "prefix", size: this.size === 'large' ? 'medium' : this.size }, "today"), hasSlot(this.host, 'label') ? (h("span", { slot: "label" }, h("slot", { name: "label" }))) : null, hasSlot(this.host, 'error-text') ? (h("span", { slot: "error-text" }, h("slot", { name: "error-text" }))) : null, hasSlot(this.host, 'help-text') ? (h("span", { slot: "help-text" }, h("slot", { name: "help-text" }))) : null), h("span", { key: '36f359e7ed900e6102444dcbf7e7c22b1aac042d', id: "date-format", class: "sr-only" }, translateFormatHelp(this.language, this.dateFormat)), h("div", { key: '560443132d2dbe1f0f2c147c2d0538eb33c7b76a', ref: (el) => (this.positioner = el), class: "positioner" }, h("div", { key: '800d71554bf415d0e39d40696271791785004e7f', class: "panel", ref: (el) => (this.panel = el) }, h("header", { key: '71baa85fece27f99982e5cb06e15c5d89d81f7a1', class: "panel__header" }, h("six-icon-button", { key: '43274a816945112492cb030012f4ecd0f1c6f5f3', tabindex: "-1", class: "previous", onClick: this.handlePreviousClick, name: "arrow_back_ios" }), this.selectionMode === 'day' && (h("div", { key: '2f391850b72291bfb7249bccf2ccf4aea6387340', class: "selector", onClick: () => (this.selectionMode = 'month') }, translateMonth(this.pointerDate.month, this.language), h("six-icon", { key: '95ea49cd1ccbeec9019491799cefb4d31b846f87' }, "arrow_drop_down"))), this.selectionMode !== 'year' && (h("div", { key: '7d65185d34d64361b8addfac6e3a5eb130fcf6b7', class: "selector", onClick: () => (this.selectionMode = 'year') }, this.pointerDate.year, h("six-icon", { key: 'ab5c06e07a09f945e845902588096ce4f906b5bf' }, "arrow_drop_down"))), this.selectionMode === 'year' && (h("div", { key: '9871ad7e39d18fdd5629b0f9d1caf935952d4ca5', class: "selector" }, this.pointerDate.year - Math.floor(NUMBER_OF_YEARS_SHOWN / 2), " \u2013", ' ', this.pointerDate.year + Math.floor(NUMBER_OF_YEARS_SHOWN / 2))), h("six-icon-button", { key: '20bafd71902a85f3db3c3b54628555b0f86e50aa', tabindex: "-1", class: "next", onClick: this.handleNextClick, name: "arrow_forward_ios" })), this.selectionMode === 'day' && (h(DaySelection, { key: '38e23637ec958abf9615adba7900f4ea6b15f27c', language: this.language, calendarGrid: createCalendarGrid({
                 year: this.pointerDate.year,
                 month: this.pointerDate.month,
                 selected: this.value || undefined,
@@ -250,7 +250,7 @@ export class SixDate {
                 maxDate: this.max,
                 dateFormat: this.dateFormat,
                 allowedDates: this.allowedDates,
-            }), dayClicked: this.handleDayClick })), this.selectionMode === 'month' && (h(MonthSelection, { key: '6055bd60a6deebdb8308a3c8ad66cfde9f1e2e7c', language: this.language, selected: this.value, monthClicked: this.handleMonthClicked })), this.selectionMode === 'year' && (h(YearSelection, { key: 'f0cf7fbc0ac3b72b53e5aa9c57207bba91c718b7', selected: this.value, pointerYear: this.pointerDate.year, yearCount: NUMBER_OF_YEARS_SHOWN, yearClicked: this.handleYearClicked }))))));
+            }), dayClicked: this.handleDayClick })), this.selectionMode === 'month' && (h(MonthSelection, { key: '10ec980d8a5fc1bf6480a96ee5df66abb9b347cb', language: this.language, selected: this.value, monthClicked: this.handleMonthClicked })), this.selectionMode === 'year' && (h(YearSelection, { key: 'ba791467977c55f80781a20774c5e32951641877', selected: this.value, pointerYear: this.pointerDate.year, yearCount: NUMBER_OF_YEARS_SHOWN, yearClicked: this.handleYearClicked }))))));
     }
     static get is() { return "six-date"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-details/six-details.js

@@ -138,15 +138,15 @@ export class SixDetails {
     }
     render() {
         const summaryIcon = this.hasContent && (this.summaryIcon || 'expand_more');
-        return (h("div", { key: 'faed14eb237bca80205f5d2f3c03e0aa2be2aa8a', ref: (el) => (this.details = el), part: "base", class: {
+        return (h("div", { key: '27ca22526d4341950e4db0d33b6f0f0af96ea867', ref: (el) => (this.details = el), part: "base", class: {
                 details: true,
                 'details--open': this.open,
                 'details--disabled': this.disabled,
                 inline: this.inline,
-            } }, h("header", { key: '1be614a46a9bc877348438b591d2da153332c7ae', ref: (el) => (this.header = el), part: "header", id: `${this.componentId}-header`, class: "details__header", role: "button", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `${this.componentId}-content`, "aria-disabled": this.disabled ? 'true' : 'false', tabIndex: this.disabled ? -1 : 0, onClick: this.handleSummaryClick, onKeyDown: this.handleSummaryKeyDown }, h("div", { key: '9734b67556eec1f335043935761a19a11aa831eb', part: "summary", class: "details__summary" }, h("slot", { key: '91c5af23a7938f1f199d3c54ddaca3e669f3b80e', name: "summary" }, this.summary)), h("span", { key: 'e624c2b720729d51128024eabbc5416033931f36', part: "summary-icon", class: {
+            } }, h("header", { key: 'f9f14d79ddff8b73ae0b6a3e959f5db892f4a31f', ref: (el) => (this.header = el), part: "header", id: `${this.componentId}-header`, class: "details__header", role: "button", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `${this.componentId}-content`, "aria-disabled": this.disabled ? 'true' : 'false', tabIndex: this.disabled ? -1 : 0, onClick: this.handleSummaryClick, onKeyDown: this.handleSummaryKeyDown }, h("div", { key: 'aec9b05ea1bb7eb2c42be7c95d584e35645fec64', part: "summary", class: "details__summary" }, h("slot", { key: '0ce0ee53a8cd67a3b2b92ba3fa51d79818b294e4', name: "summary" }, this.summary)), h("span", { key: '8cd7f1957b3498575654f5dbdb4664b503d71862', part: "summary-icon", class: {
                 'details__summary-icon': true,
                 'details__summary-icon--animate': this.animateSummaryIcon,
-            } }, h("slot", { key: 'cf6e43a08611306c4eee490042630b1a417df109', name: "summary-icon", onSlotchange: () => (this.animateSummaryIcon = false) }, summaryIcon && h("six-icon", { key: '6d28327bc4a439706ce71ad64056697f1b4c8448', size: this.summaryIconSize }, summaryIcon)))), h("div", { key: '21dc33a99a72f2eb639f35d48e7fa3369eb2d081', ref: (el) => (this.body = el), class: "details__body", onTransitionEnd: this.handleBodyTransitionEnd }, h("div", { key: 'c517d961bbc8f7ef4a21a5826b839c2eae98dd13', part: "content", id: `${this.componentId}-content`, class: "details__content", role: "region", "aria-labelledby": `${this.componentId}-header` }, h("slot", { key: 'e9e601dc421a3c31976f7ddf5b9bc681bbe6b8c1' })))));
+            } }, h("slot", { key: 'ec46c283b39907c65e996935a57d4580b0436306', name: "summary-icon", onSlotchange: () => (this.animateSummaryIcon = false) }, summaryIcon && h("six-icon", { key: '4a0ef8739c3a4503ca443f945086e9f6cc74b036', size: this.summaryIconSize }, summaryIcon)))), h("div", { key: '1cc71be309bffcb693e04ca86d4449db683b2f26', ref: (el) => (this.body = el), class: "details__body", onTransitionEnd: this.handleBodyTransitionEnd }, h("div", { key: '514ed3c5f7e5f762986c6ab9d274eb6251ecbf99', part: "content", id: `${this.componentId}-content`, class: "details__content", role: "region", "aria-labelledby": `${this.componentId}-header` }, h("slot", { key: '1af14b8843cdae96fa13decc6a6ba51613d477ad' })))));
     }
     static get is() { return "six-details"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-error/six-error.js

@@ -7,7 +7,7 @@ import { h } from "@stencil/core";
  */
 export class SixError {
     render() {
-        return (h("div", { key: '35e774adc232f29f26ed0dcc98f6befe1f2a6735', class: "six-error-container" }, h("slot", { key: '3ef7bc24a95509089baaf676986a5a6c91d32274' })));
+        return (h("div", { key: 'c58e9de60b37b5b3cd9744b606136edcf0d58d9c', class: "six-error-container" }, h("slot", { key: '7dd0aa74aad5b8b2be2e9aed41f44b29e7ffed7c' })));
     }
     static get is() { return "six-error"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-error-page/six-error-page.js

@@ -94,7 +94,7 @@ export class SixErrorPage {
         return DESCRIPTION_PER_ERROR_CODE[this.errorCode][this.language];
     }
     render() {
-        return (h("div", { key: '4ea2ec6cfd20308f5436337b7c76c5fe754aa24f', part: "container" }, h("div", { key: '1324fd2555df87799bdd23d36adcb7b00885a076', class: "six-error-page__icon-container", part: "icon-container" }, h("six-picto", { key: 'e7efd056f880c92385a9945d46c1c04c46872fc3', size: "4xl", class: "six-error-page__icon", part: "icon" }, this.getIconName())), h("div", { key: '75d52fbe4b3561c226c5830e15793d71ec877d46', class: "six-error-page__title", part: "title" }, this.getErrorTitle()), h("div", { key: 'f8ac2279ec7bda15115f2a8ffdad4e80ccdc9b42', class: "six-error-page__description", part: "description" }, this.getErrorDescription())));
+        return (h("div", { key: 'b48ab908b37b2b4d6d6ee80b2d1f73038800a0dc', part: "container" }, h("div", { key: 'd0fd1370a7b3500a1bbf4a798d5d64b2a309fabf', class: "six-error-page__icon-container", part: "icon-container" }, h("six-picto", { key: '88a00b48d434b687f270ee50e6506e23a21b0414', size: "4xl", class: "six-error-page__icon", part: "icon" }, this.getIconName())), h("div", { key: '275010c6651665efd03f3a9b36b074d0b72a9111', class: "six-error-page__title", part: "title" }, this.getErrorTitle()), h("div", { key: 'efc23d90edea6ce0bc3843a704a4ffb788f84042', class: "six-error-page__description", part: "description" }, this.getErrorDescription())));
     }
     static get is() { return "six-error-page"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-file-list/six-file-list.js

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
  */
 export class SixFileList {
     render() {
-        return (h("div", { key: '38755b01aeafb28e3f268925a347fabdb53cac9b', class: "six-files-list__container" }, h("slot", { key: '7e9e866c6b7f6dffbe26ba5b10c46b135cc1c389' })));
+        return (h("div", { key: 'cf80dfd0ccfbe849dd17bfd4d940fd8ef0d1930e', class: "six-files-list__container" }, h("slot", { key: 'cb9149f512f113f2012328a102a5eac8fef55f74' })));
     }
     static get is() { return "six-file-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-footer/six-footer.js

@@ -7,7 +7,7 @@ import { h } from "@stencil/core";
  */
 export class SixFooter {
     render() {
-        return (h("footer", { key: 'fe39b58edfd331a6b6ae1d551286fd45e3783f5d', class: "six-footer" }, h("slot", { key: '7c93a54de4e4160adabc4790b368401b790d6fcc' })));
+        return (h("footer", { key: '21f693d3b5de440dba60926318d0627ca1c260b1', class: "six-footer" }, h("slot", { key: 'ecd570f552abf35060d5b449c4ce900b23b2abb6' })));
     }
     static get is() { return "six-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-group-label/six-group-label.js

@@ -52,7 +52,7 @@ export class SixGroupLabel {
         (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.handleSlotChange);
     }
     render() {
-        return (h(FormControl, { key: '2bdb482e336b09325fe0bfc30cd3082846cbce6a', inputId: this.wrapperLabelId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, size: this.size, disabled: this.disabled, required: this.required }, h("slot", { key: 'cd79f08e30f7059290c81d83bb00e5b9f68a1181' })));
+        return (h(FormControl, { key: '69a1a4643e5c47c3348c90f7a8c6227da1bdf6c0', inputId: this.wrapperLabelId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, size: this.size, disabled: this.disabled, required: this.required }, h("slot", { key: '49f66c0010c80c65a8d95c6f68ed06adbab00fdb' })));
     }
     static get is() { return "six-group-label"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-header/six-header.js

@@ -28,11 +28,11 @@ export class SixHeader {
         this.eventListeners.removeAll();
     }
     render() {
-        return (h(Host, { key: '3c03ee28b12600576e0b714e5077ea2c800a4c65' }, h("header", { key: '8d3807cb3b05ca07cce629bf1dcdbdb49a6d400a', part: "header", class: "six-header" }, h("slot", { key: '7a920fedf946e99c4d7a538706e8061e165a0015' })), h("div", { key: 'c884119828755832b8312412647b8ff89fae5a88', class: {
+        return (h(Host, { key: '0a956c7cad628545be41c926565852f8b9489013' }, h("header", { key: '86ef3e269cdd9ee040c36189e886afca8024f0bd', part: "header", class: "six-header" }, h("slot", { key: 'c1f6c06a72dcbb8518ec4b66d047461d10b6dab9' })), h("div", { key: '875e7f2dae91404374e8481a303b0bc0ed72b24a', class: {
                 'six-header__search-field': true,
                 'six-header__search-field--visible': this.openSearch,
                 'six-header__search-field--shift-content': this.shiftContent,
-            } }, h("slot", { key: '42d1ab374144bc3da2b1cd144e3328c64ee75204', name: 'search-field' }))));
+            } }, h("slot", { key: '366b4b035f3b5a480cdd980cd6271fe181fca2c5', name: 'search-field' }))));
     }
     static get is() { return "six-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-header-dropdown-item/six-header-dropdown-item.js

@@ -24,9 +24,9 @@ export class SixHeaderDropdownItem {
         this.updateDropdownDistance();
     }
     render() {
-        return (h(Host, { key: 'f2d143e5da9526b536b6e4d663d7f854ee1a3bf2', class: {
+        return (h(Host, { key: '98b4b1ccfd9a0857cc30679ce08bdf79fd22ba57', class: {
                 'six-header-dropdown-item--active': this.active,
-            } }, h("six-dropdown", { key: 'ad3420fd33db605a06c62a4e7fdca7ecbeb6e3c2', ref: (el) => (this.dropdownElement = el), hoist: true, skidding: 0, placement: "bottom-end", "onSix-dropdown-show": () => (this.active = true), "onSix-dropdown-hide": () => (this.active = false), filter: this.filter, filterPlaceholder: this.filterPlaceholder }, h("slot", { key: '0bf9ab3feeaa7dbbaf48fb26b18919d0d5e4e936', slot: "trigger", name: "trigger" }), h("slot", { key: '25e063e170bac1f46a805cb2b4b49977212b560a' }))));
+            } }, h("six-dropdown", { key: '584f301f301f84f39e7dcbc724fb5afd7adeca55', ref: (el) => (this.dropdownElement = el), hoist: true, skidding: 0, placement: "bottom-end", "onSix-dropdown-show": () => (this.active = true), "onSix-dropdown-hide": () => (this.active = false), filter: this.filter, filterPlaceholder: this.filterPlaceholder }, h("slot", { key: 'cff60f757172303731a50d00717a476f48f3e56c', slot: "trigger", name: "trigger" }), h("slot", { key: 'f1a80cd16e7c30352a15db4a1550c38fa0a21023' }))));
     }
     updateDropdownDistance() {
         const trigger = getSlot(this.host, 'trigger');

package/dist/collection/components/six-header-item/six-header-item.js

@@ -15,7 +15,7 @@ export class SixHeaderItem {
         this.active = false;
     }
     render() {
-        return (h(Host, { key: 'c53b61e12c5df9a806e3b3fb9d5d5398dd7d928f', class: { 'six-header-item--active': this.active } }, h("slot", { key: '92e5a89e4a4bcb795c3bfc9f3e076d267be01153' })));
+        return (h(Host, { key: 'e94d72bc167c8ade7d81f416f48ee900693f48c0', class: { 'six-header-item--active': this.active } }, h("slot", { key: '86eac95abbec808cfe2bab0f1ad4b89dd69d781d' })));
     }
     static get is() { return "six-header-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-header-menu-button/six-header-menu-button.js

@@ -17,7 +17,7 @@ export class SixHeaderMenuButton {
         this.reset = false;
     }
     render() {
-        return (h("six-button", { key: 'f24f383b4bfab7416a6da813c08fe42905560d32', type: "secondary", caret: this.caret, disabled: this.disabled, loading: this.loading, submit: this.submit, reset: this.reset }, h("slot", { key: '0c5dff4023b79b26d0e7c8d79adb78223d4df61c', name: "suffix", slot: "suffix" }), h("slot", { key: 'cdf0bf1a34a284066e288c1b138afcedb02c7e4a', name: "prefix", slot: "prefix" }), h("slot", { key: 'c5e704b918a9e2395a61f40fdbf3ac74da97285f' })));
+        return (h("six-button", { key: '8f16a33fa8b582d5ec3d149d01bbfd8cc99816f7', type: "secondary", caret: this.caret, disabled: this.disabled, loading: this.loading, submit: this.submit, reset: this.reset }, h("slot", { key: '52e7d5689dd7134a5a95f5ec065eb6ebfe274dc4', name: "suffix", slot: "suffix" }), h("slot", { key: '6170bff5e2846774d293a9eee5e1b94149b609cf', name: "prefix", slot: "prefix" }), h("slot", { key: '6506ee3f4d7bd48e6b0f67f0a5ac9911d74786f1' })));
     }
     static get is() { return "six-header-menu-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-icon/six-icon.css

@@ -1,48 +1,37 @@
-:host {
-  position: relative;
-  box-sizing: border-box;
-}
-:host *, :host *:before, :host *:after {
-  box-sizing: border-box;
-}
-
-/* Hides content visually while still making it available to screen readers */
-.sr-only {
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-
+@charset "UTF-8";
 :host {
   display: inline-flex;
   vertical-align: middle;
 }
 
-.material-icons {
+/* ==========================================================================
+   Common icon text baseline
+   ========================================================================== */
+.material-icons,
+.material-icons-outlined,
+.material-icons-filled,
+.material-symbols-outlined,
+.material-symbols {
+  display: inline-block;
   vertical-align: middle;
-  font-weight: normal;
-  font-style: normal;
-  text-transform: none;
   letter-spacing: normal;
   word-wrap: normal;
   white-space: nowrap;
   direction: ltr;
-  /* Support for all WebKit browsers. */
+  /* rendering */
   -webkit-font-smoothing: antialiased;
-  /* Support for Safari and Chrome. */
-  text-rendering: optimizeLegibility;
-  /* Support for Firefox. */
   -moz-osx-font-smoothing: grayscale;
-  /* Support for IE. */
+  text-rendering: optimizeLegibility;
   font-feature-settings: "liga";
-  /* Icon name should not be selectable. */
+  font-style: normal;
+  font-weight: normal;
+  font-synthesis-weight: none;
   user-select: none;
 }
 
+/* ==========================================================================
+   Material Icons (classic)
+   ========================================================================== */
 .material-icons-filled {
   font-family: "Material Icons";
 }
@@ -51,6 +40,34 @@
   font-family: "Material Icons Outlined";
 }
 
+/* ==========================================================================
+   Material Symbols (variable font)
+   We always use the "Outlined Variable" family and drive style via axes.
+   (One font for both outlined/filled via FILL axis.)
+   ========================================================================== */
+.material-symbols-outlined,
+.material-symbols {
+  font-family: "Material Symbols Outlined Variable";
+  /* Base variations shared by both */
+  font-variation-settings: "wght" 400, "GRAD" 0, "opsz" 24;
+}
+
+/* Outlined → FILL 0 */
+.material-symbols-outlined {
+  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
+}
+
+/* Filled → FILL 1 */
+.material-symbols {
+  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
+}
+
+/* ==========================================================================
+   Size helpers (unchanged API, a bit more explicit)
+   ========================================================================== */
+.icon {
+  /* default in Google’s docs */
+}
 .icon--xsmall {
   font-size: 12px;
 }

package/dist/collection/components/six-icon/six-icon.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { getDefaultIconLibrary } from "../../utils/icon";
 /**
  * @since 1.0
  * @status stable
@@ -12,11 +13,19 @@ export class SixIcon {
         /** If set to true the default material outlined icons are not used. */
         this.filled = false;
     }
+    isSymbols() {
+        var _a;
+        const lib = (_a = this.library) !== null && _a !== void 0 ? _a : getDefaultIconLibrary();
+        return lib === 'material-symbols';
+    }
     render() {
-        return (h("i", { key: '748f3396556d9bee11a96c550c4f04b5d4945842', class: {
-                'material-icons': true,
-                'material-icons-outlined': !this.filled,
-                'material-icons-filled': this.filled,
+        const isSymbols = this.isSymbols();
+        return (h("i", { key: 'd62435a9ab36ae9e211c21deefed88fd9ddee825', class: {
+                'material-icons': !isSymbols,
+                'material-icons-outlined': !isSymbols && !this.filled,
+                'material-icons-filled': !isSymbols && this.filled,
+                'material-symbols-outlined': isSymbols && !this.filled,
+                'material-symbols': isSymbols && this.filled,
                 'icon--xsmall': this.size === 'xSmall',
                 'icon--small': this.size === 'small',
                 'icon--medium': this.size === 'medium',
@@ -25,7 +34,7 @@ export class SixIcon {
                 'icon--xxlarge': this.size === 'xxLarge',
                 'icon--xxxlarge': this.size === 'xxxLarge',
                 'icon--inherit': this.size === 'inherit',
-            } }, h("slot", { key: 'd80f49ba0904122e01610b0f23bae0915ee9c6ec' })));
+            } }, h("slot", { key: '6c8cf45d02106faae111ce323754573008d2af2a' })));
     }
     static get is() { return "six-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -80,6 +89,31 @@ export class SixIcon {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "library": {
+                "type": "string",
+                "attribute": "library",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconLibrary",
+                    "resolved": "\"material-icons\" | \"material-symbols\" | undefined",
+                    "references": {
+                        "IconLibrary": {
+                            "location": "import",
+                            "path": "../../utils/icon",
+                            "id": "src/utils/icon.ts::IconLibrary"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon library to use when no `library` prop is provided.\nBy default, all `<six-icon>` instances fall back to the globally configured\ndefault library (via `setDefaultIconLibrary()` / `getDefaultIconLibrary()`),\nwhich is `\"material-icons\"` unless changed at runtime.\n\nThis allows teams to switch the default across an entire project without\nhaving to set the `library` prop on every `<six-icon>` instance.\n\nIcon library for this instance. Overrides the global default.\n- \"material-icons\"  \u2192 Material Icons\n- \"material-symbols\"  \u2192 Material Symbols"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
             }
         };
     }

package/dist/collection/components/six-icon/six-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"six-icon.js","sourceRoot":"","sources":["../../../src/components/six-icon/six-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;GAKG;AAOH,MAAM,OAAO,OAAO;IALpB;QAME,uBAAuB;QACE,SAAI,GAQZ,SAAS,CAAC;QAE3B,uEAAuE;QAC/D,WAAM,GAAG,KAAK,CAAC;KAuBxB;IArBC,MAAM;QACJ,OAAO,CACL,0DACE,KAAK,EAAE;gBACL,gBAAgB,EAAE,IAAI;gBACtB,yBAAyB,EAAE,CAAC,IAAI,CAAC,MAAM;gBACvC,uBAAuB,EAAE,IAAI,CAAC,MAAM;gBACpC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACtC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBACpC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACtC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBACpC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACtC,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBACxC,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU;gBAC1C,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;aACzC;YAED,8DAAa,CACX,CACL,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the material icon name.\n */\n\n@Component({\n  tag: 'six-icon',\n  styleUrls: ['six-icon.scss'],\n  shadow: true,\n})\nexport class SixIcon {\n  /** The icon's size. */\n  @Prop({ reflect: true }) size:\n    | 'inherit'\n    | 'xSmall'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'xLarge'\n    | 'xxLarge'\n    | 'xxxLarge' = 'inherit';\n\n  /** If set to true the default material outlined icons are not used. */\n  @Prop() filled = false;\n\n  render() {\n    return (\n      <i\n        class={{\n          'material-icons': true,\n          'material-icons-outlined': !this.filled,\n          'material-icons-filled': this.filled,\n          'icon--xsmall': this.size === 'xSmall',\n          'icon--small': this.size === 'small',\n          'icon--medium': this.size === 'medium',\n          'icon--large': this.size === 'large',\n          'icon--xlarge': this.size === 'xLarge',\n          'icon--xxlarge': this.size === 'xxLarge',\n          'icon--xxxlarge': this.size === 'xxxLarge',\n          'icon--inherit': this.size === 'inherit',\n        }}\n      >\n        <slot></slot>\n      </i>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-icon.js","sourceRoot":"","sources":["../../../src/components/six-icon/six-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,qBAAqB,EAAe,MAAM,kBAAkB,CAAC;AAEtE;;;;;GAKG;AAOH,MAAM,OAAO,OAAO;IALpB;QAME,uBAAuB;QACE,SAAI,GAQZ,SAAS,CAAC;QAE3B,uEAAuE;QAC/D,WAAM,GAAG,KAAK,CAAC;KAgDxB;IA/BS,SAAS;;QACf,MAAM,GAAG,GAAG,MAAA,IAAI,CAAC,OAAO,mCAAI,qBAAqB,EAAE,CAAC;QACpD,OAAO,GAAG,KAAK,kBAAkB,CAAC;IACpC,CAAC;IAED,MAAM;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;QACnC,OAAO,CACL,0DACE,KAAK,EAAE;gBACL,gBAAgB,EAAE,CAAC,SAAS;gBAC5B,yBAAyB,EAAE,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,MAAM;gBACrD,uBAAuB,EAAE,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM;gBAElD,2BAA2B,EAAE,SAAS,IAAI,CAAC,IAAI,CAAC,MAAM;gBACtD,kBAAkB,EAAE,SAAS,IAAI,IAAI,CAAC,MAAM;gBAE5C,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACtC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBACpC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACtC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBACpC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACtC,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBACxC,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU;gBAC1C,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;aACzC;YAED,8DAAa,CACX,CACL,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport { getDefaultIconLibrary, IconLibrary } from '../../utils/icon';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the material icon name.\n */\n\n@Component({\n  tag: 'six-icon',\n  styleUrls: ['six-icon.scss'],\n  shadow: true,\n})\nexport class SixIcon {\n  /** The icon's size. */\n  @Prop({ reflect: true }) size:\n    | 'inherit'\n    | 'xSmall'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'xLarge'\n    | 'xxLarge'\n    | 'xxxLarge' = 'inherit';\n\n  /** If set to true the default material outlined icons are not used. */\n  @Prop() filled = false;\n\n  /**\n   * Icon library to use when no `library` prop is provided.\n   * By default, all `<six-icon>` instances fall back to the globally configured\n   * default library (via `setDefaultIconLibrary()` / `getDefaultIconLibrary()`),\n   * which is `\"material-icons\"` unless changed at runtime.\n   *\n   * This allows teams to switch the default across an entire project without\n   * having to set the `library` prop on every `<six-icon>` instance.\n   *\n   * Icon library for this instance. Overrides the global default.\n   * - \"material-icons\"  → Material Icons\n   * - \"material-symbols\"  → Material Symbols\n   */\n  @Prop({ reflect: true }) library?: IconLibrary;\n\n  private isSymbols(): boolean {\n    const lib = this.library ?? getDefaultIconLibrary();\n    return lib === 'material-symbols';\n  }\n\n  render() {\n    const isSymbols = this.isSymbols();\n    return (\n      <i\n        class={{\n          'material-icons': !isSymbols,\n          'material-icons-outlined': !isSymbols && !this.filled,\n          'material-icons-filled': !isSymbols && this.filled,\n\n          'material-symbols-outlined': isSymbols && !this.filled,\n          'material-symbols': isSymbols && this.filled,\n\n          'icon--xsmall': this.size === 'xSmall',\n          'icon--small': this.size === 'small',\n          'icon--medium': this.size === 'medium',\n          'icon--large': this.size === 'large',\n          'icon--xlarge': this.size === 'xLarge',\n          'icon--xxlarge': this.size === 'xxLarge',\n          'icon--xxxlarge': this.size === 'xxxLarge',\n          'icon--inherit': this.size === 'inherit',\n        }}\n      >\n        <slot></slot>\n      </i>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-icon-button/six-icon-button.js

@@ -35,11 +35,11 @@ export class SixIconButton {
         const isLink = this.href != null;
         const isButton = !isLink;
         const Button = isLink ? 'a' : 'button';
-        const html = this.html && h("span", { key: 'f351c6ac9b9c3a35d1c7cdd55d3e919f070244d0', innerHTML: this.html });
-        return (h("div", { key: '3828510ea2e5a3318c4f9dc1f40f0f13ec8f5120', onClick: this.handleClickEvent, class: { 'icon-button-wrapper--disabled': this.disabled } }, h(Button, { key: '05ed661d1f708125d5353caefe236cd7bf8a427e', ref: (el) => (this.button = el), part: "base", disabled: isButton ? this.disabled : undefined, tabindex: this.disabled ? '-1' : undefined, class: {
+        const html = this.html && h("span", { key: '3a8510f8bb2afb5170f10c74be60ba75b8a5337c', innerHTML: this.html });
+        return (h("div", { key: '2f7bbfa76220fdcb6f761564fc0f1cd2d9965016', onClick: this.handleClickEvent, class: { 'icon-button-wrapper--disabled': this.disabled } }, h(Button, { key: '7453dadfdd7eafadae8c08c187d2aed60ac32031', ref: (el) => (this.button = el), part: "base", disabled: isButton ? this.disabled : undefined, tabindex: this.disabled ? '-1' : undefined, class: {
                 'icon-button': true,
                 'icon-button--disabled': this.disabled,
-            }, type: isButton ? 'button' : undefined, "aria-label": this.label, href: isLink ? this.href : undefined, target: isLink && this.target != null ? this.target : undefined, download: isLink && this.download != null ? this.download : undefined, rel: isLink && this.target != null ? 'noreferrer noopener' : undefined }, h("six-icon", { key: 'ba8d525d4ced58c6c93dff964738f34b3a36f067', "aria-hidden": "true", size: this.size }, this.name), h("slot", { key: '8f1c47548463c556045359dc3bfaa51d14b1a6ad' }), html)));
+            }, type: isButton ? 'button' : undefined, "aria-label": this.label, href: isLink ? this.href : undefined, target: isLink && this.target != null ? this.target : undefined, download: isLink && this.download != null ? this.download : undefined, rel: isLink && this.target != null ? 'noreferrer noopener' : undefined }, h("six-icon", { key: 'ed51d0979fb1ecce548b342ee324bab5d2cf6dfd', "aria-hidden": "true", size: this.size }, this.name), h("slot", { key: '12bbdce6ac15e198adf8afd6c17cba7aadf20376' }), html)));
     }
     static get is() { return "six-icon-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-layout-grid/six-layout-grid.js

@@ -16,7 +16,7 @@ export class SixLayoutGrid {
         this.handleColumnsChange();
     }
     render() {
-        return (h(Host, { key: '1417d46422814262f561148684b74031efff6b3f' }, h("slot", { key: '319d6bdac4fdd3d25e3271e9db5201f3452a3733' })));
+        return (h(Host, { key: '93230c50bad422e3bfab05966bdf14e968f0eb73' }, h("slot", { key: 'acfb4f0ea76c788683349870d990a0e0ffc338bb' })));
     }
     static get is() { return "six-layout-grid"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-main-container/six-main-container.js

@@ -16,7 +16,7 @@ export class SixMainContainer {
         this.padded = true;
     }
     render() {
-        return (h(Host, { key: '6a58c3bf1117f6d8ec771b10b9bb5eeca8f75d38' }, h("div", { key: '709e6b3c0f6b915cdb02b6231b8475a32aaef821', part: "left-margin", class: "left-margin" }), h("div", { key: '8bca7342d56b444696b39e3b4e03b69fc7a8724a', part: "content", class: { content: true, 'content--padded': this.padded } }, h("slot", { key: '8cae2e164ec3d6370b2d481bc62f4c2af2b194c5' })), h("div", { key: '5c4a7ecbbaff6cd381ba7a3253ccbc20a72e90cc', part: "right-margin", class: "right-margin" })));
+        return (h(Host, { key: '907a3b8ce2b10b71a20f97f0168a43a0ab5cf44c' }, h("div", { key: 'e04d2cc3e6a60870bd943d5ca34ab886180b5b99', part: "left-margin", class: "left-margin" }), h("div", { key: '5d0c9a5a499c49ad95181053df22fcb66f6d3661', part: "content", class: { content: true, 'content--padded': this.padded } }, h("slot", { key: 'a4d5ae36a32f6f2fc2a8ed604899554fe7eb8acc' })), h("div", { key: '63725bee77f3a2e6d5c6bd631684fd8b8c37d4b1', part: "right-margin", class: "right-margin" })));
     }
     static get is() { return "six-main-container"; }
     static get encapsulation() { return "shadow"; }