@siemens/ix 1.0.0-beta.2

package/dist/components/ix-split-button.d.ts

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

package/dist/components/ix-split-button.js

@@ -0,0 +1,135 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { g as getButtonClasses } from './base-button.js';
+import { d as defineCustomElement$3 } from './dropdown.js';
+import { d as defineCustomElement$2 } from './icon.js';
+import { c as createPopper } from './popper.js';
+
+const splitButtonCss = ".sc-ix-split-button-h{display:block}";
+
+const SplitButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.buttonClick = createEvent(this, "buttonClick", 7);
+    /**
+     * Color variant of button
+     */
+    this.variant = 'Primary';
+    /**
+     * Button outline variant
+     */
+    this.outline = false;
+    /**
+     * Button invisible
+     *
+     * @deprecated use ghost property
+     */
+    this.invisible = false;
+    /**
+     * Button invisible
+     */
+    this.ghost = false;
+    /**
+     * Button icon
+     */
+    this.icon = '';
+    /**
+     * Splitbutton icon
+     */
+    this.splitIcon = 'context-menu';
+    /**
+     * Disabled
+     */
+    this.disabled = false;
+    /**
+     * Placement of the dropdown
+     */
+    this.placement = 'bottom-start';
+    this.toggle = false;
+  }
+  get splitItems() {
+    return Array.from(this.hostElement.querySelectorAll('ix-split-button-item'));
+  }
+  clickOutside(e) {
+    if (!this.hostElement.contains(e.target)) {
+      this.toggle = false;
+    }
+  }
+  componentDidLoad() {
+    const element = this.hostElement.querySelector('.anchor');
+    this.popover = this.hostElement.querySelector('ix-dropdown');
+    this.popperInstance = createPopper(element, this.popover, {
+      strategy: 'fixed',
+      placement: this.placement,
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: [0, 0],
+          },
+        },
+        {
+          name: 'flip',
+          options: {
+            padding: 8,
+          },
+        },
+      ],
+    });
+    window.addEventListener('click', this.clickOutside.bind(this));
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
+    window.removeEventListener('click', this.clickOutside.bind(this));
+  }
+  toggleDropdown() {
+    this.toggle = !this.toggle;
+  }
+  render() {
+    return (h(Host, { class: "btn-group" }, h("button", { class: getButtonClasses(this.variant, this.outline, this.ghost || this.invisible, !this.label, false, false, this.disabled), onClick: (e) => this.buttonClick.emit(e) }, this.icon ? h("ix-icon", { name: this.icon }) : null, " ", this.label), h("button", { class: Object.assign(Object.assign({}, getButtonClasses(this.variant, this.outline, this.ghost || this.invisible, true, false, false, this.disabled)), {
+        anchor: true,
+      }), onClick: () => this.toggleDropdown() }, h("ix-icon", { name: this.splitIcon }), h("ix-dropdown", { show: this.toggle }, h("slot", null)))));
+  }
+  get hostElement() { return this; }
+  static get style() { return splitButtonCss; }
+}, [6, "ix-split-button", {
+    "variant": [1],
+    "outline": [4],
+    "invisible": [4],
+    "ghost": [4],
+    "label": [1],
+    "icon": [1],
+    "splitIcon": [1, "split-icon"],
+    "disabled": [4],
+    "placement": [1],
+    "toggle": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-split-button", "ix-dropdown", "ix-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-split-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SplitButton);
+      }
+      break;
+    case "ix-dropdown":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ix-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IxSplitButton = SplitButton;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxSplitButton, defineCustomElement };

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

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

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

@@ -0,0 +1,6 @@
+import { T as TabItem, d as defineCustomElement$1 } from './tab-item.js';
+
+const IxTabItem = TabItem;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxTabItem, defineCustomElement };

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

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

package/dist/components/ix-tabs.js

@@ -0,0 +1,6 @@
+import { T as Tabs, d as defineCustomElement$1 } from './tabs.js';
+
+const IxTabs = Tabs;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxTabs, defineCustomElement };

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

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

package/dist/components/ix-tile.js

@@ -0,0 +1,42 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const tileCss = ".sc-ix-tile-h{min-width:11.937rem;max-width:11.937rem;width:11.937rem;display:flex;flex-direction:column;border:1px solid var(--theme-tile--border);border-radius:var(--theme-tile--border-radius);background-color:var(--theme-color-2);color:var(--theme-color-std-text);box-shadow:var(--theme-tile--box-shadow)}.tile-small.sc-ix-tile-h{height:2.5rem;min-height:2.5rem;max-height:2.5rem}.tile-medium.sc-ix-tile-h{height:5rem;min-height:5rem;max-height:5rem}.tile-big.sc-ix-tile-h{height:10rem;min-height:10rem;max-height:10rem}.sc-ix-tile-h:active,.sc-ix-tile-h:focus,.sc-ix-tile-h:visited{outline:none}.sc-ix-tile-h .tile-header.sc-ix-tile{display:flex;align-items:center}.sc-ix-tile-h .tile-header.sc-ix-tile:not(:empty),.sc-ix-tile-h .tile-subheader.sc-ix-tile:not(:empty),.sc-ix-tile-h .tile-content.sc-ix-tile:not(:empty),.sc-ix-tile-h .tile-footer.sc-ix-tile:not(:empty){padding:0 1rem}.sc-ix-tile-h .tile-header.sc-ix-tile,.sc-ix-tile-h .tile-subheader.sc-ix-tile,.sc-ix-tile-h .tile-content.sc-ix-tile{flex-grow:1}.sc-ix-tile-h .tile-header.sc-ix-tile:not(:empty){display:flex;height:2.5rem;max-height:2.5rem;-webkit-padding-end:0.5rem;padding-inline-end:0.5rem}.sc-ix-tile-h .tile-subheader.sc-ix-tile{color:var(--theme-btn-invisible-secondary--color);flex-grow:0}.sc-ix-tile-h .tile-content.sc-ix-tile{flex-grow:1}.sc-ix-tile-h .tile-footer.sc-ix-tile:not(:empty){-webkit-border-before:1px solid var(--theme-color-1);border-block-start:1px solid var(--theme-color-1);height:2.5rem}";
+
+const Tile = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /**
+     * Size of the tile - one of 'small', 'medium' or 'large'
+     */
+    this.size = 'medium';
+  }
+  render() {
+    return (h(Host, { class: {
+        'tile-small': this.size === 'small',
+        'tile-medium': this.size === 'medium',
+        'tile-big': this.size === 'big',
+      } }, h("div", { class: "tile-header text-l-title" }, h("slot", { name: "header" })), h("div", { class: "tile-subheader" }, h("slot", { name: "subheader" })), h("div", { class: "tile-content" }, h("slot", null)), h("div", { class: "tile-footer" }, h("slot", { name: "footer" }))));
+  }
+  static get style() { return tileCss; }
+}, [6, "ix-tile", {
+    "size": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-tile"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-tile":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Tile);
+      }
+      break;
+  } });
+}
+
+const IxTile = Tile;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxTile, defineCustomElement };

package/dist/components/ix-time-picker.d.ts

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

package/dist/components/ix-time-picker.js

@@ -0,0 +1,6 @@
+import { T as TimePicker, d as defineCustomElement$1 } from './time-picker.js';
+
+const IxTimePicker = TimePicker;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxTimePicker, defineCustomElement };

package/dist/components/ix-toast-container.d.ts

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

package/dist/components/ix-toast-container.js

@@ -0,0 +1,110 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { T as TypedEvent } from './typed-event.js';
+import { d as defineCustomElement$4 } from './icon.js';
+import { d as defineCustomElement$3 } from './icon-button.js';
+import { d as defineCustomElement$2 } from './toast.js';
+
+const ToastContainer = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /**
+     */
+    this.containerId = 'toast-container';
+    /**
+     */
+    this.containerClass = 'toast-container';
+    /**
+     */
+    this.position = 'bottom-right';
+  }
+  get hostContainer() {
+    return document.getElementById(this.containerId);
+  }
+  componentDidLoad() {
+    if (!document.getElementById(this.containerId)) {
+      const toastContainer = document.createElement('div');
+      toastContainer.id = this.containerId;
+      toastContainer.classList.add(this.containerClass);
+      toastContainer.classList.add(`toast-container--${this.position}`);
+      document.body.appendChild(toastContainer);
+    }
+  }
+  /**
+   * Display a toast message
+   * @param config
+   */
+  async showToast(config) {
+    const toast = document.createElement('ix-toast');
+    const onClose = new TypedEvent();
+    function removeToast(result) {
+      toast.remove();
+      onClose.emit(result);
+    }
+    toast.toastTitle = config.title;
+    toast.type = config.type;
+    toast.autoClose = config.autoClose;
+    toast.autoCloseDelay = config.autoCloseDelay;
+    toast.icon = config.icon;
+    toast.iconColor = config.iconColor;
+    toast.addEventListener('closeToast', (event) => {
+      const { detail } = event;
+      removeToast(detail);
+    });
+    if (typeof config.message === 'string') {
+      toast.innerText = config.message;
+    }
+    else {
+      toast.appendChild(config.message);
+    }
+    this.hostContainer.appendChild(toast);
+    return {
+      onClose,
+      close: (result) => {
+        removeToast(result);
+      },
+    };
+  }
+  render() {
+    return h(Host, null);
+  }
+  get host() { return this; }
+}, [2, "ix-toast-container", {
+    "containerId": [1, "container-id"],
+    "containerClass": [1, "container-class"],
+    "position": [1],
+    "showToast": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-toast-container", "ix-icon", "ix-icon-button", "ix-toast"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-toast-container":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ToastContainer);
+      }
+      break;
+    case "ix-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ix-icon-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ix-toast":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IxToastContainer = ToastContainer;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxToastContainer, defineCustomElement };

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

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

package/dist/components/ix-toast.js

@@ -0,0 +1,6 @@
+import { T as Toast, d as defineCustomElement$1 } from './toast.js';
+
+const IxToast = Toast;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxToast, defineCustomElement };

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

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

package/dist/components/ix-toggle.js

@@ -0,0 +1,104 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const toggleCss = ".sc-ix-toggle-h{display:flex;align-items:center;outline:none}.sc-ix-toggle-h .switch.sc-ix-toggle{position:relative;display:inline-flex;align-items:center;min-width:3rem;height:2rem}.sc-ix-toggle-h .switch.sc-ix-toggle:not(.disabled):not(:disabled):focus-visible{outline-color:var(--focus--border-color);outline-style:solid;outline-width:1px}.sc-ix-toggle-h .switch.sc-ix-toggle input.sc-ix-toggle{opacity:0;width:0;height:0}.sc-ix-toggle-h .slider.sc-ix-toggle{display:flex;align-items:center;justify-content:center;position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0}.sc-ix-toggle-h .slider.sc-ix-toggle .slider-track.sc-ix-toggle{background-color:var(--theme-switch-off--background);border-radius:2.125rem;border:1px solid var(--theme-switch-off--border-color);width:2.5rem;height:1rem}.sc-ix-toggle-h .slider.sc-ix-toggle:before{position:absolute;content:\"\";height:1.5rem;width:1.5rem;left:0.125rem;background-color:var(--theme-switch-thumb-off--background);transition:transform 150ms;border-radius:50%;border:1px solid var(--theme-switch-thumb-off--border-color);box-shadow:var(--theme-switch-thumb--box-shadow)}.sc-ix-toggle-h input.sc-ix-toggle:checked+.slider.sc-ix-toggle:before{transform:translateX(1.125rem);left:0.25rem}.sc-ix-toggle-h .text.sc-ix-toggle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--theme-switch--color);padding:0 0.5rem;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.sc-ix-toggle-h:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-toggle-h:not(.disabled):not(:disabled):hover .slider.sc-ix-toggle:before{background-color:var(--theme-switch-thumb-off--background--hover);border-color:var(--theme-switch-thumb-off--border-color--hover)}.sc-ix-toggle-h:not(.disabled):not(:disabled):hover .slider-track.sc-ix-toggle{background-color:var(--theme-switch-off--background--hover);border-color:var(--theme-switch-off--border-color--hover)}.sc-ix-toggle-h:not(.disabled):not(:disabled):hover .text.sc-ix-toggle{color:var(--theme-switch--color--hover)}.sc-ix-toggle-h:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-toggle-h:not(.disabled):not(:disabled):active .slider.sc-ix-toggle:before{background-color:var(--theme-switch-thumb-off--background--active);border-color:var(--theme-switch-thumb-off--border-color--active)}.sc-ix-toggle-h:not(.disabled):not(:disabled):active .slider-track.sc-ix-toggle{background-color:var(--theme-switch-off--background--active);border-color:var(--theme-switch-off--border-color--active)}.sc-ix-toggle-h:not(.disabled):not(:disabled):active .text.sc-ix-toggle{color:var(--theme-switch--color--active)}.checked.sc-ix-toggle-h .slider.sc-ix-toggle:before{background-color:var(--theme-switch-thumb-on--background);border-color:var(--theme-switch-thumb-on--border-color)}.checked.sc-ix-toggle-h .slider.sc-ix-toggle .slider-track.sc-ix-toggle{background-color:var(--theme-switch-on--background);border-color:var(--theme-switch-on--border-color)}.checked.sc-ix-toggle-h .text.sc-ix-toggle{color:var(--theme-switch--color)}.checked.sc-ix-toggle-h:not(.disabled):not(:disabled){cursor:pointer}.checked.sc-ix-toggle-h:not(.disabled):not(:disabled):hover .slider.sc-ix-toggle:before{background-color:var(--theme-switch-thumb-on--background--hover);border-color:var(--theme-switch-thumb-on--border-color--hover)}.checked.sc-ix-toggle-h:not(.disabled):not(:disabled):hover .slider.sc-ix-toggle .slider-track.sc-ix-toggle{background-color:var(--theme-switch-on--background--hover);border-color:var(--theme-switch-on--border-color--hover)}.checked.sc-ix-toggle-h:not(.disabled):not(:disabled):hover .text.sc-ix-toggle{color:var(--theme-switch--color--hover)}.checked.sc-ix-toggle-h:not(.disabled):not(:disabled){cursor:pointer}.checked.sc-ix-toggle-h:not(.disabled):not(:disabled):active .slider.sc-ix-toggle:before{background-color:var(--theme-switch-thumb-on--background--active);border-color:var(--theme-switch-thumb-on--border-color--active)}.checked.sc-ix-toggle-h:not(.disabled):not(:disabled):active .slider-track.sc-ix-toggle{background-color:var(--theme-switch-on--background--active);border-color:var(--theme-switch-on--border-color--active)}.checked.sc-ix-toggle-h:not(.disabled):not(:disabled):active .text.sc-ix-toggle{color:var(--theme-switch--color--active)}.indeterminate.sc-ix-toggle-h .slider.sc-ix-toggle:before{background-color:var(--theme-switch-thumb-mixed--background);border-color:var(--theme-switch-thumb-mixed--border-color)}.indeterminate.sc-ix-toggle-h .slider.sc-ix-toggle .slider-track.sc-ix-toggle{background-color:var(--theme-switch-mixed--background);border-color:var(--theme-switch-mixed--border-color)}.indeterminate.sc-ix-toggle-h .text.sc-ix-toggle{color:var(--theme-switch--color)}.indeterminate.sc-ix-toggle-h:not(.disabled):not(:disabled){cursor:pointer}.indeterminate.sc-ix-toggle-h:not(.disabled):not(:disabled):hover .slider.sc-ix-toggle:before{background-color:var(--theme-switch-thumb-mixed--background--hover);border-color:var(--theme-switch-thumb-mixed--border-color--hover)}.indeterminate.sc-ix-toggle-h:not(.disabled):not(:disabled):hover .slider.sc-ix-toggle .slider-track.sc-ix-toggle{background-color:var(--theme-switch-mixed--background--hover);border-color:var(--theme-switch-mixed--border-color--hover)}.indeterminate.sc-ix-toggle-h:not(.disabled):not(:disabled):hover .text.sc-ix-toggle{color:var(--theme-switch--color--hover)}.indeterminate.sc-ix-toggle-h:not(.disabled):not(:disabled){cursor:pointer}.indeterminate.sc-ix-toggle-h:not(.disabled):not(:disabled):active .slider.sc-ix-toggle:before{background-color:var(--theme-switch-thumb-mixed--background--active);border-color:var(--theme-switch-thumb-mixed--border-color--active)}.indeterminate.sc-ix-toggle-h:not(.disabled):not(:disabled):active .slider-track.sc-ix-toggle{background-color:var(--theme-switch-mixed--background--active);border-color:var(--theme-switch-mixed--border-color--active)}.indeterminate.sc-ix-toggle-h:not(.disabled):not(:disabled):active .text.sc-ix-toggle{color:var(--theme-switch--color--active)}.indeterminate.sc-ix-toggle-h .slider.sc-ix-toggle:before{transform:translateX(0.625rem)}[disabled].sc-ix-toggle-h .slider.sc-ix-toggle,.disabled.sc-ix-toggle-h .slider.sc-ix-toggle{cursor:initial}[disabled].sc-ix-toggle-h .slider.sc-ix-toggle:before,.disabled.sc-ix-toggle-h .slider.sc-ix-toggle:before{background-color:var(--theme-switch-thumb-off--background--disabled);border-color:var(--theme-switch-thumb-off--border-color--disabled)}[disabled].sc-ix-toggle-h .slider.sc-ix-toggle .slider-track.sc-ix-toggle,.disabled.sc-ix-toggle-h .slider.sc-ix-toggle .slider-track.sc-ix-toggle{background-color:var(--theme-switch-off--background--disabled);border-color:var(--theme-switch-off--border-color--disabled)}[disabled].sc-ix-toggle-h .text.sc-ix-toggle,.disabled.sc-ix-toggle-h .text.sc-ix-toggle{color:var(--theme-switch--color--disabled)}";
+
+const CuiToggle = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.checkedChange = createEvent(this, "checkedChange", 7);
+    /**
+     * Whether the slide-toggle element is checked or not.
+     */
+    this.checked = false;
+    /**
+     * Whether the slide-toggle element is disabled or not.
+     */
+    this.disabled = false;
+    /**
+     * If true the control is in indeterminate state
+     */
+    this.indeterminate = false;
+    /**
+     * Basic and status colors from color palette
+     * @deprecated - Has no effect on the rendered control
+     */
+    this.color = 'accent';
+    /**
+     * Text for on state
+     */
+    this.textOn = 'On';
+    /**
+     * Text for off state
+     */
+    this.textOff = 'Off';
+    /**
+     * Text for indeterminate state
+     */
+    this.textIndeterminate = 'Mixed';
+    /**
+     * Hide `on` and `off` text
+     */
+    this.hideText = false;
+  }
+  async onKeyDown(event) {
+    const targetElement = event.target;
+    if (!this.hostElement.contains(targetElement)) {
+      return;
+    }
+    if (event.code === 'Enter' || event.code === 'NumpadEnter') {
+      this.emitChange(event);
+    }
+  }
+  emitChange(event) {
+    if (this.disabled || this.indeterminate) {
+      return;
+    }
+    event.stopPropagation();
+    event.preventDefault();
+    this.checked = !this.checked;
+    this.checkedChange.emit(this.checked);
+  }
+  getText() {
+    if (this.indeterminate || this.checked === undefined) {
+      return this.textIndeterminate;
+    }
+    return this.checked ? this.textOn : this.textOff;
+  }
+  render() {
+    return (h(Host, { class: {
+        disabled: this.disabled,
+        checked: this.checked,
+        indeterminate: this.indeterminate || this.checked === undefined,
+      } }, h("label", { class: "switch", tabindex: this.disabled ? -1 : 0 }, h("input", { tabindex: "-1", type: "checkbox", checked: this.checked, disabled: this.disabled, indeterminate: this.indeterminate || this.checked === undefined, id: this.hostElement.id, onChange: (e) => this.emitChange(e) }), h("span", { class: "slider" }, h("span", { class: "slider-track" }))), !this.hideText ? (h("span", { title: this.getText(), class: "text", onClick: (e) => this.emitChange(e) }, this.getText())) : null));
+  }
+  get hostElement() { return this; }
+  static get style() { return toggleCss; }
+}, [2, "ix-toggle", {
+    "checked": [1540],
+    "disabled": [4],
+    "indeterminate": [4],
+    "color": [1],
+    "textOn": [1, "text-on"],
+    "textOff": [1, "text-off"],
+    "textIndeterminate": [1, "text-indeterminate"],
+    "hideText": [4, "hide-text"]
+  }, [[8, "keydown", "onKeyDown"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-toggle"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-toggle":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CuiToggle);
+      }
+      break;
+  } });
+}
+
+const IxToggle = CuiToggle;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxToggle, defineCustomElement };

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

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

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

@@ -0,0 +1,6 @@
+import { T as TreeItem, d as defineCustomElement$1 } from './tree-item.js';
+
+const IxTreeItem = TreeItem;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxTreeItem, defineCustomElement };

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

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