banhaten 0.1.3 → 0.3.0

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-md);
 
   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);
 }
 
@@ -157,7 +166,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 +229,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

@@ -15,7 +15,7 @@
   font-family: var(--bh-font-family);
   font-size: var(--bh-text-body-md-font-size);
   font-weight: var(--bh-font-weight-medium);
-  letter-spacing: 0;
+  letter-spacing: var(--bh-text-base-letter-spacing);
   line-height: var(--bh-text-body-md-line-height);
 }
 
@@ -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/divider.css

@@ -18,7 +18,7 @@
   gap: var(--bh-space-md-8);
   color: var(--bh-content-default);
   font-family: var(--bh-font-family);
-  letter-spacing: 0;
+  letter-spacing: var(--bh-text-base-letter-spacing);
 }
 
 .ds-content-divider *,

package/registry/components/expanded/emptyState.css

@@ -11,7 +11,7 @@
   padding: var(--bh-space-6xl-32);
   color: var(--bh-content-default);
   font-family: var(--bh-font-family);
-  letter-spacing: 0;
+  letter-spacing: var(--bh-text-base-letter-spacing);
   text-align: center;
 }
 

package/registry/components/expanded/fileUpload.css

@@ -7,7 +7,7 @@
   gap: var(--bh-space-xl-12);
   color: var(--bh-content-default);
   font-family: var(--bh-font-family);
-  letter-spacing: 0;
+  letter-spacing: var(--bh-text-base-letter-spacing);
 }
 
 .ds-file-upload *,
@@ -90,7 +90,7 @@
 .ds-file-upload__icon svg {
   width: var(--bh-space-5xl-24);
   height: var(--bh-space-5xl-24);
-  stroke-width: 2;
+  stroke-width: var(--bh-icon-stroke-200);
 }
 
 .ds-file-upload__copy {
@@ -257,7 +257,7 @@
   font-family: var(--bh-font-family);
   font-size: calc(var(--bh-space-lg-10) - var(--bh-space-xxxs-1));
   font-weight: var(--bh-font-weight-bold);
-  letter-spacing: 0;
+  letter-spacing: var(--bh-text-base-letter-spacing);
   line-height: 1;
   pointer-events: none;
   text-rendering: geometricPrecision;
@@ -352,7 +352,7 @@
 .ds-file-upload-row__status svg {
   width: var(--bh-space-3xl-16);
   height: var(--bh-space-3xl-16);
-  stroke-width: 2.2;
+  stroke-width: var(--bh-icon-stroke-220);
 }
 
 .ds-file-upload-row__status--standalone {
@@ -372,7 +372,7 @@
 }
 
 .ds-file-upload-row__status--uploading svg {
-  animation: ds-file-upload-spin 1s linear infinite;
+  animation: ds-file-upload-spin var(--bh-file-upload-spin-duration) linear infinite;
 }
 
 .ds-file-upload-row--error .ds-file-upload-row__state,
@@ -391,7 +391,7 @@
   font-weight: var(--bh-font-weight-medium);
   line-height: var(--bh-text-body-md-medium-line-height);
   text-decoration-line: underline;
-  text-underline-offset: 0.125em;
+  text-underline-offset: var(--bh-underline-offset-default);
   cursor: pointer;
 }
 
@@ -446,7 +446,7 @@
   height: var(--bh-space-4xl-20);
 }
 
-.ds-file-upload[dir="rtl"] {
+.ds-file-upload:dir(rtl) {
   font-family: var(--bh-font-family);
 }
 

package/registry/components/expanded/onboardingStepListItem.css

@@ -56,7 +56,7 @@
   color: var(--onboarding-step-content-subtle);
 }
 
-.ds-onboarding-step--rtl {
+.ds-onboarding-step:dir(rtl) {
   font-family: var(--bh-font-family);
 }
 
@@ -78,7 +78,7 @@
   word-break: break-word;
 }
 
-.ds-onboarding-step--rtl .ds-onboarding-step__label {
+.ds-onboarding-step:dir(rtl) .ds-onboarding-step__label {
   text-align: right;
 }
 

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;
 }