q2-tecton-elements 1.71.4 → 1.73.0

package/dist/collection/components/q2-btn/q2-btn.css

@@ -233,9 +233,9 @@ button {
  * @prop --tct-btn-coin-box-shadow?: (*) Controls the optional box shadow of the coin button.
  * @prop --tct-btn-coin-hover-background: (<color>) Controls the background color of the coin button on hover.
  * @prop --tct-btn-coin-hover-box-shadow: (*) Controls the box shadow of the coin button on hover.
- * @prop --tct-btn-coin-focus-box-shadow?: (*) Controls the optional box shadow of the coin button on focus.
  * @prop --tct-btn-coin-focus-visible-box-shadow: (*) Controls the box shadow of the coin button when focused via keyboard.
  * @prop --tct-btn-coin-focus-ring: (<color>) Controls the focus ring color of the coin button.
+ * @prop --tct-btn-coin-focus-visible-outer-ring-color: (<color>) Controls the outer ring color of the coin button when focused via keyboard.
  * @prop --tct-btn-coin-active-background?: (<color>) Controls the optional background color of the coin button when active.
  * @prop --tct-btn-coin-icon-stroke-primary: (<color>) Controls the primary stroke color of icons inside the coin button.
  * @prop --tct-btn-coin-icon-stroke-secondary: (<color>) Controls the secondary stroke color of icons inside the coin button.
@@ -257,6 +257,9 @@ button {
  * @prop --tct-btn-primary-text-decoration: (<custom-ident>) Controls the text-decoration of the primary-intent button.
  * @prop --tct-btn-primary-box-shadow: (*) Controls the box shadow of the primary-intent button.
  * @prop --tct-btn-primary-icon-color: (<color>) Controls the icon color of the primary-intent button.
+ * @prop --tct-btn-primary-tween: (*) Controls the transition timing of primary-intent button state changes.
+ * @prop --tct-btn-primary-compositor-transform?: (*) Controls the optional compositor transform used during primary-intent button interactions.
+ * @prop --tct-btn-primary-active-scale: (<number>) Controls the scale of the primary-intent button when active.
  * @prop --tct-btn-primary-hover-background: (<color>) Controls the background color of the primary-intent button on hover.
  * @prop --tct-btn-primary-hover-border-color: (<color>) Controls the border color of the primary-intent button on hover.
  * @prop --tct-btn-primary-hover-font-color: (<color>) Controls the text color of the primary-intent button on hover.
@@ -264,11 +267,6 @@ button {
  * @prop --tct-btn-primary-hover-inner-ring-color: (<color>) Controls the inner ring color of the primary-intent button on hover.
  * @prop --tct-btn-primary-hover-outer-ring-color: (<color>) Controls the outer ring color of the primary-intent button on hover.
  * @prop --tct-btn-primary-hover-box-shadow: (*) Controls the box shadow of the primary-intent button on hover.
- * @prop --tct-btn-primary-focus-background: (<color>) Controls the background color of the primary-intent button on focus.
- * @prop --tct-btn-primary-focus-border-color: (<color>) Controls the border color of the primary-intent button on focus.
- * @prop --tct-btn-primary-focus-font-color: (<color>) Controls the text color of the primary-intent button on focus.
- * @prop --tct-btn-primary-focus-text-decoration: (<custom-ident>) Controls the text-decoration of the primary-intent button on focus.
- * @prop --tct-btn-primary-focus-box-shadow: (*) Controls the box shadow of the primary-intent button on focus.
  * @prop --tct-btn-primary-focus-visible-background: (<color>) Controls the background color of the primary-intent button when focused via keyboard.
  * @prop --tct-btn-primary-focus-visible-border-color: (<color>) Controls the border color of the primary-intent button when focused via keyboard.
  * @prop --tct-btn-primary-focus-visible-font-color: (<color>) Controls the text color of the primary-intent button when focused via keyboard.
@@ -301,11 +299,6 @@ button {
  * @prop --tct-btn-secondary-hover-inner-ring-color: (<color>) Controls the inner ring color of the secondary-intent button on hover.
  * @prop --tct-btn-secondary-hover-outer-ring-color: (<color>) Controls the outer ring color of the secondary-intent button on hover.
  * @prop --tct-btn-secondary-hover-box-shadow: (*) Controls the box shadow of the secondary-intent button on hover.
- * @prop --tct-btn-secondary-focus-background: (<color>) Controls the background color of the secondary-intent button on focus.
- * @prop --tct-btn-secondary-focus-border-color: (<color>) Controls the border color of the secondary-intent button on focus.
- * @prop --tct-btn-secondary-focus-font-color: (<color>) Controls the text color of the secondary-intent button on focus.
- * @prop --tct-btn-secondary-focus-text-decoration: (<custom-ident>) Controls the text-decoration of the secondary-intent button on focus.
- * @prop --tct-btn-secondary-focus-box-shadow: (*) Controls the box shadow of the secondary-intent button on focus.
  * @prop --tct-btn-secondary-focus-visible-background: (<color>) Controls the background color of the secondary-intent button when focused via keyboard.
  * @prop --tct-btn-secondary-focus-visible-border-color: (<color>) Controls the border color of the secondary-intent button when focused via keyboard.
  * @prop --tct-btn-secondary-focus-visible-font-color: (<color>) Controls the text color of the secondary-intent button when focused via keyboard.
@@ -338,11 +331,6 @@ button {
  * @prop --tct-btn-neutral-hover-inner-ring-color: (<color>) Controls the inner ring color of the neutral-intent button on hover.
  * @prop --tct-btn-neutral-hover-outer-ring-color: (<color>) Controls the outer ring color of the neutral-intent button on hover.
  * @prop --tct-btn-neutral-hover-box-shadow: (*) Controls the box shadow of the neutral-intent button on hover.
- * @prop --tct-btn-neutral-focus-background: (<color>) Controls the background color of the neutral-intent button on focus.
- * @prop --tct-btn-neutral-focus-border-color: (<color>) Controls the border color of the neutral-intent button on focus.
- * @prop --tct-btn-neutral-focus-font-color: (<color>) Controls the text color of the neutral-intent button on focus.
- * @prop --tct-btn-neutral-focus-text-decoration: (<custom-ident>) Controls the text-decoration of the neutral-intent button on focus.
- * @prop --tct-btn-neutral-focus-box-shadow: (*) Controls the box shadow of the neutral-intent button on focus.
  * @prop --tct-btn-neutral-focus-visible-background: (<color>) Controls the background color of the neutral-intent button when focused via keyboard.
  * @prop --tct-btn-neutral-focus-visible-border-color: (<color>) Controls the border color of the neutral-intent button when focused via keyboard.
  * @prop --tct-btn-neutral-focus-visible-font-color: (<color>) Controls the text color of the neutral-intent button when focused via keyboard.
@@ -375,10 +363,6 @@ button {
  * @prop --tct-btn-neutral-text-hover-inner-ring-color: (<color>) Controls the inner ring color of the neutral-text-intent button on hover.
  * @prop --tct-btn-neutral-text-hover-outer-ring-color: (<color>) Controls the outer ring color of the neutral-text-intent button on hover.
  * @prop --tct-btn-neutral-text-hover-box-shadow: (*) Controls the box shadow of the neutral-text-intent button on hover.
- * @prop --tct-btn-neutral-text-focus-background: (<color>) Controls the background color of the neutral-text-intent button on focus.
- * @prop --tct-btn-neutral-text-focus-border-color: (<color>) Controls the border color of the neutral-text-intent button on focus.
- * @prop --tct-btn-neutral-text-focus-font-color: (<color>) Controls the text color of the neutral-text-intent button on focus.
- * @prop --tct-btn-neutral-text-focus-text-decoration: (<custom-ident>) Controls the text-decoration of the neutral-text-intent button on focus.
  * @prop --tct-btn-neutral-text-focus-visible-background: (<color>) Controls the background color of the neutral-text-intent button when focused via keyboard.
  * @prop --tct-btn-neutral-text-focus-visible-border-color: (<color>) Controls the border color of the neutral-text-intent button when focused via keyboard.
  * @prop --tct-btn-neutral-text-focus-visible-font-color: (<color>) Controls the text color of the neutral-text-intent button when focused via keyboard.
@@ -411,11 +395,6 @@ button {
  * @prop --tct-btn-destroy-hover-inner-ring-color: (<color>) Controls the inner ring color of the destroy-intent button on hover.
  * @prop --tct-btn-destroy-hover-outer-ring-color: (<color>) Controls the outer ring color of the destroy-intent button on hover.
  * @prop --tct-btn-destroy-hover-box-shadow: (*) Controls the box shadow of the destroy-intent button on hover.
- * @prop --tct-btn-destroy-focus-background: (<color>) Controls the background color of the destroy-intent button on focus.
- * @prop --tct-btn-destroy-focus-border-color: (<color>) Controls the border color of the destroy-intent button on focus.
- * @prop --tct-btn-destroy-focus-font-color: (<color>) Controls the text color of the destroy-intent button on focus.
- * @prop --tct-btn-destroy-focus-text-decoration: (<custom-ident>) Controls the text-decoration of the destroy-intent button on focus.
- * @prop --tct-btn-destroy-focus-box-shadow: (*) Controls the box shadow of the destroy-intent button on focus.
  * @prop --tct-btn-destroy-focus-visible-background: (<color>) Controls the background color of the destroy-intent button when focused via keyboard.
  * @prop --tct-btn-destroy-focus-visible-border-color: (<color>) Controls the border color of the destroy-intent button when focused via keyboard.
  * @prop --tct-btn-destroy-focus-visible-font-color: (<color>) Controls the text color of the destroy-intent button when focused via keyboard.
@@ -448,11 +427,6 @@ button {
  * @prop --tct-btn-escape-hover-box-shadow: (*) Controls the box shadow of the escape-intent button on hover.
  * @prop --tct-btn-escape-hover-inner-ring-color: (<color>) Controls the inner ring color of the escape-intent button on hover.
  * @prop --tct-btn-escape-hover-outer-ring-color: (<color>) Controls the outer ring color of the escape-intent button on hover.
- * @prop --tct-btn-escape-focus-background: (<color>) Controls the background color of the escape-intent button on focus.
- * @prop --tct-btn-escape-focus-border-color: (<color>) Controls the border color of the escape-intent button on focus.
- * @prop --tct-btn-escape-focus-font-color: (<color>) Controls the text color of the escape-intent button on focus.
- * @prop --tct-btn-escape-focus-text-decoration: (<custom-ident>) Controls the text-decoration of the escape-intent button on focus.
- * @prop --tct-btn-escape-focus-box-shadow: (*) Controls the box shadow of the escape-intent button on focus.
  * @prop --tct-btn-escape-focus-visible-background: (<color>) Controls the background color of the escape-intent button when focused via keyboard.
  * @prop --tct-btn-escape-focus-visible-border-color: (<color>) Controls the border color of the escape-intent button when focused via keyboard.
  * @prop --tct-btn-escape-focus-visible-font-color: (<color>) Controls the text color of the escape-intent button when focused via keyboard.
@@ -528,6 +502,7 @@ button.icon-only ::slotted(q2-icon) {
   --comp-btn-tween: var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));
   --comp-btn-fallback-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
   --comp-background-alternative: #ebf8ff;
+  --comp-focus-ring-color: var(--t-focus-color, var(--const-focus-color));
 }
 :host .btn-height-wrapper {
   cursor: pointer;
@@ -554,7 +529,7 @@ button {
   color: inherit;
   cursor: pointer;
   transition: var(--comp-btn-tween);
-  transition-property: background, color, box-shadow, fill, border-color, border-width;
+  transition-property: background, color, box-shadow, fill, border-color, border-width, transform;
   outline: 0;
   min-height: var(--tct-btn-min-height, none);
   letter-spacing: var(--tct-btn-letter-spacing, inherit);
@@ -568,6 +543,10 @@ button.has-color, button.has-intent {
   border-radius: var(--tct-btn-border-radius, var(--comp-border-radius));
   text-transform: var(--tct-btn-text-transform);
 }
+button.has-intent:enabled:active {
+  transform-origin: center;
+  transform: scale(0.97) translateZ(0);
+}
 button.has-color:not(.has-size), button.has-intent:not(.has-size) {
   padding: var(--tct-btn-padding, var(--t-btn-padding, var(--tct-scale-2, var(--app-scale-2x, 10px))));
 }
@@ -617,17 +596,20 @@ button:not(.has-size):not(.icon-only) ::slotted(q2-icon) {
   --tct-icon-size: var(--tct-btn-icon-size-large, 18px);
 }
 :host(:not([intent])) button:focus-visible {
-  --comp-double-focus-ring-fallback: 0 0 0 2px #ffffff, 0 0 0 4px #0066cc;
-  box-shadow: var(--tct-btn-default-double-focus-visible-ring, var(--const-double-focus-ring, var(--comp-double-focus-ring-fallback)));
+  --comp-default-focus-visible-box-shadow: 0 0 0 2px #ffffff,
+      0 0 0 4px var(--comp-focus-ring-color);
+  box-shadow: var(--tct-btn-default-double-focus-visible-ring, var(--comp-default-focus-visible-box-shadow));
 }
-:host([color=primary]) button, :host([intent=workflow-primary]) button {
+:host([color=primary]) button, :host([intent=primary]) button, :host([intent=workflow-primary]) button {
+  --comp-btn-tween: var(--tct-btn-primary-tween, 100ms ease-out);
   backdrop-filter: var(--tct-btn-primary-backdrop-filter);
   --comp-background: var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040)));
-  --comp-hover-background: var(--tct-btn-primary-hover-background, var(--tct-btn-primary-hover-bg));
+  --comp-hover-background: var(--tct-btn-primary-hover-background, var(--tct-btn-primary-hover-bg, #5e408b));
+  --comp-hover-border-color: #5e408b;
   --comp-font-color: var(--tct-btn-primary-font-color, var(--app-white, #ffffff));
   --comp-box-shadow: var(--tct-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow));
-  --comp-focus-box-shadow: var(--tct-btn-primary-focus-box-shadow, var(--comp-btn-fallback-box-shadow));
-  --comp-active-background: var(--tct-btn-primary-active-background, #0063a0);
+  --comp-active-background: var(--tct-btn-primary-active-background, #523578);
+  --comp-active-border-color: #523578;
   --comp-hover-outer-ring-color: var(--tct-btn-primary-hover-outer-ring-color, var(--comp-background));
   --comp-hover-inner-ring-color: var(--tct-btn-primary-hover-inner-ring-color, var(--comp-font-color));
   --comp-hover-box-shadow: var(
@@ -637,13 +619,17 @@ button:not(.has-size):not(.icon-only) ::slotted(q2-icon) {
   );
   --comp-active-box-shadow: var(--comp-box-shadow);
   --comp-disabled-box-shadow: var(--comp-box-shadow);
-  --comp-focus-visible-outer-ring-color: var(--tct-btn-primary-focus-visible-outer-ring-color, var(--const-focus-color));
-  --comp-focus-visible-inner-ring-color: var(--tct-btn-primary-focus-visible-inner-ring-color, var(--comp-font-color));
+  --comp-focus-visible-outer-ring-color: var(--tct-btn-primary-focus-visible-outer-ring-color, var(--comp-focus-ring-color));
+  --comp-focus-visible-inner-ring-color: var(--tct-btn-primary-focus-visible-inner-ring-color, #ffffff);
   --comp-focus-visible-box-shadow: var(
       --tct-btn-primary-focus-visible-box-shadow,
       0 0 0 2px var(--comp-focus-visible-inner-ring-color),
       0 0 0 4px var(--comp-focus-visible-outer-ring-color)
   );
+  --comp-hover-box-shadow: var(
+      --tct-btn-primary-hover-box-shadow,
+      var(--comp-btn-fallback-box-shadow)
+  );
   border-style: var(--tct-btn-primary-border-style, var(--comp-border-style));
   border-width: var(--tct-btn-primary-border-width, var(--comp-border-width));
   font-weight: var(--tct-btn-primary-font-weight, var(--comp-font-weight));
@@ -653,65 +639,76 @@ button:not(.has-size):not(.icon-only) ::slotted(q2-icon) {
   text-decoration: var(--tct-btn-primary-text-decoration, var(--comp-text-decoration));
   box-shadow: var(--comp-box-shadow);
 }
-:host([color=primary]) button:enabled:hover, :host([intent=workflow-primary]) button:enabled:hover {
+:host([color=primary]) button:enabled:hover, :host([intent=primary]) button:enabled:hover, :host([intent=workflow-primary]) button:enabled:hover {
   border-color: var(--tct-btn-primary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));
   background: var(--tct-btn-primary-hover-background, var(--comp-hover-background, var(--comp-background)));
   color: var(--tct-btn-primary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));
   text-decoration: var(--tct-btn-primary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-hover-box-shadow);
 }
-:host([color=primary]) button:enabled:focus, :host([intent=workflow-primary]) button:enabled:focus {
-  border-color: var(--tct-btn-primary-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));
-  background: var(--tct-btn-primary-focus-background, var(--comp-focus-background, var(--comp-background)));
-  color: var(--tct-btn-primary-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));
-  text-decoration: var(--tct-btn-primary-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));
-  box-shadow: var(--comp-focus-box-shadow);
-}
-:host([color=primary]) button:enabled:focus-visible, :host([intent=workflow-primary]) button:enabled:focus-visible {
+:host([color=primary]) button:enabled:focus-visible, :host([intent=primary]) button:enabled:focus-visible, :host([intent=workflow-primary]) button:enabled:focus-visible {
   border-color: var(--tct-btn-primary-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));
   background: var(--tct-btn-primary-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));
   color: var(--tct-btn-primary-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));
   text-decoration: var(--tct-btn-primary-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-focus-visible-box-shadow);
 }
-:host([color=primary]) button:enabled:active, :host([intent=workflow-primary]) button:enabled:active {
+:host([color=primary]) button:enabled:active, :host([intent=primary]) button:enabled:active, :host([intent=workflow-primary]) button:enabled:active {
   border-color: var(--tct-btn-primary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));
   background: var(--tct-btn-primary-active-background, var(--comp-active-background, var(--comp-background)));
   color: var(--tct-btn-primary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));
   text-decoration: var(--tct-btn-primary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-active-box-shadow);
 }
-:host([color=primary]) button:focus-visible, :host([color=primary]) button:focus-visible:hover:enabled, :host([color=primary]) button:focus, :host([color=primary]) button:focus:hover:enabled, :host([intent=workflow-primary]) button:focus-visible, :host([intent=workflow-primary]) button:focus-visible:hover:enabled, :host([intent=workflow-primary]) button:focus, :host([intent=workflow-primary]) button:focus:hover:enabled {
+:host([color=primary]) button:focus-visible, :host([color=primary]) button:focus-visible:hover:enabled, :host([intent=primary]) button:focus-visible, :host([intent=primary]) button:focus-visible:hover:enabled, :host([intent=workflow-primary]) button:focus-visible, :host([intent=workflow-primary]) button:focus-visible:hover:enabled {
   border-color: var(--tct-btn-primary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));
   background: var(--tct-btn-primary-hover-background, var(--comp-hover-background, var(--comp-background)));
   color: var(--tct-btn-primary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));
   text-decoration: var(--tct-btn-primary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-hover-box-shadow);
 }
-:host([color=primary]) button:focus-visible:active:enabled, :host([color=primary]) button:focus:active:enabled, :host([intent=workflow-primary]) button:focus-visible:active:enabled, :host([intent=workflow-primary]) button:focus:active:enabled {
+:host([color=primary]) button:focus-visible:active:enabled, :host([intent=primary]) button:focus-visible:active:enabled, :host([intent=workflow-primary]) button:focus-visible:active:enabled {
   border-color: var(--tct-btn-primary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));
   background: var(--tct-btn-primary-active-background, var(--comp-active-background, var(--comp-background)));
   color: var(--tct-btn-primary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));
   text-decoration: var(--tct-btn-primary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-active-box-shadow);
 }
-:host([color=primary]) button:disabled, :host([intent=workflow-primary]) button:disabled {
+:host([color=primary]) button:disabled, :host([intent=primary]) button:disabled, :host([intent=workflow-primary]) button:disabled {
   border-color: var(--tct-btn-primary-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));
   background: var(--tct-btn-primary-disabled-background, var(--comp-disabled-background, var(--comp-background)));
   color: var(--tct-btn-primary-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));
   text-decoration: var(--tct-btn-primary-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-disabled-box-shadow);
 }
-:host([color=primary]) button ::slotted(q2-icon), :host([intent=workflow-primary]) button ::slotted(q2-icon) {
-  --t-text: var(--tct-btn-primary-icon-color, var(--t-btn-primary-icon-color, var(--comp-font-color, currentcolor)));
+:host([color=primary]) button ::slotted(q2-icon), :host([intent=primary]) button ::slotted(q2-icon), :host([intent=workflow-primary]) button ::slotted(q2-icon) {
+  --comp-btn-icon-color: var(--tct-btn-primary-icon-color, var(--t-btn-primary-icon-color, var(--comp-font-color, currentcolor)));
+  --t-text: var(--comp-btn-icon-color);
+  --tct-icon-stroke-primary: var(--comp-btn-icon-color);
+  --tct-icon-stroke-secondary: var(--comp-btn-icon-color);
+}
+:host([color=primary]) button:enabled:focus-visible, :host([intent=primary]) button:enabled:focus-visible, :host([intent=workflow-primary]) button:enabled:focus-visible {
+  border-color: var(--tct-btn-primary-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));
+  background: var(--tct-btn-primary-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));
+  color: var(--tct-btn-primary-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));
+  text-decoration: var(--tct-btn-primary-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));
+  box-shadow: var(--comp-focus-visible-box-shadow);
+}
+:host([color=primary]) button:enabled:active, :host([intent=primary]) button:enabled:active, :host([intent=workflow-primary]) button:enabled:active {
+  border-color: var(--tct-btn-primary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));
+  background: var(--tct-btn-primary-active-background, var(--comp-active-background, var(--comp-background)));
+  color: var(--tct-btn-primary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));
+  text-decoration: var(--tct-btn-primary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));
+  box-shadow: var(--comp-active-box-shadow);
+  transform: scale(var(--tct-btn-primary-active-scale, 0.97)) var(--tct-btn-primary-compositor-transform, translateZ(0));
 }
-:host([color=secondary]) button, :host([intent=workflow-secondary]) button {
+:host([color=secondary]) button, :host([intent=secondary]) button, :host([intent=workflow-secondary]) button {
   backdrop-filter: var(--tct-btn-secondary-backdrop-filter);
   --comp-background: var(--tct-btn-secondary-background, var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc)));
   --comp-hover-background: var(--tct-btn-secondary-hover-background, var(--tct-btn-secondary-hover-bg, var(--t-a11y-active-gray-color-AA, #404040)));
+  --comp-active-background: var(--tct-btn-secondary-active-background, var(--comp-hover-background));
   --comp-hover-font-color: var(--app-white, #ffffff);
   --comp-box-shadow: var(--tct-btn-secondary-box-shadow, var(--comp-btn-fallback-box-shadow));
-  --comp-focus-box-shadow: var(--tct-btn-secondary-focus-box-shadow, var(--comp-btn-fallback-box-shadow));
   --comp-hover-outer-ring-color: var(--tct-btn-secondary-hover-outer-ring-color, var(--comp-hover-background));
   --comp-hover-inner-ring-color: var(--tct-btn-secondary-hover-inner-ring-color, var(--app-white));
   --comp-hover-box-shadow: var(
@@ -719,9 +716,13 @@ button:not(.has-size):not(.icon-only) ::slotted(q2-icon) {
       0 0 0 2px var(--comp-hover-inner-ring-color),
       0 0 0 4px var(--comp-hover-outer-ring-color)
   );
+  --comp-hover-box-shadow: var(
+      --tct-btn-secondary-hover-box-shadow,
+      var(--tct-btn-secondary-box-shadow, none)
+  );
   --comp-active-box-shadow: var(--comp-box-shadow);
   --comp-disabled-box-shadow: var(--comp-box-shadow);
-  --comp-focus-visible-outer-ring-color: var(--tct-btn-secondary-focus-visible-outer-ring-color, var(--const-focus-color));
+  --comp-focus-visible-outer-ring-color: var(--tct-btn-secondary-focus-visible-outer-ring-color, var(--comp-focus-ring-color));
   --comp-focus-visible-inner-ring-color: var(--tct-btn-secondary-focus-visible-inner-ring-color, var(--app-white));
   --comp-focus-visible-box-shadow: var(
       --tct-btn-secondary-focus-visible-box-shadow,
@@ -737,64 +738,63 @@ button:not(.has-size):not(.icon-only) ::slotted(q2-icon) {
   text-decoration: var(--tct-btn-secondary-text-decoration, var(--comp-text-decoration));
   box-shadow: var(--comp-box-shadow);
 }
-:host([color=secondary]) button:enabled:hover, :host([intent=workflow-secondary]) button:enabled:hover {
+:host([color=secondary]) button:enabled:hover, :host([intent=secondary]) button:enabled:hover, :host([intent=workflow-secondary]) button:enabled:hover {
   border-color: var(--tct-btn-secondary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));
   background: var(--tct-btn-secondary-hover-background, var(--comp-hover-background, var(--comp-background)));
   color: var(--tct-btn-secondary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));
   text-decoration: var(--tct-btn-secondary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-hover-box-shadow);
 }
-:host([color=secondary]) button:enabled:focus, :host([intent=workflow-secondary]) button:enabled:focus {
-  border-color: var(--tct-btn-secondary-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));
-  background: var(--tct-btn-secondary-focus-background, var(--comp-focus-background, var(--comp-background)));
-  color: var(--tct-btn-secondary-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));
-  text-decoration: var(--tct-btn-secondary-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));
-  box-shadow: var(--comp-focus-box-shadow);
-}
-:host([color=secondary]) button:enabled:focus-visible, :host([intent=workflow-secondary]) button:enabled:focus-visible {
+:host([color=secondary]) button:enabled:focus-visible, :host([intent=secondary]) button:enabled:focus-visible, :host([intent=workflow-secondary]) button:enabled:focus-visible {
   border-color: var(--tct-btn-secondary-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));
   background: var(--tct-btn-secondary-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));
   color: var(--tct-btn-secondary-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));
   text-decoration: var(--tct-btn-secondary-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-focus-visible-box-shadow);
 }
-:host([color=secondary]) button:enabled:active, :host([intent=workflow-secondary]) button:enabled:active {
+:host([color=secondary]) button:enabled:active, :host([intent=secondary]) button:enabled:active, :host([intent=workflow-secondary]) button:enabled:active {
   border-color: var(--tct-btn-secondary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));
   background: var(--tct-btn-secondary-active-background, var(--comp-active-background, var(--comp-background)));
   color: var(--tct-btn-secondary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));
   text-decoration: var(--tct-btn-secondary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-active-box-shadow);
 }
-:host([color=secondary]) button:focus-visible, :host([color=secondary]) button:focus-visible:hover:enabled, :host([color=secondary]) button:focus, :host([color=secondary]) button:focus:hover:enabled, :host([intent=workflow-secondary]) button:focus-visible, :host([intent=workflow-secondary]) button:focus-visible:hover:enabled, :host([intent=workflow-secondary]) button:focus, :host([intent=workflow-secondary]) button:focus:hover:enabled {
+:host([color=secondary]) button:focus-visible, :host([color=secondary]) button:focus-visible:hover:enabled, :host([intent=secondary]) button:focus-visible, :host([intent=secondary]) button:focus-visible:hover:enabled, :host([intent=workflow-secondary]) button:focus-visible, :host([intent=workflow-secondary]) button:focus-visible:hover:enabled {
   border-color: var(--tct-btn-secondary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));
   background: var(--tct-btn-secondary-hover-background, var(--comp-hover-background, var(--comp-background)));
   color: var(--tct-btn-secondary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));
   text-decoration: var(--tct-btn-secondary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-hover-box-shadow);
 }
-:host([color=secondary]) button:focus-visible:active:enabled, :host([color=secondary]) button:focus:active:enabled, :host([intent=workflow-secondary]) button:focus-visible:active:enabled, :host([intent=workflow-secondary]) button:focus:active:enabled {
+:host([color=secondary]) button:focus-visible:active:enabled, :host([intent=secondary]) button:focus-visible:active:enabled, :host([intent=workflow-secondary]) button:focus-visible:active:enabled {
   border-color: var(--tct-btn-secondary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));
   background: var(--tct-btn-secondary-active-background, var(--comp-active-background, var(--comp-background)));
   color: var(--tct-btn-secondary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));
   text-decoration: var(--tct-btn-secondary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-active-box-shadow);
 }
-:host([color=secondary]) button:disabled, :host([intent=workflow-secondary]) button:disabled {
+:host([color=secondary]) button:disabled, :host([intent=secondary]) button:disabled, :host([intent=workflow-secondary]) button:disabled {
   border-color: var(--tct-btn-secondary-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));
   background: var(--tct-btn-secondary-disabled-background, var(--comp-disabled-background, var(--comp-background)));
   color: var(--tct-btn-secondary-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));
   text-decoration: var(--tct-btn-secondary-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-disabled-box-shadow);
 }
-:host([color=secondary]) button ::slotted(q2-icon), :host([intent=workflow-secondary]) button ::slotted(q2-icon) {
-  --t-text: var(--tct-btn-secondary-icon-color, var(--t-btn-secondary-icon-color, var(--comp-font-color, currentcolor)));
+:host([color=secondary]) button ::slotted(q2-icon), :host([intent=secondary]) button ::slotted(q2-icon), :host([intent=workflow-secondary]) button ::slotted(q2-icon) {
+  --comp-btn-icon-color: var(--tct-btn-secondary-icon-color, var(--t-btn-secondary-icon-color, var(--comp-font-color, currentcolor)));
+  --t-text: var(--comp-btn-icon-color);
+  --tct-icon-stroke-primary: var(--comp-btn-icon-color);
+  --tct-icon-stroke-secondary: var(--comp-btn-icon-color);
 }
-:host([intent=workflow-destroy]) button {
+:host([intent=destroy]) button, :host([intent=workflow-destroy]) button {
   backdrop-filter: var(--tct-btn-destroy-backdrop-filter);
   --comp-background: var(--tct-btn-destroy-background, var(--const-stoplight-alert, #d20a0a));
+  --comp-active-background: var(
+      --tct-btn-destroy-active-background,
+      color-mix(in srgb, var(--comp-background) 85%, #000000)
+  );
   --comp-font-color: var(--tct-btn-destroy-font-color, var(--app-white));
   --comp-box-shadow: var(--tct-btn-destroy-box-shadow, var(--comp-btn-fallback-box-shadow));
-  --comp-focus-box-shadow: var(--tct-btn-destroy-focus-box-shadow, var(--comp-btn-fallback-box-shadow));
   --comp-hover-outer-ring-color: var(--tct-btn-destroy-hover-outer-ring-color, var(--comp-background));
   --comp-hover-inner-ring-color: var(--tct-btn-destroy-hover-inner-ring-color, var(--comp-font-color));
   --comp-hover-box-shadow: var(
@@ -802,9 +802,13 @@ button:not(.has-size):not(.icon-only) ::slotted(q2-icon) {
       0 0 0 2px var(--comp-hover-inner-ring-color),
       0 0 0 4px var(--comp-hover-outer-ring-color)
   );
+  --comp-hover-box-shadow: var(
+      --tct-btn-destroy-hover-box-shadow,
+      var(--tct-btn-destroy-box-shadow, none)
+  );
   --comp-active-box-shadow: var(--comp-box-shadow);
   --comp-disabled-box-shadow: var(--comp-box-shadow);
-  --comp-focus-visible-outer-ring-color: var(--tct-btn-destroy-focus-visible-outer-ring-color, var(--const-focus-color));
+  --comp-focus-visible-outer-ring-color: var(--tct-btn-destroy-focus-visible-outer-ring-color, var(--comp-focus-ring-color));
   --comp-focus-visible-inner-ring-color: var(--tct-btn-destroy-focus-visible-inner-ring-color, var(--comp-font-color));
   --comp-focus-visible-box-shadow: var(
       --tct-btn-destroy-focus-visible-box-shadow,
@@ -820,68 +824,61 @@ button:not(.has-size):not(.icon-only) ::slotted(q2-icon) {
   text-decoration: var(--tct-btn-destroy-text-decoration, var(--comp-text-decoration));
   box-shadow: var(--comp-box-shadow);
 }
-:host([intent=workflow-destroy]) button:enabled:hover {
+:host([intent=destroy]) button:enabled:hover, :host([intent=workflow-destroy]) button:enabled:hover {
   border-color: var(--tct-btn-destroy-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));
   background: var(--tct-btn-destroy-hover-background, var(--comp-hover-background, var(--comp-background)));
   color: var(--tct-btn-destroy-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));
   text-decoration: var(--tct-btn-destroy-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-hover-box-shadow);
 }
-:host([intent=workflow-destroy]) button:enabled:focus {
-  border-color: var(--tct-btn-destroy-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));
-  background: var(--tct-btn-destroy-focus-background, var(--comp-focus-background, var(--comp-background)));
-  color: var(--tct-btn-destroy-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));
-  text-decoration: var(--tct-btn-destroy-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));
-  box-shadow: var(--comp-focus-box-shadow);
-}
-:host([intent=workflow-destroy]) button:enabled:focus-visible {
+:host([intent=destroy]) button:enabled:focus-visible, :host([intent=workflow-destroy]) button:enabled:focus-visible {
   border-color: var(--tct-btn-destroy-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));
   background: var(--tct-btn-destroy-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));
   color: var(--tct-btn-destroy-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));
   text-decoration: var(--tct-btn-destroy-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-focus-visible-box-shadow);
 }
-:host([intent=workflow-destroy]) button:enabled:active {
+:host([intent=destroy]) button:enabled:active, :host([intent=workflow-destroy]) button:enabled:active {
   border-color: var(--tct-btn-destroy-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));
   background: var(--tct-btn-destroy-active-background, var(--comp-active-background, var(--comp-background)));
   color: var(--tct-btn-destroy-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));
   text-decoration: var(--tct-btn-destroy-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-active-box-shadow);
 }
-:host([intent=workflow-destroy]) button:focus-visible, :host([intent=workflow-destroy]) button:focus-visible:hover:enabled, :host([intent=workflow-destroy]) button:focus, :host([intent=workflow-destroy]) button:focus:hover:enabled {
+:host([intent=destroy]) button:focus-visible, :host([intent=destroy]) button:focus-visible:hover:enabled, :host([intent=workflow-destroy]) button:focus-visible, :host([intent=workflow-destroy]) button:focus-visible:hover:enabled {
   border-color: var(--tct-btn-destroy-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));
   background: var(--tct-btn-destroy-hover-background, var(--comp-hover-background, var(--comp-background)));
   color: var(--tct-btn-destroy-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));
   text-decoration: var(--tct-btn-destroy-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-hover-box-shadow);
 }
-:host([intent=workflow-destroy]) button:focus-visible:active:enabled, :host([intent=workflow-destroy]) button:focus:active:enabled {
+:host([intent=destroy]) button:focus-visible:active:enabled, :host([intent=workflow-destroy]) button:focus-visible:active:enabled {
   border-color: var(--tct-btn-destroy-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));
   background: var(--tct-btn-destroy-active-background, var(--comp-active-background, var(--comp-background)));
   color: var(--tct-btn-destroy-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));
   text-decoration: var(--tct-btn-destroy-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-active-box-shadow);
 }
-:host([intent=workflow-destroy]) button:disabled {
+:host([intent=destroy]) button:disabled, :host([intent=workflow-destroy]) button:disabled {
   border-color: var(--tct-btn-destroy-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));
   background: var(--tct-btn-destroy-disabled-background, var(--comp-disabled-background, var(--comp-background)));
   color: var(--tct-btn-destroy-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));
   text-decoration: var(--tct-btn-destroy-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-disabled-box-shadow);
 }
-:host([intent=workflow-destroy]) button ::slotted(q2-icon) {
-  --t-text: var(--tct-btn-destroy-icon-color, var(--t-btn-destroy-icon-color, var(--comp-font-color, currentcolor)));
+:host([intent=destroy]) button ::slotted(q2-icon), :host([intent=workflow-destroy]) button ::slotted(q2-icon) {
+  --comp-btn-icon-color: var(--tct-btn-destroy-icon-color, var(--t-btn-destroy-icon-color, var(--comp-font-color, currentcolor)));
+  --t-text: var(--comp-btn-icon-color);
+  --tct-icon-stroke-primary: var(--comp-btn-icon-color);
+  --tct-icon-stroke-secondary: var(--comp-btn-icon-color);
 }
-:host([intent=workflow-escape]) button {
+:host([intent=escape]) button, :host([intent=workflow-escape]) button {
   backdrop-filter: var(--tct-btn-escape-backdrop-filter);
   --comp-background: var(--tct-btn-escape-background, var(--app-white, #ffffff));
   --comp-font-color: var(--tct-btn-escape-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040))));
   --comp-box-shadow: var(--tct-btn-escape-box-shadow, var(--comp-btn-fallback-box-shadow));
-  --comp-hover-box-shadow: var(--tct-btn-escape-hover-box-shadow, var(--comp-btn-fallback-box-shadow));
-  --comp-focus-box-shadow: var(--tct-btn-escape-focus-box-shadow, var(--comp-btn-fallback-box-shadow));
   --comp-hover-background: var(--tct-btn-escape-hover-background, var(--comp-background-alternative));
   --comp-active-background: var(--tct-btn-escape-active-background, var(--comp-background-alternative));
-  --comp-focus-background: var(--tct-btn-escape-focus-background, var(--comp-background-alternative));
   --comp-hover-outer-ring-color: var(--tct-btn-escape-hover-outer-ring-color, var(--comp-font-color));
   --comp-hover-inner-ring-color: var(--tct-btn-escape-hover-inner-ring-color, var(--comp-background));
   --comp-hover-box-shadow: var(
@@ -889,9 +886,13 @@ button:not(.has-size):not(.icon-only) ::slotted(q2-icon) {
       0 0 0 2px var(--comp-hover-inner-ring-color),
       0 0 0 4px var(--comp-hover-outer-ring-color)
   );
+  --comp-hover-box-shadow: var(
+      --tct-btn-escape-hover-box-shadow,
+      var(--tct-btn-escape-box-shadow, none)
+  );
   --comp-active-box-shadow: var(--comp-box-shadow);
   --comp-disabled-box-shadow: var(--comp-box-shadow);
-  --comp-focus-visible-outer-ring-color: var(--tct-btn-escape-focus-visible-outer-ring-color, var(--const-focus-color));
+  --comp-focus-visible-outer-ring-color: var(--tct-btn-escape-focus-visible-outer-ring-color, var(--comp-focus-ring-color));
   --comp-focus-visible-inner-ring-color: var(--tct-btn-escape-focus-visible-inner-ring-color, var(--comp-background));
   --comp-focus-visible-box-shadow: var(
       --tct-btn-escape-focus-visible-box-shadow,
@@ -907,64 +908,60 @@ button:not(.has-size):not(.icon-only) ::slotted(q2-icon) {
   text-decoration: var(--tct-btn-escape-text-decoration, var(--comp-text-decoration));
   box-shadow: var(--comp-box-shadow);
 }
-:host([intent=workflow-escape]) button:enabled:hover {
+:host([intent=escape]) button:enabled:hover, :host([intent=workflow-escape]) button:enabled:hover {
   border-color: var(--tct-btn-escape-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));
   background: var(--tct-btn-escape-hover-background, var(--comp-hover-background, var(--comp-background)));
   color: var(--tct-btn-escape-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));
   text-decoration: var(--tct-btn-escape-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-hover-box-shadow);
 }
-:host([intent=workflow-escape]) button:enabled:focus {
-  border-color: var(--tct-btn-escape-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));
-  background: var(--tct-btn-escape-focus-background, var(--comp-focus-background, var(--comp-background)));
-  color: var(--tct-btn-escape-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));
-  text-decoration: var(--tct-btn-escape-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));
-  box-shadow: var(--comp-focus-box-shadow);
-}
-:host([intent=workflow-escape]) button:enabled:focus-visible {
+:host([intent=escape]) button:enabled:focus-visible, :host([intent=workflow-escape]) button:enabled:focus-visible {
   border-color: var(--tct-btn-escape-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));
   background: var(--tct-btn-escape-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));
   color: var(--tct-btn-escape-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));
   text-decoration: var(--tct-btn-escape-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-focus-visible-box-shadow);
 }
-:host([intent=workflow-escape]) button:enabled:active {
+:host([intent=escape]) button:enabled:active, :host([intent=workflow-escape]) button:enabled:active {
   border-color: var(--tct-btn-escape-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));
   background: var(--tct-btn-escape-active-background, var(--comp-active-background, var(--comp-background)));
   color: var(--tct-btn-escape-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));
   text-decoration: var(--tct-btn-escape-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-active-box-shadow);
 }
-:host([intent=workflow-escape]) button:focus-visible, :host([intent=workflow-escape]) button:focus-visible:hover:enabled, :host([intent=workflow-escape]) button:focus, :host([intent=workflow-escape]) button:focus:hover:enabled {
+:host([intent=escape]) button:focus-visible, :host([intent=escape]) button:focus-visible:hover:enabled, :host([intent=workflow-escape]) button:focus-visible, :host([intent=workflow-escape]) button:focus-visible:hover:enabled {
   border-color: var(--tct-btn-escape-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));
   background: var(--tct-btn-escape-hover-background, var(--comp-hover-background, var(--comp-background)));
   color: var(--tct-btn-escape-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));
   text-decoration: var(--tct-btn-escape-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-hover-box-shadow);
 }
-:host([intent=workflow-escape]) button:focus-visible:active:enabled, :host([intent=workflow-escape]) button:focus:active:enabled {
+:host([intent=escape]) button:focus-visible:active:enabled, :host([intent=workflow-escape]) button:focus-visible:active:enabled {
   border-color: var(--tct-btn-escape-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));
   background: var(--tct-btn-escape-active-background, var(--comp-active-background, var(--comp-background)));
   color: var(--tct-btn-escape-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));
   text-decoration: var(--tct-btn-escape-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-active-box-shadow);
 }
-:host([intent=workflow-escape]) button:disabled {
+:host([intent=escape]) button:disabled, :host([intent=workflow-escape]) button:disabled {
   border-color: var(--tct-btn-escape-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));
   background: var(--tct-btn-escape-disabled-background, var(--comp-disabled-background, var(--comp-background)));
   color: var(--tct-btn-escape-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));
   text-decoration: var(--tct-btn-escape-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-disabled-box-shadow);
 }
-:host([intent=workflow-escape]) button ::slotted(q2-icon) {
-  --t-text: var(--tct-btn-escape-icon-color, var(--t-btn-escape-icon-color, var(--comp-font-color, currentcolor)));
+:host([intent=escape]) button ::slotted(q2-icon), :host([intent=workflow-escape]) button ::slotted(q2-icon) {
+  --comp-btn-icon-color: var(--tct-btn-escape-icon-color, var(--t-btn-escape-icon-color, var(--comp-font-color, currentcolor)));
+  --t-text: var(--comp-btn-icon-color);
+  --tct-icon-stroke-primary: var(--comp-btn-icon-color);
+  --tct-icon-stroke-secondary: var(--comp-btn-icon-color);
 }
 :host([intent=neutral]) button {
   backdrop-filter: var(--tct-btn-neutral-backdrop-filter);
   --comp-background: var(--tct-btn-neutral-background, var(--app-white, #ffffff));
+  --comp-active-background: var(--tct-btn-neutral-active-background, var(--comp-background-alternative));
   --comp-font-color: var(--tct-btn-neutral-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040))));
   --comp-box-shadow: var(--tct-btn-neutral-box-shadow, var(--comp-btn-fallback-box-shadow));
-  --comp-focus-box-shadow: var(--tct-btn-neutral-focus-box-shadow, var(--comp-btn-fallback-box-shadow));
   --comp-border-width: 1px;
   --comp-border-style: solid;
   --comp-border-color: var(--comp-font-color);
@@ -975,9 +972,13 @@ button:not(.has-size):not(.icon-only) ::slotted(q2-icon) {
       0 0 0 2px var(--comp-hover-inner-ring-color),
       0 0 0 4px var(--comp-hover-outer-ring-color)
   );
+  --comp-hover-box-shadow: var(
+      --tct-btn-neutral-hover-box-shadow,
+      var(--tct-btn-neutral-box-shadow, none)
+  );
   --comp-active-box-shadow: var(--comp-box-shadow);
   --comp-disabled-box-shadow: var(--comp-box-shadow);
-  --comp-focus-visible-outer-ring-color: var(--tct-btn-neutral-focus-visible-outer-ring-color, var(--const-focus-color));
+  --comp-focus-visible-outer-ring-color: var(--tct-btn-neutral-focus-visible-outer-ring-color, var(--comp-focus-ring-color));
   --comp-focus-visible-inner-ring-color: var(--tct-btn-neutral-focus-visible-inner-ring-color, var(--comp-background));
   --comp-focus-visible-box-shadow: var(
       --tct-btn-neutral-focus-visible-box-shadow,
@@ -1000,13 +1001,6 @@ button:not(.has-size):not(.icon-only) ::slotted(q2-icon) {
   text-decoration: var(--tct-btn-neutral-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-hover-box-shadow);
 }
-:host([intent=neutral]) button:enabled:focus {
-  border-color: var(--tct-btn-neutral-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));
-  background: var(--tct-btn-neutral-focus-background, var(--comp-focus-background, var(--comp-background)));
-  color: var(--tct-btn-neutral-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));
-  text-decoration: var(--tct-btn-neutral-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));
-  box-shadow: var(--comp-focus-box-shadow);
-}
 :host([intent=neutral]) button:enabled:focus-visible {
   border-color: var(--tct-btn-neutral-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));
   background: var(--tct-btn-neutral-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));
@@ -1021,14 +1015,14 @@ button:not(.has-size):not(.icon-only) ::slotted(q2-icon) {
   text-decoration: var(--tct-btn-neutral-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-active-box-shadow);
 }
-:host([intent=neutral]) button:focus-visible, :host([intent=neutral]) button:focus-visible:hover:enabled, :host([intent=neutral]) button:focus, :host([intent=neutral]) button:focus:hover:enabled {
+:host([intent=neutral]) button:focus-visible, :host([intent=neutral]) button:focus-visible:hover:enabled {
   border-color: var(--tct-btn-neutral-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));
   background: var(--tct-btn-neutral-hover-background, var(--comp-hover-background, var(--comp-background)));
   color: var(--tct-btn-neutral-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));
   text-decoration: var(--tct-btn-neutral-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-hover-box-shadow);
 }
-:host([intent=neutral]) button:focus-visible:active:enabled, :host([intent=neutral]) button:focus:active:enabled {
+:host([intent=neutral]) button:focus-visible:active:enabled {
   border-color: var(--tct-btn-neutral-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));
   background: var(--tct-btn-neutral-active-background, var(--comp-active-background, var(--comp-background)));
   color: var(--tct-btn-neutral-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));
@@ -1043,15 +1037,18 @@ button:not(.has-size):not(.icon-only) ::slotted(q2-icon) {
   box-shadow: var(--comp-disabled-box-shadow);
 }
 :host([intent=neutral]) button ::slotted(q2-icon) {
-  --t-text: var(--tct-btn-neutral-icon-color, var(--t-btn-neutral-icon-color, var(--comp-font-color, currentcolor)));
+  --comp-btn-icon-color: var(--tct-btn-neutral-icon-color, var(--t-btn-neutral-icon-color, var(--comp-font-color, currentcolor)));
+  --t-text: var(--comp-btn-icon-color);
+  --tct-icon-stroke-primary: var(--comp-btn-icon-color);
+  --tct-icon-stroke-secondary: var(--comp-btn-icon-color);
 }
 :host([intent=neutral-text]) button {
   backdrop-filter: var(--tct-btn-neutral-text-backdrop-filter);
   --comp-background: var(--tct-btn-neutral-text-background, var(--tct-btn-neutral-text-bg, var(--app-white, #ffffff)));
+  --comp-active-background: var(--tct-btn-neutral-text-active-background, var(--comp-background-alternative));
   --comp-font-color: var(--tct-btn-neutral-text-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040))));
   --comp-box-shadow: var(--tct-btn-neutral-text-box-shadow);
   --comp-hover-text-decoration: underline;
-  --comp-focus-background: var(--tct-btn-neutral-text-focus-background, var(--comp-background-alternative));
   --comp-hover-outer-ring-color: var(--tct-btn-neutral-text-hover-outer-ring-color, var(--comp-font-color));
   --comp-hover-inner-ring-color: var(--tct-btn-neutral-text-hover-inner-ring-color, var(--comp-background));
   --comp-hover-box-shadow: var(
@@ -1059,9 +1056,13 @@ button:not(.has-size):not(.icon-only) ::slotted(q2-icon) {
       0 0 0 2px var(--comp-hover-inner-ring-color),
       0 0 0 4px var(--comp-hover-outer-ring-color)
   );
+  --comp-hover-box-shadow: var(
+      --tct-btn-neutral-text-hover-box-shadow,
+      var(--tct-btn-neutral-text-box-shadow, none)
+  );
   --comp-active-box-shadow: var(--comp-box-shadow);
   --comp-disabled-box-shadow: var(--comp-box-shadow);
-  --comp-focus-visible-outer-ring-color: var(--tct-btn-neutral-text-focus-visible-outer-ring-color, var(--const-focus-color));
+  --comp-focus-visible-outer-ring-color: var(--tct-btn-neutral-text-focus-visible-outer-ring-color, var(--comp-focus-ring-color));
   --comp-focus-visible-inner-ring-color: var(--tct-btn-neutral-text-focus-visible-inner-ring-color, var(--app-white));
   --comp-focus-visible-box-shadow: var(
       --tct-btn-neutral-text-focus-visible-box-shadow,
@@ -1084,13 +1085,6 @@ button:not(.has-size):not(.icon-only) ::slotted(q2-icon) {
   text-decoration: var(--tct-btn-neutral-text-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-hover-box-shadow);
 }
-:host([intent=neutral-text]) button:enabled:focus {
-  border-color: var(--tct-btn-neutral-text-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));
-  background: var(--tct-btn-neutral-text-focus-background, var(--comp-focus-background, var(--comp-background)));
-  color: var(--tct-btn-neutral-text-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));
-  text-decoration: var(--tct-btn-neutral-text-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));
-  box-shadow: var(--comp-focus-box-shadow);
-}
 :host([intent=neutral-text]) button:enabled:focus-visible {
   border-color: var(--tct-btn-neutral-text-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));
   background: var(--tct-btn-neutral-text-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));
@@ -1105,14 +1099,14 @@ button:not(.has-size):not(.icon-only) ::slotted(q2-icon) {
   text-decoration: var(--tct-btn-neutral-text-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-active-box-shadow);
 }
-:host([intent=neutral-text]) button:focus-visible, :host([intent=neutral-text]) button:focus-visible:hover:enabled, :host([intent=neutral-text]) button:focus, :host([intent=neutral-text]) button:focus:hover:enabled {
+:host([intent=neutral-text]) button:focus-visible, :host([intent=neutral-text]) button:focus-visible:hover:enabled {
   border-color: var(--tct-btn-neutral-text-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));
   background: var(--tct-btn-neutral-text-hover-background, var(--comp-hover-background, var(--comp-background)));
   color: var(--tct-btn-neutral-text-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));
   text-decoration: var(--tct-btn-neutral-text-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-hover-box-shadow);
 }
-:host([intent=neutral-text]) button:focus-visible:active:enabled, :host([intent=neutral-text]) button:focus:active:enabled {
+:host([intent=neutral-text]) button:focus-visible:active:enabled {
   border-color: var(--tct-btn-neutral-text-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));
   background: var(--tct-btn-neutral-text-active-background, var(--comp-active-background, var(--comp-background)));
   color: var(--tct-btn-neutral-text-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));
@@ -1127,7 +1121,10 @@ button:not(.has-size):not(.icon-only) ::slotted(q2-icon) {
   box-shadow: var(--comp-disabled-box-shadow);
 }
 :host([intent=neutral-text]) button ::slotted(q2-icon) {
-  --t-text: var(--tct-btn-neutral-text-icon-color, var(--t-btn-neutral-text-icon-color, var(--comp-font-color, currentcolor)));
+  --comp-btn-icon-color: var(--tct-btn-neutral-text-icon-color, var(--t-btn-neutral-text-icon-color, var(--comp-font-color, currentcolor)));
+  --t-text: var(--comp-btn-icon-color);
+  --tct-icon-stroke-primary: var(--comp-btn-icon-color);
+  --tct-icon-stroke-secondary: var(--comp-btn-icon-color);
 }
 button.icon-only {
   width: var(--tct-btn-icon-width, var(--t-btn-icon-width, 44px));
@@ -1146,13 +1143,13 @@ button.icon-only.has-intent {
   padding: var(--tct-btn-icon-padding, 10px);
   border-radius: var(--tct-btn-icon-border-radius, var(--comp-border-radius));
 }
-button:not(.has-color):not(.has-intent):hover, button:not(.has-color):not(.has-intent):focus, button.icon-only:hover, button.icon-only:focus {
+button:not(.has-color):not(.has-intent):hover, button.icon-only:hover {
   background: var(--tct-btn-icon-hover-background, var(--tct-btn-icon-hover-bg, var(--t-btn-icon-hover-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));
 }
 button:not(.has-intent).is-active.icon-only {
   background-color: var(--tct-btn-icon-active-background, var(--tct-btn-icon-active-bg, var(--t-btn-icon-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));
 }
-button:not(.has-intent).icon-only:hover *, button:not(.has-intent).icon-only:focus *, button:not(.has-intent).is-active.icon-only * {
+button:not(.has-intent).icon-only:hover *, button:not(.has-intent).is-active.icon-only * {
   color: var(--tct-btn-icon-hover-color, var(--t-btn-icon-hover-color, var(--tct-link-hover-color, var(--t-link-hover-color, #080808))));
 }
 button:not(.has-intent):not(.icon-only) {
@@ -1202,22 +1199,17 @@ button.intent-coin {
   box-shadow: var(--tct-btn-coin-box-shadow);
 }
 button.intent-coin:hover:not([disabled]), button.intent-coin:hover:focus:not(:active):not([disabled]) {
-  --const-double-focus-ring: 0 0 0 2px #ffffff,
-      0 0 0 4px var(--tct-btn-coin-focus-ring, var(--t-primary, #6a4a9e));
   --tct-avatar-background: var(--tct-btn-coin-hover-background, var(--tct-btn-coin-background, var(--t-primary-l3, #957ac1)));
   --tct-avatar-fallback-background: var(--tct-btn-coin-hover-background, var(--tct-btn-coin-background, var(--t-primary-l3, #957ac1)));
   --tct-icon-stroke-primary: var(--tct-btn-coin-icon-stroke-primary, var(--t-base, #ffffff));
   --tct-avatar-text-color: var(--tct-btn-coin-avatar-text-color, var(--t-base, #ffffff));
-  box-shadow: var(--tct-btn-coin-hover-box-shadow, var(--tct-btn-coin-box-shadow, var(--const-double-focus-ring)));
-}
-button.intent-coin:focus:not([disabled]) {
-  --const-double-focus-ring: 0;
-  box-shadow: var(--tct-btn-coin-focus-box-shadow, var(--tct-btn-coin-box-shadow, 0));
+  box-shadow: var(--tct-btn-coin-hover-box-shadow, var(--tct-btn-coin-box-shadow, none));
 }
 button.intent-coin:focus-visible:not([disabled]) {
-  --const-double-focus-ring: 0 0 0 2px #ffffff,
-      0 0 0 4px var(--tct-btn-coin-focus-ring, var(--t-primary, #6a4a9e));
-  box-shadow: var(--tct-btn-coin-focus-visible-box-shadow, var(--tct-btn-coin-focus-box-shadow, var(--tct-btn-coin-box-shadow, var(--const-double-focus-ring))));
+  --comp-coin-focus-visible-outer-ring-color: var(--tct-btn-coin-focus-visible-outer-ring-color, var(--comp-focus-ring-color));
+  --comp-coin-focus-visible-box-shadow: 0 0 0 2px #ffffff,
+      0 0 0 4px var(--comp-coin-focus-visible-outer-ring-color);
+  box-shadow: var(--tct-btn-coin-focus-visible-box-shadow, var(--comp-coin-focus-visible-box-shadow));
 }
 button.intent-coin:focus:active:not([disabled]) {
   --tct-avatar-background: var(--tct-btn-coin-active-background);
@@ -1225,6 +1217,20 @@ button.intent-coin:focus:active:not([disabled]) {
   box-shadow: none;
 }
 
+@container style(--t-prefers-motion: "reduced") {
+  :host([intent]) button.has-intent:enabled:active,
+  :host([color=primary]) button:enabled:active {
+    transform: none;
+  }
+}
+@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")) {
+  @media (prefers-reduced-motion: reduce) {
+    :host([intent]) button.has-intent:enabled:active,
+    :host([color=primary]) button:enabled:active {
+      transform: none;
+    }
+  }
+}
 .coin-label {
   color: var(--tct-btn-coin-label-color, var(--t-text, #4d4d4d));
   font-size: var(--tct-btn-coin-label-font-size, var(--app-font-size, var(--const-px-14, 14px)));