banhaten 0.3.0 → 0.5.0

package/registry/components/expanded/timeline.css

@@ -1,286 +1,286 @@
-.ds-timeline,
-.ds-timeline-item {
-  --timeline-bg-brand: var(--bh-bg-brand-default);
-  --timeline-bg-default: var(--bh-bg-default);
-  --timeline-bg-muted: var(--bh-bg-muted);
-  --timeline-border-brand: var(--bh-border-brand-strong);
-  --timeline-border-default: var(--bh-border-default);
-  --timeline-border-muted: var(--bh-border-subtle);
-  --timeline-content-default: var(--bh-content-default);
-  --timeline-content-on-brand: var(--bh-content-on-brand);
-  --timeline-content-subtle: var(--bh-content-subtle);
-  --timeline-radius-full: var(--bh-radius-full);
-  --timeline-marker-slot: calc(var(--bh-space-5xl-24) + var(--bh-space-xs-4));
-  --timeline-space-xxs: var(--bh-space-xxs-2);
-  --timeline-space-xs: var(--bh-space-xs-4);
-  --timeline-space-sm: var(--bh-space-sm-6);
-  --timeline-space-lg: var(--bh-space-lg-10);
-  --timeline-space-xl: var(--bh-space-xl-12);
-
-  box-sizing: border-box;
-  color: var(--timeline-content-default);
-  font-family: inherit;
-  letter-spacing: var(--bh-text-base-letter-spacing);
-}
-
-.ds-timeline {
-  font-family: var(--bh-font-family);
-}
-
-.ds-timeline *,
-.ds-timeline *::before,
-.ds-timeline *::after,
-.ds-timeline-item *,
-.ds-timeline-item *::before,
-.ds-timeline-item *::after {
-  box-sizing: border-box;
-}
-
-.ds-timeline--vertical {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  width: min(var(--bh-timeline-narrow-width), 100%);
-  min-width: 0;
-}
-
-.ds-timeline--horizontal {
-  display: flex;
-  align-items: flex-start;
-  width: min(var(--bh-timeline-grid-width), 100%);
-  min-width: 0;
-  overflow-x: auto;
-  overscroll-behavior-inline: contain;
-  outline: none;
-}
-
-.ds-timeline--horizontal:focus-visible {
-  box-shadow: var(--shadow-component-focus-ring);
-}
-
-.ds-timeline:dir(rtl),
-.ds-timeline-item:dir(rtl) {
-  font-family: var(--bh-font-family);
-}
-
-.ds-timeline-item {
-  font-family: var(--bh-font-family);
-}
-
-.ds-timeline-item--vertical {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--timeline-space-xl);
-  width: 100%;
-  min-height: calc(var(--bh-space-9xl-64) + var(--bh-space-xl-12));
-}
-
-.ds-timeline-item--vertical:dir(rtl) {
-  justify-content: flex-end;
-}
-
-.ds-timeline-item--horizontal {
-  display: flex;
-  flex: 1 0 0;
-  flex-direction: column;
-  gap: var(--timeline-space-lg);
-  align-items: flex-start;
-  min-width: 0;
-  width: var(--bh-timeline-sidebar-width);
-}
-
-.ds-timeline-item--horizontal:dir(rtl) {
-  align-items: flex-end;
-}
-
-.ds-timeline__indicator {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-}
-
-.ds-timeline__indicator--vertical {
-  align-self: stretch;
-  flex-direction: column;
-  width: var(--timeline-marker-slot);
-  padding-top: var(--timeline-space-xxs);
-}
-
-.ds-timeline__indicator--horizontal {
-  width: 100%;
-  height: var(--timeline-marker-slot);
-  min-width: 0;
-  flex-direction: row;
-}
-
-.ds-timeline-item--icon .ds-timeline__indicator {
-  gap: var(--timeline-space-xxs);
-}
-
-.ds-timeline__marker {
-  position: relative;
-  z-index: 1;
-  display: inline-flex;
-  flex: 0 0 auto;
-  align-items: center;
-  justify-content: center;
-  color: var(--timeline-bg-brand);
-}
-
-.ds-timeline__marker--default {
-  width: var(--bh-space-4xl-20);
-  height: var(--bh-space-4xl-20);
-}
-
-.ds-timeline__marker--default::before {
-  content: "";
-  width: var(--bh-space-lg-10);
-  height: var(--bh-space-lg-10);
-  border: var(--bh-space-xxs-2) solid currentColor;
-  border-radius: var(--timeline-radius-full);
-  background: var(--timeline-bg-default);
-}
-
-.ds-timeline__marker--default.ds-timeline__marker--inactive {
-  color: var(--timeline-border-muted);
-}
-
-.ds-timeline__marker--icon {
-  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(--timeline-radius-full);
-  color: var(--timeline-content-on-brand);
-  background: var(--timeline-bg-brand);
-}
-
-.ds-timeline__marker--icon.ds-timeline__marker--inactive {
-  border: var(--bh-space-xxxs-1) solid var(--timeline-border-default);
-  color: var(--timeline-content-default);
-  background: var(--timeline-bg-muted);
-}
-
-.ds-timeline__check {
-  width: calc(var(--bh-space-3xl-16) + var(--bh-space-xxs-2));
-  height: calc(var(--bh-space-3xl-16) + var(--bh-space-xxs-2));
-  display: block;
-}
-
-.ds-timeline__line {
-  display: block;
-  flex: 1 0 0;
-  min-width: var(--bh-space-xxxs-1);
-  min-height: var(--bh-space-xxxs-1);
-  border-radius: var(--timeline-radius-full);
-  background: var(--timeline-border-default);
-}
-
-.ds-timeline__line--finished {
-  background: var(--timeline-border-brand);
-}
-
-.ds-timeline__indicator--vertical .ds-timeline__line {
-  width: calc(var(--bh-space-xxs-2) + var(--bh-space-xxxs-1) / 2);
-}
-
-.ds-timeline__indicator--horizontal .ds-timeline__line {
-  height: calc(var(--bh-space-xxs-2) + var(--bh-space-xxxs-1));
-}
-
-.ds-timeline__body {
-  display: flex;
-  flex: 1 0 0;
-  flex-direction: column;
-  gap: var(--timeline-space-xs);
-  align-items: flex-start;
-  min-width: 0;
-  color: var(--timeline-content-default);
-}
-
-.ds-timeline-item:dir(rtl) .ds-timeline__body {
-  align-items: flex-end;
-  text-align: right;
-}
-
-.ds-timeline-item--horizontal .ds-timeline__body {
-  flex: 0 0 auto;
-  width: 100%;
-  padding-inline-end: var(--timeline-space-xl);
-}
-
-.ds-timeline__copy {
-  display: flex;
-  flex-direction: column;
-  gap: var(--timeline-space-xs);
-  width: 100%;
-  min-width: 0;
-}
-
-.ds-timeline__label,
-.ds-timeline__caption,
-.ds-timeline__date {
-  display: block;
-  min-width: 0;
-  margin: 0;
-  overflow-wrap: anywhere;
-  letter-spacing: var(--bh-text-base-letter-spacing);
-}
-
-.ds-timeline__label {
-  color: var(--timeline-content-default);
-  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);
-}
-
-.ds-timeline__caption {
-  color: var(--timeline-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-timeline__date {
-  color: var(--timeline-content-subtle);
-  font-size: var(--bh-text-body-2xs-regular-font-size);
-  font-weight: var(--bh-font-weight-regular);
-  line-height: var(--bh-text-body-2xs-regular-line-height);
-  white-space: nowrap;
-}
-
-.ds-timeline__date--leading {
-  flex: 0 0 auto;
-  padding-top: var(--timeline-space-xs);
-}
-
-.ds-timeline-item--vertical:dir(ltr) .ds-timeline__date--leading {
-  text-align: right;
-}
-
-.ds-timeline-item--horizontal .ds-timeline__date--leading {
-  width: 100%;
-  padding-top: 0;
-  text-align: start;
-}
-
-.ds-timeline-item:dir(rtl) .ds-timeline__date--leading,
-.ds-timeline-item:dir(rtl) .ds-timeline__date--top,
-.ds-timeline-item:dir(rtl) .ds-timeline__date--bottom {
-  text-align: right;
-}
-
-.ds-timeline__date--top {
-  width: 100%;
-  padding-top: var(--timeline-space-xs);
-}
-
-.ds-timeline__date--bottom {
-  width: 100%;
-  padding-top: var(--timeline-space-sm);
-}
-
-.ds-timeline__bottom-space {
-  display: block;
-  width: 100%;
-  height: var(--bh-space-5xl-24);
-  flex: 0 0 auto;
-}
+.ds-timeline,
+.ds-timeline-item {
+  --timeline-bg-brand: var(--bh-bg-brand-default);
+  --timeline-bg-default: var(--bh-bg-default);
+  --timeline-bg-muted: var(--bh-bg-muted);
+  --timeline-border-brand: var(--bh-border-brand-strong);
+  --timeline-border-default: var(--bh-border-default);
+  --timeline-border-muted: var(--bh-border-subtle);
+  --timeline-content-default: var(--bh-content-default);
+  --timeline-content-on-brand: var(--bh-content-on-brand);
+  --timeline-content-subtle: var(--bh-content-subtle);
+  --timeline-radius-full: var(--bh-radius-full);
+  --timeline-marker-slot: calc(var(--bh-space-5xl-24) + var(--bh-space-xs-4));
+  --timeline-space-xxs: var(--bh-space-xxs-2);
+  --timeline-space-xs: var(--bh-space-xs-4);
+  --timeline-space-sm: var(--bh-space-sm-6);
+  --timeline-space-lg: var(--bh-space-lg-10);
+  --timeline-space-xl: var(--bh-space-xl-12);
+
+  box-sizing: border-box;
+  color: var(--timeline-content-default);
+  font-family: inherit;
+  letter-spacing: var(--bh-text-base-letter-spacing);
+}
+
+.ds-timeline {
+  font-family: var(--bh-font-family);
+}
+
+.ds-timeline *,
+.ds-timeline *::before,
+.ds-timeline *::after,
+.ds-timeline-item *,
+.ds-timeline-item *::before,
+.ds-timeline-item *::after {
+  box-sizing: border-box;
+}
+
+.ds-timeline--vertical {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: min(var(--bh-timeline-narrow-width), 100%);
+  min-width: 0;
+}
+
+.ds-timeline--horizontal {
+  display: flex;
+  align-items: flex-start;
+  width: min(var(--bh-timeline-grid-width), 100%);
+  min-width: 0;
+  overflow-x: auto;
+  overscroll-behavior-inline: contain;
+  outline: none;
+}
+
+.ds-timeline--horizontal:focus-visible {
+  box-shadow: var(--elevation-component-focus-ring);
+}
+
+.ds-timeline:dir(rtl),
+.ds-timeline-item:dir(rtl) {
+  font-family: var(--bh-font-family);
+}
+
+.ds-timeline-item {
+  font-family: var(--bh-font-family);
+}
+
+.ds-timeline-item--vertical {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--timeline-space-xl);
+  width: 100%;
+  min-height: calc(var(--bh-space-9xl-64) + var(--bh-space-xl-12));
+}
+
+.ds-timeline-item--vertical:dir(rtl) {
+  justify-content: flex-end;
+}
+
+.ds-timeline-item--horizontal {
+  display: flex;
+  flex: 1 0 0;
+  flex-direction: column;
+  gap: var(--timeline-space-lg);
+  align-items: flex-start;
+  min-width: 0;
+  width: var(--bh-timeline-sidebar-width);
+}
+
+.ds-timeline-item--horizontal:dir(rtl) {
+  align-items: flex-end;
+}
+
+.ds-timeline__indicator {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+}
+
+.ds-timeline__indicator--vertical {
+  align-self: stretch;
+  flex-direction: column;
+  width: var(--timeline-marker-slot);
+  padding-top: var(--timeline-space-xxs);
+}
+
+.ds-timeline__indicator--horizontal {
+  width: 100%;
+  height: var(--timeline-marker-slot);
+  min-width: 0;
+  flex-direction: row;
+}
+
+.ds-timeline-item--icon .ds-timeline__indicator {
+  gap: var(--timeline-space-xxs);
+}
+
+.ds-timeline__marker {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  color: var(--timeline-bg-brand);
+}
+
+.ds-timeline__marker--default {
+  width: var(--bh-space-4xl-20);
+  height: var(--bh-space-4xl-20);
+}
+
+.ds-timeline__marker--default::before {
+  content: "";
+  width: var(--bh-space-lg-10);
+  height: var(--bh-space-lg-10);
+  border: var(--bh-space-xxs-2) solid currentColor;
+  border-radius: var(--timeline-radius-full);
+  background: var(--timeline-bg-default);
+}
+
+.ds-timeline__marker--default.ds-timeline__marker--inactive {
+  color: var(--timeline-border-muted);
+}
+
+.ds-timeline__marker--icon {
+  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(--timeline-radius-full);
+  color: var(--timeline-content-on-brand);
+  background: var(--timeline-bg-brand);
+}
+
+.ds-timeline__marker--icon.ds-timeline__marker--inactive {
+  border: var(--bh-space-xxxs-1) solid var(--timeline-border-default);
+  color: var(--timeline-content-default);
+  background: var(--timeline-bg-muted);
+}
+
+.ds-timeline__check {
+  width: calc(var(--bh-space-3xl-16) + var(--bh-space-xxs-2));
+  height: calc(var(--bh-space-3xl-16) + var(--bh-space-xxs-2));
+  display: block;
+}
+
+.ds-timeline__line {
+  display: block;
+  flex: 1 0 0;
+  min-width: var(--bh-space-xxxs-1);
+  min-height: var(--bh-space-xxxs-1);
+  border-radius: var(--timeline-radius-full);
+  background: var(--timeline-border-default);
+}
+
+.ds-timeline__line--finished {
+  background: var(--timeline-border-brand);
+}
+
+.ds-timeline__indicator--vertical .ds-timeline__line {
+  width: calc(var(--bh-space-xxs-2) + var(--bh-space-xxxs-1) / 2);
+}
+
+.ds-timeline__indicator--horizontal .ds-timeline__line {
+  height: calc(var(--bh-space-xxs-2) + var(--bh-space-xxxs-1));
+}
+
+.ds-timeline__body {
+  display: flex;
+  flex: 1 0 0;
+  flex-direction: column;
+  gap: var(--timeline-space-xs);
+  align-items: flex-start;
+  min-width: 0;
+  color: var(--timeline-content-default);
+}
+
+.ds-timeline-item:dir(rtl) .ds-timeline__body {
+  align-items: flex-end;
+  text-align: right;
+}
+
+.ds-timeline-item--horizontal .ds-timeline__body {
+  flex: 0 0 auto;
+  width: 100%;
+  padding-inline-end: var(--timeline-space-xl);
+}
+
+.ds-timeline__copy {
+  display: flex;
+  flex-direction: column;
+  gap: var(--timeline-space-xs);
+  width: 100%;
+  min-width: 0;
+}
+
+.ds-timeline__label,
+.ds-timeline__caption,
+.ds-timeline__date {
+  display: block;
+  min-width: 0;
+  margin: 0;
+  overflow-wrap: anywhere;
+  letter-spacing: var(--bh-text-base-letter-spacing);
+}
+
+.ds-timeline__label {
+  color: var(--timeline-content-default);
+  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);
+}
+
+.ds-timeline__caption {
+  color: var(--timeline-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-timeline__date {
+  color: var(--timeline-content-subtle);
+  font-size: var(--bh-text-body-2xs-regular-font-size);
+  font-weight: var(--bh-font-weight-regular);
+  line-height: var(--bh-text-body-2xs-regular-line-height);
+  white-space: nowrap;
+}
+
+.ds-timeline__date--leading {
+  flex: 0 0 auto;
+  padding-top: var(--timeline-space-xs);
+}
+
+.ds-timeline-item--vertical:dir(ltr) .ds-timeline__date--leading {
+  text-align: right;
+}
+
+.ds-timeline-item--horizontal .ds-timeline__date--leading {
+  width: 100%;
+  padding-top: 0;
+  text-align: start;
+}
+
+.ds-timeline-item:dir(rtl) .ds-timeline__date--leading,
+.ds-timeline-item:dir(rtl) .ds-timeline__date--top,
+.ds-timeline-item:dir(rtl) .ds-timeline__date--bottom {
+  text-align: right;
+}
+
+.ds-timeline__date--top {
+  width: 100%;
+  padding-top: var(--timeline-space-xs);
+}
+
+.ds-timeline__date--bottom {
+  width: 100%;
+  padding-top: var(--timeline-space-sm);
+}
+
+.ds-timeline__bottom-space {
+  display: block;
+  width: 100%;
+  height: var(--bh-space-5xl-24);
+  flex: 0 0 auto;
+}