@siemens/ix 1.1.0-beta.5 → 1.1.0

package/dist/components/index.d.ts

@@ -1,6 +1,69 @@
 /* SiemensIx custom elements */
-
-import type { Components, JSX } from "../types/components";
+export { AnimatedTab as IxAnimatedTab } from '../types/components/animated-tab/animated-tab';
+export { AnimatedTabs as IxAnimatedTabs } from '../types/components/animated-tabs/animated-tabs';
+export { ApplicationHeader as IxApplicationHeader } from '../types/components/application-header/application-header';
+export { BasicNavigation as IxBasicNavigation } from '../types/components/basic-navigation/basic-navigation';
+export { Blind as IxBlind } from '../types/components/blind/blind';
+export { Breadcrumb as IxBreadcrumb } from '../types/components/breadcrumb/breadcrumb';
+export { BreadcrumbItem as IxBreadcrumbItem } from '../types/components/breadcrumb-item/breadcrumb-item';
+export { Button as IxButton } from '../types/components/button/button';
+export { CategoryFilter as IxCategoryFilter } from '../types/components/category-filter/category-filter';
+export { Chip as IxChip } from '../types/components/chip/chip';
+export { CounterPill as IxCounterPill } from '../types/components/counter-pill/counter-pill';
+export { DatePicker as IxDatePicker } from '../types/components/date-picker/date-picker';
+export { DateTimeCard as IxDateTimeCard } from '../types/components/date-time-card/date-time-card';
+export { DatePicker as IxDatetimePicker } from '../types/components/datetime-picker/datetime-picker';
+export { Drawer as IxDrawer } from '../types/components/drawer/drawer';
+export { Dropdown as IxDropdown } from '../types/components/dropdown/dropdown';
+export { DropdownItem as IxDropdownItem } from '../types/components/dropdown-item/dropdown-item';
+export { EventList as IxEventList } from '../types/components/event-list/event-list';
+export { EventListItem as IxEventListItem } from '../types/components/event-list-item/event-list-item';
+export { ExpandingSearch as IxExpandingSearch } from '../types/components/expanding-search/expanding-search';
+export { FilterChip as IxFilterChip } from '../types/components/filter-chip/filter-chip';
+export { FlipTile as IxFlipTile } from '../types/components/flip-tile/flip-tile';
+export { FlipTileContent as IxFlipTileContent } from '../types/components/flip-tile-content/flip-tile-content';
+export { Group as IxGroup } from '../types/components/group/group';
+export { GroupDropdownItem as IxGroupDropdownItem } from '../types/components/group-dropdown-item/group-dropdown-item';
+export { GroupItem as IxGroupItem } from '../types/components/group-item/group-item';
+export { Icon as IxIcon } from '../types/components/icon/icon';
+export { IconButton as IxIconButton } from '../types/components/icon-button/icon-button';
+export { InputGroup as IxInputGroup } from '../types/components/input-group/input-group';
+export { Kpi as IxKpi } from '../types/components/kpi/kpi';
+export { MapNavigation as IxMapNavigation } from '../types/components/map-navigation/map-navigation';
+export { MapNavigationOverlay as IxMapNavigationOverlay } from '../types/components/map-navigation-overlay/map-navigation-overlay';
+export { Menu as IxMenu } from '../types/components/menu/menu';
+export { MenuAbout as IxMenuAbout } from '../types/components/menu-about/menu-about';
+export { MenuAboutItem as IxMenuAboutItem } from '../types/components/menu-about-item/menu-about-item';
+export { MenuAboutNews as IxMenuAboutNews } from '../types/components/menu-about-news/menu-about-news';
+export { MenuAvatar as IxMenuAvatar } from '../types/components/menu-avatar/menu-avatar';
+export { MenuAvatarItem as IxMenuAvatarItem } from '../types/components/menu-avatar-item/menu-avatar-item';
+export { MenuItem as IxMenuItem } from '../types/components/menu-item/menu-item';
+export { MenuAbout as IxMenuSettings } from '../types/components/menu-settings/menu-settings';
+export { MenuSettingsItem as IxMenuSettingsItem } from '../types/components/menu-settings-item/menu-settings-item';
+export { MessageBar as IxMessageBar } from '../types/components/message-bar/message-bar';
+export { Modal as IxModal } from '../types/components/modal/modal';
+export { ModalContainer as IxModalContainer } from '../types/components/modal-container/modal-container';
+export { ModalExample as IxModalExample } from '../types/components/my-component/example-modal';
+export { Pill as IxPill } from '../types/components/pill/pill';
+export { Select as IxSelect } from '../types/components/select/select';
+export { SelectItem as IxSelectItem } from '../types/components/select-item/select-item';
+export { Spinner as IxSpinner } from '../types/components/spinner/spinner';
+export { SplitButton as IxSplitButton } from '../types/components/split-button/split-button';
+export { SplitButtonItem as IxSplitButtonItem } from '../types/components/split-button-item/split-button-item';
+export { TabItem as IxTabItem } from '../types/components/tab-item/tab-item';
+export { Tabs as IxTabs } from '../types/components/tabs/tabs';
+export { Tile as IxTile } from '../types/components/tile/tile';
+export { TimePicker as IxTimePicker } from '../types/components/time-picker/time-picker';
+export { Toast as IxToast } from '../types/components/toast/toast';
+export { ToastContainer as IxToastContainer } from '../types/components/toast/toast-container';
+export { CuiToggle as IxToggle } from '../types/components/toggle/toggle';
+export { Tree as IxTree } from '../types/components/tree/tree';
+export { TreeItem as IxTreeItem } from '../types/components/tree-item/tree-item';
+export { Upload as IxUpload } from '../types/components/upload/upload';
+export { ValidationTooltip as IxValidationTooltip } from '../types/components/validation-tooltip/validation-tooltip';
+export { WorkflowStep as IxWorkflowStep } from '../types/components/workflow-step/workflow-step';
+export { WorkflowSteps as IxWorkflowSteps } from '../types/components/workflow-steps/workflow-steps';
+export { MyComponent as MyComponent } from '../types/components/my-component/my-component';
 
 /**
  * Used to manually set the base path where assets can be found.
@@ -20,7 +83,4 @@ export interface SetPlatformOptions {
   rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
 }
 export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
-
-export type { Components, JSX };
-
 export * from '../types';

package/dist/components/index.js

@@ -1,12 +1,72 @@
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
-export { I as InputState, L as LogicalFilterOperator } from './logical-filter-operator.js';
-export { F as FlipTileState } from './flip-tile-state.js';
+export { I as InputState, IxCategoryFilter, L as LogicalFilterOperator, defineCustomElement as defineCustomElementIxCategoryFilter } from './ix-category-filter.js';
+export { F as FlipTileState, IxFlipTile, defineCustomElement as defineCustomElementIxFlipTile } from './ix-flip-tile.js';
 export { M as ModalContainer } from './modal-container.js';
 export { M as Modal } from './modal.js';
 export { c as convertToAbbreviationString, a as convertToRemString } from './rwd.util.js';
-export { c as closeModal, d as dismissModal, m as modal } from './modal-utils.js';
-export { r as renderDefaultItem } from './default-tree-item.js';
-export { U as UploadFileState } from './upload-file-state.js';
+export { IxModalExample, c as closeModal, defineCustomElement as defineCustomElementIxModalExample, d as dismissModal, m as modal } from './ix-modal-example.js';
+export { IxTree, defineCustomElement as defineCustomElementIxTree, r as renderDefaultItem } from './ix-tree.js';
+export { IxUpload, U as UploadFileState, defineCustomElement as defineCustomElementIxUpload } from './ix-upload.js';
+export { IxAnimatedTab, defineCustomElement as defineCustomElementIxAnimatedTab } from './ix-animated-tab.js';
+export { IxAnimatedTabs, defineCustomElement as defineCustomElementIxAnimatedTabs } from './ix-animated-tabs.js';
+export { IxApplicationHeader, defineCustomElement as defineCustomElementIxApplicationHeader } from './ix-application-header.js';
+export { IxBasicNavigation, defineCustomElement as defineCustomElementIxBasicNavigation } from './ix-basic-navigation.js';
+export { IxBlind, defineCustomElement as defineCustomElementIxBlind } from './ix-blind.js';
+export { IxBreadcrumb, defineCustomElement as defineCustomElementIxBreadcrumb } from './ix-breadcrumb.js';
+export { IxBreadcrumbItem, defineCustomElement as defineCustomElementIxBreadcrumbItem } from './ix-breadcrumb-item.js';
+export { IxButton, defineCustomElement as defineCustomElementIxButton } from './ix-button.js';
+export { IxChip, defineCustomElement as defineCustomElementIxChip } from './ix-chip.js';
+export { IxCounterPill, defineCustomElement as defineCustomElementIxCounterPill } from './ix-counter-pill.js';
+export { IxDatePicker, defineCustomElement as defineCustomElementIxDatePicker } from './ix-date-picker.js';
+export { IxDateTimeCard, defineCustomElement as defineCustomElementIxDateTimeCard } from './ix-date-time-card.js';
+export { IxDatetimePicker, defineCustomElement as defineCustomElementIxDatetimePicker } from './ix-datetime-picker.js';
+export { IxDrawer, defineCustomElement as defineCustomElementIxDrawer } from './ix-drawer.js';
+export { IxDropdown, defineCustomElement as defineCustomElementIxDropdown } from './ix-dropdown.js';
+export { IxDropdownItem, defineCustomElement as defineCustomElementIxDropdownItem } from './ix-dropdown-item.js';
+export { IxEventList, defineCustomElement as defineCustomElementIxEventList } from './ix-event-list.js';
+export { IxEventListItem, defineCustomElement as defineCustomElementIxEventListItem } from './ix-event-list-item.js';
+export { IxExpandingSearch, defineCustomElement as defineCustomElementIxExpandingSearch } from './ix-expanding-search.js';
+export { IxFilterChip, defineCustomElement as defineCustomElementIxFilterChip } from './ix-filter-chip.js';
+export { IxFlipTileContent, defineCustomElement as defineCustomElementIxFlipTileContent } from './ix-flip-tile-content.js';
+export { IxGroup, defineCustomElement as defineCustomElementIxGroup } from './ix-group.js';
+export { IxGroupDropdownItem, defineCustomElement as defineCustomElementIxGroupDropdownItem } from './ix-group-dropdown-item.js';
+export { IxGroupItem, defineCustomElement as defineCustomElementIxGroupItem } from './ix-group-item.js';
+export { IxIcon, defineCustomElement as defineCustomElementIxIcon } from './ix-icon.js';
+export { IxIconButton, defineCustomElement as defineCustomElementIxIconButton } from './ix-icon-button.js';
+export { IxInputGroup, defineCustomElement as defineCustomElementIxInputGroup } from './ix-input-group.js';
+export { IxKpi, defineCustomElement as defineCustomElementIxKpi } from './ix-kpi.js';
+export { IxMapNavigation, defineCustomElement as defineCustomElementIxMapNavigation } from './ix-map-navigation.js';
+export { IxMapNavigationOverlay, defineCustomElement as defineCustomElementIxMapNavigationOverlay } from './ix-map-navigation-overlay.js';
+export { IxMenu, defineCustomElement as defineCustomElementIxMenu } from './ix-menu.js';
+export { IxMenuAbout, defineCustomElement as defineCustomElementIxMenuAbout } from './ix-menu-about.js';
+export { IxMenuAboutItem, defineCustomElement as defineCustomElementIxMenuAboutItem } from './ix-menu-about-item.js';
+export { IxMenuAboutNews, defineCustomElement as defineCustomElementIxMenuAboutNews } from './ix-menu-about-news.js';
+export { IxMenuAvatar, defineCustomElement as defineCustomElementIxMenuAvatar } from './ix-menu-avatar.js';
+export { IxMenuAvatarItem, defineCustomElement as defineCustomElementIxMenuAvatarItem } from './ix-menu-avatar-item.js';
+export { IxMenuItem, defineCustomElement as defineCustomElementIxMenuItem } from './ix-menu-item.js';
+export { IxMenuSettings, defineCustomElement as defineCustomElementIxMenuSettings } from './ix-menu-settings.js';
+export { IxMenuSettingsItem, defineCustomElement as defineCustomElementIxMenuSettingsItem } from './ix-menu-settings-item.js';
+export { IxMessageBar, defineCustomElement as defineCustomElementIxMessageBar } from './ix-message-bar.js';
+export { IxModal, defineCustomElement as defineCustomElementIxModal } from './ix-modal.js';
+export { IxModalContainer, defineCustomElement as defineCustomElementIxModalContainer } from './ix-modal-container.js';
+export { IxPill, defineCustomElement as defineCustomElementIxPill } from './ix-pill.js';
+export { IxSelect, defineCustomElement as defineCustomElementIxSelect } from './ix-select.js';
+export { IxSelectItem, defineCustomElement as defineCustomElementIxSelectItem } from './ix-select-item.js';
+export { IxSpinner, defineCustomElement as defineCustomElementIxSpinner } from './ix-spinner.js';
+export { IxSplitButton, defineCustomElement as defineCustomElementIxSplitButton } from './ix-split-button.js';
+export { IxSplitButtonItem, defineCustomElement as defineCustomElementIxSplitButtonItem } from './ix-split-button-item.js';
+export { IxTabItem, defineCustomElement as defineCustomElementIxTabItem } from './ix-tab-item.js';
+export { IxTabs, defineCustomElement as defineCustomElementIxTabs } from './ix-tabs.js';
+export { IxTile, defineCustomElement as defineCustomElementIxTile } from './ix-tile.js';
+export { IxTimePicker, defineCustomElement as defineCustomElementIxTimePicker } from './ix-time-picker.js';
+export { IxToast, defineCustomElement as defineCustomElementIxToast } from './ix-toast.js';
+export { IxToastContainer, defineCustomElement as defineCustomElementIxToastContainer } from './ix-toast-container.js';
+export { IxToggle, defineCustomElement as defineCustomElementIxToggle } from './ix-toggle.js';
+export { IxTreeItem, defineCustomElement as defineCustomElementIxTreeItem } from './ix-tree-item.js';
+export { IxValidationTooltip, defineCustomElement as defineCustomElementIxValidationTooltip } from './ix-validation-tooltip.js';
+export { IxWorkflowStep, defineCustomElement as defineCustomElementIxWorkflowStep } from './ix-workflow-step.js';
+export { IxWorkflowSteps, defineCustomElement as defineCustomElementIxWorkflowSteps } from './ix-workflow-steps.js';
+export { MyComponent, defineCustomElement as defineCustomElementMyComponent } from './my-component.js';
 
 /*
  * SPDX-FileCopyrightText: 2022 Siemens AG

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

@@ -6,6 +6,8 @@ const AnimatedTab = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.icon = undefined;
+    this.count = undefined;
   }
   render() {
     return (h(Host, null, h("slot", null)));

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

@@ -11,20 +11,13 @@ const AnimatedTabs = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     super();
     this.__registerHost();
     this.tabClick = createEvent(this, "tabClick", 7);
-    /**
-     * @deprecated - For debugging purposes only
-     */
+    this.easing = 'easeInOutSine';
+    this.firstRender = true;
+    this.tabs = undefined;
+    this.activeIndex = undefined;
     this.disableAnimations = false;
-    /**
-     * Current selected tab index
-     */
     this.selectedIndex = 0;
-    /**
-     * Placement of the tabs
-     */
     this.tabPlacement = 'top';
-    this.easing = 'easeInOutSine';
-    this.firstRender = true;
   }
   onTabSelectionChange(newSelectionIndex, oldSelectionIndex) {
     this.updateTabAnimation(oldSelectionIndex, newSelectionIndex);

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

@@ -7,9 +7,7 @@ const BasicNavigation = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   constructor() {
     super();
     this.__registerHost();
-    /**
-     * Hide application header
-     */
+    this.applicationName = undefined;
     this.hideHeader = false;
   }
   get menu() {

package/dist/components/ix-blind.js

@@ -4,15 +4,7 @@ import { a as anime } from './anime.es.js';
 const blindCss = ".sc-ix-blind-h{display:flex;flex-direction:column;background-color:var(--theme-blind-base--background);border:solid var(--theme-blind--border-thickness) var(--theme-blind-base--border-color);border-radius:var(--theme-blind--border-radius);overflow:hidden}.sc-ix-blind-h .blind-header.sc-ix-blind{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;min-height:3rem;height:3rem;border:solid var(--theme-blind--border-thickness) transparent;border-radius:var(--theme-blind--border-radius) var(--theme-blind--border-radius) 0 0;padding-right:1rem;transition:border-radius 150ms;cursor:pointer;z-index:1;color:var(--theme-blind-header-closed--color);background-color:var(--theme-blind-header-closed--background)}.sc-ix-blind-h .blind-header.sc-ix-blind .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-closed--color);padding:0.25rem 0.5rem}.sc-ix-blind-h .blind-header.sc-ix-blind .blind-header-title.sc-ix-blind{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-ix-blind-h .blind-header.sc-ix-blind .blind-header-title.sc-ix-blind .blind-header-title-default.sc-ix-blind{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):hover{background-color:var(--theme-blind-header-open--background--hover)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):hover .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-open--color--hover)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):active{background-color:var(--theme-blind-header-open--background--active)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):active .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-open--color--active)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-focus--border-color)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind{border-radius:var(--theme-blind--border-radius)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):hover{background-color:var(--theme-blind-header-open--background--hover)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):hover .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-closed--color--hover)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):active{background-color:var(--theme-blind-header-open--background--active)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):active .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-closed--color--active)}.sc-ix-blind-h .blind-custom-header.sc-ix-blind{display:flex;align-items:center}.sc-ix-blind-h .blind-content.sc-ix-blind{display:block;padding:1rem;max-height:1;transition-property:padding;transition-duration:150ms;transition-timing-function:ease-in}.sc-ix-blind-h .blind-content.hide.sc-ix-blind{max-height:0;padding-top:0px;padding-bottom:0px}";
 
 const Blind = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.collapsedChange = createEvent(this, "collapsedChange", 7);
-    /**
-     * Collapsed state
-     */
-    this.collapsed = false;
-  }
+  constructor() { super(); this.__registerHost(); this.collapsedChange = createEvent(this, "collapsedChange", 7); this.collapsed = false; this.label = undefined; }
   onHeaderClick(e) {
     e.preventDefault();
     e.stopImmediatePropagation();

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

@@ -6,6 +6,8 @@ const BreadcrumbItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   constructor() {
     super();
     this.__registerHost();
+    this.label = undefined;
+    this.icon = undefined;
   }
   render() {
     return (h(Host, null, h("slot", null)));

package/dist/components/ix-breadcrumb.js

@@ -5,7 +5,7 @@ import { d as defineCustomElement$4 } from './dropdown.js';
 import { d as defineCustomElement$3 } from './dropdown-item.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
-const breadcrumbCss = ".sc-ix-breadcrumb-h{display:flex;height:2.5rem;justify-content:flex-start;align-items:center;background-color:transparent;overflow:hidden}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb{position:relative;display:flex;justify-content:flex-start;align-items:center;white-space:nowrap;border-radius:var(--theme-breadcrumb--border-radius);height:2rem;max-height:2rem;min-width:0;-webkit-margin-end:0.25rem;margin-inline-end:0.25rem;padding:0.5rem 0 0.5rem 0.25rem;outline:none;cursor:pointer}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):hover{background-color:var(--theme-breadcrumb-btn--background--hover)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):hover .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color--hover)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color--hover)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):active{background-color:var(--theme-breadcrumb-btn--background--active)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):active .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color--active)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color--active)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;min-width:0;font-weight:700}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb ix-icon.sc-ix-breadcrumb{-webkit-margin-end:0.25rem;margin-inline-end:0.25rem}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{-webkit-margin-start:0.5rem;margin-inline-start:0.5rem;-webkit-margin-end:0;margin-inline-end:0}.sc-ix-breadcrumb-h .crumb.last.sc-ix-breadcrumb{background-color:transparent !important;cursor:default;-webkit-padding-end:0.25rem;padding-inline-end:0.25rem}.sc-ix-breadcrumb-h .crumb.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-focus--border-color)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(:last-of-type){flex-shrink:0;max-width:14rem}.sc-ix-breadcrumb-h .crumb-dropdown.sc-ix-breadcrumb{overflow:visible}.sc-ix-breadcrumb-h .crumb-dropdown.sc-ix-breadcrumb .glyph.sc-ix-breadcrumb::after{display:none}.sc-ix-breadcrumb-h .remove-anchor.sc-ix-breadcrumb::after{display:none}.sc-ix-breadcrumb-h .more-text.sc-ix-breadcrumb{display:flex}.sc-ix-breadcrumb-h .more-text.sc-ix-breadcrumb .more-text-ellipsis.sc-ix-breadcrumb{width:1rem;display:inline-block;font-weight:700}.sc-ix-breadcrumb-h .more-text.sc-ix-breadcrumb .glyph.sc-ix-breadcrumb{line-height:unset}.sc-ix-breadcrumb-h .crumb-items.sc-ix-breadcrumb{display:contents}.sc-ix-breadcrumb-h .crumb.btn.sc-ix-breadcrumb{background-color:var(--theme-breadcrumb-btn--background);border:var(--theme-btn--btn-thickness) solid transparent;transition:150ms}.sc-ix-breadcrumb-h .crumb.btn.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.btn.sc-ix-breadcrumb .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color)}.sc-ix-breadcrumb-h .crumb.btn.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color)}.sc-ix-breadcrumb-h .crumb.btn.last.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-last--color)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover{background-color:var(--theme-breadcrumb-btn--background--hover)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color--hover)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color--hover)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active{background-color:var(--theme-breadcrumb-btn--background--active)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color--active)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color--active)}.sc-ix-breadcrumb-h .crumb.ghost.sc-ix-breadcrumb{background-color:var(--theme-breadcrumb-ghost--background);border:var(--theme-btn--ghost-thickness) solid transparent;transition:150ms}.sc-ix-breadcrumb-h .crumb.ghost.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.ghost.sc-ix-breadcrumb .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost--color)}.sc-ix-breadcrumb-h .crumb.ghost.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost-arrow--color)}.sc-ix-breadcrumb-h .crumb.ghost.last.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost-last--color)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover{background-color:var(--theme-breadcrumb-ghost--background--hover)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost--color--hover)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost-arrow--color--hover)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active{background-color:var(--theme-breadcrumb-ghost--background--active)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost--color--active)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost-arrow--color--active)}.dropdown-overflow.sc-ix-breadcrumb .dropdown-menu.sc-ix-breadcrumb{max-height:25rem;overflow-y:auto}";
+const breadcrumbCss = ".sc-ix-breadcrumb-h{display:flex;height:2.5rem;justify-content:flex-start;align-items:center;background-color:transparent;overflow:hidden}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb{position:relative;display:flex;justify-content:flex-start;align-items:center;white-space:nowrap;border-radius:var(--theme-breadcrumb--border-radius);height:2rem;max-height:2rem;min-width:0;-webkit-margin-end:0.25rem;margin-inline-end:0.25rem;padding:0.5rem 0 0.5rem 0.25rem;outline:none;cursor:pointer}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):hover{background-color:var(--theme-breadcrumb-btn--background--hover)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):hover .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color--hover)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color--hover)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):active{background-color:var(--theme-breadcrumb-btn--background--active)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):active .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color--active)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color--active)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;min-width:0;font-weight:700}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb ix-icon.sc-ix-breadcrumb{-webkit-margin-end:0.25rem;margin-inline-end:0.25rem}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{-webkit-margin-start:0.25rem;margin-inline-start:0.25rem;-webkit-margin-end:0;margin-inline-end:0}.sc-ix-breadcrumb-h .crumb.last.sc-ix-breadcrumb{background-color:transparent !important;cursor:default;-webkit-padding-end:0.25rem;padding-inline-end:0.25rem}.sc-ix-breadcrumb-h .crumb.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-focus--border-color)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(:last-of-type){flex-shrink:0;max-width:14rem}.sc-ix-breadcrumb-h .crumb-dropdown.sc-ix-breadcrumb{overflow:visible}.sc-ix-breadcrumb-h .crumb-dropdown.sc-ix-breadcrumb .glyph.sc-ix-breadcrumb::after{display:none}.sc-ix-breadcrumb-h .remove-anchor.sc-ix-breadcrumb::after{display:none}.sc-ix-breadcrumb-h .more-text.sc-ix-breadcrumb{display:flex}.sc-ix-breadcrumb-h .more-text.sc-ix-breadcrumb .more-text-ellipsis.sc-ix-breadcrumb{width:1rem;display:inline-block;font-weight:700}.sc-ix-breadcrumb-h .more-text.sc-ix-breadcrumb .glyph.sc-ix-breadcrumb{line-height:unset}.sc-ix-breadcrumb-h .crumb-items.sc-ix-breadcrumb{display:contents}.sc-ix-breadcrumb-h .crumb.btn.sc-ix-breadcrumb{background-color:var(--theme-breadcrumb-btn--background);border:var(--theme-btn--btn-thickness) solid transparent;transition:150ms}.sc-ix-breadcrumb-h .crumb.btn.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.btn.sc-ix-breadcrumb .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color)}.sc-ix-breadcrumb-h .crumb.btn.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color)}.sc-ix-breadcrumb-h .crumb.btn.last.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-last--color)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover{background-color:var(--theme-breadcrumb-btn--background--hover)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color--hover)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color--hover)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active{background-color:var(--theme-breadcrumb-btn--background--active)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color--active)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color--active)}.sc-ix-breadcrumb-h .crumb.ghost.sc-ix-breadcrumb{background-color:var(--theme-breadcrumb-ghost--background);border:var(--theme-btn--ghost-thickness) solid transparent;transition:150ms}.sc-ix-breadcrumb-h .crumb.ghost.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.ghost.sc-ix-breadcrumb .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost--color)}.sc-ix-breadcrumb-h .crumb.ghost.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost-arrow--color)}.sc-ix-breadcrumb-h .crumb.ghost.last.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost-last--color)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover{background-color:var(--theme-breadcrumb-ghost--background--hover)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost--color--hover)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost-arrow--color--hover)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active{background-color:var(--theme-breadcrumb-ghost--background--active)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost--color--active)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost-arrow--color--active)}";
 
 const Breadcrumb = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -13,18 +13,11 @@ const Breadcrumb = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__registerHost();
     this.itemClick = createEvent(this, "itemClick", 7);
     this.nextClick = createEvent(this, "nextClick", 7);
-    /**
-     * Excess items will get hidden inside of dropdown
-     */
     this.visibleItemCount = 9;
-    /**
-     * Items will be accessible through a dropdown
-     */
     this.nextItems = [];
-    /**
-     * Ghost breadcrumbs will not show solid backgrounds on individual crumbs unless there is a mouse event (e.g. hover)
-     */
     this.ghost = false;
+    this.previousButtonRef = undefined;
+    this.nextButtonRef = undefined;
     this.items = [];
   }
   get breadcrumbItems() {

package/dist/components/ix-category-filter.js

@@ -1,9 +1,40 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { a as convertToRemString } from './rwd.util.js';
-import { L as LogicalFilterOperator, I as InputState } from './logical-filter-operator.js';
 import { d as defineCustomElement$3 } from './filter-chip.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+class InputState {
+  constructor(token, category) {
+    this.token = token;
+    this.category = category;
+  }
+  hasCategory() {
+    return this.category !== undefined;
+  }
+}
+
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var LogicalFilterOperator;
+(function (LogicalFilterOperator) {
+  LogicalFilterOperator["EQUAL"] = "Equal";
+  LogicalFilterOperator["NOT_EQUAL"] = "Not equal";
+})(LogicalFilterOperator || (LogicalFilterOperator = {}));
+
 const categoryFilterCss = ".sc-ix-category-filter-h{display:block;position:relative}.sc-ix-category-filter-h .focus.sc-ix-category-filter{border-color:var(--theme-color-primary);box-shadow:0 0 0.25rem 0 var(--theme-color-primary) !important}.sc-ix-category-filter-h .btn-close.sc-ix-category-filter{position:absolute;top:0.25rem;right:0.25rem;min-width:1.5rem;width:1.5rem;height:1.5rem}.sc-ix-category-filter-h .input-container.sc-ix-category-filter{display:flex;height:100%;max-height:3.75rem;padding:1px 1.5rem 1px 2rem}.sc-ix-category-filter-h .input-container.no-icon.sc-ix-category-filter{padding-left:0.25rem}.sc-ix-category-filter-h .token-container.sc-ix-category-filter{flex-grow:1;overflow:hidden}.sc-ix-category-filter-h .text-input.sc-ix-category-filter{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);background:transparent;flex-grow:1;height:1.75rem}.sc-ix-category-filter-h .text-input.sc-ix-category-filter,.sc-ix-category-filter-h .text-input.sc-ix-category-filter:hover,.sc-ix-category-filter-h .text-input.sc-ix-category-filter:focus-visible{border:none;outline:none}.sc-ix-category-filter-h .text-input.hide-placeholder.sc-ix-category-filter::-moz-placeholder{opacity:0}.sc-ix-category-filter-h .text-input.hide-placeholder.sc-ix-category-filter::placeholder{opacity:0}.sc-ix-category-filter-h .list-unstyled.sc-ix-category-filter{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:0;overflow-y:auto}.sc-ix-category-filter-h ix-icon.sc-ix-category-filter{position:absolute;top:0.5rem;left:0.5rem}.sc-ix-category-filter-h ix-filter-chip.sc-ix-category-filter{margin-right:0.5rem}.sc-ix-category-filter-h .category-preview.sc-ix-category-filter{display:flex;align-items:center;height:1.5rem;background-color:var(--theme-bg-3);border-top-left-radius:1rem;border-bottom-left-radius:1rem;padding:0.5rem;margin:2px 0}.sc-ix-category-filter-h .category-selection-container.sc-ix-category-filter{box-shadow:var(--theme-box-shadow-level-1);background:var(--theme-color-1);position:absolute;top:2rem;overflow-y:auto;min-width:10rem;border:var(--theme-std-bdr-1);border-radius:0.25rem;padding:0.5rem;z-index:1}.sc-ix-category-filter-h .category-selection-container.sc-ix-category-filter .category-item.sc-ix-category-filter,.sc-ix-category-filter-h .category-selection-container.sc-ix-category-filter .category-item-header.sc-ix-category-filter{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:2rem;padding:0.5rem}.sc-ix-category-filter-h .category-selection-container.sc-ix-category-filter .category-item-header.sc-ix-category-filter{color:var(--theme-color-soft-text)}.sc-ix-category-filter-h .category-selection-container.sc-ix-category-filter .category-item-id.sc-ix-category-filter{border-top-left-radius:1rem;border-bottom-left-radius:1rem}.sc-ix-category-filter-h .category-selection-container.sc-ix-category-filter .category-item-value.sc-ix-category-filter{border-top-right-radius:1rem;border-bottom-right-radius:1rem}.sc-ix-category-filter-h .category-selection-container.sc-ix-category-filter .category-item.sc-ix-category-filter{cursor:pointer}.sc-ix-category-filter-h .category-selection-container.sc-ix-category-filter .category-item.sc-ix-category-filter:focus{background-color:var(--theme-generic-bg-active);outline:none}.sc-ix-category-filter-h .category-selection-container.sc-ix-category-filter .plain-text-suggestion.sc-ix-category-filter{border-radius:1rem}.sc-ix-category-filter-h ul.sc-ix-category-filter{height:100%}.sc-ix-category-filter-h ul.sc-ix-category-filter>li.sc-ix-category-filter,.sc-ix-category-filter-h input.sc-ix-category-filter{padding-top:2px;padding-bottom:2px}";
 
 const CategoryFilter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -13,40 +44,29 @@ const CategoryFilter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     this.inputChanged = createEvent(this, "inputChanged", 7);
     this.filterChanged = createEvent(this, "filterChanged", 7);
     this.ID_CUSTOM_FILTER_VALUE = 'CW_CUSTOM_FILTER_VALUE';
+    this.documentClickCallback = this.handleDocumentClick.bind(this);
+    this.hasFocus = undefined;
+    this.showCategorySelection = undefined;
     this.categoryLogicalOperator = LogicalFilterOperator.EQUAL;
+    this.inputValue = undefined;
+    this.category = undefined;
     this.filterTokens = [];
-    /**
-     * In certain use cases some categories are not available for selection any more.
-     * To allow proper display of set filters with these categories this ID to label mapping can be populated.
-     * Configuration object hash used to supply labels to the filter chips in the input field.
-     * Each ID maps to a string representing the label to display.
-     */
+    this.offsetDropdownX = undefined;
+    this.offsetDropdownY = undefined;
+    this.maxHeightDropdown = undefined;
+    this.maxWidthDropdown = undefined;
+    this.initialState = undefined;
+    this.filterState = undefined;
+    this.placeholder = undefined;
+    this.categories = undefined;
     this.nonSelectableCategories = {};
-    /**
-     * The icon next to the actual text input
-     * Defaults to 'search'
-     */
+    this.suggestions = undefined;
     this.icon = 'search';
-    /**
-     * If set to true allows that a single category can be set more than once.
-     * An already set category will not appear in the category dropdown if set to false.
-     *
-     * Defaults to true
-     */
+    this.hideIcon = undefined;
     this.repeatCategories = true;
-    /**
-     * @deprecated For debugging purposes only!
-     */
     this.tmpDisableScrollIntoView = true;
-    /**
-     * i18n
-     */
     this.labelCategories = 'Categories';
-    /**
-     * i18n
-     */
     this.i18nPlainText = 'Filter by text';
-    this.documentClickCallback = this.handleDocumentClick.bind(this);
   }
   watchFilterState(newValue) {
     this.setFilterState(newValue);
@@ -444,4 +464,4 @@ function defineCustomElement$1() {
 const IxCategoryFilter = CategoryFilter;
 const defineCustomElement = defineCustomElement$1;
 
-export { IxCategoryFilter, defineCustomElement };
+export { InputState as I, IxCategoryFilter, LogicalFilterOperator as L, defineCustomElement };

package/dist/components/ix-chip.js

@@ -8,21 +8,12 @@ const Chip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     super();
     this.__registerHost();
     this.close = createEvent(this, "close", 7);
-    /**
-     * Chip variant
-     */
     this.variant = 'primary';
-    /**
-     * Display chip in active state. Only working witht `variant="primary"`
-     */
     this.active = false;
-    /**
-     * Show close icon
-     */
     this.closable = false;
-    /**
-     * Show chip with outline style
-     */
+    this.icon = undefined;
+    this.background = undefined;
+    this.color = undefined;
     this.outline = false;
   }
   getCloseButton() {

package/dist/components/ix-counter-pill.js

@@ -6,17 +6,10 @@ const CounterPill = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    /**
-     * Pill variant
-     */
     this.variant = 'primary';
-    /**
-     * Show pill as outline
-     */
     this.outline = false;
-    /**
-     * Align pill content left
-     */
+    this.background = undefined;
+    this.color = undefined;
     this.alignLeft = false;
   }
   render() {

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

@@ -17,63 +17,20 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.timeChange = createEvent(this, "timeChange", 7);
     this.dateChange = createEvent(this, "dateChange", 7);
     this.dateSelect = createEvent(this, "dateSelect", 7);
-    /**
-     * Set range size
-     */
     this.range = true;
-    /**
-     * Show hour input
-     */
     this.showHour = false;
-    /**
-     * Show minutes input
-     */
     this.showMinutes = false;
-    /**
-     * Show seconds input
-     */
     this.showSeconds = false;
-    /**
-     * Date format string.
-     * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
-     *
-     * @since 1.1.0
-     */
+    this.minDate = undefined;
+    this.maxDate = undefined;
     this.dateFormat = 'yyyy/LL/dd';
-    /**
-     * Time format string.
-     * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
-     *
-     * @since 1.1.0
-     */
     this.timeFormat = 'TT';
-    /**
-     * Picker date. If the picker is in range mode this property is the end date.
-     * If the picker is not in range mode leave this value `null`
-     *
-     * Format is based on `format`
-     *
-     * @since 1.1.0
-     */
+    this.from = undefined;
     this.to = null;
-    /**
-     * Show time reference input
-     *
-     * @since 1.1.0 time reference is default aligned with formt tt
-     */
+    this.time = undefined;
     this.showTimeReference = undefined;
-    /**
-     * Default behavior of the done event is to join the two events (date and time) into one combined string output.
-     * This combination can be configured over the delimiter
-     *
-     * @since 1.1.0
-     */
     this.eventDelimiter = ' - ';
-    /**
-     * Text of date select button
-     *
-     * @since 1.1.0
-     */
+    this.timeReference = undefined;
     this.textSelectDate = 'Done';
   }
   onDone() {
@@ -86,14 +43,13 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     });
   }
   async onDateChange(event) {
-    var _a, _b;
     event.preventDefault();
     event.stopPropagation();
     const { detail: date } = event;
     this.dateChange.emit(date);
     const currentDateTime = await this.datePickerElement.getCurrentDate();
-    this._from = (_a = currentDateTime.start) === null || _a === void 0 ? void 0 : _a.toFormat(this.dateFormat);
-    this._to = (_b = currentDateTime.end) === null || _b === void 0 ? void 0 : _b.toFormat(this.dateFormat);
+    this._from = currentDateTime.start;
+    this._to = currentDateTime.end;
   }
   async onTimeChange(event) {
     event.preventDefault();
@@ -101,7 +57,7 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     const { detail: time } = event;
     this.timeChange.emit(time);
     const currentDateTime = await this.timePickerElement.getCurrentTime();
-    this._time = currentDateTime.toFormat(this.timeFormat);
+    this._time = currentDateTime;
   }
   componentDidLoad() {
     this._from = this.from;

package/dist/components/ix-drawer.js

@@ -11,31 +11,13 @@ const Drawer = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__registerHost();
     this.open = createEvent(this, "open", 7);
     this.drawerClose = createEvent(this, "drawerClose", 7);
-    /**
-     * Show or hide the drawer
-     */
+    this.callback = this.clickedOutside.bind(this);
     this.show = false;
-    /**
-     * Fired in case of an outside click during drawer showed state
-     */
     this.closeOnClickOutside = true;
-    /**
-     * Render the drawer with maximum height
-     */
     this.fullHeight = false;
-    /**
-     * Min width interpreted as REM
-     */
     this.minWidth = 16;
-    /**
-     * Max width interpreted as REM
-     */
     this.maxWidth = 28;
-    /**
-     * Width interpreted as REM if not set to 'auto'
-     */
     this.width = this.minWidth;
-    this.callback = this.clickedOutside.bind(this);
   }
   onShowChanged(newValue) {
     this.show = newValue !== undefined ? newValue : !this.show;

package/dist/components/ix-event-list-item.js

@@ -7,12 +7,10 @@ const EventListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     super();
     this.__registerHost();
     this.itemClick = createEvent(this, "itemClick", 7);
-    /**
-     * Opacity of the status indicator.
-     * Defaults to 1.0
-     *
-     * @deprecated Will be removed in 7.0.0. Use color with alpha value.
-     */
+    this.color = undefined;
+    this.selected = undefined;
+    this.disabled = undefined;
+    this.chevron = undefined;
     this.opacity = 1;
   }
   handleItemClick() {

package/dist/components/ix-event-list.js

@@ -9,21 +9,10 @@ const EventList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     super();
     this.__registerHost();
     this.mutationObserver = createMutationObserver(this.onMutation.bind(this));
-    /**
-     * Determines the height of list items.
-     * This can either be one of two predefined sizes ('S' or 'L') or an absolute pixel value.
-     * In case a number is supplied it will get converted to rem internally.
-     * Defaults to 'S'.
-     */
     this.itemHeight = 'S';
-    /**
-     * Make event-list items more compact
-     */
     this.compact = false;
-    /**
-     * Animate state change transitions. Defaults to 'true'.
-     */
     this.animated = true;
+    this.chevron = undefined;
   }
   componentDidLoad() {
     if (this.animated) {