@kdcloudjs/shoelace 1.0.50 → 1.0.52

package/dist/chunks/chunk.55KCE555.js

@@ -0,0 +1,1095 @@
+// src/components/steps/steps.styles.ts
+import { css } from "lit";
+var steps_styles_default = css`
+  :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;
+    white-space: nowrap;
+  }
+  .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;
+    max-width: 140px;
+    word-break: break-word;
+    overflow-wrap: break-word;
+  }
+  .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;
+  }
+
+  /* ===== RTL support ===== */
+  .steps-rtl {
+    direction: rtl;
+  }
+
+  /* Icons and numbers should not mirror — keep LTR rendering */
+  .steps-rtl .step-icon {
+    /* @noflip */
+    direction: ltr;
+  }
+  .steps-rtl .step-icon sl-icon,
+  .steps-rtl .step-icon svg {
+    /* @noflip */
+    transform: none;
+  }
+
+  /* Centered text stays centered (title-vertical, dot, inline) */
+  .steps-rtl.steps-title-vertical .step-main {
+    text-align: center;
+  }
+  .steps-rtl.steps-dot .step-dot-text {
+    text-align: center;
+  }
+  .steps-rtl.steps-inline .step {
+    align-items: center;
+  }
+
+  /* Default horizontal: flex-direction reversed via dir=rtl on the container,
+     but the tail line margin needs to flip */
+  .steps-rtl .step-tail {
+    margin-inline-end: 8px;
+  }
+
+  /* Vertical default: connector line flips to right side */
+  .steps-rtl.steps-vertical:not(.steps-dot):not(.steps-inline) .step:not(:last-child)::before {
+    left: auto;
+    right: 16px;
+  }
+  .steps-rtl.steps-vertical:not(.steps-dot):not(.steps-inline).steps-small .step:not(:last-child)::before {
+    left: auto;
+    right: 12px;
+  }
+
+  /* Vertical dot: flip dot and line to right side */
+  .steps-rtl.steps-vertical.steps-dot .step {
+    padding-left: 0;
+    padding-right: 22px;
+  }
+  .steps-rtl.steps-vertical.steps-dot .step-dot-text::before {
+    left: auto;
+    right: 1px;
+  }
+  .steps-rtl.steps-vertical.steps-dot .step-process .step-dot-text::before {
+    left: auto;
+    right: 0;
+  }
+  .steps-rtl.steps-vertical.steps-dot .step-error.step-pos-process .step-dot-text::before {
+    left: auto;
+    right: 0;
+  }
+  .steps-rtl.steps-vertical.steps-dot .step:not(:last-child)::after {
+    left: auto;
+    right: 4px;
+  }
+
+  /* Navigation: arrow flips to left side */
+  .steps-rtl.steps-navigation .step-nav-arrow {
+    right: auto;
+    left: -4px;
+    transform: translateY(-50%) scaleX(-1);
+  }
+
+  /* Panel type: keep LTR to avoid clip-path/arrow issues */
+  .steps-rtl.steps-panel {
+    direction: ltr;
+  }
+
+  /* Title-vertical: flip pseudo-element lines */
+  .steps-rtl.steps-title-vertical .step::before {
+    left: auto;
+    right: 0;
+    left: unset;
+  }
+  .steps-rtl.steps-title-vertical .step::after {
+    right: auto;
+    left: 0;
+    right: unset;
+  }
+  .steps-rtl.steps-title-vertical .step::before {
+    right: 0;
+    left: calc(50% + 24px);
+  }
+  .steps-rtl.steps-title-vertical .step::after {
+    left: 0;
+    right: calc(50% + 24px);
+  }
+  .steps-rtl.steps-title-vertical.steps-small .step::before {
+    left: calc(50% + 20px);
+  }
+  .steps-rtl.steps-title-vertical.steps-small .step::after {
+    right: calc(50% + 20px);
+  }
+
+  /* Inline: connector line flips */
+  .steps-rtl.steps-inline .step-inline-indicator::after {
+    left: auto;
+    right: 100%;
+  }
+`;
+
+export {
+  steps_styles_default
+};