@siemens/ix 2.0.0-beta.0 → 2.0.0

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

@@ -14,7 +14,19 @@
  * 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.
+ */
 :host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
   display: flex;
   position: relative;
   width: 100%;
@@ -26,6 +38,30 @@
 :host *::before {
   box-sizing: border-box;
 }
+:host ::-webkit-scrollbar-button {
+  display: none;
+}
+:host ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host ::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host ::-webkit-scrollbar-corner {
+  display: none;
+}
 :host ix-application-header {
   z-index: calc(var(--theme-z-index-sticky) + 1);
 }
@@ -48,15 +84,16 @@
   width: 100%;
 }
 
+:host(.hide-header) .navigation-content,
 :host(.hide-header) .content {
   height: 100%;
 }
 
-:host(.mode-large) .content {
+:host(.breakpoint-lg) .content {
   margin-left: 0rem;
 }
 
-:host(.mode-small) .content {
+:host(.breakpoint-sm) .content {
   margin-left: 0px;
   width: 100%;
 }

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

@@ -7,13 +7,36 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { h, Host } from '@stencil/core';
+import { ApplicationLayoutContext } from '../utils/application-layout/context';
+import { applicationLayoutService } from '../utils/application-layout/service';
+import { useContextProvider } from '../utils/context';
 import { menuController } from '../utils/menu-service/menu-service';
-import { screenMode } from '../utils/screen/service';
 export class BasicNavigation {
   constructor() {
     this.applicationName = undefined;
     this.hideHeader = false;
-    this.mode = 'large';
+    this.forceBreakpoint = undefined;
+    this.breakpoints = ['sm', 'md', 'lg'];
+    this.breakpoint = 'lg';
+  }
+  onHideHeaderChange() {
+    var _a;
+    (_a = this.contextProvider) === null || _a === void 0 ? void 0 : _a.emit({
+      hideHeader: this.hideHeader,
+      host: 'basic-navigation',
+    });
+    this.breakpoint = applicationLayoutService.breakpoint;
+  }
+  forceLayoutChange(newMode) {
+    if (!newMode) {
+      applicationLayoutService.enableBreakpointDetection();
+      return;
+    }
+    applicationLayoutService.disableBreakpointDetection();
+    applicationLayoutService.setBreakpoint(newMode);
+  }
+  onBreakpointsChange(breakpoints) {
+    applicationLayoutService.setBreakpoints(breakpoints);
   }
   get menu() {
     return this.hostElement.querySelector('ix-menu');
@@ -26,9 +49,17 @@ export class BasicNavigation {
     (_a = this.menu) === null || _a === void 0 ? void 0 : _a.toggleMenu(false);
   }
   componentWillLoad() {
-    if (this.hideHeader === false) {
-      this.modeDisposable = screenMode.onChange.on((mode) => (this.mode = mode));
-      this.mode = screenMode.mode;
+    applicationLayoutService.setBreakpoints(this.breakpoints);
+    this.contextProvider = useContextProvider(this.hostElement, ApplicationLayoutContext, {
+      hideHeader: this.hideHeader,
+      host: 'basic-navigation',
+    });
+    this.modeDisposable = applicationLayoutService.onChange.on((mode) => {
+      this.breakpoint = mode;
+    });
+    this.breakpoint = applicationLayoutService.breakpoint;
+    if (this.forceBreakpoint) {
+      this.forceLayoutChange(this.forceBreakpoint);
     }
   }
   componentDidRender() {
@@ -43,8 +74,8 @@ export class BasicNavigation {
   render() {
     return (h(Host, { "data-role": "", class: {
         'hide-header': this.hideHeader,
-        [`mode-${this.mode}`]: true,
-      } }, !this.hideHeader ? (h("ix-application-header", { name: this.applicationName, mode: this.mode }, h("slot", { name: "logo", slot: "logo" }))) : null, h("div", { class: "navigation-content" }, h("slot", { name: "menu" }), h("div", { class: "content", onClick: () => this.onContentClick() }, h("slot", null)))));
+        [`breakpoint-${this.breakpoint}`]: true,
+      } }, !this.hideHeader ? (h("ix-application-header", { name: this.applicationName }, h("slot", { name: "logo", slot: "logo" }))) : null, h("div", { class: "navigation-content" }, h("slot", { name: "menu" }), h("div", { class: "content", onClick: () => this.onContentClick() }, h("slot", null)))));
   }
   static get is() { return "ix-basic-navigation"; }
   static get encapsulation() { return "shadow"; }
@@ -94,14 +125,66 @@ export class BasicNavigation {
         "attribute": "hide-header",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "forceBreakpoint": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Breakpoint | undefined",
+          "resolved": "\"lg\" | \"md\" | \"sm\"",
+          "references": {
+            "Breakpoint": {
+              "location": "import",
+              "path": "../utils/breakpoints"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Change the responsive layout of the menu structure"
+        },
+        "attribute": "force-breakpoint",
+        "reflect": false
+      },
+      "breakpoints": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Breakpoint[]",
+          "resolved": "(\"sm\" | \"md\" | \"lg\")[]",
+          "references": {
+            "Breakpoint": {
+              "location": "import",
+              "path": "../utils/breakpoints"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Supported layouts"
+        },
+        "defaultValue": "['sm', 'md', 'lg']"
       }
     };
   }
   static get states() {
     return {
-      "mode": {}
+      "breakpoint": {}
     };
   }
   static get elementRef() { return "hostElement"; }
+  static get watchers() {
+    return [{
+        "propName": "hideHeader",
+        "methodName": "onHideHeaderChange"
+      }, {
+        "propName": "breakpoints",
+        "methodName": "onBreakpointsChange"
+      }];
+  }
 }
 //# sourceMappingURL=basic-navigation.js.map

package/dist/collection/components/basic-navigation/basic-navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"basic-navigation.js","sourceRoot":"","sources":["../../../src/components/basic-navigation/basic-navigation.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AAEpE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAQrD,MAAM,OAAO,eAAe;;;sBAWL,KAAK;gBAEJ,OAAO;;EAE7B,IAAI,IAAI;IACN,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;EACnD,CAAC;EAIO,cAAc;;IACpB,IAAI,cAAc,CAAC,QAAQ,EAAE;MAC3B,OAAO;KACR;IACD,MAAA,IAAI,CAAC,IAAI,0CAAE,UAAU,CAAC,KAAK,CAAC,CAAC;EAC/B,CAAC;EAED,iBAAiB;IACf,IAAI,IAAI,CAAC,UAAU,KAAK,KAAK,EAAE;MAC7B,IAAI,CAAC,cAAc,GAAG,UAAU,CAAC,QAAQ,CAAC,EAAE,CAC1C,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,CAC7B,CAAC;MACF,IAAI,CAAC,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC;KAC7B;EACH,CAAC;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC;KAClD;EACH,CAAC;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;EACjC,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,iBACO,EAAE,EACZ,KAAK,EAAE;QACL,aAAa,EAAE,IAAI,CAAC,UAAU;QAC9B,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;OAC5B;MAEA,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAClB,6BAAuB,IAAI,EAAE,IAAI,CAAC,eAAe,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI;QAChE,YAAM,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,GAAQ,CACf,CACzB,CAAC,CAAC,CAAC,IAAI;MACR,WAAK,KAAK,EAAC,oBAAoB;QAC7B,YAAM,IAAI,EAAC,MAAM,GAAQ;QACzB,WAAK,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE;UACvD,eAAa,CACT,CACF,CACD,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, Element, h, Host, Prop, State } from '@stencil/core';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { Mode } from '../utils/screen/mode';\nimport { screenMode } from '../utils/screen/service';\nimport { Disposable } from '../utils/typed-event';\n\n@Component({\n  tag: 'ix-basic-navigation',\n  styleUrl: 'basic-navigation.scss',\n  shadow: true,\n})\nexport class BasicNavigation {\n  @Element() hostElement: HTMLIxBasicNavigationElement;\n\n  /**\n   * Application name\n   */\n  @Prop() applicationName: string;\n\n  /**\n   * Hide application header. Will disable responsive feature of basic navigation.\n   */\n  @Prop() hideHeader = false;\n\n  @State() mode: Mode = 'large';\n\n  get menu(): HTMLIxMenuElement | null {\n    return this.hostElement.querySelector('ix-menu');\n  }\n\n  private modeDisposable: Disposable;\n\n  private onContentClick() {\n    if (menuController.isPinned) {\n      return;\n    }\n    this.menu?.toggleMenu(false);\n  }\n\n  componentWillLoad() {\n    if (this.hideHeader === false) {\n      this.modeDisposable = screenMode.onChange.on(\n        (mode) => (this.mode = mode)\n      );\n      this.mode = screenMode.mode;\n    }\n  }\n\n  componentDidRender() {\n    if (this.menu) {\n      this.menu.applicationName = this.applicationName;\n    }\n  }\n\n  disconnectedCallback() {\n    this.modeDisposable?.dispose();\n  }\n\n  render() {\n    return (\n      <Host\n        data-role=\"\"\n        class={{\n          'hide-header': this.hideHeader,\n          [`mode-${this.mode}`]: true,\n        }}\n      >\n        {!this.hideHeader ? (\n          <ix-application-header name={this.applicationName} mode={this.mode}>\n            <slot name=\"logo\" slot=\"logo\"></slot>\n          </ix-application-header>\n        ) : null}\n        <div class=\"navigation-content\">\n          <slot name=\"menu\"></slot>\n          <div class=\"content\" onClick={() => this.onContentClick()}>\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"basic-navigation.js","sourceRoot":"","sources":["../../../src/components/basic-navigation/basic-navigation.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 { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { ApplicationLayoutContext } from '../utils/application-layout/context';\nimport { applicationLayoutService } from '../utils/application-layout/service';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextProvider, useContextProvider } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { Disposable } from '../utils/typed-event';\n\n@Component({\n  tag: 'ix-basic-navigation',\n  styleUrl: 'basic-navigation.scss',\n  shadow: true,\n})\nexport class BasicNavigation {\n  @Element() hostElement: HTMLIxBasicNavigationElement;\n\n  /**\n   * Application name\n   */\n  @Prop() applicationName: string;\n\n  /**\n   * Hide application header. Will disable responsive feature of basic navigation.\n   */\n  @Prop() hideHeader = false;\n  @Watch('hideHeader')\n  onHideHeaderChange() {\n    this.contextProvider?.emit({\n      hideHeader: this.hideHeader,\n      host: 'basic-navigation',\n    });\n\n    this.breakpoint = applicationLayoutService.breakpoint;\n  }\n\n  /**\n   * Change the responsive layout of the menu structure\n   */\n  @Prop() forceBreakpoint: Breakpoint | undefined;\n  forceLayoutChange(newMode: Breakpoint | undefined) {\n    if (!newMode) {\n      applicationLayoutService.enableBreakpointDetection();\n      return;\n    }\n\n    applicationLayoutService.disableBreakpointDetection();\n    applicationLayoutService.setBreakpoint(newMode);\n  }\n\n  /**\n   * Supported layouts\n   */\n  @Prop() breakpoints: Breakpoint[] = ['sm', 'md', 'lg'];\n  @Watch('breakpoints')\n  onBreakpointsChange(breakpoints: Breakpoint[]) {\n    applicationLayoutService.setBreakpoints(breakpoints);\n  }\n\n  @State() breakpoint: Breakpoint = 'lg';\n\n  get menu(): HTMLIxMenuElement | null {\n    return this.hostElement.querySelector('ix-menu');\n  }\n\n  private modeDisposable: Disposable;\n  private contextProvider: ContextProvider<typeof ApplicationLayoutContext>;\n\n  private onContentClick() {\n    if (menuController.isPinned) {\n      return;\n    }\n    this.menu?.toggleMenu(false);\n  }\n\n  componentWillLoad() {\n    applicationLayoutService.setBreakpoints(this.breakpoints);\n\n    this.contextProvider = useContextProvider(\n      this.hostElement,\n      ApplicationLayoutContext,\n      {\n        hideHeader: this.hideHeader,\n        host: 'basic-navigation',\n      }\n    );\n\n    this.modeDisposable = applicationLayoutService.onChange.on((mode) => {\n      this.breakpoint = mode;\n    });\n    this.breakpoint = applicationLayoutService.breakpoint;\n\n    if (this.forceBreakpoint) {\n      this.forceLayoutChange(this.forceBreakpoint);\n    }\n  }\n\n  componentDidRender() {\n    if (this.menu) {\n      this.menu.applicationName = this.applicationName;\n    }\n  }\n\n  disconnectedCallback() {\n    this.modeDisposable?.dispose();\n  }\n\n  render() {\n    return (\n      <Host\n        data-role=\"\"\n        class={{\n          'hide-header': this.hideHeader,\n          [`breakpoint-${this.breakpoint}`]: true,\n        }}\n      >\n        {!this.hideHeader ? (\n          <ix-application-header name={this.applicationName}>\n            <slot name=\"logo\" slot=\"logo\"></slot>\n          </ix-application-header>\n        ) : null}\n        <div class=\"navigation-content\">\n          <slot name=\"menu\"></slot>\n          <div class=\"content\" onClick={() => this.onContentClick()}>\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -45,8 +45,6 @@
 :host {
   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;
 }
@@ -62,98 +60,294 @@
   border: solid var(--theme-blind--border-thickness) transparent;
   border-radius: var(--theme-blind--border-radius) var(--theme-blind--border-radius) 0 0;
   padding-right: 0.5rem;
-  transition: border-radius 150ms;
   cursor: pointer;
   z-index: 1;
-  color: var(--theme-blind-header-closed--color);
-  background-color: var(--theme-blind-header-closed--background);
 }
 :host .blind-header .collapse-icon {
-  color: var(--theme-blind-header-icon-closed--color);
   padding: 0.25rem 0.5rem;
 }
-:host .blind-header .blind-header-title,
-:host .blind-header .blind-header-title-basic {
+:host .blind-header .blind-header-title-col {
+  flex-grow: 1;
+  flex-basis: 0;
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+}
+:host .blind-header ix-typography {
+  flex-grow: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  display: flex;
-  align-items: center;
-  flex-grow: 1;
-  height: 100%;
 }
-:host .blind-header .blind-header-title .blind-header-title-default,
-:host .blind-header .blind-header-title-basic .blind-header-title-default {
+:host .blind-header .blind-header-title-col:not(:first-of-type) {
+  justify-content: flex-end;
+}
+:host .blind-header .blind-header-title-label {
   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: 1rem;
-  font-weight: 700;
-  line-height: 1.5em;
-  color: var(--theme-color-std-text);
-  -webkit-margin-end: 0.5rem;
-          margin-inline-end: 0.5rem;
+  -webkit-padding-end: 0.5rem;
+          padding-inline-end: 0.5rem;
+}
+:host .blind-header .blind-header-title-sublabel {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-inline: 0.5rem;
+}
+:host .blind-header .blind-header-title,
+:host .blind-header .blind-header-title-basic {
+  display: flex;
+  align-items: center;
   flex-grow: 1;
+  height: 100%;
+  min-width: 0;
 }
 :host .blind-header .blind-header-title-basic ix-icon {
   -webkit-margin-end: 0.5rem;
           margin-inline-end: 0.5rem;
 }
-:host .blind-header:not(.disabled):not(:disabled) {
+:host .blind-header:not(.disabled):not(:disabled):focus-visible {
+  border-color: var(--theme-color-focus-bdr);
+  outline: none;
+}
+:host .blind-header .blind-header-labels {
+  display: inline-flex;
+  flex-grow: 1;
+  min-width: 0;
+}
+:host .blind-content {
+  display: block;
+  padding: 1rem;
+  transition-property: padding;
+  transition-duration: 150ms;
+  transition-timing-function: ease-in;
+}
+:host .blind-content.hide {
+  max-height: 0;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+:host(.blind-alarm) {
+  background-color: var(--theme-blind-base--background);
+}
+:host(.blind-alarm) .blind-header {
+  background-color: var(--theme-color-alarm);
+}
+:host(.blind-alarm) .blind-header .blind-header-title-label,
+:host(.blind-alarm) .blind-header .blind-header-title-sublabel {
+  color: var(--theme-color-alarm--contrast);
+}
+:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .blind-header:not(.disabled):not(:disabled):hover {
-  background-color: var(--theme-blind-header-open--background--hover);
+:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled):hover, :host(.blind-alarm) .blind-header:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-color-alarm--hover);
+}
+:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled) {
+  cursor: pointer;
 }
-:host .blind-header:not(.disabled):not(:disabled):hover .collapse-icon {
-  color: var(--theme-blind-header-icon-open--color--hover);
+:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled):active, :host(.blind-alarm) .blind-header:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-color-alarm--active);
 }
-:host .blind-header:not(.disabled):not(:disabled) {
+
+:host(.blind-critical) {
+  background-color: var(--theme-blind-base--background);
+}
+:host(.blind-critical) .blind-header {
+  background-color: var(--theme-color-critical);
+}
+:host(.blind-critical) .blind-header .blind-header-title-label,
+:host(.blind-critical) .blind-header .blind-header-title-sublabel {
+  color: var(--theme-color-critical--contrast);
+}
+:host(.blind-critical) .blind-header:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .blind-header:not(.disabled):not(:disabled):active {
-  background-color: var(--theme-blind-header-open--background--active);
+:host(.blind-critical) .blind-header:not(.disabled):not(:disabled):hover, :host(.blind-critical) .blind-header:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-color-critical--hover);
 }
-:host .blind-header:not(.disabled):not(:disabled):active .collapse-icon {
-  color: var(--theme-blind-header-icon-open--color--active);
+:host(.blind-critical) .blind-header:not(.disabled):not(:disabled) {
+  cursor: pointer;
 }
-:host .blind-header:not(.disabled):not(:disabled):focus-visible {
-  border-color: var(--theme-color-focus-bdr);
-  outline: none;
+:host(.blind-critical) .blind-header:not(.disabled):not(:disabled):active, :host(.blind-critical) .blind-header:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-color-critical--active);
 }
-:host .blind-header.closed {
-  border-radius: var(--theme-blind--border-radius);
+
+:host(.blind-info) {
+  background-color: var(--theme-blind-base--background);
+}
+:host(.blind-info) .blind-header {
+  background-color: var(--theme-color-info);
+}
+:host(.blind-info) .blind-header .blind-header-title-label,
+:host(.blind-info) .blind-header .blind-header-title-sublabel {
+  color: var(--theme-color-info--contrast);
+}
+:host(.blind-info) .blind-header:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host(.blind-info) .blind-header:not(.disabled):not(:disabled):hover, :host(.blind-info) .blind-header:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-color-info--hover);
+}
+:host(.blind-info) .blind-header:not(.disabled):not(:disabled) {
+  cursor: pointer;
 }
-:host .blind-header.closed:not(.disabled):not(:disabled) {
+:host(.blind-info) .blind-header:not(.disabled):not(:disabled):active, :host(.blind-info) .blind-header:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-color-info--active);
+}
+
+:host(.blind-insight) {
+  background-color: var(--theme-blind-base--background);
+}
+:host(.blind-insight) .blind-header {
+  background-color: var(--theme-color-insight);
+}
+:host(.blind-insight) .blind-header .blind-header-title-label {
+  color: var(--theme-color-std-text);
+}
+:host(.blind-insight) .blind-header .blind-header-title-sublabel {
+  color: var(--theme-color-soft-text);
+}
+:host(.blind-insight) .blind-header:not(.disabled):not(:disabled).hover, :host(.blind-insight) .blind-header:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-ghost--background--hover);
+}
+:host(.blind-insight) .blind-header:not(.disabled):not(:disabled).active, :host(.blind-insight) .blind-header:not(.disabled):not(:disabled):active {
+  background-color: var(--theme-ghost--background--active);
+}
+
+:host(.blind-neutral) {
+  background-color: var(--theme-blind-base--background);
+}
+:host(.blind-neutral) .blind-header {
+  background-color: var(--theme-color-neutral);
+}
+:host(.blind-neutral) .blind-header .blind-header-title-label,
+:host(.blind-neutral) .blind-header .blind-header-title-sublabel {
+  color: var(--theme-color-neutral--contrast);
+}
+:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .blind-header.closed:not(.disabled):not(:disabled):hover {
-  background-color: var(--theme-blind-header-open--background--hover);
+:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled):hover, :host(.blind-neutral) .blind-header:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-color-neutral--hover);
+}
+:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled):active, :host(.blind-neutral) .blind-header:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-color-neutral--active);
+}
+
+:host(.blind-notification) {
+  background-color: var(--theme-blind-base--background);
+}
+:host(.blind-notification) .blind-header {
+  background-color: var(--theme-color-notification);
 }
-:host .blind-header.closed:not(.disabled):not(:disabled):hover .collapse-icon {
-  color: var(--theme-blind-header-icon-closed--color--hover);
+:host(.blind-notification) .blind-header .blind-header-title-label,
+:host(.blind-notification) .blind-header .blind-header-title-sublabel {
+  color: var(--theme-color-notification--contrast);
 }
-:host .blind-header.closed:not(.disabled):not(:disabled) {
+:host(.blind-notification) .blind-header:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .blind-header.closed:not(.disabled):not(:disabled):active {
-  background-color: var(--theme-blind-header-open--background--active);
+:host(.blind-notification) .blind-header:not(.disabled):not(:disabled):hover, :host(.blind-notification) .blind-header:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-color-notification--hover);
 }
-:host .blind-header.closed:not(.disabled):not(:disabled):active .collapse-icon {
-  color: var(--theme-blind-header-icon-closed--color--active);
+:host(.blind-notification) .blind-header:not(.disabled):not(:disabled) {
+  cursor: pointer;
 }
-:host .blind-content {
-  display: block;
-  padding: 1rem;
-  transition-property: padding;
-  transition-duration: 150ms;
-  transition-timing-function: ease-in;
+:host(.blind-notification) .blind-header:not(.disabled):not(:disabled):active, :host(.blind-notification) .blind-header:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-color-notification--active);
 }
-:host .blind-content.hide {
-  max-height: 0;
-  padding-top: 0px;
-  padding-bottom: 0px;
+
+:host(.blind-success) {
+  background-color: var(--theme-blind-base--background);
+}
+:host(.blind-success) .blind-header {
+  background-color: var(--theme-color-success);
+}
+:host(.blind-success) .blind-header .blind-header-title-label,
+:host(.blind-success) .blind-header .blind-header-title-sublabel {
+  color: var(--theme-color-success--contrast);
+}
+:host(.blind-success) .blind-header:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host(.blind-success) .blind-header:not(.disabled):not(:disabled):hover, :host(.blind-success) .blind-header:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-color-success--hover);
+}
+:host(.blind-success) .blind-header:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host(.blind-success) .blind-header:not(.disabled):not(:disabled):active, :host(.blind-success) .blind-header:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-color-success--active);
+}
+
+:host(.blind-warning) {
+  background-color: var(--theme-blind-base--background);
+}
+:host(.blind-warning) .blind-header {
+  background-color: var(--theme-color-warning);
+}
+:host(.blind-warning) .blind-header .blind-header-title-label,
+:host(.blind-warning) .blind-header .blind-header-title-sublabel {
+  color: var(--theme-color-warning--contrast);
+}
+:host(.blind-warning) .blind-header:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host(.blind-warning) .blind-header:not(.disabled):not(:disabled):hover, :host(.blind-warning) .blind-header:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-color-warning--hover);
+}
+:host(.blind-warning) .blind-header:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host(.blind-warning) .blind-header:not(.disabled):not(:disabled):active, :host(.blind-warning) .blind-header:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-color-warning--active);
+}
+
+:host(.blind-primary) {
+  background-color: var(--theme-blind-base--background);
+}
+:host(.blind-primary) .blind-header {
+  background-color: var(--theme-color-primary);
+}
+:host(.blind-primary) .blind-header .blind-header-title-label,
+:host(.blind-primary) .blind-header .blind-header-title-sublabel {
+  color: var(--theme-color-primary--contrast);
+}
+:host(.blind-primary) .blind-header:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host(.blind-primary) .blind-header:not(.disabled):not(:disabled):hover, :host(.blind-primary) .blind-header:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-color-primary--hover);
+}
+:host(.blind-primary) .blind-header:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host(.blind-primary) .blind-header:not(.disabled):not(:disabled):active, :host(.blind-primary) .blind-header:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-color-primary--active);
+}
+
+:host(.blind-outline) {
+  border: solid var(--theme-blind--border-thickness) var(--theme-blind-base--border-color);
+  border-color: var(--theme-color-soft-bdr);
+}
+:host(.blind-outline) .blind-header {
+  background-color: var(--theme-color-ghost);
+}
+:host(.blind-outline) .blind-header .blind-header-title-label {
+  color: var(--theme-color-std-text);
+}
+:host(.blind-outline) .blind-header .blind-header-title-sublabel {
+  color: var(--theme-color-soft-text);
+}
+:host(.blind-outline) .blind-header:not(.disabled):not(:disabled).hover, :host(.blind-outline) .blind-header:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-ghost--background--hover);
+}
+:host(.blind-outline) .blind-header:not(.disabled):not(:disabled).active, :host(.blind-outline) .blind-header:not(.disabled):not(:disabled):active {
+  background-color: var(--theme-ghost--background--active);
 }