@kdcloudjs/shoelace 1.0.44 → 1.0.46

package/dist/chunks/chunk.KN2SW5DA.js

@@ -1,821 +0,0 @@
-// src/components/steps/steps.styles.ts
-import { css } from "lit";
-var steps_styles_default = css`
-  :host {
-    display: block;
-  }
-
-  .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 mode */
-  .steps-clickable .step {
-    cursor: pointer;
-  }
-
-  .steps-clickable .step:hover .step-title {
-    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);
-  }
-
-  /* process 状态图标已经是蓝底白字，hover 不改变 */
-  .steps-clickable .step-process:hover .step-icon {
-    border-color: var(--sl-color-primary-600);
-    color: var(--sl-color-neutral-0);
-  }
-
-  .steps-clickable .step:hover .step-description,
-  .steps-clickable .step:hover .step-subtitle {
-    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: 14px;
-    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-0);
-    border: 1px solid var(--sl-color-neutral-400);
-    color: var(--sl-color-neutral-500);
-  }
-
-  .step-process .step-icon {
-    background: var(--sl-color-primary-600);
-    border: 1px solid var(--sl-color-primary-600);
-    color: var(--sl-color-neutral-0);
-  }
-
-  .step-finish .step-icon {
-    background: var(--sl-color-neutral-0);
-    border: 1px solid var(--sl-color-primary-600);
-    color: var(--sl-color-primary-600);
-  }
-
-  .step-error .step-icon {
-    background: var(--sl-color-neutral-0);
-    border: 1px solid var(--sl-color-danger-600);
-    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;
-  }
-
-  /* main content area — takes remaining width */
-  .step-main {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    flex: 1;
-    min-width: 0;
-  }
-
-  /* title row with tail inline */
-  .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: 600;
-    color: var(--sl-color-neutral-700);
-    flex-shrink: 0;
-  }
-
-  .step-process .step-title {
-    color: var(--sl-color-neutral-900);
-  }
-  .step-wait .step-title {
-    color: var(--sl-color-neutral-500);
-  }
-  .step-error .step-title {
-    color: var(--sl-color-danger-600);
-  }
-
-  .step-error .step-description {
-    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;
-  }
-
-  /* tail — sits inside title row, fills remaining space */
-  .step-tail {
-    flex: 1;
-    height: 1px;
-    background: var(--sl-color-neutral-300);
-    margin-inline-end: 8px;
-  }
-
-  .step-finish .step-tail {
-    background: var(--sl-color-primary-600);
-  }
-
-  /* custom icon — no circle, just the icon */
-  .step-icon.step-icon-custom {
-    background: none !important;
-    border: none !important;
-    font-size: 32px;
-  }
-
-  .step-finish .step-icon-custom {
-    color: var(--sl-color-primary-600);
-  }
-  .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);
-  }
-
-  .step-description {
-    font-size: var(--sl-font-size-small);
-    color: var(--sl-color-neutral-500);
-    line-height: 1.5;
-  }
-
-  /* ========== 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 bottom ========== */
-  .steps-title-vertical .step {
-    flex-direction: column;
-    align-items: center;
-    gap: 8px;
-    position: relative;
-  }
-
-  .steps-title-vertical .step:last-child {
-    flex: 1;
-  }
-
-  /* hide the inline tail in title-row */
-  .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;
-  }
-
-  /* connector line via ::before on the step, at icon center height */
-  .steps-title-vertical .step::before {
-    content: '';
-    position: absolute;
-    top: 16px;
-    left: 0;
-    right: 0;
-    height: 1px;
-    background: var(--sl-color-neutral-300);
-  }
-
-  /* first step: line only right half */
-  .steps-title-vertical .step:first-child::before {
-    left: 50%;
-  }
-
-  /* last step: line only left half */
-  .steps-title-vertical .step:last-child::before {
-    right: 50%;
-  }
-
-  .steps-title-vertical .step-finish::before {
-    background: var(--sl-color-primary-600);
-  }
-
-  .steps-title-vertical .step-process::before {
-    background: linear-gradient(to right, var(--sl-color-primary-600) 50%, var(--sl-color-neutral-300) 50%);
-  }
-
-  .steps-title-vertical .step-process:first-child::before {
-    background: var(--sl-color-neutral-300);
-  }
-
-  .steps-title-vertical .step-error::before {
-    background: linear-gradient(to right, var(--sl-color-primary-600) 50%, var(--sl-color-neutral-300) 50%);
-  }
-
-  /* icon sits above the line */
-  .steps-title-vertical .step-icon {
-    z-index: 1;
-  }
-
-  /* small size: icon center at 12px */
-  .steps-title-vertical.steps-small .step::before {
-    top: 12px;
-  }
-
-  /* ========== dot type ========== */
-  .steps-dot .step {
-    flex-direction: column;
-    align-items: center;
-    gap: 8px;
-    overflow: visible;
-  }
-
-  .steps-dot {
-    padding: 0;
-  }
-
-  .steps-dot .step:last-child {
-    flex: 1;
-  }
-
-  .steps-dot .step-icon,
-  .steps-dot .step-main {
-    display: none;
-  }
-
-  /* track: relative container, line drawn via pseudo-element */
-  .steps-dot .step-dot-track {
-    position: relative;
-    width: 100%;
-    height: 10px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  /* connector line spans full width behind the dot */
-  .steps-dot .step-dot-track::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 0;
-    right: 0;
-    height: 1px;
-    background: var(--sl-color-neutral-300);
-    transform: translateY(-50%);
-  }
-
-  /* first step: no line left of dot */
-  .steps-dot .step:first-child .step-dot-track::before {
-    left: 50%;
-  }
-
-  /* last step: no line right of dot */
-  .steps-dot .step:last-child .step-dot-track::before {
-    right: 50%;
-  }
-
-  .steps-dot .step-dot-indicator {
-    position: relative;
-    z-index: 1;
-    width: 10px;
-    height: 10px;
-    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:last-child {
-    flex: 1;
-  }
-
-  /* finish: dot + line colored */
-  .steps-dot .step-finish .step-dot-indicator {
-    background: var(--sl-color-primary-600);
-  }
-
-  .steps-dot .step-finish .step-dot-track::before {
-    background: var(--sl-color-primary-600);
-  }
-
-  /* process: dot colored, left half blue (from finish), right half gray (to wait) */
-  .steps-dot .step-process .step-dot-indicator {
-    background: var(--sl-color-primary-600);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sl-color-primary-600) 20%, transparent);
-  }
-
-  .steps-dot .step-process .step-dot-track::before {
-    background: linear-gradient(to right, var(--sl-color-primary-600) 50%, var(--sl-color-neutral-300) 50%);
-  }
-
-  /* first step as process: no finish before it, full gray */
-  .steps-dot .step-process:first-child .step-dot-track::before {
-    background: var(--sl-color-neutral-300);
-  }
-
-  /* last step as process/error: only left half visible (right:50%), make it all blue */
-  .steps-dot .step-process:last-child .step-dot-track::before {
-    background: var(--sl-color-primary-600);
-  }
-
-  /* last step as process AND first step: no line at all, keep gray */
-  .steps-dot .step-process:first-child:last-child .step-dot-track::before {
-    background: var(--sl-color-neutral-300);
-  }
-
-  /* error: same as process — left half blue */
-  .steps-dot .step-error .step-dot-indicator {
-    background: var(--sl-color-danger-600);
-  }
-
-  .steps-dot .step-error .step-dot-track::before {
-    background: linear-gradient(to right, var(--sl-color-primary-600) 50%, var(--sl-color-neutral-300) 50%);
-  }
-
-  .steps-dot .step-error:first-child .step-dot-track::before {
-    background: var(--sl-color-neutral-300);
-  }
-
-  .steps-dot .step-error:last-child .step-dot-track::before {
-    background: var(--sl-color-primary-600);
-  }
-
-  .steps-dot .step-error:first-child:last-child .step-dot-track::before {
-    background: var(--sl-color-neutral-300);
-  }
-
-  /* outlined variant: hollow dots */
-  .steps-outlined.steps-dot .step-dot-indicator {
-    background: var(--sl-color-neutral-0);
-    border: 1.5px solid var(--sl-color-neutral-300);
-  }
-
-  .steps-outlined.steps-dot .step-process .step-dot-indicator {
-    background: var(--sl-color-neutral-0);
-    border-color: var(--sl-color-primary-600);
-    box-shadow: none;
-  }
-
-  .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-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;
-    background: var(--sl-color-neutral-50);
-    border-radius: var(--sl-border-radius-medium);
-    overflow: hidden;
-  }
-
-  .steps-navigation .step {
-    flex-direction: row;
-    align-items: center;
-    gap: 0;
-    padding: 12px 16px;
-    cursor: pointer;
-    position: relative;
-    border-bottom: 3px solid transparent;
-    transition: background-color 0.2s;
-  }
-
-  .steps-navigation .step:last-child {
-    flex: 1;
-  }
-
-  .steps-navigation .step:hover {
-    background: var(--sl-color-neutral-100);
-  }
-
-  .steps-navigation .step-process {
-    border-bottom-color: var(--sl-color-primary-600);
-    background: var(--sl-color-neutral-0);
-  }
-
-  .steps-navigation .step-finish {
-    border-bottom-color: var(--sl-color-primary-600);
-  }
-
-  .steps-navigation .step-error {
-    border-bottom-color: var(--sl-color-danger-600);
-  }
-
-  .steps-navigation .step-nav-content {
-    display: flex;
-    align-items: flex-start;
-    gap: 8px;
-    flex: 1;
-  }
-
-  .steps-navigation .step-nav-text {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-  }
-
-  .steps-navigation .step-nav-arrow {
-    width: 0;
-    height: 0;
-    border-top: 6px solid transparent;
-    border-bottom: 6px solid transparent;
-    border-left: 6px solid var(--sl-color-neutral-300);
-    margin-left: auto;
-    flex-shrink: 0;
-  }
-
-  .steps-navigation .step:last-child .step-nav-arrow {
-    display: none;
-  }
-
-  .steps-navigation .step-tail,
-  .steps-navigation .step-main {
-    display: none;
-  }
-
-  /* ========== panel type ========== */
-  .steps-panel {
-    padding: 0;
-    gap: 8px;
-  }
-
-  .steps-panel .step {
-    background: var(--sl-color-neutral-50);
-    border-radius: var(--sl-border-radius-medium);
-    padding: 16px;
-    border: 1px solid var(--sl-color-neutral-200);
-    transition:
-      border-color 0.2s,
-      background-color 0.2s;
-  }
-
-  .steps-panel .step:last-child {
-    flex: 1;
-  }
-
-  .steps-panel .step-process {
-    background: var(--sl-color-primary-50, #f0f5ff);
-    border-color: var(--sl-color-primary-600);
-  }
-
-  .steps-panel .step-error {
-    border-color: var(--sl-color-danger-600);
-  }
-
-  .steps-panel .step-panel-content {
-    display: flex;
-    align-items: flex-start;
-    gap: 12px;
-  }
-
-  .steps-panel .step-panel-text {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-  }
-
-  .steps-panel .step-tail,
-  .steps-panel .step-main {
-    display: none;
-  }
-
-  /* ========== inline type ========== */
-  .steps-inline {
-    padding: 0;
-    gap: 0;
-    align-items: center;
-  }
-
-  .steps-inline .step {
-    flex: none;
-    align-items: center;
-    gap: 6px;
-  }
-
-  .steps-inline .step::after {
-    content: '';
-    display: inline-block;
-    width: 24px;
-    height: 1px;
-    background: var(--sl-color-neutral-300);
-    margin: 0 4px;
-  }
-
-  .steps-inline .step:last-child::after {
-    display: none;
-  }
-
-  .steps-inline .step-finish::after {
-    background: var(--sl-color-primary-600);
-  }
-
-  .steps-inline .step-inline-dot {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    flex-shrink: 0;
-    background: var(--sl-color-neutral-300);
-  }
-
-  .steps-inline .step-process .step-inline-dot {
-    background: var(--sl-color-primary-600);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sl-color-primary-600) 20%, transparent);
-  }
-
-  .steps-inline .step-finish .step-inline-dot {
-    background: var(--sl-color-primary-600);
-  }
-
-  .steps-inline .step-error .step-inline-dot {
-    background: var(--sl-color-danger-600);
-  }
-
-  .steps-inline .step-title {
-    font-size: var(--sl-font-size-small);
-    font-weight: 500;
-  }
-
-  .steps-inline .step-icon,
-  .steps-inline .step-tail,
-  .steps-inline .step-main {
-    display: none;
-  }
-
-  .steps-outlined .step-process .step-icon {
-    background: #e6f4ff;
-    border: 1px solid #1677ff;
-    color: #1677ff;
-  }
-
-  /* ========== vertical orientation ========== */
-  .steps-vertical {
-    flex-direction: column;
-  }
-
-  .steps-vertical .step {
-    flex: none;
-    flex-direction: row;
-    align-items: flex-start;
-  }
-
-  .steps-vertical .step:last-child {
-    flex: none;
-  }
-
-  /* vertical tail: vertical line between steps */
-  .steps-vertical .step-tail {
-    display: none;
-  }
-
-  .steps-vertical .step-main {
-    padding-bottom: 24px;
-    position: relative;
-  }
-
-  /* vertical connector line on the icon column */
-  .steps-vertical .step:not(:last-child) .step-icon::after {
-    content: '';
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 1px;
-    height: calc(100% + 24px);
-    background: var(--sl-color-neutral-300);
-  }
-
-  .steps-vertical .step-finish:not(:last-child) .step-icon::after {
-    background: var(--sl-color-primary-600);
-  }
-
-  /* dot type vertical — reuse default vertical layout, just swap icon for dot */
-  .steps-vertical.steps-dot .step {
-    flex-direction: row;
-    align-items: flex-start;
-    gap: 12px;
-  }
-
-  /* hide the horizontal track, show dot as inline icon */
-  .steps-vertical.steps-dot .step-dot-track {
-    display: none;
-  }
-
-  /* show a dot-sized icon element instead */
-  .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;
-  }
-
-  /* use ::before on step-dot-text to create the dot in the icon position */
-  .steps-vertical.steps-dot .step-dot-text::before {
-    content: '';
-    display: block;
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    background: var(--sl-color-neutral-300);
-    position: absolute;
-    left: 0;
-    /* center with title: title line-height * 0.5 - dot-radius */
-    top: calc(var(--sl-font-size-medium) * 0.7 - 5px);
-  }
-
-  .steps-vertical.steps-dot .step {
-    position: relative;
-    padding-left: 22px;
-  }
-
-  /* connector line from dot */
-  .steps-vertical.steps-dot .step:not(:last-child)::after {
-    content: '';
-    position: absolute;
-    left: 4px;
-    top: calc(var(--sl-font-size-medium) * 0.7 + 5px);
-    bottom: 0;
-    width: 1px;
-    background: var(--sl-color-neutral-300);
-  }
-
-  .steps-vertical.steps-dot .step-finish .step-dot-text::before {
-    background: var(--sl-color-primary-600);
-  }
-
-  .steps-vertical.steps-dot .step-process .step-dot-text::before {
-    background: var(--sl-color-primary-600);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sl-color-primary-600) 20%, transparent);
-  }
-
-  .steps-vertical.steps-dot .step-error .step-dot-text::before {
-    background: var(--sl-color-danger-600);
-  }
-
-  .steps-vertical.steps-dot .step-finish:not(:last-child)::after {
-    background: var(--sl-color-primary-600);
-  }
-
-  /* navigation vertical */
-  .steps-vertical.steps-navigation {
-    flex-direction: column;
-  }
-
-  .steps-vertical.steps-navigation .step {
-    border-bottom: none;
-    border-inline-start: 3px solid transparent;
-  }
-
-  .steps-vertical.steps-navigation .step-process {
-    border-bottom-color: transparent;
-    border-inline-start-color: var(--sl-color-primary-600);
-  }
-
-  .steps-vertical.steps-navigation .step-finish {
-    border-bottom-color: transparent;
-    border-inline-start-color: var(--sl-color-primary-600);
-  }
-
-  .steps-vertical.steps-navigation .step-error {
-    border-bottom-color: transparent;
-    border-inline-start-color: var(--sl-color-danger-600);
-  }
-
-  .steps-vertical.steps-navigation .step-nav-arrow {
-    display: none;
-  }
-
-  /* panel vertical */
-  .steps-vertical.steps-panel {
-    flex-direction: column;
-  }
-
-  /* inline vertical */
-  .steps-vertical.steps-inline {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .steps-vertical.steps-inline .step::after {
-    content: '';
-    display: block;
-    width: 1px;
-    height: 16px;
-    background: var(--sl-color-neutral-300);
-    margin: 4px 0 4px 3px;
-  }
-
-  .steps-vertical.steps-inline .step:last-child::after {
-    display: none;
-  }
-
-  .steps-vertical.steps-inline .step-finish::after {
-    background: var(--sl-color-primary-600);
-  }
-`;
-
-export {
-  steps_styles_default
-};