@siemens/ix 2.0.0-beta.0 → 2.0.0-beta.1

package/dist/esm/ix-date-time-card.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-7334ee80.js';
+import { r as registerInstance, h, H as Host } from './index-eb0be730.js';
 
-const dateTimeCardCss = ":host *,:host *::after,:host *::before{box-sizing:border-box}:host .card{background-color:var(--theme-menu--background);width:100%;box-shadow:none;border:none;border-radius:unset;display:flex;flex-direction:column}:host .card.individual{box-shadow:0 0 2px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 12px 18px 0px rgba(0, 0, 0, 0.1);border:1px solid var(--theme-menu--border-color);border-radius:4px}:host .card.left{border-radius:4px 0 0 4px;height:100%}:host .card.right{border-radius:0 4px 4px 0;height:100%}:host .card .header{padding:1rem;flex:0 1 auto}:host .card .separator{border:1px solid var(--theme-datepicker-separator--background);width:100%;flex:0 1 auto}:host .card .content{padding:0px 1rem 1rem 1rem;flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}";
+const dateTimeCardCss = ":host{}: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 .card{background-color:var(--theme-menu--background);width:100%;box-shadow:none;border:none;border-radius:unset;display:flex;flex-direction:column}:host .card.individual{box-shadow:0 0 2px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 12px 18px 0px rgba(0, 0, 0, 0.1);border:1px solid var(--theme-menu--border-color);border-radius:4px}:host .card.left{border-radius:4px 0 0 4px;height:100%}:host .card.right{border-radius:0 4px 4px 0;height:100%}:host .card .header{padding:1rem;flex:0 1 auto}:host .card .separator{border:1px solid var(--theme-datepicker-separator--background);width:100%;flex:0 1 auto}:host .card .content{padding:0px 1rem 1rem 1rem;flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}";
 
 const DateTimeCard = class {
   constructor(hostRef) {

package/dist/esm/ix-date-time-card.entry.js.map

@@ -1 +1 @@
-{"file":"ix-date-time-card.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,myBAAmyB;;MCqB9yB,YAAY;;;sBAIO,IAAI;mBAKK,SAAS;;EAExC,WAAW;IACjB,OAAO;MACL,IAAI,EAAE,IAAI;MACV,UAAU,EAAE,IAAI,CAAC,UAAU;MAC3B,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;MAC7B,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;KAChC,CAAC;GACH;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,IAC5B,WAAK,KAAK,EAAC,QAAQ,IACjB,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,EAEN,WAAK,KAAK,EAAC,WAAW,GAAO,EAE7B,WAAK,KAAK,EAAC,SAAS,IAClB,eAAa,CACT,CACF,CACD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/date-time-card/date-time-card.scss?tag=ix-date-time-card&encapsulation=shadow","./src/components/date-time-card/date-time-card.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@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  .card {\n    background-color: var(--theme-menu--background);\n    width: 100%;\n    box-shadow: none;\n    border: none;\n    border-radius: unset;\n    display: flex;\n    flex-direction: column;\n\n    &.individual {\n      box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1),\n        0 12px 18px 0px rgba(0, 0, 0, 0.1);\n      border: 1px solid var(--theme-menu--border-color);\n      border-radius: 4px;\n    }\n\n    &.left {\n      border-radius: 4px 0 0 4px;\n      height: 100%;\n    }\n\n    &.right {\n      border-radius: 0 4px 4px 0;\n      height: 100%;\n    }\n\n    .header {\n      padding: $default-space;\n      flex: 0 1 auto;\n    }\n\n    .separator {\n      border: 1px solid var(--theme-datepicker-separator--background);\n      width: 100%;\n      flex: 0 1 auto;\n    }\n\n    .content {\n      padding: 0px $default-space $default-space $default-space;\n      flex: 1 1 auto;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n    }\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 { Component, h, Host, Prop } from '@stencil/core';\n\nexport type DateTimeCardCorners = 'rounded' | 'left' | 'right';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'ix-date-time-card',\n  styleUrl: 'date-time-card.scss',\n  shadow: true,\n})\nexport class DateTimeCard {\n  /**\n   * set styles\n   */\n  @Prop() individual: boolean = true;\n\n  /**\n   * Set corners style\n   */\n  @Prop() corners: DateTimeCardCorners = 'rounded';\n\n  private cardClasses() {\n    return {\n      card: true,\n      individual: this.individual,\n      left: this.corners === 'left',\n      right: this.corners === 'right',\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.cardClasses()}>\n          <div class=\"header\">\n            <slot name=\"header\"></slot>\n          </div>\n\n          <div class=\"separator\"></div>\n\n          <div class=\"content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-date-time-card.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,y0CAAy0C;;MCqBp1C,YAAY;;;sBAIO,IAAI;mBAKK,SAAS;;EAExC,WAAW;IACjB,OAAO;MACL,IAAI,EAAE,IAAI;MACV,UAAU,EAAE,IAAI,CAAC,UAAU;MAC3B,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;MAC7B,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;KAChC,CAAC;GACH;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,IAC5B,WAAK,KAAK,EAAC,QAAQ,IACjB,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,EAEN,WAAK,KAAK,EAAC,WAAW,GAAO,EAE7B,WAAK,KAAK,EAAC,SAAS,IAClB,eAAa,CACT,CACF,CACD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/date-time-card/date-time-card.scss?tag=ix-date-time-card&encapsulation=shadow","./src/components/date-time-card/date-time-card.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@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  .card {\n    background-color: var(--theme-menu--background);\n    width: 100%;\n    box-shadow: none;\n    border: none;\n    border-radius: unset;\n    display: flex;\n    flex-direction: column;\n\n    &.individual {\n      box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1),\n        0 12px 18px 0px rgba(0, 0, 0, 0.1);\n      border: 1px solid var(--theme-menu--border-color);\n      border-radius: 4px;\n    }\n\n    &.left {\n      border-radius: 4px 0 0 4px;\n      height: 100%;\n    }\n\n    &.right {\n      border-radius: 0 4px 4px 0;\n      height: 100%;\n    }\n\n    .header {\n      padding: $default-space;\n      flex: 0 1 auto;\n    }\n\n    .separator {\n      border: 1px solid var(--theme-datepicker-separator--background);\n      width: 100%;\n      flex: 0 1 auto;\n    }\n\n    .content {\n      padding: 0px $default-space $default-space $default-space;\n      flex: 1 1 auto;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n    }\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 { Component, h, Host, Prop } from '@stencil/core';\n\nexport type DateTimeCardCorners = 'rounded' | 'left' | 'right';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'ix-date-time-card',\n  styleUrl: 'date-time-card.scss',\n  shadow: true,\n})\nexport class DateTimeCard {\n  /**\n   * set styles\n   */\n  @Prop() individual: boolean = true;\n\n  /**\n   * Set corners style\n   */\n  @Prop() corners: DateTimeCardCorners = 'rounded';\n\n  private cardClasses() {\n    return {\n      card: true,\n      individual: this.individual,\n      left: this.corners === 'left',\n      right: this.corners === 'right',\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.cardClasses()}>\n          <div class=\"header\">\n            <slot name=\"header\"></slot>\n          </div>\n\n          <div class=\"separator\"></div>\n\n          <div class=\"content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ix-datetime-picker.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-7334ee80.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-eb0be730.js';
 
-const datetimePickerCss = ":host{display:block;background-color:var(--theme-menu--background);border-radius:4px;position:relative;width:32.6875rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host .flex{display:flex;justify-content:center}:host .btn-select-date{position:absolute;bottom:1rem;right:1rem}:host .separator{border:1px solid var(--theme-datepicker-separator--background);width:100%;margin-top:72px;height:1px}";
+const datetimePickerCss = ":host{display:block;background-color:var(--theme-menu--background);border-radius:4px;position:relative;width:32.6875rem}: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 .flex{display:flex;justify-content:center}:host .btn-select-date{position:absolute;bottom:1rem;right:1rem}:host .separator{border:1px solid var(--theme-datepicker-separator--background);width:100%;margin-top:72px;height:1px}";
 
 const DateTimePicker = class {
   constructor(hostRef) {

package/dist/esm/ix-datetime-picker.entry.js.map

@@ -1 +1 @@
-{"file":"ix-datetime-picker.entry.js","mappings":"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","names":[],"sources":["./src/components/datetime-picker/datetime-picker.scss?tag=ix-datetime-picker&encapsulation=shadow","./src/components/datetime-picker/datetime-picker.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@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: block;\n  background-color: var(--theme-menu--background);\n  border-radius: 4px;\n  position: relative;\n  width: 32.6875rem;\n\n  .flex {\n    display: flex;\n    justify-content: center;\n  }\n\n  .btn-select-date {\n    position: absolute;\n    bottom: $default-space;\n    right: $default-space;\n  }\n\n  .separator {\n    border: 1px solid var(--theme-datepicker-separator--background);\n    width: 100%;\n    margin-top: 72px;\n    height: 1px;\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 { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport type { DateChangeEvent } from '../date-picker/date-picker';\n\nexport type DateTimeSelectEvent = {\n  from: string;\n  to: string;\n  time: string;\n};\n\nexport type DateTimeDateChangeEvent =\n  | string\n  | Omit<DateTimeSelectEvent, 'time'>;\n\n@Component({\n  tag: 'ix-datetime-picker',\n  styleUrl: 'datetime-picker.scss',\n  shadow: true,\n})\nexport class DateTimePicker {\n  /**\n   * Set range size\n   */\n  @Prop() range = true;\n\n  /**\n   * Show hour input\n   */\n  @Prop() showHour = false;\n\n  /**\n   * Show minutes input\n   */\n  @Prop() showMinutes = false;\n\n  /**\n   * Show seconds input\n   */\n  @Prop() showSeconds = false;\n\n  /**\n   * The earliest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   *\n   * @since 1.1.0\n   */\n  @Prop() minDate: string;\n\n  /**\n   * The latest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   *\n   * @since 1.1.0\n   */\n  @Prop() maxDate: string;\n\n  /**\n   * Date format string.\n   * See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens.\n   *\n   * @since 1.1.0\n   */\n  @Prop() dateFormat: string = 'yyyy/LL/dd';\n\n  /**\n   * Time format string.\n   * See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens.\n   *\n   * @since 1.1.0\n   */\n  @Prop() timeFormat: string = 'TT';\n\n  /**\n   * Picker date. If the picker is in range mode this property is the start date.\n   *\n   * Format is based on `format`\n   *\n   * @since 1.1.0\n   */\n  @Prop() from: string;\n\n  /**\n   * Picker date. If the picker is in range mode this property is the end date.\n   * If the picker is not in range mode leave this value `null`\n   *\n   * Format is based on `format`\n   *\n   * @since 1.1.0\n   */\n  @Prop() to: string | null = null;\n\n  /**\n   * Select time with format string\n   *\n   * @since 1.1.0\n   */\n  @Prop() time: string;\n\n  /**\n   * Show time reference input\n   * Time reference is default aligned with @see {this.timeFormat}\n   *\n   * @since 1.1.0\n   */\n  @Prop() showTimeReference = undefined;\n\n  /**\n   * Default behavior of the done event is to join the two events (date and time) into one combined string output.\n   * This combination can be configured over the delimiter\n   *\n   * @since 1.1.0\n   */\n  @Prop() eventDelimiter = ' - ';\n\n  /**\n   * Set time reference\n   */\n  @Prop() timeReference: 'AM' | 'PM';\n\n  /**\n   * Text of date select button\n   *\n   * @since 1.1.0\n   */\n  @Prop() textSelectDate = 'Done';\n\n  /**\n   * Done event\n   *\n   * Set `doneEventDelimiter` to null or undefine to get the typed event\n   */\n  @Event() done: EventEmitter<string>;\n\n  /**\n   * Time change\n   *\n   * @since 1.1.0\n   */\n  @Event() timeChange: EventEmitter<string>;\n\n  /**\n   * Date change\n   *\n   * @since 1.1.0\n   */\n  @Event() dateChange: EventEmitter<DateTimeDateChangeEvent>;\n\n  /**\n   * Date selection event is fired after confirm button is pressend\n   *\n   * @since 1.1.0\n   */\n  @Event() dateSelect: EventEmitter<DateTimeSelectEvent>;\n\n  private datePickerElement: HTMLIxDatePickerElement;\n  private timePickerElement: HTMLIxTimePickerElement;\n\n  private _from: string;\n  private _to: string;\n  private _time: string;\n\n  private onDone() {\n    this.done.emit(\n      [this._from, this._to ?? '', this._time].join(this.eventDelimiter)\n    );\n\n    this.dateSelect.emit({\n      from: this._from,\n      to: this._to,\n      time: this._time,\n    });\n  }\n\n  private async onDateChange(event: CustomEvent<string | DateChangeEvent>) {\n    event.preventDefault();\n    event.stopPropagation();\n    const { detail: date } = event;\n    this.dateChange.emit(date);\n\n    const currentDateTime = await this.datePickerElement.getCurrentDate();\n    this._from = currentDateTime.start;\n    this._to = currentDateTime.end;\n  }\n\n  private async onTimeChange(event: CustomEvent<string>) {\n    event.preventDefault();\n    event.stopPropagation();\n    const { detail: time } = event;\n    this.timeChange.emit(time);\n\n    const currentDateTime = await this.timePickerElement.getCurrentTime();\n    this._time = currentDateTime;\n  }\n\n  componentDidLoad() {\n    this._from = this.from;\n    this._to = this.to;\n    this._time = this.time;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"flex\">\n          <div class=\"separator\"></div>\n          <ix-date-picker\n            ref={(ref) => (this.datePickerElement = ref)}\n            corners=\"left\"\n            individual={false}\n            range={this.range}\n            onDateChange={(event) => this.onDateChange(event)}\n            from={this.from}\n            to={this.to}\n            format={this.dateFormat}\n            minDate={this.minDate}\n            maxDate={this.maxDate}\n            eventDelimiter={this.eventDelimiter}\n          ></ix-date-picker>\n\n          <ix-time-picker\n            ref={(ref) => (this.timePickerElement = ref)}\n            corners=\"right\"\n            individual={false}\n            showHour={this.showHour}\n            showMinutes={this.showMinutes}\n            showSeconds={this.showSeconds}\n            showTimeReference={this.showTimeReference}\n            onTimeChange={(event) => this.onTimeChange(event)}\n            time={this.time}\n            format={this.timeFormat}\n            timeReference={this.timeReference}\n          ></ix-time-picker>\n          <div class=\"separator\"></div>\n        </div>\n\n        <ix-button class=\"btn-select-date\" onClick={() => this.onDone()}>\n          {this.textSelectDate}\n        </ix-button>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-datetime-picker.entry.js","mappings":"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","names":[],"sources":["./src/components/datetime-picker/datetime-picker.scss?tag=ix-datetime-picker&encapsulation=shadow","./src/components/datetime-picker/datetime-picker.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@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: block;\n  background-color: var(--theme-menu--background);\n  border-radius: 4px;\n  position: relative;\n  width: 32.6875rem;\n\n  .flex {\n    display: flex;\n    justify-content: center;\n  }\n\n  .btn-select-date {\n    position: absolute;\n    bottom: $default-space;\n    right: $default-space;\n  }\n\n  .separator {\n    border: 1px solid var(--theme-datepicker-separator--background);\n    width: 100%;\n    margin-top: 72px;\n    height: 1px;\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 { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport type { DateChangeEvent } from '../date-picker/date-picker';\n\nexport type DateTimeSelectEvent = {\n  from: string;\n  to: string;\n  time: string;\n};\n\nexport type DateTimeDateChangeEvent =\n  | string\n  | Omit<DateTimeSelectEvent, 'time'>;\n\n@Component({\n  tag: 'ix-datetime-picker',\n  styleUrl: 'datetime-picker.scss',\n  shadow: true,\n})\nexport class DateTimePicker {\n  /**\n   * Set range size\n   */\n  @Prop() range = true;\n\n  /**\n   * Show hour input\n   */\n  @Prop() showHour = false;\n\n  /**\n   * Show minutes input\n   */\n  @Prop() showMinutes = false;\n\n  /**\n   * Show seconds input\n   */\n  @Prop() showSeconds = false;\n\n  /**\n   * The earliest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   *\n   * @since 1.1.0\n   */\n  @Prop() minDate: string;\n\n  /**\n   * The latest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   *\n   * @since 1.1.0\n   */\n  @Prop() maxDate: string;\n\n  /**\n   * Date format string.\n   * See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens.\n   *\n   * @since 1.1.0\n   */\n  @Prop() dateFormat: string = 'yyyy/LL/dd';\n\n  /**\n   * Time format string.\n   * See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens.\n   *\n   * @since 1.1.0\n   */\n  @Prop() timeFormat: string = 'TT';\n\n  /**\n   * Picker date. If the picker is in range mode this property is the start date.\n   *\n   * Format is based on `format`\n   *\n   * @since 1.1.0\n   */\n  @Prop() from: string;\n\n  /**\n   * Picker date. If the picker is in range mode this property is the end date.\n   * If the picker is not in range mode leave this value `null`\n   *\n   * Format is based on `format`\n   *\n   * @since 1.1.0\n   */\n  @Prop() to: string | null = null;\n\n  /**\n   * Select time with format string\n   *\n   * @since 1.1.0\n   */\n  @Prop() time: string;\n\n  /**\n   * Show time reference input\n   * Time reference is default aligned with @see {this.timeFormat}\n   *\n   * @since 1.1.0\n   */\n  @Prop() showTimeReference = undefined;\n\n  /**\n   * Default behavior of the done event is to join the two events (date and time) into one combined string output.\n   * This combination can be configured over the delimiter\n   *\n   * @since 1.1.0\n   */\n  @Prop() eventDelimiter = ' - ';\n\n  /**\n   * Set time reference\n   */\n  @Prop() timeReference: 'AM' | 'PM';\n\n  /**\n   * Text of date select button\n   *\n   * @since 1.1.0\n   */\n  @Prop() textSelectDate = 'Done';\n\n  /**\n   * Done event\n   *\n   * Set `doneEventDelimiter` to null or undefine to get the typed event\n   */\n  @Event() done: EventEmitter<string>;\n\n  /**\n   * Time change\n   *\n   * @since 1.1.0\n   */\n  @Event() timeChange: EventEmitter<string>;\n\n  /**\n   * Date change\n   *\n   * @since 1.1.0\n   */\n  @Event() dateChange: EventEmitter<DateTimeDateChangeEvent>;\n\n  /**\n   * Date selection event is fired after confirm button is pressend\n   *\n   * @since 1.1.0\n   */\n  @Event() dateSelect: EventEmitter<DateTimeSelectEvent>;\n\n  private datePickerElement: HTMLIxDatePickerElement;\n  private timePickerElement: HTMLIxTimePickerElement;\n\n  private _from: string;\n  private _to: string;\n  private _time: string;\n\n  private onDone() {\n    this.done.emit(\n      [this._from, this._to ?? '', this._time].join(this.eventDelimiter)\n    );\n\n    this.dateSelect.emit({\n      from: this._from,\n      to: this._to,\n      time: this._time,\n    });\n  }\n\n  private async onDateChange(event: CustomEvent<string | DateChangeEvent>) {\n    event.preventDefault();\n    event.stopPropagation();\n    const { detail: date } = event;\n    this.dateChange.emit(date);\n\n    const currentDateTime = await this.datePickerElement.getCurrentDate();\n    this._from = currentDateTime.start;\n    this._to = currentDateTime.end;\n  }\n\n  private async onTimeChange(event: CustomEvent<string>) {\n    event.preventDefault();\n    event.stopPropagation();\n    const { detail: time } = event;\n    this.timeChange.emit(time);\n\n    const currentDateTime = await this.timePickerElement.getCurrentTime();\n    this._time = currentDateTime;\n  }\n\n  componentDidLoad() {\n    this._from = this.from;\n    this._to = this.to;\n    this._time = this.time;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"flex\">\n          <div class=\"separator\"></div>\n          <ix-date-picker\n            ref={(ref) => (this.datePickerElement = ref)}\n            corners=\"left\"\n            individual={false}\n            range={this.range}\n            onDateChange={(event) => this.onDateChange(event)}\n            from={this.from}\n            to={this.to}\n            format={this.dateFormat}\n            minDate={this.minDate}\n            maxDate={this.maxDate}\n            eventDelimiter={this.eventDelimiter}\n          ></ix-date-picker>\n\n          <ix-time-picker\n            ref={(ref) => (this.timePickerElement = ref)}\n            corners=\"right\"\n            individual={false}\n            showHour={this.showHour}\n            showMinutes={this.showMinutes}\n            showSeconds={this.showSeconds}\n            showTimeReference={this.showTimeReference}\n            onTimeChange={(event) => this.onTimeChange(event)}\n            time={this.time}\n            format={this.timeFormat}\n            timeReference={this.timeReference}\n          ></ix-time-picker>\n          <div class=\"separator\"></div>\n        </div>\n\n        <ix-button class=\"btn-select-date\" onClick={() => this.onDone()}>\n          {this.textSelectDate}\n        </ix-button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ix-divider.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-7334ee80.js';
+import { r as registerInstance, h, H as Host } from './index-eb0be730.js';
 
 const dividerCss = ":host{display:block;position:relative;width:100%;border:0.0625rem solid var(--theme-color-x-weak-bdr);margin:0.25rem 0px}";
 

package/dist/esm/ix-drawer.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-7334ee80.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-eb0be730.js';
 import { a as anime } from './anime.es-185e9087.js';
 
-const drawerCss = ":host{top:0;right:0;box-shadow:var(--theme-box-shadow-level-3);visibility:hidden;display:flex;position:absolute;flex-flow:column nowrap;justify-content:flex-start;align-items:center;max-height:100vh;min-height:1.5rem;background-color:var(--theme-color-1);border-radius:0.25rem;transition:all 300ms ease-out}:host *,:host *::after,:host *::before{box-sizing:border-box}:host .toggle{z-index:100;visibility:visible}:host .drawer-container.full-height{min-height:100%}:host .header{display:flex;position:relative;align-items:center;justify-content:flex-end;padding:0.5rem;width:100%;order:1}:host .header .header-content{flex-grow:1;margin-right:1rem}:host .content{position:relative;flex:1;flex-grow:1;order:2;height:100%;width:100%;overflow-y:auto}";
+const drawerCss = ":host{top:0;right:0;box-shadow:var(--theme-box-shadow-level-3);visibility:hidden;display:flex;position:absolute;flex-flow:column nowrap;justify-content:flex-start;align-items:center;max-height:100vh;min-height:1.5rem;background-color:var(--theme-color-1);border-radius:0.25rem;transition:all 300ms ease-out}: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 .toggle{z-index:100;visibility:visible}:host .drawer-container.full-height{min-height:100%}:host .header{display:flex;position:relative;align-items:center;justify-content:flex-end;padding:0.5rem;width:100%;order:1}:host .header .header-content{flex-grow:1;margin-right:1rem}:host .content{position:relative;flex:1;flex-grow:1;order:2;height:100%;width:100%;overflow-y:auto}";
 
 const Drawer = class {
   constructor(hostRef) {

package/dist/esm/ix-drawer.entry.js.map

@@ -1 +1 @@
-{"file":"ix-drawer.entry.js","mappings":"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","names":[],"sources":["./src/components/drawer/drawer.scss?tag=ix-drawer&encapsulation=shadow","./src/components/drawer/drawer.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 'mixins/shadows';\n@import 'common-variables';\n\n:host {\n  @include ix-component;\n\n  top: 0;\n  right: 0;\n  @include box-shadow(3);\n\n  visibility: hidden;\n\n  display: flex;\n  position: absolute;\n  flex-flow: column nowrap;\n  justify-content: flex-start;\n  align-items: center;\n\n  max-height: 100vh;\n  min-height: $large-space;\n  background-color: var(--theme-color-1);\n  border-radius: $default-border-radius;\n\n  transition: all $medium-time ease-out;\n\n  .toggle {\n    z-index: 100;\n    visibility: visible;\n  }\n\n  .drawer-container.full-height {\n    min-height: 100%;\n  }\n\n  .header {\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: flex-end;\n    padding: 0.5rem;\n    width: 100%;\n    order: 1;\n\n    .header-content {\n      flex-grow: 1;\n      margin-right: $default-space;\n    }\n  }\n\n  .content {\n    position: relative;\n    flex: 1;\n    flex-grow: 1;\n    order: 2;\n    height: 100%;\n    width: 100%;\n    overflow-y: auto;\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  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\n\n@Component({\n  tag: 'ix-drawer',\n  styleUrl: 'drawer.scss',\n  shadow: true,\n})\nexport class Drawer {\n  /**\n   * Show or hide the drawer\n   */\n  @Prop({ mutable: true }) show = false;\n\n  /**\n   * Fired in case of an outside click during drawer showed state\n   */\n  @Prop() closeOnClickOutside = true;\n\n  /**\n   * Render the drawer with maximum height\n   */\n  @Prop() fullHeight = false;\n\n  /**\n   * Min width interpreted as REM\n   */\n  @Prop() minWidth = 16;\n\n  /**\n   * Max width interpreted as REM\n   */\n  @Prop() maxWidth = 28;\n\n  /**\n   * Width interpreted as REM if not set to 'auto'\n   */\n  @Prop() width: number | 'auto' = this.minWidth;\n\n  /**\n   * Fire event after drawer is open\n   */\n  @Event() open: EventEmitter;\n\n  /**\n   * Fire event after drawer is close\n   */\n  @Event() drawerClose: EventEmitter;\n\n  private static duration = 300;\n  private callback = this.clickedOutside.bind(this);\n  private divElement?: HTMLElement;\n\n  @Watch('show')\n  onShowChanged(newValue: boolean) {\n    this.show = newValue !== undefined ? newValue : !this.show;\n    this.toggleDrawer(this.show);\n  }\n\n  /**\n   * Toggle or define show state of drawer\n   * @param show Overwrite toggle state with boolean\n   */\n  @Method()\n  async toggleDrawer(show?: boolean): Promise<void> {\n    this.show = show !== undefined ? show : !this.show;\n\n    if (show) {\n      this.open.emit();\n      this.slideInRight(this.divElement);\n      setTimeout(() => {\n        window.addEventListener('mousedown', this.callback);\n      }, 300);\n    } else {\n      this.drawerClose.emit();\n      this.slideOutRight(this.divElement);\n      window.removeEventListener('mousedown', this.callback);\n    }\n\n    return Promise.resolve();\n  }\n\n  private onCloseClicked() {\n    this.show = false;\n  }\n\n  private clickedOutside(evt: any) {\n    if (!this.closeOnClickOutside) {\n      return;\n    }\n\n    const target = evt.target;\n    const closestElement = target.closest('#div-container');\n    const btn = target.closest('#drawer-btn');\n\n    if (\n      evt.target.type !== 'button' &&\n      closestElement !== this.divElement &&\n      target !== btn\n    ) {\n      this.show = false;\n    }\n  }\n\n  private slideOutRight(el: HTMLElement) {\n    anime({\n      targets: el,\n      duration: Drawer.duration,\n      translateX: [0, '16rem'],\n      opacity: [1, 0],\n      easing: 'easeInSine',\n      complete: () => {\n        el.classList.add('d-none');\n      },\n    });\n  }\n\n  private slideInRight(el: HTMLElement) {\n    anime({\n      targets: el,\n      duration: Drawer.duration,\n      translateX: ['16rem', 0],\n      opacity: [0, 1],\n      easing: 'easeOutSine',\n      begin: () => {\n        el.classList.remove('d-none');\n      },\n    });\n  }\n\n  componentDidLoad() {\n    this.onShowChanged(this.show);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'drawer-container': true,\n          toggle: this.show,\n          'full-height': this.fullHeight,\n          'd-none': true,\n        }}\n        style={{\n          width: this.width === 'auto' ? this.width : `${this.width}rem`,\n          'min-width': `${this.minWidth}rem`,\n          'max-width': `${this.maxWidth}rem`,\n        }}\n        ref={(el) => (this.divElement = el as HTMLElement)}\n        data-testid=\"container\"\n        id=\"div-container\"\n      >\n        <div class=\"header\">\n          <div class=\"header-content\">\n            <slot name=\"header\"></slot>\n          </div>\n          <ix-icon-button\n            class=\"close-button\"\n            icon=\"close\"\n            size=\"24\"\n            ghost\n            onClick={() => this.onCloseClicked()}\n            data-testid=\"close-button\"\n          ></ix-icon-button>\n        </div>\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-drawer.entry.js","mappings":"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","names":[],"sources":["./src/components/drawer/drawer.scss?tag=ix-drawer&encapsulation=shadow","./src/components/drawer/drawer.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 'mixins/shadows';\n@import 'common-variables';\n\n:host {\n  @include ix-component;\n\n  top: 0;\n  right: 0;\n  @include box-shadow(3);\n\n  visibility: hidden;\n\n  display: flex;\n  position: absolute;\n  flex-flow: column nowrap;\n  justify-content: flex-start;\n  align-items: center;\n\n  max-height: 100vh;\n  min-height: $large-space;\n  background-color: var(--theme-color-1);\n  border-radius: $default-border-radius;\n\n  transition: all $medium-time ease-out;\n\n  .toggle {\n    z-index: 100;\n    visibility: visible;\n  }\n\n  .drawer-container.full-height {\n    min-height: 100%;\n  }\n\n  .header {\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: flex-end;\n    padding: 0.5rem;\n    width: 100%;\n    order: 1;\n\n    .header-content {\n      flex-grow: 1;\n      margin-right: $default-space;\n    }\n  }\n\n  .content {\n    position: relative;\n    flex: 1;\n    flex-grow: 1;\n    order: 2;\n    height: 100%;\n    width: 100%;\n    overflow-y: auto;\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  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\n\n@Component({\n  tag: 'ix-drawer',\n  styleUrl: 'drawer.scss',\n  shadow: true,\n})\nexport class Drawer {\n  /**\n   * Show or hide the drawer\n   */\n  @Prop({ mutable: true }) show = false;\n\n  /**\n   * Fired in case of an outside click during drawer showed state\n   */\n  @Prop() closeOnClickOutside = true;\n\n  /**\n   * Render the drawer with maximum height\n   */\n  @Prop() fullHeight = false;\n\n  /**\n   * Min width interpreted as REM\n   */\n  @Prop() minWidth = 16;\n\n  /**\n   * Max width interpreted as REM\n   */\n  @Prop() maxWidth = 28;\n\n  /**\n   * Width interpreted as REM if not set to 'auto'\n   */\n  @Prop() width: number | 'auto' = this.minWidth;\n\n  /**\n   * Fire event after drawer is open\n   */\n  @Event() open: EventEmitter;\n\n  /**\n   * Fire event after drawer is close\n   */\n  @Event() drawerClose: EventEmitter;\n\n  private static duration = 300;\n  private callback = this.clickedOutside.bind(this);\n  private divElement?: HTMLElement;\n\n  @Watch('show')\n  onShowChanged(newValue: boolean) {\n    this.show = newValue !== undefined ? newValue : !this.show;\n    this.toggleDrawer(this.show);\n  }\n\n  /**\n   * Toggle or define show state of drawer\n   * @param show Overwrite toggle state with boolean\n   */\n  @Method()\n  async toggleDrawer(show?: boolean): Promise<void> {\n    this.show = show !== undefined ? show : !this.show;\n\n    if (show) {\n      this.open.emit();\n      this.slideInRight(this.divElement);\n      setTimeout(() => {\n        window.addEventListener('mousedown', this.callback);\n      }, 300);\n    } else {\n      this.drawerClose.emit();\n      this.slideOutRight(this.divElement);\n      window.removeEventListener('mousedown', this.callback);\n    }\n\n    return Promise.resolve();\n  }\n\n  private onCloseClicked() {\n    this.show = false;\n  }\n\n  private clickedOutside(evt: any) {\n    if (!this.closeOnClickOutside) {\n      return;\n    }\n\n    const target = evt.target;\n    const closestElement = target.closest('#div-container');\n    const btn = target.closest('#drawer-btn');\n\n    if (\n      evt.target.type !== 'button' &&\n      closestElement !== this.divElement &&\n      target !== btn\n    ) {\n      this.show = false;\n    }\n  }\n\n  private slideOutRight(el: HTMLElement) {\n    anime({\n      targets: el,\n      duration: Drawer.duration,\n      translateX: [0, '16rem'],\n      opacity: [1, 0],\n      easing: 'easeInSine',\n      complete: () => {\n        el.classList.add('d-none');\n      },\n    });\n  }\n\n  private slideInRight(el: HTMLElement) {\n    anime({\n      targets: el,\n      duration: Drawer.duration,\n      translateX: ['16rem', 0],\n      opacity: [0, 1],\n      easing: 'easeOutSine',\n      begin: () => {\n        el.classList.remove('d-none');\n      },\n    });\n  }\n\n  componentDidLoad() {\n    this.onShowChanged(this.show);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'drawer-container': true,\n          toggle: this.show,\n          'full-height': this.fullHeight,\n          'd-none': true,\n        }}\n        style={{\n          width: this.width === 'auto' ? this.width : `${this.width}rem`,\n          'min-width': `${this.minWidth}rem`,\n          'max-width': `${this.maxWidth}rem`,\n        }}\n        ref={(el) => (this.divElement = el as HTMLElement)}\n        data-testid=\"container\"\n        id=\"div-container\"\n      >\n        <div class=\"header\">\n          <div class=\"header-content\">\n            <slot name=\"header\"></slot>\n          </div>\n          <ix-icon-button\n            class=\"close-button\"\n            icon=\"close\"\n            size=\"24\"\n            ghost\n            onClick={() => this.onCloseClicked()}\n            data-testid=\"close-button\"\n          ></ix-icon-button>\n        </div>\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ix-dropdown-button.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-7334ee80.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-eb0be730.js';
 
-const dropdownButtonCss = ":host{display:inline-block;position:relative;height:2rem;width:auto}:host *,:host *::after,:host *::before{box-sizing:border-box}:host .hide{display:none}:host .dropdown-button{display:block;position:relative;width:100%;height:100%}:host .dropdown-button>ix-button{width:100%;height:100%}:host .dropdown-button .button-label{margin-right:auto}:host .triangle{position:absolute;-webkit-margin-start:1.5625rem;margin-inline-start:1.5625rem;-webkit-margin-before:-0.4375rem;margin-block-start:-0.4375rem;border-right:0 solid transparent;border-left:4px solid transparent;border-top:0 solid transparent;border-bottom:4px solid;color:var(--theme-btn-primary--color)}:host .triangle.primary.ghost{color:var(--theme-btn-invisible-primary--color)}:host .triangle.primary.outline{color:var(--theme-btn-outline-primary--color)}:host .triangle.primary.ghost.disabled{color:var(--theme-btn-invisible-primary--color--disabled)}:host .triangle.primary.outline.disabled{color:var(--theme-btn-outline-primary--color--disabled)}:host .triangle.primary.disabled{color:var(--theme-btn-primary--color--disabled)}:host .triangle.secondary.ghost{color:var(--theme-btn-invisible-secondary--color)}:host .triangle.secondary.outline{color:var(--theme-btn-outline-secondary--color)}:host .triangle.secondary.ghost.disabled{color:var(--theme-btn-invisible-secondary--color--disabled)}:host .triangle.secondary.outline.disabled{color:var(--theme-btn-outline-secondary--color--disabled)}:host .triangle.secondary.disabled{color:var(--theme-btn-secondary--color--disabled)}:host .dropdown{width:auto !important;inset:auto !important;transform:unset !important}:host(.disabled){pointer-events:none}";
+const dropdownButtonCss = ":host{display:inline-block;position:relative;height:2rem;width:auto}: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 .hide{display:none}:host .dropdown-button{display:block;position:relative;width:100%;height:100%}:host .dropdown-button>ix-button{width:100%;height:100%}:host .dropdown-button .button-label{margin-right:auto;min-width:0px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .dropdown-button .dropdown-icon{margin-right:0.25rem}:host .triangle{position:absolute;-webkit-margin-start:1.5625rem;margin-inline-start:1.5625rem;-webkit-margin-before:-0.4375rem;margin-block-start:-0.4375rem;border-right:0 solid transparent;border-left:4px solid transparent;border-top:0 solid transparent;border-bottom:4px solid;color:var(--theme-btn-primary--color)}:host .triangle.primary.ghost{color:var(--theme-btn-invisible-primary--color)}:host .triangle.primary.outline{color:var(--theme-btn-outline-primary--color)}:host .triangle.primary.ghost.disabled{color:var(--theme-btn-invisible-primary--color--disabled)}:host .triangle.primary.outline.disabled{color:var(--theme-btn-outline-primary--color--disabled)}:host .triangle.primary.disabled{color:var(--theme-btn-primary--color--disabled)}:host .triangle.secondary.ghost{color:var(--theme-btn-invisible-secondary--color)}:host .triangle.secondary.outline{color:var(--theme-btn-outline-secondary--color)}:host .triangle.secondary.ghost.disabled{color:var(--theme-btn-invisible-secondary--color--disabled)}:host .triangle.secondary.outline.disabled{color:var(--theme-btn-outline-secondary--color--disabled)}:host .triangle.secondary.disabled{color:var(--theme-btn-secondary--color--disabled)}:host .content{display:flex;align-items:center}:host(.disabled){pointer-events:none}";
 
 const DropdownButton = class {
   constructor(hostRef) {
@@ -12,6 +12,7 @@ const DropdownButton = class {
     this.disabled = false;
     this.label = undefined;
     this.icon = undefined;
+    this.placement = undefined;
     this.dropdownAnchor = undefined;
   }
   getTriangle() {
@@ -30,7 +31,7 @@ const DropdownButton = class {
         disabled: this.disabled,
       } }, h("div", { class: "dropdown-button", ref: (ref) => {
         this.dropdownAnchor = ref;
-      } }, this.label ? (h("ix-button", { variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled }, h("ix-icon", { name: this.icon, size: "24", class: { hide: this.icon === '' || this.icon === undefined } }), h("div", { class: 'button-label' }, this.label), h("ix-icon", { name: "chevron-down-small", size: "24" }))) : (h("div", null, h("ix-icon-button", { icon: this.icon, variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled }), this.getTriangle()))), h("ix-dropdown", { class: "dropdown", trigger: this.dropdownAnchor, positioningStrategy: 'fixed' }, h("slot", null))));
+      } }, this.label ? (h("ix-button", { variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled, alignment: "start" }, h("div", { class: 'content' }, this.icon ? (h("ix-icon", { name: this.icon, size: "24", class: 'dropdown-icon' })) : null, h("div", { class: 'button-label' }, this.label), h("ix-icon", { name: "chevron-down-small", size: "24" })))) : (h("div", null, h("ix-icon-button", { icon: this.icon, variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled }), this.getTriangle()))), h("ix-dropdown", { class: "dropdown", trigger: this.dropdownAnchor, placement: this.placement }, h("slot", null))));
   }
   get hostElement() { return getElement(this); }
 };

package/dist/esm/ix-dropdown-button.entry.js.map

@@ -1 +1 @@
-{"file":"ix-dropdown-button.entry.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,qoDAAqoD;;MCsBlpD,cAAc;;;mBAMgB,SAAS;mBAKhC,KAAK;iBAKP,KAAK;kBAMJ,KAAK;oBAKH,KAAK;;;;;EAchB,WAAW;IACjB,QACE,WACE,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI;QACd,IAAI,EAAE,IAAI,CAAC,KAAK,KAAK,EAAE;QACvB,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;QACnC,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;QACvC,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,GACI,EACP;GACH;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAED,WACE,KAAK,EAAC,iBAAiB,EACvB,GAAG,EAAE,CAAC,GAAG;QACP,IAAI,CAAC,cAAc,GAAG,GAAG,CAAC;OAC3B,IAEA,IAAI,CAAC,KAAK,IACT,iBACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEvB,eACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,EAAE,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE,GACnD,EACX,WAAK,KAAK,EAAE,cAAc,IAAG,IAAI,CAAC,KAAK,CAAO,EAC9C,eAAS,IAAI,EAAC,oBAAoB,EAAC,IAAI,EAAC,IAAI,GAAW,CAC7C,KAEZ,eACE,sBACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACP,EACjB,IAAI,CAAC,WAAW,EAAE,CACf,CACP,CACG,EAEN,mBACE,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,mBAAmB,EAAE,OAAO,IAE5B,eAAa,CACD,CACT,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/dropdown-button/dropdown-button.scss?tag=ix-dropdown-button&encapsulation=shadow","./src/components/dropdown-button/dropdown-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 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: inline-block;\n  position: relative;\n  height: $x-large-space;\n  width: auto;\n\n  .hide {\n    display: none;\n  }\n\n  .dropdown-button {\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 100%;\n  }\n\n  .dropdown-button > ix-button {\n    width: 100%;\n    height: 100%;\n  }\n\n  .dropdown-button .button-label {\n    margin-right: auto;\n  }\n\n  .triangle {\n    position: absolute;\n    margin-inline-start: 1.5625rem;\n    margin-block-start: -0.4375rem;\n    border-right: 0 solid transparent;\n    border-left: 4px solid transparent;\n    border-top: 0 solid transparent;\n    border-bottom: 4px solid;\n    color: var(--theme-btn-primary--color);\n  }\n\n  .triangle.primary {\n    &.ghost {\n      color: var(--theme-btn-invisible-primary--color);\n    }\n\n    &.outline {\n      color: var(--theme-btn-outline-primary--color);\n    }\n\n    &.ghost.disabled {\n      color: var(--theme-btn-invisible-primary--color--disabled);\n    }\n\n    &.outline.disabled {\n      color: var(--theme-btn-outline-primary--color--disabled);\n    }\n\n    &.disabled {\n      color: var(--theme-btn-primary--color--disabled);\n    }\n  }\n\n  .triangle.secondary {\n    &.ghost {\n      color: var(--theme-btn-invisible-secondary--color);\n    }\n\n    &.outline {\n      color: var(--theme-btn-outline-secondary--color);\n    }\n\n    &.ghost.disabled {\n      color: var(--theme-btn-invisible-secondary--color--disabled);\n    }\n\n    &.outline.disabled {\n      color: var(--theme-btn-outline-secondary--color--disabled);\n    }\n\n    &.disabled {\n      color: var(--theme-btn-secondary--color--disabled);\n    }\n  }\n\n  .dropdown {\n    width: auto !important;\n    inset: auto !important;\n    transform: unset !important;\n  }\n}\n\n:host(.disabled) {\n  pointer-events: none;\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 { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { ButtonVariant } from '../button/button';\n\nexport type DropdownButtonVariant = ButtonVariant;\n\n/**\n * @since 1.3.0\n */\n@Component({\n  tag: 'ix-dropdown-button',\n  styleUrl: 'dropdown-button.scss',\n  shadow: true,\n})\nexport class DropdownButton {\n  @Element() hostElement!: HTMLIxDropdownButtonElement;\n\n  /**\n   * Button variant\n   */\n  @Prop() variant: DropdownButtonVariant = 'primary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Active button (has no effect)\n   * @deprecated Will be removed in 3.0.0\n   */\n  @Prop() active = false;\n\n  /**\n   * Disable button\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Set label\n   */\n  @Prop() label: string;\n\n  /**\n   * Button icon\n   */\n  @Prop() icon: string;\n\n  @State() dropdownAnchor!: HTMLElement;\n\n  private getTriangle() {\n    return (\n      <div\n        class={{\n          triangle: true,\n          hide: this.label !== '',\n          primary: this.variant === 'primary',\n          secondary: this.variant === 'secondary',\n          ghost: this.ghost,\n          outline: this.outline,\n          disabled: this.disabled,\n        }}\n      ></div>\n    );\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n        }}\n      >\n        <div\n          class=\"dropdown-button\"\n          ref={(ref) => {\n            this.dropdownAnchor = ref;\n          }}\n        >\n          {this.label ? (\n            <ix-button\n              variant={this.variant}\n              outline={this.outline}\n              ghost={this.ghost}\n              disabled={this.disabled}\n            >\n              <ix-icon\n                name={this.icon}\n                size=\"24\"\n                class={{ hide: this.icon === '' || this.icon === undefined }}\n              ></ix-icon>\n              <div class={'button-label'}>{this.label}</div>\n              <ix-icon name=\"chevron-down-small\" size=\"24\"></ix-icon>\n            </ix-button>\n          ) : (\n            <div>\n              <ix-icon-button\n                icon={this.icon}\n                variant={this.variant}\n                outline={this.outline}\n                ghost={this.ghost}\n                disabled={this.disabled}\n              ></ix-icon-button>\n              {this.getTriangle()}\n            </div>\n          )}\n        </div>\n\n        <ix-dropdown\n          class=\"dropdown\"\n          trigger={this.dropdownAnchor}\n          positioningStrategy={'fixed'}\n        >\n          <slot></slot>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-dropdown-button.entry.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,+vEAA+vE;;MCuB5wE,cAAc;;;mBAMgB,SAAS;mBAKhC,KAAK;iBAKP,KAAK;kBAMJ,KAAK;oBAKH,KAAK;;;;;;EAqBhB,WAAW;IACjB,QACE,WACE,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI;QACd,IAAI,EAAE,IAAI,CAAC,KAAK,KAAK,EAAE;QACvB,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;QACnC,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;QACvC,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,GACI,EACP;GACH;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAED,WACE,KAAK,EAAC,iBAAiB,EACvB,GAAG,EAAE,CAAC,GAAG;QACP,IAAI,CAAC,cAAc,GAAG,GAAG,CAAC;OAC3B,IAEA,IAAI,CAAC,KAAK,IACT,iBACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAC,OAAO,IAEjB,WAAK,KAAK,EAAE,SAAS,IAClB,IAAI,CAAC,IAAI,IACR,eACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,eAAe,GACb,IACT,IAAI,EACR,WAAK,KAAK,EAAE,cAAc,IAAG,IAAI,CAAC,KAAK,CAAO,EAC9C,eAAS,IAAI,EAAC,oBAAoB,EAAC,IAAI,EAAC,IAAI,GAAW,CACnD,CACI,KAEZ,eACE,sBACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACP,EACjB,IAAI,CAAC,WAAW,EAAE,CACf,CACP,CACG,EAEN,mBACE,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,SAAS,EAAE,IAAI,CAAC,SAAS,IAEzB,eAAa,CACD,CACT,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/dropdown-button/dropdown-button.scss?tag=ix-dropdown-button&encapsulation=shadow","./src/components/dropdown-button/dropdown-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 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: inline-block;\n  position: relative;\n  height: $x-large-space;\n  width: auto;\n\n  .hide {\n    display: none;\n  }\n\n  .dropdown-button {\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 100%;\n  }\n\n  .dropdown-button > ix-button {\n    width: 100%;\n    height: 100%;\n  }\n\n  .dropdown-button .button-label {\n    margin-right: auto;\n    min-width: 0px;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  .dropdown-button .dropdown-icon {\n    margin-right: 0.25rem;\n  }\n\n  .triangle {\n    position: absolute;\n    margin-inline-start: 1.5625rem;\n    margin-block-start: -0.4375rem;\n    border-right: 0 solid transparent;\n    border-left: 4px solid transparent;\n    border-top: 0 solid transparent;\n    border-bottom: 4px solid;\n    color: var(--theme-btn-primary--color);\n  }\n\n  .triangle.primary {\n    &.ghost {\n      color: var(--theme-btn-invisible-primary--color);\n    }\n\n    &.outline {\n      color: var(--theme-btn-outline-primary--color);\n    }\n\n    &.ghost.disabled {\n      color: var(--theme-btn-invisible-primary--color--disabled);\n    }\n\n    &.outline.disabled {\n      color: var(--theme-btn-outline-primary--color--disabled);\n    }\n\n    &.disabled {\n      color: var(--theme-btn-primary--color--disabled);\n    }\n  }\n\n  .triangle.secondary {\n    &.ghost {\n      color: var(--theme-btn-invisible-secondary--color);\n    }\n\n    &.outline {\n      color: var(--theme-btn-outline-secondary--color);\n    }\n\n    &.ghost.disabled {\n      color: var(--theme-btn-invisible-secondary--color--disabled);\n    }\n\n    &.outline.disabled {\n      color: var(--theme-btn-outline-secondary--color--disabled);\n    }\n\n    &.disabled {\n      color: var(--theme-btn-secondary--color--disabled);\n    }\n  }\n\n  .content {\n    display: flex;\n    align-items: center;\n  }\n}\n\n:host(.disabled) {\n  pointer-events: none;\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 { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { ButtonVariant } from '../button/button';\nimport { AlignedPlacement } from '../dropdown/placement';\n\nexport type DropdownButtonVariant = ButtonVariant;\n\n/**\n * @since 1.3.0\n */\n@Component({\n  tag: 'ix-dropdown-button',\n  styleUrl: 'dropdown-button.scss',\n  shadow: true,\n})\nexport class DropdownButton {\n  @Element() hostElement!: HTMLIxDropdownButtonElement;\n\n  /**\n   * Button variant\n   */\n  @Prop() variant: DropdownButtonVariant = 'primary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Active button (has no effect)\n   * @deprecated Will be removed in 3.0.0\n   */\n  @Prop() active = false;\n\n  /**\n   * Disable button\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Set label\n   */\n  @Prop() label: string;\n\n  /**\n   * Button icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Placement of the dropdown\n   *\n   * @since 2.0.0\n   */\n  @Prop() placement: AlignedPlacement;\n\n  @State() dropdownAnchor!: HTMLElement;\n\n  private getTriangle() {\n    return (\n      <div\n        class={{\n          triangle: true,\n          hide: this.label !== '',\n          primary: this.variant === 'primary',\n          secondary: this.variant === 'secondary',\n          ghost: this.ghost,\n          outline: this.outline,\n          disabled: this.disabled,\n        }}\n      ></div>\n    );\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n        }}\n      >\n        <div\n          class=\"dropdown-button\"\n          ref={(ref) => {\n            this.dropdownAnchor = ref;\n          }}\n        >\n          {this.label ? (\n            <ix-button\n              variant={this.variant}\n              outline={this.outline}\n              ghost={this.ghost}\n              disabled={this.disabled}\n              alignment=\"start\"\n            >\n              <div class={'content'}>\n                {this.icon ? (\n                  <ix-icon\n                    name={this.icon}\n                    size=\"24\"\n                    class={'dropdown-icon'}\n                  ></ix-icon>\n                ) : null}\n                <div class={'button-label'}>{this.label}</div>\n                <ix-icon name=\"chevron-down-small\" size=\"24\"></ix-icon>\n              </div>\n            </ix-button>\n          ) : (\n            <div>\n              <ix-icon-button\n                icon={this.icon}\n                variant={this.variant}\n                outline={this.outline}\n                ghost={this.ghost}\n                disabled={this.disabled}\n              ></ix-icon-button>\n              {this.getTriangle()}\n            </div>\n          )}\n        </div>\n\n        <ix-dropdown\n          class=\"dropdown\"\n          trigger={this.dropdownAnchor}\n          placement={this.placement}\n        >\n          <slot></slot>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ix-dropdown-header.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-7334ee80.js';
+import { r as registerInstance, h, H as Host } from './index-eb0be730.js';
 
-const dropdownHeaderCss = ":host{display:flex;align-items:center;position:relative;height:2.5rem;width:auto;padding:0.25rem 1rem;overflow:hidden;cursor:default;color:var(--theme-color-soft-text)}:host *,:host *::after,:host *::before{box-sizing:border-box}";
+const dropdownHeaderCss = ":host{display:flex;align-items:center;position:relative;height:2.5rem;width:auto;padding:0.25rem 1rem;overflow:hidden;cursor:default;color:var(--theme-color-soft-text)}: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}";
 
 const DropdownHeader = class {
   constructor(hostRef) {

package/dist/esm/ix-dropdown-header.entry.js.map

@@ -1 +1 @@
-{"file":"ix-dropdown-header.entry.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,uOAAuO;;MCmBpP,cAAc;;;;;EAMzB,MAAM;IACJ,QACE,EAAC,IAAI,QACH,qBAAe,KAAK,EAAE,eAAe,EAAE,OAAO,EAAE,eAAe,IAC5D,IAAI,CAAC,KAAK,CACG,CACX,EACP;GACH;;;;;;","names":[],"sources":["./src/components/dropdown-header/dropdown-header.scss?tag=ix-dropdown-header&encapsulation=shadow","./src/components/dropdown-header/dropdown-header.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:host {\n  @include ix-component;\n\n  display: flex;\n  align-items: center;\n  position: relative;\n  height: 2.5rem;\n  width: auto;\n\n  padding: 0.25rem 1rem;\n\n  overflow: hidden;\n  cursor: default;\n\n  color: var(--theme-color-soft-text);\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 { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-dropdown-header',\n  styleUrl: 'dropdown-header.scss',\n  shadow: true,\n})\nexport class DropdownHeader {\n  /**\n   * Display name of the header\n   */\n  @Prop() label: string;\n\n  render() {\n    return (\n      <Host>\n        <ix-typography class={'category-text'} variant={'default-title'}>\n          {this.label}\n        </ix-typography>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-dropdown-header.entry.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,swBAAswB;;MCmBnxB,cAAc;;;;;EAMzB,MAAM;IACJ,QACE,EAAC,IAAI,QACH,qBAAe,KAAK,EAAE,eAAe,EAAE,OAAO,EAAE,eAAe,IAC5D,IAAI,CAAC,KAAK,CACG,CACX,EACP;GACH;;;;;;","names":[],"sources":["./src/components/dropdown-header/dropdown-header.scss?tag=ix-dropdown-header&encapsulation=shadow","./src/components/dropdown-header/dropdown-header.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:host {\n  @include ix-component;\n\n  display: flex;\n  align-items: center;\n  position: relative;\n  height: 2.5rem;\n  width: auto;\n\n  padding: 0.25rem 1rem;\n\n  overflow: hidden;\n  cursor: default;\n\n  color: var(--theme-color-soft-text);\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 { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-dropdown-header',\n  styleUrl: 'dropdown-header.scss',\n  shadow: true,\n})\nexport class DropdownHeader {\n  /**\n   * Display name of the header\n   */\n  @Prop() label: string;\n\n  render() {\n    return (\n      <Host>\n        <ix-typography class={'category-text'} variant={'default-title'}>\n          {this.label}\n        </ix-typography>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ix-dropdown-quick-actions.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-7334ee80.js';
+import { r as registerInstance, h, H as Host } from './index-eb0be730.js';
 
 const dropdownQuickActionsCss = ":host{display:flex;justify-content:center;align-items:center;-webkit-margin-start:1.5rem;margin-inline-start:1.5rem;-webkit-margin-end:1.5rem;margin-inline-end:1.5rem;-webkit-margin-after:0.25rem;margin-block-end:0.25rem}:host slot::slotted(*){display:flex;-webkit-margin-end:0.625rem;margin-inline-end:0.625rem}";
 

package/dist/esm/ix-dropdown_2.entry.js

@@ -1,7 +1,8 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-7334ee80.js';
-import { f as flip, i as inline, s as shift, o as offset, a as autoUpdate, c as computePosition } from './floating-ui.dom.esm-9b203a02.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-eb0be730.js';
+import { f as flip, i as inline, s as shift, o as offset, a as autoUpdate, c as computePosition } from './floating-ui.dom.esm-cbe44820.js';
+import { c as chevronRightSmall } from './index-7b24b7fa.js';
 
-const dropdownCss = ":host{background-color:var(--theme-color-2);border-radius:var(--theme-default-border-radius);min-width:0px;z-index:var(--theme-z-index-dropdown);box-shadow:var(--theme-shadow-4);padding:0.25rem 0px}:host *,:host *::after,:host *::before{box-sizing:border-box}:host .dropdown-header{display:flex;align-items:center;height:2.5rem;color:var(--theme-menu-header--color);padding:0 1rem}:host(.overflow){max-height:50vh;overflow-y:auto}:host(:not(.show)){display:none}";
+const dropdownCss = ":host{background-color:var(--theme-color-2);border-radius:var(--theme-default-border-radius);min-width:0px;z-index:var(--theme-z-index-dropdown);box-shadow:var(--theme-shadow-4);padding:0.25rem 0px}: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 .dropdown-header{display:flex;align-items:center;height:2.5rem;color:var(--theme-menu-header--color);padding:0 1rem}:host(.overflow){max-height:50vh;overflow-y:auto}:host(:not(.show)){display:none}";
 
 const dropdownDisposer = new Map();
 let sequenceId = 0;
@@ -308,10 +309,7 @@ const Dropdown = class {
 };
 Dropdown.style = dropdownCss;
 
-/* Siemens iX Icons (1.1.2) */
-const chevronRightSmall = "data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><title>chevron-right-small</title><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='add' transform='translate(187.520000, 134.186667)'><polygon id='arrowhead-right' points='30.2933333 243.626667 0 213.333333 91.7333333 121.813333 0 30.2933333 30.2933333 0 151.893333 121.813333'/></g></g></svg>";
-
-const dropdownItemCss = ":host{--ix-dropdown-item-checked-color:var(--theme-color-primary);display:flex;flex-direction:row;position:relative;height:2.5rem;width:auto;overflow:hidden;cursor:pointer}:host *,:host *::after,:host *::before{box-sizing:border-box}:host .dropdown-item{all:unset;display:flex;flex-direction:row;align-items:center;position:relative;height:calc(100% - 2px);width:calc(100% - 0.5rem - 1.5rem - 0.125rem);padding:0 0.5rem;padding-right:1.5rem;border:0.0625rem solid transparent;white-space:nowrap}:host .dropdown-item.no-checked-field{width:calc(100% - 1rem - 1.5rem - 0.125rem);padding:0 1rem;padding-right:1.5rem}:host .dropdown-item:focus-visible{border-color:var(--theme-color-focus-bdr)}:host .dropdown-item-checked{display:flex;align-items:center;justify-content:center;position:relative;height:100%;width:1rem;min-width:1rem;margin-right:0.25rem;color:var(--ix-dropdown-item-checked-color)}:host .dropdown-item-icon{margin-right:0.25rem;color:var(--theme-color-soft-text)}:host .dropdown-item-text{display:block;position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .dropdown-item:focus-visible{outline:1px solid yellow}:host .submenu-icon{margin-left:auto}:host(.icon-only) .dropdown-item-icon{margin-right:0px}:host(.icon-only) .dropdown-item-checked{display:none}:host(.icon-only) .dropdown-item{width:calc(100% - 0.5rem - 0.5rem - 0.125rem);padding:0 0.5rem;padding-right:0.5rem}:host(.submenu) .dropdown-item{width:calc(100% - 0.5rem - 0.5rem - 0.125rem);padding:0 0.5rem;padding-right:0.5rem}:host(:not(.disabled):not(:disabled).hover),:host(:not(.disabled):not(:disabled):hover){background-color:var(--theme-ghost--background--hover)}:host(:not(.disabled):not(:disabled).active),:host(:not(.disabled):not(:disabled):active){background-color:var(--theme-ghost--background--active)}:host(.disabled){pointer-events:none;color:var(--theme-color-weak-text) !important}:host(.disabled) .dropdown-item-icon{color:var(--theme-color-weak-text) !important}";
+const dropdownItemCss = ":host{--ix-dropdown-item-checked-color:var(--theme-color-primary);display:flex;flex-direction:row;position:relative;height:2.5rem;width:auto;overflow:hidden;cursor:pointer}: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 .dropdown-item{all:unset;display:flex;flex-direction:row;align-items:center;position:relative;height:calc(100% - 2px);width:calc(100% - 0.5rem - 1.5rem - 0.125rem);padding:0 0.5rem;padding-right:1.5rem;border:0.0625rem solid transparent;white-space:nowrap}:host .dropdown-item.no-checked-field{width:calc(100% - 1rem - 1.5rem - 0.125rem);padding:0 1rem;padding-right:1.5rem}:host .dropdown-item:focus-visible{border-color:var(--theme-color-focus-bdr)}:host .dropdown-item-checked{display:flex;align-items:center;justify-content:center;position:relative;height:100%;width:1rem;min-width:1rem;margin-right:0.25rem;color:var(--ix-dropdown-item-checked-color)}:host .dropdown-item-icon{margin-right:0.25rem;color:var(--theme-color-soft-text)}:host .dropdown-item-text{display:block;position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .dropdown-item:focus-visible{outline:1px solid yellow}:host .submenu-icon{margin-left:auto}:host(.icon-only) .dropdown-item-icon{margin-right:0px}:host(.icon-only) .dropdown-item-checked{display:none}:host(.icon-only) .dropdown-item{width:calc(100% - 0.5rem - 0.5rem - 0.125rem);padding:0 0.5rem;padding-right:0.5rem}:host(.submenu) .dropdown-item{width:calc(100% - 0.5rem - 0.5rem - 0.125rem);padding:0 0.5rem;padding-right:0.5rem}:host(:not(.disabled):not(:disabled).hover),:host(:not(.disabled):not(:disabled):hover){background-color:var(--theme-ghost--background--hover)}:host(:not(.disabled):not(:disabled).active),:host(:not(.disabled):not(:disabled):active){background-color:var(--theme-ghost--background--active)}:host(.disabled){pointer-events:none;color:var(--theme-color-weak-text) !important}:host(.disabled) .dropdown-item-icon{color:var(--theme-color-weak-text) !important}";
 
 const DropdownItem = class {
   constructor(hostRef) {