@siemens/ix 1.5.0 → 1.6.0

package/dist/collection/components/action-card/action-card.js

@@ -0,0 +1,136 @@
+/*
+ * 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.
+ */
+import { h, Host } from '@stencil/core';
+/**
+ * @since 1.6.0
+ */
+export class IxActionCard {
+  constructor() {
+    this.variant = 'insight';
+    this.icon = undefined;
+    this.heading = undefined;
+    this.subheading = undefined;
+    this.selected = false;
+  }
+  render() {
+    return (h(Host, { class: {
+        selected: this.selected,
+      } }, h("ix-card", { variant: this.variant, class: 'pointer' }, h("ix-card-content", null, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "24" })) : (''), this.heading ? (h("ix-typography", { variant: "large-title" }, this.heading)) : (''), this.subheading ? (h("ix-typography", { variant: "default-title-single", color: this.variant === 'insight' ? 'soft' : undefined }, this.subheading)) : null, h("slot", null)))));
+  }
+  static get is() { return "ix-action-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["action-card.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["action-card.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ActionCardVariant",
+          "resolved": "\"alarm\" | \"critical\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"success\" | \"warning\"",
+          "references": {
+            "ActionCardVariant": {
+              "location": "local",
+              "path": "/__w/ix/ix/packages/core/src/components/action-card/action-card.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Card variant"
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "'insight'"
+      },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | undefined",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Card icon"
+        },
+        "attribute": "icon",
+        "reflect": false,
+        "defaultValue": "undefined"
+      },
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Card heading"
+        },
+        "attribute": "heading",
+        "reflect": false
+      },
+      "subheading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Card subheading"
+        },
+        "attribute": "subheading",
+        "reflect": false
+      },
+      "selected": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Card selection"
+        },
+        "attribute": "selected",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+}
+//# sourceMappingURL=action-card.js.map

package/dist/collection/components/action-card/action-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-card.js","sourceRoot":"","sources":["../../../src/components/action-card/action-card.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAKzD;;GAEG;AAMH,MAAM,OAAO,YAAY;;mBAIc,SAAS;gBAKX,SAAS;;;oBAezB,KAAK;;EAExB,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB;MAED,eAAS,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,SAAS;QAC9C;UACG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,eAAS,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,GAAW,CAC9D,CAAC,CAAC,CAAC,CACF,EAAE,CACH;UACA,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACd,qBAAe,OAAO,EAAC,aAAa,IACjC,IAAI,CAAC,OAAO,CACC,CACjB,CAAC,CAAC,CAAC,CACF,EAAE,CACH;UACA,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CACjB,qBACE,OAAO,EAAC,sBAAsB,EAC9B,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,IAErD,IAAI,CAAC,UAAU,CACF,CACjB,CAAC,CAAC,CAAC,IAAI;UACR,eAAa,CACG,CACV,CACL,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 { CardVariant } from '../card/card';\n\nexport type ActionCardVariant = CardVariant;\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-action-card',\n  styleUrl: 'action-card.scss',\n  shadow: true,\n})\nexport class IxActionCard {\n  /**\n   * Card variant\n   */\n  @Prop() variant: ActionCardVariant = 'insight';\n\n  /**\n   * Card icon\n   */\n  @Prop() icon: string | undefined = undefined;\n\n  /**\n   * Card heading\n   */\n  @Prop() heading: string;\n\n  /**\n   * Card subheading\n   */\n  @Prop() subheading: string;\n\n  /**\n   * Card selection\n   */\n  @Prop() selected = false;\n\n  render() {\n    return (\n      <Host\n        class={{\n          selected: this.selected,\n        }}\n      >\n        <ix-card variant={this.variant} class={'pointer'}>\n          <ix-card-content>\n            {this.icon ? (\n              <ix-icon class={'icon'} name={this.icon} size=\"24\"></ix-icon>\n            ) : (\n              ''\n            )}\n            {this.heading ? (\n              <ix-typography variant=\"large-title\">\n                {this.heading}\n              </ix-typography>\n            ) : (\n              ''\n            )}\n            {this.subheading ? (\n              <ix-typography\n                variant=\"default-title-single\"\n                color={this.variant === 'insight' ? 'soft' : undefined}\n              >\n                {this.subheading}\n              </ix-typography>\n            ) : null}\n            <slot></slot>\n          </ix-card-content>\n        </ix-card>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/basic-navigation/basic-navigation.css

@@ -21,7 +21,7 @@
   height: calc(100% - 2.75rem);
   width: calc(100% - 4rem);
   position: relative;
-  margin-left: 4rem;
+  margin-left: 3.25rem;
   overflow: auto;
 }
 :host.hide-header .content {

package/dist/collection/components/blind/blind.css

@@ -68,7 +68,7 @@
   color: var(--theme-blind-header-closed--color);
   background-color: var(--theme-blind-header-closed--background);
 }
-:host .blind-header .glyph {
+:host .blind-header .collapse-icon {
   color: var(--theme-blind-header-icon-closed--color);
   padding: 0.25rem 0.5rem;
 }
@@ -108,7 +108,7 @@
 :host .blind-header:not(.disabled):not(:disabled):hover {
   background-color: var(--theme-blind-header-open--background--hover);
 }
-:host .blind-header:not(.disabled):not(:disabled):hover .glyph {
+:host .blind-header:not(.disabled):not(:disabled):hover .collapse-icon {
   color: var(--theme-blind-header-icon-open--color--hover);
 }
 :host .blind-header:not(.disabled):not(:disabled) {
@@ -117,7 +117,7 @@
 :host .blind-header:not(.disabled):not(:disabled):active {
   background-color: var(--theme-blind-header-open--background--active);
 }
-:host .blind-header:not(.disabled):not(:disabled):active .glyph {
+:host .blind-header:not(.disabled):not(:disabled):active .collapse-icon {
   color: var(--theme-blind-header-icon-open--color--active);
 }
 :host .blind-header:not(.disabled):not(:disabled):focus-visible {
@@ -133,7 +133,7 @@
 :host .blind-header.closed:not(.disabled):not(:disabled):hover {
   background-color: var(--theme-blind-header-open--background--hover);
 }
-:host .blind-header.closed:not(.disabled):not(:disabled):hover .glyph {
+:host .blind-header.closed:not(.disabled):not(:disabled):hover .collapse-icon {
   color: var(--theme-blind-header-icon-closed--color--hover);
 }
 :host .blind-header.closed:not(.disabled):not(:disabled) {
@@ -142,7 +142,7 @@
 :host .blind-header.closed:not(.disabled):not(:disabled):active {
   background-color: var(--theme-blind-header-open--background--active);
 }
-:host .blind-header.closed:not(.disabled):not(:disabled):active .glyph {
+:host .blind-header.closed:not(.disabled):not(:disabled):active .collapse-icon {
   color: var(--theme-blind-header-icon-closed--color--active);
 }
 :host .blind-content {

package/dist/collection/components/blind/blind.js

@@ -30,7 +30,7 @@ export class Blind {
     this.animateCollapse(this.collapsed);
   }
   get content() {
-    return this.hostElement.querySelector('.blind-content');
+    return this.hostElement.shadowRoot.querySelector('.blind-content');
   }
   animation(isCollapsed) {
     this.animateCollapse(isCollapsed);
@@ -75,16 +75,13 @@ export class Blind {
     return (h(Host, null, h("button", { class: {
         'blind-header': true,
         closed: this.collapsed,
-      }, type: "button", "aria-labelledby": `ix-blind-header-title-${this.id}`, "aria-controls": `ix-blind-content-section-${this.id}`, "aria-expanded": a11yBoolean(!this.collapsed), onClick: (e) => this.onHeaderClick(e) }, h("span", { class: {
-        glyph: true,
-        'glyph-chevron-right-small': true,
-      }, ref: (ref) => (this.chevronRef = ref) }), h("div", { class: "blind-header-title", id: `ix-blind-header-title-${this.id}` }, this.label !== undefined ? (h("span", { class: "blind-header-title-basic" }, this.icon !== undefined ? (h("ix-icon", { name: this.icon })) : (''), h("span", { class: "blind-header-title-default" }, this.label), h("span", { class: "header-actions" }, h("slot", { name: "header-actions" })))) : (h("slot", { name: "custom-header" })))), h("section", { id: `ix-blind-content-section-${this.id}`, "aria-labelledby": `ix-blind-header-title-${this.id}` }, h("div", { class: {
+      }, type: "button", "aria-labelledby": `ix-blind-header-title-${this.id}`, "aria-controls": `ix-blind-content-section-${this.id}`, "aria-expanded": a11yBoolean(!this.collapsed), onClick: (e) => this.onHeaderClick(e) }, h("ix-icon", { class: 'collapse-icon', name: "chevron-right-small", ref: (ref) => (this.chevronRef = ref) }), h("div", { class: "blind-header-title", id: `ix-blind-header-title-${this.id}` }, this.label !== undefined ? (h("span", { class: "blind-header-title-basic" }, this.icon !== undefined ? (h("ix-icon", { name: this.icon })) : (''), h("span", { class: "blind-header-title-default" }, this.label), h("span", { class: "header-actions", onClick: (e) => e.stopImmediatePropagation() }, h("slot", { name: "header-actions" })))) : (h("slot", { name: "custom-header" })))), h("section", { id: `ix-blind-content-section-${this.id}`, "aria-labelledby": `ix-blind-header-title-${this.id}` }, h("div", { class: {
         'blind-content': true,
         hide: this.collapsed,
       } }, h("slot", null)))));
   }
   static get is() { return "ix-blind"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["blind.scss"]

package/dist/collection/components/blind/blind.js.map

@@ -1 +1 @@
-{"version":3,"file":"blind.js","sourceRoot":"","sources":["../../../src/components/blind/blind.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  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { a11yBoolean } from '../utils/a11y';\n\nlet sequentialInstanceId = 0;\n@Component({\n  tag: 'ix-blind',\n  styleUrl: 'blind.scss',\n  scoped: true,\n})\nexport class Blind {\n  /**\n   * Collapsed state\n   */\n  @Prop({ mutable: true, reflect: true }) collapsed = false;\n\n  /**\n   * Label of blind\n   */\n  @Prop() label: string;\n\n  /**\n   * Optional icon to be displayed next to the header label\n   * @since 1.5.0\n   */\n  @Prop() icon: string;\n\n  /**\n   * Collapsed state changed\n   */\n  @Event() collapsedChange: EventEmitter<boolean>;\n\n  @Element() hostElement!: HTMLIxBlindElement;\n\n  private chevronRef: HTMLElement;\n  private id = ++sequentialInstanceId;\n\n  constructor() {}\n\n  private onHeaderClick(e: Event) {\n    if ((e.target as Element).closest('.header-actions')) {\n      return;\n    }\n\n    e.preventDefault();\n    e.stopImmediatePropagation();\n\n    this.collapsed = !this.collapsed;\n    this.collapsedChange.emit(this.collapsed);\n  }\n\n  componentDidLoad() {\n    this.animateCollapse(this.collapsed);\n  }\n\n  get content() {\n    return this.hostElement.querySelector('.blind-content');\n  }\n\n  @Watch('collapsed')\n  animation(isCollapsed: boolean) {\n    this.animateCollapse(isCollapsed);\n  }\n\n  private animateCollapse(isCollapsed: boolean) {\n    if (isCollapsed) {\n      this.rotateChevronRight();\n    } else {\n      this.rotateChevronDown();\n    }\n  }\n\n  private rotateChevronDown() {\n    anime({\n      targets: this.chevronRef,\n      duration: 150,\n      easing: 'easeInOutSine',\n      rotateZ: 90,\n    });\n    anime({\n      targets: this.content,\n      duration: 150,\n      easing: 'easeInOutSine',\n      opacity: 1,\n    });\n  }\n\n  private rotateChevronRight() {\n    anime({\n      targets: this.chevronRef,\n      duration: 150,\n      easing: 'easeInOutSine',\n      rotateZ: 0,\n    });\n    anime({\n      targets: this.content,\n      duration: 150,\n      easing: 'easeInOutSine',\n      opacity: 0,\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <button\n          class={{\n            'blind-header': true,\n            closed: this.collapsed,\n          }}\n          type=\"button\"\n          aria-labelledby={`ix-blind-header-title-${this.id}`}\n          aria-controls={`ix-blind-content-section-${this.id}`}\n          aria-expanded={a11yBoolean(!this.collapsed)}\n          onClick={(e) => this.onHeaderClick(e)}\n        >\n          <span\n            class={{\n              glyph: true,\n              'glyph-chevron-right-small': true,\n            }}\n            ref={(ref) => (this.chevronRef = ref)}\n          ></span>\n          <div\n            class=\"blind-header-title\"\n            id={`ix-blind-header-title-${this.id}`}\n          >\n            {this.label !== undefined ? (\n              <span class=\"blind-header-title-basic\">\n                {this.icon !== undefined ? (\n                  <ix-icon name={this.icon}></ix-icon>\n                ) : (\n                  ''\n                )}\n                <span class=\"blind-header-title-default\">{this.label}</span>\n                <span class=\"header-actions\">\n                  <slot name=\"header-actions\"></slot>\n                </span>\n              </span>\n            ) : (\n              <slot name=\"custom-header\"></slot>\n            )}\n          </div>\n        </button>\n        <section\n          id={`ix-blind-content-section-${this.id}`}\n          aria-labelledby={`ix-blind-header-title-${this.id}`}\n        >\n          <div\n            class={{\n              'blind-content': true,\n              hide: this.collapsed,\n            }}\n          >\n            <slot></slot>\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"blind.js","sourceRoot":"","sources":["../../../src/components/blind/blind.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  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { a11yBoolean } from '../utils/a11y';\n\nlet sequentialInstanceId = 0;\n@Component({\n  tag: 'ix-blind',\n  styleUrl: 'blind.scss',\n  shadow: true,\n})\nexport class Blind {\n  /**\n   * Collapsed state\n   */\n  @Prop({ mutable: true, reflect: true }) collapsed = false;\n\n  /**\n   * Label of blind\n   */\n  @Prop() label: string;\n\n  /**\n   * Optional icon to be displayed next to the header label\n   * @since 1.5.0\n   */\n  @Prop() icon: string;\n\n  /**\n   * Collapsed state changed\n   */\n  @Event() collapsedChange: EventEmitter<boolean>;\n\n  @Element() hostElement!: HTMLIxBlindElement;\n\n  private chevronRef: HTMLElement;\n  private id = ++sequentialInstanceId;\n\n  constructor() {}\n\n  private onHeaderClick(e: Event) {\n    if ((e.target as Element).closest('.header-actions')) {\n      return;\n    }\n\n    e.preventDefault();\n    e.stopImmediatePropagation();\n\n    this.collapsed = !this.collapsed;\n    this.collapsedChange.emit(this.collapsed);\n  }\n\n  componentDidLoad() {\n    this.animateCollapse(this.collapsed);\n  }\n\n  get content() {\n    return this.hostElement.shadowRoot.querySelector('.blind-content');\n  }\n\n  @Watch('collapsed')\n  animation(isCollapsed: boolean) {\n    this.animateCollapse(isCollapsed);\n  }\n\n  private animateCollapse(isCollapsed: boolean) {\n    if (isCollapsed) {\n      this.rotateChevronRight();\n    } else {\n      this.rotateChevronDown();\n    }\n  }\n\n  private rotateChevronDown() {\n    anime({\n      targets: this.chevronRef,\n      duration: 150,\n      easing: 'easeInOutSine',\n      rotateZ: 90,\n    });\n    anime({\n      targets: this.content,\n      duration: 150,\n      easing: 'easeInOutSine',\n      opacity: 1,\n    });\n  }\n\n  private rotateChevronRight() {\n    anime({\n      targets: this.chevronRef,\n      duration: 150,\n      easing: 'easeInOutSine',\n      rotateZ: 0,\n    });\n    anime({\n      targets: this.content,\n      duration: 150,\n      easing: 'easeInOutSine',\n      opacity: 0,\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <button\n          class={{\n            'blind-header': true,\n            closed: this.collapsed,\n          }}\n          type=\"button\"\n          aria-labelledby={`ix-blind-header-title-${this.id}`}\n          aria-controls={`ix-blind-content-section-${this.id}`}\n          aria-expanded={a11yBoolean(!this.collapsed)}\n          onClick={(e) => this.onHeaderClick(e)}\n        >\n          <ix-icon\n            class={'collapse-icon'}\n            name=\"chevron-right-small\"\n            ref={(ref) => (this.chevronRef = ref)}\n          ></ix-icon>\n          <div\n            class=\"blind-header-title\"\n            id={`ix-blind-header-title-${this.id}`}\n          >\n            {this.label !== undefined ? (\n              <span class=\"blind-header-title-basic\">\n                {this.icon !== undefined ? (\n                  <ix-icon name={this.icon}></ix-icon>\n                ) : (\n                  ''\n                )}\n                <span class=\"blind-header-title-default\">{this.label}</span>\n                <span\n                  class=\"header-actions\"\n                  onClick={(e) => e.stopImmediatePropagation()}\n                >\n                  <slot name=\"header-actions\"></slot>\n                </span>\n              </span>\n            ) : (\n              <slot name=\"custom-header\"></slot>\n            )}\n          </div>\n        </button>\n        <section\n          id={`ix-blind-content-section-${this.id}`}\n          aria-labelledby={`ix-blind-header-title-${this.id}`}\n        >\n          <div\n            class={{\n              'blind-content': true,\n              hide: this.collapsed,\n            }}\n          >\n            <slot></slot>\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -6,10 +6,366 @@
  * 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;
   width: auto;
   height: 2rem;
+  vertical-align: middle;
 }
 :host.disabled {
   pointer-events: none;
@@ -17,4 +373,7 @@
 :host .btn {
   width: 100%;
   height: 100%;
+}
+:host button:not(:disabled) {
+  cursor: pointer;
 }

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

@@ -24,7 +24,7 @@ export class Button {
       } }, h("button", { type: this.type, class: getButtonClasses(this.variant, this.outline, this.ghost || this.invisible, false, false, this.selected, this.disabled) }, h("slot", null))));
   }
   static get is() { return "ix-button"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["./button.scss"]
@@ -54,7 +54,7 @@ export class Button {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Button varaint"
+          "text": "Button variant"
         },
         "attribute": "variant",
         "reflect": false,