igniteui-webcomponents 4.3.0 → 4.3.1

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAucvB,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[hidden] {\n  display: none !important;\n}\n\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\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  /* stylelint-disable */\n  display: var(--hide-horizontal-separator, var(--separator-disply-not-full, var(--horizontal-separator-display--first-of-type)));\n  /* stylelint-enable */\n}\n[part~=header]::after {\n  inset-inline-end: 0;\n  /* stylelint-disable */\n  display: var(--hide-horizontal-separator, var(--separator-disply-not-full, var(--horizontal-separator-display--last-of-type)));\n  /* stylelint-enable */\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  border-radius: var(--indicator-roundness);\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  -o-text-overflow: ellipsis;\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"]}

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

@@ -1,6 +1,64 @@
 import { css } from 'lit';
-export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
-:host {
+export const styles = css `:host {
+  --step-background: var(--ig-stepper-step-background, transparent);
+  --step-hover-background: var(--ig-stepper-step-hover-background, hsla(var(--ig-gray-300), 0.5));
+  --step-focus-background: var(--ig-stepper-step-focus-background, hsla(var(--ig-gray-300), 0.5));
+  --indicator-background: var(--ig-stepper-indicator-background, transparent);
+  --indicator-outline: var(--ig-stepper-indicator-outline, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --indicator-color: var(--ig-stepper-indicator-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --title-color: var(--ig-stepper-title-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --title-hover-color: var(--ig-stepper-title-hover-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --title-focus-color: var(--ig-stepper-title-focus-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --subtitle-color: var(--ig-stepper-subtitle-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --subtitle-hover-color: var(--ig-stepper-subtitle-hover-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --subtitle-focus-color: var(--ig-stepper-subtitle-focus-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --complete-step-background: var(--ig-stepper-complete-step-background, transparent);
+  --complete-step-hover-background: var(--ig-stepper-complete-step-hover-background, hsla(var(--ig-gray-300), 0.5));
+  --complete-step-focus-background: var(--ig-stepper-complete-step-focus-background, hsla(var(--ig-gray-300), 0.5));
+  --complete-indicator-background: var(--ig-stepper-complete-indicator-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --complete-indicator-outline: var(--ig-stepper-complete-indicator-outline, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --complete-indicator-color: var(--ig-stepper-complete-indicator-color, var(--ig-gray-300-contrast));
+  --complete-title-color: var(--ig-stepper-complete-title-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --complete-title-hover-color: var(--ig-stepper-complete-title-hover-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --complete-title-focus-color: var(--ig-stepper-complete-title-focus-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --complete-subtitle-color: var(--ig-stepper-complete-subtitle-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --complete-subtitle-hover-color: var(--ig-stepper-complete-subtitle-hover-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --complete-subtitle-focus-color: var(--ig-stepper-complete-subtitle-focus-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --current-step-background: var(--ig-stepper-current-step-background, transparent);
+  --current-step-hover-background: var(--ig-stepper-current-step-hover-background, hsla(var(--ig-gray-300), 0.5));
+  --current-step-focus-background: var(--ig-stepper-current-step-focus-background, hsla(var(--ig-gray-300), 0.5));
+  --current-indicator-background: var(--ig-stepper-current-indicator-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --current-indicator-outline: var(--ig-stepper-current-indicator-outline, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --current-indicator-color: var(--ig-stepper-current-indicator-color, var(--ig-gray-900-contrast));
+  --current-title-color: var(--ig-stepper-current-title-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --current-title-hover-color: var(--ig-stepper-current-title-hover-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --current-title-focus-color: var(--ig-stepper-current-title-focus-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --current-subtitle-color: var(--ig-stepper-current-subtitle-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --current-subtitle-hover-color: var(--ig-stepper-current-subtitle-hover-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --current-subtitle-focus-color: var(--ig-stepper-current-subtitle-focus-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --invalid-step-background: var(--ig-stepper-invalid-step-background, transparent);
+  --invalid-step-hover-background: var(--ig-stepper-invalid-step-hover-background, hsla(var(--ig-gray-300), 0.5));
+  --invalid-step-focus-background: var(--ig-stepper-invalid-step-focus-background, hsla(var(--ig-gray-300), 0.5));
+  --invalid-indicator-background: var(--ig-stepper-invalid-indicator-background, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --invalid-indicator-outline: var(--ig-stepper-invalid-indicator-outline, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --invalid-indicator-color: var(--ig-stepper-invalid-indicator-color, var(--ig-gray-900-contrast));
+  --invalid-title-color: var(--ig-stepper-invalid-title-color, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --invalid-title-hover-color: var(--ig-stepper-invalid-title-hover-color, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --invalid-title-focus-color: var(--ig-stepper-invalid-title-focus-color, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --invalid-subtitle-color: var(--ig-stepper-invalid-subtitle-color, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --invalid-subtitle-hover-color: var(--ig-stepper-invalid-subtitle-hover-color, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --invalid-subtitle-focus-color: var(--ig-stepper-invalid-subtitle-focus-color, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --disabled-indicator-color: var(--ig-stepper-disabled-indicator-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --disabled-indicator-background: var(--ig-stepper-disabled-indicator-background, transparent);
+  --disabled-indicator-outline: var(--ig-stepper-disabled-indicator-outline, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --disabled-title-color: var(--ig-stepper-disabled-title-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --disabled-subtitle-color: var(--ig-stepper-disabled-subtitle-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --step-separator-color: var(--ig-stepper-step-separator-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --complete-step-separator-color: var(--ig-stepper-complete-step-separator-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --step-separator-style: var(--ig-stepper-step-separator-style, solid);
+  --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);
@@ -19,5 +77,13 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
   --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~=header] {
+  border-radius: var(--border-radius-step-header);
+}
+
+[part~=indicator] span {
+  border-radius: var(--border-radius-indicator);
 }`;
 //# 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;;;;;;;;;;;;;;;;;;;;EAoBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host {\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"]}
+{"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"]}

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

@@ -1,6 +1,64 @@
 import { css } from 'lit';
-export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
-:host {
+export const styles = css `:host {
+  --step-background: var(--ig-stepper-step-background, transparent);
+  --step-hover-background: var(--ig-stepper-step-hover-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --step-focus-background: var(--ig-stepper-step-focus-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --indicator-background: var(--ig-stepper-indicator-background, transparent);
+  --indicator-outline: var(--ig-stepper-indicator-outline, transparent);
+  --indicator-color: var(--ig-stepper-indicator-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --title-color: var(--ig-stepper-title-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --title-hover-color: var(--ig-stepper-title-hover-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --title-focus-color: var(--ig-stepper-title-focus-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --subtitle-color: var(--ig-stepper-subtitle-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --subtitle-hover-color: var(--ig-stepper-subtitle-hover-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --subtitle-focus-color: var(--ig-stepper-subtitle-focus-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --complete-step-background: var(--ig-stepper-complete-step-background, transparent);
+  --complete-step-hover-background: var(--ig-stepper-complete-step-hover-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --complete-step-focus-background: var(--ig-stepper-complete-step-focus-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --complete-indicator-background: var(--ig-stepper-complete-indicator-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --complete-indicator-outline: var(--ig-stepper-complete-indicator-outline, transparent);
+  --complete-indicator-color: var(--ig-stepper-complete-indicator-color, var(--ig-gray-200-contrast));
+  --complete-title-color: var(--ig-stepper-complete-title-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --complete-title-hover-color: var(--ig-stepper-complete-title-hover-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --complete-title-focus-color: var(--ig-stepper-complete-title-focus-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --complete-subtitle-color: var(--ig-stepper-complete-subtitle-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --complete-subtitle-hover-color: var(--ig-stepper-complete-subtitle-hover-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --complete-subtitle-focus-color: var(--ig-stepper-complete-subtitle-focus-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --current-step-background: var(--ig-stepper-current-step-background, transparent);
+  --current-step-hover-background: var(--ig-stepper-current-step-hover-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --current-step-focus-background: var(--ig-stepper-current-step-focus-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --current-indicator-background: var(--ig-stepper-current-indicator-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --current-indicator-outline: var(--ig-stepper-current-indicator-outline, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --current-indicator-color: var(--ig-stepper-current-indicator-color, var(--ig-gray-900-contrast));
+  --current-title-color: var(--ig-stepper-current-title-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --current-title-hover-color: var(--ig-stepper-current-title-hover-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --current-title-focus-color: var(--ig-stepper-current-title-focus-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --current-subtitle-color: var(--ig-stepper-current-subtitle-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --current-subtitle-hover-color: var(--ig-stepper-current-subtitle-hover-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --current-subtitle-focus-color: var(--ig-stepper-current-subtitle-focus-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --invalid-step-background: var(--ig-stepper-invalid-step-background, transparent);
+  --invalid-step-hover-background: var(--ig-stepper-invalid-step-hover-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --invalid-step-focus-background: var(--ig-stepper-invalid-step-focus-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --invalid-indicator-background: var(--ig-stepper-invalid-indicator-background, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --invalid-indicator-outline: var(--ig-stepper-invalid-indicator-outline, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --invalid-indicator-color: var(--ig-stepper-invalid-indicator-color, var(--ig-gray-900-contrast));
+  --invalid-title-color: var(--ig-stepper-invalid-title-color, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --invalid-title-hover-color: var(--ig-stepper-invalid-title-hover-color, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --invalid-title-focus-color: var(--ig-stepper-invalid-title-focus-color, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --invalid-subtitle-color: var(--ig-stepper-invalid-subtitle-color, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --invalid-subtitle-hover-color: var(--ig-stepper-invalid-subtitle-hover-color, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --invalid-subtitle-focus-color: var(--ig-stepper-invalid-subtitle-focus-color, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --disabled-indicator-color: var(--ig-stepper-disabled-indicator-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --disabled-indicator-background: var(--ig-stepper-disabled-indicator-background, transparent);
+  --disabled-indicator-outline: var(--ig-stepper-disabled-indicator-outline, transparent);
+  --disabled-title-color: var(--ig-stepper-disabled-title-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --disabled-subtitle-color: var(--ig-stepper-disabled-subtitle-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --step-separator-color: var(--ig-stepper-step-separator-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --complete-step-separator-color: var(--ig-stepper-complete-step-separator-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --step-separator-style: var(--ig-stepper-step-separator-style, dashed);
+  --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));
   --indicator-color: hsla(var(--ig-gray-900), var(--ig-gray-a));
   --indicator-background: hsla(var(--ig-gray-50), 0);
   --indicator-shadow: var(--indicator-background);
@@ -12,5 +70,13 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
   --optional-indicator-shadow: var(--indicator-shadow);
   --disabled-background: hsla(var(--ig-gray-200), var(--ig-gray-a));
   --disabled-shadow: var(--disabled-background);
+}
+
+[part~=header] {
+  border-radius: var(--border-radius-step-header);
+}
+
+[part~=indicator] span {
+  border-radius: var(--border-radius-indicator);
 }`;
 //# sourceMappingURL=step.fluent.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"step.fluent.css.js","sourceRoot":"","sources":["../../../../../../src/components/stepper/themes/step/light/step.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;EAavB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host {\n  --indicator-color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n  --indicator-background: hsla(var(--ig-gray-50), 0);\n  --indicator-shadow: var(--indicator-background);\n  --completed-indicator-color: var(--ig-gray-50-contrast);\n  --completed-indicator-background: hsla(var(--ig-gray-300), var(--ig-gray-a));\n  --completed-indicator-shadow: hsla(var(--ig-gray-300), 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  --disabled-background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n  --disabled-shadow: var(--disabled-background);\n}`;\n"]}
+{"version":3,"file":"step.fluent.css.js","sourceRoot":"","sources":["../../../../../../src/components/stepper/themes/step/light/step.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+EvB,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-200), var(--ig-gray-a)));\n  --step-focus-background: var(--ig-stepper-step-focus-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --indicator-background: var(--ig-stepper-indicator-background, transparent);\n  --indicator-outline: var(--ig-stepper-indicator-outline, transparent);\n  --indicator-color: var(--ig-stepper-indicator-color, hsla(var(--ig-gray-900), var(--ig-gray-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-200), var(--ig-gray-a)));\n  --complete-step-focus-background: var(--ig-stepper-complete-step-focus-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --complete-indicator-background: var(--ig-stepper-complete-indicator-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --complete-indicator-outline: var(--ig-stepper-complete-indicator-outline, transparent);\n  --complete-indicator-color: var(--ig-stepper-complete-indicator-color, var(--ig-gray-200-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-200), var(--ig-gray-a)));\n  --current-step-focus-background: var(--ig-stepper-current-step-focus-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\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-200), var(--ig-gray-a)));\n  --invalid-step-focus-background: var(--ig-stepper-invalid-step-focus-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\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, transparent);\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, dashed);\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  --indicator-color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n  --indicator-background: hsla(var(--ig-gray-50), 0);\n  --indicator-shadow: var(--indicator-background);\n  --completed-indicator-color: var(--ig-gray-50-contrast);\n  --completed-indicator-background: hsla(var(--ig-gray-300), var(--ig-gray-a));\n  --completed-indicator-shadow: hsla(var(--ig-gray-300), 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  --disabled-background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n  --disabled-shadow: var(--disabled-background);\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"]}

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

@@ -1,6 +1,64 @@
 import { css } from 'lit';
-export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
-:host {
+export const styles = css `:host {
+  --step-background: var(--ig-stepper-step-background, transparent);
+  --step-hover-background: var(--ig-stepper-step-hover-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --step-focus-background: var(--ig-stepper-step-focus-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --indicator-background: var(--ig-stepper-indicator-background, transparent);
+  --indicator-outline: var(--ig-stepper-indicator-outline, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --indicator-color: var(--ig-stepper-indicator-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --title-color: var(--ig-stepper-title-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --title-hover-color: var(--ig-stepper-title-hover-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --title-focus-color: var(--ig-stepper-title-focus-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --subtitle-color: var(--ig-stepper-subtitle-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --subtitle-hover-color: var(--ig-stepper-subtitle-hover-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --subtitle-focus-color: var(--ig-stepper-subtitle-focus-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --complete-step-background: var(--ig-stepper-complete-step-background, transparent);
+  --complete-step-hover-background: var(--ig-stepper-complete-step-hover-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --complete-step-focus-background: var(--ig-stepper-complete-step-focus-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --complete-indicator-background: var(--ig-stepper-complete-indicator-background, hsla(var(--ig-primary-100), var(--ig-primary-a)));
+  --complete-indicator-outline: var(--ig-stepper-complete-indicator-outline, hsla(var(--ig-primary-100), var(--ig-primary-a)));
+  --complete-indicator-color: var(--ig-stepper-complete-indicator-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --complete-title-color: var(--ig-stepper-complete-title-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --complete-title-hover-color: var(--ig-stepper-complete-title-hover-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --complete-title-focus-color: var(--ig-stepper-complete-title-focus-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --complete-subtitle-color: var(--ig-stepper-complete-subtitle-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --complete-subtitle-hover-color: var(--ig-stepper-complete-subtitle-hover-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --complete-subtitle-focus-color: var(--ig-stepper-complete-subtitle-focus-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --current-step-background: var(--ig-stepper-current-step-background, transparent);
+  --current-step-hover-background: var(--ig-stepper-current-step-hover-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --current-step-focus-background: var(--ig-stepper-current-step-focus-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --current-indicator-background: var(--ig-stepper-current-indicator-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --current-indicator-outline: var(--ig-stepper-current-indicator-outline, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --current-indicator-color: var(--ig-stepper-current-indicator-color, var(--ig-gray-900-contrast));
+  --current-title-color: var(--ig-stepper-current-title-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --current-title-hover-color: var(--ig-stepper-current-title-hover-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --current-title-focus-color: var(--ig-stepper-current-title-focus-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --current-subtitle-color: var(--ig-stepper-current-subtitle-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --current-subtitle-hover-color: var(--ig-stepper-current-subtitle-hover-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --current-subtitle-focus-color: var(--ig-stepper-current-subtitle-focus-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --invalid-step-background: var(--ig-stepper-invalid-step-background, transparent);
+  --invalid-step-hover-background: var(--ig-stepper-invalid-step-hover-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --invalid-step-focus-background: var(--ig-stepper-invalid-step-focus-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --invalid-indicator-background: var(--ig-stepper-invalid-indicator-background, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --invalid-indicator-outline: var(--ig-stepper-invalid-indicator-outline, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --invalid-indicator-color: var(--ig-stepper-invalid-indicator-color, var(--ig-gray-900-contrast));
+  --invalid-title-color: var(--ig-stepper-invalid-title-color, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --invalid-title-hover-color: var(--ig-stepper-invalid-title-hover-color, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --invalid-title-focus-color: var(--ig-stepper-invalid-title-focus-color, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --invalid-subtitle-color: var(--ig-stepper-invalid-subtitle-color, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --invalid-subtitle-hover-color: var(--ig-stepper-invalid-subtitle-hover-color, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --invalid-subtitle-focus-color: var(--ig-stepper-invalid-subtitle-focus-color, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --disabled-indicator-color: var(--ig-stepper-disabled-indicator-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --disabled-indicator-background: var(--ig-stepper-disabled-indicator-background, transparent);
+  --disabled-indicator-outline: var(--ig-stepper-disabled-indicator-outline, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --disabled-title-color: var(--ig-stepper-disabled-title-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --disabled-subtitle-color: var(--ig-stepper-disabled-subtitle-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --step-separator-color: var(--ig-stepper-step-separator-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --complete-step-separator-color: var(--ig-stepper-complete-step-separator-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --step-separator-style: var(--ig-stepper-step-separator-style, solid);
+  --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, 1) * 6.25rem), 6.25rem));
+  --border-radius-step-header: var(--ig-stepper-border-radius-step-header, clamp(0rem, calc(var(--ig-radius-factor, 0) * 6.25rem), 6.25rem));
   --header-color: hsla(var(--ig-gray-900), var(--ig-gray-a));
   --header-background--hover: hsla(var(--ig-gray-100), var(--ig-gray-a));
   --header-background--focus: hsla(var(--ig-gray-100), var(--ig-gray-a));
@@ -25,5 +83,13 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
   --disabled-color: hsla(var(--ig-gray-500), var(--ig-gray-a));
   --disabled-background: hsla(var(--ig-gray-50), 0);
   --disabled-shadow: hsla(var(--ig-gray-200), var(--ig-gray-a));
+}
+
+[part~=header] {
+  border-radius: var(--border-radius-step-header);
+}
+
+[part~=indicator] span {
+  border-radius: var(--border-radius-indicator);
 }`;
 //# sourceMappingURL=step.indigo.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"step.indigo.css.js","sourceRoot":"","sources":["../../../../../../src/components/stepper/themes/step/light/step.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;EA0BvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host {\n  --header-color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n  --header-background--hover: hsla(var(--ig-gray-100), 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  --title-color: hsla(var(--ig-gray-900), var(--ig-gray-a));\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-primary-500), var(--ig-primary-a));\n  --separator-type: solid;\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-300), 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(--indicator-color);\n  --completed-indicator-background: hsla(var(--ig-primary-100), var(--ig-primary-a));\n  --completed-indicator-shadow: var(--completed-indicator-background);\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  --disabled-color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n  --disabled-background: hsla(var(--ig-gray-50), 0);\n  --disabled-shadow: hsla(var(--ig-gray-200), var(--ig-gray-a));\n}`;\n"]}
+{"version":3,"file":"step.indigo.css.js","sourceRoot":"","sources":["../../../../../../src/components/stepper/themes/step/light/step.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4FvB,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-200), var(--ig-gray-a)));\n  --step-focus-background: var(--ig-stepper-step-focus-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --indicator-background: var(--ig-stepper-indicator-background, transparent);\n  --indicator-outline: var(--ig-stepper-indicator-outline, hsla(var(--ig-gray-300), 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-200), var(--ig-gray-a)));\n  --complete-step-focus-background: var(--ig-stepper-complete-step-focus-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --complete-indicator-background: var(--ig-stepper-complete-indicator-background, hsla(var(--ig-primary-100), var(--ig-primary-a)));\n  --complete-indicator-outline: var(--ig-stepper-complete-indicator-outline, hsla(var(--ig-primary-100), var(--ig-primary-a)));\n  --complete-indicator-color: var(--ig-stepper-complete-indicator-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\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-200), var(--ig-gray-a)));\n  --current-step-focus-background: var(--ig-stepper-current-step-focus-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\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-200), var(--ig-gray-a)));\n  --invalid-step-focus-background: var(--ig-stepper-invalid-step-focus-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\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-200), 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, 1) * 6.25rem), 6.25rem));\n  --border-radius-step-header: var(--ig-stepper-border-radius-step-header, clamp(0rem, calc(var(--ig-radius-factor, 0) * 6.25rem), 6.25rem));\n  --header-color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n  --header-background--hover: hsla(var(--ig-gray-100), 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  --title-color: hsla(var(--ig-gray-900), var(--ig-gray-a));\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-primary-500), var(--ig-primary-a));\n  --separator-type: solid;\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-300), 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(--indicator-color);\n  --completed-indicator-background: hsla(var(--ig-primary-100), var(--ig-primary-a));\n  --completed-indicator-shadow: var(--completed-indicator-background);\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  --disabled-color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n  --disabled-background: hsla(var(--ig-gray-50), 0);\n  --disabled-shadow: hsla(var(--ig-gray-200), 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"]}

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

@@ -1,8 +1,74 @@
 import { css } from 'lit';
-export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
-:host {
+export const styles = css `:host {
+  --step-background: var(--ig-stepper-step-background, transparent);
+  --step-hover-background: var(--ig-stepper-step-hover-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --step-focus-background: var(--ig-stepper-step-focus-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --indicator-background: var(--ig-stepper-indicator-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --indicator-outline: var(--ig-stepper-indicator-outline, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --indicator-color: var(--ig-stepper-indicator-color, var(--ig-gray-400-contrast));
+  --title-color: var(--ig-stepper-title-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --title-hover-color: var(--ig-stepper-title-hover-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --title-focus-color: var(--ig-stepper-title-focus-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --subtitle-color: var(--ig-stepper-subtitle-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --subtitle-hover-color: var(--ig-stepper-subtitle-hover-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --subtitle-focus-color: var(--ig-stepper-subtitle-focus-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --complete-step-background: var(--ig-stepper-complete-step-background, transparent);
+  --complete-step-hover-background: var(--ig-stepper-complete-step-hover-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --complete-step-focus-background: var(--ig-stepper-complete-step-focus-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --complete-indicator-background: var(--ig-stepper-complete-indicator-background, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --complete-indicator-outline: var(--ig-stepper-complete-indicator-outline, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --complete-indicator-color: var(--ig-stepper-complete-indicator-color, var(--ig-gray-900-contrast));
+  --complete-title-color: var(--ig-stepper-complete-title-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --complete-title-hover-color: var(--ig-stepper-complete-title-hover-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --complete-title-focus-color: var(--ig-stepper-complete-title-focus-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --complete-subtitle-color: var(--ig-stepper-complete-subtitle-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --complete-subtitle-hover-color: var(--ig-stepper-complete-subtitle-hover-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --complete-subtitle-focus-color: var(--ig-stepper-complete-subtitle-focus-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --current-step-background: var(--ig-stepper-current-step-background, transparent);
+  --current-step-hover-background: var(--ig-stepper-current-step-hover-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --current-step-focus-background: var(--ig-stepper-current-step-focus-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --current-indicator-background: var(--ig-stepper-current-indicator-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --current-indicator-outline: var(--ig-stepper-current-indicator-outline, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --current-indicator-color: var(--ig-stepper-current-indicator-color, var(--ig-gray-900-contrast));
+  --current-title-color: var(--ig-stepper-current-title-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --current-title-hover-color: var(--ig-stepper-current-title-hover-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --current-title-focus-color: var(--ig-stepper-current-title-focus-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --current-subtitle-color: var(--ig-stepper-current-subtitle-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --current-subtitle-hover-color: var(--ig-stepper-current-subtitle-hover-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --current-subtitle-focus-color: var(--ig-stepper-current-subtitle-focus-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --invalid-step-background: var(--ig-stepper-invalid-step-background, transparent);
+  --invalid-step-hover-background: var(--ig-stepper-invalid-step-hover-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --invalid-step-focus-background: var(--ig-stepper-invalid-step-focus-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --invalid-indicator-background: var(--ig-stepper-invalid-indicator-background, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --invalid-indicator-outline: var(--ig-stepper-invalid-indicator-outline, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --invalid-indicator-color: var(--ig-stepper-invalid-indicator-color, var(--ig-gray-900-contrast));
+  --invalid-title-color: var(--ig-stepper-invalid-title-color, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --invalid-title-hover-color: var(--ig-stepper-invalid-title-hover-color, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --invalid-title-focus-color: var(--ig-stepper-invalid-title-focus-color, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --invalid-subtitle-color: var(--ig-stepper-invalid-subtitle-color, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --invalid-subtitle-hover-color: var(--ig-stepper-invalid-subtitle-hover-color, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --invalid-subtitle-focus-color: var(--ig-stepper-invalid-subtitle-focus-color, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --disabled-indicator-color: var(--ig-stepper-disabled-indicator-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --disabled-indicator-background: var(--ig-stepper-disabled-indicator-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --disabled-indicator-outline: var(--ig-stepper-disabled-indicator-outline, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --disabled-title-color: var(--ig-stepper-disabled-title-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --disabled-subtitle-color: var(--ig-stepper-disabled-subtitle-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --step-separator-color: var(--ig-stepper-step-separator-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --complete-step-separator-color: var(--ig-stepper-complete-step-separator-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --step-separator-style: var(--ig-stepper-step-separator-style, dashed);
+  --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, 1) * 6.25rem), 6.25rem));
+  --border-radius-step-header: var(--ig-stepper-border-radius-step-header, clamp(0rem, calc(var(--ig-radius-factor, 0) * 6.25rem), 6.25rem));
   --completed-indicator-color: var(--ig-gray-900-contrast);
   --completed-indicator-background: hsla(var(--ig-gray-900), var(--ig-gray-a));
   --completed-indicator-shadow: var(--completed-indicator-background);
+}
+
+[part~=header] {
+  border-radius: var(--border-radius-step-header);
+}
+
+[part~=indicator] span {
+  border-radius: var(--border-radius-indicator);
 }`;
 //# sourceMappingURL=step.material.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"step.material.css.js","sourceRoot":"","sources":["../../../../../../src/components/stepper/themes/step/light/step.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;EAKvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host {\n  --completed-indicator-color: var(--ig-gray-900-contrast);\n  --completed-indicator-background: hsla(var(--ig-gray-900), var(--ig-gray-a));\n  --completed-indicator-shadow: var(--completed-indicator-background);\n}`;\n"]}
+{"version":3,"file":"step.material.css.js","sourceRoot":"","sources":["../../../../../../src/components/stepper/themes/step/light/step.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuEvB,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-200), var(--ig-gray-a)));\n  --step-focus-background: var(--ig-stepper-step-focus-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --indicator-background: var(--ig-stepper-indicator-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --indicator-outline: var(--ig-stepper-indicator-outline, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --indicator-color: var(--ig-stepper-indicator-color, var(--ig-gray-400-contrast));\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-200), var(--ig-gray-a)));\n  --complete-step-focus-background: var(--ig-stepper-complete-step-focus-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --complete-indicator-background: var(--ig-stepper-complete-indicator-background, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --complete-indicator-outline: var(--ig-stepper-complete-indicator-outline, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --complete-indicator-color: var(--ig-stepper-complete-indicator-color, var(--ig-gray-900-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-200), var(--ig-gray-a)));\n  --current-step-focus-background: var(--ig-stepper-current-step-focus-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\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-200), var(--ig-gray-a)));\n  --invalid-step-focus-background: var(--ig-stepper-invalid-step-focus-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\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, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --disabled-indicator-outline: var(--ig-stepper-disabled-indicator-outline, hsla(var(--ig-gray-200), 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-gray-900), var(--ig-gray-a)));\n  --step-separator-style: var(--ig-stepper-step-separator-style, dashed);\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, 1) * 6.25rem), 6.25rem));\n  --border-radius-step-header: var(--ig-stepper-border-radius-step-header, clamp(0rem, calc(var(--ig-radius-factor, 0) * 6.25rem), 6.25rem));\n  --completed-indicator-color: var(--ig-gray-900-contrast);\n  --completed-indicator-background: hsla(var(--ig-gray-900), var(--ig-gray-a));\n  --completed-indicator-shadow: var(--completed-indicator-background);\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"]}