@siemens/ix 2.0.0 → 2.0.1

package/components/ix-select.d.ts

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

package/components/ix-select.js

@@ -0,0 +1,8 @@
+import { S as Select, d as defineCustomElement$1 } from './select.js';
+
+const IxSelect = Select;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxSelect, defineCustomElement };
+
+//# sourceMappingURL=ix-select.js.map

package/components/ix-select.js.map

@@ -0,0 +1 @@
+{"file":"ix-select.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/components/ix-slider.d.ts

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

package/components/ix-slider.js

@@ -0,0 +1,192 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { b as a11yHostAttributes } from './a11y.js';
+import { d as defineCustomElement$3 } from './tooltip.js';
+import { d as defineCustomElement$2 } from './typography.js';
+
+const sliderCss = ":host{display:flex;flex-direction:column;min-height:2rem;--thumb-size:1rem;--value:0;--trace-start:0;--trace-end:0;--trace-reference:0;--trace-reference-color:var(--theme-color-8);--trace-color:var(--theme-color-dynamic);--tick-color:var(--theme-color-7);--tick-color--active:var(--theme-color-dynamic);--track-color:var(--theme-color-component-4);}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host input[type=range]{position:absolute;top:50%;transform:translateY(-50%);left:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer;width:100%;height:1rem;margin:0}:host input[type=range].trace::before{content:\"\";position:absolute;display:block;z-index:-1;width:calc(7px + 100% * var(--trace-end) - 16px * var(--trace-end) - (7px + 100% * var(--trace-start) - 16px * var(--trace-start)));left:calc(7px + 100% * var(--trace-start) - 16px * var(--trace-start));height:4px;background-color:var(--trace-color);top:50%;transform:translateY(-50%)}:host input[type=range].trace::after{content:\"\";position:absolute;display:block;width:2px;height:16px;background-color:var(--trace-reference-color);top:50%;transform:translateY(-50%);left:calc(7px + 100% * var(--trace-reference) - 16px * var(--trace-reference))}:host input[type=range]::-webkit-slider-runnable-track{background:transparent;height:0.25rem}:host input[type=range]::-moz-range-track{background:transparent;height:0.25rem}:host input[type=range i]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-6px}:host input[type=range i]::-moz-range-thumb{border:none;border-radius:0}:host input[type=range]::-webkit-slider-thumb{border-radius:100px;background-color:var(--theme-color-dynamic);height:var(--thumb-size);width:var(--thumb-size);-webkit-transition:all var(--theme-default-time) ease-in-out;transition:all var(--theme-default-time) ease-in-out;z-index:10}:host input[type=range]::-moz-range-thumb{border-radius:100px;background-color:var(--theme-color-dynamic);height:var(--thumb-size);width:var(--thumb-size);-moz-transition:all var(--theme-default-time) ease-in-out;transition:all var(--theme-default-time) ease-in-out;z-index:10}:host input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.2);background-color:var(--theme-color-dynamic)}:host input[type=range]:hover::-moz-range-thumb{transform:scale(1.2);background-color:var(--theme-color-dynamic)}:host input[type=range]:active::-webkit-slider-thumb{transform:scale(1.2);background-color:var(--theme-color-dynamic)}:host input[type=range]:active::-moz-range-thumb{transform:scale(1.2);background-color:var(--theme-color-dynamic)}:host input[type=range]:focus{outline:none}:host input[type=range]:focus-visible::-webkit-slider-thumb{outline:1px solid var(--theme-color-focus-bdr);outline-offset:0.125rem}:host input[type=range]:focus-visible::-moz-range-thumb{outline:1px solid var(--theme-color-focus-bdr);outline-offset:0.125rem}:host .ticks{display:flex;position:relative;top:50%;transform:translateY(-50%)}:host .ticks .tick{display:block;position:absolute;width:8px;height:8px;background-color:var(--tick-color);border-radius:100px;top:50%;transform:translateY(-50%);left:calc(var(--tick-value) * 100% - 4px)}:host .ticks .tick.tick-active{background-color:var(--tick-color--active)}:host .slider{position:relative;display:block;width:100%;height:1.5rem}:host .track{position:absolute;background-color:var(--track-color);height:4px;width:calc(100% - 1rem);margin-left:0.5rem;top:50%;transform:translateY(-50%);left:0px}:host .thumb{display:block;position:absolute;background-color:transparent;height:1rem;width:1rem;border-radius:100px;left:0px;top:50%;transform:translateY(-50%)}:host .hide-tooltip{display:none}:host .label{display:flex;position:relative;align-items:center;justify-content:space-between;width:100%;margin-top:0.5rem;min-height:0px}:host .label-start{margin-left:0.5rem}:host .label-end{margin-right:0.5rem}:host .label-error{margin-left:0.5rem}:host(.error){--trace-color:var(--theme-color-alarm-40);--tick-color--active:var(--theme-color-alarm)}:host(.error) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-color-alarm)}:host(.error) input[type=range]::-moz-range-thumb{background-color:var(--theme-color-alarm)}:host(.disabled){pointer-events:none;--track-color:var(--theme-color-component-3);--trace-color:var(--theme-color-3);--tick-color:var(--theme-color-7);--tick-color--active:var(--theme-color-7)}:host(.disabled) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-color-7)}:host(.disabled) input[type=range]::-moz-range-thumb{background-color:var(--theme-color-7)}";
+
+function between(min, value, max) {
+  if (value < min) {
+    return min;
+  }
+  else if (value > max) {
+    return max;
+  }
+  else {
+    return value;
+  }
+}
+const IxSlider$1 = /*@__PURE__*/ proxyCustomElement(class IxSlider extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.valueChange = createEvent(this, "valueChange", 7);
+    this.step = undefined;
+    this.min = 0;
+    this.max = 100;
+    this.value = 0;
+    this.marker = undefined;
+    this.trace = false;
+    this.traceReference = 0;
+    this.disabled = false;
+    this.error = undefined;
+    this.rangeInput = 0;
+    this.rangeMin = 0;
+    this.rangeMax = 100;
+    this.rangeTraceReference = 0;
+    this.showTooltip = false;
+  }
+  get tooltip() {
+    return this.hostElement.shadowRoot.querySelector('ix-tooltip');
+  }
+  get pseudoThumb() {
+    return this.hostElement.shadowRoot.querySelector('.thumb');
+  }
+  get slider() {
+    return this.hostElement.shadowRoot.getElementById('slider');
+  }
+  onShowTooltipChange() {
+    if (this.showTooltip) {
+      this.tooltip.showTooltip(this.pseudoThumb);
+      return;
+    }
+    this.tooltip.hideTooltip();
+  }
+  componentWillLoad() {
+    this.a11yAttributes = a11yHostAttributes(this.hostElement, [
+      'role',
+      'aria-valuemin',
+      'aria-valuemax',
+      'aria-valuenow',
+    ]);
+    this.updateRangeVariables();
+  }
+  updateRangeVariables() {
+    this.rangeInput = between(this.min, this.value, this.max);
+    this.rangeTraceReference = between(this.min, this.traceReference, this.max);
+    this.rangeMin = Math.min(this.min, this.max);
+    this.rangeMax = Math.max(this.min, this.max);
+  }
+  onInput(event) {
+    event.stopPropagation();
+    const value = parseInt(this.slider.value);
+    if (!isNaN(value)) {
+      this.rangeInput = value;
+      this.emitInputEvent();
+    }
+  }
+  emitInputEvent() {
+    this.valueChange.emit(this.rangeInput);
+  }
+  isMarkerActive(markerValue) {
+    const start = Math.min(this.traceReference, this.rangeInput);
+    const end = Math.max(this.traceReference, this.rangeInput);
+    const value = markerValue;
+    return value >= start && value <= end;
+  }
+  // Listen globally on window because sometimes the event listener
+  // of the DOM element input itself is not called if the release
+  // click is not inside the element anymore
+  onPointerUp() {
+    this.showTooltip = false;
+  }
+  render() {
+    const range = this.rangeMax - this.rangeMin;
+    let traceReferenceInPercentage = (this.rangeTraceReference - this.rangeMin) / range;
+    let valueInPercentage = (this.rangeInput - this.rangeMin) / range;
+    const distance = valueInPercentage - traceReferenceInPercentage;
+    let traceStart = traceReferenceInPercentage;
+    let traceEnd = valueInPercentage;
+    if (distance <= 0) {
+      traceStart = valueInPercentage;
+      traceEnd = traceReferenceInPercentage;
+    }
+    return (h(Host, { class: {
+        disabled: this.disabled,
+        error: !!this.error,
+      }, onPointerDown: () => setTimeout(() => (this.showTooltip = true)) }, h("div", { class: "slider" }, h("div", { class: "track" }, h("div", { class: "thumb", style: {
+        left: `calc(${valueInPercentage} * 100% - 8px)`,
+      } }), h("div", { class: "ticks" }, this.marker
+      ? this.marker.map((markerValue) => {
+        if (markerValue > this.max || markerValue < this.min) {
+          return;
+        }
+        let left = (markerValue - this.rangeMin) / range;
+        return (h("div", { class: {
+            tick: true,
+            'tick-active': this.isMarkerActive(markerValue) && this.trace,
+          }, style: {
+            '--tick-value': `${left}`,
+          } }));
+      })
+      : null)), h("input", Object.assign({ id: "slider", type: "range", list: this.marker ? 'markers' : undefined, step: this.step, min: this.min, max: this.max, value: this.rangeInput, tabindex: this.disabled ? -1 : 0, onInput: (event) => this.onInput(event), style: {
+        '--value': `${valueInPercentage}`,
+        '--trace-reference': `${traceReferenceInPercentage}`,
+        '--trace-start': `${traceStart}`,
+        '--trace-end': `${traceEnd}`,
+      }, class: {
+        trace: this.trace && traceReferenceInPercentage !== valueInPercentage,
+      }, onFocus: () => {
+        this.showTooltip = true;
+      }, onBlur: () => {
+        this.showTooltip = false;
+      }, role: "slider", "aria-valuenow": this.rangeInput, "aria-valuemin": this.min, "aria-valuemax": this.max }, this.a11yAttributes)), h("ix-tooltip", { class: {
+        'hide-tooltip': !this.showTooltip,
+      }, animationFrame: true }, this.rangeInput)), h("div", { class: "label" }, h("div", { class: "label-start" }, h("slot", { name: "label-start" })), h("div", { class: "label-end" }, h("slot", { name: "label-end" }))), this.error ? (h("ix-typography", { class: 'label-error', color: "alarm" }, this.error)) : null));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "showTooltip": ["onShowTooltipChange"],
+    "value": ["updateRangeVariables"],
+    "max": ["updateRangeVariables"],
+    "min": ["updateRangeVariables"],
+    "traceReference": ["updateRangeVariables"]
+  }; }
+  static get style() { return sliderCss; }
+}, [1, "ix-slider", {
+    "step": [2],
+    "min": [2],
+    "max": [2],
+    "value": [2],
+    "marker": [16],
+    "trace": [4],
+    "traceReference": [2, "trace-reference"],
+    "disabled": [4],
+    "error": [8],
+    "rangeInput": [32],
+    "rangeMin": [32],
+    "rangeMax": [32],
+    "rangeTraceReference": [32],
+    "showTooltip": [32]
+  }, [[9, "pointerup", "onPointerUp"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-slider", "ix-tooltip", "ix-typography"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-slider":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, IxSlider$1);
+      }
+      break;
+    case "ix-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ix-typography":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IxSlider = IxSlider$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxSlider, defineCustomElement };
+
+//# sourceMappingURL=ix-slider.js.map

package/components/ix-slider.js.map

@@ -0,0 +1 @@
+{"file":"ix-slider.js","mappings":"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","names":["IxSlider"],"sources":["./src/components/slider/slider.scss?tag=ix-slider&encapsulation=shadow","./src/components/slider/slider.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n\n@mixin track {\n  // Chrome, Safari, Opera, and Edge Chromium\n  input[type='range']::-webkit-slider-runnable-track {\n    @content;\n  }\n\n  // Firefox\n  input[type='range']::-moz-range-track {\n    @content;\n  }\n}\n\n@mixin clear-browser-thumb {\n  // Chrome, Safari, Opera, and Edge Chromium\n  input[type='range' i]::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    margin-top: -6px;\n  }\n\n  // Firefox\n  input[type='range' i]::-moz-range-thumb {\n    border: none;\n    border-radius: 0;\n  }\n}\n\n@mixin thumb {\n  // Chrome, Safari, Opera, and Edge Chromium\n  input[type='range']::-webkit-slider-thumb {\n    @content;\n  }\n\n  // Firefox\n  input[type='range']::-moz-range-thumb {\n    @content;\n  }\n}\n\n@mixin thumb-hover {\n  // Chrome, Safari, Opera, and Edge Chromium\n  input[type='range']:hover::-webkit-slider-thumb {\n    @content;\n  }\n\n  // Firefox\n  input[type='range']:hover::-moz-range-thumb {\n    @content;\n  }\n}\n\n@mixin thumb-active {\n  // Chrome, Safari, Opera, and Edge Chromium\n  input[type='range']:active::-webkit-slider-thumb {\n    @content;\n  }\n\n  // Firefox\n  input[type='range']:active::-moz-range-thumb {\n    @content;\n  }\n}\n\n@mixin thumb-focus {\n  input[type='range']:focus {\n    outline: none;\n  }\n\n  // Chrome, Safari, Opera, and Edge Chromium\n  input[type='range']:focus-visible::-webkit-slider-thumb {\n    @content;\n  }\n\n  // Firefox\n  input[type='range']:focus-visible::-moz-range-thumb {\n    @content;\n  }\n}\n\n:host {\n  @include ix-component;\n  display: flex;\n  flex-direction: column;\n  min-height: 2rem;\n  --thumb-size: 1rem;\n  --value: 0;\n  --trace-start: 0;\n  --trace-end: 0;\n  --trace-reference: 0;\n  --trace-reference-color: var(--theme-color-8);\n  --trace-color: var(--theme-color-dynamic);\n  --tick-color: var(--theme-color-7);\n  --tick-color--active: var(--theme-color-dynamic);\n  --track-color: var(--theme-color-component-4);\n\n  input[type='range'] {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    left: 0;\n    appearance: none;\n    background: transparent;\n    cursor: pointer;\n    width: 100%;\n    height: 1rem;\n    margin: 0;\n  }\n\n  // Trace line\n  input[type='range'].trace::before {\n    content: '';\n    position: absolute;\n    display: block;\n    z-index: -1;\n\n    width: calc(\n      calc(7px + calc(100% * var(--trace-end)) - calc(16px * var(--trace-end))) -\n        calc(\n          7px + calc(100% * var(--trace-start)) -\n            calc(16px * var(--trace-start))\n        )\n    );\n\n    left: calc(\n      7px + calc(100% * var(--trace-start)) - calc(16px * var(--trace-start))\n    );\n\n    height: 4px;\n    background-color: var(--trace-color);\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  // Trace reference\n  input[type='range'].trace::after {\n    content: '';\n    position: absolute;\n    display: block;\n    width: 2px;\n    height: 16px;\n    background-color: var(--trace-reference-color);\n    top: 50%;\n    transform: translateY(-50%);\n    left: calc(\n      7px + calc(100% * var(--trace-reference)) -\n        calc(16px * var(--trace-reference))\n    );\n  }\n\n  @include track() {\n    background: transparent;\n    height: 0.25rem;\n  }\n\n  @include clear-browser-thumb();\n\n  @include thumb() {\n    border-radius: 100px;\n    background-color: var(--theme-color-dynamic);\n    height: var(--thumb-size);\n    width: var(--thumb-size);\n    transition: all var(--theme-default-time) ease-in-out;\n    z-index: 10;\n  }\n\n  @include thumb-hover() {\n    transform: scale(1.2);\n    background-color: var(--theme-color-dynamic);\n  }\n\n  @include thumb-active() {\n    transform: scale(1.2);\n\n    background-color: var(--theme-color-dynamic);\n  }\n\n  @include thumb-focus() {\n    outline: 1px solid var(--theme-color-focus-bdr);\n    outline-offset: 0.125rem;\n  }\n\n  /* style datalist */\n  .ticks {\n    display: flex;\n    position: relative;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n  .ticks .tick {\n    display: block;\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    background-color: var(--tick-color);\n    border-radius: 100px;\n    top: 50%;\n    transform: translateY(-50%);\n    left: calc(var(--tick-value) * 100% - 4px);\n  }\n\n  .ticks .tick.tick-active {\n    background-color: var(--tick-color--active);\n  }\n\n  .slider {\n    position: relative;\n    display: block;\n    width: 100%;\n    height: 1.5rem;\n  }\n\n  .track {\n    position: absolute;\n    background-color: var(--track-color);\n    height: 4px;\n    width: calc(100% - 1rem);\n    margin-left: 0.5rem;\n    top: 50%;\n    transform: translateY(-50%);\n    left: 0px;\n  }\n\n  .thumb {\n    display: block;\n    position: absolute;\n    background-color: transparent;\n    height: 1rem;\n    width: 1rem;\n    border-radius: 100px;\n    left: 0px;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  .hide-tooltip {\n    display: none;\n  }\n\n  .label {\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    margin-top: 0.5rem;\n\n    min-height: 0px;\n  }\n\n  .label-start {\n    margin-left: 0.5rem;\n  }\n\n  .label-end {\n    margin-right: 0.5rem;\n  }\n\n  .label-error {\n    margin-left: 0.5rem;\n  }\n}\n\n:host(.error) {\n  --trace-color: var(--theme-color-alarm-40);\n  --tick-color--active: var(--theme-color-alarm);\n\n  @include thumb() {\n    background-color: var(--theme-color-alarm);\n  }\n}\n\n:host(.disabled) {\n  pointer-events: none;\n\n  --track-color: var(--theme-color-component-3);\n  --trace-color: var(--theme-color-3);\n  --tick-color: var(--theme-color-7);\n  --tick-color--active: var(--theme-color-7);\n\n  @include thumb() {\n    background-color: var(--theme-color-7);\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { A11yAttributes, a11yHostAttributes } from '../utils/a11y';\n\nexport type SliderMarker = Array<number>;\n\nfunction between(min: number, value: number, max: number) {\n  if (value < min) {\n    return min;\n  } else if (value > max) {\n    return max;\n  } else {\n    return value;\n  }\n}\n\n/**\n * @since 2.0.0\n *\n * @slot label-start - Element will be displayed at the start of the slider\n * @slot label-end - Element will be displayed at the end of the slider\n */\n@Component({\n  tag: 'ix-slider',\n  styleUrl: 'slider.scss',\n  shadow: true,\n})\nexport class IxSlider {\n  @Element() hostElement!: HTMLIxSliderElement;\n\n  /**\n   * Legal number intervals\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#step\n   */\n  @Prop() step: number;\n\n  /**\n   * Minimum slider value\n   */\n  @Prop() min = 0;\n\n  /**\n   * Maximum slider value\n   */\n  @Prop() max = 100;\n\n  /**\n   * Current value of the slider\n   */\n  @Prop() value = 0;\n\n  /**\n   * Define tick marker on the slider. Marker has to be within slider min/max\n   */\n  @Prop() marker: SliderMarker;\n\n  /**\n   * Show a trace line\n   */\n  @Prop() trace = false;\n\n  /**\n   * Define the start point of the trace line\n   */\n  @Prop() traceReference = 0;\n\n  /**\n   * Show control as disabled\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Show error state and message\n   */\n  @Prop() error: boolean | string;\n\n  /**\n   *\n   */\n  @Event() valueChange: EventEmitter<number>;\n\n  @State() rangeInput = 0;\n  @State() rangeMin = 0;\n  @State() rangeMax = 100;\n  @State() rangeTraceReference = 0;\n  @State() showTooltip = false;\n\n  private a11yAttributes: A11yAttributes;\n\n  get tooltip() {\n    return this.hostElement.shadowRoot.querySelector('ix-tooltip');\n  }\n\n  get pseudoThumb() {\n    return this.hostElement.shadowRoot.querySelector('.thumb') as HTMLElement;\n  }\n\n  get slider() {\n    return this.hostElement.shadowRoot.getElementById(\n      'slider'\n    ) as HTMLInputElement;\n  }\n\n  @Watch('showTooltip')\n  onShowTooltipChange() {\n    if (this.showTooltip) {\n      this.tooltip.showTooltip(this.pseudoThumb);\n      return;\n    }\n\n    this.tooltip.hideTooltip();\n  }\n\n  componentWillLoad() {\n    this.a11yAttributes = a11yHostAttributes(this.hostElement, [\n      'role',\n      'aria-valuemin',\n      'aria-valuemax',\n      'aria-valuenow',\n    ]);\n    this.updateRangeVariables();\n  }\n\n  @Watch('value')\n  @Watch('max')\n  @Watch('min')\n  @Watch('traceReference')\n  private updateRangeVariables() {\n    this.rangeInput = between(this.min, this.value, this.max);\n    this.rangeTraceReference = between(this.min, this.traceReference, this.max);\n    this.rangeMin = Math.min(this.min, this.max);\n    this.rangeMax = Math.max(this.min, this.max);\n  }\n\n  private onInput(event: InputEvent) {\n    event.stopPropagation();\n    const value = parseInt(this.slider.value);\n\n    if (!isNaN(value)) {\n      this.rangeInput = value;\n      this.emitInputEvent();\n    }\n  }\n\n  private emitInputEvent() {\n    this.valueChange.emit(this.rangeInput);\n  }\n\n  private isMarkerActive(markerValue: number) {\n    const start = Math.min(this.traceReference, this.rangeInput);\n    const end = Math.max(this.traceReference, this.rangeInput);\n    const value = markerValue;\n\n    return value >= start && value <= end;\n  }\n\n  // Listen globally on window because sometimes the event listener\n  // of the DOM element input itself is not called if the release\n  // click is not inside the element anymore\n  @Listen('pointerup', {\n    target: 'window',\n  })\n  onPointerUp() {\n    this.showTooltip = false;\n  }\n\n  render() {\n    const range = this.rangeMax - this.rangeMin;\n\n    let traceReferenceInPercentage =\n      (this.rangeTraceReference - this.rangeMin) / range;\n\n    let valueInPercentage = (this.rangeInput - this.rangeMin) / range;\n\n    const distance = valueInPercentage - traceReferenceInPercentage;\n\n    let traceStart = traceReferenceInPercentage;\n    let traceEnd = valueInPercentage;\n\n    if (distance <= 0) {\n      traceStart = valueInPercentage;\n      traceEnd = traceReferenceInPercentage;\n    }\n\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n          error: !!this.error,\n        }}\n        onPointerDown={() => setTimeout(() => (this.showTooltip = true))}\n      >\n        <div class=\"slider\">\n          <div class=\"track\">\n            <div\n              class=\"thumb\"\n              style={{\n                left: `calc(${valueInPercentage} * 100% - 8px)`,\n              }}\n            ></div>\n            <div class=\"ticks\">\n              {this.marker\n                ? this.marker.map((markerValue) => {\n                    if (markerValue > this.max || markerValue < this.min) {\n                      return;\n                    }\n\n                    let left = (markerValue - this.rangeMin) / range;\n\n                    return (\n                      <div\n                        class={{\n                          tick: true,\n                          'tick-active':\n                            this.isMarkerActive(markerValue) && this.trace,\n                        }}\n                        style={{\n                          '--tick-value': `${left}`,\n                        }}\n                      ></div>\n                    );\n                  })\n                : null}\n            </div>\n          </div>\n\n          <input\n            id=\"slider\"\n            type=\"range\"\n            list={this.marker ? 'markers' : undefined}\n            step={this.step}\n            min={this.min}\n            max={this.max}\n            value={this.rangeInput}\n            tabindex={this.disabled ? -1 : 0}\n            onInput={(event) => this.onInput(event)}\n            style={{\n              '--value': `${valueInPercentage}`,\n              '--trace-reference': `${traceReferenceInPercentage}`,\n              '--trace-start': `${traceStart}`,\n              '--trace-end': `${traceEnd}`,\n            }}\n            class={{\n              trace:\n                this.trace && traceReferenceInPercentage !== valueInPercentage,\n            }}\n            onFocus={() => {\n              this.showTooltip = true;\n            }}\n            onBlur={() => {\n              this.showTooltip = false;\n            }}\n            role=\"slider\"\n            aria-valuenow={this.rangeInput}\n            aria-valuemin={this.min}\n            aria-valuemax={this.max}\n            {...this.a11yAttributes}\n          />\n\n          <ix-tooltip\n            class={{\n              'hide-tooltip': !this.showTooltip,\n            }}\n            animationFrame={true}\n          >\n            {this.rangeInput}\n          </ix-tooltip>\n        </div>\n        <div class=\"label\">\n          <div class=\"label-start\">\n            <slot name=\"label-start\"></slot>\n          </div>\n          <div class=\"label-end\">\n            <slot name=\"label-end\"></slot>\n          </div>\n        </div>\n        {this.error ? (\n          <ix-typography class={'label-error'} color=\"alarm\">\n            {this.error}\n          </ix-typography>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-spinner.d.ts

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

package/components/ix-spinner.js

@@ -0,0 +1,8 @@
+import { S as Spinner, d as defineCustomElement$1 } from './spinner.js';
+
+const IxSpinner = Spinner;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxSpinner, defineCustomElement };
+
+//# sourceMappingURL=ix-spinner.js.map

package/components/ix-spinner.js.map

@@ -0,0 +1 @@
+{"file":"ix-spinner.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

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

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

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

@@ -0,0 +1,51 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './dropdown-item.js';
+
+const splitButtonItemCss = ":host{display:contents}";
+
+const SplitButtonItem = /*@__PURE__*/ proxyCustomElement(class SplitButtonItem extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.itemClick = createEvent(this, "itemClick", 7);
+    this.icon = undefined;
+    this.label = undefined;
+  }
+  render() {
+    return (h("ix-dropdown-item", { suppressChecked: true, icon: this.icon, label: this.label, onItemClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      }, onClick: (e) => this.itemClick.emit(e) }));
+  }
+  get hostElement() { return this; }
+  static get style() { return splitButtonItemCss; }
+}, [1, "ix-split-button-item", {
+    "icon": [1],
+    "label": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-split-button-item", "ix-dropdown-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-split-button-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SplitButtonItem);
+      }
+      break;
+    case "ix-dropdown-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IxSplitButtonItem = SplitButtonItem;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxSplitButtonItem, defineCustomElement };
+
+//# sourceMappingURL=ix-split-button-item.js.map

package/components/ix-split-button-item.js.map

@@ -0,0 +1 @@
+{"file":"ix-split-button-item.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,yBAAyB;;MC0BvC,eAAe;;;;;;;;;EAkB1B,MAAM;IACJ,QACE,wBACE,eAAe,QACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,CAAC,CAAC;QACb,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;OACrB,EACD,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,GACpB,EACpB;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/split-button-item/split-button-item.css?tag=ix-split-button-item&encapsulation=shadow","./src/components/split-button-item/split-button-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n:host {\n  display: contents;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Prop,\n} from '@stencil/core';\n\n/**\n * @deprecated since 2.0.0. Use the `ix-dropdown-item` component instead.\n */\n@Component({\n  tag: 'ix-split-button-item',\n  styleUrl: 'split-button-item.css',\n  shadow: true,\n})\nexport class SplitButtonItem {\n  /**\n   * Dropdown icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Dropdown label\n   */\n  @Prop() label: string;\n\n  /**\n   * Dropdown item clicked\n   */\n  @Event() itemClick: EventEmitter<MouseEvent>;\n\n  @Element() hostElement: HTMLIxSplitButtonItemElement;\n\n  render() {\n    return (\n      <ix-dropdown-item\n        suppressChecked\n        icon={this.icon}\n        label={this.label}\n        onItemClick={(e) => {\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n        onClick={(e) => this.itemClick.emit(e)}\n      ></ix-dropdown-item>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/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/components/ix-split-button.js

@@ -0,0 +1,97 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$5 } from './button.js';
+import { d as defineCustomElement$4 } from './dropdown.js';
+import { d as defineCustomElement$3 } from './icon-button.js';
+import { d as defineCustomElement$2 } from './spinner.js';
+
+const splitButtonCss = ".btn-group ix-button:first-child .btn{border-top-right-radius:0px;border-bottom-right-radius:0px;border-right:0px}.btn-group ix-button:last-child .btn{border-top-left-radius:0px;border-bottom-left-radius:0px}.btn-group ix-button:not(:first-child):not(:last-child) .btn{border-radius:0px;border-right:0px}:host{display:inline-block}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .btn-group{position:relative;display:inline-flex;vertical-align:middle;width:100%}:host .btn-group>ix-button:nth-child(1){width:calc(100% - 2rem)}:host .btn-group>ix-button:nth-child(2){width:2rem}:host .middle-gap{gap:0.125rem}:host .left-button-border{border-top-width:0.125rem;border-right-width:0;border-left-width:0.125rem;border-bottom-width:0.125rem}";
+
+const SplitButton = /*@__PURE__*/ proxyCustomElement(class SplitButton extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.buttonClick = createEvent(this, "buttonClick", 7);
+    this.variant = 'primary';
+    this.outline = false;
+    this.ghost = false;
+    this.label = undefined;
+    this.icon = '';
+    this.splitIcon = 'context-menu';
+    this.disabled = false;
+    this.placement = 'bottom-start';
+    this.toggle = false;
+  }
+  linkTriggerRef() {
+    if (this.triggerElement && this.dropdownElement) {
+      this.dropdownElement.trigger = this.triggerElement;
+    }
+  }
+  componentDidLoad() {
+    this.linkTriggerRef();
+  }
+  render() {
+    const buttonAttributes = {
+      variant: this.variant,
+      outline: this.outline,
+      ghost: this.ghost,
+      disabled: this.disabled,
+      class: {
+        'left-button-border': !this.outline,
+      },
+    };
+    return (h(Host, null, h("div", { class: { 'btn-group': true, 'middle-gap': !this.outline } }, this.label ? (h("ix-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e) }), this.label)) : (h("ix-icon-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e) }))), h("ix-icon-button", Object.assign({}, buttonAttributes, { ref: (r) => (this.triggerElement = r), class: 'anchor', icon: this.splitIcon }))), h("ix-dropdown", { ref: (r) => (this.dropdownElement = r) }, h("slot", null))));
+  }
+  get hostElement() { return this; }
+  static get style() { return splitButtonCss; }
+}, [1, "ix-split-button", {
+    "variant": [1],
+    "outline": [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-button", "ix-dropdown", "ix-icon-button", "ix-spinner"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-split-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SplitButton);
+      }
+      break;
+    case "ix-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "ix-dropdown":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ix-icon-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ix-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IxSplitButton = SplitButton;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxSplitButton, defineCustomElement };
+
+//# sourceMappingURL=ix-split-button.js.map

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

@@ -0,0 +1 @@
+{"file":"ix-split-button.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,oxCAAoxC;;MC6B9xC,WAAW;;;;;;mBAMgB,SAAS;mBAK7B,KAAK;iBAKP,KAAK;;gBAUN,EAAE;qBAKG,cAAc;oBAKf,KAAK;qBAKc,cAAc;kBAElC,KAAK;;EAUf,cAAc;IACpB,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,eAAe,EAAE;MAC/C,IAAI,CAAC,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC;KACpD;GACF;EAED,gBAAgB;IACd,IAAI,CAAC,cAAc,EAAE,CAAC;GACvB;EAED,MAAM;IACJ,MAAM,gBAAgB,GAAG;MACvB,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,KAAK,EAAE,IAAI,CAAC,KAAK;MACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,KAAK,EAAE;QACL,oBAAoB,EAAE,CAAC,IAAI,CAAC,OAAO;OACpC;KACF,CAAC;IACF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,IAC3D,IAAI,CAAC,KAAK,IACT,iCACM,gBAAgB,IACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,KAEvC,IAAI,CAAC,KAAK,CACD,KAEZ,sCACM,gBAAgB,IACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,IACxB,CACnB,EACD,sCACM,gBAAgB,IACpB,GAAG,EAAE,CAAC,CAAC,MAAM,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,EACrC,KAAK,EAAE,QAAQ,EACf,IAAI,EAAE,IAAI,CAAC,SAAS,IACJ,CACd,EAEN,mBAAa,GAAG,EAAE,CAAC,CAAC,MAAM,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,IACjD,eAAa,CACD,CACT,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/split-button/split-button.scss?tag=ix-split-button&encapsulation=shadow","./src/components/split-button/split-button.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n@import 'legacy/components/button-group';\n\n:host {\n  @include ix-component;\n  display: inline-block;\n\n  .btn-group {\n    position: relative;\n    display: inline-flex;\n    vertical-align: middle;\n    width: 100%;\n\n    > ix-button:nth-child(1) {\n      width: calc(100% - 2rem);\n    }\n\n    > ix-button:nth-child(2) {\n      width: 2rem;\n    }\n  }\n\n  .middle-gap {\n    gap: 0.125rem;\n  }\n\n  .left-button-border {\n    border-top-width: 0.125rem;\n    border-right-width: 0;\n    border-left-width: 0.125rem;\n    border-bottom-width: 0.125rem;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { ButtonVariant } from '../button/button';\nimport { AlignedPlacement } from '../dropdown/placement';\n\nexport type SplitButtonVariant = ButtonVariant;\n\n@Component({\n  tag: 'ix-split-button',\n  styleUrl: 'split-button.scss',\n  shadow: true,\n})\nexport class SplitButton {\n  @Element() hostElement!: HTMLIxSplitButtonElement;\n\n  /**\n   * Color variant of button\n   */\n  @Prop() variant: SplitButtonVariant = 'primary';\n\n  /**\n   * Button outline variant\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button invisible\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Button label\n   */\n  @Prop() label: string;\n\n  /**\n   * Button icon\n   */\n  @Prop() icon = '';\n\n  /**\n   * Icon of the button on the right\n   */\n  @Prop() splitIcon = 'context-menu';\n\n  /**\n   * Disabled\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Placement of the dropdown\n   */\n  @Prop() placement: AlignedPlacement = 'bottom-start';\n\n  @State() toggle = false;\n\n  /**\n   * Button clicked\n   */\n  @Event() buttonClick: EventEmitter<MouseEvent>;\n\n  private triggerElement: HTMLElement;\n  private dropdownElement: HTMLIxDropdownElement;\n\n  private linkTriggerRef() {\n    if (this.triggerElement && this.dropdownElement) {\n      this.dropdownElement.trigger = this.triggerElement;\n    }\n  }\n\n  componentDidLoad() {\n    this.linkTriggerRef();\n  }\n\n  render() {\n    const buttonAttributes = {\n      variant: this.variant,\n      outline: this.outline,\n      ghost: this.ghost,\n      disabled: this.disabled,\n      class: {\n        'left-button-border': !this.outline,\n      },\n    };\n    return (\n      <Host>\n        <div class={{ 'btn-group': true, 'middle-gap': !this.outline }}>\n          {this.label ? (\n            <ix-button\n              {...buttonAttributes}\n              icon={this.icon}\n              onClick={(e) => this.buttonClick.emit(e)}\n            >\n              {this.label}\n            </ix-button>\n          ) : (\n            <ix-icon-button\n              {...buttonAttributes}\n              icon={this.icon}\n              onClick={(e) => this.buttonClick.emit(e)}\n            ></ix-icon-button>\n          )}\n          <ix-icon-button\n            {...buttonAttributes}\n            ref={(r) => (this.triggerElement = r)}\n            class={'anchor'}\n            icon={this.splitIcon}\n          ></ix-icon-button>\n        </div>\n\n        <ix-dropdown ref={(r) => (this.dropdownElement = r)}>\n          <slot></slot>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/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/components/ix-tab-item.js

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

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

@@ -0,0 +1 @@
+{"file":"ix-tab-item.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/components/ix-tabs.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/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/components/ix-tabs.js

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

package/components/ix-tabs.js.map

@@ -0,0 +1 @@
+{"file":"ix-tabs.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/components/ix-tile.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/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/components/ix-tile.js

@@ -0,0 +1,59 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const tileCss = ":host{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)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .tile-header{display:flex;align-items:center;-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)}:host .tile-header,:host .tile-subheader,:host .tile-content,:host .tile-footer{padding:0 1rem}:host .tile-header,:host .tile-content{flex-grow:1}:host .tile-header.has-content{display:flex;height:2.5rem;max-height:2.5rem;-webkit-padding-end:0.5rem;padding-inline-end:0.5rem}:host .tile-subheader{color:var(--theme-btn-invisible-secondary--color);flex-grow:0}:host .tile-footer.has-content{-webkit-border-before:1px solid var(--theme-color-1);border-block-start:1px solid var(--theme-color-1);height:2.5rem}:host(.tile-small){height:2.5rem;min-height:2.5rem;max-height:2.5rem}:host(.tile-medium){height:5rem;min-height:5rem;max-height:5rem}:host(.tile-big){height:10rem;min-height:10rem;max-height:10rem}:host(:active),:host(:focus-visible),:host(:visited){outline:none}";
+
+const Tile = /*@__PURE__*/ proxyCustomElement(class Tile extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.size = 'medium';
+    this.hasHeaderSlot = false;
+    this.hasFooterSlot = false;
+  }
+  handleHeaderSlotChange() {
+    this.hasHeaderSlot = !!this.hostElement.querySelector('[slot="header"]');
+  }
+  handleFooterSlotChange() {
+    this.hasFooterSlot = !!this.hostElement.querySelector('[slot="footer"]');
+  }
+  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': true,
+        'has-content': this.hasHeaderSlot,
+      } }, h("slot", { name: "header", onSlotchange: () => this.handleHeaderSlotChange() })), h("div", { class: "tile-subheader" }, h("slot", { name: "subheader" })), h("div", { class: "tile-content" }, h("slot", null)), h("div", { class: {
+        'tile-footer': true,
+        'has-content': this.hasFooterSlot,
+      } }, h("slot", { name: "footer", onSlotchange: () => this.handleFooterSlotChange() }))));
+  }
+  get hostElement() { return this; }
+  static get style() { return tileCss; }
+}, [1, "ix-tile", {
+    "size": [1],
+    "hasHeaderSlot": [32],
+    "hasFooterSlot": [32]
+  }]);
+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 };
+
+//# sourceMappingURL=ix-tile.js.map