@six-group/ui-library 0.0.0-insider.a9979af → 0.0.0-insider.ab5d77b

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

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: '64f48c7033d88a86327d7c1134c0b07d7d86a7c9', 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: '8cfbdca4fce2dd79c5c44485c441415984c889f3', ref: (el) => (this.menu = el), part: "base", role: "menu", onClick: this.handleClick, onKeyDown: this.handleKeyDown, tabIndex: 0, style: this.getMenuContainerStyle() }, h("slot", { key: '02465176c43a16b3b4801cca8d0e2b1f928eda22' }), this.renderItems()), this.virtualScroll && h("div", { key: 'fdfb7c58a92cc3d922aba5e7f47a94a861e47c7b', 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"; }

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

@@ -97,11 +97,11 @@ export class SixRating {
         });
     }
     render() {
-        return (h(FormControl, { key: 'ca3de959a1ffb915f0102ca6baa4a43c799d67ec', inputId: this.ratingId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, helpText: this.helpText, hasErrorTextSlot: this.hasErrorSlot, size: "medium", disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { key: 'ef452485f9c3615f4caeaefce7f7034d7f64119f', part: "base", class: {
+        return (h(FormControl, { key: '9ba64e8020d50b0685551b163bbdc9fe5ffcc473', inputId: this.ratingId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, helpText: this.helpText, hasErrorTextSlot: this.hasErrorSlot, size: "medium", disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { key: 'c7e8bd81467b9dc1eef04266502e43ca91192732', part: "base", class: {
                 'six-rating': true,
                 'six-rating--readonly': this.readonly,
                 'six-rating--disabled': this.disabled,
-            }, role: "slider", "aria-label": this.label, "aria-disabled": this.disabled ? 'true' : 'false', "aria-readonly": this.readonly ? 'true' : 'false', "aria-valuenow": this.value, "aria-valuemin": 0, "aria-valuemax": this.max, tabindex: this.disabled ? '-1' : '0', onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown }, this.renderStars(), h("input", { key: '187ec03d83c3b29fc5917a9abab324d40930b8f4', part: "input", id: this.ratingId, type: "hidden", max: this.max, min: 0, name: this.name, value: this.value, disabled: this.disabled, required: this.required, role: "slider", "aria-labelledby": this.labelId }))));
+            }, role: "slider", "aria-label": this.label, "aria-disabled": this.disabled ? 'true' : 'false', "aria-readonly": this.readonly ? 'true' : 'false', "aria-valuenow": this.value, "aria-valuemin": 0, "aria-valuemax": this.max, tabindex: this.disabled ? '-1' : '0', onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown }, this.renderStars(), h("input", { key: 'c7f6e028073845efed162b0c13942375941f5549', part: "input", id: this.ratingId, type: "hidden", max: this.max, min: 0, name: this.name, value: this.value, disabled: this.disabled, required: this.required, role: "slider", "aria-labelledby": this.labelId }))));
     }
     static get is() { return "six-rating"; }
     static get encapsulation() { return "shadow"; }

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

@@ -20,7 +20,7 @@ export class SixRoot {
         this.version = '';
     }
     render() {
-        return (h("host", { key: '574331a30ddbdff3fb37129ec8e46c873bc1832e', class: "six-root" }, h("header", { key: 'f70f24b925ba9a88156d46a6481f6ab3f415bdad', part: "header" }, this.stage && h("six-stage-indicator", { key: '4fe5f33c59e77fcd1cae71afa5ccdd227fbd3d74', stage: this.stage }, this.version), h("slot", { key: '92fcdbb991e5593d0f5e602a3dc72b3bc95ce415', name: "header" })), h("nav", { key: 'd26e8e840ae344dcda1e81879e50f45981ad0035', class: "six-root__left-sidebar", part: "left-sidebar" }, h("slot", { key: 'da2e4b7ea1338e68970364d279753b7dd9ce4716', name: "left-sidebar" })), h("main", { key: '13c283e1e1150c3a6f0cc76feed50889023c8bfc', part: "main" }, h("div", { key: '0fd0a46e4d68dc7af4f4444de6cbd0cb68e3098a', class: { 'six-root__container': true, 'six-root__container--padded': this.padded }, part: "container" }, h("slot", { key: '5591878851514068d3ce5751af12fa86aa6449ca', name: "main" })), h("div", { key: 'fe14e87f84217215d03545b5094f462981124093', class: "six-root__footer" }, h("slot", { key: '44cd8020e7ba2ee5a4bfb50a8e9f46cac4c6010f', name: "footer" }))), h("nav", { key: 'a26ca2c92e7e0ef955bea7796270a5d64e9c1aec', class: "six-root__right-sidebar", part: "right-sidebar" }, h("slot", { key: '8d72471d1f4e06722eed5042dd8e4a5f9141b403', name: "right-sidebar" }))));
+        return (h("host", { key: '045dca1aa5b75c3b3c600bd569d73747ebd21c38', class: "six-root" }, h("header", { key: '19430d1e5f9060152c795ed4548b4774a43f34e8', part: "header" }, this.stage && h("six-stage-indicator", { key: '7d79552068cca2510da31c67134160da554d94c4', stage: this.stage }, this.version), h("slot", { key: '661db283a073f9772eb4bb6a9ea0fb9c3492193c', name: "header" })), h("nav", { key: 'ac94418c7b7fca25aa4b99725bab442dbd3b1536', class: "six-root__left-sidebar", part: "left-sidebar" }, h("slot", { key: '98995975b462b8954fb40da95602cd6198c7ca18', name: "left-sidebar" })), h("main", { key: 'bf5be0209eea18096e1e6f18dcb0e5ad9fef73c0', part: "main" }, h("div", { key: '25b4d0cbc135d54ff2576f853f3ff3dd8fec0d3b', class: { 'six-root__container': true, 'six-root__container--padded': this.padded }, part: "container" }, h("slot", { key: '497b196c44123903a2024931f6ac860d728e4880', name: "main" })), h("div", { key: '6807b1db1e0da24e73a239ee9ef51ad3115eee52', class: "six-root__footer" }, h("slot", { key: 'af2cef1fbbcdfa6fbf267a2bc88b25e3fe7ddb42', name: "footer" }))), h("nav", { key: 'ab71c8248a17f4fe4db6667ea1fb401528372ac1', class: "six-root__right-sidebar", part: "right-sidebar" }, h("slot", { key: 'ed718d2e22f2607f6c6b7a1b689b5b3a55fa2e79', name: "right-sidebar" }))));
     }
     static get is() { return "six-root"; }
     static get encapsulation() { return "shadow"; }

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

@@ -176,7 +176,7 @@ export class SixSidebar {
         this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
     }
     render() {
-        return (h("host", { key: '11810533a79d5685e6ab768f0fbc8d9594d44de4', class: "six-sidebar" }, h("div", { key: '6908b34bd6df174046145e9c4813278703e0d7cf', class: {
+        return (h("host", { key: '1aae217047bea8e29e86256812a8a67a6eff4ce9', class: "six-sidebar" }, h("div", { key: 'd9d70f022ffaeae09003dfc130b40707ad9e3512', class: {
                 sidebar__container: true,
                 'sidebar--visible': this.isVisible,
                 'sidebar--open': this.open,
@@ -185,7 +185,7 @@ export class SixSidebar {
             }, style: {
                 width: this.width,
                 [`margin-${this.position}`]: this.open ? '0' : `calc(1rem - ${this.width})`,
-            }, ref: (el) => (this.sidebar = el), "aria-hidden": this.open ? 'false' : 'true', onTransitionEnd: this.handleTransitionEnd }, h("slot", { key: '31557fda47113669da4d999a54f0074b37daffc8' }))));
+            }, ref: (el) => (this.sidebar = el), "aria-hidden": this.open ? 'false' : 'true', onTransitionEnd: this.handleTransitionEnd }, h("slot", { key: 'd88754017cf07b12181cce2e10788291ad487257' }))));
     }
     static get is() { return "six-sidebar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -18,11 +18,11 @@ export class SixSidebarItem {
     }
     render() {
         const Tag = this.href != null ? 'a' : 'div';
-        return (h(Tag, { key: '968d681e125a0c399973cfa9d37ac5f9c269042f', class: {
+        return (h(Tag, { key: '09bcf26c2b9c30bb05820fdba6300ac0d3863df7', class: {
                 'sidebar-item': true,
                 'sidebar-item--selected': this.selected,
                 'sidebar-item--disabled': this.disabled,
-            }, role: "menuitem", href: this.href, "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, this.icon && h("six-icon", { key: 'cd6ecec3465b0aeb625d3f0d0e7f8f6a8e76a25f', class: "six-sidebar-item__icon" }, this.icon), h("slot", { key: 'a54998cb6bc27463ab2f9402736008a8767b8358' })));
+            }, role: "menuitem", href: this.href, "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, this.icon && h("six-icon", { key: '6aa594d78879a9ed4ba9a885b2ed66ec43009831', class: "six-sidebar-item__icon" }, this.icon), h("slot", { key: 'df8b8f32bbb75ba84d7b3c8b476ad62b32f749c5' })));
     }
     static get is() { return "six-sidebar-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -112,12 +112,12 @@ export class SixSwitch {
         (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.blur();
     }
     render() {
-        return (h(FormControl, { key: 'fd6c9c888316e46623e92b779c2215888783413b', inputId: this.switchId, label: this.label, labelId: this.labelId, hasLabelSlot: false, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, hasErrorTextSlot: this.hasErrorTextSlot, size: "medium", disabled: this.disabled, required: this.required, displayError: this.invalid }, h("label", { key: 'd7d5f569d8aea4f7203f7c0973cf212bd6bcfc60', part: "base", htmlFor: this.switchId, class: {
+        return (h(FormControl, { key: '71e5bbeaf0a8aaa048395e5141d5a5e0f280fd05', inputId: this.switchId, label: this.label, labelId: this.labelId, hasLabelSlot: false, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, hasErrorTextSlot: this.hasErrorTextSlot, size: "medium", disabled: this.disabled, required: this.required, displayError: this.invalid }, h("label", { key: '0cbcf106597f7be0403b34f0e3d471f1f41796a7', part: "base", htmlFor: this.switchId, class: {
                 switch: true,
                 'switch--checked': this.checked,
                 'switch--disabled': this.disabled,
                 'switch--focused': this.hasFocus,
-            }, onMouseDown: this.handleMouseDown }, h("span", { key: '4043bb4abed6a44a360b5409b0e4ebd5929a719f', part: "control", class: "switch__control" }, h("span", { key: 'd93e868866ea81ae2c2832ddc6fdcb11c0b23679', part: "thumb", class: "switch__thumb" }), h("input", { key: '7e5cff86449295f36e85b221f8795f3df18808ae', ref: (el) => (this.inputElement = el), id: this.switchId, type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onClick: this.handleClick, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown })), h("span", { key: 'c0823f84eb3a30c2e0fdfe5acb6f1390e2b389aa', part: "label", id: this.labelId, class: "switch__label" }, h("slot", { key: 'aeb69e52fd37efab7ee8061d3c69bfab1c174933' })))));
+            }, onMouseDown: this.handleMouseDown }, h("span", { key: 'b4540e2a6458235cf02412951aa1810bc53300e6', part: "control", class: "switch__control" }, h("span", { key: 'b2e8dc036a5b16fd58120f3afe48e58249cd4469', part: "thumb", class: "switch__thumb" }), h("input", { key: 'b0a4aba9eff684d6f2f4f523a4ca17c2d03e50bc', ref: (el) => (this.inputElement = el), id: this.switchId, type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onClick: this.handleClick, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown })), h("span", { key: 'bd308defa59c8c4a144a67bb461309af8627a4bf', part: "label", id: this.labelId, class: "switch__label" }, h("slot", { key: 'a63507b9c7b7faeceb2babb993966840747d62ae' })))));
     }
     static get is() { return "six-switch"; }
     static get encapsulation() { return "shadow"; }