@six-group/ui-library 0.0.0-insider.afba913 → 0.0.0-insider.b0fd8e9

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-input/six-input.js

@@ -213,7 +213,7 @@ export class SixInput {
         return ((_a = this.value) !== null && _a !== void 0 ? _a : '').toString();
     }
     render() {
-        return (h(FormControl, { key: '8c61ef61949c55f7a2a4428bc0cbd1ad3429376c', 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.hasErrorSlot, size: this.size, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { key: '164f57efb598ff9cd8e0e2f0d9dc0632126bb599', part: "base", class: {
+        return (h(FormControl, { key: 'b88afe1aa2622eee58a8d66257cc5a0983354b25', 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.hasErrorSlot, size: this.size, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { key: 'b07352c5f2d4480a4b2919854e154faeac2d9f0f', part: "base", class: {
                 input: true,
                 // Sizes
                 'input--small': this.size === 'small',
@@ -227,10 +227,10 @@ export class SixInput {
                 'input--focused': this.hasFocus,
                 'input--empty': this.getValue().length === 0,
                 'input--invalid': this.invalid,
-            } }, h("span", { key: 'e590f3edf7da55cd0ef6fde84415431095a3b2c6', part: "prefix", class: "input__prefix" }, h("slot", { key: 'd4352ed93f6977d425a8163958d3c92d043c113c', name: "prefix" })), h("input", { key: '77bf27819e073a903dce1f804ac54f4b25f5135d', part: "input", ref: (el) => (this.nativeInput = el), id: this.inputId, size: 1, class: {
+            } }, h("span", { key: '37acf6498894ed16984dc35615387a9d7cb634d3', part: "prefix", class: "input__prefix" }, h("slot", { key: '88e70802193d8925f03d58ea964a0bb9034a74ab', name: "prefix" })), h("input", { key: 'bdeabe4cc23fc68a3a9c25307cf37ca2d77d6a5f', part: "input", ref: (el) => (this.nativeInput = el), id: this.inputId, size: 1, class: {
                 input__control: true,
                 input__control__prefix: hasSlot(this.host, 'prefix'),
-            }, type: this.type === 'password' && this.isPasswordVisible ? 'text' : this.type, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, minLength: this.minlength, maxLength: this.maxlength, min: this.min, max: this.max, step: this.step, value: this.getValue(), autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, spellcheck: this.spellcheck, pattern: this.pattern, required: this.required, inputMode: this.inputmode, "aria-labelledby": this.labelId, "aria-describedby": this.helpTextId, "aria-invalid": this.invalid ? 'true' : 'false', onChange: this.handleChange, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, "data-testid": "input-control" }), this.clearable && !this.disabled && (h("button", { key: '4558842c4d9fa3623688a18aab4a69da2a156f65', part: "clear-button", class: "input__clear", type: "button", onClick: this.handleClearClick, tabindex: "-1", "data-testid": "input-clear-button" }, h("slot", { key: '6b03819fbf8640f01c292c373931d7c80a322e0d', name: "clear-icon" }, h("six-icon", { key: 'f53987138284512733769632c3ba246b4e9db721', size: ICON_SIZES[this.size] }, "clear")))), this.togglePassword && (h("button", { key: 'e42a2c571095282b3fcdc4cf66d4aa013339a437', part: "password-toggle-button", class: "input__password-toggle", type: "button", onClick: this.handlePasswordToggle, tabindex: "-1" }, this.isPasswordVisible ? (h("slot", { name: "show-password-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "visibility_off"))) : (h("slot", { name: "hide-password-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "visibility"))))), h("span", { key: '6b1530248f04eff0e1de3137479384cfde161c39', part: "suffix", class: "input__suffix" }, h("slot", { key: '7f091246942c4af0c56adc76afda69e24e827d43', name: "suffix" })))));
+            }, type: this.type === 'password' && this.isPasswordVisible ? 'text' : this.type, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, minLength: this.minlength, maxLength: this.maxlength, min: this.min, max: this.max, step: this.step, value: this.getValue(), autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, spellcheck: this.spellcheck, pattern: this.pattern, required: this.required, inputMode: this.inputmode, "aria-labelledby": this.labelId, "aria-describedby": this.helpTextId, "aria-invalid": this.invalid ? 'true' : 'false', onChange: this.handleChange, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, "data-testid": "input-control" }), this.clearable && !this.disabled && (h("button", { key: 'e7f5713eec0bf5bd6b69335f60793071309770dc', part: "clear-button", class: "input__clear", type: "button", onClick: this.handleClearClick, tabindex: "-1", "data-testid": "input-clear-button" }, h("slot", { key: '9cef48b67afbb2a833a7dff0ffa3b8ce153c11b2', name: "clear-icon" }, h("six-icon", { key: 'fa08350fb58063c871ef9f64d3d3d5a9dd8fbdec', size: ICON_SIZES[this.size] }, "clear")))), this.togglePassword && (h("button", { key: 'aacef765fcbc09b9479737d620568a5f78a884e5', part: "password-toggle-button", class: "input__password-toggle", type: "button", onClick: this.handlePasswordToggle, tabindex: "-1" }, this.isPasswordVisible ? (h("slot", { name: "show-password-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "visibility_off"))) : (h("slot", { name: "hide-password-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "visibility"))))), h("span", { key: '0e8461e5897ab4380f67e207d1c1f3d9065b00b7', part: "suffix", class: "input__suffix" }, h("slot", { key: 'a7634ecf343884a7197b2edb82a55863af8faf5b', name: "suffix" })))));
     }
     static get is() { return "six-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-language-switcher/six-language-switcher.js

@@ -44,7 +44,7 @@ export class SixLanguageSwitcher {
         }
     }
     render() {
-        return (h("div", { key: '74112069d8765f735c938e7f18810bd7156c2fdd', part: "container", class: "language-switcher__container" }, this.languages.map((lang, index) => {
+        return (h("div", { key: '4e324d4503e9d65278e4b3c55025363a685d9a69', part: "container", class: "language-switcher__container" }, this.languages.map((lang, index) => {
             const language = typeof lang === 'string' ? lang : lang.key;
             return (h("div", { onClick: this.handleLanguageSwitching(language, typeof lang === 'string' ? lang : lang.value), onKeyDown: (e) => {
                     if (e.key === 'Enter' || e.key === ' ') {

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"; }

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

@@ -245,10 +245,10 @@ export class SixMenu {
             .map(({ value, label }) => (h("six-menu-item", { checkType: "check", key: value, value: value }, label)));
     }
     render() {
-        return (h("div", { key: 'a346d393b279517ec252289e173e1d2e1ac82147', ref: (el) => (this.menuWrapper = el), style: this.getMenuWrapperStyle(), part: "wrapper", class: {
+        return (h("div", { key: '5b49fa6852d9d86c36e77533e06950ca5c320675', ref: (el) => (this.menuWrapper = el), style: this.getMenuWrapperStyle(), part: "wrapper", class: {
                 menu: true,
-                '.no-shadow': this.removeBoxShadow,
-            } }, h("div", { key: 'eeca9d33ecede486adc958510b2bc7028517a79a', ref: (el) => (this.menu = el), part: "base", role: "menu", onClick: this.handleClick, onKeyDown: this.handleKeyDown, tabIndex: 0, style: this.getMenuContainerStyle() }, h("slot", { key: 'c46d98b34ddaec7d041ee2ad4aa40a048a93cc80' }), this.renderItems()), this.virtualScroll && h("div", { key: '535cf4f968da60291f420da2722fc1692c0c064a', style: this.getScrollbarGhostStyle() })));
+                'no-shadow': this.removeBoxShadow,
+            } }, h("div", { key: 'b471da4ddcd06d56f21b020491c41c53766757a6', ref: (el) => (this.menu = el), part: "base", role: "menu", onClick: this.handleClick, onKeyDown: this.handleKeyDown, tabIndex: 0, style: this.getMenuContainerStyle() }, h("slot", { key: 'e04e2751c6afd78db344211ca1e6db55b6b6d829' }), this.renderItems()), this.virtualScroll && h("div", { key: '63dcb8d734ae480e7a4a8dcd50f0dc4131f8cb09', style: this.getScrollbarGhostStyle() })));
     }
     static get is() { return "six-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"six-menu.js","sourceRoot":"","sources":["../../../src/components/six-menu/six-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { getTextContent } from '../../utils/slot';\nimport { StyleDeclaration } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { debounce } from '../../utils/execution-control';\n\nexport interface SixMenuItemData {\n  label: string;\n  value: string;\n}\n\nexport interface SixMenuItemSelectedPayload {\n  name: string;\n  item: HTMLSixMenuItemElement;\n}\n\nconst isFocusedMenuItem = (menuItem: HTMLSixMenuItemElement) =>\n  menuItem?.shadowRoot?.querySelector('.menu-item')?.classList?.contains('menu-item--focused');\n\nconst isSIXMenuItemElement = (el?: Element): el is HTMLSixMenuItemElement =>\n  el?.tagName.toLowerCase() === 'six-menu-item';\n\nconst mapToMenuItem = ({ value, label }: SixMenuItemData) => (\n  <six-menu-item key={value} value={value}>\n    {label}\n  </six-menu-item>\n);\n\nconst DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING = 5;\nconst DEFAULT_SIX_MENU_ITEM_HEIGHT_FOR_VIRTUAL_SCROLLING = 48;\nconst DEFAULT_SIX_MENU_ITEM_HEIGHT = 64;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The menu's content, including menu items, menu dividers, and menu labels.\n *\n * @part base - The component's base wrapper.\n */\n@Component({\n  tag: 'six-menu',\n  styleUrl: 'six-menu.scss',\n  shadow: true,\n})\nexport class SixMenu {\n  private readonly eventListeners = new EventListeners();\n\n  private menu?: HTMLElement;\n  private menuWrapper?: HTMLElement;\n  private typeToSelectString = '';\n  private typeToSelectTimeout?: number;\n\n  @Element() host!: HTMLSixMenuElement;\n\n  /** Emitted when a menu item is selected. */\n  @Event({ eventName: 'six-menu-item-selected' }) sixMenuItemSelected!: EventEmitter<SixMenuItemSelectedPayload>;\n\n  /** Set to true to remove the box-shadow */\n  @Prop() removeBoxShadow = false;\n\n  /** Set the options to be shown in the dropdown */\n  @Prop() items: SixMenuItemData[] | null = null;\n\n  /** Defines how many items should be shown. If the number of items is larger than this property a scrollbar will be shown */\n  @Prop() itemsShown?: number;\n\n  /** Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)\n   *  are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot. */\n  @Prop() virtualScroll = false;\n\n  /**\n   * Used for virtual scrolling\n   * Define how many items should be rendered in the DOM when using virtual scrolling\n   */\n  @Prop() itemSize = 10;\n\n  /**\n   * Used for virtual scrolling\n   * Define the debounce for listening on scrolling changes in milliseconds.\n   * The lower the number the more sensitive the component reacts to scrolling changes.\n   */\n  @Prop() scrollingDebounce = 15;\n\n  /**\n   * Internal: Disables handling of key presses.\n   */\n  @Prop() disableKeyboardHandling = false;\n\n  /**\n   * Used to calculate which items should be rendered in the DOM\n   */\n  @State()\n  private scrollingIndex = 0;\n\n  // set a default item height, this variable will be updated with the real value after the first render.\n  // However, it's necessary to have a default value because we can only fetch the proper height after the first render\n  @State()\n  private sixMenuItemHeight = this.virtualScroll\n    ? DEFAULT_SIX_MENU_ITEM_HEIGHT_FOR_VIRTUAL_SCROLLING\n    : DEFAULT_SIX_MENU_ITEM_HEIGHT;\n\n  connectedCallback() {\n    this.handleClick = this.handleClick.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n  }\n\n  componentWillLoad() {\n    if (this.items === null) {\n      return;\n    }\n  }\n\n  private handleScrolling = () => {\n    if (this.menuWrapper == null) return;\n    // for performance improvements we only update the DOM if the scrollRatio change \"enough\"\n    this.scrollingIndex = Math.floor(this.menuWrapper.scrollTop / this.sixMenuItemHeight);\n  };\n\n  componentDidLoad() {\n    this.setupForVirtualScrollingAfterRendering();\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  /**\n   * Initiates type-to-select logic, which automatically selects an option based on what the user is currently typing.\n   * The key passed will be appended to the internal query and the selection will be updated. After a brief period, the\n   * internal query is cleared automatically. This method is intended to be used with the keydown event. Useful for\n   * enabling type-to-select when the menu doesn't have focus.\n   */\n  @Method()\n  async typeToSelect(key: string) {\n    clearTimeout(this.typeToSelectTimeout);\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    this.typeToSelectTimeout = setTimeout(() => (this.typeToSelectString = ''), 750);\n    this.typeToSelectString += key.toLowerCase();\n    const items = this.getItems();\n    for (const item of items) {\n      const slot = item.shadowRoot?.querySelector('slot:not([name])') as HTMLSlotElement;\n      const label = getTextContent(slot).toLowerCase().trim();\n      if (label.substring(0, this.typeToSelectString.length) === this.typeToSelectString) {\n        item.setFocus();\n        break;\n      }\n    }\n  }\n\n  private getItemsShown(): number {\n    const defaultItemsShown = this.virtualScroll ? DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING : 0;\n    if (this.items && this.items.length === 1) {\n      return 0;\n    }\n    return this.itemsShown ?? defaultItemsShown;\n  }\n\n  private setupForVirtualScrollingAfterRendering() {\n    if (!this.virtualScroll || this.menuWrapper == null) return;\n\n    this.eventListeners.add(this.menuWrapper, 'scroll', debounce(this.handleScrolling, this.scrollingDebounce));\n\n    // set menu height to proper height once the item is rendered.\n    const menuItemHeight = this.menu?.querySelector('six-menu-item')?.clientHeight;\n    if (menuItemHeight != null && menuItemHeight > 0) {\n      this.sixMenuItemHeight = menuItemHeight;\n    }\n  }\n\n  private getItems(): HTMLSixMenuItemElement[] {\n    if (this.menu == null) return [];\n\n    if (this.items != null) {\n      return this.items.map(mapToMenuItem);\n    }\n\n    const slot = this.menu.querySelector('slot');\n    if (slot == null) return [];\n    return [...slot.assignedElements({ flatten: true })].filter(\n      (el): el is HTMLSixMenuItemElement => isSIXMenuItemElement(el) && !el.disabled\n    );\n  }\n\n  private getActiveItemIndex() {\n    const items = this.getItems();\n    const selectedItem = this.getActiveItem();\n    if (selectedItem != null) {\n      const itemIndex = items.indexOf(selectedItem);\n      if (itemIndex > -1) {\n        return itemIndex;\n      }\n    }\n    const sixMenuItems = this.extractItemsFromDOM();\n    return sixMenuItems.findIndex(isFocusedMenuItem);\n  }\n\n  private getActiveItem(): HTMLSixMenuItemElement | undefined {\n    const activeElement = this.getItems().find((i) => i === document.activeElement);\n    if (activeElement != null) {\n      return activeElement;\n    }\n    return this.extractItemsFromDOM()?.find(isFocusedMenuItem);\n  }\n\n  private extractItemsFromDOM() {\n    return Array.from(this.host.shadowRoot?.querySelectorAll('six-menu-item') ?? []);\n  }\n\n  private setActiveItem(item: HTMLSixMenuItemElement) {\n    item?.setFocus();\n  }\n\n  private handleClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n    const clickedItem = target.closest('six-menu-item');\n    if (clickedItem && !clickedItem.disabled) {\n      this.sixMenuItemSelected.emit({ name: clickedItem.value, item: clickedItem });\n    }\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (this.disableKeyboardHandling) {\n      return;\n    }\n\n    // Make a selection when pressing enter\n    if (event.key === 'Enter') {\n      const activeItem = this.getActiveItem();\n      event.preventDefault();\n\n      if (activeItem != null) {\n        this.sixMenuItemSelected.emit({ name: activeItem.value, item: activeItem });\n      }\n    }\n\n    // Prevent scrolling when space is pressed\n    if (event.key === ' ') {\n      event.preventDefault();\n    }\n\n    // Move the selection when pressing down or up\n    if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n      const items = this.items === null ? this.getItems() : this.extractItemsFromDOM();\n\n      let indexOfActiveItem = this.getActiveItemIndex();\n\n      if (items.length > 0) {\n        event.preventDefault();\n\n        if (event.key === 'ArrowDown') {\n          indexOfActiveItem++;\n        } else if (event.key === 'ArrowUp') {\n          indexOfActiveItem--;\n        } else if (event.key === 'Home') {\n          indexOfActiveItem = 0;\n        } else if (event.key === 'End') {\n          indexOfActiveItem = items.length - 1;\n        }\n\n        if (indexOfActiveItem < 0) indexOfActiveItem = 0;\n        if (indexOfActiveItem > items.length - 1) indexOfActiveItem = items.length - 1;\n\n        this.setActiveItem(items[indexOfActiveItem]);\n\n        return;\n      }\n    }\n\n    void this.typeToSelect(event.key);\n  }\n\n  private getMenuWrapperStyle() {\n    const styles: Partial<StyleDeclaration> = {};\n    if (this.getItemsShown() > 0) {\n      // calculate the proper height to show the correct number of items\n      styles.height = `${(this.getItemsShown() ?? 0) * this.sixMenuItemHeight}px`;\n    } else if (this.items && this.items.length === 1) {\n      styles.height = 'auto';\n    }\n    return {\n      ...styles,\n    };\n  }\n\n  private getMenuContainerStyle() {\n    const styles: Partial<StyleDeclaration> = {};\n\n    if (this.virtualScroll) {\n      // calculate height of content are if all items would be rendered so the scrollbar has the proper size\n      styles.transform = `translateY(${this.sixMenuItemHeight * this.scrollingIndex}px)`;\n    }\n\n    return {\n      ...styles,\n    };\n  }\n\n  private getScrollbarGhostStyle() {\n    const styles: Partial<StyleDeclaration> = {};\n    if (this.virtualScroll && this.items !== null && this.items.length > 1) {\n      styles.height = `${this.items.length * this.sixMenuItemHeight - this.itemSize * this.sixMenuItemHeight}px`;\n    }\n    return {\n      ...styles,\n    };\n  }\n\n  private renderItems() {\n    if (this.items === undefined || this.items === null) {\n      return;\n    }\n\n    if (!this.virtualScroll) {\n      return this.items.map(mapToMenuItem);\n    }\n\n    return this.items\n      .slice(this.scrollingIndex, Math.min(this.items.length, this.itemSize + this.scrollingIndex))\n      .map(({ value, label }: SixMenuItemData) => (\n        <six-menu-item checkType=\"check\" key={value} value={value}>\n          {label}\n        </six-menu-item>\n      ));\n  }\n\n  render() {\n    return (\n      <div\n        ref={(el) => (this.menuWrapper = el)}\n        style={this.getMenuWrapperStyle()}\n        part=\"wrapper\"\n        class={{\n          menu: true,\n          '.no-shadow': this.removeBoxShadow,\n        }}\n      >\n        <div\n          ref={(el) => (this.menu = el)}\n          part=\"base\"\n          role=\"menu\"\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          tabIndex={0}\n          style={this.getMenuContainerStyle()}\n        >\n          <slot />\n          {this.renderItems()}\n        </div>\n        {this.virtualScroll && <div style={this.getScrollbarGhostStyle()} />}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-menu.js","sourceRoot":"","sources":["../../../src/components/six-menu/six-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { getTextContent } from '../../utils/slot';\nimport { StyleDeclaration } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { debounce } from '../../utils/execution-control';\n\nexport interface SixMenuItemData {\n  label: string;\n  value: string;\n}\n\nexport interface SixMenuItemSelectedPayload {\n  name: string;\n  item: HTMLSixMenuItemElement;\n}\n\nconst isFocusedMenuItem = (menuItem: HTMLSixMenuItemElement) =>\n  menuItem?.shadowRoot?.querySelector('.menu-item')?.classList?.contains('menu-item--focused');\n\nconst isSIXMenuItemElement = (el?: Element): el is HTMLSixMenuItemElement =>\n  el?.tagName.toLowerCase() === 'six-menu-item';\n\nconst mapToMenuItem = ({ value, label }: SixMenuItemData) => (\n  <six-menu-item key={value} value={value}>\n    {label}\n  </six-menu-item>\n);\n\nconst DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING = 5;\nconst DEFAULT_SIX_MENU_ITEM_HEIGHT_FOR_VIRTUAL_SCROLLING = 48;\nconst DEFAULT_SIX_MENU_ITEM_HEIGHT = 64;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The menu's content, including menu items, menu dividers, and menu labels.\n *\n * @part base - The component's base wrapper.\n */\n@Component({\n  tag: 'six-menu',\n  styleUrl: 'six-menu.scss',\n  shadow: true,\n})\nexport class SixMenu {\n  private readonly eventListeners = new EventListeners();\n\n  private menu?: HTMLElement;\n  private menuWrapper?: HTMLElement;\n  private typeToSelectString = '';\n  private typeToSelectTimeout?: number;\n\n  @Element() host!: HTMLSixMenuElement;\n\n  /** Emitted when a menu item is selected. */\n  @Event({ eventName: 'six-menu-item-selected' }) sixMenuItemSelected!: EventEmitter<SixMenuItemSelectedPayload>;\n\n  /** Set to true to remove the box-shadow */\n  @Prop() removeBoxShadow = false;\n\n  /** Set the options to be shown in the dropdown */\n  @Prop() items: SixMenuItemData[] | null = null;\n\n  /** Defines how many items should be shown. If the number of items is larger than this property a scrollbar will be shown */\n  @Prop() itemsShown?: number;\n\n  /** Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)\n   *  are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot. */\n  @Prop() virtualScroll = false;\n\n  /**\n   * Used for virtual scrolling\n   * Define how many items should be rendered in the DOM when using virtual scrolling\n   */\n  @Prop() itemSize = 10;\n\n  /**\n   * Used for virtual scrolling\n   * Define the debounce for listening on scrolling changes in milliseconds.\n   * The lower the number the more sensitive the component reacts to scrolling changes.\n   */\n  @Prop() scrollingDebounce = 15;\n\n  /**\n   * Internal: Disables handling of key presses.\n   */\n  @Prop() disableKeyboardHandling = false;\n\n  /**\n   * Used to calculate which items should be rendered in the DOM\n   */\n  @State()\n  private scrollingIndex = 0;\n\n  // set a default item height, this variable will be updated with the real value after the first render.\n  // However, it's necessary to have a default value because we can only fetch the proper height after the first render\n  @State()\n  private sixMenuItemHeight = this.virtualScroll\n    ? DEFAULT_SIX_MENU_ITEM_HEIGHT_FOR_VIRTUAL_SCROLLING\n    : DEFAULT_SIX_MENU_ITEM_HEIGHT;\n\n  connectedCallback() {\n    this.handleClick = this.handleClick.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n  }\n\n  componentWillLoad() {\n    if (this.items === null) {\n      return;\n    }\n  }\n\n  private handleScrolling = () => {\n    if (this.menuWrapper == null) return;\n    // for performance improvements we only update the DOM if the scrollRatio change \"enough\"\n    this.scrollingIndex = Math.floor(this.menuWrapper.scrollTop / this.sixMenuItemHeight);\n  };\n\n  componentDidLoad() {\n    this.setupForVirtualScrollingAfterRendering();\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  /**\n   * Initiates type-to-select logic, which automatically selects an option based on what the user is currently typing.\n   * The key passed will be appended to the internal query and the selection will be updated. After a brief period, the\n   * internal query is cleared automatically. This method is intended to be used with the keydown event. Useful for\n   * enabling type-to-select when the menu doesn't have focus.\n   */\n  @Method()\n  async typeToSelect(key: string) {\n    clearTimeout(this.typeToSelectTimeout);\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    this.typeToSelectTimeout = setTimeout(() => (this.typeToSelectString = ''), 750);\n    this.typeToSelectString += key.toLowerCase();\n    const items = this.getItems();\n    for (const item of items) {\n      const slot = item.shadowRoot?.querySelector('slot:not([name])') as HTMLSlotElement;\n      const label = getTextContent(slot).toLowerCase().trim();\n      if (label.substring(0, this.typeToSelectString.length) === this.typeToSelectString) {\n        item.setFocus();\n        break;\n      }\n    }\n  }\n\n  private getItemsShown(): number {\n    const defaultItemsShown = this.virtualScroll ? DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING : 0;\n    if (this.items && this.items.length === 1) {\n      return 0;\n    }\n    return this.itemsShown ?? defaultItemsShown;\n  }\n\n  private setupForVirtualScrollingAfterRendering() {\n    if (!this.virtualScroll || this.menuWrapper == null) return;\n\n    this.eventListeners.add(this.menuWrapper, 'scroll', debounce(this.handleScrolling, this.scrollingDebounce));\n\n    // set menu height to proper height once the item is rendered.\n    const menuItemHeight = this.menu?.querySelector('six-menu-item')?.clientHeight;\n    if (menuItemHeight != null && menuItemHeight > 0) {\n      this.sixMenuItemHeight = menuItemHeight;\n    }\n  }\n\n  private getItems(): HTMLSixMenuItemElement[] {\n    if (this.menu == null) return [];\n\n    if (this.items != null) {\n      return this.items.map(mapToMenuItem);\n    }\n\n    const slot = this.menu.querySelector('slot');\n    if (slot == null) return [];\n    return [...slot.assignedElements({ flatten: true })].filter(\n      (el): el is HTMLSixMenuItemElement => isSIXMenuItemElement(el) && !el.disabled\n    );\n  }\n\n  private getActiveItemIndex() {\n    const items = this.getItems();\n    const selectedItem = this.getActiveItem();\n    if (selectedItem != null) {\n      const itemIndex = items.indexOf(selectedItem);\n      if (itemIndex > -1) {\n        return itemIndex;\n      }\n    }\n    const sixMenuItems = this.extractItemsFromDOM();\n    return sixMenuItems.findIndex(isFocusedMenuItem);\n  }\n\n  private getActiveItem(): HTMLSixMenuItemElement | undefined {\n    const activeElement = this.getItems().find((i) => i === document.activeElement);\n    if (activeElement != null) {\n      return activeElement;\n    }\n    return this.extractItemsFromDOM()?.find(isFocusedMenuItem);\n  }\n\n  private extractItemsFromDOM() {\n    return Array.from(this.host.shadowRoot?.querySelectorAll('six-menu-item') ?? []);\n  }\n\n  private setActiveItem(item: HTMLSixMenuItemElement) {\n    item?.setFocus();\n  }\n\n  private handleClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n    const clickedItem = target.closest('six-menu-item');\n    if (clickedItem && !clickedItem.disabled) {\n      this.sixMenuItemSelected.emit({ name: clickedItem.value, item: clickedItem });\n    }\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (this.disableKeyboardHandling) {\n      return;\n    }\n\n    // Make a selection when pressing enter\n    if (event.key === 'Enter') {\n      const activeItem = this.getActiveItem();\n      event.preventDefault();\n\n      if (activeItem != null) {\n        this.sixMenuItemSelected.emit({ name: activeItem.value, item: activeItem });\n      }\n    }\n\n    // Prevent scrolling when space is pressed\n    if (event.key === ' ') {\n      event.preventDefault();\n    }\n\n    // Move the selection when pressing down or up\n    if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n      const items = this.items === null ? this.getItems() : this.extractItemsFromDOM();\n\n      let indexOfActiveItem = this.getActiveItemIndex();\n\n      if (items.length > 0) {\n        event.preventDefault();\n\n        if (event.key === 'ArrowDown') {\n          indexOfActiveItem++;\n        } else if (event.key === 'ArrowUp') {\n          indexOfActiveItem--;\n        } else if (event.key === 'Home') {\n          indexOfActiveItem = 0;\n        } else if (event.key === 'End') {\n          indexOfActiveItem = items.length - 1;\n        }\n\n        if (indexOfActiveItem < 0) indexOfActiveItem = 0;\n        if (indexOfActiveItem > items.length - 1) indexOfActiveItem = items.length - 1;\n\n        this.setActiveItem(items[indexOfActiveItem]);\n\n        return;\n      }\n    }\n\n    void this.typeToSelect(event.key);\n  }\n\n  private getMenuWrapperStyle() {\n    const styles: Partial<StyleDeclaration> = {};\n    if (this.getItemsShown() > 0) {\n      // calculate the proper height to show the correct number of items\n      styles.height = `${(this.getItemsShown() ?? 0) * this.sixMenuItemHeight}px`;\n    } else if (this.items && this.items.length === 1) {\n      styles.height = 'auto';\n    }\n    return {\n      ...styles,\n    };\n  }\n\n  private getMenuContainerStyle() {\n    const styles: Partial<StyleDeclaration> = {};\n\n    if (this.virtualScroll) {\n      // calculate height of content are if all items would be rendered so the scrollbar has the proper size\n      styles.transform = `translateY(${this.sixMenuItemHeight * this.scrollingIndex}px)`;\n    }\n\n    return {\n      ...styles,\n    };\n  }\n\n  private getScrollbarGhostStyle() {\n    const styles: Partial<StyleDeclaration> = {};\n    if (this.virtualScroll && this.items !== null && this.items.length > 1) {\n      styles.height = `${this.items.length * this.sixMenuItemHeight - this.itemSize * this.sixMenuItemHeight}px`;\n    }\n    return {\n      ...styles,\n    };\n  }\n\n  private renderItems() {\n    if (this.items === undefined || this.items === null) {\n      return;\n    }\n\n    if (!this.virtualScroll) {\n      return this.items.map(mapToMenuItem);\n    }\n\n    return this.items\n      .slice(this.scrollingIndex, Math.min(this.items.length, this.itemSize + this.scrollingIndex))\n      .map(({ value, label }: SixMenuItemData) => (\n        <six-menu-item checkType=\"check\" key={value} value={value}>\n          {label}\n        </six-menu-item>\n      ));\n  }\n\n  render() {\n    return (\n      <div\n        ref={(el) => (this.menuWrapper = el)}\n        style={this.getMenuWrapperStyle()}\n        part=\"wrapper\"\n        class={{\n          menu: true,\n          'no-shadow': this.removeBoxShadow,\n        }}\n      >\n        <div\n          ref={(el) => (this.menu = el)}\n          part=\"base\"\n          role=\"menu\"\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          tabIndex={0}\n          style={this.getMenuContainerStyle()}\n        >\n          <slot />\n          {this.renderItems()}\n        </div>\n        {this.virtualScroll && <div style={this.getScrollbarGhostStyle()} />}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-menu-divider/six-menu-divider.js

@@ -9,7 +9,7 @@ import { h } from "@stencil/core";
  */
 export class SixMenuDivider {
     render() {
-        return h("div", { key: '186bd0295f652e28206b3e01a092c0cc67128874', part: "base", class: "menu-divider", role: "separator", "aria-hidden": "true" });
+        return h("div", { key: 'e5cfe610c3578305a43cac1d94aabd9d4f3483f8', part: "base", class: "menu-divider", role: "separator", "aria-hidden": "true" });
     }
     static get is() { return "six-menu-divider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -68,13 +68,13 @@ export class SixMenuItem {
         this.hasFocus = false;
     }
     render() {
-        return (h("div", { key: '1272ddcb536f11b8362d2d6050e7e022f2c57601', ref: (el) => (this.menuItem = el), part: "base", class: {
+        return (h("div", { key: '068b0e516f28354bf1e0e6171fd5a57c42e6805d', ref: (el) => (this.menuItem = el), part: "base", class: {
                 'menu-item': true,
                 'menu-item--checked': this.checked,
                 'menu-item--disabled': this.disabled,
                 'menu-item--focused': this.hasFocus,
                 'menu-item--active': this.active,
-            }, role: "menuitem", "aria-disabled": this.disabled ? 'true' : 'false', "aria-checked": this.checked ? 'true' : 'false', tabIndex: !this.disabled ? 0 : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, this.checkType === 'checkbox' && (h("span", { key: '433f8c7ea79197d6881f02d5daad580cdc45ad75', class: "menu-item__checkbox" }, h("six-checkbox", { key: 'a2bb3ef76de46374e058f814723ae2e601d9d12e', "onSix-checkbox-change": this.handleCheckboxChange, disabled: this.disabled, checked: this.checked }))), h("span", { key: '7e068c6cca0e53ecac63a461945d13b3a157e9e6', part: "prefix", class: "menu-item__prefix" }, h("slot", { key: '4a8b59e044ec0d20fa96a4f2c8dabcc697e24641', name: "prefix" })), h("span", { key: '9d33d8597e12e94d6b4da75480bf034053124e34', part: "label", class: "menu-item__label" }, h("slot", { key: 'eb1f6a5ac3dd253c3844b7b2f1abd8eab5d8e2f7', ref: (el) => (this.defaultSlot = el) })), h("span", { key: 'dafb3d36a73291eb05e3bb53744204400f0cde66', part: "suffix", class: "menu-item__suffix" }, h("slot", { key: 'b544b01d90f3a5ab49a99ca39b4abc622fed87c1', name: "suffix" })), this.checkType === 'check' && (h("span", { key: 'f7dc2836cbd13a851db43967f9e1f4334937f19e', part: "checked-icon", class: "menu-item__check" }, h("six-icon", { key: 'db186867ab833a1064f091d592f4c39675a9aeeb', size: "small", "aria-hidden": "true" }, "check")))));
+            }, role: "menuitem", "aria-disabled": this.disabled ? 'true' : 'false', "aria-checked": this.checked ? 'true' : 'false', tabIndex: !this.disabled ? 0 : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, this.checkType === 'checkbox' && (h("span", { key: '2a4a44cc50eab0f85553779829f194ce2940a8b4', class: "menu-item__checkbox" }, h("six-checkbox", { key: '60db41a831898917a66c5b36a66569ca511d4087', "onSix-checkbox-change": this.handleCheckboxChange, disabled: this.disabled, checked: this.checked }))), h("span", { key: '11ef1aedb06a67538e1a8ffa7ced64f27f554725', part: "prefix", class: "menu-item__prefix" }, h("slot", { key: '698842d190731f589a9d031893c13bb8ee2dc8f4', name: "prefix" })), h("span", { key: '20fda9cdc6b3aef51b7231edda1d6fb48f03dbeb', part: "label", class: "menu-item__label" }, h("slot", { key: 'b564482ff277a47e5f50554755649a7d8e7ebe47', ref: (el) => (this.defaultSlot = el) })), h("span", { key: '437c77e718827d816786159675dec3439ac1c1e4', part: "suffix", class: "menu-item__suffix" }, h("slot", { key: '533be0933a9d597641bc1496c7375b9b36db98bb', name: "suffix" })), this.checkType === 'check' && (h("span", { key: '43b77ffd3510aa1603bc9278c31684c1ecfc711f', part: "checked-icon", class: "menu-item__check" }, h("six-icon", { key: 'a7569cb3d856bac8767c634cb5862c900ce69e45', size: "small", "aria-hidden": "true" }, "check")))));
     }
     static get is() { return "six-menu-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,7 +11,7 @@ import { h } from "@stencil/core";
  */
 export class SixMenuLabel {
     render() {
-        return (h("div", { key: 'ac09a02af0b1d088f83877d5065b9b747032be77', part: "base", class: "menu-label" }, h("slot", { key: 'a4f45f90b223d3951bdb5a36b8667d67bcbf1fc7' })));
+        return (h("div", { key: '8d796cb82a38cccc46f32ff8ce33d453e7bb7166', part: "base", class: "menu-label" }, h("slot", { key: '551f3905fa1d78d307912f1ba366b3718ae8facf' })));
     }
     static get is() { return "six-menu-label"; }
     static get encapsulation() { return "shadow"; }

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

@@ -15,7 +15,7 @@ export class SixPicto {
     render() {
         var _a;
         const iconName = (_a = this.host.innerHTML) === null || _a === void 0 ? void 0 : _a.trim();
-        return (h(Host, { key: 'ed06500ac52374ead53dbb7012ee1b4b07d21b25' }, h("div", { key: '1f134c2254d4c3659e66b1a0c79556fb8131220d', part: "icon", class: {
+        return (h(Host, { key: 'bc4d73489e8e09be226f51682e282b1c4c5a2175' }, h("div", { key: 'ee1ff26b654c5ffd678f6928edd3bd44ab4acd15', part: "icon", class: {
                 [`is-size-${this.size}`]: typeof this.size != null || this.size.trim() !== '',
                 [`${iconName}`]: true,
             } })));

package/dist/collection/components/six-progress-bar/six-progress-bar.js

@@ -19,12 +19,12 @@ export class SixProgressBar {
         this.indeterminate = false;
     }
     render() {
-        return (h("div", { key: 'e11c3e9f83321a55170e04e84ab63c2e8b9f12a7', part: "base", class: {
+        return (h("div", { key: 'd89c7c456819839b638cadc372bf2ab071e73918', part: "base", class: {
                 'progress-bar': true,
                 'progress-bar--indeterminate': this.indeterminate,
-            }, role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.indeterminate ? null : this.percentage }, h("div", { key: '9c8b4a3f5ada54163272cbd7e8cf9e7cb90dc39b', part: "indicator", class: "progress-bar__indicator", style: {
+            }, role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.indeterminate ? null : this.percentage }, h("div", { key: 'ce4d45162f0aeb2c5affd3a6aef552c2f4078a1b', part: "indicator", class: "progress-bar__indicator", style: {
                 width: `${this.percentage}%`,
-            } }, !this.indeterminate && (h("span", { key: '16be9dda6192ecf33efb192b23694cc006ceb4fd', part: "label", class: "progress-bar__label" }, h("slot", { key: '1e102597d1ec71a54fecb87f336aa711fddd8558' }))))));
+            } }, !this.indeterminate && (h("span", { key: '911269a53f42a7e94fc1be782f9e903e32650c75', part: "label", class: "progress-bar__label" }, h("slot", { key: '59daab81dd0812c99c32b304479b794d94c6e82e' }))))));
     }
     static get is() { return "six-progress-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-progress-ring/six-progress-ring.js

@@ -36,7 +36,7 @@ export class SixProgressRing {
         this.indicator.style.strokeDashoffset = `${offset}`;
     }
     render() {
-        return (h("div", { key: '6f48ef171c32eef14162bb15d53befc7bf30f923', part: "base", class: "progress-ring" }, h("svg", { key: 'b1479eec3a5dbabdb39716484c58396a09db1272', class: "progress-ring__image", width: this.size, height: this.size }, h("circle", { key: 'abb6fd5f35d514fe1580e02fd251774e107da5ce', class: "progress-ring__track", "stroke-width": this.strokeWidth, "stroke-linecap": "round", fill: "transparent", r: this.size / 2 - this.strokeWidth * 2, cx: this.size / 2, cy: this.size / 2 }), h("circle", { key: 'ca3fb1650516df81c8757594a0ce0d62d82febd3', ref: (el) => (this.indicator = el), class: "progress-ring__indicator", "stroke-width": this.strokeWidth, "stroke-linecap": "round", fill: "transparent", r: this.size / 2 - this.strokeWidth * 2, cx: this.size / 2, cy: this.size / 2 })), h("span", { key: 'c9b746f63f7c8bb0b325397d0344f6d82b8e3c0d', part: "label", class: "progress-ring__label" }, h("slot", { key: '905b3a001f4d95c31e80e5d74ecd29d0ec59992a' }))));
+        return (h("div", { key: '4b619cac39642c43455886ab94067bfd1a96183c', part: "base", class: "progress-ring" }, h("svg", { key: 'eb438641c5bcc7de1ab356881b8480bc65115f62', class: "progress-ring__image", width: this.size, height: this.size }, h("circle", { key: '63a5359a0f22e0c657a629f50ec9addefd409113', class: "progress-ring__track", "stroke-width": this.strokeWidth, "stroke-linecap": "round", fill: "transparent", r: this.size / 2 - this.strokeWidth * 2, cx: this.size / 2, cy: this.size / 2 }), h("circle", { key: 'ccf1f8120f745cbc060f0a5fb9fed00ef52fa4db', ref: (el) => (this.indicator = el), class: "progress-ring__indicator", "stroke-width": this.strokeWidth, "stroke-linecap": "round", fill: "transparent", r: this.size / 2 - this.strokeWidth * 2, cx: this.size / 2, cy: this.size / 2 })), h("span", { key: '775c0d0707e480496807e2cadb47be1a551cc128', part: "label", class: "progress-ring__label" }, h("slot", { key: '6849d9832eb3845066bb7008a19604668d548ce8' }))));
     }
     static get is() { return "six-progress-ring"; }
     static get encapsulation() { return "shadow"; }

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

@@ -108,12 +108,12 @@ export class SixRadio {
         return this.getAllRadios().filter((radio) => radio !== this.host);
     }
     render() {
-        return (h("label", { key: 'cdb722e8b78cf02f527d97b3dab6f0679b333c21', part: "base", class: {
+        return (h("label", { key: '879cb08317d04deeca8282c8b69e6eb20a9adf07', part: "base", class: {
                 radio: true,
                 'radio--checked': this.checked,
                 'radio--disabled': this.disabled,
                 'radio--focused': this.hasFocus,
-            }, htmlFor: this.inputId, onKeyDown: this.handleKeyDown, onMouseDown: this.handleMouseDown }, h("span", { key: '9c627a113fe27c340b7f6162d9bde328220c8960', part: "control", class: "radio__control" }, h("span", { key: '2ce65408f6c88cb7396c480eba0cc2dd663a3c85', part: "checked-icon", class: "radio__icon" }, h("svg", { key: 'f4aac67ee8b4a5fb2af26305799b6648e496941e', viewBox: "0 0 16 16" }, h("g", { key: 'f1bc8651eae70a2ede2dcbf5f48f8237d9f883e6', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("g", { key: '7ffa14023971330ae34e041871c0db912789999a', fill: "currentColor" }, h("circle", { key: '10d6f37d1227677ba8044a8bffd89f8828e54e0d', cx: "8", cy: "8", r: "5" }))))), h("input", { key: '55ae32be4a36646c17d1238e486df0a483db2650', ref: (el) => (this.nativeInput = el), id: this.inputId, type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, role: "radio", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onClick: this.handleClick, onBlur: this.handleBlur, onFocus: this.handleFocus })), h("span", { key: '08128b78c44c561e9dc97f840bacf46059c2483b', part: "label", id: this.labelId, class: "radio__label" }, h("slot", { key: '9dd8bcf11566bd74d7b8e91a71cd276947562426' }))));
+            }, htmlFor: this.inputId, onKeyDown: this.handleKeyDown, onMouseDown: this.handleMouseDown }, h("span", { key: '6c2acde83c5a7d3ec9de36b6e73776f7c614b8f4', part: "control", class: "radio__control" }, h("span", { key: 'f741f110abf476e80c54d5ba7e55f9ce7babb68b', part: "checked-icon", class: "radio__icon" }, h("svg", { key: '9635c588916db7dc635a4581e50416d16114ee58', viewBox: "0 0 16 16" }, h("g", { key: '5d33f15ab6063156808d054bd6f736303e8afecc', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("g", { key: '25aead7a47efab4b1b86aa50070ba656855bfdf0', fill: "currentColor" }, h("circle", { key: '33364d9740a62291991de71288535fe685593fa1', cx: "8", cy: "8", r: "5" }))))), h("input", { key: '2ba91f62d15618ea3292902137649fdc579e05fa', ref: (el) => (this.nativeInput = el), id: this.inputId, type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, role: "radio", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onClick: this.handleClick, onBlur: this.handleBlur, onFocus: this.handleFocus })), h("span", { key: 'e8d5db9e8b63c6f5c25ef1239291c175257edf90', part: "label", id: this.labelId, class: "radio__label" }, h("slot", { key: '1aed8a157b967b10acbfb960cd725b88fdf83cf3' }))));
     }
     static get is() { return "six-radio"; }
     static get encapsulation() { return "shadow"; }

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

@@ -200,7 +200,7 @@ export class SixRange {
         }
     }
     render() {
-        return (h(FormControl, { key: '0f53d7ccd1af680cc40ec8de87960b243c33a3be', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, size: "medium", errorTextId: this.errorTextId, errorText: this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, errorTextCount: this.errorTextCount, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { key: 'd51cc4d2afde55aed2941878912eb3f741c89cf1', part: "base", class: {
+        return (h(FormControl, { key: '9b01de18ce3b59ec8fe5c60edbf94ca2d7911d9d', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, size: "medium", errorTextId: this.errorTextId, errorText: this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, errorTextCount: this.errorTextCount, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { key: '66581ce24488802b0b81030aa916dfc6880e4498', part: "base", class: {
                 range: true,
                 // States
                 'range--disabled': this.disabled,
@@ -208,7 +208,7 @@ export class SixRange {
                 'range--tooltip-visible': this.hasTooltip,
                 'range--tooltip-top': this.tooltip === 'top',
                 'range--tooltip-bottom': this.tooltip === 'bottom',
-            }, onTouchStart: this.handleTouchStart }, h("input", { key: 'bfa94717d2ad6e8b5e7b513aa49697b1232e0502', part: "input", ref: (el) => (this.nativeInput = el), type: "range", class: "range__control", name: this.name, disabled: this.disabled, min: this.min, max: this.max, step: this.step, value: this.value, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.tooltip !== 'none' && (h("output", { key: '4db780c67679a9e6d36ead8ae23e5ba6ead2a5ec', part: "tooltip", ref: (el) => (this.output = el), class: "range__tooltip" }, this.tooltipFormatter(this.value))))));
+            }, onTouchStart: this.handleTouchStart }, h("input", { key: '9e6a87ae4004e65bc9861064654bcc1a5babcd07', part: "input", ref: (el) => (this.nativeInput = el), type: "range", class: "range__control", name: this.name, disabled: this.disabled, min: this.min, max: this.max, step: this.step, value: this.value, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.tooltip !== 'none' && (h("output", { key: '701b765cf0c2e3e3ed3a8ebcb3853a53f389ff3b', part: "tooltip", ref: (el) => (this.output = el), class: "range__tooltip" }, this.tooltipFormatter(this.value))))));
     }
     static get is() { return "six-range"; }
     static get encapsulation() { return "shadow"; }