banhaten 0.1.2 → 0.2.0

package/registry/components/expanded/timeline.css

@@ -1,98 +1,98 @@
-.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);
+.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: 0;
-}
-
-.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;
+  --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;
+  min-width: 0;
+}
+
+.ds-timeline--horizontal {
+  display: flex;
+  align-items: flex-start;
   width: min(var(--bh-timeline-grid-width), 100%);
-  min-width: 0;
-}
-
-.ds-timeline--rtl,
-.ds-timeline-item--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.ds-timeline-item--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;
+  min-width: 0;
+}
+
+.ds-timeline--rtl,
+.ds-timeline-item--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.ds-timeline-item--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.ds-timeline-item--rtl {
-  align-items: flex-end;
-}
-
-.ds-timeline__indicator {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-  direction: ltr;
-}
-
+}
+
+.ds-timeline-item--horizontal.ds-timeline-item--rtl {
+  align-items: flex-end;
+}
+
+.ds-timeline__indicator {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  direction: ltr;
+}
+
 .ds-timeline__indicator--vertical {
   align-self: stretch;
   flex-direction: column;
@@ -106,180 +106,180 @@
   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--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-right: var(--timeline-space-xl);
-}
-
-.ds-timeline-item--horizontal.ds-timeline-item--rtl .ds-timeline__body {
-  padding-right: 0;
-  padding-left: 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: 0;
-}
-
-.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.ds-timeline-item--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--rtl .ds-timeline__date--leading,
-.ds-timeline-item--rtl .ds-timeline__date--top,
-.ds-timeline-item--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-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--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-right: var(--timeline-space-xl);
+}
+
+.ds-timeline-item--horizontal.ds-timeline-item--rtl .ds-timeline__body {
+  padding-right: 0;
+  padding-left: 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.ds-timeline-item--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--rtl .ds-timeline__date--leading,
+.ds-timeline-item--rtl .ds-timeline__date--top,
+.ds-timeline-item--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;
+}