@six-group/ui-library 0.0.0-insider.bb295d8 → 0.0.0-insider.bea5ab5

package/dist/components/six-header.js

@@ -1,211 +1,45 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { E as EventListeners } from './event-listeners.js';
-import { g as getSlot, h as hasSlot } from './slot.js';
-import { d as defineCustomElement$9 } from './six-checkbox2.js';
-import { d as defineCustomElement$8 } from './six-dropdown2.js';
-import { d as defineCustomElement$7 } from './six-error2.js';
-import { d as defineCustomElement$6 } from './six-icon2.js';
-import { d as defineCustomElement$5 } from './six-icon-button2.js';
-import { d as defineCustomElement$4 } from './six-input2.js';
-import { d as defineCustomElement$3 } from './six-menu2.js';
-import { d as defineCustomElement$2 } from './six-menu-item2.js';
+import { g as getSlot } from './slot.js';
 
-const sixHeaderCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:block;user-select:none;--search-border-width:1px}::slotted(six-search-field){position:absolute;margin-left:var(--search-border-width);width:calc(100% - 2 * var(--search-border-width))}.six-header{display:flex;width:100%;height:3.75rem;background-color:var(--six-header-background-color);align-items:center;flex-wrap:wrap;box-shadow:var(--six-shadow-medium);border-bottom:var(--six-header-border-with) solid var(--six-header-border-color)}.six-header__logo{width:6rem;margin-top:0.15rem}.six-header__logo--clickable{cursor:pointer}.six-header__placeholder{flex:1}.six-header__menu,.six-header__logo,.six-header__custom,.six-header__search,.six-header__notification,.six-header__app-switcher,.six-header__profile{height:calc(100% - 0.25rem - 1px);padding:0 1.25rem;display:flex;align-items:center;border-bottom:solid 0.25rem transparent}.six-header__menu--open,.six-header__logo--open,.six-header__custom--open,.six-header__search--open,.six-header__notification--open,.six-header__app-switcher--open,.six-header__profile--open{border-bottom:solid 0.25rem var(--six-header-border-color-open)}.six-header__app-switcher-dropdown{display:flex;align-items:center}.six-header__selected-app{cursor:pointer;font-size:0.9rem;font-weight:600;padding-right:0;padding-left:0.3rem}.six-header__selected-app:hover{color:var(--six-header-selected-app-color-hover)}.six-header__search-field{opacity:0;transform:scale(0.9);transition:var(--six-transition-fast) opacity, var(--six-transition-fast) transform;display:none}.six-header__search-field--visible{opacity:1;transform:none;display:block}.six-header__search-field--shift-content.six-header__search-field--visible{height:2.65rem;transition:var(--six-transition-fast) height}.six-header__search-field--shift-content:not(.six-header__search-field--visible){height:0;transition:var(--six-transition-fast) height}";
+const sixHeaderCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:block;user-select:none;--search-border-width:1px}::slotted(six-search-field){position:absolute;margin-left:var(--search-border-width);width:calc(100% - 2 * var(--search-border-width))}.six-header{display:flex;width:100%;height:var(--six-header-height);background-color:var(--six-header-background-color);align-items:stretch;box-shadow:var(--six-shadow-medium);border-bottom:var(--six-header-border-with) solid var(--six-header-border-color)}.six-header__search-field{opacity:0;transform:scale(0.9);transition:var(--six-transition-fast) opacity, var(--six-transition-fast) transform;display:none}.six-header__search-field--visible{opacity:1;transform:none;display:block}.six-header__search-field--shift-content.six-header__search-field--visible{height:2.65rem;transition:var(--six-transition-fast) height}.six-header__search-field--shift-content:not(.six-header__search-field--visible){height:0;transition:var(--six-transition-fast) height}";
+const SixHeaderStyle0 = sixHeaderCss;
 
-var Section;
-(function (Section) {
-    Section[Section["None"] = 0] = "None";
-    Section[Section["Search"] = 1] = "Search";
-    Section[Section["AppSwitcher"] = 2] = "AppSwitcher";
-    Section[Section["Profile"] = 3] = "Profile";
-})(Section || (Section = {}));
-var Slot;
-(function (Slot) {
-    Slot["Search"] = "search-field";
-    Slot["Notifications"] = "notifications";
-    Slot["AppSwitcher"] = "app-switcher-menu";
-    Slot["Profile"] = "profile-menu";
-    Slot["Logo"] = "logo";
-})(Slot || (Slot = {}));
 const SixHeader$1 = /*@__PURE__*/ proxyCustomElement(class SixHeader extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.sixAppNameClicked = createEvent(this, "six-header-app-name-clicked", 7);
-        this.sixAppSwitcherSelect = createEvent(this, "six-header-app-switcher-select", 7);
-        this.sixProfileSelect = createEvent(this, "six-header-profile-select", 7);
-        this.sixHamburgerClick = createEvent(this, "six-header-hamburger-menu-clicked", 7);
-        this.sixLogoClick = createEvent(this, "six-header-logo-clicked", 7);
-        this.sixSearchFieldToggle = createEvent(this, "six-header-search-field-toggle", 7);
         this.eventListeners = new EventListeners();
-        this.setupMenu = (el) => {
-            if (el == null)
-                return;
-            this.eventListeners.add(el, 'click', () => this.sixHamburgerClick.emit());
-        };
-        this.setupLogo = (el) => {
-            if (!this.clickableLogo || el == null)
-                return;
-            this.eventListeners.add(el, 'click', () => this.sixLogoClick.emit());
-        };
-        this.setupProfile = (el) => {
-            if (el == null)
-                return;
-            this.eventListeners.add(el, 'six-dropdown-show', this.selectSection(Section.Profile));
-            this.eventListeners.add(el, 'six-dropdown-hide', this.selectSection(Section.None));
-            this.eventListeners.add(el, 'six-menu-item-selected', (event) => {
-                const { name, item } = event.detail;
-                this.sixProfileSelect.emit({ selectedLabel: item.innerText, name, item });
-            });
-        };
-        this.setupAppSwitcher = (el) => {
-            if (el == null)
-                return;
-            this.eventListeners.add(el, 'six-dropdown-show', this.selectSection(Section.AppSwitcher));
-            this.eventListeners.add(el, 'six-dropdown-hide', this.selectSection(Section.None));
-            this.eventListeners.add(el, 'six-menu-item-selected', (event) => {
-                const { name, item } = event.detail;
-                this.selectedApp = item.innerText;
-                this.sixAppSwitcherSelect.emit({ selectedLabel: item.innerText, name, item });
-            });
-        };
-        this.appNameClicked = () => this.sixAppNameClicked.emit();
-        this.computeSearchOpenState = () => {
-            this.selectedSection = this.openSearch ? Section.Search : Section.None;
-        };
         this.shiftContent = false;
-        this.hideHamburgerMenu = false;
-        this.openHamburgerMenu = false;
         this.openSearch = false;
-        this.clickableLogo = false;
-        this.selectedApp = undefined;
-        this.selectedSection = undefined;
     }
     handleOpenSearchChange() {
-        this.computeSearchOpenState();
-    }
-    /** Sets open state for search */
-    async setSearchOpenState(openState) {
-        if (this.selectedSection === Section.Search && !openState) {
-            this.selectedSection = Section.None;
-        }
-        else if (openState && this.selectedSection !== Section.Search) {
-            this.selectedSection = Section.Search;
-        }
-    }
-    /** Get open state for search */
-    async getIsSearchOpen() {
-        return this.selectedSection === Section.Search;
-    }
-    hasSlot(slot) {
-        if (this.slots == null) {
-            return false;
-        }
-        return this.slots[slot];
-    }
-    isSectionSelected(value) {
-        return value === this.selectedSection;
-    }
-    selectSection(section) {
-        return () => (this.selectedSection = section);
-    }
-    toggleSearch() {
-        const visible = this.selectedSection !== Section.Search;
-        this.selectedSection = this.selectedSection === Section.Search ? Section.None : Section.Search;
-        this.sixSearchFieldToggle.emit({ visible });
-        if (this.selectedSection === Section.Search) {
-            // setFocus deferred due to https://github.com/ionic-team/stencil/issues/3772
-            setTimeout(async () => {
-                var _a, _b;
-                const slot = getSlot(this.host, Slot.Search);
-                (_b = (_a = slot === null || slot === void 0 ? void 0 : slot.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('six-input')) === null || _b === void 0 ? void 0 : _b.setFocus();
-            }, 50);
-        }
-    }
-    componentWillLoad() {
-        this.slots = {
-            [Slot.Search]: hasSlot(this.host, Slot.Search),
-            [Slot.Notifications]: hasSlot(this.host, Slot.Notifications),
-            [Slot.AppSwitcher]: hasSlot(this.host, Slot.AppSwitcher),
-            [Slot.Profile]: hasSlot(this.host, Slot.Profile),
-            [Slot.Logo]: hasSlot(this.host, Slot.Logo),
-        };
-        if (this.hasSlot(Slot.AppSwitcher)) {
-            this.updateSelectedApp();
-        }
-        if (this.hasSlot(Slot.Search)) {
-            this.computeSearchOpenState();
-        }
-    }
-    connectedCallback() {
-        const appSwitcherSlot = getSlot(this.host, Slot.AppSwitcher);
-        if (appSwitcherSlot) {
-            this.mutationObserver = new MutationObserver((mutations) => {
-                if (mutations.some((mutation) => mutation.type === 'childList' || mutation.type === 'attributes')) {
-                    this.updateSelectedApp();
-                }
-            });
-            this.mutationObserver.observe(appSwitcherSlot, { attributes: true, childList: true, subtree: true });
-        }
-    }
-    updateSelectedApp() {
-        var _a;
-        // there are more concise ways to select the first checked menu item, but this is one that works for jest
-        const element = getSlot(this.host, Slot.AppSwitcher);
-        if (element == null) {
-            return undefined;
+        if (this.openSearch) {
+            // deferred due to https://github.com/ionic-team/stencil/issues/3772
+            setTimeout(async () => { var _a, _b, _c; return (_c = (_b = (_a = getSlot(this.host, 'search-field')) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('six-input')) === null || _c === void 0 ? void 0 : _c.setFocus(); }, 50);
         }
-        const items = Array.from(element.querySelectorAll('six-menu-item'));
-        const firstCheckedMenuItem = items.find((item) => item.hasAttribute('checked') && item.getAttribute('checked') !== 'false');
-        this.selectedApp = (_a = firstCheckedMenuItem === null || firstCheckedMenuItem === void 0 ? void 0 : firstCheckedMenuItem.textContent) !== null && _a !== void 0 ? _a : undefined;
     }
     disconnectedCallback() {
-        var _a;
         this.eventListeners.removeAll();
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        const hamburgerMenu = !this.hideHamburgerMenu && (h("section", { class: "six-header__menu" }, h("six-icon-button", { name: this.openHamburgerMenu ? 'menu_open' : 'menu', ref: this.setupMenu })));
-        const search = this.hasSlot(Slot.Search) && (h("section", { class: {
-                'six-header__search': true,
-                'six-header__search--open': this.isSectionSelected(Section.Search),
-            } }, h("six-icon-button", { name: "search", onClick: () => this.toggleSearch(), "data-testid": "search-trigger" })));
-        const notifications = this.hasSlot(Slot.Notifications) && (h("section", { class: "six-header__notification" }, h("slot", { name: Slot.Notifications })));
-        const appSwitcher = this.hasSlot(Slot.AppSwitcher) && (h("section", { class: {
-                'six-header__app-switcher': true,
-                'six-header__app-switcher--open': this.isSectionSelected(Section.AppSwitcher),
-            } }, h("six-dropdown", { distance: 13, skidding: 20, placement: "bottom-end", ref: this.setupAppSwitcher }, h("div", { slot: "trigger", class: "six-header__app-switcher-dropdown" }, h("a", { onClick: this.appNameClicked, class: "six-header__selected-app" }, this.selectedApp), h("six-icon-button", { name: "apps" })), h("slot", { name: Slot.AppSwitcher }))));
-        const profile = this.hasSlot(Slot.Profile) && (h("section", { class: {
-                'six-header__profile': true,
-                'six-header__profile--open': this.isSectionSelected(Section.Profile),
-            } }, h("six-dropdown", { distance: 17, skidding: 20, placement: "bottom-end", ref: this.setupProfile }, h("slot", { name: "profile-avatar", slot: "trigger" }), h("slot", { name: "profile-menu" }))));
-        const logo = this.hasSlot(Slot.Logo) ? (h("section", null, h("slot", { name: "logo" }))) : (h("section", { class: {
-                'six-header__logo': true,
-                'six-header__logo--clickable': this.clickableLogo,
-            }, ref: this.setupLogo }, h("svg", { height: "20", viewBox: "0 0 90 26", xmlns: "http://www.w3.org/2000/svg" }, h("title", null, "SIX"), h("g", { fill: "#DE3919", "fill-rule": "nonzero" }, h("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" }), h("path", { d: "m42.16.324h5.21v24.806h-5.21z" }), h("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" })))));
-        return (h(Host, null, h("header", { class: "six-header" }, hamburgerMenu, logo, h("section", { class: "six-header__placeholder" }), h("section", { class: "six-header__custom" }, h("slot", null)), search, notifications, appSwitcher, profile), h("div", { class: {
+        console.log('render', this.openSearch);
+        return (h(Host, { key: '52af99894d875dcaab9e43584e3f85a032ee5297' }, h("header", { key: '0de37377a1ec6137940c9dc06d6db2be650473c4', part: "header", class: "six-header" }, h("slot", { key: '5a236e823be39bbf26073ac7ff5413ef09c25bda' })), h("div", { key: '77182a4e207a72ba9400a2d13d3cfddfdb98668c', class: {
                 'six-header__search-field': true,
-                'six-header__search-field--visible': this.isSectionSelected(Section.Search),
+                'six-header__search-field--visible': this.openSearch,
                 'six-header__search-field--shift-content': this.shiftContent,
-            } }, h("slot", { name: Slot.Search }))));
+            } }, h("slot", { key: '27cfb931af55b164761a22c11c320874ddac3e3a', name: 'search-field' }))));
     }
     static get assetsDirs() { return ["assets"]; }
     get host() { return this; }
     static get watchers() { return {
         "openSearch": ["handleOpenSearchChange"]
     }; }
-    static get style() { return sixHeaderCss; }
+    static get style() { return SixHeaderStyle0; }
 }, [1, "six-header", {
         "shiftContent": [4, "shift-content"],
-        "hideHamburgerMenu": [4, "hide-hamburger-menu"],
-        "openHamburgerMenu": [4, "open-hamburger-menu"],
-        "openSearch": [4, "open-search"],
-        "clickableLogo": [4, "clickable-logo"],
-        "selectedApp": [32],
-        "selectedSection": [32],
-        "setSearchOpenState": [64],
-        "getIsSearchOpen": [64]
+        "openSearch": [4, "open-search"]
     }, undefined, {
         "openSearch": ["handleOpenSearchChange"]
     }]);
@@ -213,53 +47,13 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["six-header", "six-checkbox", "six-dropdown", "six-error", "six-icon", "six-icon-button", "six-input", "six-menu", "six-menu-item"];
+    const components = ["six-header"];
     components.forEach(tagName => { switch (tagName) {
         case "six-header":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, SixHeader$1);
             }
             break;
-        case "six-checkbox":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
-        case "six-dropdown":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "six-error":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "six-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "six-icon-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "six-input":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "six-menu":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "six-menu-item":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
     } });
 }
 

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

@@ -1 +1 @@
-{"file":"six-header.js","mappings":"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","names":["SixHeader"],"sources":["src/components/six-header/six-header.scss?tag=six-header&encapsulation=shadow","src/components/six-header/six-header.tsx"],"sourcesContent":["@import 'src/global/component';\n\n$header-height: 3.75rem;\n$border-height: 0.25rem;\n\n:host {\n  display: block;\n  user-select: none;\n  --search-border-width: 1px;\n}\n\n::slotted(six-search-field) {\n  position: absolute;\n  margin-left: var(--search-border-width);\n  width: calc(100% - 2 * var(--search-border-width));\n}\n\n.six-header {\n  display: flex;\n  width: 100%;\n  height: $header-height;\n  background-color: var(--six-header-background-color);\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: var(--six-shadow-medium);\n  border-bottom: var(--six-header-border-with) solid var(--six-header-border-color);\n\n  &__logo {\n    width: 6rem;\n    margin-top: 0.15rem;\n\n    &--clickable {\n      cursor: pointer;\n    }\n  }\n\n  &__placeholder {\n    flex: 1;\n  }\n\n  &__menu,\n  &__logo,\n  &__custom,\n  &__search,\n  &__notification,\n  &__app-switcher,\n  &__profile {\n    height: calc(100% - #{$border-height} - 1px);\n    padding: 0 1.25rem;\n    display: flex;\n    align-items: center;\n    border-bottom: solid $border-height transparent;\n\n    &--open {\n      border-bottom: solid $border-height var(--six-header-border-color-open);\n    }\n  }\n\n  &__app-switcher-dropdown {\n    display: flex;\n    align-items: center;\n  }\n\n  &__selected-app {\n    cursor: pointer;\n    font-size: 0.9rem;\n    font-weight: 600;\n    padding-right: 0;\n    padding-left: 0.3rem;\n    &:hover {\n      color: var(--six-header-selected-app-color-hover);\n    }\n  }\n\n  &__search-field {\n    opacity: 0;\n    transform: scale(0.9);\n    transition: var(--six-transition-fast) opacity, var(--six-transition-fast) transform;\n    display: none;\n\n    &--visible {\n      opacity: 1;\n      transform: none;\n      display: block;\n    }\n\n    &--shift-content.six-header__search-field--visible {\n      height: 2.65rem;\n      transition: var(--six-transition-fast) height;\n    }\n\n    &--shift-content:not(.six-header__search-field--visible) {\n      height: 0;\n      transition: var(--six-transition-fast) height;\n    }\n  }\n}\n","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 whether the hamburger menu should be visible or not */\n  @Prop() hideHamburgerMenu = 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  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.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.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      <section class=\"six-header__menu\">\n        <six-icon-button name={this.openHamburgerMenu ? 'menu_open' : 'menu'} ref={this.setupMenu} />\n      </section>\n    );\n\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        <six-dropdown distance={13} 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      </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          {hamburgerMenu}\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","mappings":";;;;AAAA,MAAM,YAAY,GAAG,oiCAAoiC,CAAC;AAC1jC,wBAAe,YAAY;;MCcdA,WAAS;;;;;QAwBZ,mBAAc,GAAG,IAAI,cAAc,EAAE,CAAC;4BAtBvB,KAAK;0BAOP,KAAK;;IAG1B,sBAAsB;QACpB,IAAI,IAAI,CAAC,UAAU,EAAE;;YAEnB,UAAU,CACR,8BAAY,OAAA,MAAA,MAAA,MAAA,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,cAAc,CAAC,0CAAE,UAAU,0CAAE,aAAa,CAAC,WAAW,CAAC,0CAAE,QAAQ,EAAE,CAAA,EAAA,EAClG,EAAE,CACH,CAAC;SACH;KACF;IAMD,oBAAoB;QAClB,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC;KACjC;IAED,MAAM;QACJ,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QACvC,QACE,EAAC,IAAI,uDACH,+DAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,YAAY,IACtC,8DAAQ,CACD,EACT,4DACE,KAAK,EAAE;gBACL,0BAA0B,EAAE,IAAI;gBAChC,mCAAmC,EAAE,IAAI,CAAC,UAAU;gBACpD,yCAAyC,EAAE,IAAI,CAAC,YAAY;aAC7D,IAED,6DAAM,IAAI,EAAE,cAAc,GAAI,CAC1B,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixHeader"],"sources":["src/components/six-header/six-header.scss?tag=six-header&encapsulation=shadow","src/components/six-header/six-header.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: block;\n  user-select: none;\n  --search-border-width: 1px;\n}\n\n::slotted(six-search-field) {\n  position: absolute;\n  margin-left: var(--search-border-width);\n  width: calc(100% - 2 * var(--search-border-width));\n}\n\n.six-header {\n  display: flex;\n  width: 100%;\n  height: var(--six-header-height);\n  background-color: var(--six-header-background-color);\n  align-items: stretch;\n  box-shadow: var(--six-shadow-medium);\n  border-bottom: var(--six-header-border-with) solid var(--six-header-border-color);\n\n  &__search-field {\n    opacity: 0;\n    transform: scale(0.9);\n    transition: var(--six-transition-fast) opacity, var(--six-transition-fast) transform;\n    display: none;\n\n    &--visible {\n      opacity: 1;\n      transform: none;\n      display: block;\n    }\n\n    &--shift-content.six-header__search-field--visible {\n      height: 2.65rem;\n      transition: var(--six-transition-fast) height;\n    }\n\n    &--shift-content:not(.six-header__search-field--visible) {\n      height: 0;\n      transition: var(--six-transition-fast) height;\n    }\n  }\n}\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { getSlot } from '../../utils/slot';\n\n/**\n * @since 1.0\n * @status stable\n * @slot search-field - Used to define the search field component 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  /** Indicates if content should be shifted down when search field is visible. */\n  @Prop() shiftContent = false;\n\n  /**\n   * Set the header search input to be in an open or closed state.\n   *\n   * Focuses the first `six-input` found in the search slot.\n   */\n  @Prop() openSearch = false;\n\n  @Watch('openSearch')\n  handleOpenSearchChange() {\n    if (this.openSearch) {\n      // deferred due to https://github.com/ionic-team/stencil/issues/3772\n      setTimeout(\n        async () => getSlot(this.host, 'search-field')?.shadowRoot?.querySelector('six-input')?.setFocus(),\n        50\n      );\n    }\n  }\n\n  @Element() host!: HTMLSixHeaderElement;\n\n  private eventListeners = new EventListeners();\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  render() {\n    console.log('render', this.openSearch);\n    return (\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={'search-field'} />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -2,7 +2,8 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 import { f as focusVisible } from './focus-visible.js';
 import { d as defineCustomElement$1 } from './six-icon2.js';
 
-const sixIconButtonCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:inline-block}.icon-button{flex:0 0 auto;display:flex;align-items:center;background:none;border:none;border-radius:var(--six-border-radius-medium);font-size:inherit;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){color:var(--six-input-icon-color-hover)}.icon-button:active:not(.icon-button--disabled){color:var(--six-input-icon-color)}.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;pointer-events:none}.icon-button-wrapper--disabled{cursor:not-allowed}.icon-button ::slotted(six-badge){position:absolute;top:0;right:0;pointer-events:none}.icon-button six-icon[size=xLarge]+::slotted(six-badge){transform:translateY(40%) translateX(-35%)}.icon-button six-icon[size=large]+::slotted(six-badge){transform:translateY(20%) translateX(-20%)}.icon-button six-icon[size=medium]+::slotted(six-badge){transform:translateY(10%) translateX(50%)}.icon-button six-icon[size=xSmall]+::slotted(six-badge){transform:translateY(-25%) translateX(25%)}";
+const sixIconButtonCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:inline-block}.icon-button{flex:0 0 auto;display:flex;align-items:center;background:none;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){color:var(--six-input-icon-color-hover)}.icon-button:active:not(.icon-button--disabled){color:var(--six-input-icon-color)}.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;pointer-events:none}.icon-button-wrapper--disabled{cursor:not-allowed}.icon-button ::slotted(six-badge){position:absolute;top:0;right:0;pointer-events:none}.icon-button six-icon[size=xLarge]+::slotted(six-badge){transform:translateY(40%) translateX(-35%)}.icon-button six-icon[size=large]+::slotted(six-badge){transform:translateY(20%) translateX(-20%)}.icon-button six-icon[size=medium]+::slotted(six-badge){transform:translateY(10%) translateX(50%)}.icon-button six-icon[size=xSmall]+::slotted(six-badge){transform:translateY(-25%) translateX(25%)}";
+const SixIconButtonStyle0 = sixIconButtonCss;
 
 const SixIconButton = /*@__PURE__*/ proxyCustomElement(class SixIconButton extends HTMLElement {
     constructor() {
@@ -20,6 +21,9 @@ const SixIconButton = /*@__PURE__*/ proxyCustomElement(class SixIconButton exten
         this.label = undefined;
         this.disabled = false;
         this.html = undefined;
+        this.href = undefined;
+        this.target = undefined;
+        this.download = undefined;
     }
     componentDidLoad() {
         if (this.button != null) {
@@ -32,19 +36,25 @@ const SixIconButton = /*@__PURE__*/ proxyCustomElement(class SixIconButton exten
         }
     }
     render() {
-        const html = this.html && h("span", { innerHTML: this.html });
-        return (h("div", { onClick: this.handleClickEvent, class: { 'icon-button-wrapper--disabled': this.disabled } }, h("button", { ref: (el) => (this.button = el), part: "base", disabled: this.disabled, class: {
+        const isLink = this.href != null;
+        const isButton = !isLink;
+        const Button = isLink ? 'a' : 'button';
+        const html = this.html && h("span", { key: 'e4d2865734ec84d8ef4d2ed302ecb0376cd16c8c', innerHTML: this.html });
+        return (h("div", { key: 'ec94a7e81ac636a5c72c17d4c18e37a089765d70', onClick: this.handleClickEvent, class: { 'icon-button-wrapper--disabled': this.disabled } }, h(Button, { key: '6d59906ca43e55780e233875132cca469ce470ab', 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: "button", "aria-label": this.label }, h("six-icon", { "aria-hidden": "true", size: this.size }, this.name), h("slot", null), 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: 'c806b6219195a29376322f35094178497e16d4eb', "aria-hidden": "true", size: this.size }, this.name), h("slot", { key: '52715c3b32fe592bddab75ff3378bce2448d24bd' }), html)));
     }
-    static get style() { return sixIconButtonCss; }
+    static get style() { return SixIconButtonStyle0; }
 }, [1, "six-icon-button", {
         "name": [513],
         "size": [513],
         "label": [513],
         "disabled": [516],
-        "html": [513]
+        "html": [513],
+        "href": [1],
+        "target": [1],
+        "download": [1]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

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

@@ -1 +1 @@
-{"file":"six-icon-button2.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,61CAA61C;;MCiBz2C,aAAa;;;;;QA2DhB,qBAAgB,GAAG,CAAC,KAAY;YACtC,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,KAAK,CAAC,eAAe,EAAE,CAAC;aACzB;SACF,CAAC;;oBAzD2G,QAAQ;;wBASjF,KAAK;;;IAKzC,gBAAgB;QACd,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,EAAE;YACvB,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SACnC;KACF;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,EAAE;YACvB,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SACrC;KACF;IAED,MAAM;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,YAAM,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;QAEzD,QACE,WAAK,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAE,EAAE,+BAA+B,EAAE,IAAI,CAAC,QAAQ,EAAE,IAC5F,cACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,EAC/B,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE;gBACL,aAAa,EAAE,IAAI;gBACnB,uBAAuB,EAAE,IAAI,CAAC,QAAQ;aACvC,EACD,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,KAAK,IAEtB,+BAAsB,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IACzC,IAAI,CAAC,IAAI,CACD,EACX,eAAQ,EACP,IAAI,CACE,CACL,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/six-icon-button/six-icon-button.scss?tag=six-icon-button&encapsulation=shadow","src/components/six-icon-button/six-icon-button.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n}\n\n.icon-button {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  background: none;\n  border: none;\n  border-radius: var(--six-border-radius-medium);\n  font-size: inherit;\n  color: var(--six-input-icon-color);\n  padding: var(--six-spacing-x-small);\n  cursor: pointer;\n  transition: var(--six-transition-medium) color;\n  -webkit-appearance: none;\n\n  &:hover:not(.icon-button--disabled),\n  &:focus:not(.icon-button--disabled) {\n    color: var(--six-input-icon-color-hover);\n  }\n\n  &:active:not(.icon-button--disabled) {\n    color: var(--six-input-icon-color);\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: var(--six-focus-ring);\n    outline-offset: var(--six-focus-ring-offset);\n  }\n}\n\n.icon-button--disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.icon-button-wrapper--disabled {\n  cursor: not-allowed;\n}\n\n.icon-button ::slotted(six-badge) {\n  position: absolute;\n  top: 0;\n  right: 0;\n  pointer-events: none;\n}\n\n.icon-button six-icon[size='xLarge'] + ::slotted(six-badge) {\n  transform: translateY(40%) translateX(-35%);\n}\n\n.icon-button six-icon[size='large'] + ::slotted(six-badge) {\n  transform: translateY(20%) translateX(-20%);\n}\n\n// TODO: tx4u9 should be adjusted for all sizes after design team\n.icon-button six-icon[size='medium'] + ::slotted(six-badge) {\n  transform: translateY(10%) translateX(50%);\n}\n\n.icon-button six-icon[size='small'] + ::slotted(six-badge) {\n  //  no translation necessary\n}\n\n.icon-button six-icon[size='xSmall'] + ::slotted(six-badge) {\n  transform: translateY(-25%) translateX(25%);\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\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 * @part base - The component's base wrapper.\n */\n\n@Component({\n  tag: 'six-icon-button',\n  styleUrl: 'six-icon-button.scss',\n  shadow: true,\n})\nexport class SixIconButton {\n  private button?: HTMLButtonElement;\n\n  /** The name of the icon to draw. */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The icon's size. */\n  @Prop({ reflect: true }) size: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' = 'medium';\n\n  /**\n   * A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n   * always include a label that describes what the icon button does.\n   */\n  @Prop({ reflect: true }) label?: string;\n\n  /** Set to true to disable the button. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** HTML symbol code or entity. */\n  @Prop({ reflect: true }) html?: string;\n\n  componentDidLoad() {\n    if (this.button != null) {\n      focusVisible.observe(this.button);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.button != null) {\n      focusVisible.unobserve(this.button);\n    }\n  }\n\n  render() {\n    const html = this.html && <span innerHTML={this.html} />;\n\n    return (\n      <div onClick={this.handleClickEvent} class={{ 'icon-button-wrapper--disabled': this.disabled }}>\n        <button\n          ref={(el) => (this.button = el)}\n          part=\"base\"\n          disabled={this.disabled}\n          class={{\n            'icon-button': true,\n            'icon-button--disabled': this.disabled,\n          }}\n          type=\"button\"\n          aria-label={this.label}\n        >\n          <six-icon aria-hidden=\"true\" size={this.size}>\n            {this.name}\n          </six-icon>\n          <slot />\n          {html}\n        </button>\n      </div>\n    );\n  }\n\n  private handleClickEvent = (event: Event) => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n}\n"],"version":3}
+{"file":"six-icon-button2.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,m0CAAm0C,CAAC;AAC71C,4BAAe,gBAAgB;;MCgBlB,aAAa;;;;;QA4EhB,qBAAgB,GAAG,CAAC,KAAY;YACtC,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,KAAK,CAAC,eAAe,EAAE,CAAC;aACzB;SACF,CAAC;;oBA1E2G,QAAQ;;wBASjF,KAAK;;;;;;IAczC,gBAAgB;QACd,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,EAAE;YACvB,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SACnC;KACF;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,EAAE;YACvB,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SACrC;KACF;IAED,MAAM;QACJ,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC;QACjC,MAAM,QAAQ,GAAG,CAAC,MAAM,CAAC;QACzB,MAAM,MAAM,GAAG,MAAM,GAAG,GAAG,GAAG,QAAQ,CAAC;QACvC,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,6DAAM,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;QAEzD,QACE,4DAAK,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAE,EAAE,+BAA+B,EAAE,IAAI,CAAC,QAAQ,EAAE,IAC5F,EAAC,MAAM,qDACL,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,EAC/B,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAAC,QAAQ,GAAG,SAAS,EAC9C,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,SAAS,EAC1C,KAAK,EAAE;gBACL,aAAa,EAAE,IAAI;gBACnB,uBAAuB,EAAE,IAAI,CAAC,QAAQ;aACvC,EACD,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,gBACzB,IAAI,CAAC,KAAK,EACtB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC,IAAI,GAAG,SAAS,EACpC,MAAM,EAAE,MAAM,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,GAAG,IAAI,CAAC,MAAM,GAAG,SAAS,EAC/D,QAAQ,EAAE,MAAM,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,GAAG,IAAI,CAAC,QAAQ,GAAG,SAAS,EACrE,GAAG,EAAE,MAAM,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,GAAG,qBAAqB,GAAG,SAAS,IAEtE,gFAAsB,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IACzC,IAAI,CAAC,IAAI,CACD,EACX,8DAAQ,EACP,IAAI,CACE,CACL,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/six-icon-button/six-icon-button.scss?tag=six-icon-button&encapsulation=shadow","src/components/six-icon-button/six-icon-button.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n}\n\n.icon-button {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  background: none;\n  border: none;\n  border-radius: var(--six-border-radius-medium);\n  font-size: inherit;\n  text-decoration: none;\n  color: var(--six-input-icon-color);\n  padding: var(--six-spacing-x-small);\n  cursor: pointer;\n  transition: var(--six-transition-medium) color;\n  -webkit-appearance: none;\n\n  &:hover:not(.icon-button--disabled) {\n    color: var(--six-input-icon-color-hover);\n  }\n\n  &:active:not(.icon-button--disabled) {\n    color: var(--six-input-icon-color);\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: var(--six-focus-ring);\n    outline-offset: var(--six-focus-ring-offset);\n  }\n}\n\n.icon-button--disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.icon-button-wrapper--disabled {\n  cursor: not-allowed;\n}\n\n.icon-button ::slotted(six-badge) {\n  position: absolute;\n  top: 0;\n  right: 0;\n  pointer-events: none;\n}\n\n.icon-button six-icon[size='xLarge'] + ::slotted(six-badge) {\n  transform: translateY(40%) translateX(-35%);\n}\n\n.icon-button six-icon[size='large'] + ::slotted(six-badge) {\n  transform: translateY(20%) translateX(-20%);\n}\n\n// TODO: tx4u9 should be adjusted for all sizes after design team\n.icon-button six-icon[size='medium'] + ::slotted(six-badge) {\n  transform: translateY(10%) translateX(50%);\n}\n\n.icon-button six-icon[size='small'] + ::slotted(six-badge) {\n  //  no translation necessary\n}\n\n.icon-button six-icon[size='xSmall'] + ::slotted(six-badge) {\n  transform: translateY(-25%) translateX(25%);\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\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 * @part base - The component's base wrapper.\n */\n\n@Component({\n  tag: 'six-icon-button',\n  styleUrl: 'six-icon-button.scss',\n  shadow: true,\n})\nexport class SixIconButton {\n  private button?: HTMLButtonElement | HTMLAnchorElement;\n\n  /** The name of the icon to draw. */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The icon's size. */\n  @Prop({ reflect: true }) size: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' = 'medium';\n\n  /**\n   * A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n   * always include a label that describes what the icon button does.\n   */\n  @Prop({ reflect: true }) label?: string;\n\n  /** Set to true to disable the button. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** HTML symbol code or entity. */\n  @Prop({ reflect: true }) html?: string;\n\n  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */\n  @Prop() href?: string;\n\n  /** Tells the browser where to open the link. Only used when `href` is set. */\n  @Prop() target?: '_blank' | '_parent' | '_self' | '_top';\n\n  /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */\n  @Prop() download?: string;\n\n  componentDidLoad() {\n    if (this.button != null) {\n      focusVisible.observe(this.button);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.button != null) {\n      focusVisible.unobserve(this.button);\n    }\n  }\n\n  render() {\n    const isLink = this.href != null;\n    const isButton = !isLink;\n    const Button = isLink ? 'a' : 'button';\n    const html = this.html && <span innerHTML={this.html} />;\n\n    return (\n      <div onClick={this.handleClickEvent} class={{ 'icon-button-wrapper--disabled': this.disabled }}>\n        <Button\n          ref={(el) => (this.button = el)}\n          part=\"base\"\n          disabled={isButton ? this.disabled : undefined}\n          tabindex={this.disabled ? '-1' : undefined}\n          class={{\n            'icon-button': true,\n            'icon-button--disabled': this.disabled,\n          }}\n          type={isButton ? 'button' : undefined}\n          aria-label={this.label}\n          href={isLink ? this.href : undefined}\n          target={isLink && this.target != null ? this.target : undefined}\n          download={isLink && this.download != null ? this.download : undefined}\n          rel={isLink && this.target != null ? 'noreferrer noopener' : undefined}\n        >\n          <six-icon aria-hidden=\"true\" size={this.size}>\n            {this.name}\n          </six-icon>\n          <slot />\n          {html}\n        </Button>\n      </div>\n    );\n  }\n\n  private handleClickEvent = (event: Event) => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n}\n"],"version":3}

package/dist/components/six-icon2.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
 const sixIconCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:inline-flex;vertical-align:middle}.material-icons{vertical-align:middle;font-weight:normal;font-style:normal;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:\"liga\";user-select:none}.material-icons-filled{font-family:\"Material Icons\"}.material-icons-outlined{font-family:\"Material Icons Outlined\"}.icon--xsmall{font-size:12px}.icon--small{font-size:18px}.icon--medium{font-size:24px}.icon--large{font-size:36px}.icon--xlarge{font-size:48px}.icon--xxlarge{font-size:72px}.icon--xxxlarge{font-size:96px}.icon--inherit{font-size:1.5em}";
+const SixIconStyle0 = sixIconCss;
 
 const SixIcon = /*@__PURE__*/ proxyCustomElement(class SixIcon extends HTMLElement {
     constructor() {
@@ -11,7 +12,7 @@ const SixIcon = /*@__PURE__*/ proxyCustomElement(class SixIcon extends HTMLEleme
         this.filled = false;
     }
     render() {
-        return (h("i", { class: {
+        return (h("i", { key: 'e3bdaae941279f36be341a6bbf74a16841dbf5c6', class: {
                 'material-icons': true,
                 'material-icons-outlined': !this.filled,
                 'material-icons-filled': this.filled,
@@ -23,9 +24,9 @@ const SixIcon = /*@__PURE__*/ proxyCustomElement(class SixIcon extends HTMLEleme
                 'icon--xxlarge': this.size === 'xxLarge',
                 'icon--xxxlarge': this.size === 'xxxLarge',
                 'icon--inherit': this.size === 'inherit',
-            } }, h("slot", null)));
+            } }, h("slot", { key: 'bd0a678f75920a57c6a15ff29d8e97ba31d12bf1' })));
     }
-    static get style() { return sixIconCss; }
+    static get style() { return SixIconStyle0; }
 }, [1, "six-icon", {
         "size": [513],
         "filled": [4]

package/dist/components/six-icon2.js.map

@@ -1 +1 @@
-{"file":"six-icon2.js","mappings":";;AAAA,MAAM,UAAU,GAAG,2zBAA2zB;;MCcj0B,OAAO;;;;;oBAUD,SAAS;sBAGT,KAAK;;IAEtB,MAAM;QACJ,QACE,SACE,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,IAED,eAAa,CACX,EACJ;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/six-icon/six-icon.scss?tag=six-icon&encapsulation=shadow","src/components/six-icon/six-icon.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-flex;\n  vertical-align: middle;\n}\n\n.material-icons {\n  vertical-align: middle;\n  font-weight: normal;\n  font-style: normal;\n  text-transform: none;\n  letter-spacing: normal;\n  word-wrap: normal;\n  white-space: nowrap;\n  direction: ltr;\n\n  /* Support for all WebKit browsers. */\n  -webkit-font-smoothing: antialiased;\n  /* Support for Safari and Chrome. */\n  text-rendering: optimizeLegibility;\n\n  /* Support for Firefox. */\n  -moz-osx-font-smoothing: grayscale;\n\n  /* Support for IE. */\n  font-feature-settings: 'liga';\n\n  /* Icon name should not be selectable. */\n  user-select: none;\n}\n\n.material-icons-filled {\n  font-family: 'Material Icons';\n}\n\n.material-icons-outlined {\n  font-family: 'Material Icons Outlined';\n}\n\n.icon {\n  &--xsmall {\n    font-size: 12px;\n  }\n\n  &--small {\n    font-size: 18px;\n  }\n\n  &--medium {\n    font-size: 24px;\n  }\n\n  &--large {\n    font-size: 36px;\n  }\n\n  &--xlarge {\n    font-size: 48px;\n  }\n\n  &--xxlarge {\n    font-size: 72px;\n  }\n\n  &--xxxlarge {\n    font-size: 96px;\n  }\n\n  &--inherit {\n    font-size: 1.5em;\n  }\n}\n","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-icon2.js","mappings":";;AAAA,MAAM,UAAU,GAAG,2zBAA2zB,CAAC;AAC/0B,sBAAe,UAAU;;MCaZ,OAAO;;;;;oBAUD,SAAS;sBAGT,KAAK;;IAEtB,MAAM;QACJ,QACE,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,IAED,8DAAa,CACX,EACJ;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/six-icon/six-icon.scss?tag=six-icon&encapsulation=shadow","src/components/six-icon/six-icon.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-flex;\n  vertical-align: middle;\n}\n\n.material-icons {\n  vertical-align: middle;\n  font-weight: normal;\n  font-style: normal;\n  text-transform: none;\n  letter-spacing: normal;\n  word-wrap: normal;\n  white-space: nowrap;\n  direction: ltr;\n\n  /* Support for all WebKit browsers. */\n  -webkit-font-smoothing: antialiased;\n  /* Support for Safari and Chrome. */\n  text-rendering: optimizeLegibility;\n\n  /* Support for Firefox. */\n  -moz-osx-font-smoothing: grayscale;\n\n  /* Support for IE. */\n  font-feature-settings: 'liga';\n\n  /* Icon name should not be selectable. */\n  user-select: none;\n}\n\n.material-icons-filled {\n  font-family: 'Material Icons';\n}\n\n.material-icons-outlined {\n  font-family: 'Material Icons Outlined';\n}\n\n.icon {\n  &--xsmall {\n    font-size: 12px;\n  }\n\n  &--small {\n    font-size: 18px;\n  }\n\n  &--medium {\n    font-size: 24px;\n  }\n\n  &--large {\n    font-size: 36px;\n  }\n\n  &--xlarge {\n    font-size: 48px;\n  }\n\n  &--xxlarge {\n    font-size: 72px;\n  }\n\n  &--xxxlarge {\n    font-size: 96px;\n  }\n\n  &--inherit {\n    font-size: 1.5em;\n  }\n}\n","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}

package/dist/components/six-input2.js

@@ -6,7 +6,8 @@ import { s as submitForm } from './form.js';
 import { d as defineCustomElement$2 } from './six-error2.js';
 import { d as defineCustomElement$1 } from './six-icon2.js';
 
-const sixInputCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none;text-align:left}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:\"*\";transform:scale(1.1);margin-left:var(--six-spacing-xxx-small);position:absolute}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{display:block}.input{display:inline-flex;align-items:stretch;justify-content:start;position:relative;width:100%;font-family:var(--six-font-family);font-weight:var(--six-input-font-weight);letter-spacing:var(--six-input-letter-spacing);background-color:var(--six-input-background-color);border:solid var(--six-border-width) var(--six-input-border-color);vertical-align:middle;overflow:hidden;transition:var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;cursor:text}.input--line{border:none;border-bottom:solid var(--six-border-width) var(--six-input-border-color)}.input:hover:not(.input--disabled){background-color:var(--six-input-background-color-hover);border-color:var(--six-input-border-color-hover)}.input:hover:not(.input--disabled) .input__control{color:var(--six-input-color-hover)}.input:hover.input--dropdown-search{border-color:transparent}.input--dropdown-search{border-color:transparent}.input--dropdown-search.input--focused{border-color:var(--six-input-border-color)}.input.input--focused:not(.input--disabled){background-color:var(--six-input-background-color-focus);border-bottom-color:var(--six-input-border-color-focus);box-shadow:0 1px 0 0 var(--six-input-border-color-focus)}.input.input--focused:not(.input--disabled):not(.input--line){border-color:var(--six-input-border-color-focus);box-shadow:var(--six-input-focus-shadow)}.input.input--focused:not(.input--disabled) .input__control{color:var(--six-input-color-focus)}.input.input--disabled{background-color:var(--six-input-background-color-disabled);border-color:var(--six-input-border-color-disabled);cursor:not-allowed}.input.input--disabled .input__control{color:var(--six-input-color-disabled)}.input.input--disabled .input__control::placeholder{color:var(--six-input-placeholder-color-disabled)}.input.input--invalid:not(.input--disabled):not(.input--focused){border-bottom-color:var(--six-input-border-color-danger)}.input.input--invalid:not(.input--disabled):not(.input--focused):not(.input--line){border-color:var(--six-input-border-color-danger)}.input__control{flex:1 1 auto;font-family:inherit;font-size:inherit;font-weight:inherit;min-width:0;color:var(--six-input-color);border:none;background:none;box-shadow:none;padding:0;margin:0;cursor:inherit;-webkit-appearance:none}.input__control::-webkit-search-decoration,.input__control::-webkit-search-cancel-button,.input__control::-webkit-search-results-button,.input__control::-webkit-search-results-decoration{-webkit-appearance:none}.input__control:-webkit-autofill,.input__control:-webkit-autofill:hover,.input__control:-webkit-autofill:focus,.input__control:-webkit-autofill:active{box-shadow:0 0 0 var(--six-height-large) var(--six-input-background-color-hover) inset !important;-webkit-text-fill-color:var(--six-color-primary-500)}.input__control::placeholder{color:var(--six-input-placeholder-color);user-select:none}.input__control:focus{outline:none}.input__control::-ms-reveal{display:none}.input__prefix,.input__suffix{display:inline-flex;flex:0 0 auto;align-items:center;cursor:default}.input__prefix ::slotted(six-icon),.input__suffix ::slotted(six-icon){color:var(--six-input-icon-color)}.input.input--disabled ::slotted(six-icon){cursor:not-allowed}.input--small{border-radius:var(--six-input-border-radius-small);font-size:var(--six-input-font-size-small);height:var(--six-height-small)}.input--small .input__control{height:calc(var(--six-height-small) - var(--six-border-width) * 2);margin:0 var(--six-input-spacing-small)}.input--small .input__control__prefix{margin:0 var(--six-input-prefix-spacing-small)}.input--small .input__clear,.input--small .input__password-toggle{margin-right:var(--six-input-spacing-small)}.input--small .input__prefix ::slotted(*){margin-left:var(--six-input-prefix-spacing-small)}.input--small .input__suffix ::slotted(*){margin-right:var(--six-input-prefix-spacing-small)}.input--medium{border-radius:var(--six-input-border-radius-medium);font-size:var(--six-input-font-size-medium);height:var(--six-height-medium)}.input--medium .input__control{height:calc(var(--six-height-medium) - var(--six-border-width) * 2);margin:0 var(--six-input-spacing-medium)}.input--medium .input__control__prefix{margin:0 var(--six-input-prefix-spacing-medium)}.input--medium .input__clear,.input--medium .input__password-toggle{margin-right:var(--six-input-spacing-medium)}.input--medium .input__prefix ::slotted(*){margin-left:var(--six-input-prefix-spacing-medium)}.input--medium .input__suffix ::slotted(*){margin-right:var(--six-input-prefix-spacing-medium)}.input--large{border-radius:var(--six-input-border-radius-large);font-size:var(--six-input-font-size-large);height:var(--six-height-large)}.input--large .input__control{height:calc(var(--six-height-large) - var(--six-border-width) * 2);margin:0 var(--six-input-spacing-large)}.input--large .input__control__prefix{margin:0 var(--six-input-prefix-spacing-large)}.input--large .input__clear,.input--large .input__password-toggle{margin-right:var(--six-input-spacing-large)}.input--large .input__prefix ::slotted(*){margin-left:var(--six-input-prefix-spacing-large)}.input--large .input__suffix ::slotted(*){margin-right:var(--six-input-prefix-spacing-large)}.input--pill.input--small{border-radius:var(--six-height-small)}.input--pill.input--medium{border-radius:var(--six-height-medium)}.input--pill.input--large{border-radius:var(--six-height-large)}.input__clear,.input__password-toggle{display:inline-flex;align-items:center;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;padding:0;transition:var(--six-transition-fast) color;cursor:pointer}.input__clear:hover,.input__password-toggle:hover{color:var(--six-input-icon-color-hover)}.input__clear:focus,.input__password-toggle:focus{outline:none}.input--empty .input__clear{visibility:hidden}";
+const sixInputCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none;text-align:left}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:\"*\";transform:scale(1.1);margin-left:var(--six-spacing-xxx-small);position:absolute}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{display:block}.input{display:inline-flex;align-items:stretch;justify-content:start;position:relative;width:100%;font-family:var(--six-font-family);font-weight:var(--six-input-font-weight);letter-spacing:var(--six-input-letter-spacing);background-color:var(--six-input-background-color);border:solid var(--six-border-width) var(--six-input-border-color);vertical-align:middle;overflow:hidden;transition:var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;cursor:text}.input--line{border:none;border-bottom:solid var(--six-border-width) var(--six-input-border-color)}.input:hover:not(.input--disabled){background-color:var(--six-input-background-color-hover);border-color:var(--six-input-border-color-hover)}.input:hover:not(.input--disabled) .input__control{color:var(--six-input-color-hover)}.input:hover.input--dropdown-search{border-color:transparent}.input--dropdown-search{border-color:transparent}.input--dropdown-search.input--focused{border-color:var(--six-input-border-color)}.input.input--focused:not(.input--disabled){background-color:var(--six-input-background-color-focus);border-bottom-color:var(--six-input-border-color-focus);box-shadow:0 1px 0 0 var(--six-input-border-color-focus)}.input.input--focused:not(.input--disabled):not(.input--line){border-color:var(--six-input-border-color-focus);box-shadow:var(--six-input-focus-shadow)}.input.input--focused:not(.input--disabled) .input__control{color:var(--six-input-color-focus)}.input.input--disabled{background-color:var(--six-input-background-color-disabled);border-color:var(--six-input-border-color-disabled);cursor:not-allowed}.input.input--disabled .input__control{color:var(--six-input-color-disabled)}.input.input--disabled .input__control::placeholder{color:var(--six-input-placeholder-color-disabled)}.input.input--invalid:not(.input--disabled):not(.input--focused){border-bottom-color:var(--six-input-border-color-danger)}.input.input--invalid:not(.input--disabled):not(.input--focused):not(.input--line){border-color:var(--six-input-border-color-danger)}.input__control{flex:1 1 auto;width:100%;font-family:inherit;font-size:inherit;font-weight:inherit;min-width:0;color:var(--six-input-color);border:none;background:none;box-shadow:none;padding:0;margin:0;cursor:inherit;-webkit-appearance:none}.input__control::-webkit-search-decoration,.input__control::-webkit-search-cancel-button,.input__control::-webkit-search-results-button,.input__control::-webkit-search-results-decoration{-webkit-appearance:none}.input__control:-webkit-autofill,.input__control:-webkit-autofill:hover,.input__control:-webkit-autofill:focus,.input__control:-webkit-autofill:active{box-shadow:0 0 0 var(--six-height-large) var(--six-input-background-color-hover) inset !important;-webkit-text-fill-color:var(--six-color-primary-500)}.input__control::placeholder{color:var(--six-input-placeholder-color);user-select:none}.input__control:focus{outline:none}.input__control::-ms-reveal{display:none}.input__prefix,.input__suffix{display:inline-flex;flex:0 0 auto;align-items:center;cursor:default}.input__prefix ::slotted(six-icon),.input__suffix ::slotted(six-icon){color:var(--six-input-icon-color)}.input.input--disabled ::slotted(six-icon){cursor:not-allowed}.input--small{border-radius:var(--six-input-border-radius-small);font-size:var(--six-input-font-size-small);height:var(--six-height-small)}.input--small .input__control{height:calc(var(--six-height-small) - var(--six-border-width) * 2);margin:0 var(--six-input-spacing-small)}.input--small .input__control__prefix{margin:0 var(--six-input-prefix-spacing-small)}.input--small .input__clear,.input--small .input__password-toggle{margin-right:var(--six-input-spacing-small)}.input--small .input__prefix ::slotted(*){margin-left:var(--six-input-prefix-spacing-small)}.input--small .input__suffix ::slotted(*){margin-right:var(--six-input-prefix-spacing-small)}.input--medium{border-radius:var(--six-input-border-radius-medium);font-size:var(--six-input-font-size-medium);height:var(--six-height-medium)}.input--medium .input__control{height:calc(var(--six-height-medium) - var(--six-border-width) * 2);margin:0 var(--six-input-spacing-medium)}.input--medium .input__control__prefix{margin:0 var(--six-input-prefix-spacing-medium)}.input--medium .input__clear,.input--medium .input__password-toggle{margin-right:var(--six-input-spacing-medium)}.input--medium .input__prefix ::slotted(*){margin-left:var(--six-input-prefix-spacing-medium)}.input--medium .input__suffix ::slotted(*){margin-right:var(--six-input-prefix-spacing-medium)}.input--large{border-radius:var(--six-input-border-radius-large);font-size:var(--six-input-font-size-large);height:var(--six-height-large)}.input--large .input__control{height:calc(var(--six-height-large) - var(--six-border-width) * 2);margin:0 var(--six-input-spacing-large)}.input--large .input__control__prefix{margin:0 var(--six-input-prefix-spacing-large)}.input--large .input__clear,.input--large .input__password-toggle{margin-right:var(--six-input-spacing-large)}.input--large .input__prefix ::slotted(*){margin-left:var(--six-input-prefix-spacing-large)}.input--large .input__suffix ::slotted(*){margin-right:var(--six-input-prefix-spacing-large)}.input--pill.input--small{border-radius:var(--six-height-small)}.input--pill.input--medium{border-radius:var(--six-height-medium)}.input--pill.input--large{border-radius:var(--six-height-large)}.input__clear,.input__password-toggle{display:inline-flex;align-items:center;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;padding:0;transition:var(--six-transition-fast) color;cursor:pointer}.input__clear:hover,.input__password-toggle:hover{color:var(--six-input-icon-color-hover)}.input__clear:focus,.input__password-toggle:focus{outline:none}.input--empty .input__clear{visibility:hidden}";
+const SixInputStyle0 = sixInputCss;
 
 const ICON_SIZES = {
     large: 'medium',
@@ -160,6 +161,15 @@ const SixInput = /*@__PURE__*/ proxyCustomElement(class SixInput extends HTMLEle
         var _a;
         return (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.setSelectionRange(selectionStart, selectionEnd, selectionDirection);
     }
+    /** Returns the start and end positions of the text selection */
+    async getSelectionRange() {
+        var _a, _b, _c, _d, _e, _f;
+        return {
+            selectionStart: (_b = (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.selectionStart) !== null && _b !== void 0 ? _b : undefined,
+            selectionEnd: (_d = (_c = this.nativeInput) === null || _c === void 0 ? void 0 : _c.selectionEnd) !== null && _d !== void 0 ? _d : undefined,
+            selectionDirection: (_f = (_e = this.nativeInput) === null || _e === void 0 ? void 0 : _e.selectionDirection) !== null && _f !== void 0 ? _f : undefined,
+        };
+    }
     /** Replaces a range of text with a new string. */
     async setRangeText(replacement, start, end, selectMode = 'preserve') {
         if (this.nativeInput == null) {
@@ -177,7 +187,7 @@ const SixInput = /*@__PURE__*/ proxyCustomElement(class SixInput extends HTMLEle
         return ((_a = this.value) !== null && _a !== void 0 ? _a : '').toString();
     }
     render() {
-        return (h(FormControl, { inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, hasErrorTextSlot: this.hasErrorSlot, size: this.size, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { part: "base", class: {
+        return (h(FormControl, { key: '1f83d29348f0e7d6f222ea65edbcb8edeffec7b6', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, hasErrorTextSlot: this.hasErrorSlot, size: this.size, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { key: 'e32803aaae148cc812a878b1d81d1bfc6b69ce0b', part: "base", class: {
                 input: true,
                 // Sizes
                 'input--small': this.size === 'small',
@@ -191,10 +201,10 @@ const SixInput = /*@__PURE__*/ proxyCustomElement(class SixInput extends HTMLEle
                 'input--focused': this.hasFocus,
                 'input--empty': this.getValue().length === 0,
                 'input--invalid': this.invalid,
-            } }, h("span", { part: "prefix", class: "input__prefix" }, h("slot", { name: "prefix" })), h("input", { part: "input", ref: (el) => (this.nativeInput = el), id: this.inputId, size: 1, class: {
+            } }, h("span", { key: '1ffd77fa04b099f6d11d7ff42a38e81fe9e0e8bd', part: "prefix", class: "input__prefix" }, h("slot", { key: '0dd1662a13ed56339ab80d30e4a15220505b313f', name: "prefix" })), h("input", { key: 'df640447fd6d827c13357a0fcb019bf58a29d762', part: "input", ref: (el) => (this.nativeInput = el), id: this.inputId, size: 1, class: {
                 input__control: true,
                 input__control__prefix: hasSlot(this.host, 'prefix'),
-            }, type: this.type === 'password' && this.isPasswordVisible ? 'text' : this.type, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, minLength: this.minlength, maxLength: this.maxlength, min: this.min, max: this.max, step: this.step, value: this.getValue(), autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, spellcheck: this.spellcheck, pattern: this.pattern, required: this.required, inputMode: this.inputmode, "aria-labelledby": this.labelId, "aria-describedby": this.helpTextId, "aria-invalid": this.invalid ? 'true' : 'false', onChange: this.handleChange, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, "data-testid": "input-control" }), this.clearable && (h("button", { part: "clear-button", class: "input__clear", type: "button", onClick: this.handleClearClick, tabindex: "-1", "data-testid": "input-clear-button" }, h("slot", { name: "clear-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "clear")))), this.togglePassword && (h("button", { part: "password-toggle-button", class: "input__password-toggle", type: "button", onClick: this.handlePasswordToggle, tabindex: "-1" }, this.isPasswordVisible ? (h("slot", { name: "show-password-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "visibility_off"))) : (h("slot", { name: "hide-password-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "visibility"))))), h("span", { part: "suffix", class: "input__suffix" }, h("slot", { name: "suffix" })))));
+            }, type: this.type === 'password' && this.isPasswordVisible ? 'text' : this.type, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, minLength: this.minlength, maxLength: this.maxlength, min: this.min, max: this.max, step: this.step, value: this.getValue(), autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, spellcheck: this.spellcheck, pattern: this.pattern, required: this.required, inputMode: this.inputmode, "aria-labelledby": this.labelId, "aria-describedby": this.helpTextId, "aria-invalid": this.invalid ? 'true' : 'false', onChange: this.handleChange, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, "data-testid": "input-control" }), this.clearable && !this.disabled && (h("button", { key: '62dea603fa403fa7e2d4bede051bf8fd7729205c', part: "clear-button", class: "input__clear", type: "button", onClick: this.handleClearClick, tabindex: "-1", "data-testid": "input-clear-button" }, h("slot", { key: '37a8959a6f2220ef64138433c5250ffb1ab4c506', name: "clear-icon" }, h("six-icon", { key: '014d8ef91583c5bfdf5b1a73b45849f4ea1b7ca1', size: ICON_SIZES[this.size] }, "clear")))), this.togglePassword && (h("button", { key: '7b661dd8845d70926dee7dda641df06a4b52bca9', part: "password-toggle-button", class: "input__password-toggle", type: "button", onClick: this.handlePasswordToggle, tabindex: "-1" }, this.isPasswordVisible ? (h("slot", { name: "show-password-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "visibility_off"))) : (h("slot", { name: "hide-password-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "visibility"))))), h("span", { key: '6d5527eb56cf18fc98536b83d460337b6253a55f', part: "suffix", class: "input__suffix" }, h("slot", { key: 'a387844a04729e6caa3cf9ccf85cd0958f8c795b', name: "suffix" })))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -203,7 +213,7 @@ const SixInput = /*@__PURE__*/ proxyCustomElement(class SixInput extends HTMLEle
         "label": ["handleLabelChange"],
         "value": ["handleValueChange"]
     }; }
-    static get style() { return sixInputCss; }
+    static get style() { return SixInputStyle0; }
 }, [1, "six-input", {
         "type": [513],
         "size": [513],
@@ -244,6 +254,7 @@ const SixInput = /*@__PURE__*/ proxyCustomElement(class SixInput extends HTMLEle
         "removeFocus": [64],
         "select": [64],
         "setSelectionRange": [64],
+        "getSelectionRange": [64],
         "setRangeText": [64]
     }, undefined, {
         "helpText": ["handleLabelChange"],