banhaten 0.4.0 → 0.6.0

package/registry/components/expanded/pageHeader.css

@@ -1,22 +1,18 @@
 .ds-page-header {
-  --page-header-border-default: var(--bh-border-default);
   --page-header-content-brand: var(--bh-content-brand-default);
   --page-header-content-default: var(--bh-content-default);
   --page-header-content-heading: var(--bh-content-default);
   --page-header-content-muted: var(--bh-content-muted);
   --page-header-content-subtle: var(--bh-content-subtle);
-  --page-header-interactive-secondary: var(--bh-interactive-secondary-default);
-  --page-header-interactive-secondary-hover: var(--bh-bg-raised);
-  --page-header-control-radius: var(--bh-control-default);
   --page-header-space-xs: var(--bh-space-xs-4);
   --page-header-space-md: var(--bh-space-md-8);
   --page-header-space-lg: var(--bh-space-lg-10);
-  --page-header-space-xl: var(--bh-space-xl-12);
   --page-header-space-2xl: var(--bh-space-2xl-14);
+  --page-header-space-xl: var(--bh-space-xl-12);
   --page-header-space-3xl: var(--bh-space-3xl-16);
   --page-header-space-4xl: var(--bh-space-4xl-20);
+  --page-header-space-5xl: var(--bh-space-5xl-24);
   --page-header-space-7xl: var(--bh-space-7xl-40);
-  --page-header-action-height: calc(var(--bh-space-6xl-32) + var(--bh-space-xs-4));
 
   box-sizing: border-box;
   width: 100%;
@@ -42,12 +38,8 @@
   margin: 0;
 }
 
-.ds-page-header button,
-.ds-page-header a {
+.ds-page-header__breadcrumbs a {
   font: inherit;
-}
-
-.ds-page-header a {
   color: inherit;
   text-decoration: none;
 }
@@ -68,8 +60,7 @@
 }
 
 .ds-page-header__breadcrumbs li,
-.ds-page-header__breadcrumbs a,
-.ds-page-header__breadcrumbs span:not(.ds-page-header__breadcrumb-separator) {
+.ds-page-header__breadcrumbs a {
   display: inline-flex;
   align-items: center;
   gap: var(--page-header-space-xs);
@@ -92,15 +83,6 @@
   white-space: nowrap;
 }
 
-.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;
-  place-items: center;
-  color: currentColor;
-}
-
 .ds-page-header__breadcrumb-separator,
 .ds-page-header__breadcrumbs .ds-breadcrumbs__separator {
   width: var(--page-header-space-3xl);
@@ -200,40 +182,52 @@
   gap: var(--page-header-space-md);
 }
 
-.ds-page-header__action {
-  min-width: 0;
-  height: var(--page-header-action-height);
-  border: var(--bh-space-xxxs-1) solid var(--page-header-border-default);
-  border-radius: var(--page-header-control-radius);
-  display: inline-flex;
+.ds-page-header__supporting {
+  display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  justify-content: center;
-  padding: 0 var(--page-header-space-xl);
-  background: var(--page-header-interactive-secondary);
-  box-shadow: var(--shadow-button-secondary);
-  color: var(--page-header-content-default);
-  cursor: pointer;
-  font-size: var(--bh-text-body-md-medium-font-size);
-  font-weight: var(--bh-text-body-md-medium-font-weight);
-  line-height: var(--bh-text-body-md-medium-line-height);
-  white-space: nowrap;
+  gap: var(--page-header-space-md);
+}
+
+/* Comfortable: the page heading inside an app shell (ATS360 frames). The shell header holds the breadcrumbs,
+   so the heading has no block padding; title and description sit md apart and actions xl apart. */
+.ds-page-header--comfortable {
+  padding-block: 0;
 }
 
-.ds-page-header__action:hover {
-  background: var(--page-header-interactive-secondary-hover);
+.ds-page-header--comfortable .ds-page-header__topline {
+  gap: var(--page-header-space-5xl);
 }
 
-.ds-page-header__action:disabled {
-  cursor: not-allowed;
-  opacity: var(--bh-opacity-muted);
+.ds-page-header--comfortable .ds-page-header__copy {
+  gap: var(--page-header-space-md);
+}
+
+.ds-page-header--comfortable .ds-page-header__actions {
+  gap: var(--page-header-space-xl);
+}
+
+/* Page actions keep the frame's minimum widths: secondary actions and primary actions each line up across pages. */
+.ds-page-header--comfortable .ds-page-header__actions [data-slot="button"]:not([data-size^="icon"]) {
+  min-width: var(--bh-page-header-comfortable-action-min-width);
+}
+
+.ds-page-header--comfortable .ds-page-header__actions [data-slot="button"][data-variant="default"]:not([data-size^="icon"]) {
+  min-width: var(--bh-page-header-comfortable-primary-action-min-width);
 }
 
-.ds-page-header__action:focus-visible,
 .ds-page-header__breadcrumbs a:focus-visible {
   outline: var(--bh-focus-ring-width) solid var(--page-header-content-brand);
   outline-offset: var(--bh-space-xxs-2);
 }
 
+.ds-page-header__tabs-root {
+  align-self: stretch;
+  min-width: 0;
+  max-width: 100%;
+  width: 100%;
+}
+
 .ds-page-header__tabs {
   width: 100%;
 }

package/registry/components/expanded/slideout.css

@@ -44,8 +44,8 @@
   --slideout-choice-size: var(--bh-space-3xl-16);
   --slideout-dot-size: var(--bh-space-sm-6);
   --slideout-avatar-status-offset: calc(-1 * var(--bh-space-xxxs-1));
-  --slideout-shadow-control: var(--shadow-button-raised);
-  --slideout-shadow-surface: var(--shadow-component-default);
+  --slideout-elevation-control: var(--elevation-button-raised);
+  --slideout-elevation-surface: var(--elevation-component-default);
 
   box-sizing: border-box;
   display: flex;
@@ -246,13 +246,13 @@
 .ds-slideout__button--primary {
   color: var(--slideout-on-brand);
   background: var(--slideout-brand-action);
-  box-shadow: var(--slideout-shadow-control);
+  box-shadow: var(--slideout-elevation-control);
 }
 
 .ds-slideout__button--secondary {
   color: var(--slideout-content-default);
   background: var(--slideout-bg-neutral);
-  box-shadow: var(--shadow-button-soft);
+  box-shadow: var(--elevation-button-soft);
 }
 
 .ds-slideout__text-button:hover,

package/registry/components/expanded/table.css

@@ -152,7 +152,7 @@
 }
 
 .ds-table-wrap:focus-visible {
-  box-shadow: var(--shadow-component-focus-ring);
+  box-shadow: var(--elevation-component-focus-ring);
 }
 
 .ds-table-wrap *,
@@ -186,8 +186,44 @@
   line-height: var(--bh-text-body-sm-regular-line-height);
 }
 
+/* lg follows the Table item 1.2 lg cells: 56px rows with body-md labels, so a label and caption fill 40px. */
 .ds-table-wrap--lg .ds-table td {
   height: calc(var(--bh-space-8xl-48) + var(--bh-space-md-8));
+  font-size: var(--bh-text-body-md-regular-font-size);
+  letter-spacing: var(--bh-text-body-md-regular-letter-spacing);
+  line-height: var(--bh-text-body-md-regular-line-height);
+}
+
+/* Comfortable: the Table item 1.2 spec with 64px rows, 8px cells, body-md text, and no row rules. */
+.ds-table-wrap--comfortable {
+  border-radius: var(--bh-table-comfortable-radius);
+}
+
+.ds-table-wrap--comfortable .ds-table {
+  min-width: var(--bh-table-comfortable-min-width);
+}
+
+.ds-table-wrap--comfortable .ds-table th {
+  height: var(--bh-table-comfortable-header-height);
+  background: var(--bh-table-comfortable-header-bg);
+  color: var(--bh-table-comfortable-header-content);
+  font-size: var(--bh-text-body-sm-medium-font-size);
+  font-weight: var(--bh-text-body-sm-medium-font-weight);
+  letter-spacing: var(--bh-text-body-sm-medium-letter-spacing);
+  line-height: var(--bh-text-body-sm-medium-line-height);
+}
+
+.ds-table-wrap--comfortable .ds-table td {
+  height: var(--bh-table-comfortable-row-height);
+  border-top: 0;
+  color: var(--bh-table-comfortable-cell-content);
+  font-size: var(--bh-text-body-md-regular-font-size);
+  letter-spacing: var(--bh-text-body-md-regular-letter-spacing);
+  line-height: var(--bh-text-body-md-regular-line-height);
+}
+
+.ds-table-wrap--comfortable .ds-table__cell {
+  padding-inline: var(--bh-table-comfortable-cell-padding-x);
 }
 
 .ds-table__cell {
@@ -228,7 +264,7 @@
 }
 
 .ds-table__row--disabled .ds-table-item-text,
-.ds-table__row--disabled .ds-table-avatar-text em {
+.ds-table__row--disabled .ds-table-caption {
   color: var(--bh-content-default);
 }
 
@@ -352,26 +388,39 @@
   max-width: 100%;
 }
 
-.ds-table-avatar-text > span:last-child {
+/* Line + subline: the label keeps the row's text size and the caption sits directly under it. */
+.ds-table-avatar-text > span:last-child,
+.ds-table-text-stack {
   min-width: 0;
+  max-width: 100%;
   display: grid;
-  gap: var(--bh-space-xxxs-1);
+}
+
+.ds-table-text-stack > span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .ds-table-avatar-text strong {
   overflow: hidden;
-  font-size: var(--bh-text-body-sm-regular-font-size);
-  font-weight: var(--bh-font-weight-semibold);
-  line-height: var(--bh-text-body-sm-regular-line-height);
+  font-weight: var(--bh-font-weight-medium);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.ds-table-avatar-text em {
+.ds-table-icon-label > span:last-child {
+  font-weight: var(--bh-font-weight-medium);
+}
+
+.ds-table-caption {
   overflow: hidden;
-  color: var(--bh-content-default);
+  color: var(--bh-table-caption-content);
   font-size: var(--bh-text-body-2xs-regular-font-size);
   font-style: normal;
+  font-weight: var(--bh-text-body-2xs-regular-font-weight);
+  letter-spacing: var(--bh-text-body-2xs-regular-letter-spacing);
   line-height: var(--bh-text-body-2xs-regular-line-height);
   text-overflow: ellipsis;
   white-space: nowrap;

package/registry/components/expanded/timeline.css

@@ -55,7 +55,7 @@
 }
 
 .ds-timeline--horizontal:focus-visible {
-  box-shadow: var(--shadow-component-focus-ring);
+  box-shadow: var(--elevation-component-focus-ring);
 }
 
 .ds-timeline:dir(rtl),

package/registry/components/hover-card.tsx

@@ -35,7 +35,7 @@ const HoverCardContent = React.forwardRef<
         ref={ref}
         sideOffset={sideOffset}
         className={cn(
-          "z-[var(--bh-z-popover)] w-[var(--bh-space-18xl-320)] rounded-[var(--bh-radius-2xl-12)] bg-[var(--bh-bg-raised)] p-[var(--bh-space-3xl-16)] text-start text-[var(--bh-content-default)] shadow-[var(--shadow-popover)] outline-none",
+          "z-[var(--bh-z-popover)] w-[var(--bh-space-18xl-320)] rounded-[var(--bh-radius-2xl-12)] bg-[var(--bh-bg-raised)] p-[var(--bh-space-3xl-16)] text-start text-[var(--bh-content-default)] shadow-[var(--elevation-popover)] outline-none",
           className
         )}
         {...props}

package/registry/components/inline-citations.css

@@ -0,0 +1,126 @@
+[data-slot="inline-citations"],
+[data-slot="citation-prose"] {
+  color: var(--bh-content-default);
+  font-family: var(--bh-font-family);
+  font-size: var(--bh-text-body-sm-regular-font-size);
+  font-weight: var(--bh-text-body-sm-regular-font-weight);
+  letter-spacing: var(--bh-text-body-sm-regular-letter-spacing);
+  line-height: var(--bh-text-body-sm-regular-line-height);
+  overflow-wrap: anywhere;
+}
+
+/* Numbered chip. Sits as a superscript in prose and flush in the list. */
+[data-slot="citation-mark"] {
+  align-items: center;
+  background-color: var(--bh-interactive-soft-default);
+  block-size: var(--bh-citation-mark-size);
+  border-radius: var(--bh-radius-sm-4);
+  color: var(--bh-content-subtle);
+  display: inline-flex;
+  flex: none;
+  font-size: var(--bh-text-body-3xs-semibold-font-size);
+  font-weight: var(--bh-text-body-3xs-semibold-font-weight);
+  justify-content: center;
+  letter-spacing: var(--bh-text-body-3xs-semibold-letter-spacing);
+  line-height: 1;
+  margin-inline: var(--bh-space-xxxs-1);
+  min-inline-size: var(--bh-citation-mark-size);
+  outline: none;
+  padding-inline: var(--bh-space-xxs-2);
+  transition: background-color var(--bh-duration-fast) var(--bh-easing-standard),
+    color var(--bh-duration-fast) var(--bh-easing-standard);
+  vertical-align: super;
+}
+
+a[data-slot="citation-mark"]:hover {
+  background-color: var(--bh-interactive-soft-hover);
+  color: var(--bh-content-default);
+}
+
+a[data-slot="citation-mark"]:focus-visible {
+  box-shadow: var(--elevation-component-focus-ring);
+}
+
+[data-slot="citation-list"] {
+  border-block-start: var(--bh-border-width-default) solid var(--bh-border-subtle);
+  display: flex;
+  flex-direction: column;
+  gap: var(--bh-space-sm-6);
+  margin-block-start: var(--bh-space-xl-12);
+  padding-block-start: var(--bh-space-lg-10);
+}
+
+[data-slot="citation-item"] {
+  align-items: center;
+  border-radius: var(--bh-radius-sm-4);
+  color: var(--bh-content-subtle);
+  display: flex;
+  font-size: var(--bh-text-body-2xs-regular-font-size);
+  font-weight: var(--bh-text-body-2xs-regular-font-weight);
+  gap: var(--bh-space-sm-6);
+  letter-spacing: var(--bh-text-body-2xs-regular-letter-spacing);
+  line-height: var(--bh-text-body-2xs-regular-line-height);
+  min-inline-size: 0;
+  outline: none;
+}
+
+[data-slot="citation-item"]:focus-visible {
+  box-shadow: var(--elevation-component-focus-ring);
+}
+
+[data-slot="citation-item"] [data-slot="citation-mark"] {
+  margin-inline: 0;
+  vertical-align: baseline;
+}
+
+[data-slot="citation-item-label"] {
+  color: var(--bh-content-default);
+  flex: 0 1 auto;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-slot="citation-item-separator"],
+[data-slot="citation-item-host"] {
+  color: var(--bh-content-subtle);
+  flex: none;
+  white-space: nowrap;
+}
+
+[data-slot="citation-item-host"] {
+  transition: color var(--bh-duration-fast) var(--bh-easing-standard);
+}
+
+/* Only rows that link react to hover; a source without a web address is text. */
+[data-slot="citation-item"][href]:hover [data-slot="citation-item-host"] {
+  color: var(--bh-content-default);
+}
+
+/* The external arrow only appears on hover and settles into place. */
+[data-slot="citation-item-arrow"] {
+  --citation-item-arrow-scale: 1;
+
+  block-size: var(--bh-space-lg-10);
+  color: var(--bh-content-subtle);
+  flex: none;
+  inline-size: var(--bh-space-lg-10);
+  margin-inline-start: calc(-1 * var(--bh-space-xxs-2));
+  opacity: var(--bh-opacity-0);
+  pointer-events: none;
+  transform: translateY(var(--bh-space-xxs-2))
+    scaleX(var(--citation-item-arrow-scale));
+  transition: opacity var(--bh-duration-fast) var(--bh-easing-standard),
+    transform var(--bh-duration-default) var(--bh-easing-standard);
+}
+
+[dir="rtl"] [data-slot="citation-item-arrow"] {
+  --citation-item-arrow-scale: -1;
+}
+
+[data-slot="citation-item"][href]:hover [data-slot="citation-item-arrow"],
+[data-slot="citation-item"][href]:focus-visible [data-slot="citation-item-arrow"] {
+  opacity: var(--bh-opacity-100);
+  transform: translateY(0) scaleX(var(--citation-item-arrow-scale));
+}