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

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

@@ -14,6 +14,14 @@
  * 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 */
@@ -26,6 +34,18 @@
  * 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
  *
@@ -42,33 +62,163 @@
  * 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;
+/*
+ * 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.
+ */
+/*
+ * 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: inline-block;
   height: 2rem;
+  vertical-align: middle;
+  cursor: pointer;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
   font-size: 0.875rem;
   font-weight: 700;
-  transition: 150ms;
+  line-height: 1.429em;
+  color: var(--theme-color-std-text);
+}
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+:host ::-webkit-scrollbar-button {
+  display: none;
+}
+:host ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host ::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host ::-webkit-scrollbar-corner {
+  display: none;
+}
+:host button {
+  all: unset;
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  overflow: hidden;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
   padding: 0 0.5rem;
-  min-width: 5rem;
-  gap: 0.25rem;
+}
+:host ix-spinner {
+  margin-right: 0.25rem;
+}
+:host ix-icon {
+  margin-right: 0.25rem;
+}
+:host .content {
+  display: inline-block;
+  position: relative;
   overflow: hidden;
-  text-overflow: ellipsis;
   white-space: nowrap;
+  text-overflow: ellipsis;
 }
-.btn .glyph {
-  margin-right: 0.25rem;
-  font-weight: 400;
+:host .content-start {
+  width: 100%;
 }
-.btn:focus-visible, .btn.focus {
-  box-shadow: none;
+
+:host(.disabled) {
+  cursor: default;
+}
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+::-webkit-scrollbar-button {
+  display: none;
 }
 
-.btn-primary {
+/* width */
+::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+
+::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+
+::-webkit-scrollbar-corner {
+  display: none;
+}
+
+:host .btn-primary {
   border-radius: var(--theme-btn--border-radius);
 }
-.btn-primary, .btn-primary.focus, .btn-primary:focus-visible {
+:host .btn-primary, :host .btn-primary.focus, :host .btn-primary:focus-visible {
   background-color: var(--theme-btn-primary--background);
   color: var(--theme-btn-primary--color);
   --ix-button-color: var(--theme-btn-primary--color);
@@ -76,34 +226,47 @@
   border-color: var(--theme-btn-primary--border-color);
   border-style: solid;
 }
-.btn-primary:not(.disabled):not(:disabled):focus-visible {
+:host .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);
+:host .btn-primary.selected {
+  background-color: var(--theme-color-ghost--selected);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-primary.selected:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-primary.selected:not(.disabled):not(:disabled):hover, :host .btn-primary.selected:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-color-ghost--selected-hover);
+  color: var(--theme-color-dynamic);
 }
-.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;
+:host .btn-primary.selected:not(.disabled):not(:disabled) {
+  cursor: pointer;
 }
-.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);
+:host .btn-primary.selected:not(.disabled):not(:disabled):active, :host .btn-primary.selected:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-color-ghost--selected-active);
+  color: var(--theme-color-dynamic);
 }
-.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;
+:host .btn-primary:not(.disabled):not(:disabled) {
+  cursor: pointer;
 }
-.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);
+:host .btn-primary:not(.disabled):not(:disabled):hover, :host .btn-primary:not(.disabled):not(:disabled):hover {
+  border-color: var(--theme-btn-primary--border-color--hover);
+  background-color: var(--theme-btn-primary--background--hover);
+  color: var(--theme-btn-primary--color--hover);
 }
-.btn-primary.disabled, .btn-primary:disabled {
+:host .btn-primary:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-primary:not(.disabled):not(:disabled):active, :host .btn-primary:not(.disabled):not(:disabled).active {
+  border-color: var(--theme-btn-primary--border-color--active);
+  background-color: var(--theme-btn-primary--background--active);
+  color: var(--theme-btn-primary--color--active);
+}
+
+:host(.disabled) .btn-primary.disabled, :host(.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);
@@ -111,10 +274,10 @@
   --ix-button-color: var(--theme-btn-primary--color--disabled);
 }
 
-.btn-outline-primary {
+:host .btn-outline-primary {
   border-radius: var(--theme-btn--border-radius);
 }
-.btn-outline-primary, .btn-outline-primary.focus, .btn-outline-primary:focus-visible {
+:host .btn-outline-primary, :host .btn-outline-primary.focus, :host .btn-outline-primary:focus-visible {
   background-color: var(--theme-btn-outline-primary--background);
   color: var(--theme-btn-outline-primary--color);
   --ix-button-color: var(--theme-btn-outline-primary--color);
@@ -122,34 +285,47 @@
   border-color: var(--theme-btn-outline-primary--border-color);
   border-style: solid;
 }
-.btn-outline-primary:not(.disabled):not(:disabled):focus-visible {
+:host .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);
+:host .btn-outline-primary.selected {
+  background-color: var(--theme-color-ghost--selected);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-outline-primary.selected:not(.disabled):not(:disabled) {
+  cursor: pointer;
 }
-.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;
+:host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover, :host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-color-ghost--selected-hover);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-outline-primary.selected:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-outline-primary.selected:not(.disabled):not(:disabled):active, :host .btn-outline-primary.selected:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-color-ghost--selected-active);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-outline-primary:not(.disabled):not(:disabled) {
+  cursor: pointer;
 }
-.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);
+:host .btn-outline-primary:not(.disabled):not(:disabled):hover, :host .btn-outline-primary:not(.disabled):not(:disabled):hover {
+  border-color: var(--theme-btn-outline-primary--border-color--hover);
+  background-color: var(--theme-btn-outline-primary--background--hover);
+  color: var(--theme-btn-outline-primary--color--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;
+:host .btn-outline-primary:not(.disabled):not(:disabled) {
+  cursor: pointer;
 }
-.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);
+:host .btn-outline-primary:not(.disabled):not(:disabled):active, :host .btn-outline-primary:not(.disabled):not(:disabled).active {
+  border-color: var(--theme-btn-outline-primary--border-color--active);
+  background-color: var(--theme-btn-outline-primary--background--active);
+  color: var(--theme-btn-outline-primary--color--active);
 }
-.btn-outline-primary.disabled, .btn-outline-primary:disabled {
+
+:host(.disabled) .btn-outline-primary.disabled, :host(.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);
@@ -157,53 +333,64 @@
   --ix-button-color: var(--theme-btn-outline-primary--color--disabled);
 }
 
-.btn-invisible-primary {
+:host .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 {
+:host .btn-invisible-primary, :host .btn-invisible-primary.focus, :host .btn-invisible-primary:focus-visible {
   background-color: var(--theme-btn-invisible-primary--background);
   color: var(--theme-btn-invisible-primary--color);
   --ix-button-color: var(--theme-btn-invisible-primary--color);
   border-color: transparent;
 }
-.btn-invisible-primary:not(.disabled):not(:disabled):focus-visible {
+:host .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);
+:host .btn-invisible-primary.selected {
+  background-color: var(--theme-color-ghost--selected);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-invisible-primary.selected:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover, :host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-color-ghost--selected-hover);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-invisible-primary.selected:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):active, :host .btn-invisible-primary.selected:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-color-ghost--selected-active);
+  color: var(--theme-color-dynamic);
 }
-.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;
+:host .btn-invisible-primary:not(.disabled):not(:disabled) {
+  cursor: pointer;
 }
-.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);
+:host .btn-invisible-primary:not(.disabled):not(:disabled):hover, :host .btn-invisible-primary:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-btn-invisible-primary--background--hover);
+  color: var(--theme-btn-invisible-primary--color--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;
+:host .btn-invisible-primary:not(.disabled):not(:disabled) {
+  cursor: pointer;
 }
-.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);
+:host .btn-invisible-primary:not(.disabled):not(:disabled):active, :host .btn-invisible-primary:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-btn-invisible-primary--background--active);
+  color: var(--theme-btn-invisible-primary--color--active);
 }
-.btn-invisible-primary.disabled, .btn-invisible-primary:disabled {
+
+:host(.disabled) .btn-invisible-primary.disabled, :host(.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;
   --ix-button-color: var(--theme-btn-invisible-primary--color--disabled);
 }
 
-.btn-secondary {
+:host .btn-secondary {
   border-radius: var(--theme-btn--border-radius);
 }
-.btn-secondary, .btn-secondary.focus, .btn-secondary:focus-visible {
+:host .btn-secondary, :host .btn-secondary.focus, :host .btn-secondary:focus-visible {
   background-color: var(--theme-btn-secondary--background);
   color: var(--theme-btn-secondary--color);
   --ix-button-color: var(--theme-btn-secondary--color);
@@ -211,34 +398,47 @@
   border-color: var(--theme-btn-secondary--border-color);
   border-style: solid;
 }
-.btn-secondary:not(.disabled):not(:disabled):focus-visible {
+:host .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);
+:host .btn-secondary.selected {
+  background-color: var(--theme-color-ghost--selected);
+  color: var(--theme-color-dynamic);
 }
-.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;
+:host .btn-secondary.selected:not(.disabled):not(:disabled) {
+  cursor: pointer;
 }
-.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);
+:host .btn-secondary.selected:not(.disabled):not(:disabled):hover, :host .btn-secondary.selected:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-color-ghost--selected-hover);
+  color: var(--theme-color-dynamic);
 }
-.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;
+:host .btn-secondary.selected:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-secondary.selected:not(.disabled):not(:disabled):active, :host .btn-secondary.selected:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-color-ghost--selected-active);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-secondary:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-secondary:not(.disabled):not(:disabled):hover, :host .btn-secondary:not(.disabled):not(:disabled):hover {
+  border-color: var(--theme-btn-secondary--border-color--hover);
+  background-color: var(--theme-btn-secondary--background--hover);
+  color: var(--theme-btn-secondary--color--hover);
 }
-.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);
+:host .btn-secondary:not(.disabled):not(:disabled) {
+  cursor: pointer;
 }
-.btn-secondary.disabled, .btn-secondary:disabled {
+:host .btn-secondary:not(.disabled):not(:disabled):active, :host .btn-secondary:not(.disabled):not(:disabled).active {
+  border-color: var(--theme-btn-secondary--border-color--active);
+  background-color: var(--theme-btn-secondary--background--active);
+  color: var(--theme-btn-secondary--color--active);
+}
+
+:host(.disabled) .btn-secondary.disabled, :host(.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);
@@ -246,10 +446,10 @@
   --ix-button-color: var(--theme-btn-secondary--color--disabled);
 }
 
-.btn-outline-secondary {
+:host .btn-outline-secondary {
   border-radius: var(--theme-btn--border-radius);
 }
-.btn-outline-secondary, .btn-outline-secondary.focus, .btn-outline-secondary:focus-visible {
+:host .btn-outline-secondary, :host .btn-outline-secondary.focus, :host .btn-outline-secondary:focus-visible {
   background-color: var(--theme-btn-outline-secondary--background);
   color: var(--theme-btn-outline-secondary--color);
   --ix-button-color: var(--theme-btn-outline-secondary--color);
@@ -257,34 +457,47 @@
   border-color: var(--theme-btn-outline-secondary--border-color);
   border-style: solid;
 }
-.btn-outline-secondary:not(.disabled):not(:disabled):focus-visible {
+:host .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);
+:host .btn-outline-secondary.selected {
+  background-color: var(--theme-color-ghost--selected);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-outline-secondary.selected:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover, :host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-color-ghost--selected-hover);
+  color: var(--theme-color-dynamic);
 }
-.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;
+:host .btn-outline-secondary.selected:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):active, :host .btn-outline-secondary.selected:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-color-ghost--selected-active);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-outline-secondary:not(.disabled):not(:disabled) {
+  cursor: pointer;
 }
-.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);
+:host .btn-outline-secondary:not(.disabled):not(:disabled):hover, :host .btn-outline-secondary:not(.disabled):not(:disabled):hover {
+  border-color: var(--theme-btn-outline-secondary--border-color--hover);
+  background-color: var(--theme-btn-outline-secondary--background--hover);
+  color: var(--theme-btn-outline-secondary--color--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;
+:host .btn-outline-secondary:not(.disabled):not(:disabled) {
+  cursor: pointer;
 }
-.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);
+:host .btn-outline-secondary:not(.disabled):not(:disabled):active, :host .btn-outline-secondary:not(.disabled):not(:disabled).active {
+  border-color: var(--theme-btn-outline-secondary--border-color--active);
+  background-color: var(--theme-btn-outline-secondary--background--active);
+  color: var(--theme-btn-outline-secondary--color--active);
 }
-.btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
+
+:host(.disabled) .btn-outline-secondary.disabled, :host(.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);
@@ -292,102 +505,103 @@
   --ix-button-color: var(--theme-btn-outline-secondary--color--disabled);
 }
 
-.btn-invisible-secondary {
+:host .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 {
+:host .btn-invisible-secondary, :host .btn-invisible-secondary.focus, :host .btn-invisible-secondary:focus-visible {
   background-color: var(--theme-btn-invisible-secondary--background);
   color: var(--theme-btn-invisible-secondary--color);
   --ix-button-color: var(--theme-btn-invisible-secondary--color);
   border-color: transparent;
 }
-.btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible {
+:host .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);
+:host .btn-invisible-secondary.selected {
+  background-color: var(--theme-color-ghost--selected);
+  color: var(--theme-color-dynamic);
 }
-.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;
+:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover, :host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-color-ghost--selected-hover);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled) {
+  cursor: pointer;
 }
-.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);
+:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):active, :host .btn-invisible-secondary.selected:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-color-ghost--selected-active);
+  color: var(--theme-color-dynamic);
 }
-.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;
+:host .btn-invisible-secondary:not(.disabled):not(:disabled) {
+  cursor: pointer;
 }
-.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);
+:host .btn-invisible-secondary:not(.disabled):not(:disabled):hover, :host .btn-invisible-secondary:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-btn-invisible-secondary--background--hover);
+  color: var(--theme-btn-invisible-secondary--color--hover);
 }
-.btn-invisible-secondary.disabled, .btn-invisible-secondary:disabled {
+:host .btn-invisible-secondary:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-invisible-secondary:not(.disabled):not(:disabled):active, :host .btn-invisible-secondary:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-btn-invisible-secondary--background--active);
+  color: var(--theme-btn-invisible-secondary--color--active);
+}
+
+:host(.disabled) .btn-invisible-secondary.disabled, :host(.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;
   --ix-button-color: var(--theme-btn-invisible-secondary--color--disabled);
 }
 
-.btn-oval,
-.btn-icon {
-  min-width: 2rem;
-  width: 2rem;
+:host {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
 }
-.btn-oval .glyph,
-.btn-icon .glyph {
-  margin-right: 0;
+:host button {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  padding: 0;
 }
-
-.btn-oval {
+:host button.btn-oval {
   border-radius: 6.25rem;
-  width: 2rem;
+}
+:host ix-icon {
+  color: var(--ix-icon-button-color);
+  margin: 0;
+}
+:host ix-spinner {
+  margin: 0;
 }
 
-.btn-icon-xs,
-.btn-icon-12 {
+:host(.btn-icon-12) {
   height: 1rem;
   width: 1rem;
   min-width: 1rem;
   min-height: 1rem;
 }
 
-.btn-icon-s,
-.btn-icon-16 {
+:host(.btn-icon-16) {
   height: 1.5rem;
   width: 1.5rem;
   min-width: 1.5rem;
   min-height: 1.5rem;
 }
 
-.btn-icon-32 {
+:host(.btn-icon-32) {
   height: 2rem;
   width: 2rem;
   min-width: 2rem;
   min-height: 2rem;
 }
 
-:host {
-  display: inline-block;
-  vertical-align: middle;
-}
-:host .icon-button {
-  padding: 0;
-  overflow: hidden;
-}
-:host button:not(:disabled) {
-  cursor: pointer;
-}
-:host ix-icon {
-  color: var(--ix-icon-button-color);
-}
-
 :host(.btn-icon-12) ix-spinner {
   height: 12px;
   width: 12px;
@@ -401,8 +615,4 @@
 :host(.btn-icon-32) ix-spinner {
   height: 24px;
   width: 24px;
-}
-
-:host(.disabled) {
-  pointer-events: none;
 }