igniteui-webcomponents 4.3.1 → 4.5.0-beta.1

package/components/stepper/themes/step/light/step.base.css.js

@@ -32,34 +32,6 @@ export const styles = css `:host {
   display: none !important;
 }
 :host {
-  --title-color: var(--ig-gray-50-contrast);
-  --subtitle-color: hsla(var(--ig-gray-700), var(--ig-gray-a));
-  --separator-color: hsla(var(--ig-gray-300), var(--ig-gray-a));
-  --separator-color--completed: hsla(var(--ig-gray-900), var(--ig-gray-a));
-  --header-color: var(--ig-gray-50-contrast);
-  --header-background--hover: hsla(var(--ig-gray-200), var(--ig-gray-a));
-  --header-background--focus: hsla(var(--ig-gray-100), var(--ig-gray-a));
-  --header-shadow: hsla(var(--ig-gray-50), 0);
-  --indicator-color: hsla(var(--ig-gray-900), var(--ig-gray-a));
-  --indicator-background: hsla(var(--ig-gray-400), var(--ig-gray-a));
-  --indicator-shadow: var(--indicator-background);
-  --optional-indicator-color: var(--indicator-color);
-  --optional-indicator-background: var(--indicator-background);
-  --optional-indicator-shadow: var(--indicator-shadow);
-  --completed-indicator-color: var(--indicator-color);
-  --completed-indicator-background: var(--indicator-background);
-  --completed-indicator-shadow: var(--indicator-shadow);
-  --active-indicator-color: var(--ig-primary-800-contrast);
-  --active-indicator-background: hsla(var(--ig-primary-500), var(--ig-primary-a));
-  --active-indicator-shadow: var(--active-indicator-background);
-  --active-title-color: var(--title-color);
-  --active-subtitle-color: var(--subtitle-color);
-  --error-color: var(--ig-error-800-contrast);
-  --error-background: hsla(var(--ig-error-500), var(--ig-error-a));
-  --error-shadow: var(--error-background);
-  --disabled-color: hsla(var(--ig-gray-500), var(--ig-gray-a));
-  --disabled-background: hsla(var(--ig-gray-100), var(--ig-gray-a));
-  --disabled-shadow: var(--disabled-background);
   -webkit-box-align: start;
       -ms-flex-align: start;
           align-items: flex-start;
@@ -76,8 +48,7 @@ export const styles = css `:host {
   -webkit-box-flex: 1;
       -ms-flex: 1;
           flex: 1;
-  -webkit-border-before: var(--separator-size) var(--separator-type) var(--separator-color);
-          border-block-start: var(--separator-size) var(--separator-type) var(--separator-color);
+  border-block-start-width: var(--separator-size);
   height: var(--separator-size);
   position: relative;
 }
@@ -124,7 +95,6 @@ export const styles = css `:host {
       -ms-flex-pack: start;
           justify-content: flex-start;
   gap: var(--header-gap);
-  color: var(--header-color);
   z-index: var(--vertical-header-z-index);
 }
 [part~=header]::before, [part~=header]::after {
@@ -132,8 +102,7 @@ export const styles = css `:host {
   -webkit-box-flex: 1;
       -ms-flex: 1;
           flex: 1;
-  -webkit-border-before: var(--separator-size) var(--separator-type) var(--separator-color);
-          border-block-start: var(--separator-size) var(--separator-type) var(--separator-color);
+  border-block-start-width: var(--separator-size);
   height: var(--separator-size);
   min-width: var(--separator-min-width--header);
   width: calc(50% - var(--indicator-size) / 2 - var(--header-padding));
@@ -152,58 +121,54 @@ export const styles = css `:host {
   cursor: pointer;
   outline: none;
 }
-[part~=header]:hover {
-  background: var(--header-background--hover);
-}
 [part~=header]:hover::before, [part~=header]:hover::after {
   visibility: var(--header-separator-visibility--hover);
 }
-[part~=header]:focus, [part~=header]:focus-within, [part~=header]:active {
-  background: var(--header-background--focus);
-  -webkit-box-shadow: inset 0 0 0 0.0625rem var(--header-shadow);
-          box-shadow: inset 0 0 0 0.0625rem var(--header-shadow);
-}
 [part~=header]:focus::before, [part~=header]:focus::after, [part~=header]:focus-within::before, [part~=header]:focus-within::after, [part~=header]:active::before, [part~=header]:active::after {
   visibility: var(--header-separator-visibility--hover);
 }
 
 [part~=body] {
-  display: var(--vertical-body-disply--last-of-type, var(--vertical-body-disply, none));
+  display: block;
+  opacity: 0;
   grid-row-start: var(--body-top, 2);
-  grid-column: span var(--steps-count);
-  -webkit-margin-start: calc(var(--body-indent--vertical) / 2);
-          margin-inline-start: calc(var(--body-indent--vertical) / 2);
-  -webkit-padding-start: var(--horizontal-body-padding, calc(var(--body-indent--vertical) / 2));
-          padding-inline-start: var(--horizontal-body-padding, calc(var(--body-indent--vertical) / 2));
-  -webkit-padding-end: var(--horizontal-body-padding, var(--vertical-body-padding));
-          padding-inline-end: var(--horizontal-body-padding, var(--vertical-body-padding));
-  -webkit-padding-before: var(--horizontal-body-padding, var(--vertical-body-padding));
-          padding-block-start: var(--horizontal-body-padding, var(--vertical-body-padding));
-  -webkit-padding-after: var(--horizontal-body-padding, var(--vertical-body-padding));
-          padding-block-end: var(--horizontal-body-padding, var(--vertical-body-padding));
+  grid-column: 1/span var(--steps-count);
+  -webkit-padding-start: calc(var(--body-indent--vertical) / 2);
+          padding-inline-start: calc(var(--body-indent--vertical) / 2);
   z-index: 1;
   position: relative;
-  color: hsla(var(--ig-gray-900), var(--ig-gray-a));
-  overflow: auto;
+  overflow: hidden;
   width: 0;
+  height: var(--vertical-body-height, auto);
   min-width: 100%;
 }
 [part~=body]::before {
   display: var(--hide-last-separator, var(--hide-first-separator, var(--vertical-separator-visibility)));
   content: "";
   position: absolute;
-  inset-inline-start: calc(var(--separator-size) / 2 * -1);
+  inset-inline-start: calc(var(--body-indent--vertical) / 2 - var(--separator-size) / 2);
   height: 100%;
   inset-block-start: 0 !important;
-  -webkit-border-start: var(--separator-size) var(--separator-type) var(--separator-color);
-          border-inline-start: var(--separator-size) var(--separator-type) var(--separator-color);
+  border-inline-start-style: var(--separator-type);
+  border-inline-start-width: var(--separator-size);
 }
 
 [part=content] {
-  display: var(--horizontal-content-disply, none);
-  height: 100%;
+  display: block;
+  height: auto;
   overflow: auto;
 }
+[part=content] > slot {
+  display: block;
+  -webkit-padding-start: var(--horizontal-body-padding, calc(var(--body-indent--vertical) / 2));
+          padding-inline-start: var(--horizontal-body-padding, calc(var(--body-indent--vertical) / 2));
+  -webkit-padding-end: var(--horizontal-body-padding, var(--vertical-body-padding));
+          padding-inline-end: var(--horizontal-body-padding, var(--vertical-body-padding));
+  -webkit-padding-before: var(--horizontal-body-padding, var(--vertical-body-padding));
+          padding-block-start: var(--horizontal-body-padding, var(--vertical-body-padding));
+  -webkit-padding-after: var(--horizontal-body-padding, var(--vertical-body-padding));
+          padding-block-end: var(--horizontal-body-padding, var(--vertical-body-padding));
+}
 
 [part~=top] {
   -webkit-box-align: var(--step-not-full-header-aligmnet, flex-end);
@@ -275,21 +240,23 @@ export const styles = css `:host {
 }
 
 [part~=indicator] {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  font-family: var(--ig-caption-font-family, var(--ig-font-family));
+  font-size: var(--ig-caption-font-size);
+  font-weight: var(--ig-caption-font-weight);
+  font-style: var(--ig-caption-font-style);
+  line-height: var(--ig-caption-line-height);
+  letter-spacing: var(--ig-caption-letter-spacing);
+  text-transform: var(--ig-caption-text-transform);
+  margin-top: var(--ig-caption-margin-top);
+  margin-bottom: var(--ig-caption-margin-bottom);
   width: var(--indicator-size);
   min-width: var(--indicator-size);
   height: var(--indicator-size);
   position: relative;
 }
-[part~=indicator] span {
+
+[part~=indicator],
+::slotted([slot=indicator]) {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -299,21 +266,11 @@ export const styles = css `:host {
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
-  width: var(--indicator-size);
-  height: var(--indicator-size);
-  background: var(--indicator-background);
-  color: var(--indicator-color);
-  -webkit-box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var(--indicator-shadow);
-          box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var(--indicator-shadow);
-  font-family: var(--ig-caption-font-family, var(--ig-font-family));
-  font-size: var(--ig-caption-font-size);
-  font-weight: var(--ig-caption-font-weight);
-  font-style: var(--ig-caption-font-style);
-  line-height: var(--ig-caption-line-height);
-  letter-spacing: var(--ig-caption-letter-spacing);
-  text-transform: var(--ig-caption-text-transform);
-  margin-top: var(--ig-caption-margin-top);
-  margin-bottom: var(--ig-caption-margin-bottom);
+}
+
+::slotted([slot=indicator]) {
+  --diameter: calc(var(--indicator-size) - 0.125rem);
+  --ig-icon-size: 1.125rem ;
 }
 
 [part~=text] {
@@ -338,7 +295,6 @@ export const styles = css `:host {
   text-transform: var(--ig-body-2-text-transform);
   margin-top: var(--ig-body-2-margin-top);
   margin-bottom: var(--ig-body-2-margin-bottom);
-  color: var(--title-color);
 }
 
 [part~=subtitle] {
@@ -351,101 +307,24 @@ export const styles = css `:host {
   text-transform: var(--ig-caption-text-transform);
   margin-top: var(--ig-caption-margin-top);
   margin-bottom: var(--ig-caption-margin-bottom);
-  color: var(--subtitle-color);
 }
 
 [part~=empty] {
   display: none;
 }
 
-[part~=optional] [part~=indicator] span {
-  color: var(--optional-indicator-color);
-  background: var(--optional-indicator-background);
-  -webkit-box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var(--optional-indicator-shadow);
-          box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var(--optional-indicator-shadow);
-}
-
-[part~=complete-start]::after {
-  border-block-start-style: var(--separator-type--completed);
-  border-block-start-color: var(--separator-color--completed);
-}
-[part~=complete-start] [part~=header]::after {
-  border-block-start-style: var(--separator-type--completed);
-  border-block-start-color: var(--separator-color--completed);
-}
-[part~=complete-start] [part~=indicator] span {
-  background: var(--completed-indicator-background);
-  color: var(--completed-indicator-color);
-  -webkit-box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var(--completed-indicator-shadow);
-          box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var(--completed-indicator-shadow);
-}
-
-:host([complete]) [part~=body]::before {
-  border-inline-start-style: var(--separator-type--completed);
-  border-inline-start-color: var(--separator-color--completed);
-}
-
-[part~=complete-end]::before {
-  border-block-start-style: var(--separator-type--completed);
-  border-block-start-color: var(--separator-color--completed);
-}
-[part~=complete-end] [part~=header]::before {
-  border-block-start-style: var(--separator-type--completed);
-  border-block-start-color: var(--separator-color--completed);
-}
-
-[part~=invalid] [part~=indicator] span {
-  color: var(--error-color);
-  background: var(--error-background);
-  -webkit-box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var(--error-shadow);
-          box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var(--error-shadow);
-}
-[part~=invalid] [part~=title],
-[part~=invalid] [part~=subtitle] {
-  color: var(--error-background);
-}
-
 :host([active]) [part~=body] {
-  display: var(--vertical-body-disply, block);
+  height: 100%;
+  opacity: 1;
 }
 :host([active]) [part~="body bottom"]::before {
   inset-block-start: 0;
 }
 :host([active]) [part=content] {
-  display: var(--horizontal-content-disply, block);
   pointer-events: all;
 }
-:host([active]) [part~=indicator] span {
-  background: var(--active-indicator-background);
-  color: var(--active-indicator-color);
-  -webkit-box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var(--active-indicator-shadow);
-          box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var(--active-indicator-shadow);
-}
-:host([active]) [part~=title] {
-  color: var(--active-title-color);
-  font-weight: 600;
-}
-:host([active]) [part~=subtitle] {
-  color: var(--active-subtitle-color);
-}
 
 [part~=disabled] [part=header] {
-  background: hsla(var(--ig-gray-50), 0);
-}
-[part~=disabled]:focus [part=header], [part~=disabled]:focus-visible [part=header], [part~=disabled]:focus-within [part=header], [part~=disabled]:active [part=header], [part~=disabled]:hover [part=header] {
-  background: hsla(var(--ig-gray-50), 0);
   cursor: default;
-  -webkit-box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-gray-50), 0);
-          box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-gray-50), 0);
-}
-[part~=disabled] [part~=indicator] span {
-  color: var(--disabled-color);
-  background: var(--disabled-background);
-  -webkit-box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var(--disabled-shadow);
-          box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var(--disabled-shadow);
-}
-[part~=disabled] [part~=title],
-[part~=disabled] [part~=subtitle] {
-  color: var(--disabled-color);
 }`;
 //# sourceMappingURL=step.base.css.js.map

package/components/stepper/themes/step/light/step.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"step.base.css.js","sourceRoot":"","sources":["../../../../../../src/components/stepper/themes/step/light/step.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgcvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n  --is-medium: min(\n      clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n      clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n  );\n  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--ig-scrollbar-size);\n  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n  width: var(--ig-scrollbar-size);\n  height: var(--ig-scrollbar-size);\n  background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--ig-scrollbar-thumb-background);\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n:host {\n  --title-color: var(--ig-gray-50-contrast);\n  --subtitle-color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n  --separator-color: hsla(var(--ig-gray-300), var(--ig-gray-a));\n  --separator-color--completed: hsla(var(--ig-gray-900), var(--ig-gray-a));\n  --header-color: var(--ig-gray-50-contrast);\n  --header-background--hover: hsla(var(--ig-gray-200), var(--ig-gray-a));\n  --header-background--focus: hsla(var(--ig-gray-100), var(--ig-gray-a));\n  --header-shadow: hsla(var(--ig-gray-50), 0);\n  --indicator-color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n  --indicator-background: hsla(var(--ig-gray-400), var(--ig-gray-a));\n  --indicator-shadow: var(--indicator-background);\n  --optional-indicator-color: var(--indicator-color);\n  --optional-indicator-background: var(--indicator-background);\n  --optional-indicator-shadow: var(--indicator-shadow);\n  --completed-indicator-color: var(--indicator-color);\n  --completed-indicator-background: var(--indicator-background);\n  --completed-indicator-shadow: var(--indicator-shadow);\n  --active-indicator-color: var(--ig-primary-800-contrast);\n  --active-indicator-background: hsla(var(--ig-primary-500), var(--ig-primary-a));\n  --active-indicator-shadow: var(--active-indicator-background);\n  --active-title-color: var(--title-color);\n  --active-subtitle-color: var(--subtitle-color);\n  --error-color: var(--ig-error-800-contrast);\n  --error-background: hsla(var(--ig-error-500), var(--ig-error-a));\n  --error-shadow: var(--error-background);\n  --disabled-color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n  --disabled-background: hsla(var(--ig-gray-100), var(--ig-gray-a));\n  --disabled-shadow: var(--disabled-background);\n  -webkit-box-align: start;\n      -ms-flex-align: start;\n          align-items: flex-start;\n}\n\n[part~=header-container],\n[part~=header] {\n  width: var(--header-width-vertical, auto);\n}\n[part~=header-container]::before,\n[part~=header]::before {\n  content: \"\";\n  width: auto;\n  -webkit-box-flex: 1;\n      -ms-flex: 1;\n          flex: 1;\n  -webkit-border-before: var(--separator-size) var(--separator-type) var(--separator-color);\n          border-block-start: var(--separator-size) var(--separator-type) var(--separator-color);\n  height: var(--separator-size);\n  position: relative;\n}\n\n[part~=header-container] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  pointer-events: none;\n  position: relative;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  z-index: 0;\n}\n[part~=header-container] [part~=header] {\n  pointer-events: all;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n}\n[part~=header-container] [part=indicator],\n[part~=header-container] [part=title],\n[part~=header-container] [part=subtitle] {\n  pointer-events: none;\n}\n[part~=header-container]::before {\n  min-width: var(--separator-min-width);\n  display: var(--hide-horizontal-separator, var(--horizontal-separator-display--first-of-type));\n}\n\n[part~=header] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: var(--align-items, flex-start);\n      -ms-flex-align: var(--align-items, flex-start);\n          align-items: var(--align-items, flex-start);\n  grid-row: var(--header-bottom, 1);\n  position: relative;\n  overflow: hidden;\n  padding: var(--header-padding);\n  -webkit-box-pack: start;\n      -ms-flex-pack: start;\n          justify-content: flex-start;\n  gap: var(--header-gap);\n  color: var(--header-color);\n  z-index: var(--vertical-header-z-index);\n}\n[part~=header]::before, [part~=header]::after {\n  content: \"\";\n  -webkit-box-flex: 1;\n      -ms-flex: 1;\n          flex: 1;\n  -webkit-border-before: var(--separator-size) var(--separator-type) var(--separator-color);\n          border-block-start: var(--separator-size) var(--separator-type) var(--separator-color);\n  height: var(--separator-size);\n  min-width: var(--separator-min-width--header);\n  width: calc(50% - var(--indicator-size) / 2 - var(--header-padding));\n  position: absolute;\n  z-index: -1;\n}\n[part~=header]::before {\n  inset-inline-start: 0;\n  display: var(--hide-horizontal-separator, var(--separator-disply-not-full, var(--horizontal-separator-display--first-of-type)));\n}\n[part~=header]::after {\n  inset-inline-end: 0;\n  display: var(--hide-horizontal-separator, var(--separator-disply-not-full, var(--horizontal-separator-display--last-of-type)));\n}\n[part~=header]:focus, [part~=header]:hover {\n  cursor: pointer;\n  outline: none;\n}\n[part~=header]:hover {\n  background: var(--header-background--hover);\n}\n[part~=header]:hover::before, [part~=header]:hover::after {\n  visibility: var(--header-separator-visibility--hover);\n}\n[part~=header]:focus, [part~=header]:focus-within, [part~=header]:active {\n  background: var(--header-background--focus);\n  -webkit-box-shadow: inset 0 0 0 0.0625rem var(--header-shadow);\n          box-shadow: inset 0 0 0 0.0625rem var(--header-shadow);\n}\n[part~=header]:focus::before, [part~=header]:focus::after, [part~=header]:focus-within::before, [part~=header]:focus-within::after, [part~=header]:active::before, [part~=header]:active::after {\n  visibility: var(--header-separator-visibility--hover);\n}\n\n[part~=body] {\n  display: var(--vertical-body-disply--last-of-type, var(--vertical-body-disply, none));\n  grid-row-start: var(--body-top, 2);\n  grid-column: span var(--steps-count);\n  -webkit-margin-start: calc(var(--body-indent--vertical) / 2);\n          margin-inline-start: calc(var(--body-indent--vertical) / 2);\n  -webkit-padding-start: var(--horizontal-body-padding, calc(var(--body-indent--vertical) / 2));\n          padding-inline-start: var(--horizontal-body-padding, calc(var(--body-indent--vertical) / 2));\n  -webkit-padding-end: var(--horizontal-body-padding, var(--vertical-body-padding));\n          padding-inline-end: var(--horizontal-body-padding, var(--vertical-body-padding));\n  -webkit-padding-before: var(--horizontal-body-padding, var(--vertical-body-padding));\n          padding-block-start: var(--horizontal-body-padding, var(--vertical-body-padding));\n  -webkit-padding-after: var(--horizontal-body-padding, var(--vertical-body-padding));\n          padding-block-end: var(--horizontal-body-padding, var(--vertical-body-padding));\n  z-index: 1;\n  position: relative;\n  color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n  overflow: auto;\n  width: 0;\n  min-width: 100%;\n}\n[part~=body]::before {\n  display: var(--hide-last-separator, var(--hide-first-separator, var(--vertical-separator-visibility)));\n  content: \"\";\n  position: absolute;\n  inset-inline-start: calc(var(--separator-size) / 2 * -1);\n  height: 100%;\n  inset-block-start: 0 !important;\n  -webkit-border-start: var(--separator-size) var(--separator-type) var(--separator-color);\n          border-inline-start: var(--separator-size) var(--separator-type) var(--separator-color);\n}\n\n[part=content] {\n  display: var(--horizontal-content-disply, none);\n  height: 100%;\n  overflow: auto;\n}\n\n[part~=top] {\n  -webkit-box-align: var(--step-not-full-header-aligmnet, flex-end);\n      -ms-flex-align: var(--step-not-full-header-aligmnet, flex-end);\n          align-items: var(--step-not-full-header-aligmnet, flex-end);\n}\n[part~=top]::before, [part~=top]::after {\n  inset-block-end: var(--step-separator-position);\n}\n[part~=top] [part~=header] {\n  -webkit-box-align: var(--align-items, flex-start);\n      -ms-flex-align: var(--align-items, flex-start);\n          align-items: var(--align-items, flex-start);\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: reverse;\n      -ms-flex-direction: column-reverse;\n          flex-direction: column-reverse;\n}\n[part~=top] [part~=header]::before, [part~=top] [part~=header]::after {\n  inset-block-end: var(--step-separator-position);\n}\n\n[part~=bottom] {\n  -webkit-box-align: var(--step-not-full-header-aligmnet, start);\n      -ms-flex-align: var(--step-not-full-header-aligmnet, start);\n          align-items: var(--step-not-full-header-aligmnet, start);\n}\n[part~=bottom]::before, [part~=bottom]::after {\n  inset-block-start: var(--step-separator-position);\n}\n[part~=bottom] [part~=header] {\n  -webkit-box-align: var(--align-items, flex-start);\n      -ms-flex-align: var(--align-items, flex-start);\n          align-items: var(--align-items, flex-start);\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: column;\n          flex-direction: column;\n}\n[part~=bottom] [part~=header]::before, [part~=bottom] [part~=header]::after {\n  inset-block-start: var(--step-separator-position);\n}\n\n[part~=top] [part~=text],\n[part~=bottom] [part~=text] {\n  width: 100%;\n}\n\n[part~=start] [part=text] {\n  -webkit-box-ordinal-group: 0;\n      -ms-flex-order: -1;\n          order: -1;\n}\n\n[part~=start],\n[part~=end] {\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n}\n[part~=start] [part~=text],\n[part~=end] [part~=text] {\n  overflow: hidden;\n}\n[part~=start] [part~=header]::before, [part~=start] [part~=header]::after,\n[part~=end] [part~=header]::before,\n[part~=end] [part~=header]::after {\n  display: none;\n}\n\n[part~=indicator] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  width: var(--indicator-size);\n  min-width: var(--indicator-size);\n  height: var(--indicator-size);\n  position: relative;\n}\n[part~=indicator] span {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  width: var(--indicator-size);\n  height: var(--indicator-size);\n  background: var(--indicator-background);\n  color: var(--indicator-color);\n  -webkit-box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var(--indicator-shadow);\n          box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var(--indicator-shadow);\n  font-family: var(--ig-caption-font-family, var(--ig-font-family));\n  font-size: var(--ig-caption-font-size);\n  font-weight: var(--ig-caption-font-weight);\n  font-style: var(--ig-caption-font-style);\n  line-height: var(--ig-caption-line-height);\n  letter-spacing: var(--ig-caption-letter-spacing);\n  text-transform: var(--ig-caption-text-transform);\n  margin-top: var(--ig-caption-margin-top);\n  margin-bottom: var(--ig-caption-margin-bottom);\n}\n\n[part~=text] {\n  text-align: var(--align-text, initial);\n  min-width: var(--indicator-size);\n}\n\n[part~=subtitle],\n[part~=title] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n[part~=title] {\n  font-family: var(--ig-body-2-font-family, var(--ig-font-family));\n  font-size: var(--ig-body-2-font-size);\n  font-weight: var(--ig-body-2-font-weight);\n  font-style: var(--ig-body-2-font-style);\n  line-height: var(--ig-body-2-line-height);\n  letter-spacing: var(--ig-body-2-letter-spacing);\n  text-transform: var(--ig-body-2-text-transform);\n  margin-top: var(--ig-body-2-margin-top);\n  margin-bottom: var(--ig-body-2-margin-bottom);\n  color: var(--title-color);\n}\n\n[part~=subtitle] {\n  font-family: var(--ig-caption-font-family, var(--ig-font-family));\n  font-size: var(--ig-caption-font-size);\n  font-weight: var(--ig-caption-font-weight);\n  font-style: var(--ig-caption-font-style);\n  line-height: var(--ig-caption-line-height);\n  letter-spacing: var(--ig-caption-letter-spacing);\n  text-transform: var(--ig-caption-text-transform);\n  margin-top: var(--ig-caption-margin-top);\n  margin-bottom: var(--ig-caption-margin-bottom);\n  color: var(--subtitle-color);\n}\n\n[part~=empty] {\n  display: none;\n}\n\n[part~=optional] [part~=indicator] span {\n  color: var(--optional-indicator-color);\n  background: var(--optional-indicator-background);\n  -webkit-box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var(--optional-indicator-shadow);\n          box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var(--optional-indicator-shadow);\n}\n\n[part~=complete-start]::after {\n  border-block-start-style: var(--separator-type--completed);\n  border-block-start-color: var(--separator-color--completed);\n}\n[part~=complete-start] [part~=header]::after {\n  border-block-start-style: var(--separator-type--completed);\n  border-block-start-color: var(--separator-color--completed);\n}\n[part~=complete-start] [part~=indicator] span {\n  background: var(--completed-indicator-background);\n  color: var(--completed-indicator-color);\n  -webkit-box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var(--completed-indicator-shadow);\n          box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var(--completed-indicator-shadow);\n}\n\n:host([complete]) [part~=body]::before {\n  border-inline-start-style: var(--separator-type--completed);\n  border-inline-start-color: var(--separator-color--completed);\n}\n\n[part~=complete-end]::before {\n  border-block-start-style: var(--separator-type--completed);\n  border-block-start-color: var(--separator-color--completed);\n}\n[part~=complete-end] [part~=header]::before {\n  border-block-start-style: var(--separator-type--completed);\n  border-block-start-color: var(--separator-color--completed);\n}\n\n[part~=invalid] [part~=indicator] span {\n  color: var(--error-color);\n  background: var(--error-background);\n  -webkit-box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var(--error-shadow);\n          box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var(--error-shadow);\n}\n[part~=invalid] [part~=title],\n[part~=invalid] [part~=subtitle] {\n  color: var(--error-background);\n}\n\n:host([active]) [part~=body] {\n  display: var(--vertical-body-disply, block);\n}\n:host([active]) [part~=\"body bottom\"]::before {\n  inset-block-start: 0;\n}\n:host([active]) [part=content] {\n  display: var(--horizontal-content-disply, block);\n  pointer-events: all;\n}\n:host([active]) [part~=indicator] span {\n  background: var(--active-indicator-background);\n  color: var(--active-indicator-color);\n  -webkit-box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var(--active-indicator-shadow);\n          box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var(--active-indicator-shadow);\n}\n:host([active]) [part~=title] {\n  color: var(--active-title-color);\n  font-weight: 600;\n}\n:host([active]) [part~=subtitle] {\n  color: var(--active-subtitle-color);\n}\n\n[part~=disabled] [part=header] {\n  background: hsla(var(--ig-gray-50), 0);\n}\n[part~=disabled]:focus [part=header], [part~=disabled]:focus-visible [part=header], [part~=disabled]:focus-within [part=header], [part~=disabled]:active [part=header], [part~=disabled]:hover [part=header] {\n  background: hsla(var(--ig-gray-50), 0);\n  cursor: default;\n  -webkit-box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-gray-50), 0);\n          box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-gray-50), 0);\n}\n[part~=disabled] [part~=indicator] span {\n  color: var(--disabled-color);\n  background: var(--disabled-background);\n  -webkit-box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var(--disabled-shadow);\n          box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var(--disabled-shadow);\n}\n[part~=disabled] [part~=title],\n[part~=disabled] [part~=subtitle] {\n  color: var(--disabled-color);\n}`;\n"]}
+{"version":3,"file":"step.base.css.js","sourceRoot":"","sources":["../../../../../../src/components/stepper/themes/step/light/step.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuUvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n  --is-medium: min(\n      clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n      clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n  );\n  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--ig-scrollbar-size);\n  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n  width: var(--ig-scrollbar-size);\n  height: var(--ig-scrollbar-size);\n  background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--ig-scrollbar-thumb-background);\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n:host {\n  -webkit-box-align: start;\n      -ms-flex-align: start;\n          align-items: flex-start;\n}\n\n[part~=header-container],\n[part~=header] {\n  width: var(--header-width-vertical, auto);\n}\n[part~=header-container]::before,\n[part~=header]::before {\n  content: \"\";\n  width: auto;\n  -webkit-box-flex: 1;\n      -ms-flex: 1;\n          flex: 1;\n  border-block-start-width: var(--separator-size);\n  height: var(--separator-size);\n  position: relative;\n}\n\n[part~=header-container] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  pointer-events: none;\n  position: relative;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  z-index: 0;\n}\n[part~=header-container] [part~=header] {\n  pointer-events: all;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n}\n[part~=header-container] [part=indicator],\n[part~=header-container] [part=title],\n[part~=header-container] [part=subtitle] {\n  pointer-events: none;\n}\n[part~=header-container]::before {\n  min-width: var(--separator-min-width);\n  display: var(--hide-horizontal-separator, var(--horizontal-separator-display--first-of-type));\n}\n\n[part~=header] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: var(--align-items, flex-start);\n      -ms-flex-align: var(--align-items, flex-start);\n          align-items: var(--align-items, flex-start);\n  grid-row: var(--header-bottom, 1);\n  position: relative;\n  overflow: hidden;\n  padding: var(--header-padding);\n  -webkit-box-pack: start;\n      -ms-flex-pack: start;\n          justify-content: flex-start;\n  gap: var(--header-gap);\n  z-index: var(--vertical-header-z-index);\n}\n[part~=header]::before, [part~=header]::after {\n  content: \"\";\n  -webkit-box-flex: 1;\n      -ms-flex: 1;\n          flex: 1;\n  border-block-start-width: var(--separator-size);\n  height: var(--separator-size);\n  min-width: var(--separator-min-width--header);\n  width: calc(50% - var(--indicator-size) / 2 - var(--header-padding));\n  position: absolute;\n  z-index: -1;\n}\n[part~=header]::before {\n  inset-inline-start: 0;\n  display: var(--hide-horizontal-separator, var(--separator-disply-not-full, var(--horizontal-separator-display--first-of-type)));\n}\n[part~=header]::after {\n  inset-inline-end: 0;\n  display: var(--hide-horizontal-separator, var(--separator-disply-not-full, var(--horizontal-separator-display--last-of-type)));\n}\n[part~=header]:focus, [part~=header]:hover {\n  cursor: pointer;\n  outline: none;\n}\n[part~=header]:hover::before, [part~=header]:hover::after {\n  visibility: var(--header-separator-visibility--hover);\n}\n[part~=header]:focus::before, [part~=header]:focus::after, [part~=header]:focus-within::before, [part~=header]:focus-within::after, [part~=header]:active::before, [part~=header]:active::after {\n  visibility: var(--header-separator-visibility--hover);\n}\n\n[part~=body] {\n  display: block;\n  opacity: 0;\n  grid-row-start: var(--body-top, 2);\n  grid-column: 1/span var(--steps-count);\n  -webkit-padding-start: calc(var(--body-indent--vertical) / 2);\n          padding-inline-start: calc(var(--body-indent--vertical) / 2);\n  z-index: 1;\n  position: relative;\n  overflow: hidden;\n  width: 0;\n  height: var(--vertical-body-height, auto);\n  min-width: 100%;\n}\n[part~=body]::before {\n  display: var(--hide-last-separator, var(--hide-first-separator, var(--vertical-separator-visibility)));\n  content: \"\";\n  position: absolute;\n  inset-inline-start: calc(var(--body-indent--vertical) / 2 - var(--separator-size) / 2);\n  height: 100%;\n  inset-block-start: 0 !important;\n  border-inline-start-style: var(--separator-type);\n  border-inline-start-width: var(--separator-size);\n}\n\n[part=content] {\n  display: block;\n  height: auto;\n  overflow: auto;\n}\n[part=content] > slot {\n  display: block;\n  -webkit-padding-start: var(--horizontal-body-padding, calc(var(--body-indent--vertical) / 2));\n          padding-inline-start: var(--horizontal-body-padding, calc(var(--body-indent--vertical) / 2));\n  -webkit-padding-end: var(--horizontal-body-padding, var(--vertical-body-padding));\n          padding-inline-end: var(--horizontal-body-padding, var(--vertical-body-padding));\n  -webkit-padding-before: var(--horizontal-body-padding, var(--vertical-body-padding));\n          padding-block-start: var(--horizontal-body-padding, var(--vertical-body-padding));\n  -webkit-padding-after: var(--horizontal-body-padding, var(--vertical-body-padding));\n          padding-block-end: var(--horizontal-body-padding, var(--vertical-body-padding));\n}\n\n[part~=top] {\n  -webkit-box-align: var(--step-not-full-header-aligmnet, flex-end);\n      -ms-flex-align: var(--step-not-full-header-aligmnet, flex-end);\n          align-items: var(--step-not-full-header-aligmnet, flex-end);\n}\n[part~=top]::before, [part~=top]::after {\n  inset-block-end: var(--step-separator-position);\n}\n[part~=top] [part~=header] {\n  -webkit-box-align: var(--align-items, flex-start);\n      -ms-flex-align: var(--align-items, flex-start);\n          align-items: var(--align-items, flex-start);\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: reverse;\n      -ms-flex-direction: column-reverse;\n          flex-direction: column-reverse;\n}\n[part~=top] [part~=header]::before, [part~=top] [part~=header]::after {\n  inset-block-end: var(--step-separator-position);\n}\n\n[part~=bottom] {\n  -webkit-box-align: var(--step-not-full-header-aligmnet, start);\n      -ms-flex-align: var(--step-not-full-header-aligmnet, start);\n          align-items: var(--step-not-full-header-aligmnet, start);\n}\n[part~=bottom]::before, [part~=bottom]::after {\n  inset-block-start: var(--step-separator-position);\n}\n[part~=bottom] [part~=header] {\n  -webkit-box-align: var(--align-items, flex-start);\n      -ms-flex-align: var(--align-items, flex-start);\n          align-items: var(--align-items, flex-start);\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: column;\n          flex-direction: column;\n}\n[part~=bottom] [part~=header]::before, [part~=bottom] [part~=header]::after {\n  inset-block-start: var(--step-separator-position);\n}\n\n[part~=top] [part~=text],\n[part~=bottom] [part~=text] {\n  width: 100%;\n}\n\n[part~=start] [part=text] {\n  -webkit-box-ordinal-group: 0;\n      -ms-flex-order: -1;\n          order: -1;\n}\n\n[part~=start],\n[part~=end] {\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n}\n[part~=start] [part~=text],\n[part~=end] [part~=text] {\n  overflow: hidden;\n}\n[part~=start] [part~=header]::before, [part~=start] [part~=header]::after,\n[part~=end] [part~=header]::before,\n[part~=end] [part~=header]::after {\n  display: none;\n}\n\n[part~=indicator] {\n  font-family: var(--ig-caption-font-family, var(--ig-font-family));\n  font-size: var(--ig-caption-font-size);\n  font-weight: var(--ig-caption-font-weight);\n  font-style: var(--ig-caption-font-style);\n  line-height: var(--ig-caption-line-height);\n  letter-spacing: var(--ig-caption-letter-spacing);\n  text-transform: var(--ig-caption-text-transform);\n  margin-top: var(--ig-caption-margin-top);\n  margin-bottom: var(--ig-caption-margin-bottom);\n  width: var(--indicator-size);\n  min-width: var(--indicator-size);\n  height: var(--indicator-size);\n  position: relative;\n}\n\n[part~=indicator],\n::slotted([slot=indicator]) {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n}\n\n::slotted([slot=indicator]) {\n  --diameter: calc(var(--indicator-size) - 0.125rem);\n  --ig-icon-size: 1.125rem ;\n}\n\n[part~=text] {\n  text-align: var(--align-text, initial);\n  min-width: var(--indicator-size);\n}\n\n[part~=subtitle],\n[part~=title] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n[part~=title] {\n  font-family: var(--ig-body-2-font-family, var(--ig-font-family));\n  font-size: var(--ig-body-2-font-size);\n  font-weight: var(--ig-body-2-font-weight);\n  font-style: var(--ig-body-2-font-style);\n  line-height: var(--ig-body-2-line-height);\n  letter-spacing: var(--ig-body-2-letter-spacing);\n  text-transform: var(--ig-body-2-text-transform);\n  margin-top: var(--ig-body-2-margin-top);\n  margin-bottom: var(--ig-body-2-margin-bottom);\n}\n\n[part~=subtitle] {\n  font-family: var(--ig-caption-font-family, var(--ig-font-family));\n  font-size: var(--ig-caption-font-size);\n  font-weight: var(--ig-caption-font-weight);\n  font-style: var(--ig-caption-font-style);\n  line-height: var(--ig-caption-line-height);\n  letter-spacing: var(--ig-caption-letter-spacing);\n  text-transform: var(--ig-caption-text-transform);\n  margin-top: var(--ig-caption-margin-top);\n  margin-bottom: var(--ig-caption-margin-bottom);\n}\n\n[part~=empty] {\n  display: none;\n}\n\n:host([active]) [part~=body] {\n  height: 100%;\n  opacity: 1;\n}\n:host([active]) [part~=\"body bottom\"]::before {\n  inset-block-start: 0;\n}\n:host([active]) [part=content] {\n  pointer-events: all;\n}\n\n[part~=disabled] [part=header] {\n  cursor: default;\n}`;\n"]}

package/components/stepper/themes/step/light/step.bootstrap.css.js

@@ -59,31 +59,128 @@ export const styles = css `:host {
   --complete-step-separator-style: var(--ig-stepper-complete-step-separator-style, solid);
   --border-radius-indicator: var(--ig-stepper-border-radius-indicator, clamp(0rem, calc(var(--ig-radius-factor, 0.02) * 6.25rem), 6.25rem));
   --border-radius-step-header: var(--ig-stepper-border-radius-step-header, clamp(0rem, calc(var(--ig-radius-factor, 0.02) * 6.25rem), 6.25rem));
-  --separator-color: hsla(var(--ig-gray-300), var(--ig-gray-a));
-  --separator-color--completed: hsla(var(--ig-primary-500), var(--ig-primary-a));
-  --header-background--hover: hsla(var(--ig-gray-300), 0.5);
-  --header-background--focus: var(--header-background--hover);
-  --header-shadow: hsla(var(--ig-gray-300), var(--ig-gray-a));
-  --indicator-color: hsla(var(--ig-primary-500), var(--ig-primary-a));
-  --indicator-background: hsla(var(--ig-gray-50), 0);
-  --indicator-shadow: hsla(var(--ig-gray-400), var(--ig-gray-a));
-  --optional-indicator-color: var(--indicator-color);
-  --optional-indicator-background: var(--indicator-background);
-  --optional-indicator-shadow: var(--indicator-shadow);
-  --completed-indicator-color: var(--ig-gray-50-contrast);
-  --completed-indicator-background: hsla(var(--ig-gray-400), var(--ig-gray-a));
-  --completed-indicator-shadow: hsla(var(--ig-gray-400), var(--ig-gray-a));
-  --active-title-color: hsla(var(--ig-primary-500), var(--ig-primary-a));
-  --active-subtitle-color: var(--active-title-color);
-  --disabled-background: hsla(var(--ig-gray-50), 0);
-  --disabled-shadow: hsla(var(--ig-gray-300), var(--ig-gray-a));
+}
+
+[part~=title] {
+  color: var(--title-color);
+}
+
+[part~=subtitle] {
+  color: var(--subtitle-color);
 }
 
 [part~=header] {
+  background: var(--step-background);
   border-radius: var(--border-radius-step-header);
 }
+[part~=header]::before, [part~=header]::after {
+  border-block-start-style: var(--step-separator-style);
+  border-block-start-color: var(--step-separator-color);
+}
+[part~=header]:hover {
+  background: var(--step-hover-background);
+  color: var(--title-hover-color);
+}
+[part~=header]:focus, [part~=header]:focus-within, [part~=header]:active {
+  background: var(--step-focus-background);
+  color: var(--title-focus-color);
+  -webkit-box-shadow: inset 0 0 0 0.0625rem var(--indicator-outline);
+          box-shadow: inset 0 0 0 0.0625rem var(--indicator-outline);
+}
+
+[part~=header-container]::before,
+[part~=header]::before {
+  border-block-start-color: var(--step-separator-color);
+  border-block-start-style: var(--step-separator-style);
+}
 
-[part~=indicator] span {
+[part~=body]::before {
+  border-inline-start-color: var(--step-separator-color);
+}
+
+[part~=indicator] {
   border-radius: var(--border-radius-indicator);
+  background: var(--indicator-background);
+  color: var(--indicator-color);
+  -webkit-box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var(--indicator-outline);
+          box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var(--indicator-outline);
+}
+
+[part~=complete-start]::after {
+  border-block-start-style: var(--complete-step-separator-style);
+  border-block-start-color: var(--complete-step-separator-color);
+}
+[part~=complete-start] [part~=header]::after {
+  border-block-start-style: var(--complete-step-separator-style);
+  border-block-start-color: var(--complete-step-separator-color);
+}
+[part~=complete-start] [part~=indicator] {
+  background: var(--complete-indicator-background);
+  color: var(--complete-indicator-color);
+  -webkit-box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var(--complete-indicator-outline);
+          box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var(--complete-indicator-outline);
+}
+[part~=complete-start] [part~=title] {
+  color: var(--complete-title-color);
+}
+[part~=complete-start] [part~=subtitle] {
+  color: var(--complete-subtitle-color);
+}
+
+:host([complete]) [part~=body]::before {
+  border-inline-start-style: var(--complete-step-separator-style);
+  border-inline-start-color: var(--complete-step-separator-color);
+}
+
+[part~=complete-end]::before {
+  border-block-start-style: var(--complete-step-separator-style);
+  border-block-start-color: var(--complete-step-separator-color);
+}
+[part~=complete-end] [part~=header]::before {
+  border-block-start-style: var(--complete-step-separator-style);
+  border-block-start-color: var(--complete-step-separator-color);
+}
+
+[part~=invalid] [part~=indicator] {
+  color: var(--invalid-indicator-color);
+  background: var(--invalid-indicator-background);
+  -webkit-box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var(--invalid-indicator-outline);
+          box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var(--invalid-indicator-outline);
+}
+[part~=invalid] [part~=title],
+[part~=invalid] [part~=subtitle] {
+  color: var(--invalid-title-color);
+}
+
+:host([active]) [part~=indicator] {
+  background: var(--current-indicator-background);
+  color: var(--current-indicator-color);
+  -webkit-box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var(--current-indicator-outline);
+          box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var(--current-indicator-outline);
+}
+:host([active]) [part~=title] {
+  color: var(--current-title-color);
+  font-weight: 600;
+}
+:host([active]) [part~=subtitle] {
+  color: var(--current-subtitle-color);
+}
+
+[part~=disabled]:focus [part=header], [part~=disabled]:focus-visible [part=header], [part~=disabled]:focus-within [part=header], [part~=disabled]:active [part=header], [part~=disabled]:hover [part=header] {
+  background: var(--step-background);
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+[part~=disabled] [part~=indicator] {
+  color: var(--disabled-indicator-color);
+  background: var(--disabled-indicator-background);
+  -webkit-box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var(--disabled-indicator-outline);
+          box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var(--disabled-indicator-outline);
+}
+[part~=disabled] [part~=title] {
+  color: var(--disabled-title-color);
+}
+[part~=disabled] [part~=subtitle] {
+  color: var(--disabled-subtitle-color);
 }`;
 //# sourceMappingURL=step.bootstrap.css.js.map

package/components/stepper/themes/step/light/step.bootstrap.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"step.bootstrap.css.js","sourceRoot":"","sources":["../../../../../../src/components/stepper/themes/step/light/step.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsFvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --step-background: var(--ig-stepper-step-background, transparent);\n  --step-hover-background: var(--ig-stepper-step-hover-background, hsla(var(--ig-gray-300), 0.5));\n  --step-focus-background: var(--ig-stepper-step-focus-background, hsla(var(--ig-gray-300), 0.5));\n  --indicator-background: var(--ig-stepper-indicator-background, transparent);\n  --indicator-outline: var(--ig-stepper-indicator-outline, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --indicator-color: var(--ig-stepper-indicator-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --title-color: var(--ig-stepper-title-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --title-hover-color: var(--ig-stepper-title-hover-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --title-focus-color: var(--ig-stepper-title-focus-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --subtitle-color: var(--ig-stepper-subtitle-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --subtitle-hover-color: var(--ig-stepper-subtitle-hover-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --subtitle-focus-color: var(--ig-stepper-subtitle-focus-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --complete-step-background: var(--ig-stepper-complete-step-background, transparent);\n  --complete-step-hover-background: var(--ig-stepper-complete-step-hover-background, hsla(var(--ig-gray-300), 0.5));\n  --complete-step-focus-background: var(--ig-stepper-complete-step-focus-background, hsla(var(--ig-gray-300), 0.5));\n  --complete-indicator-background: var(--ig-stepper-complete-indicator-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --complete-indicator-outline: var(--ig-stepper-complete-indicator-outline, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --complete-indicator-color: var(--ig-stepper-complete-indicator-color, var(--ig-gray-300-contrast));\n  --complete-title-color: var(--ig-stepper-complete-title-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --complete-title-hover-color: var(--ig-stepper-complete-title-hover-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --complete-title-focus-color: var(--ig-stepper-complete-title-focus-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --complete-subtitle-color: var(--ig-stepper-complete-subtitle-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --complete-subtitle-hover-color: var(--ig-stepper-complete-subtitle-hover-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --complete-subtitle-focus-color: var(--ig-stepper-complete-subtitle-focus-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --current-step-background: var(--ig-stepper-current-step-background, transparent);\n  --current-step-hover-background: var(--ig-stepper-current-step-hover-background, hsla(var(--ig-gray-300), 0.5));\n  --current-step-focus-background: var(--ig-stepper-current-step-focus-background, hsla(var(--ig-gray-300), 0.5));\n  --current-indicator-background: var(--ig-stepper-current-indicator-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --current-indicator-outline: var(--ig-stepper-current-indicator-outline, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --current-indicator-color: var(--ig-stepper-current-indicator-color, var(--ig-gray-900-contrast));\n  --current-title-color: var(--ig-stepper-current-title-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --current-title-hover-color: var(--ig-stepper-current-title-hover-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --current-title-focus-color: var(--ig-stepper-current-title-focus-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --current-subtitle-color: var(--ig-stepper-current-subtitle-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --current-subtitle-hover-color: var(--ig-stepper-current-subtitle-hover-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --current-subtitle-focus-color: var(--ig-stepper-current-subtitle-focus-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --invalid-step-background: var(--ig-stepper-invalid-step-background, transparent);\n  --invalid-step-hover-background: var(--ig-stepper-invalid-step-hover-background, hsla(var(--ig-gray-300), 0.5));\n  --invalid-step-focus-background: var(--ig-stepper-invalid-step-focus-background, hsla(var(--ig-gray-300), 0.5));\n  --invalid-indicator-background: var(--ig-stepper-invalid-indicator-background, hsla(var(--ig-error-500), var(--ig-error-a)));\n  --invalid-indicator-outline: var(--ig-stepper-invalid-indicator-outline, hsla(var(--ig-error-500), var(--ig-error-a)));\n  --invalid-indicator-color: var(--ig-stepper-invalid-indicator-color, var(--ig-gray-900-contrast));\n  --invalid-title-color: var(--ig-stepper-invalid-title-color, hsla(var(--ig-error-500), var(--ig-error-a)));\n  --invalid-title-hover-color: var(--ig-stepper-invalid-title-hover-color, hsla(var(--ig-error-500), var(--ig-error-a)));\n  --invalid-title-focus-color: var(--ig-stepper-invalid-title-focus-color, hsla(var(--ig-error-500), var(--ig-error-a)));\n  --invalid-subtitle-color: var(--ig-stepper-invalid-subtitle-color, hsla(var(--ig-error-500), var(--ig-error-a)));\n  --invalid-subtitle-hover-color: var(--ig-stepper-invalid-subtitle-hover-color, hsla(var(--ig-error-500), var(--ig-error-a)));\n  --invalid-subtitle-focus-color: var(--ig-stepper-invalid-subtitle-focus-color, hsla(var(--ig-error-500), var(--ig-error-a)));\n  --disabled-indicator-color: var(--ig-stepper-disabled-indicator-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --disabled-indicator-background: var(--ig-stepper-disabled-indicator-background, transparent);\n  --disabled-indicator-outline: var(--ig-stepper-disabled-indicator-outline, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --disabled-title-color: var(--ig-stepper-disabled-title-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --disabled-subtitle-color: var(--ig-stepper-disabled-subtitle-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --step-separator-color: var(--ig-stepper-step-separator-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --complete-step-separator-color: var(--ig-stepper-complete-step-separator-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --step-separator-style: var(--ig-stepper-step-separator-style, solid);\n  --complete-step-separator-style: var(--ig-stepper-complete-step-separator-style, solid);\n  --border-radius-indicator: var(--ig-stepper-border-radius-indicator, clamp(0rem, calc(var(--ig-radius-factor, 0.02) * 6.25rem), 6.25rem));\n  --border-radius-step-header: var(--ig-stepper-border-radius-step-header, clamp(0rem, calc(var(--ig-radius-factor, 0.02) * 6.25rem), 6.25rem));\n  --separator-color: hsla(var(--ig-gray-300), var(--ig-gray-a));\n  --separator-color--completed: hsla(var(--ig-primary-500), var(--ig-primary-a));\n  --header-background--hover: hsla(var(--ig-gray-300), 0.5);\n  --header-background--focus: var(--header-background--hover);\n  --header-shadow: hsla(var(--ig-gray-300), var(--ig-gray-a));\n  --indicator-color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n  --indicator-background: hsla(var(--ig-gray-50), 0);\n  --indicator-shadow: hsla(var(--ig-gray-400), var(--ig-gray-a));\n  --optional-indicator-color: var(--indicator-color);\n  --optional-indicator-background: var(--indicator-background);\n  --optional-indicator-shadow: var(--indicator-shadow);\n  --completed-indicator-color: var(--ig-gray-50-contrast);\n  --completed-indicator-background: hsla(var(--ig-gray-400), var(--ig-gray-a));\n  --completed-indicator-shadow: hsla(var(--ig-gray-400), var(--ig-gray-a));\n  --active-title-color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n  --active-subtitle-color: var(--active-title-color);\n  --disabled-background: hsla(var(--ig-gray-50), 0);\n  --disabled-shadow: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n\n[part~=header] {\n  border-radius: var(--border-radius-step-header);\n}\n\n[part~=indicator] span {\n  border-radius: var(--border-radius-indicator);\n}`;\n"]}
+{"version":3,"file":"step.bootstrap.css.js","sourceRoot":"","sources":["../../../../../../src/components/stepper/themes/step/light/step.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuLvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --step-background: var(--ig-stepper-step-background, transparent);\n  --step-hover-background: var(--ig-stepper-step-hover-background, hsla(var(--ig-gray-300), 0.5));\n  --step-focus-background: var(--ig-stepper-step-focus-background, hsla(var(--ig-gray-300), 0.5));\n  --indicator-background: var(--ig-stepper-indicator-background, transparent);\n  --indicator-outline: var(--ig-stepper-indicator-outline, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --indicator-color: var(--ig-stepper-indicator-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --title-color: var(--ig-stepper-title-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --title-hover-color: var(--ig-stepper-title-hover-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --title-focus-color: var(--ig-stepper-title-focus-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --subtitle-color: var(--ig-stepper-subtitle-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --subtitle-hover-color: var(--ig-stepper-subtitle-hover-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --subtitle-focus-color: var(--ig-stepper-subtitle-focus-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --complete-step-background: var(--ig-stepper-complete-step-background, transparent);\n  --complete-step-hover-background: var(--ig-stepper-complete-step-hover-background, hsla(var(--ig-gray-300), 0.5));\n  --complete-step-focus-background: var(--ig-stepper-complete-step-focus-background, hsla(var(--ig-gray-300), 0.5));\n  --complete-indicator-background: var(--ig-stepper-complete-indicator-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --complete-indicator-outline: var(--ig-stepper-complete-indicator-outline, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --complete-indicator-color: var(--ig-stepper-complete-indicator-color, var(--ig-gray-300-contrast));\n  --complete-title-color: var(--ig-stepper-complete-title-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --complete-title-hover-color: var(--ig-stepper-complete-title-hover-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --complete-title-focus-color: var(--ig-stepper-complete-title-focus-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --complete-subtitle-color: var(--ig-stepper-complete-subtitle-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --complete-subtitle-hover-color: var(--ig-stepper-complete-subtitle-hover-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --complete-subtitle-focus-color: var(--ig-stepper-complete-subtitle-focus-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --current-step-background: var(--ig-stepper-current-step-background, transparent);\n  --current-step-hover-background: var(--ig-stepper-current-step-hover-background, hsla(var(--ig-gray-300), 0.5));\n  --current-step-focus-background: var(--ig-stepper-current-step-focus-background, hsla(var(--ig-gray-300), 0.5));\n  --current-indicator-background: var(--ig-stepper-current-indicator-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --current-indicator-outline: var(--ig-stepper-current-indicator-outline, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --current-indicator-color: var(--ig-stepper-current-indicator-color, var(--ig-gray-900-contrast));\n  --current-title-color: var(--ig-stepper-current-title-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --current-title-hover-color: var(--ig-stepper-current-title-hover-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --current-title-focus-color: var(--ig-stepper-current-title-focus-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --current-subtitle-color: var(--ig-stepper-current-subtitle-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --current-subtitle-hover-color: var(--ig-stepper-current-subtitle-hover-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --current-subtitle-focus-color: var(--ig-stepper-current-subtitle-focus-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --invalid-step-background: var(--ig-stepper-invalid-step-background, transparent);\n  --invalid-step-hover-background: var(--ig-stepper-invalid-step-hover-background, hsla(var(--ig-gray-300), 0.5));\n  --invalid-step-focus-background: var(--ig-stepper-invalid-step-focus-background, hsla(var(--ig-gray-300), 0.5));\n  --invalid-indicator-background: var(--ig-stepper-invalid-indicator-background, hsla(var(--ig-error-500), var(--ig-error-a)));\n  --invalid-indicator-outline: var(--ig-stepper-invalid-indicator-outline, hsla(var(--ig-error-500), var(--ig-error-a)));\n  --invalid-indicator-color: var(--ig-stepper-invalid-indicator-color, var(--ig-gray-900-contrast));\n  --invalid-title-color: var(--ig-stepper-invalid-title-color, hsla(var(--ig-error-500), var(--ig-error-a)));\n  --invalid-title-hover-color: var(--ig-stepper-invalid-title-hover-color, hsla(var(--ig-error-500), var(--ig-error-a)));\n  --invalid-title-focus-color: var(--ig-stepper-invalid-title-focus-color, hsla(var(--ig-error-500), var(--ig-error-a)));\n  --invalid-subtitle-color: var(--ig-stepper-invalid-subtitle-color, hsla(var(--ig-error-500), var(--ig-error-a)));\n  --invalid-subtitle-hover-color: var(--ig-stepper-invalid-subtitle-hover-color, hsla(var(--ig-error-500), var(--ig-error-a)));\n  --invalid-subtitle-focus-color: var(--ig-stepper-invalid-subtitle-focus-color, hsla(var(--ig-error-500), var(--ig-error-a)));\n  --disabled-indicator-color: var(--ig-stepper-disabled-indicator-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --disabled-indicator-background: var(--ig-stepper-disabled-indicator-background, transparent);\n  --disabled-indicator-outline: var(--ig-stepper-disabled-indicator-outline, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --disabled-title-color: var(--ig-stepper-disabled-title-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --disabled-subtitle-color: var(--ig-stepper-disabled-subtitle-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --step-separator-color: var(--ig-stepper-step-separator-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --complete-step-separator-color: var(--ig-stepper-complete-step-separator-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --step-separator-style: var(--ig-stepper-step-separator-style, solid);\n  --complete-step-separator-style: var(--ig-stepper-complete-step-separator-style, solid);\n  --border-radius-indicator: var(--ig-stepper-border-radius-indicator, clamp(0rem, calc(var(--ig-radius-factor, 0.02) * 6.25rem), 6.25rem));\n  --border-radius-step-header: var(--ig-stepper-border-radius-step-header, clamp(0rem, calc(var(--ig-radius-factor, 0.02) * 6.25rem), 6.25rem));\n}\n\n[part~=title] {\n  color: var(--title-color);\n}\n\n[part~=subtitle] {\n  color: var(--subtitle-color);\n}\n\n[part~=header] {\n  background: var(--step-background);\n  border-radius: var(--border-radius-step-header);\n}\n[part~=header]::before, [part~=header]::after {\n  border-block-start-style: var(--step-separator-style);\n  border-block-start-color: var(--step-separator-color);\n}\n[part~=header]:hover {\n  background: var(--step-hover-background);\n  color: var(--title-hover-color);\n}\n[part~=header]:focus, [part~=header]:focus-within, [part~=header]:active {\n  background: var(--step-focus-background);\n  color: var(--title-focus-color);\n  -webkit-box-shadow: inset 0 0 0 0.0625rem var(--indicator-outline);\n          box-shadow: inset 0 0 0 0.0625rem var(--indicator-outline);\n}\n\n[part~=header-container]::before,\n[part~=header]::before {\n  border-block-start-color: var(--step-separator-color);\n  border-block-start-style: var(--step-separator-style);\n}\n\n[part~=body]::before {\n  border-inline-start-color: var(--step-separator-color);\n}\n\n[part~=indicator] {\n  border-radius: var(--border-radius-indicator);\n  background: var(--indicator-background);\n  color: var(--indicator-color);\n  -webkit-box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var(--indicator-outline);\n          box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var(--indicator-outline);\n}\n\n[part~=complete-start]::after {\n  border-block-start-style: var(--complete-step-separator-style);\n  border-block-start-color: var(--complete-step-separator-color);\n}\n[part~=complete-start] [part~=header]::after {\n  border-block-start-style: var(--complete-step-separator-style);\n  border-block-start-color: var(--complete-step-separator-color);\n}\n[part~=complete-start] [part~=indicator] {\n  background: var(--complete-indicator-background);\n  color: var(--complete-indicator-color);\n  -webkit-box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var(--complete-indicator-outline);\n          box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var(--complete-indicator-outline);\n}\n[part~=complete-start] [part~=title] {\n  color: var(--complete-title-color);\n}\n[part~=complete-start] [part~=subtitle] {\n  color: var(--complete-subtitle-color);\n}\n\n:host([complete]) [part~=body]::before {\n  border-inline-start-style: var(--complete-step-separator-style);\n  border-inline-start-color: var(--complete-step-separator-color);\n}\n\n[part~=complete-end]::before {\n  border-block-start-style: var(--complete-step-separator-style);\n  border-block-start-color: var(--complete-step-separator-color);\n}\n[part~=complete-end] [part~=header]::before {\n  border-block-start-style: var(--complete-step-separator-style);\n  border-block-start-color: var(--complete-step-separator-color);\n}\n\n[part~=invalid] [part~=indicator] {\n  color: var(--invalid-indicator-color);\n  background: var(--invalid-indicator-background);\n  -webkit-box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var(--invalid-indicator-outline);\n          box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var(--invalid-indicator-outline);\n}\n[part~=invalid] [part~=title],\n[part~=invalid] [part~=subtitle] {\n  color: var(--invalid-title-color);\n}\n\n:host([active]) [part~=indicator] {\n  background: var(--current-indicator-background);\n  color: var(--current-indicator-color);\n  -webkit-box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var(--current-indicator-outline);\n          box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var(--current-indicator-outline);\n}\n:host([active]) [part~=title] {\n  color: var(--current-title-color);\n  font-weight: 600;\n}\n:host([active]) [part~=subtitle] {\n  color: var(--current-subtitle-color);\n}\n\n[part~=disabled]:focus [part=header], [part~=disabled]:focus-visible [part=header], [part~=disabled]:focus-within [part=header], [part~=disabled]:active [part=header], [part~=disabled]:hover [part=header] {\n  background: var(--step-background);\n  -webkit-box-shadow: none;\n          box-shadow: none;\n}\n[part~=disabled] [part~=indicator] {\n  color: var(--disabled-indicator-color);\n  background: var(--disabled-indicator-background);\n  -webkit-box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var(--disabled-indicator-outline);\n          box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var(--disabled-indicator-outline);\n}\n[part~=disabled] [part~=title] {\n  color: var(--disabled-title-color);\n}\n[part~=disabled] [part~=subtitle] {\n  color: var(--disabled-subtitle-color);\n}`;\n"]}