banhaten 0.2.0 → 0.4.0

package/registry/components/expanded/Timeline.tsx

@@ -8,11 +8,12 @@ export type TimelineItemState = "finished" | "active" | "inactive";
 
 export type TimelineStep = {
   bottomDate?: string;
-  caption?: string;
+  caption?: ReactNode;
+  className?: string;
   date?: string;
   icon?: ReactNode;
   id?: string;
-  label?: string;
+  label?: ReactNode;
   showBottomDate?: boolean;
   showCaption?: boolean;
   showLeadingDate?: boolean;
@@ -27,6 +28,7 @@ export type TimelineItemProps = TimelineStep & {
   className?: string;
   dir?: "ltr" | "rtl";
   orientation?: TimelineOrientation;
+  role?: "listitem" | "none" | "presentation";
   variant?: TimelineVariant;
 };
 
@@ -46,14 +48,12 @@ function classes(...names: Array<string | false | undefined>) {
 function Indicator({
   icon,
   orientation,
-  rtl,
   showLine,
   state,
   variant,
 }: {
   icon?: ReactNode;
   orientation: TimelineOrientation;
-  rtl: boolean;
   showLine: boolean;
   state: TimelineItemState;
   variant: TimelineVariant;
@@ -79,21 +79,11 @@ function Indicator({
       className={classes(
         "ds-timeline__indicator",
         `ds-timeline__indicator--${orientation}`,
-        rtl && "ds-timeline__indicator--rtl",
       )}
       aria-hidden="true"
     >
-      {orientation === "horizontal" && rtl ? (
-        <>
-          {line}
-          {marker}
-        </>
-      ) : (
-        <>
-          {marker}
-          {line}
-        </>
-      )}
+      {marker}
+      {line}
     </span>
   );
 }
@@ -107,6 +97,7 @@ export function TimelineItem({
   icon,
   label,
   orientation = "vertical",
+  role,
   showBottomDate = false,
   showCaption = true,
   showLeadingDate = true,
@@ -117,7 +108,6 @@ export function TimelineItem({
   topDate,
   variant = "default",
 }: TimelineItemProps) {
-  const rtl = dir === "rtl";
   const displayDate = date;
   const displayLabel = label;
   const displayCaption = caption;
@@ -141,7 +131,6 @@ export function TimelineItem({
     <Indicator
       icon={icon}
       orientation={orientation}
-      rtl={rtl}
       showLine={showLine}
       state={state}
       variant={variant}
@@ -159,11 +148,10 @@ export function TimelineItem({
         `ds-timeline-item--${orientation}`,
         `ds-timeline-item--${variant}`,
         `ds-timeline-item--${state}`,
-        rtl ? "ds-timeline-item--rtl" : "ds-timeline-item--ltr",
         className,
       )}
       dir={dir}
-      role="listitem"
+      role={role}
     >
       {leadingDate}
       {indicator}
@@ -173,15 +161,13 @@ export function TimelineItem({
 }
 
 export function Timeline({
-  ariaLabel,
+  ariaLabel = "Timeline",
   className,
   dir,
   orientation = "vertical",
   steps = [],
   variant = "default",
 }: TimelineProps) {
-  const rtl = dir === "rtl";
-
   return (
     <div
       aria-label={ariaLabel}
@@ -189,11 +175,11 @@ export function Timeline({
         "ds-timeline",
         `ds-timeline--${orientation}`,
         `ds-timeline--${variant}`,
-        rtl ? "ds-timeline--rtl" : "ds-timeline--ltr",
         className,
       )}
       dir={dir}
       role="list"
+      tabIndex={orientation === "horizontal" ? 0 : undefined}
     >
       {steps.map((step, index) => (
         <TimelineItem
@@ -201,6 +187,7 @@ export function Timeline({
           key={step.id ?? index}
           dir={dir}
           orientation={orientation}
+          role="listitem"
           showTopDate={step.showTopDate ?? orientation === "horizontal"}
           showBottomDate={step.showBottomDate ?? false}
           showPaddingBottom={step.showPaddingBottom ?? orientation === "vertical"}

package/registry/components/expanded/activityFeed.css

@@ -43,7 +43,7 @@
   text-decoration: none;
 }
 
-.ds-activity-feed--rtl {
+.ds-activity-feed:dir(rtl) {
   font-family: var(--bh-font-family);
   margin-inline-end: auto;
 }
@@ -102,7 +102,7 @@
   gap: var(--activity-feed-space-lg);
 }
 
-.ds-activity-feed-item--rtl .ds-activity-feed-item__content {
+.ds-activity-feed-item:dir(rtl) .ds-activity-feed-item__content {
   align-items: flex-start;
 }
 
@@ -121,7 +121,7 @@
   gap: var(--bh-space-sm-6);
 }
 
-.ds-activity-feed-item--rtl .ds-activity-feed-item__topline {
+.ds-activity-feed-item:dir(rtl) .ds-activity-feed-item__topline {
   justify-content: flex-start;
 }
 
@@ -139,7 +139,7 @@
   word-break: break-word;
 }
 
-.ds-activity-feed-item--rtl .ds-activity-feed-item__text {
+.ds-activity-feed-item:dir(rtl) .ds-activity-feed-item__text {
   justify-content: flex-start;
   text-align: right;
 }
@@ -149,7 +149,7 @@
   font-weight: var(--bh-font-weight-medium);
 }
 
-.ds-activity-feed-item--rtl .ds-activity-feed-item__text strong {
+.ds-activity-feed-item:dir(rtl) .ds-activity-feed-item__text strong {
   font-weight: var(--bh-font-weight-semibold);
 }
 
@@ -199,7 +199,7 @@
   padding: var(--activity-feed-space-xl);
 }
 
-.ds-activity-feed-item--rtl .ds-activity-feed-item__caption {
+.ds-activity-feed-item:dir(rtl) .ds-activity-feed-item__caption {
   justify-content: flex-start;
   text-align: right;
 }
@@ -216,7 +216,7 @@
   line-height: var(--bh-text-body-sm-regular-line-height);
 }
 
-.ds-activity-feed-item--rtl .ds-activity-feed-item__slot {
+.ds-activity-feed-item:dir(rtl) .ds-activity-feed-item__slot {
   place-items: center start;
   text-align: right;
 }
@@ -230,7 +230,7 @@
   line-height: var(--bh-text-body-sm-regular-line-height);
 }
 
-.ds-activity-feed-item--rtl .ds-activity-feed-item__timestamp {
+.ds-activity-feed-item:dir(rtl) .ds-activity-feed-item__timestamp {
   text-align: right;
 }
 

package/registry/components/expanded/activityHeatmap.css

@@ -0,0 +1,66 @@
+.ds-activity-heatmap {
+  --activity-heatmap-cell-size: var(--bh-space-3xl-16);
+  --activity-heatmap-gap: var(--bh-space-xs-4);
+  --activity-heatmap-radius: var(--bh-radius-sm-4);
+  --activity-heatmap-level-0: var(--bh-bg-neutral-medium);
+  --activity-heatmap-level-1: var(--bh-bg-accent-purple-subtle);
+  --activity-heatmap-level-2: var(--bh-bg-accent-purple-soft);
+  --activity-heatmap-level-3: var(--bh-bg-accent-purple-default);
+  --activity-heatmap-level-4: var(--bh-content-accent-purple-strong);
+
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  outline: none;
+  color: var(--bh-content-default);
+  font-family: var(--bh-font-family);
+}
+
+.ds-activity-heatmap:focus-visible {
+  box-shadow: var(--shadow-component-focus-ring);
+}
+
+.ds-activity-heatmap *,
+.ds-activity-heatmap *::before,
+.ds-activity-heatmap *::after {
+  box-sizing: border-box;
+}
+
+.ds-activity-heatmap__grid {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: var(--activity-heatmap-cell-size);
+  grid-template-rows: repeat(7, var(--activity-heatmap-cell-size));
+  justify-content: start;
+  gap: var(--activity-heatmap-gap);
+  width: max-content;
+  min-width: 100%;
+}
+
+.ds-activity-heatmap__cell {
+  display: block;
+  inline-size: var(--activity-heatmap-cell-size);
+  block-size: var(--activity-heatmap-cell-size);
+  aspect-ratio: 1;
+  border-radius: var(--activity-heatmap-radius);
+  background: var(--activity-heatmap-level-0);
+}
+
+.ds-activity-heatmap__cell[data-level="1"] {
+  background: var(--activity-heatmap-level-1);
+}
+
+.ds-activity-heatmap__cell[data-level="2"] {
+  background: var(--activity-heatmap-level-2);
+}
+
+.ds-activity-heatmap__cell[data-level="3"] {
+  background: var(--activity-heatmap-level-3);
+}
+
+.ds-activity-heatmap__cell[data-level="4"] {
+  background: var(--activity-heatmap-level-4);
+}

package/registry/components/expanded/banner.css

@@ -1,10 +1,10 @@
 .ds-banner {
-  --banner-bg-brand: var(--bh-bg-brand-default);
+  --banner-bg-brand: var(--bh-bg-brand-bold);
   --banner-bg-brand-soft: var(--bh-bg-brand-soft);
   --banner-bg-muted: var(--bh-bg-muted);
   --banner-border-subtle: var(--bh-border-subtle);
   --banner-content-default: var(--bh-content-default);
-  --banner-content-inverse: var(--bh-content-inverse);
+  --banner-content-inverse: var(--bh-content-on-brand);
   --banner-content-link: var(--bh-content-link);
   --banner-radius-floating: var(--bh-radius-xl-10);
   --banner-space-xxs: var(--bh-space-xxs-2);
@@ -17,17 +17,18 @@
   --banner-height-default: calc(var(--bh-space-8xl-48) + var(--bh-space-xl-12));
   --banner-height-title: calc(var(--bh-space-8xl-48) + var(--bh-space-xs-4));
   --banner-input-width: var(--bh-input-width);
-  --banner-shadow-floating: var(--shadow-component-default);
+  --banner-shadow-floating: var(--shadow-xl);
 
   box-sizing: border-box;
   position: relative;
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   gap: var(--banner-space-3xl);
   width: 100%;
   min-height: var(--banner-height-slim);
-  height: 100%;
+  height: auto;
   padding: var(--banner-space-xl) var(--banner-space-3xl);
   border: var(--bh-space-xxxs-1) solid transparent;
   border-radius: 0;
@@ -104,6 +105,9 @@
 }
 
 .ds-banner__main {
+  max-width: 100%;
+  flex: 1 1 calc(var(--bh-space-19xl-384) - var(--bh-space-8xl-48));
+  flex-wrap: wrap;
   justify-content: center;
   gap: var(--banner-space-xl);
 }
@@ -114,11 +118,16 @@
 }
 
 .ds-banner__leading {
+  max-width: 100%;
+  flex: 1 1 var(--bh-space-17xl-288);
+  flex-wrap: wrap;
   gap: var(--banner-space-xl);
 }
 
 .ds-banner__tail {
-  flex: 0 0 auto;
+  max-width: 100%;
+  flex: 0 1 auto;
+  flex-wrap: wrap;
   gap: var(--banner-space-3xl);
 }
 
@@ -139,10 +148,15 @@
   color: var(--banner-icon-fg);
 }
 
-.ds-banner__icon-wrap,
-.ds-banner__icon {
-  width: var(--bh-space-4xl-20);
-  height: var(--bh-space-4xl-20);
+.ds-banner__icon-wrap {
+  width: var(--bh-icon-slot-size-default);
+  height: var(--bh-icon-slot-size-default);
+}
+
+.ds-banner__icon,
+.ds-banner__icon-wrap > svg {
+  width: var(--bh-icon-size-default);
+  height: var(--bh-icon-size-default);
 }
 
 .ds-banner__icon,
@@ -157,7 +171,7 @@
 .ds-banner__separator,
 .ds-banner__description {
   letter-spacing: var(--bh-text-body-md-medium-letter-spacing);
-  white-space: nowrap;
+  white-space: normal;
   word-break: break-word;
 }
 
@@ -220,26 +234,27 @@
 
 .ds-banner__input {
   flex: 0 1 var(--banner-input-width);
-  width: var(--banner-input-width);
+  width: min(100%, var(--banner-input-width));
+  min-width: 0;
 }
 
-.ds-banner--rtl {
+.ds-banner:dir(rtl) {
   font-family: var(--bh-font-family);
 }
 
-.ds-banner--rtl.ds-banner--title .ds-banner__title-only {
+.ds-banner:dir(rtl).ds-banner--title .ds-banner__title-only {
   font-size: var(--bh-text-body-2xs-medium-font-size);
   font-weight: var(--bh-text-body-2xs-medium-font-weight);
   line-height: var(--bh-text-body-2xs-medium-line-height);
   text-align: right;
 }
 
-.ds-banner--rtl .ds-banner__description {
+.ds-banner:dir(rtl) .ds-banner__description {
   font-size: var(--bh-text-body-2xs-medium-font-size);
   font-weight: var(--bh-text-body-2xs-medium-font-weight);
   line-height: var(--bh-text-body-2xs-medium-line-height);
 }
 
-.ds-banner--rtl .ds-banner__title {
+.ds-banner:dir(rtl) .ds-banner__title {
   text-align: right;
 }

package/registry/components/expanded/breadcrumbs.css

@@ -73,8 +73,8 @@
 }
 
 .ds-breadcrumbs__icon {
-  width: var(--bh-space-4xl-20);
-  height: var(--bh-space-4xl-20);
+  width: var(--bh-icon-slot-size-default);
+  height: var(--bh-icon-slot-size-default);
   flex: 0 0 auto;
   display: inline-grid;
   place-items: center;
@@ -86,8 +86,8 @@
 }
 
 .ds-breadcrumbs__icon svg {
-  width: var(--bh-space-4xl-20);
-  height: var(--bh-space-4xl-20);
+  width: var(--bh-icon-size-default);
+  height: var(--bh-icon-size-default);
   display: block;
 }
 
@@ -123,7 +123,7 @@
   display: block;
 }
 
-.ds-breadcrumbs[dir="rtl"] .ds-breadcrumbs__separator svg {
+.ds-breadcrumbs:dir(rtl) .ds-breadcrumbs__separator svg {
   transform: scaleX(-1);
 }
 

package/registry/components/expanded/fileUpload.css

@@ -195,7 +195,7 @@
   --ds-file-upload-row-border: var(--bh-border-danger-strong);
   --ds-file-upload-row-shadow:
     inset 0px 0px 0px var(--bh-border-width-default) var(--ds-file-upload-row-border),
-    var(--shadow-xs);
+    var(--shadow-sm);
 }
 
 .ds-file-upload-row__content {
@@ -442,11 +442,11 @@
 }
 
 .ds-file-upload-row__action svg {
-  width: var(--bh-space-4xl-20);
-  height: var(--bh-space-4xl-20);
+  width: var(--bh-icon-size-default);
+  height: var(--bh-icon-size-default);
 }
 
-.ds-file-upload[dir="rtl"] {
+.ds-file-upload:dir(rtl) {
   font-family: var(--bh-font-family);
 }
 

package/registry/components/expanded/onboardingStepListItem.css

@@ -13,7 +13,8 @@
   --onboarding-step-width: calc(var(--bh-space-17xl-288) - var(--bh-space-md-8));
   --onboarding-step-height: var(--bh-space-7xl-40);
   --onboarding-step-line-wrap-size: var(--bh-space-5xl-24);
-  --onboarding-step-check-size: var(--bh-space-4xl-20);
+  --onboarding-step-check-size: var(--bh-icon-size-default);
+  --onboarding-step-check-slot-size: var(--bh-icon-slot-size-default);
   --onboarding-step-line-width: var(--bh-space-xxs-2);
   --onboarding-step-line-offset: calc(-1 * var(--bh-space-md-8));
   --onboarding-step-line-segment-height: calc(var(--bh-space-2xl-14) - var(--bh-space-xxxs-1));
@@ -56,7 +57,7 @@
   color: var(--onboarding-step-content-subtle);
 }
 
-.ds-onboarding-step--rtl {
+.ds-onboarding-step:dir(rtl) {
   font-family: var(--bh-font-family);
 }
 
@@ -78,18 +79,26 @@
   word-break: break-word;
 }
 
-.ds-onboarding-step--rtl .ds-onboarding-step__label {
+.ds-onboarding-step:dir(rtl) .ds-onboarding-step__label {
   text-align: right;
 }
 
-.ds-onboarding-step__check {
+.ds-onboarding-step__check-slot {
   position: relative;
   z-index: 1;
-  display: block;
+  display: inline-flex;
   flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: var(--onboarding-step-check-slot-size);
+  height: var(--onboarding-step-check-slot-size);
+  color: var(--onboarding-step-content-success);
+}
+
+.ds-onboarding-step__check {
+  display: block;
   width: var(--onboarding-step-check-size);
   height: var(--onboarding-step-check-size);
-  color: var(--onboarding-step-content-success);
 }
 
 .ds-onboarding-step__line {
@@ -113,7 +122,7 @@
 .ds-onboarding-step__line--active {
   position: relative;
   left: auto;
-  height: var(--onboarding-step-check-size);
+  height: var(--onboarding-step-check-slot-size);
   transform: none;
   background: var(--onboarding-step-border-brand-strong);
 }

package/registry/components/expanded/pageHeader.css

@@ -36,7 +36,7 @@
   box-sizing: border-box;
 }
 
-.ds-page-header h1,
+.ds-page-header__title,
 .ds-page-header p,
 .ds-page-header ol {
   margin: 0;
@@ -84,14 +84,16 @@
   color: var(--page-header-content-default);
 }
 
-.ds-page-header__breadcrumb-label {
+.ds-page-header__breadcrumb-label,
+.ds-page-header__breadcrumbs .ds-breadcrumbs__label {
   max-width: 20ch;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.ds-page-header__breadcrumb-icon {
+.ds-page-header__breadcrumb-icon,
+.ds-page-header__breadcrumbs .ds-breadcrumbs__icon {
   width: var(--page-header-space-4xl);
   height: var(--page-header-space-4xl);
   display: inline-grid;
@@ -99,7 +101,8 @@
   color: currentColor;
 }
 
-.ds-page-header__breadcrumb-separator {
+.ds-page-header__breadcrumb-separator,
+.ds-page-header__breadcrumbs .ds-breadcrumbs__separator {
   width: var(--page-header-space-3xl);
   height: var(--page-header-space-3xl);
   display: inline-flex;
@@ -163,7 +166,7 @@
   display: block;
 }
 
-.ds-page-header h1 {
+.ds-page-header__title {
   min-width: 0;
   color: var(--page-header-content-heading);
   font-size: var(--bh-text-heading-md-semibold-font-size);
@@ -235,15 +238,15 @@
   width: 100%;
 }
 
-.ds-page-header[dir="rtl"] {
+.ds-page-header:dir(rtl) {
   font-family: var(--bh-font-family);
 }
 
-.ds-page-header[dir="rtl"] .ds-page-header__topline,
-.ds-page-header[dir="rtl"] .ds-page-header__heading-row,
-.ds-page-header[dir="rtl"] .ds-page-header__heading-main,
-.ds-page-header[dir="rtl"] .ds-page-header__actions,
-.ds-page-header[dir="rtl"] .ds-page-header__breadcrumbs ol {
+.ds-page-header:dir(rtl) .ds-page-header__topline,
+.ds-page-header:dir(rtl) .ds-page-header__heading-row,
+.ds-page-header:dir(rtl) .ds-page-header__heading-main,
+.ds-page-header:dir(rtl) .ds-page-header__actions,
+.ds-page-header:dir(rtl) .ds-page-header__breadcrumbs ol {
   direction: rtl;
 }
 

package/registry/components/expanded/slideout.css

@@ -86,7 +86,7 @@
   padding: 0;
 }
 
-.ds-slideout--rtl {
+.ds-slideout:dir(rtl) {
   font-family: var(--bh-font-family);
 }
 
@@ -113,7 +113,8 @@
   align-items: center;
   gap: var(--slideout-space-3xl);
   min-height: var(--slideout-header-height);
-  padding: var(--slideout-space-3xl) var(--slideout-space-3xl) var(--slideout-space-3xl) var(--slideout-space-4xl);
+  padding-block: var(--slideout-space-3xl);
+  padding-inline: var(--slideout-space-4xl) var(--slideout-space-3xl);
   border-bottom: var(--bh-space-xxxs-1) solid var(--slideout-border-subtle);
   background: var(--slideout-bg-raised);
 }
@@ -122,11 +123,6 @@
   gap: var(--slideout-space-lg);
 }
 
-.ds-slideout--rtl .ds-slideout__header {
-  padding-right: var(--slideout-space-4xl);
-  padding-left: var(--slideout-space-3xl);
-}
-
 .ds-slideout__close-icon {
   width: var(--slideout-space-4xl);
   height: var(--slideout-space-4xl);