banhaten 0.3.0 → 0.5.0

package/registry/components/expanded/steps.css

@@ -1,356 +1,356 @@
-.ds-steps,
-.ds-horizontal-step-item,
-.ds-vertical-step-item {
-  --steps-bg-inverse: var(--bh-bg-inverse);
-  --steps-bg-slot: var(--bh-bg-accent-purple-subtle);
-  --steps-border-default: var(--bh-border-default);
-  --steps-border-purple: var(--bh-border-accent-purple-strong);
-  --steps-content-default: var(--bh-content-default);
-  --steps-content-inverse: var(--bh-content-inverse);
-  --steps-content-on-brand: var(--bh-content-on-brand);
-  --steps-content-subtle: var(--bh-content-subtle);
-  --steps-interactive-brand: var(--bh-interactive-brand-default);
-  --steps-interactive-secondary: var(--bh-interactive-secondary-default);
-  --steps-radius-control: var(--bh-control-default);
-  --steps-radius-full: var(--bh-radius-full);
-  --steps-radius-sm: var(--bh-radius-sm-4);
-  --steps-space-xs: var(--bh-space-xs-4);
-  --steps-space-md: var(--bh-space-md-8);
-  --steps-space-xl: var(--bh-space-xl-12);
-  --steps-space-5xl: var(--bh-space-5xl-24);
-
-  box-sizing: border-box;
-  color: var(--steps-content-default);
-  font-family: var(--bh-font-family);
-  letter-spacing: var(--bh-text-base-letter-spacing);
-}
-
-.ds-steps *,
-.ds-steps *::before,
-.ds-steps *::after,
-.ds-horizontal-step-item,
-.ds-horizontal-step-item *,
-.ds-horizontal-step-item *::before,
-.ds-horizontal-step-item *::after,
-.ds-vertical-step-item,
-.ds-vertical-step-item *,
-.ds-vertical-step-item *::before,
-.ds-vertical-step-item *::after {
-  box-sizing: border-box;
-}
-
-.ds-steps--horizontal {
-  display: flex;
-  align-items: center;
-  width: min(var(--bh-steps-horizontal-width), 100%);
-  min-width: 0;
-}
-
-.ds-steps--vertical {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  width: min(var(--bh-steps-indicator-panel-width), 100%);
-  min-width: 0;
-}
-
-.ds-steps--horizontal > .ds-horizontal-step-item {
-  flex: 1 0 0;
-  min-width: 0;
-}
-
-.ds-horizontal-step-item {
-  --steps-item-align: start;
-
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  gap: var(--steps-space-xl);
-  width: var(--bh-steps-vertical-width);
-  min-width: 0;
-  color: var(--steps-content-default);
-  font-family: var(--bh-font-family);
-  letter-spacing: var(--bh-text-base-letter-spacing);
-}
-
-.ds-horizontal-step-item--middle {
-  --steps-item-align: center;
-}
-
-.ds-horizontal-step-item--trailing {
-  --steps-item-align: end;
-}
-
-.ds-horizontal-step-item__track {
-  display: flex;
-  align-items: center;
-  gap: var(--steps-space-xs);
-  width: 100%;
-  min-height: calc(var(--bh-space-5xl-24) + var(--bh-space-xs-4));
-}
-
-.ds-horizontal-step-item__text {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  gap: var(--steps-space-xs);
-  width: 100%;
-  min-width: 0;
-  text-align: var(--steps-item-align);
-}
-
-.ds-horizontal-step-item__label {
-  min-height: calc(var(--bh-space-5xl-24) + var(--bh-space-xs-4));
-  color: var(--steps-content-default);
-  font-size: var(--bh-text-body-md-font-size);
-  font-weight: var(--bh-font-weight-medium);
-  line-height: var(--bh-text-body-md-line-height);
-}
-
-.ds-horizontal-step-item__caption {
-  color: var(--steps-content-subtle);
-  font-size: var(--bh-text-body-sm-regular-font-size);
-  font-weight: var(--bh-font-weight-regular);
-  line-height: var(--bh-text-body-sm-regular-line-height);
-}
-
-.ds-step-line {
-  display: block;
-  background: var(--steps-border-default);
-}
-
-.ds-step-line--horizontal {
-  flex: 1 0 0;
-  height: var(--bh-space-xxxs-1);
-  min-width: var(--bh-space-xxxs-1);
-}
-
-.ds-step-line--vertical {
-  flex: 1 0 0;
-  width: var(--bh-space-xxxs-1);
-  min-height: var(--bh-space-xxxs-1);
-}
-
-.ds-step-marker {
-  position: relative;
-  display: inline-flex;
-  flex: 0 0 auto;
-  align-items: center;
-  justify-content: center;
-  width: calc(var(--bh-space-5xl-24) + var(--bh-space-xs-4));
-  height: calc(var(--bh-space-5xl-24) + var(--bh-space-xs-4));
-  border-radius: var(--steps-radius-full);
-  color: var(--steps-content-inverse);
-  background: var(--steps-bg-inverse);
-}
-
-.ds-step-marker--number span {
-  display: block;
-  width: 100%;
-  font-size: var(--bh-text-body-md-font-size);
-  font-weight: var(--bh-font-weight-semibold);
-  line-height: var(--bh-text-body-md-line-height);
-  text-align: center;
-}
-
-.ds-step-marker--icon svg {
-  width: var(--bh-space-3xl-16);
-  height: var(--bh-space-3xl-16);
-  fill: none;
-  stroke: currentColor;
-}
-
-.ds-vertical-step-item {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--steps-space-5xl);
-  width: min(var(--bh-steps-indicator-panel-width), 100%);
-  min-width: 0;
-  padding-bottom: var(--bh-space-xs-4);
-  color: var(--steps-content-default);
-  font-family: var(--bh-font-family);
-  letter-spacing: var(--bh-text-base-letter-spacing);
-}
-
-.ds-steps--vertical > .ds-vertical-step-item {
-  width: 100%;
-  flex: 0 0 auto;
-}
-
-.ds-vertical-step-item__rail {
-  display: flex;
-  flex: 0 0 auto;
-  align-self: stretch;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--steps-space-xs);
-  min-height: 100%;
-}
-
-.ds-vertical-step-item__content {
-  display: flex;
-  flex: 1 0 0;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-  gap: var(--steps-space-xl);
-  min-width: 0;
-}
-
-.ds-vertical-step-item:dir(rtl) .ds-vertical-step-item__content {
-  align-items: flex-end;
-}
-
-.ds-vertical-step-item__copy {
-  display: flex;
-  flex-direction: column;
-  gap: var(--steps-space-xs);
-  width: 100%;
-  min-width: 0;
-  color: var(--steps-content-subtle);
-  font-size: var(--bh-text-body-md-font-size);
-  font-weight: var(--bh-font-weight-regular);
-  line-height: var(--bh-text-body-md-line-height);
-  text-align: start;
-}
-
-.ds-vertical-step-item:dir(rtl) .ds-vertical-step-item__copy {
-  text-align: right;
-}
-
-.ds-vertical-step-item__header {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  min-width: 0;
-}
-
-.ds-vertical-step-item__label {
-  flex: 1 0 0;
-  min-width: 0;
-  color: var(--steps-content-default);
-  font-size: var(--bh-text-body-lg-medium-font-size);
-  font-weight: var(--bh-font-weight-medium);
-  line-height: var(--bh-text-body-lg-medium-line-height);
-}
-
-.ds-vertical-step-item__support {
-  flex: 0 0 auto;
-  color: var(--steps-content-subtle);
-  font-size: var(--bh-text-body-md-font-size);
-  font-weight: var(--bh-font-weight-regular);
-  line-height: var(--bh-text-body-md-line-height);
-  white-space: nowrap;
-}
-
-.ds-vertical-step-item__caption {
-  width: 100%;
-  color: var(--steps-content-subtle);
-  font-size: var(--bh-text-body-md-font-size);
-  font-weight: var(--bh-font-weight-regular);
-  line-height: var(--bh-text-body-md-line-height);
-}
-
-.ds-step-slot {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: calc(var(--bh-space-9xl-64) + var(--bh-space-xl-12));
-  overflow: hidden;
-  border: var(--bh-space-xxxs-1) dashed var(--steps-border-purple);
-  border-radius: var(--steps-radius-sm);
-  color: var(--steps-content-subtle);
-  background: var(--steps-bg-slot);
-  font-size: var(--bh-text-body-xs-regular-font-size);
-  font-weight: var(--bh-font-weight-regular);
-  line-height: var(--bh-text-body-sm-regular-line-height);
-}
-
-.ds-vertical-step-item__actions {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--steps-space-md);
-}
-
-.ds-vertical-step-item:dir(rtl) .ds-vertical-step-item__actions {
-  align-self: flex-start;
-}
-
-.ds-vertical-step-item__bottom-padding {
-  width: 100%;
-  height: var(--bh-space-5xl-24);
-  flex: 0 0 auto;
-}
-
-.ds-progress-steps {
-  margin: 0;
-  padding: 0;
-  font-family: var(--bh-font-family);
-}
-
-.ds-progress-steps--markers {
-  display: flex;
-  align-items: flex-start;
-  list-style: none;
-}
-
-.ds-progress-steps__item {
-  position: relative;
-  display: flex;
-  min-width: 0;
-  align-items: center;
-  gap: var(--bh-space-md-8);
-}
-
-.ds-progress-steps__marker {
-  display: inline-grid;
-  width: var(--bh-space-5xl-24);
-  height: var(--bh-space-5xl-24);
-  flex: 0 0 auto;
-  place-items: center;
-  border-radius: var(--bh-radius-full);
-  background: var(--bh-interactive-secondary-default);
-  color: var(--bh-content-default);
-}
-
-.ds-progress-steps__item.is-complete .ds-progress-steps__marker,
-.ds-progress-steps__item.is-active .ds-progress-steps__marker {
-  background: var(--bh-interactive-brand-default);
-  color: var(--bh-content-on-brand);
-}
-
-.ds-progress-steps__connector {
-  display: block;
-  width: var(--bh-space-9xl-64);
-  height: var(--bh-space-xxxs-1);
-  flex: 0 0 auto;
-  background: var(--bh-border-default);
-}
-
-.ds-progress-steps__connector.is-complete {
-  background: var(--bh-border-accent-purple-strong);
-}
-
-.ds-progress-steps--bars {
-  display: grid;
-  gap: var(--bh-space-md-8);
-}
-
-.ds-progress-steps__track {
-  display: flex;
-  gap: var(--bh-space-xs-4);
-}
-
-.ds-progress-steps__segment {
-  display: block;
-  min-width: var(--bh-space-3xl-16);
-  height: var(--bh-space-xs-4);
-  flex: 1 1 0;
-  border-radius: var(--bh-radius-full);
-  background: var(--bh-interactive-secondary-default);
-}
-
-.ds-progress-steps__segment[data-active="true"] {
-  background: var(--bh-interactive-brand-default);
-}
+.ds-steps,
+.ds-horizontal-step-item,
+.ds-vertical-step-item {
+  --steps-bg-inverse: var(--bh-bg-inverse);
+  --steps-bg-slot: var(--bh-bg-accent-purple-subtle);
+  --steps-border-default: var(--bh-border-default);
+  --steps-border-purple: var(--bh-border-accent-purple-strong);
+  --steps-content-default: var(--bh-content-default);
+  --steps-content-inverse: var(--bh-content-inverse);
+  --steps-content-on-brand: var(--bh-content-on-brand);
+  --steps-content-subtle: var(--bh-content-subtle);
+  --steps-interactive-brand: var(--bh-interactive-brand-default);
+  --steps-interactive-secondary: var(--bh-interactive-secondary-default);
+  --steps-radius-control: var(--bh-control-default);
+  --steps-radius-full: var(--bh-radius-full);
+  --steps-radius-sm: var(--bh-radius-sm-4);
+  --steps-space-xs: var(--bh-space-xs-4);
+  --steps-space-md: var(--bh-space-md-8);
+  --steps-space-xl: var(--bh-space-xl-12);
+  --steps-space-5xl: var(--bh-space-5xl-24);
+
+  box-sizing: border-box;
+  color: var(--steps-content-default);
+  font-family: var(--bh-font-family);
+  letter-spacing: var(--bh-text-base-letter-spacing);
+}
+
+.ds-steps *,
+.ds-steps *::before,
+.ds-steps *::after,
+.ds-horizontal-step-item,
+.ds-horizontal-step-item *,
+.ds-horizontal-step-item *::before,
+.ds-horizontal-step-item *::after,
+.ds-vertical-step-item,
+.ds-vertical-step-item *,
+.ds-vertical-step-item *::before,
+.ds-vertical-step-item *::after {
+  box-sizing: border-box;
+}
+
+.ds-steps--horizontal {
+  display: flex;
+  align-items: center;
+  width: min(var(--bh-steps-horizontal-width), 100%);
+  min-width: 0;
+}
+
+.ds-steps--vertical {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: min(var(--bh-steps-indicator-panel-width), 100%);
+  min-width: 0;
+}
+
+.ds-steps--horizontal > .ds-horizontal-step-item {
+  flex: 1 0 0;
+  min-width: 0;
+}
+
+.ds-horizontal-step-item {
+  --steps-item-align: start;
+
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--steps-space-xl);
+  width: var(--bh-steps-vertical-width);
+  min-width: 0;
+  color: var(--steps-content-default);
+  font-family: var(--bh-font-family);
+  letter-spacing: var(--bh-text-base-letter-spacing);
+}
+
+.ds-horizontal-step-item--middle {
+  --steps-item-align: center;
+}
+
+.ds-horizontal-step-item--trailing {
+  --steps-item-align: end;
+}
+
+.ds-horizontal-step-item__track {
+  display: flex;
+  align-items: center;
+  gap: var(--steps-space-xs);
+  width: 100%;
+  min-height: calc(var(--bh-space-5xl-24) + var(--bh-space-xs-4));
+}
+
+.ds-horizontal-step-item__text {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--steps-space-xs);
+  width: 100%;
+  min-width: 0;
+  text-align: var(--steps-item-align);
+}
+
+.ds-horizontal-step-item__label {
+  min-height: calc(var(--bh-space-5xl-24) + var(--bh-space-xs-4));
+  color: var(--steps-content-default);
+  font-size: var(--bh-text-body-md-font-size);
+  font-weight: var(--bh-font-weight-medium);
+  line-height: var(--bh-text-body-md-line-height);
+}
+
+.ds-horizontal-step-item__caption {
+  color: var(--steps-content-subtle);
+  font-size: var(--bh-text-body-sm-regular-font-size);
+  font-weight: var(--bh-font-weight-regular);
+  line-height: var(--bh-text-body-sm-regular-line-height);
+}
+
+.ds-step-line {
+  display: block;
+  background: var(--steps-border-default);
+}
+
+.ds-step-line--horizontal {
+  flex: 1 0 0;
+  height: var(--bh-space-xxxs-1);
+  min-width: var(--bh-space-xxxs-1);
+}
+
+.ds-step-line--vertical {
+  flex: 1 0 0;
+  width: var(--bh-space-xxxs-1);
+  min-height: var(--bh-space-xxxs-1);
+}
+
+.ds-step-marker {
+  position: relative;
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: calc(var(--bh-space-5xl-24) + var(--bh-space-xs-4));
+  height: calc(var(--bh-space-5xl-24) + var(--bh-space-xs-4));
+  border-radius: var(--steps-radius-full);
+  color: var(--steps-content-inverse);
+  background: var(--steps-bg-inverse);
+}
+
+.ds-step-marker--number span {
+  display: block;
+  width: 100%;
+  font-size: var(--bh-text-body-md-font-size);
+  font-weight: var(--bh-font-weight-semibold);
+  line-height: var(--bh-text-body-md-line-height);
+  text-align: center;
+}
+
+.ds-step-marker--icon svg {
+  width: var(--bh-space-3xl-16);
+  height: var(--bh-space-3xl-16);
+  fill: none;
+  stroke: currentColor;
+}
+
+.ds-vertical-step-item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--steps-space-5xl);
+  width: min(var(--bh-steps-indicator-panel-width), 100%);
+  min-width: 0;
+  padding-bottom: var(--bh-space-xs-4);
+  color: var(--steps-content-default);
+  font-family: var(--bh-font-family);
+  letter-spacing: var(--bh-text-base-letter-spacing);
+}
+
+.ds-steps--vertical > .ds-vertical-step-item {
+  width: 100%;
+  flex: 0 0 auto;
+}
+
+.ds-vertical-step-item__rail {
+  display: flex;
+  flex: 0 0 auto;
+  align-self: stretch;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--steps-space-xs);
+  min-height: 100%;
+}
+
+.ds-vertical-step-item__content {
+  display: flex;
+  flex: 1 0 0;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: var(--steps-space-xl);
+  min-width: 0;
+}
+
+.ds-vertical-step-item:dir(rtl) .ds-vertical-step-item__content {
+  align-items: flex-end;
+}
+
+.ds-vertical-step-item__copy {
+  display: flex;
+  flex-direction: column;
+  gap: var(--steps-space-xs);
+  width: 100%;
+  min-width: 0;
+  color: var(--steps-content-subtle);
+  font-size: var(--bh-text-body-md-font-size);
+  font-weight: var(--bh-font-weight-regular);
+  line-height: var(--bh-text-body-md-line-height);
+  text-align: start;
+}
+
+.ds-vertical-step-item:dir(rtl) .ds-vertical-step-item__copy {
+  text-align: right;
+}
+
+.ds-vertical-step-item__header {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+}
+
+.ds-vertical-step-item__label {
+  flex: 1 0 0;
+  min-width: 0;
+  color: var(--steps-content-default);
+  font-size: var(--bh-text-body-lg-medium-font-size);
+  font-weight: var(--bh-font-weight-medium);
+  line-height: var(--bh-text-body-lg-medium-line-height);
+}
+
+.ds-vertical-step-item__support {
+  flex: 0 0 auto;
+  color: var(--steps-content-subtle);
+  font-size: var(--bh-text-body-md-font-size);
+  font-weight: var(--bh-font-weight-regular);
+  line-height: var(--bh-text-body-md-line-height);
+  white-space: nowrap;
+}
+
+.ds-vertical-step-item__caption {
+  width: 100%;
+  color: var(--steps-content-subtle);
+  font-size: var(--bh-text-body-md-font-size);
+  font-weight: var(--bh-font-weight-regular);
+  line-height: var(--bh-text-body-md-line-height);
+}
+
+.ds-step-slot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: calc(var(--bh-space-9xl-64) + var(--bh-space-xl-12));
+  overflow: hidden;
+  border: var(--bh-space-xxxs-1) dashed var(--steps-border-purple);
+  border-radius: var(--steps-radius-sm);
+  color: var(--steps-content-subtle);
+  background: var(--steps-bg-slot);
+  font-size: var(--bh-text-body-xs-regular-font-size);
+  font-weight: var(--bh-font-weight-regular);
+  line-height: var(--bh-text-body-sm-regular-line-height);
+}
+
+.ds-vertical-step-item__actions {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--steps-space-md);
+}
+
+.ds-vertical-step-item:dir(rtl) .ds-vertical-step-item__actions {
+  align-self: flex-start;
+}
+
+.ds-vertical-step-item__bottom-padding {
+  width: 100%;
+  height: var(--bh-space-5xl-24);
+  flex: 0 0 auto;
+}
+
+.ds-progress-steps {
+  margin: 0;
+  padding: 0;
+  font-family: var(--bh-font-family);
+}
+
+.ds-progress-steps--markers {
+  display: flex;
+  align-items: flex-start;
+  list-style: none;
+}
+
+.ds-progress-steps__item {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: var(--bh-space-md-8);
+}
+
+.ds-progress-steps__marker {
+  display: inline-grid;
+  width: var(--bh-space-5xl-24);
+  height: var(--bh-space-5xl-24);
+  flex: 0 0 auto;
+  place-items: center;
+  border-radius: var(--bh-radius-full);
+  background: var(--bh-interactive-secondary-default);
+  color: var(--bh-content-default);
+}
+
+.ds-progress-steps__item.is-complete .ds-progress-steps__marker,
+.ds-progress-steps__item.is-active .ds-progress-steps__marker {
+  background: var(--bh-interactive-brand-default);
+  color: var(--bh-content-on-brand);
+}
+
+.ds-progress-steps__connector {
+  display: block;
+  width: var(--bh-space-9xl-64);
+  height: var(--bh-space-xxxs-1);
+  flex: 0 0 auto;
+  background: var(--bh-border-default);
+}
+
+.ds-progress-steps__connector.is-complete {
+  background: var(--bh-border-accent-purple-strong);
+}
+
+.ds-progress-steps--bars {
+  display: grid;
+  gap: var(--bh-space-md-8);
+}
+
+.ds-progress-steps__track {
+  display: flex;
+  gap: var(--bh-space-xs-4);
+}
+
+.ds-progress-steps__segment {
+  display: block;
+  min-width: var(--bh-space-3xl-16);
+  height: var(--bh-space-xs-4);
+  flex: 1 1 0;
+  border-radius: var(--bh-radius-full);
+  background: var(--bh-interactive-secondary-default);
+}
+
+.ds-progress-steps__segment[data-active="true"] {
+  background: var(--bh-interactive-brand-default);
+}