{"version":3,"file":"stepper.module.mjs","names":[],"sources":["../../../../package/common/stepper/stepper.module.pcss"],"sourcesContent":[".stepper {\n  /* Shape tokens resolved once, each with a built-in fallback. Set any of the public\n     `--stepper-*` variables via ThemeProvider (theme-wide) or `style` (per instance) to\n     override. The colours come from `color`, through the --tone properties. */\n  --custom-stepper-marker-size: var(--stepper-marker-size, 40px);\n  --custom-stepper-marker-radius: var(--stepper-marker-radius, var(--default-border-radius));\n  --custom-stepper-connector-thickness: var(--stepper-connector-thickness, 3px);\n  --custom-stepper-connector-idle-thickness: var(--stepper-connector-idle-thickness, 1px);\n  --custom-stepper-gap: var(--stepper-gap, 12px);\n\n  display: flex;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  color: var(--text-color);\n\n  /* Keeps a horizontal connector's z-index: -1 inside the stepper, rather than behind whatever\n     the stepper sits on. */\n  isolation: isolate;\n\n  &-vertical {\n    flex-direction: column;\n  }\n\n  &-step {\n    position: relative;\n  }\n\n  /* Entry: the marker and its labels. A <button> when clickable, so it resets one. */\n  &-entry {\n    display: flex;\n    gap: var(--custom-stepper-gap);\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0;\n    background: none;\n    color: inherit;\n    font: inherit;\n    text-align: inherit;\n    user-select: none;\n  }\n\n  &-clickable {\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  /* Not on -clickable: the current step is a focusable button too, disabled through ARIA. */\n  &-entry:focus-visible {\n    outline: 2px solid var(--focus-border-color, var(--primary-color));\n    outline-offset: 4px;\n    border-radius: var(--default-border-radius);\n  }\n\n  &-entry-disabled {\n    opacity: 0.5;\n  }\n\n  /* Marker --------------------------------------------------------------- */\n  &-entry-number {\n    width: var(--custom-stepper-marker-size);\n    height: var(--custom-stepper-marker-size);\n    box-sizing: border-box;\n    flex-shrink: 0;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border: 1px solid var(--border-color);\n    color: var(--text-dark);\n    border-radius: var(--custom-stepper-marker-radius);\n    font-weight: 600;\n    font-size: calc(var(--custom-stepper-marker-size) * 0.4);\n    box-shadow: inset 0 0 0 0 var(--tone-fill);\n    transition:\n      border-color 0.4s,\n      color 0.4s,\n      background-color 0.4s,\n      box-shadow 0.4s,\n      transform 0.4s;\n  }\n\n  &-entry-reached &-entry-number {\n    border: 2px solid var(--tone);\n    color: var(--tone-text);\n    transform: scale3d(1.1, 1.1, 1);\n  }\n\n  /* Fills from the border inward, an inset shadow grown past the centre. 0.75 of the marker is\n     the old 30px at the default 40px, so the fill closes before the transition ends. */\n  &-entry-done &-entry-number {\n    border-color: var(--tone-fill);\n    color: var(--tone-contrast);\n    background-color: var(--tone-fill);\n    box-shadow: inset 0 0 0 calc(var(--custom-stepper-marker-size) * 0.75) var(--tone-fill);\n    transform: none;\n  }\n\n  /* The marker carries the error tone class itself, so --tone is the error colour here. */\n  &-entry-error &-entry-number {\n    border: 2px solid var(--tone);\n    color: var(--tone-text);\n    transform: none;\n  }\n\n  /* 1.25em of the marker's font-size, which is 0.4 of the marker: half the marker. */\n  &-checkmark {\n    width: 1.25em;\n    height: 1.25em;\n  }\n\n  &-checkmark path {\n    stroke: currentcolor;\n    stroke-dasharray: 5;\n    stroke-dashoffset: 5;\n    animation: showCheckmark 0.4s 0.2s forwards;\n  }\n\n  /* Labels --------------------------------------------------------------- */\n  &-entry-labels {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    min-width: 0;\n    align-self: center;\n    overflow-wrap: anywhere;\n  }\n\n  &-entry-label {\n    color: var(--text-color);\n  }\n\n  &-description {\n    color: var(--text-dark);\n    font-size: var(--text-small-font-size, 0.85em);\n  }\n\n  &-optional {\n    color: var(--text-light);\n    font-size: var(--text-small-font-size, 0.85em);\n    font-style: italic;\n  }\n\n  &-visually-hidden {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    margin: -1px;\n    padding: 0;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  /* Connector ------------------------------------------------------------ */\n  &-connector {\n    height: var(--custom-stepper-connector-idle-thickness);\n    background-size: 200% 100%;\n    background-image: linear-gradient(90deg, var(--tone) 0 50%, var(--border-color) 50% 100%);\n    background-position: 100% 0;\n    transition:\n      background-position 0.6s,\n      height 0.4s,\n      width 0.4s;\n\n    &-filled {\n      height: var(--custom-stepper-connector-thickness);\n      background-position: 0 0;\n    }\n  }\n\n  /* Horizontal ------------------------------------------------------------ */\n  &:not(.stepper-vertical) {\n    align-items: flex-start;\n  }\n\n  &-label-top:not(.stepper-vertical) {\n    align-items: flex-end;\n  }\n\n  /* Equal columns, so a label wraps within its step's share of the width instead of spilling\n     past the stepper's edge or into the next label. */\n  &:not(.stepper-vertical) &-step {\n    flex: 1 1 0;\n    min-width: 0;\n    display: flex;\n    justify-content: center;\n  }\n\n  &:not(.stepper-vertical) &-entry {\n    flex-direction: column;\n    align-items: center;\n    min-width: 0;\n    gap: calc(var(--custom-stepper-gap) / 2);\n    text-align: center;\n  }\n\n  &-label-top:not(.stepper-vertical) &-entry {\n    flex-direction: column-reverse;\n  }\n\n  /* From this marker's edge to the next one's: the steps are equal columns, so the next marker's\n     centre is 100% further along. Under the markers (z-index), because the current one's\n     scale(1.1) reaches over the connector's ends. */\n  &:not(.stepper-vertical) &-connector {\n    position: absolute;\n    z-index: -1;\n    top: calc(var(--custom-stepper-marker-size) / 2);\n    left: calc(50% + var(--custom-stepper-marker-size) / 2);\n    right: calc(var(--custom-stepper-marker-size) / 2 - 50%);\n    translate: 0 -50%;\n  }\n\n  &-label-top:not(.stepper-vertical) &-connector {\n    top: auto;\n    bottom: calc(var(--custom-stepper-marker-size) / 2);\n    translate: 0 50%;\n  }\n\n  /* Vertical -------------------------------------------------------------- */\n  &-vertical &-step {\n    display: grid;\n    grid-template-columns: var(--custom-stepper-marker-size) 1fr;\n    column-gap: var(--custom-stepper-gap);\n  }\n\n  &-vertical &-entry {\n    grid-column: 1 / -1;\n    align-items: stretch;\n  }\n\n  &-marker-cell {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    flex-shrink: 0;\n    width: var(--custom-stepper-marker-size);\n  }\n\n  &-rail-segment {\n    flex: 1 1 0;\n    min-height: 0;\n    width: var(--custom-stepper-connector-idle-thickness);\n    background-size: 100% 200%;\n    background-image: linear-gradient(180deg, var(--tone) 0 50%, var(--border-color) 50% 100%);\n    background-position: 0 100%;\n    transition:\n      background-position 0.4s,\n      width 0.4s;\n  }\n\n  &-rail-filled {\n    width: var(--custom-stepper-connector-thickness);\n    background-position: 0 0;\n  }\n\n  &-rail-hidden {\n    background-image: none;\n    background-color: transparent;\n  }\n\n  &-vertical &-connector {\n    grid-column: 1;\n    justify-self: center;\n    width: var(--custom-stepper-connector-idle-thickness);\n    height: 100%;\n    min-height: 24px;\n    background-size: 100% 200%;\n    background-image: linear-gradient(180deg, var(--tone) 0 50%, var(--border-color) 50% 100%);\n    background-position: 0 100%;\n    transition:\n      background-position 0.4s,\n      width 0.4s;\n\n    &-filled {\n      width: var(--custom-stepper-connector-thickness);\n      background-position: 0 0;\n    }\n  }\n\n  &-vertical &-content {\n    grid-column: 2;\n  }\n\n  &-vertical.stepper-label-left &-step {\n    grid-template-columns: 1fr var(--custom-stepper-marker-size);\n  }\n\n  &-vertical.stepper-label-left &-entry {\n    flex-direction: row-reverse;\n  }\n\n  &-vertical.stepper-label-left &-connector {\n    grid-column: 2;\n  }\n\n  &-vertical.stepper-label-left &-content {\n    grid-column: 1;\n    text-align: right;\n  }\n\n  &-content {\n    overflow: hidden;\n    transition: height 0.25s ease;\n  }\n\n  &-content-inner {\n    padding: 4px 0 12px;\n  }\n\n  /* Style types ------------------------------------------------------------ */\n  &-outlined &-entry-done &-entry-number {\n    border-color: var(--tone);\n    color: var(--tone-text);\n    background-color: transparent;\n    box-shadow: none;\n  }\n\n  &-dots {\n    --stepper-marker-size: 16px;\n    --stepper-marker-radius: 50%;\n    --stepper-gap: 10px;\n\n    & .stepper-entry-number {\n      font-size: 0;\n      border-width: 2px;\n    }\n\n    /* The dots variant shows no marker content at all: the number is killed by\n       font-size: 0 above, and every element child (the checkmark, a FontAwesome\n       icon, a custom icon element) is hidden here — matching on `svg` alone would\n       miss a custom icon that isn't one. */\n    & .stepper-entry-number > * {\n      display: none;\n    }\n  }\n}\n\n@keyframes showCheckmark {\n  to {\n    stroke-dashoffset: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .stepper-content,\n  .stepper-entry-number,\n  .stepper-connector,\n  .stepper-rail-segment {\n    transition: none;\n  }\n\n  .stepper-checkmark path {\n    animation: none;\n    stroke-dashoffset: 0;\n  }\n}\n"],"mappings":""}