@kdcloudjs/shoelace 1.0.50 → 1.0.52

package/cdn/chunks/chunk.5GV5POES.js

@@ -1,985 +0,0 @@
-import {
-  i
-} from "./chunk.VKO6US6U.js";
-
-// src/components/steps/steps.styles.ts
-var steps_styles_default = i`
-  :host {
-    display: block;
-  }
-
-  /* ===== base ===== */
-  .steps {
-    display: flex;
-    width: 100%;
-    font-size: var(--sl-font-size-small);
-    font-family: var(--sl-font-sans);
-    padding: 4px;
-  }
-  .step {
-    flex: 1;
-    display: flex;
-    align-items: flex-start;
-    gap: 8px;
-  }
-  .step:last-child {
-    flex: none;
-  }
-  .step:last-child .step-tail {
-    display: none;
-  }
-
-  /* ===== clickable ===== */
-  .steps-clickable .step {
-    cursor: pointer;
-  }
-  .steps-clickable .step:not(.step-pos-process):hover .step-title,
-  .steps-clickable .step:not(.step-pos-process):hover .step-description {
-    color: var(--sl-color-primary-600);
-  }
-  .steps-clickable .step:hover .step-icon {
-    border-color: var(--sl-color-primary-600);
-    color: var(--sl-color-primary-600);
-  }
-  .steps-clickable .step-wait:hover .step-icon {
-    border-color: inherit;
-    color: var(--sl-color-neutral-500);
-  }
-  .steps-clickable .step-process:hover .step-icon {
-    color: var(--sl-color-neutral-0);
-  }
-  .steps-clickable.steps-outlined .step-process:hover .step-icon {
-    color: #1677ff;
-  }
-  .steps-clickable.steps-panel .step-process:hover .step-title,
-  .steps-clickable.steps-panel .step-process:hover .step-subtitle,
-  .steps-clickable.steps-panel .step-process:hover .step-description,
-  .steps-clickable.steps-panel .step-error.step-pos-process:hover .step-title,
-  .steps-clickable.steps-panel .step-error.step-pos-process:hover .step-subtitle,
-  .steps-clickable.steps-panel .step-error.step-pos-process:hover .step-description {
-    color: var(--sl-color-neutral-0);
-  }
-  .steps-clickable.steps-outlined.steps-panel .step-process:hover .step-title,
-  .steps-clickable.steps-outlined.steps-panel .step-process:hover .step-description {
-    color: var(--sl-color-primary-600);
-  }
-  .steps-clickable.steps-outlined.steps-panel .step-process:hover .step-subtitle {
-    color: var(--sl-color-neutral-500);
-  }
-  .steps-clickable.steps-outlined.steps-panel .step-error.step-pos-process:hover .step-title,
-  .steps-clickable.steps-outlined.steps-panel .step-error.step-pos-process:hover .step-subtitle,
-  .steps-clickable.steps-outlined.steps-panel .step-error.step-pos-process:hover .step-description {
-    color: var(--sl-color-danger-600);
-  }
-  .steps-clickable.steps-panel .step-error.step-pos-wait:hover .step-title,
-  .steps-clickable.steps-panel .step-error.step-pos-wait:hover .step-subtitle,
-  .steps-clickable.steps-panel .step-error.step-pos-wait:hover .step-description,
-  .steps-clickable.steps-panel .step-error.step-pos-finish:hover .step-title,
-  .steps-clickable.steps-panel .step-error.step-pos-finish:hover .step-subtitle,
-  .steps-clickable.steps-panel .step-error.step-pos-finish:hover .step-description {
-    color: var(--sl-color-danger-600);
-  }
-  /* panel finish hover */
-  .steps-clickable.steps-panel .step-finish:hover .step-subtitle,
-  .steps-clickable.steps-outlined.steps-panel .step-finish:hover .step-subtitle {
-    color: var(--sl-color-neutral-500);
-  }
-  .steps-clickable.steps-outlined.steps-panel .step-finish:hover .step-title,
-  .steps-clickable.steps-outlined.steps-panel .step-finish:hover .step-description {
-    color: var(--sl-color-primary-600);
-  }
-  .steps-clickable .step-disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-  .steps-clickable .step-disabled:hover .step-title,
-  .steps-clickable .step-disabled:hover .step-description,
-  .steps-clickable .step-disabled:hover .step-subtitle,
-  .steps-clickable .step-disabled:hover .step-icon {
-    color: inherit;
-    border-color: inherit;
-  }
-
-  /* ===== icon ===== */
-  .step-icon {
-    position: relative;
-    flex-shrink: 0;
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: var(--sl-font-size-small);
-    font-weight: 600;
-    line-height: 1;
-    overflow: visible;
-    transition:
-      background-color 0.2s,
-      border-color 0.2s,
-      color 0.2s;
-  }
-  .step-wait .step-icon {
-    background: var(--sl-color-neutral-100);
-    color: var(--sl-color-neutral-500);
-  }
-  .step-process .step-icon {
-    background: var(--sl-color-primary-600);
-    color: var(--sl-color-neutral-0);
-  }
-  .step-finish .step-icon {
-    background: var(--sl-color-primary-50);
-    color: var(--sl-color-primary-600);
-  }
-  .step-error .step-icon {
-    background: var(--sl-color-danger-600);
-    color: var(--sl-color-neutral-0);
-  }
-  .step-icon.step-icon-custom {
-    background: none !important;
-    border: none !important;
-    font-size: 24px;
-  }
-  .step-finish .step-icon-custom,
-  .step-process .step-icon-custom {
-    color: var(--sl-color-primary-600);
-  }
-  .step-wait .step-icon-custom {
-    color: var(--sl-color-neutral-400);
-  }
-  .step-error .step-icon-custom {
-    color: var(--sl-color-danger-600);
-  }
-
-  /* progress ring */
-  .step-icon svg.progress-ring {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%) rotate(-90deg);
-  }
-  .progress-ring-bg {
-    fill: none;
-  }
-  .progress-ring-fg {
-    fill: none;
-    stroke: var(--sl-color-primary-600);
-    stroke-linecap: round;
-    transition: stroke-dashoffset 0.3s;
-  }
-
-  /* ===== content ===== */
-  .step-main {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    flex: 1;
-    min-width: 0;
-  }
-  .step-title-row {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    height: 32px;
-    white-space: nowrap;
-  }
-  .step-title {
-    font-size: var(--sl-font-size-medium);
-    font-weight: 400;
-    color: var(--sl-color-neutral-900);
-    flex-shrink: 0;
-  }
-  .step-wait .step-title {
-    color: var(--sl-color-neutral-500);
-  }
-  .step-error .step-title {
-    color: var(--sl-color-danger-600);
-  }
-  .step-subtitle {
-    font-size: var(--sl-font-size-small);
-    color: var(--sl-color-neutral-500);
-    font-weight: 400;
-    flex-shrink: 0;
-  }
-  .step-description {
-    font-size: var(--sl-font-size-small);
-    color: var(--sl-color-neutral-500);
-    line-height: 22px;
-  }
-  .step-error .step-description {
-    color: var(--sl-color-danger-600);
-  }
-  .step-tail {
-    flex: 1;
-    height: 1px;
-    background: var(--sl-color-neutral-300);
-    margin-inline-end: 8px;
-  }
-  /* tail color follows next step status */
-  .step-next-finish .step-tail,
-  .step-next-process .step-tail {
-    background: var(--sl-color-primary-600);
-  }
-  .step-next-error .step-tail {
-    background: var(--sl-color-danger-600);
-  }
-
-  /* ===== outlined variant ===== */
-  .steps-outlined .step-process .step-icon {
-    background: #e6f4ff;
-    border: 1px solid #1677ff;
-    color: #1677ff;
-  }
-  .steps-outlined .step-finish .step-icon {
-    background: transparent;
-    border: 1px solid var(--sl-color-primary-600);
-    color: var(--sl-color-primary-600);
-  }
-  .steps-outlined .step-error .step-icon {
-    background: transparent;
-    border: 1px solid var(--sl-color-danger-600);
-    color: var(--sl-color-danger-600);
-  }
-
-  /* ===== small size ===== */
-  .steps-small .step-icon {
-    width: 24px;
-    height: 24px;
-    font-size: 12px;
-  }
-  .steps-small .step-title-row {
-    height: 24px;
-  }
-  .steps-small .step-title {
-    font-size: var(--sl-font-size-small);
-  }
-  .steps-small .step-subtitle {
-    font-size: var(--sl-font-size-x-small);
-  }
-  .steps-small .step-icon-custom {
-    font-size: 18px;
-  }
-
-  /* ===== title-placement vertical ===== */
-  .steps-title-vertical .step {
-    flex-direction: column;
-    align-items: center;
-    gap: 8px;
-    position: relative;
-  }
-  .steps-title-vertical .step:last-child {
-    flex: 1;
-  }
-  .steps-title-vertical .step-tail {
-    display: none;
-  }
-  .steps-title-vertical .step-main {
-    text-align: center;
-    flex: none;
-  }
-  .steps-title-vertical .step-title-row {
-    justify-content: center;
-    height: auto;
-  }
-  .steps-title-vertical .step-icon {
-    z-index: 1;
-  }
-  .steps-title-vertical .step::before,
-  .steps-title-vertical .step::after {
-    content: '';
-    position: absolute;
-    top: 16px;
-    height: 1px;
-    background: var(--sl-color-neutral-300);
-  }
-  .steps-title-vertical .step::before {
-    left: 0;
-    right: calc(50% + 24px);
-  }
-  .steps-title-vertical .step::after {
-    left: calc(50% + 24px);
-    right: 0;
-  }
-  .steps-title-vertical .step:first-child::before {
-    display: none;
-  }
-  .steps-title-vertical .step:last-child::after {
-    display: none;
-  }
-  /* title-vertical: line between step N and N+1 follows N+1's status */
-  /* ::after = outgoing line to the right, colored by next step's status */
-  .steps-title-vertical .step-next-finish::after,
-  .steps-title-vertical .step-next-process::after {
-    background: var(--sl-color-primary-600);
-  }
-  .steps-title-vertical .step-next-error::after {
-    background: var(--sl-color-danger-600);
-  }
-  /* ::before = incoming line from the left, colored by this step's own status (error stays neutral) */
-  .steps-title-vertical .step-finish::before,
-  .steps-title-vertical .step-process::before {
-    background: var(--sl-color-primary-600);
-  }
-  .steps-title-vertical .step-error:not(.step-pos-wait)::before {
-    background: var(--sl-color-danger-600);
-  }
-  .steps-title-vertical.steps-small .step::before,
-  .steps-title-vertical.steps-small .step::after {
-    top: 12px;
-  }
-  .steps-title-vertical.steps-small .step::before {
-    right: calc(50% + 20px);
-  }
-  .steps-title-vertical.steps-small .step::after {
-    left: calc(50% + 20px);
-  }
-
-  /* ===== dot type ===== */
-  .steps-dot {
-    padding: 0;
-  }
-  .steps-dot .step {
-    flex-direction: column;
-    align-items: center;
-    gap: 8px;
-    overflow: visible;
-  }
-  .steps-dot .step:last-child {
-    flex: 1;
-  }
-  .steps-dot .step-icon,
-  .steps-dot .step-main {
-    display: none;
-  }
-  .steps-dot .step-dot-track {
-    position: relative;
-    width: 100%;
-    height: 10px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .steps-dot .step-dot-track::before,
-  .steps-dot .step-dot-track::after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    height: 3px;
-    background: var(--sl-color-neutral-300);
-    transform: translateY(-50%);
-  }
-  .steps-dot .step-dot-track::before {
-    left: 0;
-    right: calc(50% + 12px);
-  }
-  .steps-dot .step-dot-track::after {
-    left: calc(50% + 12px);
-    right: 0;
-  }
-  .steps-dot .step:first-child .step-dot-track::before {
-    display: none;
-  }
-  .steps-dot .step:last-child .step-dot-track::after {
-    display: none;
-  }
-  .steps-dot .step-dot-indicator {
-    position: relative;
-    z-index: 1;
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    flex-shrink: 0;
-    background: var(--sl-color-neutral-300);
-  }
-  .steps-dot .step-dot-text {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    text-align: center;
-  }
-  .steps-dot .step-finish .step-dot-indicator {
-    background: var(--sl-color-primary-600);
-  }
-  /* dot track: ::before = incoming line (colored by own status), ::after = outgoing (colored by next status) */
-  .steps-dot .step-finish .step-dot-track::before {
-    background: var(--sl-color-primary-600);
-  }
-  .steps-dot .step-process .step-dot-track::before {
-    background: var(--sl-color-primary-600);
-  }
-  /* outgoing line follows next step status */
-  .steps-dot .step-next-finish .step-dot-track::after,
-  .steps-dot .step-next-process .step-dot-track::after {
-    background: var(--sl-color-primary-600);
-  }
-  .steps-dot .step-next-error .step-dot-track::after {
-    background: var(--sl-color-danger-600);
-  }
-  .steps-dot .step-process .step-dot-indicator {
-    width: 10px;
-    height: 10px;
-    background: var(--sl-color-primary-600);
-  }
-  .steps-dot .step-process .step-dot-track::before {
-    right: calc(50% + 13px);
-  }
-  .steps-dot .step-process .step-dot-track::after {
-    left: calc(50% + 13px);
-  }
-  .steps-dot .step-error .step-dot-indicator {
-    background: var(--sl-color-danger-600);
-  }
-  .steps-dot .step-error.step-pos-process .step-dot-indicator {
-    width: 10px;
-    height: 10px;
-  }
-  .steps-dot .step-error.step-pos-process .step-dot-track::before {
-    right: calc(50% + 13px);
-  }
-  .steps-dot .step-error.step-pos-process .step-dot-track::after {
-    left: calc(50% + 13px);
-  }
-  .steps-dot .step-error:not(.step-pos-wait) .step-dot-track::before {
-    background: var(--sl-color-danger-600);
-  }
-  /* dot outlined */
-  .steps-outlined.steps-dot .step-dot-indicator {
-    background: var(--sl-color-neutral-0);
-    border: 2px solid var(--sl-color-neutral-300);
-  }
-  .steps-outlined.steps-dot .step-process .step-dot-indicator,
-  .steps-outlined.steps-dot .step-finish .step-dot-indicator {
-    background: var(--sl-color-neutral-0);
-    border-color: var(--sl-color-primary-600);
-  }
-  .steps-outlined.steps-dot .step-process .step-dot-indicator {
-    box-shadow: none;
-  }
-  .steps-outlined.steps-dot .step-error .step-dot-indicator {
-    background: var(--sl-color-neutral-0);
-    border-color: var(--sl-color-danger-600);
-  }
-
-  /* ===== navigation type ===== */
-  .steps-navigation {
-    padding: 0;
-    gap: 0;
-    overflow: visible;
-  }
-  .steps-navigation .step {
-    flex: 1;
-    flex-direction: row;
-    align-items: flex-start;
-    gap: 8px;
-    padding: 12px 16px;
-    cursor: pointer;
-    position: relative;
-    border-bottom: 2px solid var(--sl-color-neutral-300);
-    transition: none;
-    justify-content: center;
-  }
-  .steps-navigation .step:last-child {
-    flex: 1;
-  }
-  .steps-navigation .step-process {
-    border-bottom-color: var(--sl-color-primary-600);
-  }
-  .steps-navigation .step-tail {
-    display: none;
-  }
-  .steps-navigation .step-main {
-    flex: none;
-  }
-  .steps-navigation .step-title-row {
-    height: auto;
-  }
-  /* navigation arrow between steps */
-  .steps-navigation .step-nav-arrow {
-    position: absolute;
-    right: -4px;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 8px;
-    height: 16px;
-    z-index: 1;
-  }
-  .steps-navigation .step-nav-arrow::before,
-  .steps-navigation .step-nav-arrow::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    width: 0;
-    height: 0;
-  }
-  .steps-navigation .step-nav-arrow::before {
-    top: 0;
-    border-top: 8px solid transparent;
-    border-bottom: 8px solid transparent;
-    border-left: 8px solid var(--sl-color-neutral-300);
-  }
-  .steps-navigation .step-nav-arrow::after {
-    top: 1px;
-    border-top: 7px solid transparent;
-    border-bottom: 7px solid transparent;
-    border-left: 7px solid var(--sl-color-neutral-0);
-  }
-  .steps-navigation .step:last-child .step-nav-arrow {
-    display: none;
-  }
-
-  /* ===== panel type ===== */
-  .steps-panel {
-    --arrow: 50px;
-    padding: 0;
-    gap: 0;
-    overflow: hidden;
-    border-radius: 6px;
-  }
-  .steps-panel .step {
-    position: relative;
-    padding: 8px 8px 8px calc(var(--arrow) + 8px);
-    background: var(--sl-color-neutral-100);
-    clip-path: polygon(
-      0 0,
-      calc(100% - var(--arrow)) 0,
-      100% 50%,
-      calc(100% - var(--arrow)) 100%,
-      0 100%,
-      var(--arrow) 50%
-    );
-    margin-left: -49px;
-    transition: background-color 0.2s;
-  }
-  .steps-panel .step:first-child {
-    padding-left: 12px;
-    margin-left: 0;
-    flex: 1 1 var(--arrow);
-    clip-path: polygon(0 0, calc(100% - var(--arrow)) 0, 100% 50%, calc(100% - var(--arrow)) 100%, 0 100%);
-  }
-  .steps-panel .step:last-child {
-    flex: 1;
-    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--arrow) 50%);
-  }
-  .steps-panel .step:first-child:last-child {
-    clip-path: none;
-    flex: 1;
-  }
-
-  /* panel: non-error state */
-  .steps-panel .step-finish {
-    background: var(--sl-color-primary-50);
-  }
-  .steps-panel .step-finish .step-title {
-    color: var(--sl-color-neutral-900);
-  }
-  .steps-panel .step-finish .step-subtitle,
-  .steps-panel .step-finish .step-description {
-    color: var(--sl-color-neutral-500);
-  }
-  .steps-panel .step-process {
-    background: var(--sl-color-primary-600);
-  }
-  .steps-panel .step-process .step-title,
-  .steps-panel .step-process .step-subtitle,
-  .steps-panel .step-process .step-description {
-    color: var(--sl-color-neutral-0);
-  }
-  .steps-panel .step-wait {
-    background: var(--sl-color-neutral-100);
-  }
-
-  /* panel: error step */
-  .steps-panel .step-error.step-pos-process {
-    background: var(--sl-color-danger-600);
-  }
-  .steps-panel .step-error.step-pos-process .step-title,
-  .steps-panel .step-error.step-pos-process .step-subtitle,
-  .steps-panel .step-error.step-pos-process .step-description {
-    color: var(--sl-color-neutral-0);
-  }
-  .steps-panel .step-error.step-pos-wait,
-  .steps-panel .step-error.step-pos-finish {
-    background: var(--sl-color-danger-50);
-  }
-  .steps-panel .step-error.step-pos-wait .step-title,
-  .steps-panel .step-error.step-pos-wait .step-subtitle,
-  .steps-panel .step-error.step-pos-wait .step-description,
-  .steps-panel .step-error.step-pos-finish .step-title,
-  .steps-panel .step-error.step-pos-finish .step-subtitle,
-  .steps-panel .step-error.step-pos-finish .step-description {
-    color: var(--sl-color-danger-600);
-  }
-
-  .steps-panel .step-panel-content,
-  .steps-panel .step-panel-text {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-  }
-  .steps-panel .step-panel-title-row {
-    display: flex;
-    align-items: baseline;
-    gap: 6px;
-  }
-  .steps-panel .step-tail,
-  .steps-panel .step-main,
-  .steps-panel .step-icon {
-    display: none;
-  }
-
-  /* panel outlined */
-  .steps-outlined.steps-panel {
-    overflow: visible;
-  }
-  .steps-outlined.steps-panel .step {
-    background: var(--sl-color-neutral-0);
-    clip-path: none;
-    margin-left: 0;
-    border: 1px solid var(--sl-color-neutral-300);
-    border-right: none;
-    display: flex;
-    align-items: stretch;
-    position: relative;
-    transition: none;
-  }
-  .steps-outlined.steps-panel .step:first-child {
-    clip-path: none;
-    border-radius: 6px 0 0 6px;
-    flex: 1;
-  }
-  .steps-outlined.steps-panel .step:last-child {
-    clip-path: none;
-    border-right: 1px solid var(--sl-color-neutral-300);
-    border-radius: 0 6px 6px 0;
-  }
-  .steps-outlined.steps-panel .step:first-child:last-child {
-    clip-path: none;
-    border-radius: 6px;
-  }
-
-  /* arrow container */
-  .steps-outlined.steps-panel .step-panel-arrow {
-    position: absolute;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    width: 0;
-    z-index: 2;
-  }
-  .step-panel-arrow-outer {
-    position: absolute;
-    right: -50px;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 0;
-    height: 0;
-    border-top: var(--_step-half-h, 24px) solid transparent;
-    border-bottom: var(--_step-half-h, 24px) solid transparent;
-    border-left: 50px solid var(--sl-color-neutral-300);
-  }
-  .step-panel-arrow-inner {
-    position: absolute;
-    right: -48px;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 0;
-    height: 0;
-    border-top: calc(var(--_step-half-h, 24px) - 1px) solid transparent;
-    border-bottom: calc(var(--_step-half-h, 24px) - 1px) solid transparent;
-    border-left: 48px solid var(--_step-bg, var(--sl-color-neutral-0));
-  }
-
-  /* outlined finish / process */
-  .steps-outlined.steps-panel .step-finish,
-  .steps-outlined.steps-panel .step-process {
-    border-color: var(--sl-color-primary-600);
-  }
-  .steps-outlined.steps-panel .step-process.step-pos-process {
-    background: var(--sl-color-primary-50);
-    --_step-bg: var(--sl-color-primary-50);
-  }
-  .steps-outlined.steps-panel .step-finish:last-child,
-  .steps-outlined.steps-panel .step-process:last-child {
-    border-right-color: var(--sl-color-primary-600);
-  }
-  .steps-outlined.steps-panel .step-finish .step-panel-arrow-outer,
-  .steps-outlined.steps-panel .step-process .step-panel-arrow-outer {
-    border-left-color: var(--sl-color-primary-600);
-  }
-  .steps-outlined.steps-panel .step-finish .step-title {
-    color: var(--sl-color-neutral-900);
-  }
-  .steps-outlined.steps-panel .step-process .step-title {
-    color: var(--sl-color-primary-600);
-  }
-  .steps-outlined.steps-panel .step-finish .step-subtitle,
-  .steps-outlined.steps-panel .step-finish .step-description,
-  .steps-outlined.steps-panel .step-process .step-subtitle {
-    color: var(--sl-color-neutral-500);
-  }
-  .steps-outlined.steps-panel .step-process .step-description {
-    color: var(--sl-color-primary-600);
-  }
-
-  /* outlined error */
-  .steps-outlined.steps-panel .step-error {
-    border-color: var(--sl-color-danger-600);
-  }
-  .steps-outlined.steps-panel .step-error.step-pos-process {
-    background: var(--sl-color-warning-50);
-    --_step-bg: var(--sl-color-warning-50);
-  }
-  .steps-outlined.steps-panel .step-error:last-child {
-    border-right-color: var(--sl-color-danger-600);
-  }
-  .steps-outlined.steps-panel .step-error .step-panel-arrow-outer {
-    border-left-color: var(--sl-color-danger-600);
-  }
-  .steps-outlined.steps-panel .step-error .step-title {
-    color: var(--sl-color-danger-600);
-  }
-  .steps-outlined.steps-panel .step-error .step-subtitle {
-    color: var(--sl-color-neutral-500);
-  }
-  .steps-outlined.steps-panel .step-error .step-description {
-    color: var(--sl-color-danger-600);
-  }
-
-  /* arrow color override: follows next step status */
-  .step-panel-arrow.step-arrow-finish .step-panel-arrow-outer,
-  .step-panel-arrow.step-arrow-process .step-panel-arrow-outer {
-    border-left-color: var(--sl-color-primary-600);
-  }
-  .step-panel-arrow.step-arrow-error .step-panel-arrow-outer {
-    border-left-color: var(--sl-color-danger-600);
-  }
-  .step-panel-arrow.step-arrow-wait .step-panel-arrow-outer {
-    border-left-color: var(--sl-color-neutral-300);
-  }
-
-  /* ===== inline type ===== */
-  .steps-inline {
-    padding: 0;
-    gap: 0;
-    align-items: flex-start;
-  }
-  .steps-inline .step {
-    flex: none;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 4px;
-    position: relative;
-    width: 48px;
-    height: 46px;
-    justify-content: center;
-    border-radius: 4px;
-    cursor: pointer;
-  }
-  .steps-inline .step:hover {
-    background: var(--sl-color-primary-50);
-  }
-  /* connector line between dots — on indicator so it aligns with dot center */
-  .steps-inline .step-inline-indicator {
-    position: relative;
-    z-index: 1;
-  }
-  .steps-inline .step-inline-indicator::after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 100%;
-    width: calc(48px - 8px);
-    height: 1px;
-    background: var(--sl-color-neutral-300);
-    transform: translateY(-50%);
-  }
-  .steps-inline .step:last-child .step-inline-indicator::after {
-    display: none;
-  }
-  /* dot indicator wrapper */
-  .steps-inline .step-inline-indicator {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 8px;
-    height: 8px;
-  }
-  /* dot: wait = 6x6 hollow ring */
-  .steps-inline .step-inline-dot {
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    flex-shrink: 0;
-    background: transparent;
-    border: 1px solid var(--sl-color-neutral-300);
-    box-sizing: border-box;
-  }
-  /* dot: process = 6x6 solid primary */
-  .steps-inline .step-process .step-inline-dot {
-    width: 6px;
-    height: 6px;
-    background: var(--sl-color-primary-600);
-    border: none;
-  }
-  /* dot: finish = 6x6 solid success */
-  .steps-inline .step-finish .step-inline-dot {
-    width: 6px;
-    height: 6px;
-    background: var(--sl-color-success-600);
-    border: none;
-  }
-  /* dot: error = 6x6 solid danger */
-  .steps-inline .step-error .step-inline-dot {
-    width: 6px;
-    height: 6px;
-    background: var(--sl-color-danger-600);
-    border: none;
-  }
-  /* title */
-  .steps-inline .step-title {
-    font-size: 12px;
-    font-weight: 400;
-    color: var(--sl-color-neutral-900);
-    white-space: nowrap;
-  }
-  .steps-inline .step-wait .step-title {
-    color: var(--sl-color-neutral-500);
-  }
-  .steps-inline .step-icon,
-  .steps-inline .step-tail,
-  .steps-inline .step-main {
-    display: none;
-  }
-
-  /* ===== vertical orientation ===== */
-  .steps-vertical {
-    flex-direction: column;
-  }
-  .steps-vertical .step {
-    flex: none;
-    flex-direction: row;
-    align-items: flex-start;
-    position: relative;
-  }
-  .steps-vertical .step:last-child {
-    flex: none;
-  }
-  .steps-vertical .step-tail {
-    display: none;
-  }
-  .steps-vertical .step-main {
-    padding-bottom: 24px;
-    position: relative;
-  }
-  .steps-vertical:not(.steps-dot):not(.steps-inline) .step:not(:last-child)::before {
-    content: '';
-    position: absolute;
-    top: calc(32px + 6px);
-    bottom: 6px;
-    left: 16px;
-    width: 1px;
-    background: var(--sl-color-neutral-300);
-  }
-  .steps-vertical:not(.steps-dot):not(.steps-inline).steps-small .step:not(:last-child)::before {
-    top: calc(24px + 6px);
-    left: 12px;
-  }
-  /* vertical line follows next step status */
-  .steps-vertical:not(.steps-dot):not(.steps-inline) .step-next-finish:not(:last-child)::before,
-  .steps-vertical:not(.steps-dot):not(.steps-inline) .step-next-process:not(:last-child)::before {
-    background: var(--sl-color-primary-600);
-  }
-  .steps-vertical:not(.steps-dot):not(.steps-inline) .step-next-error:not(:last-child)::before {
-    background: var(--sl-color-danger-600);
-  }
-
-  /* vertical dot */
-  .steps-vertical.steps-dot .step {
-    flex-direction: row;
-    align-items: flex-start;
-    gap: 12px;
-    position: relative;
-    padding-left: 22px;
-  }
-  .steps-vertical.steps-dot .step-dot-track {
-    display: none;
-  }
-  .steps-vertical.steps-dot .step-dot-text {
-    text-align: start;
-    padding-bottom: 24px;
-  }
-  .steps-vertical.steps-dot .step:last-child .step-dot-text {
-    padding-bottom: 0;
-  }
-  .steps-vertical.steps-dot .step-dot-text::before {
-    content: '';
-    display: block;
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background: var(--sl-color-neutral-300);
-    position: absolute;
-    left: 1px;
-    top: calc(var(--sl-font-size-medium) * 0.7 - 4px);
-  }
-  .steps-vertical.steps-dot .step:not(:last-child)::after {
-    content: '';
-    position: absolute;
-    left: 4px;
-    top: calc(var(--sl-font-size-medium) * 0.7 + 12px);
-    bottom: 8px;
-    width: 1px;
-    background: var(--sl-color-neutral-300);
-  }
-  .steps-vertical.steps-dot .step-finish .step-dot-text::before,
-  .steps-vertical.steps-dot .step-process .step-dot-text::before {
-    background: var(--sl-color-primary-600);
-  }
-  .steps-vertical.steps-dot .step-process .step-dot-text::before {
-    width: 10px;
-    height: 10px;
-    left: 0;
-    top: calc(var(--sl-font-size-medium) * 0.7 - 5px);
-  }
-  .steps-vertical.steps-dot .step-error .step-dot-text::before {
-    background: var(--sl-color-danger-600);
-  }
-  .steps-vertical.steps-dot .step-error.step-pos-process .step-dot-text::before {
-    width: 10px;
-    height: 10px;
-    left: 0;
-    top: calc(var(--sl-font-size-medium) * 0.7 - 5px);
-  }
-  /* vertical dot outlined */
-  .steps-outlined.steps-vertical.steps-dot .step-dot-text::before {
-    background: var(--sl-color-neutral-0);
-    border: 2px solid var(--sl-color-neutral-300);
-  }
-  .steps-outlined.steps-vertical.steps-dot .step-process .step-dot-text::before,
-  .steps-outlined.steps-vertical.steps-dot .step-finish .step-dot-text::before {
-    background: var(--sl-color-neutral-0);
-    border-color: var(--sl-color-primary-600);
-  }
-  .steps-outlined.steps-vertical.steps-dot .step-error .step-dot-text::before {
-    background: var(--sl-color-neutral-0);
-    border-color: var(--sl-color-danger-600);
-  }
-  /* vertical dot: line follows next step status */
-  .steps-vertical.steps-dot .step-next-finish:not(:last-child)::after,
-  .steps-vertical.steps-dot .step-next-process:not(:last-child)::after {
-    background: var(--sl-color-primary-600);
-  }
-  .steps-vertical.steps-dot .step-next-error:not(:last-child)::after {
-    background: var(--sl-color-danger-600);
-  }
-
-  /* vertical panel */
-  .steps-vertical.steps-panel {
-    flex-direction: column;
-  }
-`;
-
-export {
-  steps_styles_default
-};