@six-group/ui-library 3.0.0-beta.1.7 → 3.0.0-beta.1.8

package/dist/cjs/six-header.cjs.entry.js

@@ -3,158 +3,158 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-341df120.js');
-const eventListeners = require('./event-listeners-4a8d66d5.js');
-const slot = require('./slot-8abe833c.js');
+const eventListeners = require('./event-listeners-74715e62.js');
+const slot = require('./slot-ad537f24.js');
 
 const sixHeaderCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}: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-x-large);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__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}";
 
-var Section;
-(function (Section) {
-  Section[Section["None"] = 0] = "None";
-  Section[Section["Search"] = 1] = "Search";
-  Section[Section["Notifications"] = 2] = "Notifications";
-  Section[Section["AppSwitcher"] = 3] = "AppSwitcher";
-  Section[Section["Profile"] = 4] = "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 getSlots = slot.getAvailableSlots(Slot);
-let SixHeader = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.sixAppNameClicked = index.createEvent(this, "six-header-app-name-clicked", 7);
-    this.sixAppSwitcherSelect = index.createEvent(this, "six-header-app-switcher-select", 7);
-    this.sixProfileSelect = index.createEvent(this, "six-header-profile-select", 7);
-    this.sixHamburgerClick = index.createEvent(this, "six-header-hamburger-menu-clicked", 7);
-    this.sixLogoClick = index.createEvent(this, "six-header-logo-clicked", 7);
-    this.sixSearchFieldToggle = index.createEvent(this, "six-header-search-field-toggle", 7);
-    /** Indicates if content should be shifted down when search field is visible. */
-    this.shiftContent = false;
-    /** Set the hamburger menu icon to open or closed state */
-    this.openHamburgerMenu = false;
-    /** Set the header search to be in an open or closed state */
-    this.openSearch = false;
-    /** Set whether the logo should be clickable */
-    this.clickableLogo = false;
-    this.eventListeners = new eventListeners.EventListeners();
-    this.has = (slot) => this.slots[slot];
-    this.selected = (value) => value === this.selectedSection;
-    this.select = (value) => () => {
-      this.selectedSection = value;
-    };
-    this.toggleSearch = (value) => () => {
-      var _a;
-      if (value === Section.Search) {
-        const visible = this.selectedSection !== value;
-        if (visible) {
-          (_a = this.host.querySelector(`[slot="${Slot.Search}"]`).shadowRoot.querySelector('six-input')) === null || _a === void 0 ? void 0 : _a.setFocus();
-        }
-        this.sixSearchFieldToggle.emit({ visible });
-      }
-      this.selectedSection = this.selectedSection === value ? Section.None : value;
-    };
-    this.setupMenu = (el) => {
-      this.eventListeners.add(el, 'click', () => this.sixHamburgerClick.emit());
-    };
-    this.setupLogo = (el) => {
-      if (!this.clickableLogo) {
-        return;
-      }
-      this.eventListeners.add(el, 'click', () => this.sixLogoClick.emit());
-    };
-    this.setupProfile = (el) => {
-      this.eventListeners.add(el, 'six-dropdown-show', this.select(Section.Profile));
-      this.eventListeners.add(el, 'six-dropdown-hide', this.select(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) => {
-      this.eventListeners.add(el, 'six-dropdown-show', this.select(Section.AppSwitcher));
-      this.eventListeners.add(el, 'six-dropdown-hide', this.select(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;
-    };
-  }
-  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;
-  }
-  componentWillLoad() {
-    this.slots = getSlots(this.host);
-    if (this.has(Slot.AppSwitcher)) {
-      this.selectedApp = this.getSelectedApp();
-    }
-    if (this.has(Slot.Search)) {
-      this.computeSearchOpenState();
-    }
-  }
-  getSelectedApp() {
-    // there are more concise ways to select the first checked menu item, but this is one that works for jest
-    const element = this.host.querySelector(`[slot="${Slot.AppSwitcher}"]`);
-    const items = Array.from(element.querySelectorAll('six-menu-item'));
-    const firstCheckedMenuItem = items.find((item) => item.hasAttribute('checked'));
-    return firstCheckedMenuItem === null || firstCheckedMenuItem === void 0 ? void 0 : firstCheckedMenuItem.textContent;
-  }
-  disconnectedCallback() {
-    this.eventListeners.removeAll();
-  }
-  render() {
-    const search = this.has(Slot.Search) && (index.h("section", { class: {
-        'six-header__search': true,
-        'six-header__search--open': this.selected(Section.Search),
-      } }, index.h("six-icon-button", { name: "search", onClick: this.toggleSearch(Section.Search), "data-testid": "search-trigger" })));
-    const notifications = this.has(Slot.Notifications) && (index.h("section", { class: "six-header__notification" }, index.h("slot", { name: Slot.Notifications })));
-    const appSwitcher = this.has(Slot.AppSwitcher) && (index.h("section", { class: {
-        'six-header__app-switcher': true,
-        'six-header__app-switcher--open': this.selected(Section.AppSwitcher),
-      } }, index.h("a", { onClick: this.appNameClicked, class: "six-header__selected-app" }, this.selectedApp), index.h("six-dropdown", { distance: 13, skidding: 20, placement: "bottom-end", ref: this.setupAppSwitcher }, index.h("six-icon-button", { name: "apps", slot: "trigger" }), index.h("slot", { name: Slot.AppSwitcher }))));
-    const profile = this.has(Slot.Profile) && (index.h("section", { class: {
-        'six-header__profile': true,
-        'six-header__profile--open': this.selected(Section.Profile),
-      } }, index.h("six-dropdown", { distance: 17, skidding: 20, placement: "bottom-end", ref: this.setupProfile }, index.h("slot", { name: "profile-avatar", slot: "trigger" }), index.h("slot", { name: "profile-menu" }))));
-    const logo = this.has(Slot.Logo) ? (index.h("section", null, index.h("slot", { name: "logo" }))) : (index.h("section", { class: {
-        'six-header__logo': true,
-        'six-header__logo--clickable': this.clickableLogo,
-      }, ref: this.setupLogo }, index.h("img", { src: index.getAssetPath(`./assets/six-logo.svg`), height: "20", alt: "SIX" })));
-    return (index.h(index.Host, null, index.h("header", { class: "six-header" }, index.h("section", { class: "six-header__menu" }, index.h("six-icon-button", { name: this.openHamburgerMenu ? 'menu_open' : 'menu', ref: this.setupMenu })), logo, index.h("section", { class: "six-header__placeholder" }), index.h("section", { class: "six-header__custom" }, index.h("slot", null)), search, notifications, appSwitcher, profile), index.h("div", { class: {
-        'six-header__search-field': true,
-        'six-header__search-field--visible': this.selected(Section.Search),
-        'six-header__search-field--shift-content': this.shiftContent,
-      } }, index.h("slot", { name: Slot.Search }))));
-  }
-  static get assetsDirs() { return ["assets"]; }
-  get host() { return index.getElement(this); }
-  static get watchers() { return {
-    "openSearch": ["handleOpenSearchChange"]
-  }; }
-};
+var Section;
+(function (Section) {
+  Section[Section["None"] = 0] = "None";
+  Section[Section["Search"] = 1] = "Search";
+  Section[Section["Notifications"] = 2] = "Notifications";
+  Section[Section["AppSwitcher"] = 3] = "AppSwitcher";
+  Section[Section["Profile"] = 4] = "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 getSlots = slot.getAvailableSlots(Slot);
+let SixHeader = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.sixAppNameClicked = index.createEvent(this, "six-header-app-name-clicked", 7);
+    this.sixAppSwitcherSelect = index.createEvent(this, "six-header-app-switcher-select", 7);
+    this.sixProfileSelect = index.createEvent(this, "six-header-profile-select", 7);
+    this.sixHamburgerClick = index.createEvent(this, "six-header-hamburger-menu-clicked", 7);
+    this.sixLogoClick = index.createEvent(this, "six-header-logo-clicked", 7);
+    this.sixSearchFieldToggle = index.createEvent(this, "six-header-search-field-toggle", 7);
+    /** Indicates if content should be shifted down when search field is visible. */
+    this.shiftContent = false;
+    /** Set the hamburger menu icon to open or closed state */
+    this.openHamburgerMenu = false;
+    /** Set the header search to be in an open or closed state */
+    this.openSearch = false;
+    /** Set whether the logo should be clickable */
+    this.clickableLogo = false;
+    this.eventListeners = new eventListeners.EventListeners();
+    this.has = (slot) => this.slots[slot];
+    this.selected = (value) => value === this.selectedSection;
+    this.select = (value) => () => {
+      this.selectedSection = value;
+    };
+    this.toggleSearch = (value) => () => {
+      var _a;
+      if (value === Section.Search) {
+        const visible = this.selectedSection !== value;
+        if (visible) {
+          (_a = this.host.querySelector(`[slot="${Slot.Search}"]`).shadowRoot.querySelector('six-input')) === null || _a === void 0 ? void 0 : _a.setFocus();
+        }
+        this.sixSearchFieldToggle.emit({ visible });
+      }
+      this.selectedSection = this.selectedSection === value ? Section.None : value;
+    };
+    this.setupMenu = (el) => {
+      this.eventListeners.add(el, 'click', () => this.sixHamburgerClick.emit());
+    };
+    this.setupLogo = (el) => {
+      if (!this.clickableLogo) {
+        return;
+      }
+      this.eventListeners.add(el, 'click', () => this.sixLogoClick.emit());
+    };
+    this.setupProfile = (el) => {
+      this.eventListeners.add(el, 'six-dropdown-show', this.select(Section.Profile));
+      this.eventListeners.add(el, 'six-dropdown-hide', this.select(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) => {
+      this.eventListeners.add(el, 'six-dropdown-show', this.select(Section.AppSwitcher));
+      this.eventListeners.add(el, 'six-dropdown-hide', this.select(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;
+    };
+  }
+  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;
+  }
+  componentWillLoad() {
+    this.slots = getSlots(this.host);
+    if (this.has(Slot.AppSwitcher)) {
+      this.selectedApp = this.getSelectedApp();
+    }
+    if (this.has(Slot.Search)) {
+      this.computeSearchOpenState();
+    }
+  }
+  getSelectedApp() {
+    // there are more concise ways to select the first checked menu item, but this is one that works for jest
+    const element = this.host.querySelector(`[slot="${Slot.AppSwitcher}"]`);
+    const items = Array.from(element.querySelectorAll('six-menu-item'));
+    const firstCheckedMenuItem = items.find((item) => item.hasAttribute('checked'));
+    return firstCheckedMenuItem === null || firstCheckedMenuItem === void 0 ? void 0 : firstCheckedMenuItem.textContent;
+  }
+  disconnectedCallback() {
+    this.eventListeners.removeAll();
+  }
+  render() {
+    const search = this.has(Slot.Search) && (index.h("section", { class: {
+        'six-header__search': true,
+        'six-header__search--open': this.selected(Section.Search),
+      } }, index.h("six-icon-button", { name: "search", onClick: this.toggleSearch(Section.Search), "data-testid": "search-trigger" })));
+    const notifications = this.has(Slot.Notifications) && (index.h("section", { class: "six-header__notification" }, index.h("slot", { name: Slot.Notifications })));
+    const appSwitcher = this.has(Slot.AppSwitcher) && (index.h("section", { class: {
+        'six-header__app-switcher': true,
+        'six-header__app-switcher--open': this.selected(Section.AppSwitcher),
+      } }, index.h("a", { onClick: this.appNameClicked, class: "six-header__selected-app" }, this.selectedApp), index.h("six-dropdown", { distance: 13, skidding: 20, placement: "bottom-end", ref: this.setupAppSwitcher }, index.h("six-icon-button", { name: "apps", slot: "trigger" }), index.h("slot", { name: Slot.AppSwitcher }))));
+    const profile = this.has(Slot.Profile) && (index.h("section", { class: {
+        'six-header__profile': true,
+        'six-header__profile--open': this.selected(Section.Profile),
+      } }, index.h("six-dropdown", { distance: 17, skidding: 20, placement: "bottom-end", ref: this.setupProfile }, index.h("slot", { name: "profile-avatar", slot: "trigger" }), index.h("slot", { name: "profile-menu" }))));
+    const logo = this.has(Slot.Logo) ? (index.h("section", null, index.h("slot", { name: "logo" }))) : (index.h("section", { class: {
+        'six-header__logo': true,
+        'six-header__logo--clickable': this.clickableLogo,
+      }, ref: this.setupLogo }, index.h("img", { src: index.getAssetPath(`./assets/six-logo.svg`), height: "20", alt: "SIX" })));
+    return (index.h(index.Host, null, index.h("header", { class: "six-header" }, index.h("section", { class: "six-header__menu" }, index.h("six-icon-button", { name: this.openHamburgerMenu ? 'menu_open' : 'menu', ref: this.setupMenu })), logo, index.h("section", { class: "six-header__placeholder" }), index.h("section", { class: "six-header__custom" }, index.h("slot", null)), search, notifications, appSwitcher, profile), index.h("div", { class: {
+        'six-header__search-field': true,
+        'six-header__search-field--visible': this.selected(Section.Search),
+        'six-header__search-field--shift-content': this.shiftContent,
+      } }, index.h("slot", { name: Slot.Search }))));
+  }
+  static get assetsDirs() { return ["assets"]; }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "openSearch": ["handleOpenSearchChange"]
+  }; }
+};
 SixHeader.style = sixHeaderCss;
 
 exports.six_header = SixHeader;

package/dist/cjs/six-icon-button.cjs.entry.js

@@ -3,42 +3,42 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-341df120.js');
-const focusVisible = require('./focus-visible-b08d956f.js');
+const focusVisible = require('./focus-visible-0b352c74.js');
 
 const sixIconButtonCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}: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--disabled{opacity:0.5;pointer-events:none}.icon-button-wrapper--disabled{cursor:not-allowed}.focus-visible.icon-button:focus{box-shadow:var(--six-button-focus-shadow)}.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%)}";
 
-let SixIconButton = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /** The icon's size. */
-    this.size = 'medium';
-    /** Set to true to disable the button. */
-    this.disabled = false;
-    this.handleClickEvent = (event) => {
-      if (this.disabled) {
-        event.preventDefault();
-        event.stopPropagation();
-      }
-    };
-  }
-  componentDidLoad() {
-    if (this.button) {
-      focusVisible.focusVisible.observe(this.button);
-    }
-  }
-  disconnectedCallback() {
-    if (this.button) {
-      focusVisible.focusVisible.unobserve(this.button);
-    }
-  }
-  render() {
-    const html = this.html && index.h("span", { innerHTML: this.html });
-    return (index.h("div", { onClick: this.handleClickEvent, class: { 'icon-button-wrapper--disabled': this.disabled } }, index.h("button", { ref: (el) => (this.button = el), part: "base", disabled: this.disabled, class: {
-        'icon-button': true,
-        'icon-button--disabled': this.disabled,
-      }, type: "button", "aria-label": this.label }, index.h("six-icon", { "aria-hidden": "true", size: this.size }, this.name), index.h("slot", null), html)));
-  }
-};
+let SixIconButton = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** The icon's size. */
+    this.size = 'medium';
+    /** Set to true to disable the button. */
+    this.disabled = false;
+    this.handleClickEvent = (event) => {
+      if (this.disabled) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    };
+  }
+  componentDidLoad() {
+    if (this.button) {
+      focusVisible.focusVisible.observe(this.button);
+    }
+  }
+  disconnectedCallback() {
+    if (this.button) {
+      focusVisible.focusVisible.unobserve(this.button);
+    }
+  }
+  render() {
+    const html = this.html && index.h("span", { innerHTML: this.html });
+    return (index.h("div", { onClick: this.handleClickEvent, class: { 'icon-button-wrapper--disabled': this.disabled } }, index.h("button", { ref: (el) => (this.button = el), part: "base", disabled: this.disabled, class: {
+        'icon-button': true,
+        'icon-button--disabled': this.disabled,
+      }, type: "button", "aria-label": this.label }, index.h("six-icon", { "aria-hidden": "true", size: this.size }, this.name), index.h("slot", null), html)));
+  }
+};
 SixIconButton.style = sixIconButtonCss;
 
 exports.six_icon_button = SixIconButton;

package/dist/cjs/six-icon.cjs.entry.js

@@ -6,30 +6,30 @@ const index = require('./index-341df120.js');
 
 const sixIconCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline}.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\"}.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}";
 
-let SixIcon = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /** The icon's size. */
-    this.size = 'inherit';
-    /** If set to true the default material outlined icons are not used. */
-    this.filled = false;
-  }
-  render() {
-    return (index.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',
-      } }, index.h("slot", null)));
-  }
-};
+let SixIcon = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** The icon's size. */
+    this.size = 'inherit';
+    /** If set to true the default material outlined icons are not used. */
+    this.filled = false;
+  }
+  render() {
+    return (index.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',
+      } }, index.h("slot", null)));
+  }
+};
 SixIcon.style = sixIconCss;
 
 exports.six_icon = SixIcon;