@siemens/ix 1.5.0-beta.4 → 1.6.0

package/dist/collection/components/expanding-search/expanding-search.css

@@ -40,12 +40,16 @@
   height: 2rem;
   align-items: center;
   justify-content: space-between;
+  position: relative;
   /*collapsed view*/
   /*expanded view*/
 }
 :host.right-position {
   width: 11.5625rem !important;
 }
+:host.right-position.fullWidth {
+  width: 100% !important;
+}
 :host .input-container {
   transition: all 0.3s ease-in-out;
 }
@@ -54,10 +58,14 @@
 }
 :host input {
   box-shadow: var(--theme-input--box-shadow);
+  cursor: auto !important;
 }
 :host .expanded {
   width: 11.5625rem;
 }
+:host .expanded.fullWidth {
+  width: 100%;
+}
 :host .collapsed {
   width: 1.5rem;
   border: none;

package/dist/collection/components/expanding-search/expanding-search.js

@@ -35,6 +35,7 @@ export class ExpandingSearch {
     this.icon = 'search';
     this.placeholder = 'Enter text here';
     this.value = '';
+    this.fullWidth = false;
     this.isFieldChanged = false;
     this.expanded = false;
     this.hasFocus = false;
@@ -54,6 +55,7 @@ export class ExpandingSearch {
     return (h(Host, { class: {
         expanded: this.expanded,
         'right-position': this.expanded,
+        fullWidth: this.fullWidth,
       } }, h("button", { class: {
         btn: true,
         'btn-invisible-primary': true,
@@ -62,6 +64,7 @@ export class ExpandingSearch {
         'disable-pointer': this.expanded,
       }, "data-testid": "button", onClick: () => this.expandInput(), tabindex: this.expanded ? -1 : 0 }, h("ix-icon", { class: "btn-search-icon", name: this.icon, size: this.expanded ? '16' : '24', color: this.hasFocus ? 'input-search-icon--color--focus' : undefined })), h("div", { class: {
         expanded: this.expanded,
+        fullWidth: this.fullWidth,
         collapsed: !this.expanded,
         'disable-pointer': !this.expanded,
         'input-container': true,
@@ -143,6 +146,27 @@ export class ExpandingSearch {
         "attribute": "value",
         "reflect": false,
         "defaultValue": "''"
+      },
+      "fullWidth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "since",
+              "text": "1.6.0"
+            }],
+          "text": "If true the search field will fill all available horizontal space of it's parent container when expanded."
+        },
+        "attribute": "full-width",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

package/dist/collection/components/expanding-search/expanding-search.js.map

@@ -1 +1 @@
-{"version":3,"file":"expanding-search.js","sourceRoot":"","sources":["../../../src/components/expanding-search/expanding-search.tsx"],"names":[],"mappings":"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","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\nimport {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-expanding-search',\n  styleUrl: 'expanding-search.scss',\n  scoped: true,\n})\nexport class ExpandingSearch {\n  /**\n   * Search icon\n   */\n  @Prop() icon = 'search';\n\n  /**\n   * Placeholder text\n   */\n  @Prop() placeholder = 'Enter text here';\n\n  /**\n   * Default value\n   */\n  @Prop({ mutable: true }) value = '';\n\n  @State() isFieldChanged = false;\n\n  @State() expanded = false;\n\n  @State() hasFocus = false;\n\n  /**\n   * Value changed\n   */\n  @Event() valueChange: EventEmitter<string>;\n\n  private expandInput() {\n    setTimeout(this.focusTextInput, 300);\n    this.expanded = true;\n  }\n\n  private collapseInput() {\n    if (!this.isFieldChanged && this.expanded) {\n      this.expanded = false;\n    }\n  }\n\n  private clearInput() {\n    this.value = '';\n    this.isFieldChanged = false;\n  }\n\n  private onChange(e: InputEvent) {\n    this.value = (e.target as HTMLInputElement).value;\n    if (this.isFieldChanged && this.value === '') {\n      this.isFieldChanged = false;\n    } else {\n      this.isFieldChanged = true;\n    }\n\n    this.valueChange.emit(this.value);\n  }\n\n  private textInput?: HTMLInputElement;\n\n  constructor() {\n    this.focusTextInput = this.focusTextInput.bind(this);\n  }\n\n  private focusTextInput() {\n    this.textInput?.focus();\n  }\n\n  private clearClicked() {\n    this.clearInput();\n    this.textInput?.focus();\n    this.valueChange.emit(this.value);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          expanded: this.expanded,\n          'right-position': this.expanded,\n        }}\n      >\n        <button\n          class={{\n            btn: true,\n            'btn-invisible-primary': true,\n            'btn-icon': true,\n            'btn-search': true,\n            'disable-pointer': this.expanded,\n          }}\n          data-testid=\"button\"\n          onClick={() => this.expandInput()}\n          tabindex={this.expanded ? -1 : 0}\n        >\n          <ix-icon\n            class=\"btn-search-icon\"\n            name={this.icon}\n            size={this.expanded ? '16' : '24'}\n            color={\n              this.hasFocus ? 'input-search-icon--color--focus' : undefined\n            }\n          ></ix-icon>\n        </button>\n\n        <div\n          class={{\n            expanded: this.expanded,\n            collapsed: !this.expanded,\n            'disable-pointer': !this.expanded,\n            'input-container': true,\n          }}\n          data-testid=\"input-wrapper\"\n        >\n          <input\n            class={{\n              'form-control': true,\n              input: this.expanded,\n              'disable-pointer': !this.expanded,\n              'opacity-before': !this.expanded,\n              'opacity-after': this.expanded,\n            }}\n            ref={(el) => (this.textInput = el)}\n            data-testid=\"input\"\n            placeholder={this.placeholder}\n            type=\"text\"\n            value={this.value}\n            onBlur={() => {\n              this.collapseInput();\n              this.hasFocus = false;\n            }}\n            onFocus={() => (this.hasFocus = true)}\n            onInput={(e: InputEvent) => this.onChange(e)}\n            tabindex={this.expanded ? 0 : -1}\n          />\n\n          {this.isFieldChanged ? (\n            <ix-icon-button\n              class=\"btn-clear\"\n              icon=\"clear\"\n              ghost={true}\n              size=\"16\"\n              data-testid=\"clear-button\"\n              onClick={() => this.clearClicked()}\n            />\n          ) : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"expanding-search.js","sourceRoot":"","sources":["../../../src/components/expanding-search/expanding-search.tsx"],"names":[],"mappings":"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","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\nimport {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-expanding-search',\n  styleUrl: 'expanding-search.scss',\n  scoped: true,\n})\nexport class ExpandingSearch {\n  /**\n   * Search icon\n   */\n  @Prop() icon = 'search';\n\n  /**\n   * Placeholder text\n   */\n  @Prop() placeholder = 'Enter text here';\n\n  /**\n   * Default value\n   */\n  @Prop({ mutable: true }) value = '';\n\n  /**\n   * If true the search field will fill all available horizontal space of it's parent container when expanded.\n   * @since 1.6.0\n   */\n  @Prop() fullWidth = false;\n\n  @State() isFieldChanged = false;\n\n  @State() expanded = false;\n\n  @State() hasFocus = false;\n\n  /**\n   * Value changed\n   */\n  @Event() valueChange: EventEmitter<string>;\n\n  private expandInput() {\n    setTimeout(this.focusTextInput, 300);\n    this.expanded = true;\n  }\n\n  private collapseInput() {\n    if (!this.isFieldChanged && this.expanded) {\n      this.expanded = false;\n    }\n  }\n\n  private clearInput() {\n    this.value = '';\n    this.isFieldChanged = false;\n  }\n\n  private onChange(e: InputEvent) {\n    this.value = (e.target as HTMLInputElement).value;\n    if (this.isFieldChanged && this.value === '') {\n      this.isFieldChanged = false;\n    } else {\n      this.isFieldChanged = true;\n    }\n\n    this.valueChange.emit(this.value);\n  }\n\n  private textInput?: HTMLInputElement;\n\n  constructor() {\n    this.focusTextInput = this.focusTextInput.bind(this);\n  }\n\n  private focusTextInput() {\n    this.textInput?.focus();\n  }\n\n  private clearClicked() {\n    this.clearInput();\n    this.textInput?.focus();\n    this.valueChange.emit(this.value);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          expanded: this.expanded,\n          'right-position': this.expanded,\n          fullWidth: this.fullWidth,\n        }}\n      >\n        <button\n          class={{\n            btn: true,\n            'btn-invisible-primary': true,\n            'btn-icon': true,\n            'btn-search': true,\n            'disable-pointer': this.expanded,\n          }}\n          data-testid=\"button\"\n          onClick={() => this.expandInput()}\n          tabindex={this.expanded ? -1 : 0}\n        >\n          <ix-icon\n            class=\"btn-search-icon\"\n            name={this.icon}\n            size={this.expanded ? '16' : '24'}\n            color={\n              this.hasFocus ? 'input-search-icon--color--focus' : undefined\n            }\n          ></ix-icon>\n        </button>\n\n        <div\n          class={{\n            expanded: this.expanded,\n            fullWidth: this.fullWidth,\n            collapsed: !this.expanded,\n            'disable-pointer': !this.expanded,\n            'input-container': true,\n          }}\n          data-testid=\"input-wrapper\"\n        >\n          <input\n            class={{\n              'form-control': true,\n              input: this.expanded,\n              'disable-pointer': !this.expanded,\n              'opacity-before': !this.expanded,\n              'opacity-after': this.expanded,\n            }}\n            ref={(el) => (this.textInput = el)}\n            data-testid=\"input\"\n            placeholder={this.placeholder}\n            type=\"text\"\n            value={this.value}\n            onBlur={() => {\n              this.collapseInput();\n              this.hasFocus = false;\n            }}\n            onFocus={() => (this.hasFocus = true)}\n            onInput={(e: InputEvent) => this.onChange(e)}\n            tabindex={this.expanded ? 0 : -1}\n          />\n\n          {this.isFieldChanged ? (\n            <ix-icon-button\n              class=\"btn-clear\"\n              icon=\"clear\"\n              ghost={true}\n              size=\"16\"\n              data-testid=\"clear-button\"\n              onClick={() => this.clearClicked()}\n            />\n          ) : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/icon-button/icon-button.css

@@ -6,10 +6,372 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+/*
+ * SPDX-FileCopyrightText: 2023 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.
+ */
+/* Dimensions */
+/* Font sizes */
+/* Line heights */
+/* Animation timings */
+/*
+ * SPDX-FileCopyrightText: 2023 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.
+ */
+/*
+ * SPDX-FileCopyrightText: 2023 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.
+ */
+/*
+ * SPDX-FileCopyrightText: 2023 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.
+ */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 2rem;
+  font-size: 0.875rem;
+  font-weight: 700;
+  transition: 150ms;
+  padding: 0 0.5rem;
+  min-width: 5rem;
+  gap: 0.25rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.btn .glyph {
+  margin-right: 0.25rem;
+  font-weight: 400;
+}
+.btn:focus-visible, .btn.focus {
+  box-shadow: none;
+}
+
+.btn-primary {
+  border-radius: var(--theme-btn--border-radius);
+}
+.btn-primary, .btn-primary.focus, .btn-primary:focus-visible {
+  background-color: var(--theme-btn-primary--background);
+  color: var(--theme-btn-primary--color);
+  border-width: var(--theme-btn--border-thickness);
+  border-color: var(--theme-btn-primary--border-color);
+  border-style: solid;
+}
+.btn-primary:not(.disabled):not(:disabled):focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+.btn-primary.selected {
+  background-color: var(--theme-btn-primary--background--selected);
+}
+.btn-primary.hover, .btn-primary:hover {
+  border-color: var(--theme-btn-primary--border-color--hover) !important;
+  background-color: var(--theme-btn-primary--background--hover) !important;
+  color: var(--theme-btn-primary--color--hover) !important;
+}
+.btn-primary.selected.hover, .btn-primary.selected:hover {
+  background-color: var(--theme-btn-primary--background--selected-hover);
+  color: var(--theme-btn-primary--color--selected-hover);
+}
+.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
+  border-color: var(--theme-btn-primary--border-color--active) !important;
+  background-color: var(--theme-btn-primary--background--active) !important;
+  color: var(--theme-btn-primary--color--active) !important;
+}
+.btn-primary.selected:not(:disabled):not(.disabled):active, .btn-primary.selected:not(:disabled):not(.disabled).active, .show > .btn-primary.selected.dropdown-toggle {
+  background-color: var(--theme-btn-primary--background--selected-active);
+  color: var(--theme-btn-primary--color--selected-active);
+}
+.btn-primary.disabled, .btn-primary:disabled {
+  pointer-events: none;
+  cursor: initial;
+  border-color: var(--theme-btn-primary--border-color--disabled);
+  background-color: var(--theme-btn-primary--background--disabled);
+  color: var(--theme-btn-primary--color--disabled);
+  opacity: 1;
+}
+
+.btn-outline-primary {
+  border-radius: var(--theme-btn--border-radius);
+}
+.btn-outline-primary, .btn-outline-primary.focus, .btn-outline-primary:focus-visible {
+  background-color: var(--theme-btn-outline-primary--background);
+  color: var(--theme-btn-outline-primary--color);
+  border-width: var(--theme-btn--border-thickness);
+  border-color: var(--theme-btn-outline-primary--border-color);
+  border-style: solid;
+}
+.btn-outline-primary:not(.disabled):not(:disabled):focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+.btn-outline-primary.selected {
+  background-color: var(--theme-btn-outline-primary--background--selected);
+}
+.btn-outline-primary.hover, .btn-outline-primary:hover {
+  border-color: var(--theme-btn-outline-primary--border-color--hover) !important;
+  background-color: var(--theme-btn-outline-primary--background--hover) !important;
+  color: var(--theme-btn-outline-primary--color--hover) !important;
+}
+.btn-outline-primary.selected.hover, .btn-outline-primary.selected:hover {
+  background-color: var(--theme-btn-outline-primary--background--selected-hover);
+  color: var(--theme-btn-outline-primary--color--selected-hover);
+}
+.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle {
+  border-color: var(--theme-btn-outline-primary--border-color--active) !important;
+  background-color: var(--theme-btn-outline-primary--background--active) !important;
+  color: var(--theme-btn-outline-primary--color--active) !important;
+}
+.btn-outline-primary.selected:not(:disabled):not(.disabled):active, .btn-outline-primary.selected:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.selected.dropdown-toggle {
+  background-color: var(--theme-btn-outline-primary--background--selected-active);
+  color: var(--theme-btn-outline-primary--color--selected-active);
+}
+.btn-outline-primary.disabled, .btn-outline-primary:disabled {
+  pointer-events: none;
+  cursor: initial;
+  border-color: var(--theme-btn-outline-primary--border-color--disabled);
+  background-color: var(--theme-btn-outline-primary--background--disabled);
+  color: var(--theme-btn-outline-primary--color--disabled);
+  opacity: 1;
+}
+
+.btn-invisible-primary {
+  border-radius: var(--theme-btn--border-radius);
+  --bs-btn-border-width: 0px;
+  --bs-btn-active-border-color: none;
+}
+.btn-invisible-primary, .btn-invisible-primary.focus, .btn-invisible-primary:focus-visible {
+  background-color: var(--theme-btn-invisible-primary--background);
+  color: var(--theme-btn-invisible-primary--color);
+  border-color: transparent;
+}
+.btn-invisible-primary:not(.disabled):not(:disabled):focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+.btn-invisible-primary.selected {
+  background-color: var(--theme-btn-invisible-primary--background--selected);
+}
+.btn-invisible-primary.hover, .btn-invisible-primary:hover {
+  background-color: var(--theme-btn-invisible-primary--background--hover) !important;
+  color: var(--theme-btn-invisible-primary--color--hover) !important;
+}
+.btn-invisible-primary.selected.hover, .btn-invisible-primary.selected:hover {
+  background-color: var(--theme-btn-invisible-primary--background--selected-hover);
+  color: var(--theme-btn-invisible-primary--color--selected-hover);
+}
+.btn-invisible-primary:not(:disabled):not(.disabled):active, .btn-invisible-primary:not(:disabled):not(.disabled).active, .show > .btn-invisible-primary.dropdown-toggle {
+  background-color: var(--theme-btn-invisible-primary--background--active) !important;
+  color: var(--theme-btn-invisible-primary--color--active) !important;
+}
+.btn-invisible-primary.selected:not(:disabled):not(.disabled):active, .btn-invisible-primary.selected:not(:disabled):not(.disabled).active, .show > .btn-invisible-primary.selected.dropdown-toggle {
+  background-color: var(--theme-btn-invisible-primary--background--selected-active);
+  color: var(--theme-btn-invisible-primary--color--selected-active);
+}
+.btn-invisible-primary.disabled, .btn-invisible-primary:disabled {
+  pointer-events: none;
+  cursor: initial;
+  background-color: var(--theme-btn-invisible-primary--background--disabled);
+  color: var(--theme-btn-invisible-primary--color--disabled);
+  opacity: 1;
+}
+
+.btn-secondary {
+  border-radius: var(--theme-btn--border-radius);
+}
+.btn-secondary, .btn-secondary.focus, .btn-secondary:focus-visible {
+  background-color: var(--theme-btn-secondary--background);
+  color: var(--theme-btn-secondary--color);
+  border-width: var(--theme-btn--border-thickness);
+  border-color: var(--theme-btn-secondary--border-color);
+  border-style: solid;
+}
+.btn-secondary:not(.disabled):not(:disabled):focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+.btn-secondary.selected {
+  background-color: var(--theme-btn-secondary--background--selected);
+}
+.btn-secondary.hover, .btn-secondary:hover {
+  border-color: var(--theme-btn-secondary--border-color--hover) !important;
+  background-color: var(--theme-btn-secondary--background--hover) !important;
+  color: var(--theme-btn-secondary--color--hover) !important;
+}
+.btn-secondary.selected.hover, .btn-secondary.selected:hover {
+  background-color: var(--theme-btn-secondary--background--selected-hover);
+  color: var(--theme-btn-secondary--color--selected-hover);
+}
+.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .show > .btn-secondary.dropdown-toggle {
+  border-color: var(--theme-btn-secondary--border-color--active) !important;
+  background-color: var(--theme-btn-secondary--background--active) !important;
+  color: var(--theme-btn-secondary--color--active) !important;
+}
+.btn-secondary.selected:not(:disabled):not(.disabled):active, .btn-secondary.selected:not(:disabled):not(.disabled).active, .show > .btn-secondary.selected.dropdown-toggle {
+  background-color: var(--theme-btn-secondary--background--selected-active);
+  color: var(--theme-btn-secondary--color--selected-active);
+}
+.btn-secondary.disabled, .btn-secondary:disabled {
+  pointer-events: none;
+  cursor: initial;
+  border-color: var(--theme-btn-secondary--border-color--disabled);
+  background-color: var(--theme-btn-secondary--background--disabled);
+  color: var(--theme-btn-secondary--color--disabled);
+  opacity: 1;
+}
+
+.btn-outline-secondary {
+  border-radius: var(--theme-btn--border-radius);
+}
+.btn-outline-secondary, .btn-outline-secondary.focus, .btn-outline-secondary:focus-visible {
+  background-color: var(--theme-btn-outline-secondary--background);
+  color: var(--theme-btn-outline-secondary--color);
+  border-width: var(--theme-btn--border-thickness);
+  border-color: var(--theme-btn-outline-secondary--border-color);
+  border-style: solid;
+}
+.btn-outline-secondary:not(.disabled):not(:disabled):focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+.btn-outline-secondary.selected {
+  background-color: var(--theme-btn-outline-secondary--background--selected);
+}
+.btn-outline-secondary.hover, .btn-outline-secondary:hover {
+  border-color: var(--theme-btn-outline-secondary--border-color--hover) !important;
+  background-color: var(--theme-btn-outline-secondary--background--hover) !important;
+  color: var(--theme-btn-outline-secondary--color--hover) !important;
+}
+.btn-outline-secondary.selected.hover, .btn-outline-secondary.selected:hover {
+  background-color: var(--theme-btn-outline-secondary--background--selected-hover);
+  color: var(--theme-btn-outline-secondary--color--selected-hover);
+}
+.btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active, .show > .btn-outline-secondary.dropdown-toggle {
+  border-color: var(--theme-btn-outline-secondary--border-color--active) !important;
+  background-color: var(--theme-btn-outline-secondary--background--active) !important;
+  color: var(--theme-btn-outline-secondary--color--active) !important;
+}
+.btn-outline-secondary.selected:not(:disabled):not(.disabled):active, .btn-outline-secondary.selected:not(:disabled):not(.disabled).active, .show > .btn-outline-secondary.selected.dropdown-toggle {
+  background-color: var(--theme-btn-outline-secondary--background--selected-active);
+  color: var(--theme-btn-outline-secondary--color--selected-active);
+}
+.btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
+  pointer-events: none;
+  cursor: initial;
+  border-color: var(--theme-btn-outline-secondary--border-color--disabled);
+  background-color: var(--theme-btn-outline-secondary--background--disabled);
+  color: var(--theme-btn-outline-secondary--color--disabled);
+  opacity: 1;
+}
+
+.btn-invisible-secondary {
+  border-radius: var(--theme-btn--border-radius);
+  --bs-btn-border-width: 0px;
+  --bs-btn-active-border-color: none;
+}
+.btn-invisible-secondary, .btn-invisible-secondary.focus, .btn-invisible-secondary:focus-visible {
+  background-color: var(--theme-btn-invisible-secondary--background);
+  color: var(--theme-btn-invisible-secondary--color);
+  border-color: transparent;
+}
+.btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+.btn-invisible-secondary.selected {
+  background-color: var(--theme-btn-invisible-secondary--background--selected);
+}
+.btn-invisible-secondary.hover, .btn-invisible-secondary:hover {
+  background-color: var(--theme-btn-invisible-secondary--background--hover) !important;
+  color: var(--theme-btn-invisible-secondary--color--hover) !important;
+}
+.btn-invisible-secondary.selected.hover, .btn-invisible-secondary.selected:hover {
+  background-color: var(--theme-btn-invisible-secondary--background--selected-hover);
+  color: var(--theme-btn-invisible-secondary--color--selected-hover);
+}
+.btn-invisible-secondary:not(:disabled):not(.disabled):active, .btn-invisible-secondary:not(:disabled):not(.disabled).active, .show > .btn-invisible-secondary.dropdown-toggle {
+  background-color: var(--theme-btn-invisible-secondary--background--active) !important;
+  color: var(--theme-btn-invisible-secondary--color--active) !important;
+}
+.btn-invisible-secondary.selected:not(:disabled):not(.disabled):active, .btn-invisible-secondary.selected:not(:disabled):not(.disabled).active, .show > .btn-invisible-secondary.selected.dropdown-toggle {
+  background-color: var(--theme-btn-invisible-secondary--background--selected-active);
+  color: var(--theme-btn-invisible-secondary--color--selected-active);
+}
+.btn-invisible-secondary.disabled, .btn-invisible-secondary:disabled {
+  pointer-events: none;
+  cursor: initial;
+  background-color: var(--theme-btn-invisible-secondary--background--disabled);
+  color: var(--theme-btn-invisible-secondary--color--disabled);
+  opacity: 1;
+}
+
+.btn-oval,
+.btn-icon {
+  min-width: 2rem;
+  width: 2rem;
+}
+.btn-oval .glyph,
+.btn-icon .glyph {
+  margin-right: 0;
+}
+
+.btn-oval {
+  border-radius: 6.25rem;
+  width: 2rem;
+}
+
+.btn-icon-xs,
+.btn-icon-12 {
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
+}
+
+.btn-icon-s,
+.btn-icon-16 {
+  height: 1.5rem;
+  width: 1.5rem;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+}
+
+.btn-icon-32 {
+  height: 2rem;
+  width: 2rem;
+  min-width: 2rem;
+  min-height: 2rem;
+}
+
+:host {
+  display: inline-block;
+  vertical-align: middle;
+}
 :host.disabled {
   pointer-events: none;
 }
 :host .icon-button {
   padding: 0;
   overflow: hidden;
+}
+:host button:not(:disabled) {
+  cursor: pointer;
 }

package/dist/collection/components/icon-button/icon-button.js

@@ -22,14 +22,21 @@ export class IconButton {
     this.disabled = false;
     this.type = 'button';
   }
+  getIconSizeClass() {
+    return {
+      'btn-icon-12': this.size === '12',
+      'btn-icon-16': this.size === '16',
+      'btn-icon-32': this.size === '32' || this.size === '24' || !this.size,
+    };
+  }
   getIconButtonClasses() {
-    return Object.assign(Object.assign({}, getButtonClasses(this.variant, this.outline, this.ghost || this.invisible, true, this.oval, this.selected, this.disabled)), { 'icon-button': true, 'btn-icon-12': this.size === '12', 'btn-icon-16': this.size === '16', 'btn-icon-32': this.size === '32' || this.size === '24' || !this.size });
+    return Object.assign(Object.assign(Object.assign({}, getButtonClasses(this.variant, this.outline, this.ghost || this.invisible, true, this.oval, this.selected, this.disabled)), { 'icon-button': true }), this.getIconSizeClass());
   }
   render() {
-    return (h(Host, { class: { disabled: this.disabled } }, h("button", { class: this.getIconButtonClasses(), type: this.type }, h("ix-icon", { size: this.size, name: this.icon, color: this.color }), h("div", { style: { display: 'none' } }, h("slot", null)))));
+    return (h(Host, { class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled }) }, h("button", { class: this.getIconButtonClasses(), type: this.type }, h("ix-icon", { size: this.size, name: this.icon, color: this.color }), h("div", { style: { display: 'none' } }, h("slot", null)))));
   }
   static get is() { return "ix-icon-button"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["icon-button.scss"]

package/dist/collection/components/icon-button/icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAUzD,MAAM,OAAO,UAAU;;mBAIgB,WAAW;;;;;;gBAgCN,IAAI;;oBAU3B,KAAK;oBAKL,KAAK;gBAKY,QAAQ;;EAEpC,oBAAoB;IAC1B,uCACK,gBAAgB,CACjB,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,EAC5B,IAAI,EACJ,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,QAAQ,CACd,KACD,aAAa,EAAE,IAAI,EACnB,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI,EACjC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI,EACjC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,IACrE;EACJ,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE;MACtC,cAAQ,KAAK,EAAE,IAAI,CAAC,oBAAoB,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI;QACzD,eAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI;QAChE,WAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;UAC7B,eAAa,CACT,CACC,CACJ,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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\nimport { Component, h, Host, Prop } from '@stencil/core';\nimport { getButtonClasses } from '../button/base-button';\nimport { Button, ButtonVariant } from '../button/button';\n\nexport type IconButtonVariant = ButtonVariant;\n\n@Component({\n  tag: 'ix-icon-button',\n  styleUrl: 'icon-button.scss',\n  scoped: true,\n})\nexport class IconButton implements Button {\n  /**\n   * Variant of button\n   */\n  @Prop() variant: IconButtonVariant = 'Secondary';\n\n  /**\n   * Button outline\n   */\n  @Prop() outline: boolean;\n\n  /**\n   * Button invisible\n   *\n   * @deprecated Use ghost property\n   */\n  @Prop() invisible: boolean;\n\n  /**\n   * Button invisible\n   */\n  @Prop() ghost: boolean;\n\n  /**\n   * Button in oval shape\n   */\n  @Prop() oval: boolean;\n\n  /**\n   * Button icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Size of icon in button\n   */\n  @Prop() size: '32' | '24' | '16' | '12' = '24';\n\n  /**\n   * Color of icon in  button\n   */\n  @Prop() color: string;\n\n  /**\n   * Selected state only working with outline or invisible\n   */\n  @Prop() selected = false;\n\n  /**\n   * Disabled\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Type of the button\n   */\n  @Prop() type: 'button' | 'submit' = 'button';\n\n  private getIconButtonClasses() {\n    return {\n      ...getButtonClasses(\n        this.variant,\n        this.outline,\n        this.ghost || this.invisible,\n        true,\n        this.oval,\n        this.selected,\n        this.disabled\n      ),\n      'icon-button': true,\n      'btn-icon-12': this.size === '12',\n      'btn-icon-16': this.size === '16',\n      'btn-icon-32': this.size === '32' || this.size === '24' || !this.size,\n    };\n  }\n\n  render() {\n    return (\n      <Host class={{ disabled: this.disabled }}>\n        <button class={this.getIconButtonClasses()} type={this.type}>\n          <ix-icon size={this.size} name={this.icon} color={this.color} />\n          <div style={{ display: 'none' }}>\n            <slot></slot>\n          </div>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAUzD,MAAM,OAAO,UAAU;;mBAIgB,WAAW;;;;;;gBAgCN,IAAI;;oBAU3B,KAAK;oBAKL,KAAK;gBAKY,QAAQ;;EAEpC,gBAAgB;IACtB,OAAO;MACL,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;MACjC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;MACjC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI;KACtE,CAAC;EACJ,CAAC;EAEO,oBAAoB;IAC1B,qDACK,gBAAgB,CACjB,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,EAC5B,IAAI,EACJ,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,QAAQ,CACd,KACD,aAAa,EAAE,IAAI,KAChB,IAAI,CAAC,gBAAgB,EAAE,EAC1B;EACJ,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,kCAAO,IAAI,CAAC,gBAAgB,EAAE,KAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ;MAChE,cAAQ,KAAK,EAAE,IAAI,CAAC,oBAAoB,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI;QACzD,eAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI;QAChE,WAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;UAC7B,eAAa,CACT,CACC,CACJ,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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\nimport { Component, h, Host, Prop } from '@stencil/core';\nimport { getButtonClasses } from '../button/base-button';\nimport { Button, ButtonVariant } from '../button/button';\n\nexport type IconButtonVariant = ButtonVariant;\n\n@Component({\n  tag: 'ix-icon-button',\n  styleUrl: 'icon-button.scss',\n  shadow: true,\n})\nexport class IconButton implements Button {\n  /**\n   * Variant of button\n   */\n  @Prop() variant: IconButtonVariant = 'Secondary';\n\n  /**\n   * Button outline\n   */\n  @Prop() outline: boolean;\n\n  /**\n   * Button invisible\n   *\n   * @deprecated Use ghost property\n   */\n  @Prop() invisible: boolean;\n\n  /**\n   * Button invisible\n   */\n  @Prop() ghost: boolean;\n\n  /**\n   * Button in oval shape\n   */\n  @Prop() oval: boolean;\n\n  /**\n   * Button icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Size of icon in button\n   */\n  @Prop() size: '32' | '24' | '16' | '12' = '24';\n\n  /**\n   * Color of icon in  button\n   */\n  @Prop() color: string;\n\n  /**\n   * Selected state only working with outline or invisible\n   */\n  @Prop() selected = false;\n\n  /**\n   * Disabled\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Type of the button\n   */\n  @Prop() type: 'button' | 'submit' = 'button';\n\n  private getIconSizeClass() {\n    return {\n      'btn-icon-12': this.size === '12',\n      'btn-icon-16': this.size === '16',\n      'btn-icon-32': this.size === '32' || this.size === '24' || !this.size,\n    };\n  }\n\n  private getIconButtonClasses() {\n    return {\n      ...getButtonClasses(\n        this.variant,\n        this.outline,\n        this.ghost || this.invisible,\n        true,\n        this.oval,\n        this.selected,\n        this.disabled\n      ),\n      'icon-button': true,\n      ...this.getIconSizeClass(),\n    };\n  }\n\n  render() {\n    return (\n      <Host class={{ ...this.getIconSizeClass(), disabled: this.disabled }}>\n        <button class={this.getIconButtonClasses()} type={this.type}>\n          <ix-icon size={this.size} name={this.icon} color={this.color} />\n          <div style={{ display: 'none' }}>\n            <slot></slot>\n          </div>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/key-value/key-value.css

@@ -0,0 +1,56 @@
+/*
+ * SPDX-FileCopyrightText: 2023 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.
+ */
+/* Dimensions */
+/* Font sizes */
+/* Line heights */
+/* Animation timings */
+:host(.keyValue) {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 1rem;
+}
+:host(.keyValue) .keyValue__icon {
+  padding: 0.25rem 0;
+}
+:host(.keyValue) .keyValue__content {
+  display: flex;
+  align-items: flex-start;
+}
+:host(.keyValue) .keyValue__content .content__label {
+  color: var(--theme-color-soft-text);
+}
+
+:host(.keyValue.keyValue--column) {
+  padding: 0.5rem 0;
+  border-bottom: 1px solid var(--theme-color-soft-bdr);
+}
+:host(.keyValue.keyValue--column) .keyValue__content {
+  flex-direction: column;
+}
+:host(.keyValue.keyValue--column) .keyValue__content .content__label,
+:host(.keyValue.keyValue--column) .keyValue__content .content__value:not(.has-customValue) {
+  padding: 2px 0;
+}
+
+:host(.keyValue.keyValue--row) {
+  padding: 0.25rem 0;
+}
+:host(.keyValue.keyValue--row) .keyValue__content {
+  flex-direction: row;
+  gap: 1rem;
+  align-items: center;
+}
+:host(.keyValue.keyValue--row) .keyValue__content .content__label,
+:host(.keyValue.keyValue--row) .keyValue__content .content__value:not(.has-customValue) {
+  padding: 6px 0;
+}
+:host(.keyValue.keyValue--row) .keyValue__content .content__label {
+  min-width: 8rem;
+}