banhaten 0.2.0 → 0.3.0

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

@@ -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

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

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

package/registry/components/expanded/steps.css

@@ -197,7 +197,7 @@
   min-width: 0;
 }
 
-.ds-vertical-step-item--rtl .ds-vertical-step-item__content {
+.ds-vertical-step-item:dir(rtl) .ds-vertical-step-item__content {
   align-items: flex-end;
 }
 
@@ -214,7 +214,7 @@
   text-align: start;
 }
 
-.ds-vertical-step-item--rtl .ds-vertical-step-item__copy {
+.ds-vertical-step-item:dir(rtl) .ds-vertical-step-item__copy {
   text-align: right;
 }
 
@@ -225,10 +225,6 @@
   min-width: 0;
 }
 
-.ds-vertical-step-item--rtl .ds-vertical-step-item__header {
-  direction: ltr;
-}
-
 .ds-vertical-step-item__label {
   flex: 1 0 0;
   min-width: 0;
@@ -247,11 +243,6 @@
   white-space: nowrap;
 }
 
-.ds-vertical-step-item--rtl .ds-vertical-step-item__label,
-.ds-vertical-step-item--rtl .ds-vertical-step-item__support {
-  direction: rtl;
-}
-
 .ds-vertical-step-item__caption {
   width: 100%;
   color: var(--steps-content-subtle);
@@ -282,7 +273,7 @@
   gap: var(--steps-space-md);
 }
 
-.ds-vertical-step-item--rtl .ds-vertical-step-item__actions {
+.ds-vertical-step-item:dir(rtl) .ds-vertical-step-item__actions {
   align-self: flex-start;
 }
 
@@ -291,3 +282,75 @@
   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);
+}

package/registry/components/expanded/table.css

@@ -64,12 +64,15 @@
 }
 
 .ds-data-table__toolbar [data-slot="toolbar-section"] {
+  max-width: 100%;
   min-width: 0;
+  flex-wrap: wrap;
 }
 
 .ds-data-table__toolbar [data-slot="toolbar-search"] {
-  flex: 1 1 var(--bh-space-19xl-384);
-  min-width: var(--bh-space-16xl-256);
+  width: min(100%, var(--bh-input-width));
+  min-width: 0;
+  flex: 1 1 min(100%, var(--bh-space-16xl-256));
 }
 
 .ds-data-table__body {
@@ -135,14 +138,21 @@
 .ds-table-wrap {
   box-sizing: border-box;
   width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  contain: paint;
   overflow: auto;
-  scrollbar-gutter: stable;
   border: var(--bh-space-xxxs-1) solid var(--bh-border-subtle);
   border-radius: var(--bh-radius-lg-8);
   background: var(--bh-bg-default);
   color: var(--bh-content-default);
   font-family: var(--bh-font-family);
   letter-spacing: var(--bh-text-base-letter-spacing);
+  outline: none;
+}
+
+.ds-table-wrap:focus-visible {
+  box-shadow: var(--shadow-component-focus-ring);
 }
 
 .ds-table-wrap *,
@@ -182,24 +192,26 @@
 
 .ds-table__cell {
   overflow: hidden;
-  padding: 0 var(--bh-space-md-8);
+  padding-block: 0;
+  padding-inline: var(--bh-space-xl-12);
   vertical-align: middle;
 }
 
-.ds-table__cell--fill {
-  width: auto;
+.ds-table__cell--actions {
+  padding-inline: var(--bh-space-md-8);
 }
 
-.ds-table__cell--selection,
-.ds-table__cell--actions {
-  text-align: center;
+.ds-table__cell--fill {
+  width: auto;
 }
 
-.ds-table__cell--center {
+.ds-table .ds-table__cell--selection,
+.ds-table .ds-table__cell--actions,
+.ds-table .ds-table__cell--center {
   text-align: center;
 }
 
-.ds-table__cell--end {
+.ds-table .ds-table__cell--end {
   text-align: end;
 }
 
@@ -212,8 +224,12 @@
 }
 
 .ds-table__row--disabled {
-  color: var(--bh-content-muted);
-  opacity: var(--bh-opacity-muted);
+  color: var(--bh-content-default);
+}
+
+.ds-table__row--disabled .ds-table-item-text,
+.ds-table__row--disabled .ds-table-avatar-text em {
+  color: var(--bh-content-default);
 }
 
 .ds-table__sort {
@@ -317,7 +333,7 @@
 }
 
 .ds-table-item-text {
-  font-weight: var(--bh-font-weight-semibold);
+  font-weight: var(--bh-text-body-sm-regular-font-weight);
 }
 
 .ds-table-item-text--subtle {
@@ -325,7 +341,7 @@
 }
 
 .ds-table-item-text--medium {
-  font-weight: var(--bh-font-weight-semibold);
+  font-weight: var(--bh-text-body-sm-medium-font-weight);
 }
 
 .ds-table-avatar-text,
@@ -352,7 +368,7 @@
 
 .ds-table-avatar-text em {
   overflow: hidden;
-  color: var(--bh-content-muted);
+  color: var(--bh-content-default);
   font-size: var(--bh-text-body-2xs-regular-font-size);
   font-style: normal;
   line-height: var(--bh-text-body-2xs-regular-line-height);
@@ -361,20 +377,7 @@
 }
 
 .ds-table-avatar {
-  width: calc(var(--bh-space-5xl-24) + var(--bh-space-xs-4));
-  height: calc(var(--bh-space-5xl-24) + var(--bh-space-xs-4));
   flex: 0 0 auto;
-  display: inline-grid;
-  place-items: center;
-  border-radius: var(--bh-radius-full);
-  background: var(--bh-bg-brand-soft);
-  color: var(--bh-content-brand-default);
-  font-size: var(--bh-text-body-3xs-regular-font-size);
-  font-weight: var(--bh-font-weight-bold);
-}
-
-img.ds-table-avatar {
-  object-fit: cover;
 }
 
 .ds-table-badges,
@@ -387,8 +390,7 @@ img.ds-table-avatar {
   max-width: 100%;
 }
 
-.ds-table-badge,
-.ds-table-tags span {
+.ds-table-badge {
   min-height: var(--bh-space-5xl-24);
   display: inline-flex;
   align-items: center;
@@ -447,37 +449,12 @@ img.ds-table-avatar {
 
 .ds-table-progress {
   min-width: var(--bh-table-selection-column-min-width);
-  display: inline-grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: center;
-  gap: var(--bh-space-md-8);
-}
-
-.ds-table-progress > span {
-  height: var(--bh-space-md-8);
-  overflow: hidden;
-  border-radius: var(--bh-radius-full);
-  background: var(--bh-bg-muted);
 }
 
-.ds-table-progress i {
-  height: 100%;
-  display: block;
-  border-radius: inherit;
+.ds-table-progress--success [data-slot="progress-fill"] {
   background: var(--bh-content-success-default);
 }
 
-.ds-table-progress--brand i {
-  background: var(--bh-bg-brand-default);
-}
-
-.ds-table-progress em {
-  color: var(--bh-content-subtle);
-  font-size: var(--bh-text-body-2xs-regular-font-size);
-  font-style: normal;
-  font-weight: var(--bh-font-weight-semibold);
-}
-
 .ds-table-toggle {
   width: calc(var(--bh-space-6xl-32) + var(--bh-space-xxs-2));
   height: var(--bh-space-4xl-20);
@@ -574,12 +551,23 @@ img.ds-table-avatar {
 }
 
 .ds-table-rating {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bh-space-xxxs-1);
   color: var(--bh-bg-neutral-medium);
-  letter-spacing: var(--bh-space-xxxs-1);
+  vertical-align: middle;
+}
+
+.ds-table-rating svg {
+  width: var(--bh-space-3xl-16);
+  height: var(--bh-space-3xl-16);
+  flex: 0 0 auto;
+  fill: transparent;
 }
 
 .ds-table-rating .is-filled {
   color: var(--bh-bg-accent-golden-default);
+  fill: currentColor;
 }
 
 .ds-table-avatar-stack .ds-table-avatar {
@@ -589,24 +577,27 @@ img.ds-table-avatar {
 
 .ds-table-avatar--count,
 .ds-table-avatar-stack button {
-  width: calc(var(--bh-space-5xl-24) + var(--bh-space-xs-4));
-  height: calc(var(--bh-space-5xl-24) + var(--bh-space-xs-4));
+  width: var(--bh-avatar-size-xs);
+  height: var(--bh-avatar-size-xs);
   border: var(--bh-space-xxs-2) solid var(--bh-bg-raised);
   border-radius: var(--bh-radius-full);
   background: var(--bh-bg-muted);
   color: var(--bh-content-subtle);
-  font-size: var(--bh-text-body-3xs-regular-font-size);
-  font-weight: var(--bh-font-weight-bold);
+  font-size: var(--bh-avatar-fallback-font-size-xs);
+  font-weight: var(--bh-font-weight-semibold);
 }
 
-.ds-table-wrap[dir="rtl"] {
-  font-family: var(--bh-font-family);
+.ds-table-avatar-stack--lg .ds-table-avatar--count,
+.ds-table-avatar-stack--lg button {
+  width: var(--bh-avatar-size-md);
+  height: var(--bh-avatar-size-md);
+  font-size: var(--bh-avatar-fallback-font-size-md);
 }
 
-.ds-table-wrap[dir="rtl"] .ds-table-progress i {
-  margin-inline-start: auto;
+.ds-table-wrap:dir(rtl) {
+  font-family: var(--bh-font-family);
 }
 
-.ds-table-wrap[dir="rtl"] .ds-table-toggle[aria-pressed="true"] span {
+.ds-table-wrap:dir(rtl) .ds-table-toggle[aria-pressed="true"] span {
   transform: translateX(calc(-1 * var(--bh-space-2xl-14)));
 }

package/registry/components/expanded/timeline.css

@@ -49,10 +49,17 @@
   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--rtl,
-.ds-timeline-item--rtl {
+.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);
 }
 
@@ -68,7 +75,7 @@
   min-height: calc(var(--bh-space-9xl-64) + var(--bh-space-xl-12));
 }
 
-.ds-timeline-item--vertical.ds-timeline-item--rtl {
+.ds-timeline-item--vertical:dir(rtl) {
   justify-content: flex-end;
 }
 
@@ -82,7 +89,7 @@
   width: var(--bh-timeline-sidebar-width);
 }
 
-.ds-timeline-item--horizontal.ds-timeline-item--rtl {
+.ds-timeline-item--horizontal:dir(rtl) {
   align-items: flex-end;
 }
 
@@ -90,7 +97,6 @@
   flex: 0 0 auto;
   display: flex;
   align-items: center;
-  direction: ltr;
 }
 
 .ds-timeline__indicator--vertical {
@@ -190,7 +196,7 @@
   color: var(--timeline-content-default);
 }
 
-.ds-timeline-item--rtl .ds-timeline__body {
+.ds-timeline-item:dir(rtl) .ds-timeline__body {
   align-items: flex-end;
   text-align: right;
 }
@@ -198,12 +204,7 @@
 .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);
+  padding-inline-end: var(--timeline-space-xl);
 }
 
 .ds-timeline__copy {
@@ -251,7 +252,7 @@
   padding-top: var(--timeline-space-xs);
 }
 
-.ds-timeline-item--vertical.ds-timeline-item--ltr .ds-timeline__date--leading {
+.ds-timeline-item--vertical:dir(ltr) .ds-timeline__date--leading {
   text-align: right;
 }
 
@@ -261,9 +262,9 @@
   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 {
+.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;
 }