@siemens/ix 1.0.0-beta.2

package/dist/components/ix-animated-tabs.js

@@ -0,0 +1,229 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { a as anime } from './anime.es.js';
+import { A as Animation } from './animation.js';
+import { c as convertToAbbreviationString } from './rwd.util.js';
+import { d as defineCustomElement$2 } from './icon.js';
+
+const animatedTabsCss = ".sc-ix-animated-tabs-h{--animate-duration:300ms;display:flex;flex-direction:column;align-items:center;height:100%;width:100%;position:relative}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs{display:flex;padding:0;margin:0;position:relative}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs{display:flex;justify-content:center;width:5rem;height:4.5rem;cursor:pointer;padding-top:0.625rem}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.bottom.sc-ix-animated-tabs{padding-top:0.875rem}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs{background:var(--theme-animated-tab-circle--background);border:solid 1px var(--theme-animated-tab-circle--border-color);display:flex;align-items:center;justify-content:center;border-radius:6.25rem;width:3rem;height:3rem;position:relative;transition:150ms}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs ix-icon.sc-ix-animated-tabs{color:var(--theme-animated-tab-icon--color) !important}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs:not(.disabled):not(:disabled):hover{background:var(--theme-animated-tab-circle--background--hover);border-color:var(--theme-animated-tab-circle--border-color--hover)}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs:not(.disabled):not(:disabled):hover ix-icon.sc-ix-animated-tabs{color:var(--theme-animated-tab-icon--color--hover) !important}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs:not(.disabled):not(:disabled):active{background:var(--theme-animated-tab-circle--background--active);border-color:var(--theme-animated-tab-circle--border-color--active)}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs:not(.disabled):not(:disabled):active ix-icon.sc-ix-animated-tabs{color:var(--theme-animated-tab-icon--color--active) !important}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.selected.sc-ix-animated-tabs{background:var(--theme-animated-tab-circle--background--selected);border-color:var(--theme-animated-tab-circle--border-color--selected) !important}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.selected.sc-ix-animated-tabs ix-icon.sc-ix-animated-tabs{color:var(--theme-animated-tab-icon--color--selected) !important}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.selected.sc-ix-animated-tabs .count.sc-ix-animated-tabs{border-color:var(--theme-tab-pill--border-color--selected) !important}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.disabled.sc-ix-animated-tabs ix-icon.sc-ix-animated-tabs,.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs:disabled ix-icon.sc-ix-animated-tabs{color:var(--theme-animated-tab-icon--color--disabled) !important}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs:not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-focus--border-color) !important}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs .count.sc-ix-animated-tabs{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text);display:flex;align-items:center;height:1rem;position:absolute;background-color:var(--theme-pill-outline--background);bottom:-0.55rem;border:1px solid var(--theme-tab-pill--border-color);border-radius:6.25rem;color:var(--theme-pill-outline--color);padding:0 0.25rem;background:var(--theme-color-1);transition:150ms}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs .count.bottom.sc-ix-animated-tabs{top:-0.55rem}.sc-ix-animated-tabs-h .content-container.sc-ix-animated-tabs{display:flex;flex-direction:row;height:calc(100% - 4.5rem);width:100%;overflow-y:auto;overflow-x:hidden}.sc-ix-animated-tabs-h .tab-active-underline.sc-ix-animated-tabs{background-color:var(--theme-animated-tab-indicator--background--selected);height:0.125rem;width:5rem;margin-top:-0.125rem;transition:150ms;position:absolute;top:4.5rem}.sc-ix-animated-tabs-h .tab-active-underline.bottom.sc-ix-animated-tabs{top:0;margin-top:0}";
+
+const AnimatedTabs = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.tabClick = createEvent(this, "tabClick", 7);
+    /**
+     * @deprecated - For debugging purposes only
+     */
+    this.disableAnimations = false;
+    /**
+     * Current selected tab index
+     */
+    this.selectedIndex = 0;
+    /**
+     * Placement of the tabs
+     */
+    this.tabPlacement = 'top';
+    this.easing = 'easeInOutSine';
+    this.firstRender = true;
+  }
+  onTabSelectionChange(newSelectionIndex, oldSelectionIndex) {
+    this.updateTabAnimation(oldSelectionIndex, newSelectionIndex);
+  }
+  onMouseDown() {
+    this.activeIndex = undefined;
+  }
+  get animatedTabs() {
+    return Array.from(this.hostElement.querySelectorAll('ix-animated-tab'));
+  }
+  get tabsContainer() {
+    return this.hostElement.querySelector('.tabs-container');
+  }
+  get contentContainer() {
+    return this.hostElement.querySelector('.content-container');
+  }
+  componentWillLoad() {
+    this.tabs = this.animatedTabs;
+  }
+  componentDidLoad() {
+    this.onTabSelectionChange(this.selectedIndex, -1);
+    this.observer = new MutationObserver(() => {
+      // Will trigger a re-render even if only the count attribute of a child tab changed
+      this.tabs = this.animatedTabs;
+    });
+    this.observer.observe(this.contentContainer, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ['count'],
+    });
+  }
+  //@ts-expect-error
+  disconnectCallback() {
+    var _a;
+    (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
+  isSelected(tab) {
+    return this.tabs.indexOf(tab) === this.selectedIndex;
+  }
+  showTab(tab) {
+    if (this.isSelected(tab)) {
+      tab.classList.remove('d-none');
+    }
+  }
+  hideTab(tab) {
+    if (!this.isSelected(tab)) {
+      tab.classList.add('d-none');
+    }
+  }
+  slideOutLeft(tab) {
+    if (this.disableAnimations) {
+      this.hideTab(tab);
+      return;
+    }
+    anime({
+      targets: tab,
+      duration: Animation.mediumTime,
+      opacity: [1, 0],
+      translateX: [0, '-100%'],
+      easing: this.easing,
+      complete: () => {
+        this.hideTab(tab);
+      },
+    });
+  }
+  slideOutRight(tab) {
+    if (this.disableAnimations) {
+      this.hideTab(tab);
+      return;
+    }
+    anime({
+      targets: tab,
+      duration: Animation.mediumTime,
+      opacity: [1, 0],
+      translateX: [0, '100%'],
+      easing: this.easing,
+      complete: () => {
+        this.hideTab(tab);
+      },
+    });
+  }
+  slideInLeft(tab) {
+    if (this.firstRender) {
+      tab.classList.remove('d-none');
+      this.firstRender = false;
+      return;
+    }
+    if (this.disableAnimations) {
+      this.showTab(tab);
+      return;
+    }
+    anime({
+      targets: tab,
+      duration: Animation.mediumTime,
+      opacity: [0, 1],
+      translateX: ['-100%', 0],
+      easing: this.easing,
+      begin: () => {
+        this.showTab(tab);
+      },
+    });
+  }
+  slideInRight(tab) {
+    if (this.firstRender) {
+      tab.classList.remove('d-none');
+      this.firstRender = false;
+      return;
+    }
+    if (this.disableAnimations) {
+      this.showTab(tab);
+      return;
+    }
+    anime({
+      targets: tab,
+      duration: Animation.mediumTime,
+      opacity: [0, 1],
+      translateX: ['100%', 0],
+      easing: this.easing,
+      begin: () => {
+        this.showTab(tab);
+      },
+    });
+  }
+  updateTabAnimation(oldIndex, newIndex) {
+    var _a;
+    (_a = this.tabs) === null || _a === void 0 ? void 0 : _a.forEach((tab, tabIndex) => {
+      if (tabIndex === oldIndex) {
+        if (tabIndex < newIndex) {
+          this.slideOutLeft(tab);
+        }
+        else if (tabIndex > newIndex) {
+          this.slideOutRight(tab);
+        }
+      }
+      else if (tabIndex === newIndex) {
+        if (tabIndex < oldIndex) {
+          this.slideInLeft(tab);
+        }
+        else if (tabIndex > oldIndex) {
+          this.slideInRight(tab);
+        }
+      }
+      else {
+        tab.classList.add('d-none');
+      }
+    });
+  }
+  onTabClick(index) {
+    this.selectedIndex = index;
+    this.tabClick.emit(index);
+  }
+  onTabMouseDown(index) {
+    this.activeIndex = index;
+  }
+  render() {
+    return (h(Host, { class: { 'flex-column-reverse': this.tabPlacement === 'bottom' } }, h("ul", { class: "tabs-container" }, this.animatedTabs.map((element, index) => (h("li", { class: { bottom: this.tabPlacement === 'bottom' }, onClick: () => this.onTabClick(index), onMouseDown: () => this.onTabMouseDown(index) }, h("div", { class: {
+        'tab-container': true,
+        selected: this.selectedIndex === index,
+      } }, h("ix-icon", { name: element.icon }), element.count ? (h("span", { class: {
+        count: true,
+        bottom: this.tabPlacement === 'bottom',
+      } }, convertToAbbreviationString(element.count))) : (''))))), h("div", { class: {
+        'tab-active-underline': true,
+        bottom: this.tabPlacement === 'bottom',
+      }, style: { 'margin-left': `calc(${this.selectedIndex} * 5rem)` } })), h("div", { class: "content-container" }, h("slot", null))));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "selectedIndex": ["onTabSelectionChange"]
+  }; }
+  static get style() { return animatedTabsCss; }
+}, [6, "ix-animated-tabs", {
+    "disableAnimations": [4, "disable-animations"],
+    "selectedIndex": [2, "selected-index"],
+    "tabPlacement": [1, "tab-placement"],
+    "tabs": [32],
+    "activeIndex": [32]
+  }, [[1, "mouseup", "onMouseDown"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-animated-tabs", "ix-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-animated-tabs":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, AnimatedTabs);
+      }
+      break;
+    case "ix-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IxAnimatedTabs = AnimatedTabs;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxAnimatedTabs, defineCustomElement };

package/dist/components/ix-application-header.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IxApplicationHeader extends Components.IxApplicationHeader, HTMLElement {}
+export const IxApplicationHeader: {
+  prototype: IxApplicationHeader;
+  new (): IxApplicationHeader;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ix-application-header.js

@@ -0,0 +1,6 @@
+import { A as ApplicationHeader, d as defineCustomElement$1 } from './application-header.js';
+
+const IxApplicationHeader = ApplicationHeader;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxApplicationHeader, defineCustomElement };

package/dist/components/ix-basic-navigation.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IxBasicNavigation extends Components.IxBasicNavigation, HTMLElement {}
+export const IxBasicNavigation: {
+  prototype: IxBasicNavigation;
+  new (): IxBasicNavigation;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ix-basic-navigation.js

@@ -0,0 +1,66 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './application-header.js';
+
+const basicNavigationCss = ".sc-ix-basic-navigation-h{display:flex;position:relative;width:100%;height:100%;flex-direction:column}.sc-ix-basic-navigation-h ix-application-header.sc-ix-basic-navigation{z-index:calc(var(--theme-z-index-sticky) + 1)}.sc-ix-basic-navigation-h .content.sc-ix-basic-navigation{display:flex;height:calc(100% - 2.75rem);width:calc(100% - 4rem);position:relative;margin-left:4rem;overflow:auto}.hide-header.sc-ix-basic-navigation-h .content.sc-ix-basic-navigation{height:100%}";
+
+const BasicNavigation = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /**
+     * Hide application header
+     */
+    this.hideHeader = false;
+  }
+  get menu() {
+    return this.hostElement.querySelector('ix-menu');
+  }
+  componentDidRender() {
+    if (this.menu) {
+      this.appendMenu();
+      this.adjustMenuHeight();
+      this.menu.applicationName = this.applicationName;
+    }
+  }
+  appendMenu() {
+    this.hostElement.querySelector('#menu-placeholder').appendChild(this.menu);
+  }
+  adjustMenuHeight() {
+    if (!this.hideHeader) {
+      this.menu.style.height = 'calc(100% - 2.75rem)';
+    }
+  }
+  render() {
+    return (h(Host, { class: {
+        'hide-header': this.hideHeader,
+      } }, !this.hideHeader ? (h("ix-application-header", { name: this.applicationName }, h("slot", { name: "logo" }))) : null, h("div", { id: "menu-placeholder" }), h("div", { class: "content", onClick: () => this.menu.toggleMenu(false) }, h("slot", null))));
+  }
+  get hostElement() { return this; }
+  static get style() { return basicNavigationCss; }
+}, [6, "ix-basic-navigation", {
+    "applicationName": [1, "application-name"],
+    "hideHeader": [4, "hide-header"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-basic-navigation", "ix-application-header"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-basic-navigation":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BasicNavigation);
+      }
+      break;
+    case "ix-application-header":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IxBasicNavigation = BasicNavigation;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxBasicNavigation, defineCustomElement };

package/dist/components/ix-blind.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IxBlind extends Components.IxBlind, HTMLElement {}
+export const IxBlind: {
+  prototype: IxBlind;
+  new (): IxBlind;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ix-blind.js

@@ -0,0 +1,105 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { a as anime } from './anime.es.js';
+
+const blindCss = ".sc-ix-blind-h{display:flex;flex-direction:column;background-color:var(--theme-blind-base--background);border:solid var(--theme-blind--border-thickness) var(--theme-blind-base--border-color);border-radius:var(--theme-blind--border-radius);overflow:hidden}.sc-ix-blind-h .blind-header.sc-ix-blind{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;min-height:3rem;height:3rem;border:solid var(--theme-blind--border-thickness) transparent;border-radius:var(--theme-blind--border-radius) var(--theme-blind--border-radius) 0 0;padding-right:1rem;transition:border-radius 150ms;cursor:pointer;z-index:1;color:var(--theme-blind-header-closed--color);background-color:var(--theme-blind-header-closed--background)}.sc-ix-blind-h .blind-header.sc-ix-blind .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-closed--color);padding:0.25rem 0.5rem}.sc-ix-blind-h .blind-header.sc-ix-blind .blind-header-title.sc-ix-blind{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-ix-blind-h .blind-header.sc-ix-blind .blind-header-title.sc-ix-blind .blind-header-title-default.sc-ix-blind{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):hover{background-color:var(--theme-blind-header-open--background--hover)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):hover .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-open--color--hover)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):active{background-color:var(--theme-blind-header-open--background--active)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):active .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-open--color--active)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):focus,.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-focus--border-color)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind{border-radius:var(--theme-blind--border-radius)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):hover{background-color:var(--theme-blind-header-open--background--hover)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):hover .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-closed--color--hover)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):active{background-color:var(--theme-blind-header-open--background--active)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):active .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-closed--color--active)}.sc-ix-blind-h .blind-custom-header.sc-ix-blind{display:flex;align-items:center}.sc-ix-blind-h .blind-content.sc-ix-blind{display:block;padding:1rem;max-height:1;transition-property:padding;transition-duration:150ms;transition-timing-function:ease-in}.sc-ix-blind-h .blind-content.hide.sc-ix-blind{max-height:0;padding-top:0px;padding-bottom:0px}";
+
+const Blind = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.collapsedChange = createEvent(this, "collapsedChange", 7);
+    /**
+     * Collapsed state
+     */
+    this.collapsed = false;
+  }
+  onHeaderClick(e) {
+    e.preventDefault();
+    e.stopImmediatePropagation();
+    this.collapsed = !this.collapsed;
+    this.collapsedChange.emit(this.collapsed);
+  }
+  componentDidLoad() {
+    this.animateCollapse(this.collapsed);
+  }
+  get content() {
+    return this.hostElement.querySelector('.blind-content');
+  }
+  animation(isCollapsed) {
+    this.animateCollapse(isCollapsed);
+  }
+  animateCollapse(isCollapsed) {
+    if (isCollapsed) {
+      this.rotateChevronRight();
+    }
+    else {
+      this.rotateChevronDown();
+    }
+  }
+  rotateChevronDown() {
+    anime({
+      targets: this.chevronRef,
+      duration: 150,
+      easing: 'easeInOutSine',
+      rotateZ: 90,
+    });
+    anime({
+      targets: this.content,
+      duration: 150,
+      easing: 'easeInOutSine',
+      opacity: 1,
+    });
+  }
+  rotateChevronRight() {
+    anime({
+      targets: this.chevronRef,
+      duration: 150,
+      easing: 'easeInOutSine',
+      rotateZ: 0,
+    });
+    anime({
+      targets: this.content,
+      duration: 150,
+      easing: 'easeInOutSine',
+      opacity: 0,
+    });
+  }
+  render() {
+    return (h(Host, null, h("div", { class: {
+        'blind-header': true,
+        closed: this.collapsed,
+      }, onClick: (e) => this.onHeaderClick(e) }, h("span", { ref: (ref) => (this.chevronRef = ref), class: {
+        glyph: true,
+        'glyph-chevron-right-small': true,
+      } }), h("div", { class: "blind-header-title" }, this.label !== undefined ? (h("span", { class: "blind-header-title-default" }, this.label)) : (h("slot", { name: "custom-header" })))), h("div", { class: {
+        'blind-content': true,
+        hide: this.collapsed,
+      } }, h("slot", null))));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "collapsed": ["animation"]
+  }; }
+  static get style() { return blindCss; }
+}, [6, "ix-blind", {
+    "collapsed": [1540],
+    "label": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-blind"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-blind":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Blind);
+      }
+      break;
+  } });
+}
+
+const IxBlind = Blind;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxBlind, defineCustomElement };

package/dist/components/ix-breadcrumb-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IxBreadcrumbItem extends Components.IxBreadcrumbItem, HTMLElement {}
+export const IxBreadcrumbItem: {
+  prototype: IxBreadcrumbItem;
+  new (): IxBreadcrumbItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ix-breadcrumb-item.js

@@ -0,0 +1,35 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const breadcrumbItemCss = ".sc-ix-breadcrumb-item-h{display:block}";
+
+const BreadcrumbItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  static get style() { return breadcrumbItemCss; }
+}, [6, "ix-breadcrumb-item", {
+    "label": [1],
+    "icon": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-breadcrumb-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-breadcrumb-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BreadcrumbItem);
+      }
+      break;
+  } });
+}
+
+const IxBreadcrumbItem = BreadcrumbItem;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxBreadcrumbItem, defineCustomElement };

package/dist/components/ix-breadcrumb.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IxBreadcrumb extends Components.IxBreadcrumb, HTMLElement {}
+export const IxBreadcrumb: {
+  prototype: IxBreadcrumb;
+  new (): IxBreadcrumb;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;