@six-group/ui-library 0.0.0-insider.d16ec8e → 0.0.0-insider.d7f75e8

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

@@ -1 +1 @@
-{"version":3,"file":"six-header.js","sourceRoot":"","sources":["../../../src/components/six-header/six-header.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { getSlot, hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\n\nexport interface SixHeaderAppSwitcherSelectPayload {\n  selectedLabel: string;\n  name: string;\n  item: HTMLSixMenuItemElement;\n}\n\nexport interface SixHeaderProfileSelectPayload {\n  selectedLabel: string;\n  name: string;\n  item: HTMLSixMenuItemElement;\n}\n\nexport interface SixHeaderSearchFieldToggle {\n  visible: boolean;\n}\n\nenum Section {\n  None,\n  Search,\n  AppSwitcher,\n  Profile,\n}\n\nenum Slot {\n  Search = 'search-field',\n  Notifications = 'notifications',\n  AppSwitcher = 'app-switcher-menu',\n  Profile = 'profile-menu',\n  Logo = 'logo',\n}\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define a custom component that is included in the header.\n * @slot search-field - Used to define the search field component in the header.\n * @slot notifications - Used to define the notification component in the header.\n * @slot app-switcher-menu - Used to define the application switcher menu in the header.\n * @slot profile-menu - Used to define the profile menu in the header.\n * @slot profile-avatar - Used to define the avator in the header.\n */\n\n@Component({\n  tag: 'six-header',\n  styleUrl: 'six-header.scss',\n  shadow: true,\n  assetsDirs: ['assets'],\n})\nexport class SixHeader {\n  /** Indicates if content should be shifted down when search field is visible. */\n  @Prop() shiftContent = false;\n\n  /** Set the hamburger menu icon to open or closed state */\n  @Prop() openHamburgerMenu = false;\n\n  /** Set the header search to be in an open or closed state */\n  @Prop() openSearch = false;\n\n  /** Set whether the logo should be clickable */\n  @Prop() clickableLogo = false;\n\n  @Watch('openSearch')\n  handleOpenSearchChange() {\n    this.computeSearchOpenState();\n  }\n\n  /** Sets open state for search */\n  @Method()\n  async setSearchOpenState(openState: boolean) {\n    if (this.selectedSection === Section.Search && !openState) {\n      this.selectedSection = Section.None;\n    } else if (openState && this.selectedSection !== Section.Search) {\n      this.selectedSection = Section.Search;\n    }\n  }\n\n  /** Get open state for search */\n  @Method()\n  async getIsSearchOpen() {\n    return this.selectedSection === Section.Search;\n  }\n\n  /** Emitted when the name of the selected app is clicked. */\n  @Event({ eventName: 'six-header-app-name-clicked' }) sixAppNameClicked!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when a menu item is in the app switcher menu is selected. */\n  @Event({ eventName: 'six-header-app-switcher-select' })\n  sixAppSwitcherSelect!: EventEmitter<SixHeaderAppSwitcherSelectPayload>;\n\n  /** Emitted when a menu item is in the profile menu is selected. */\n  @Event({ eventName: 'six-header-profile-select' }) sixProfileSelect!: EventEmitter<SixHeaderProfileSelectPayload>;\n\n  /** Emitted when the hamburger menu is clicked. */\n  @Event({ eventName: 'six-header-hamburger-menu-clicked' }) sixHamburgerClick!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the header logo is clicked. */\n  @Event({ eventName: 'six-header-logo-clicked' }) sixLogoClick!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when search field is toggled. */\n  @Event({ eventName: 'six-header-search-field-toggle' })\n  sixSearchFieldToggle!: EventEmitter<SixHeaderSearchFieldToggle>;\n\n  @Element() host!: HTMLSixHeaderElement;\n\n  private eventListeners = new EventListeners();\n\n  private slots?: Record<Slot, boolean>;\n\n  @State() selectedApp?: string;\n  @State() selectedSection?: Section;\n\n  private hasSlot(slot: Slot): boolean {\n    if (this.slots == null) {\n      return false;\n    }\n    return this.slots[slot];\n  }\n\n  private isSectionSelected(value: Section) {\n    return value === this.selectedSection;\n  }\n\n  private selectSection(section: Section) {\n    return () => (this.selectedSection = section);\n  }\n\n  private toggleSearch() {\n    const visible = this.selectedSection !== Section.Search;\n    this.selectedSection = this.selectedSection === Section.Search ? Section.None : Section.Search;\n    this.sixSearchFieldToggle.emit({ visible });\n    if (this.selectedSection === Section.Search) {\n      // setFocus deferred due to https://github.com/ionic-team/stencil/issues/3772\n      setTimeout(async () => {\n        const slot = getSlot(this.host, Slot.Search);\n        slot?.shadowRoot?.querySelector('six-input')?.setFocus();\n      }, 50);\n    }\n  }\n\n  private setupMenu = (el?: HTMLSixIconButtonElement) => {\n    if (el == null) return;\n\n    this.eventListeners.add(el, 'click', () => this.sixHamburgerClick.emit());\n  };\n\n  private setupLogo = (el?: HTMLElement) => {\n    if (!this.clickableLogo || el == null) return;\n\n    this.eventListeners.add(el, 'click', () => this.sixLogoClick.emit());\n  };\n\n  private setupProfile = (el?: HTMLSixDropdownElement) => {\n    if (el == null) return;\n\n    this.eventListeners.add(el, 'six-dropdown-show', this.selectSection(Section.Profile));\n    this.eventListeners.add(el, 'six-dropdown-hide', this.selectSection(Section.None));\n    this.eventListeners.add(el, 'six-menu-item-selected', (event: Event) => {\n      const { name, item } = (event as CustomEvent).detail;\n      this.sixProfileSelect.emit({ selectedLabel: item.innerText, name, item });\n    });\n  };\n\n  private setupAppSwitcher = (el?: HTMLSixDropdownElement) => {\n    if (el == null) return;\n\n    this.eventListeners.add(el, 'six-dropdown-show', this.selectSection(Section.AppSwitcher));\n    this.eventListeners.add(el, 'six-dropdown-hide', this.selectSection(Section.None));\n    this.eventListeners.add(el, 'six-menu-item-selected', (event: Event) => {\n      const { name, item } = (event as CustomEvent).detail;\n      this.selectedApp = item.innerText;\n      this.sixAppSwitcherSelect.emit({ selectedLabel: item.innerText, name, item });\n    });\n  };\n\n  private appNameClicked = () => this.sixAppNameClicked.emit();\n\n  private computeSearchOpenState = () => {\n    this.selectedSection = this.openSearch ? Section.Search : Section.None;\n  };\n\n  componentWillLoad() {\n    this.slots = {\n      [Slot.Search]: hasSlot(this.host, Slot.Search),\n      [Slot.Notifications]: hasSlot(this.host, Slot.Notifications),\n      [Slot.AppSwitcher]: hasSlot(this.host, Slot.AppSwitcher),\n      [Slot.Profile]: hasSlot(this.host, Slot.Profile),\n      [Slot.Logo]: hasSlot(this.host, Slot.Logo),\n    };\n\n    if (this.hasSlot(Slot.AppSwitcher)) {\n      this.selectedApp = this.getSelectedApp();\n    }\n\n    if (this.hasSlot(Slot.Search)) {\n      this.computeSearchOpenState();\n    }\n  }\n\n  private getSelectedApp(): string | undefined {\n    // there are more concise ways to select the first checked menu item, but this is one that works for jest\n    const element = getSlot(this.host, Slot.AppSwitcher);\n    if (element == null) {\n      return undefined;\n    }\n    const items = Array.from(element.querySelectorAll('six-menu-item'));\n    const firstCheckedMenuItem = items.find((item: HTMLElement) => item.hasAttribute('checked'));\n    return firstCheckedMenuItem?.textContent ?? undefined;\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  render() {\n    const search = this.hasSlot(Slot.Search) && (\n      <section\n        class={{\n          'six-header__search': true,\n          'six-header__search--open': this.isSectionSelected(Section.Search),\n        }}\n      >\n        <six-icon-button name=\"search\" onClick={() => this.toggleSearch()} data-testid=\"search-trigger\" />\n      </section>\n    );\n\n    const notifications = this.hasSlot(Slot.Notifications) && (\n      <section class=\"six-header__notification\">\n        <slot name={Slot.Notifications} />\n      </section>\n    );\n\n    const appSwitcher = this.hasSlot(Slot.AppSwitcher) && (\n      <section\n        class={{\n          'six-header__app-switcher': true,\n          'six-header__app-switcher--open': this.isSectionSelected(Section.AppSwitcher),\n        }}\n      >\n        <a onClick={this.appNameClicked} class=\"six-header__selected-app\">\n          {this.selectedApp}\n        </a>\n        <six-dropdown distance={13} skidding={20} placement=\"bottom-end\" ref={this.setupAppSwitcher}>\n          <six-icon-button name=\"apps\" slot=\"trigger\" />\n          <slot name={Slot.AppSwitcher} />\n        </six-dropdown>\n      </section>\n    );\n\n    const profile = this.hasSlot(Slot.Profile) && (\n      <section\n        class={{\n          'six-header__profile': true,\n          'six-header__profile--open': this.isSectionSelected(Section.Profile),\n        }}\n      >\n        <six-dropdown distance={17} skidding={20} placement=\"bottom-end\" ref={this.setupProfile}>\n          <slot name=\"profile-avatar\" slot=\"trigger\" />\n          <slot name=\"profile-menu\" />\n        </six-dropdown>\n      </section>\n    );\n\n    const logo = this.hasSlot(Slot.Logo) ? (\n      <section>\n        <slot name=\"logo\" />\n      </section>\n    ) : (\n      <section\n        class={{\n          'six-header__logo': true,\n          'six-header__logo--clickable': this.clickableLogo,\n        }}\n        ref={this.setupLogo}\n      >\n        <svg height=\"20\" viewBox=\"0 0 90 26\" xmlns=\"http://www.w3.org/2000/svg\">\n          <title>SIX</title>\n          <g fill=\"#DE3919\" fill-rule=\"nonzero\">\n            <path d=\"m22.798 3.869c1.82-2.168 4.549-3.545 7.6-3.545h6.807v4.961h-6.807c-1.526 0-2.89.689-3.8 1.771l-12.19 14.526c-1.82 2.166-4.549 3.545-7.6 3.545h-6.808v-4.961h6.808c1.525 0 2.889-.689 3.799-1.773l12.191-14.525\" />\n            <path d=\"m42.16.324h5.21v24.806h-5.21z\" />\n            <path d=\"m66.743 3.869l4.195 4.999 4.195-4.999c1.819-2.168 4.549-3.545 7.6-3.545h6.806v4.961h-6.806c-1.526 0-2.89.689-3.8 1.771l-4.758 5.669 4.758 5.669c.91 1.084 2.274 1.773 3.8 1.773h6.806v4.961h-6.806c-3.051 0-5.781-1.379-7.6-3.545l-4.195-4.999-4.195 4.999c-1.82 2.166-4.55 3.545-7.6 3.545h-6.807v-4.961h6.807c1.525 0 2.889-.689 3.799-1.773l4.758-5.669-4.758-5.669c-.91-1.083-2.274-1.771-3.799-1.771h-6.807v-4.961h6.807c3.05 0 5.78 1.378 7.6 3.545\" />\n          </g>\n        </svg>\n      </section>\n    );\n\n    return (\n      <Host>\n        <header class=\"six-header\">\n          <section class=\"six-header__menu\">\n            <six-icon-button name={this.openHamburgerMenu ? 'menu_open' : 'menu'} ref={this.setupMenu} />\n          </section>\n\n          {logo}\n\n          <section class=\"six-header__placeholder\" />\n\n          <section class=\"six-header__custom\">\n            <slot />\n          </section>\n\n          {search}\n\n          {notifications}\n\n          {appSwitcher}\n\n          {profile}\n        </header>\n\n        <div\n          class={{\n            'six-header__search-field': true,\n            'six-header__search-field--visible': this.isSectionSelected(Section.Search),\n            'six-header__search-field--shift-content': this.shiftContent,\n          }}\n        >\n          <slot name={Slot.Search} />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-header.js","sourceRoot":"","sources":["../../../src/components/six-header/six-header.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { getSlot, hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\n\nexport interface SixHeaderAppSwitcherSelectPayload {\n  selectedLabel: string;\n  name: string;\n  item: HTMLSixMenuItemElement;\n}\n\nexport interface SixHeaderProfileSelectPayload {\n  selectedLabel: string;\n  name: string;\n  item: HTMLSixMenuItemElement;\n}\n\nexport interface SixHeaderSearchFieldToggle {\n  visible: boolean;\n}\n\nenum Section {\n  None,\n  Search,\n  AppSwitcher,\n  Profile,\n}\n\nenum Slot {\n  Search = 'search-field',\n  Notifications = 'notifications',\n  AppSwitcher = 'app-switcher-menu',\n  Profile = 'profile-menu',\n  Logo = 'logo',\n}\n\n/**\n * @since 1.0\n * @status stable\n * @slot - Used to define a custom component that is included in the header.\n * @slot search-field - Used to define the search field component in the header.\n * @slot notifications - <span style=\"color:red\">[Deprecated]</span>, use six-header `custom` property instead. Used to define the notification component in the header.\n * @slot app-switcher-menu - <span style=\"color:red\">[Deprecated]</span>, use six-header `custom` property instead. Used to define the application switcher menu in the header.\n * @slot profile-menu -  <span style=\"color:red\">[Deprecated]</span>, use six-header `custom` property instead. Used to define the profile menu in the header.\n * @slot profile-avatar - <span style=\"color:red\">[Deprecated]</span>, use six-header `custom` property instead. Used to define the avator in the header.\n */\n@Component({\n  tag: 'six-header',\n  styleUrl: 'six-header.scss',\n  shadow: true,\n  assetsDirs: ['assets'],\n})\nexport class SixHeader {\n  /**\n   * Set `custom` to `true` for complete control over the header content. When enabled, all other properties and slots\n   * are ignored.\n   *\n   * Use `six-header-item`, `six-header-dropdown-item` and `six-header-menu-button` to structure the content.\n   *\n   * @since 4.2.7\n   * @status beta\n   */\n  @Prop() custom = false;\n\n  /** Indicates if content should be shifted down when search field is visible. */\n  @Prop() shiftContent = false;\n\n  /**\n   * Set whether the hamburger menu should be visible or not\n   *\n   * @deprecated Use six-header `custom` property instead\n   */\n  @Prop() hideHamburgerMenu = false;\n\n  /**\n   * Set the hamburger menu icon to open or closed state\n   *\n   * @deprecated Use six-header `custom` property instead\n   */\n  @Prop() openHamburgerMenu = false;\n\n  /**\n   * Set the header search to be in an open or closed state.\n   *\n   * If `custom` is `true`, focuses the first `six-input` found in the search slot.\n   */\n  @Prop() openSearch = false;\n\n  /**\n   * Set whether the logo should be clickable\n   *\n   * @deprecated Use six-header `custom` property with `six-logo` instead\n   */\n  @Prop() clickableLogo = false;\n\n  /**\n   * The displayed logo. Either six or bme. Defaults to six.\n   *\n   * @deprecated Use six-header `custom` property with `six-logo` instead\n   */\n  @Prop() logo: 'six' | 'bme' = 'six';\n\n  @Watch('openSearch')\n  handleOpenSearchChange() {\n    if (this.custom) {\n      if (this.openSearch) {\n        // setFocus deferred due to https://github.com/ionic-team/stencil/issues/3772\n        setTimeout(async () => {\n          const slot = getSlot(this.host, Slot.Search);\n          slot?.shadowRoot?.querySelector('six-input')?.setFocus();\n        }, 50);\n      }\n    } else {\n      this.computeSearchOpenState();\n    }\n  }\n\n  /**\n   * Sets open state for search\n   *\n   * @deprecated Use six-header `custom` property instead\n   */\n  @Method()\n  async setSearchOpenState(openState: boolean) {\n    if (this.selectedSection === Section.Search && !openState) {\n      this.selectedSection = Section.None;\n    } else if (openState && this.selectedSection !== Section.Search) {\n      this.selectedSection = Section.Search;\n    }\n  }\n\n  /**\n   * Get open state for search\n   *\n   * @deprecated Use six-header `custom` property instead\n   */\n  @Method()\n  async getIsSearchOpen() {\n    return this.selectedSection === Section.Search;\n  }\n\n  /**\n   * Emitted when the name of the selected app is clicked.\n   *\n   * @deprecated Use six-header `custom` property with `six-header-dropdown-item` and `six-header-menu-button` instead\n   */\n  @Event({ eventName: 'six-header-app-name-clicked' }) sixAppNameClicked!: EventEmitter<EmptyPayload>;\n\n  /**\n   * Emitted when a menu item is in the app switcher menu is selected.\n   *\n   * @deprecated Use six-header `custom` property with `six-header-dropdown-item` and `six-header-menu-button` instead\n   */\n  @Event({ eventName: 'six-header-app-switcher-select' })\n  sixAppSwitcherSelect!: EventEmitter<SixHeaderAppSwitcherSelectPayload>;\n\n  /**\n   * Emitted when a menu item is in the profile menu is selected.\n   *\n   * @deprecated Use six-header `custom` property with `six-header-dropdown-item` and `six-avatar` instead\n   */\n  @Event({ eventName: 'six-header-profile-select' }) sixProfileSelect!: EventEmitter<SixHeaderProfileSelectPayload>;\n\n  /**\n   * Emitted when the hamburger menu is clicked.\n   *\n   * @deprecated Use six-header `custom` property instead\n   */\n  @Event({ eventName: 'six-header-hamburger-menu-clicked' }) sixHamburgerClick!: EventEmitter<EmptyPayload>;\n\n  /**\n   * Emitted when the header logo is clicked.\n   *\n   * @deprecated Use six-header `custom` property instead\n   */\n  @Event({ eventName: 'six-header-logo-clicked' }) logoClick!: EventEmitter<EmptyPayload>;\n\n  /**\n   * Emitted when search field is toggled.\n   *\n   * @deprecated Use six-header `custom` property instead\n   */\n  @Event({ eventName: 'six-header-search-field-toggle' })\n  sixSearchFieldToggle!: EventEmitter<SixHeaderSearchFieldToggle>;\n\n  @Element() host!: HTMLSixHeaderElement;\n\n  private eventListeners = new EventListeners();\n\n  private slots?: Record<Slot, boolean>;\n\n  private mutationObserver?: MutationObserver;\n\n  @State() selectedApp?: string;\n  @State() selectedSection?: Section;\n\n  private hasSlot(slot: Slot): boolean {\n    if (this.slots == null) {\n      return false;\n    }\n    return this.slots[slot];\n  }\n\n  private isSectionSelected(value: Section) {\n    return value === this.selectedSection;\n  }\n\n  private selectSection(section: Section) {\n    return () => (this.selectedSection = section);\n  }\n\n  private toggleSearch() {\n    const visible = this.selectedSection !== Section.Search;\n    this.selectedSection = this.selectedSection === Section.Search ? Section.None : Section.Search;\n    this.sixSearchFieldToggle.emit({ visible });\n    if (this.selectedSection === Section.Search) {\n      // setFocus deferred due to https://github.com/ionic-team/stencil/issues/3772\n      setTimeout(async () => {\n        const slot = getSlot(this.host, Slot.Search);\n        slot?.shadowRoot?.querySelector('six-input')?.setFocus();\n      }, 50);\n    }\n  }\n\n  private setupMenu = (el?: HTMLSixIconButtonElement) => {\n    if (el == null) return;\n\n    this.eventListeners.add(el, 'click', () => this.sixHamburgerClick.emit());\n  };\n\n  private setupLogo = (el?: HTMLElement) => {\n    if (!this.clickableLogo || el == null) return;\n\n    this.eventListeners.add(el, 'click', () => this.logoClick.emit());\n  };\n\n  private setupProfile = (el?: HTMLSixDropdownElement) => {\n    if (el == null) return;\n\n    this.eventListeners.add(el, 'six-dropdown-show', this.selectSection(Section.Profile));\n    this.eventListeners.add(el, 'six-dropdown-hide', this.selectSection(Section.None));\n    this.eventListeners.add(el, 'six-menu-item-selected', (event: Event) => {\n      const { name, item } = (event as CustomEvent).detail;\n      this.sixProfileSelect.emit({ selectedLabel: item.innerText, name, item });\n    });\n  };\n\n  private setupAppSwitcher = (el?: HTMLSixDropdownElement) => {\n    if (el == null) return;\n\n    this.eventListeners.add(el, 'six-dropdown-show', this.selectSection(Section.AppSwitcher));\n    this.eventListeners.add(el, 'six-dropdown-hide', this.selectSection(Section.None));\n    this.eventListeners.add(el, 'six-menu-item-selected', (event: Event) => {\n      const { name, item } = (event as CustomEvent).detail;\n      this.selectedApp = item.innerText;\n      this.sixAppSwitcherSelect.emit({ selectedLabel: item.innerText, name, item });\n    });\n  };\n\n  private appNameClicked = () => this.sixAppNameClicked.emit();\n\n  private computeSearchOpenState = () => {\n    this.selectedSection = this.openSearch ? Section.Search : Section.None;\n  };\n\n  componentWillLoad() {\n    this.slots = {\n      [Slot.Search]: hasSlot(this.host, Slot.Search),\n      [Slot.Notifications]: hasSlot(this.host, Slot.Notifications),\n      [Slot.AppSwitcher]: hasSlot(this.host, Slot.AppSwitcher),\n      [Slot.Profile]: hasSlot(this.host, Slot.Profile),\n      [Slot.Logo]: hasSlot(this.host, Slot.Logo),\n    };\n\n    if (this.hasSlot(Slot.AppSwitcher)) {\n      this.updateSelectedApp();\n    }\n\n    if (this.hasSlot(Slot.Search)) {\n      this.computeSearchOpenState();\n    }\n  }\n\n  connectedCallback() {\n    const appSwitcherSlot = getSlot(this.host, Slot.AppSwitcher);\n    if (appSwitcherSlot) {\n      this.mutationObserver = new MutationObserver((mutations) => {\n        if (mutations.some((mutation) => mutation.type === 'childList' || mutation.type === 'attributes')) {\n          this.updateSelectedApp();\n        }\n      });\n      this.mutationObserver.observe(appSwitcherSlot, { attributes: true, childList: true, subtree: true });\n    }\n  }\n\n  private updateSelectedApp() {\n    // there are more concise ways to select the first checked menu item, but this is one that works for jest\n    const element = getSlot(this.host, Slot.AppSwitcher);\n    if (element == null) {\n      return undefined;\n    }\n    const items = Array.from(element.querySelectorAll('six-menu-item'));\n    const firstCheckedMenuItem = items.find(\n      (item) => item.hasAttribute('checked') && item.getAttribute('checked') !== 'false'\n    );\n    this.selectedApp = firstCheckedMenuItem?.textContent ?? undefined;\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n    this.mutationObserver?.disconnect();\n  }\n\n  render() {\n    const hamburgerMenu = !this.hideHamburgerMenu && (\n      <six-header-item>\n        <six-icon-button name={this.openHamburgerMenu ? 'menu_open' : 'menu'} ref={this.setupMenu} />\n      </six-header-item>\n    );\n\n    const search = this.hasSlot(Slot.Search) && (\n      <six-header-item active={this.isSectionSelected(Section.Search)}>\n        <six-icon-button name=\"search\" onClick={() => this.toggleSearch()} data-testid=\"search-trigger\" />\n      </six-header-item>\n    );\n\n    const notifications = this.hasSlot(Slot.Notifications) && (\n      <six-header-item>\n        <slot name={Slot.Notifications} />\n      </six-header-item>\n    );\n\n    const appSwitcher = this.hasSlot(Slot.AppSwitcher) && (\n      <six-header-item active={this.isSectionSelected(Section.AppSwitcher)}>\n        <six-dropdown distance={14} skidding={20} placement=\"bottom-end\" ref={this.setupAppSwitcher}>\n          <div slot=\"trigger\" class=\"six-header__app-switcher-dropdown\">\n            <a onClick={this.appNameClicked} class=\"six-header__selected-app\">\n              {this.selectedApp}\n            </a>\n            <six-icon-button name=\"apps\" />\n          </div>\n          <slot name={Slot.AppSwitcher} />\n        </six-dropdown>\n      </six-header-item>\n    );\n\n    const profile = this.hasSlot(Slot.Profile) && (\n      <six-header-item active={this.isSectionSelected(Section.Profile)}>\n        <six-dropdown distance={18} skidding={20} placement=\"bottom-end\" ref={this.setupProfile}>\n          <slot name=\"profile-avatar\" slot=\"trigger\" />\n          <slot name=\"profile-menu\" />\n        </six-dropdown>\n      </six-header-item>\n    );\n\n    const logo = this.hasSlot(Slot.Logo) ? (\n      <six-header-item>\n        <slot name=\"logo\" />\n      </six-header-item>\n    ) : (\n      <six-header-item class={{ 'six-header__logo--clickable': this.clickableLogo }} ref={this.setupLogo}>\n        <six-logo brand={this.logo} />\n      </six-header-item>\n    );\n\n    const customView = (\n      <Host>\n        <header part=\"header\" class=\"six-header\">\n          <slot />\n        </header>\n        <div\n          class={{\n            'six-header__search-field': true,\n            'six-header__search-field--visible': this.openSearch,\n            'six-header__search-field--shift-content': this.shiftContent,\n          }}\n        >\n          <slot name={Slot.Search} />\n        </div>\n      </Host>\n    );\n\n    const defaultView = (\n      <Host>\n        <header part=\"header\" class=\"six-header\">\n          {hamburgerMenu}\n          {logo}\n          <six-header-item class=\"six-header__placeholder\" />\n          <six-header-item>\n            <slot />\n          </six-header-item>\n          {search}\n          {notifications}\n          {appSwitcher}\n          {profile}\n        </header>\n\n        <div\n          class={{\n            'six-header__search-field': true,\n            'six-header__search-field--visible': this.isSectionSelected(Section.Search),\n            'six-header__search-field--shift-content': this.shiftContent,\n          }}\n        >\n          <slot name={Slot.Search} />\n        </div>\n      </Host>\n    );\n\n    return this.custom ? customView : defaultView;\n  }\n}\n"]}

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

@@ -0,0 +1,15 @@
+:host {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0 var(--six-spacing-large);
+  border-bottom: solid var(--six-header-border-height) transparent;
+  border-top: solid var(--six-header-border-height) transparent;
+  transition: var(--six-transition-fast) border-color;
+}
+
+:host(.six-header-dropdown-item--active) {
+  border-bottom: solid var(--six-header-border-height) var(--six-header-border-color-open);
+  transition: var(--six-transition-fast) border-color;
+}

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

@@ -0,0 +1,53 @@
+import { h, Host } from "@stencil/core";
+import { getSlot } from "../../utils/slot";
+/**
+ * @since 4.2.7
+ * @status beta
+ */
+export class SixHeaderDropdownItem {
+    constructor() {
+        this.active = false;
+    }
+    connectedCallback() {
+        this.updateDropdownDistance();
+    }
+    componentDidLoad() {
+        this.updateDropdownDistance();
+    }
+    render() {
+        return (h(Host, { key: 'fc1c8ffcb391ed1d9ba3d0fd27e8c599e169b3d1', class: {
+                'six-header-dropdown-item--active': this.active,
+            } }, h("six-dropdown", { key: 'd8620f944a5b888a52880d7977f49edf0353b6ad', ref: (el) => (this.dropdownElement = el), hoist: true, skidding: 0, placement: "bottom-end", "onSix-dropdown-show": () => (this.active = true), "onSix-dropdown-hide": () => (this.active = false) }, h("slot", { key: 'bf1852e25863a45f9c1aa047cd9d9ceb5d7eba81', slot: "trigger", name: "trigger" }), h("slot", { key: '3461d0e1d484326400db97087689c6375269a974' }))));
+    }
+    updateDropdownDistance() {
+        const trigger = getSlot(this.host, 'trigger');
+        const header = this.host.closest('six-header');
+        if (trigger != null && header != null && this.dropdownElement != null && this.host != null) {
+            const hostRight = this.host.getBoundingClientRect().right;
+            const triggerRight = trigger.getBoundingClientRect().right;
+            const headerBottom = header.getBoundingClientRect().bottom;
+            const triggerBottom = trigger.getBoundingClientRect().bottom;
+            this.dropdownElement.distance = headerBottom - triggerBottom + 3;
+            this.dropdownElement.skidding = hostRight - triggerRight;
+        }
+    }
+    static get is() { return "six-header-dropdown-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-header-dropdown-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-header-dropdown-item.css"]
+        };
+    }
+    static get states() {
+        return {
+            "active": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=six-header-dropdown-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-header-dropdown-item.js","sourceRoot":"","sources":["../../../src/components/six-header-dropdown-item/six-header-dropdown-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C;;;GAGG;AAOH,MAAM,OAAO,qBAAqB;;sBACd,KAAK;;IAMvB,iBAAiB;QACf,IAAI,CAAC,sBAAsB,EAAE,CAAC;IAChC,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,sBAAsB,EAAE,CAAC;IAChC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,kCAAkC,EAAE,IAAI,CAAC,MAAM;aAChD;YAED,qEACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC,EACxC,KAAK,QACL,QAAQ,EAAE,CAAC,EACX,SAAS,EAAC,YAAY,yBACD,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,yBAC1B,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;gBAEhD,6DAAM,IAAI,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,GAAG;gBACtC,8DAAQ,CACK,CACV,CACR,CAAC;IACJ,CAAC;IAEO,sBAAsB;QAC5B,MAAM,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;QAC9C,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;QAC/C,IAAI,OAAO,IAAI,IAAI,IAAI,MAAM,IAAI,IAAI,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,EAAE,CAAC;YAC3F,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;YAC1D,MAAM,YAAY,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;YAC3D,MAAM,YAAY,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;YAC3D,MAAM,aAAa,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;YAC7D,IAAI,CAAC,eAAe,CAAC,QAAQ,GAAG,YAAY,GAAG,aAAa,GAAG,CAAC,CAAC;YACjE,IAAI,CAAC,eAAe,CAAC,QAAQ,GAAG,SAAS,GAAG,YAAY,CAAC;QAC3D,CAAC;IACH,CAAC;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, State } from '@stencil/core';\nimport { getSlot } from '../../utils/slot';\n\n/**\n * @since 4.2.7\n * @status beta\n */\n\n@Component({\n  tag: 'six-header-dropdown-item',\n  styleUrl: 'six-header-dropdown-item.scss',\n  shadow: true,\n})\nexport class SixHeaderDropdownItem {\n  @State() active = false;\n\n  @Element() host!: HTMLSixHeaderDropdownItemElement;\n\n  private dropdownElement?: HTMLSixDropdownElement;\n\n  connectedCallback() {\n    this.updateDropdownDistance();\n  }\n\n  componentDidLoad() {\n    this.updateDropdownDistance();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'six-header-dropdown-item--active': this.active,\n        }}\n      >\n        <six-dropdown\n          ref={(el) => (this.dropdownElement = el)}\n          hoist\n          skidding={0}\n          placement=\"bottom-end\"\n          onSix-dropdown-show={() => (this.active = true)}\n          onSix-dropdown-hide={() => (this.active = false)}\n        >\n          <slot slot=\"trigger\" name=\"trigger\" />\n          <slot />\n        </six-dropdown>\n      </Host>\n    );\n  }\n\n  private updateDropdownDistance() {\n    const trigger = getSlot(this.host, 'trigger');\n    const header = this.host.closest('six-header');\n    if (trigger != null && header != null && this.dropdownElement != null && this.host != null) {\n      const hostRight = this.host.getBoundingClientRect().right;\n      const triggerRight = trigger.getBoundingClientRect().right;\n      const headerBottom = header.getBoundingClientRect().bottom;\n      const triggerBottom = trigger.getBoundingClientRect().bottom;\n      this.dropdownElement.distance = headerBottom - triggerBottom + 3;\n      this.dropdownElement.skidding = hostRight - triggerRight;\n    }\n  }\n}\n"]}

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

@@ -0,0 +1,15 @@
+:host {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0 var(--six-spacing-large);
+  border-bottom: solid var(--six-header-border-height) transparent;
+  border-top: solid var(--six-header-border-height) transparent;
+  transition: var(--six-transition-fast) border-color;
+}
+
+:host(.six-header-item--active) {
+  border-bottom: solid var(--six-header-border-height) var(--six-header-border-color-open);
+  transition: var(--six-transition-fast) border-color;
+}

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

@@ -0,0 +1,51 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @since 4.2.7
+ * @status beta
+ */
+export class SixHeaderItem {
+    constructor() {
+        this.active = false;
+    }
+    render() {
+        return (h(Host, { key: 'f9cd64916220a398b0fa6f79840ed72f776d5771', class: {
+                'six-header-item--active': this.active,
+                foo: true,
+            } }, h("slot", { key: '4402bde66e14792fbaef3fe53804ee62f57354e9' })));
+    }
+    static get is() { return "six-header-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-header-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-header-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates whether the item is styled as active.\nWhen set to `true`, a border is displayed below the trigger element.\n\nUse <code>six-header-dropdown-item</code> to automatically set the active\nstate for dropdowns."
+                },
+                "attribute": "active",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=six-header-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-header-item.js","sourceRoot":"","sources":["../../../src/components/six-header-item/six-header-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;GAGG;AAOH,MAAM,OAAO,aAAa;;sBAQU,KAAK;;IAEvC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,yBAAyB,EAAE,IAAI,CAAC,MAAM;gBACtC,GAAG,EAAE,IAAI;aACV;YAED,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * @since 4.2.7\n * @status beta\n */\n\n@Component({\n  tag: 'six-header-item',\n  styleUrl: 'six-header-item.scss',\n  shadow: true,\n})\nexport class SixHeaderItem {\n  /**\n   * Indicates whether the item is styled as active.\n   * When set to `true`, a border is displayed below the trigger element.\n   *\n   * Use <code>six-header-dropdown-item</code> to automatically set the active\n   * state for dropdowns.\n   */\n  @Prop({ reflect: true }) active = false;\n\n  render() {\n    return (\n      <Host\n        class={{\n          'six-header-item--active': this.active,\n          foo: true,\n        }}\n      >\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,27 @@
+:host {
+  display: block;
+}
+
+six-button::part(base) {
+  border: none;
+  padding-right: 0;
+}
+
+six-button::part(label) {
+  border: none;
+  font-weight: var(--six-font-weight-bold);
+  font-size: var(--six-font-size-small);
+  padding-left: 0;
+}
+
+six-button:focus::part(base),
+six-button:hover::part(base),
+six-button:active::part(base) {
+  background-color: initial;
+  border-color: initial;
+}
+
+six-button:hover::part(base),
+six-button:active::part(base) {
+  color: var(--six-header-selected-app-color-hover);
+}

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

@@ -0,0 +1,48 @@
+import { h } from "@stencil/core";
+/**
+ * @since 4.2.7
+ * @status beta
+ */
+export class SixHeaderMenuButton {
+    constructor() {
+        this.icon = '';
+    }
+    render() {
+        return (h("six-button", { key: 'a90b8172714045d7d6a4dfac4d1c2755d6ec5090', type: "secondary" }, h("span", { key: '4aa77d118aa8d2b634327e9b62d8e17ee3742e87', slot: "suffix" }, h("six-icon", { key: 'dc64461f222af85ed126c307a94cd2f4f3020eac' }, this.icon)), h("slot", { key: 'a611c0d9090a039f682350240c07aa77fb76ebad' })));
+    }
+    static get is() { return "six-header-menu-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-header-menu-button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-header-menu-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The icon of the menu button."
+                },
+                "attribute": "icon",
+                "reflect": true,
+                "defaultValue": "''"
+            }
+        };
+    }
+}
+//# sourceMappingURL=six-header-menu-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-header-menu-button.js","sourceRoot":"","sources":["../../../src/components/six-header-menu-button/six-header-menu-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;GAGG;AAOH,MAAM,OAAO,mBAAmB;;oBAIE,EAAE;;IAElC,MAAM;QACJ,OAAO,CACL,mEAAY,IAAI,EAAC,WAAW;YAC1B,6DAAM,IAAI,EAAC,QAAQ;gBACjB,mEAAW,IAAI,CAAC,IAAI,CAAY,CAC3B;YACP,8DAAQ,CACG,CACd,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @since 4.2.7\n * @status beta\n */\n\n@Component({\n  tag: 'six-header-menu-button',\n  styleUrl: 'six-header-menu-button.scss',\n  shadow: true,\n})\nexport class SixHeaderMenuButton {\n  /**\n   * The icon of the menu button.\n   */\n  @Prop({ reflect: true }) icon = '';\n\n  render() {\n    return (\n      <six-button type=\"secondary\">\n        <span slot=\"suffix\">\n          <six-icon>{this.icon}</six-icon>\n        </span>\n        <slot />\n      </six-button>\n    );\n  }\n}\n"]}

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

@@ -3,11 +3,12 @@
   box-sizing: border-box;
 }
 :host *, :host *:before, :host *:after {
-  box-sizing: inherit;
+  box-sizing: border-box;
 }
 
 :host {
-  display: inline;
+  display: inline-flex;
+  vertical-align: middle;
 }
 
 .material-icons {
@@ -27,6 +28,8 @@
   -moz-osx-font-smoothing: grayscale;
   /* Support for IE. */
   font-feature-settings: "liga";
+  /* Icon name should not be selectable. */
+  user-select: none;
 }
 
 .material-icons-filled {

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

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 /**
  * @since 1.0
  * @status stable
@@ -6,76 +6,76 @@ import { h } from '@stencil/core';
  * @slot - Used to define the material icon name.
  */
 export class SixIcon {
-  constructor() {
-    this.size = 'inherit';
-    this.filled = false;
-  }
-  render() {
-    return (h("i", { class: {
-        'material-icons': true,
-        'material-icons-outlined': !this.filled,
-        'material-icons-filled': this.filled,
-        'icon--xsmall': this.size === 'xSmall',
-        'icon--small': this.size === 'small',
-        'icon--medium': this.size === 'medium',
-        'icon--large': this.size === 'large',
-        'icon--xlarge': this.size === 'xLarge',
-        'icon--xxlarge': this.size === 'xxLarge',
-        'icon--xxxlarge': this.size === 'xxxLarge',
-        'icon--inherit': this.size === 'inherit',
-      } }, h("slot", null)));
-  }
-  static get is() { return "six-icon"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["six-icon.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["six-icon.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "| 'inherit'\n    | 'xSmall'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'xLarge'\n    | 'xxLarge'\n    | 'xxxLarge'",
-          "resolved": "\"inherit\" | \"large\" | \"medium\" | \"small\" | \"xLarge\" | \"xSmall\" | \"xxLarge\" | \"xxxLarge\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The icon's size."
-        },
-        "attribute": "size",
-        "reflect": true,
-        "defaultValue": "'inherit'"
-      },
-      "filled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If set to true the default material outlined icons are not used."
-        },
-        "attribute": "filled",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
+    constructor() {
+        this.size = 'inherit';
+        this.filled = false;
+    }
+    render() {
+        return (h("i", { key: 'bb25b14535ec4dacd93d73b70616f1b7afaccc05', class: {
+                'material-icons': true,
+                'material-icons-outlined': !this.filled,
+                'material-icons-filled': this.filled,
+                'icon--xsmall': this.size === 'xSmall',
+                'icon--small': this.size === 'small',
+                'icon--medium': this.size === 'medium',
+                'icon--large': this.size === 'large',
+                'icon--xlarge': this.size === 'xLarge',
+                'icon--xxlarge': this.size === 'xxLarge',
+                'icon--xxxlarge': this.size === 'xxxLarge',
+                'icon--inherit': this.size === 'inherit',
+            } }, h("slot", { key: '9df9952d62984aba53dcdebc2c56e7c5cdd7d51c' })));
+    }
+    static get is() { return "six-icon"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-icon.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "| 'inherit'\n    | 'xSmall'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'xLarge'\n    | 'xxLarge'\n    | 'xxxLarge'",
+                    "resolved": "\"inherit\" | \"large\" | \"medium\" | \"small\" | \"xLarge\" | \"xSmall\" | \"xxLarge\" | \"xxxLarge\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The icon's size."
+                },
+                "attribute": "size",
+                "reflect": true,
+                "defaultValue": "'inherit'"
+            },
+            "filled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If set to true the default material outlined icons are not used."
+                },
+                "attribute": "filled",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
 }
 //# sourceMappingURL=six-icon.js.map

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;;gBAUD,SAAS;kBAGT,KAAK;;EAEtB,MAAM;IACJ,OAAO,CACL,SACE,KAAK,EAAE;QACL,gBAAgB,EAAE,IAAI;QACtB,yBAAyB,EAAE,CAAC,IAAI,CAAC,MAAM;QACvC,uBAAuB,EAAE,IAAI,CAAC,MAAM;QACpC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;QACtC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;QACpC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;QACtC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;QACpC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;QACtC,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;QACxC,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU;QAC1C,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;OACzC;MAED,eAAa,CACX,CACL,CAAC;EACJ,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;AAEnD;;;;;GAKG;AAOH,MAAM,OAAO,OAAO;;oBAUD,SAAS;sBAGT,KAAK;;IAEtB,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"]}

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

@@ -3,7 +3,7 @@
   box-sizing: border-box;
 }
 :host *, :host *:before, :host *:after {
-  box-sizing: inherit;
+  box-sizing: border-box;
 }
 
 :host {
@@ -18,13 +18,14 @@
   border: none;
   border-radius: var(--six-border-radius-medium);
   font-size: inherit;
+  text-decoration: none;
   color: var(--six-input-icon-color);
   padding: var(--six-spacing-x-small);
   cursor: pointer;
   transition: var(--six-transition-medium) color;
   -webkit-appearance: none;
 }
-.icon-button:hover:not(.icon-button--disabled), .icon-button:focus:not(.icon-button--disabled) {
+.icon-button:hover:not(.icon-button--disabled) {
   color: var(--six-input-icon-color-hover);
 }
 .icon-button:active:not(.icon-button--disabled) {
@@ -33,6 +34,10 @@
 .icon-button:focus {
   outline: none;
 }
+.icon-button:focus-visible {
+  outline: var(--six-focus-ring);
+  outline-offset: var(--six-focus-ring-offset);
+}
 
 .icon-button--disabled {
   opacity: 0.5;
@@ -43,10 +48,6 @@
   cursor: not-allowed;
 }
 
-.focus-visible.icon-button:focus {
-  box-shadow: var(--six-button-focus-shadow);
-}
-
 .icon-button ::slotted(six-badge) {
   position: absolute;
   top: 0;