banhaten 0.1.0 → 0.1.1

package/registry/components/expanded/fileUpload.css

@@ -3,6 +3,7 @@
   width: 100%;
   max-width: var(--bh-file-upload-root-max-width);
   display: grid;
+  align-content: start;
   gap: var(--bh-space-xl-12);
   color: var(--bh-content-default);
   font-family: var(--bh-font-family);
@@ -20,29 +21,44 @@
 }
 
 .ds-file-upload__dropzone {
-  min-height: calc(var(--bh-space-14xl-192) + var(--bh-space-xs-4));
+  min-height: calc(var(--bh-space-13xl-160) + var(--bh-space-4xl-20));
   display: grid;
   place-items: center;
-  gap: var(--bh-space-md-8);
-  padding: calc(var(--bh-space-6xl-32) + var(--bh-space-xxs-2)) var(--bh-space-5xl-24);
-  border: var(--bh-space-xxxs-1) dashed var(--bh-border-default);
-  border-radius: var(--bh-radius-lg-8);
-  background: var(--bh-bg-muted);
+  gap: var(--bh-space-3xl-16);
+  padding: var(--bh-space-6xl-32) var(--bh-space-5xl-24);
+  border: var(--bh-border-width-strong) dashed var(--bh-border-default);
+  border-radius: var(--bh-radius-2xl-12);
+  background: var(--bh-bg-subtle);
+  color: var(--bh-content-default);
   text-align: center;
+  transition:
+    background-color var(--bh-duration-fast) var(--bh-easing-standard),
+    border-color var(--bh-duration-fast) var(--bh-easing-standard),
+    color var(--bh-duration-fast) var(--bh-easing-standard),
+    opacity var(--bh-duration-fast) var(--bh-easing-standard);
 }
 
-.ds-file-upload--sm .ds-file-upload__dropzone {
-  min-height: calc(var(--bh-space-13xl-160) - var(--bh-space-sm-6));
-  padding: var(--bh-space-5xl-24) calc(var(--bh-space-xl-12) + var(--bh-space-sm-6));
+.ds-file-upload--button .ds-file-upload__dropzone {
+  min-height: var(--bh-space-16xl-256);
+  gap: var(--bh-space-5xl-24);
+  padding-inline: var(--bh-space-6xl-32);
 }
 
-.ds-file-upload__dropzone.is-dragging {
-  border-color: var(--bh-border-brand-strong);
-  background: var(--bh-bg-brand-soft);
+.ds-file-upload__dropzone:hover,
+.ds-file-upload__dropzone.is-hover {
+  border-color: var(--bh-border-strong);
 }
 
 .ds-file-upload__dropzone[aria-disabled="true"] {
-  opacity: var(--bh-opacity-disabled-media);
+  border-color: var(--bh-border-disabled);
+  color: var(--bh-content-disabled);
+  cursor: not-allowed;
+}
+
+.ds-file-upload__dropzone[aria-disabled="true"] .ds-file-upload__helper,
+.ds-file-upload__dropzone[aria-disabled="true"] .ds-file-upload__browse,
+.ds-file-upload__dropzone[aria-disabled="true"] .ds-file-upload__title {
+  color: var(--bh-content-disabled);
 }
 
 .ds-file-upload__input {
@@ -54,22 +70,52 @@
   height: var(--bh-space-8xl-48);
   display: grid;
   place-items: center;
-  border: var(--bh-space-xxxs-1) solid var(--bh-border-subtle);
-  border-radius: var(--bh-control-default);
+  border: 0;
+  border-radius: var(--bh-radius-2xl-12);
   background: var(--bh-bg-default);
-  color: var(--bh-content-subtle);
+  color: var(--bh-content-default);
+  box-shadow:
+    inset 0px 0px 0px var(--bh-border-width-default) var(--bh-border-subtle),
+    var(--shadow-component-default);
+}
+
+.ds-file-upload__dropzone:hover .ds-file-upload__icon,
+.ds-file-upload__dropzone.is-hover .ds-file-upload__icon,
+.ds-file-upload__dropzone[aria-disabled="true"] .ds-file-upload__icon {
+  box-shadow:
+    inset 0px 0px 0px var(--bh-border-width-default) var(--bh-border-subtle),
+    var(--shadow-component-default);
 }
 
 .ds-file-upload__icon svg {
   width: var(--bh-space-5xl-24);
   height: var(--bh-space-5xl-24);
+  stroke-width: 2;
 }
 
-.ds-file-upload__dropzone p {
+.ds-file-upload__copy {
+  min-width: 0;
+  display: grid;
+  justify-items: center;
+  gap: var(--bh-space-xs-4);
+}
+
+.ds-file-upload--button .ds-file-upload__copy {
+  gap: var(--bh-space-md-8);
+}
+
+.ds-file-upload__title {
   margin: 0;
   color: var(--bh-content-default);
-  font-size: var(--bh-text-body-md-font-size);
-  line-height: var(--bh-text-body-md-line-height);
+  font-size: var(--bh-text-body-md-medium-font-size);
+  font-weight: var(--bh-font-weight-medium);
+  line-height: var(--bh-text-body-md-medium-line-height);
+}
+
+.ds-file-upload--button .ds-file-upload__title {
+  font-size: var(--bh-text-body-lg-semibold-font-size);
+  font-weight: var(--bh-font-weight-semibold);
+  line-height: var(--bh-text-body-lg-semibold-line-height);
 }
 
 .ds-file-upload__browse {
@@ -78,24 +124,34 @@
   color: var(--bh-content-link);
   padding: 0;
   font: inherit;
-  font-weight: var(--bh-font-weight-semibold);
   cursor: pointer;
 }
 
-.ds-file-upload__browse:focus-visible {
+.ds-file-upload__browse:hover {
+  color: var(--bh-content-link-hover);
+}
+
+.ds-file-upload__browse:focus-visible,
+.ds-file-upload-row__retry:focus-visible {
   border-radius: var(--bh-radius-sm-4);
-  outline: var(--bh-space-xxs-2) solid var(--bh-border-focus);
+  outline: var(--bh-focus-ring-width) solid var(--bh-border-focus);
   outline-offset: var(--bh-space-xxs-2);
 }
 
 .ds-file-upload__helper {
-  color: var(--bh-content-muted);
-  font-size: var(--bh-text-body-xs-regular-font-size);
-  line-height: var(--bh-text-body-sm-regular-line-height);
+  color: var(--bh-content-subtle);
+  font-size: var(--bh-text-body-md-regular-font-size);
+  font-weight: var(--bh-font-weight-regular);
+  line-height: var(--bh-text-body-md-regular-line-height);
+}
+
+.ds-file-upload__button {
+  width: calc(var(--bh-space-13xl-160) + var(--bh-space-lg-10) + var(--bh-space-xxxs-1));
 }
 
 .ds-file-upload__list {
   display: grid;
+  align-content: start;
   gap: var(--bh-space-xl-12);
   margin: 0;
   padding: 0;
@@ -103,53 +159,123 @@
 }
 
 .ds-file-upload-row {
-  display: grid;
-  grid-template-columns: var(--bh-space-7xl-40) minmax(0, 1fr) auto auto;
+  --ds-file-upload-row-border: var(--bh-border-subtle);
+  --ds-file-upload-row-shadow:
+    inset 0px 0px 0px var(--bh-border-width-default) var(--ds-file-upload-row-border),
+    var(--shadow-component-default);
+
+  min-height: calc(var(--bh-space-9xl-64) + var(--bh-space-xl-12));
+  display: flex;
   align-items: center;
   gap: var(--bh-space-xl-12);
-  min-height: calc(var(--bh-space-9xl-64) + var(--bh-space-md-8));
   padding: var(--bh-space-3xl-16);
-  border: var(--bh-space-xxxs-1) solid var(--bh-border-subtle);
-  border-radius: var(--bh-radius-lg-8);
+  border: 0;
+  border-radius: var(--bh-radius-2xl-12);
   background: var(--bh-bg-raised);
-  box-shadow: var(--shadow-component-default);
+  box-shadow: var(--ds-file-upload-row-shadow);
+  overflow: clip;
 }
 
 .ds-file-upload-row--sm {
-  grid-template-columns: var(--bh-space-6xl-32) minmax(0, 1fr) auto;
+  min-height: calc(var(--bh-space-8xl-48) + var(--bh-space-md-8));
   gap: var(--bh-space-md-8);
-  min-height: calc(var(--bh-space-8xl-48) + var(--bh-space-lg-10));
   padding: var(--bh-space-xl-12);
+  border-radius: var(--bh-radius-lg-8);
+}
+
+.ds-file-upload-row--uploading-progress.ds-file-upload-row--lg {
+  min-height: calc(var(--bh-space-9xl-64) + var(--bh-space-lg-10));
+}
+
+.ds-file-upload-row--uploading-progress.ds-file-upload-row--sm {
+  min-height: var(--bh-space-9xl-64);
 }
 
 .ds-file-upload-row--error {
-  border-color: var(--bh-border-danger-subtle);
+  --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);
+}
+
+.ds-file-upload-row__content {
+  min-width: 0;
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  gap: var(--bh-space-xl-12);
+}
+
+.ds-file-upload-row--error.ds-file-upload-row--lg .ds-file-upload-row__content,
+.ds-file-upload-row--uploading-progress.ds-file-upload-row--lg .ds-file-upload-row__content {
+  align-items: flex-start;
 }
 
-.ds-file-upload-row__file-icon {
+.ds-file-upload-row--sm .ds-file-upload-row__content {
+  gap: var(--bh-space-xl-12);
+}
+
+.ds-file-upload-file-icon {
+  --ds-file-upload-file-page-fill: var(--bh-bg-neutral-subtle);
+
+  position: relative;
   width: var(--bh-space-7xl-40);
   height: var(--bh-space-7xl-40);
-  display: grid;
-  place-items: center;
-  border-radius: var(--bh-control-default);
-  background: var(--bh-interactive-secondary-default);
+  display: block;
+  flex: 0 0 var(--bh-space-7xl-40);
   color: var(--bh-content-subtle);
 }
 
-.ds-file-upload-row--sm .ds-file-upload-row__file-icon {
+.ds-file-upload-file-icon--sm {
   width: var(--bh-space-6xl-32);
   height: var(--bh-space-6xl-32);
+  flex-basis: var(--bh-space-6xl-32);
 }
 
-.ds-file-upload-row__file-icon svg,
-.ds-file-upload-row__status svg {
-  width: var(--bh-space-4xl-20);
-  height: var(--bh-space-4xl-20);
+.ds-file-upload-file-icon__svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+  overflow: visible;
+}
+
+.ds-file-upload-file-icon__page {
+  fill: var(--ds-file-upload-file-page-fill);
+  stroke: currentColor;
+}
+
+.ds-file-upload-file-icon__fold {
+  stroke: currentColor;
+}
+
+.ds-file-upload-file-icon__badge {
+  fill: var(--ds-file-upload-file-badge-bg);
+}
+
+.ds-file-upload-file-icon__label {
+  fill: var(--bh-content-on-color);
+  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;
+  line-height: 1;
+  pointer-events: none;
+  text-rendering: geometricPrecision;
 }
 
 .ds-file-upload-row__copy {
   min-width: 0;
+  flex: 1 1 auto;
   display: grid;
+  gap: var(--bh-space-none);
+  text-align: start;
+}
+
+.ds-file-upload-row--error.ds-file-upload-row--lg .ds-file-upload-row__copy {
+  gap: var(--bh-space-none);
+}
+
+.ds-file-upload-row--uploading-progress .ds-file-upload-row__copy {
   gap: var(--bh-space-xxs-2);
 }
 
@@ -157,30 +283,80 @@
   min-width: 0;
   overflow: hidden;
   color: var(--bh-content-default);
-  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-size: var(--bh-text-body-md-medium-font-size);
+  font-weight: var(--bh-font-weight-medium);
+  line-height: var(--bh-text-body-md-medium-line-height);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.ds-file-upload-row__copy span,
-.ds-file-upload-row__copy em {
-  color: var(--bh-content-muted);
-  font-size: var(--bh-text-body-2xs-regular-font-size);
-  font-style: normal;
-  line-height: var(--bh-text-body-2xs-regular-line-height);
+.ds-file-upload-row--sm .ds-file-upload-row__copy strong {
+  font-size: var(--bh-text-body-sm-medium-font-size);
+  line-height: var(--bh-text-body-sm-medium-line-height);
 }
 
-.ds-file-upload-row__copy em {
-  color: var(--bh-content-danger-default);
+.ds-file-upload-row__details,
+.ds-file-upload-row__headline {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--bh-space-md-8);
+  color: var(--bh-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-file-upload-row__headline {
+  gap: var(--bh-space-xs-4);
+}
+
+.ds-file-upload-row__headline span {
+  flex: 0 0 auto;
+  color: var(--bh-content-subtle);
+  font-size: var(--bh-text-body-xs-regular-font-size);
+  line-height: var(--bh-text-body-xs-regular-line-height);
+}
+
+.ds-file-upload-row__headline strong {
+  flex: 0 1 auto;
+}
+
+.ds-file-upload-row__dot {
+  color: var(--bh-content-subtle);
+}
+
+.ds-file-upload-row__state {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bh-space-xs-4);
+}
+
+.ds-file-upload-row__state::before {
+  content: "";
+  width: var(--bh-border-width-default);
+  height: var(--bh-space-3xl-16);
+  margin-inline-end: var(--bh-space-none);
+  background: var(--bh-border-subtle);
 }
 
 .ds-file-upload-row__status {
-  width: var(--bh-space-5xl-24);
-  height: var(--bh-space-5xl-24);
-  display: grid;
+  width: var(--bh-space-3xl-16);
+  height: var(--bh-space-3xl-16);
+  display: inline-grid;
   place-items: center;
+  flex: 0 0 var(--bh-space-3xl-16);
+}
+
+.ds-file-upload-row__status svg {
+  width: var(--bh-space-3xl-16);
+  height: var(--bh-space-3xl-16);
+  stroke-width: 2.2;
+}
+
+.ds-file-upload-row__status--standalone {
+  margin-inline-start: auto;
 }
 
 .ds-file-upload-row__status--uploaded {
@@ -195,34 +371,87 @@
   color: var(--bh-content-danger-default);
 }
 
-.ds-file-upload-row__actions {
-  display: flex;
-  align-items: center;
-  gap: var(--bh-space-xs-4);
+.ds-file-upload-row__status--uploading svg {
+  animation: ds-file-upload-spin 1s linear infinite;
 }
 
-.ds-file-upload-row--sm .ds-file-upload-row__actions {
-  grid-column: 2 / -1;
-  justify-content: flex-start;
+.ds-file-upload-row--error .ds-file-upload-row__state,
+.ds-file-upload-row--error .ds-file-upload-row__retry {
+  color: var(--bh-content-danger-default);
 }
 
-.ds-file-upload-row__actions button {
-  min-height: calc(var(--bh-space-5xl-24) + var(--bh-space-xs-4));
+.ds-file-upload-row__retry {
+  width: max-content;
   border: 0;
-  border-radius: var(--bh-control-default);
-  background: var(--bh-interactive-secondary-default);
-  color: var(--bh-content-default);
-  padding: 0 var(--bh-space-lg-10);
+  background: transparent;
+  padding: 0;
+  color: var(--bh-content-danger-default);
   font: inherit;
-  font-size: var(--bh-text-body-2xs-regular-font-size);
-  font-weight: var(--bh-font-weight-semibold);
+  font-size: var(--bh-text-body-md-medium-font-size);
+  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;
   cursor: pointer;
 }
 
-.ds-file-upload-row__actions button:hover {
-  background: var(--bh-interactive-ghost-hover);
+.ds-file-upload-row--error.ds-file-upload-row--lg .ds-file-upload-row__retry {
+  margin-block-start: var(--bh-space-md-8);
+}
+
+.ds-file-upload-row__progress {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--bh-space-sm-6);
+}
+
+.ds-file-upload-row__progress-track {
+  position: relative;
+  height: var(--bh-space-sm-6);
+  flex: 1 1 auto;
+  overflow: hidden;
+  border-radius: var(--bh-radius-full);
+  background: var(--bh-bg-dim);
+}
+
+.ds-file-upload-row__progress-fill {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  border-radius: inherit;
+  background: var(--bh-bg-success-default);
+}
+
+.ds-file-upload-row__progress-label {
+  flex: 0 0 auto;
+  color: var(--bh-content-subtle);
+  font-size: var(--bh-text-body-xs-regular-font-size);
+  line-height: var(--bh-text-body-xs-regular-line-height);
+}
+
+.ds-file-upload-row__actions {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: var(--bh-space-xs-4);
+}
+
+.ds-file-upload-row__action {
+  color: var(--bh-content-default);
+}
+
+.ds-file-upload-row__action svg {
+  width: var(--bh-space-4xl-20);
+  height: var(--bh-space-4xl-20);
 }
 
 .ds-file-upload[dir="rtl"] {
   font-family: var(--bh-font-family);
 }
+
+@keyframes ds-file-upload-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/registry/components/expanded/pageHeader.css

@@ -227,7 +227,7 @@
 
 .ds-page-header__action:focus-visible,
 .ds-page-header__breadcrumbs a:focus-visible {
-  outline: var(--bh-space-xxs-2) solid var(--page-header-content-brand);
+  outline: var(--bh-focus-ring-width) solid var(--page-header-content-brand);
   outline-offset: var(--bh-space-xxs-2);
 }
 

package/registry/components/expanded/steps.css

@@ -77,10 +77,9 @@
   --steps-item-align: center;
 }
 
-.ds-horizontal-step-item--trailing.ds-horizontal-step-item--ltr,
-.ds-horizontal-step-item--leading.ds-horizontal-step-item--rtl {
-  --steps-item-align: end;
-}
+.ds-horizontal-step-item--trailing {
+  --steps-item-align: end;
+}
 
 .ds-horizontal-step-item__track {
   display: flex;
@@ -154,11 +153,12 @@
   text-align: center;
 }
 
-.ds-step-marker--icon svg {
-  width: var(--bh-space-5xl-24);
-  height: var(--bh-space-5xl-24);
-  fill: currentColor;
-}
+.ds-step-marker--icon svg {
+  width: var(--bh-space-3xl-16);
+  height: var(--bh-space-3xl-16);
+  fill: none;
+  stroke: currentColor;
+}
 
 .ds-vertical-step-item {
   display: flex;
@@ -282,48 +282,12 @@
   gap: var(--steps-space-md);
 }
 
-.ds-vertical-step-item--rtl .ds-vertical-step-item__actions {
-  align-self: flex-end;
-}
+.ds-vertical-step-item--rtl .ds-vertical-step-item__actions {
+  align-self: flex-start;
+}
 
-.ds-step-button {
-  appearance: none;
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: calc(var(--bh-space-6xl-32) + var(--bh-space-xs-4));
-  margin: 0;
-  padding: var(--steps-space-md) var(--steps-space-xl);
-  border-radius: var(--steps-radius-control);
-  font: inherit;
-  font-size: var(--bh-text-body-md-font-size);
-  font-weight: var(--bh-font-weight-medium);
-  line-height: var(--bh-text-body-md-line-height);
-  white-space: nowrap;
-  cursor: pointer;
-  box-shadow: var(--shadow-button-raised);
-}
-
-.ds-step-button--primary {
-  border: 0;
-  color: var(--steps-content-on-brand);
-  background: var(--steps-interactive-brand);
-}
-
-.ds-step-button--secondary {
-  border: var(--bh-space-xxxs-1) solid var(--steps-border-default);
-  color: var(--steps-content-default);
-  background: var(--steps-interactive-secondary);
-}
-
-.ds-step-button:focus-visible {
-  outline: var(--bh-space-xxs-2) solid var(--steps-interactive-brand);
-  outline-offset: var(--bh-space-xxs-2);
-}
-
-.ds-vertical-step-item__bottom-padding {
-  width: 100%;
-  height: var(--bh-space-5xl-24);
+.ds-vertical-step-item__bottom-padding {
+  width: 100%;
+  height: var(--bh-space-5xl-24);
   flex: 0 0 auto;
 }

package/registry/components/expanded/table.css

@@ -302,7 +302,7 @@
 }
 
 .ds-table-checkbox input:focus-visible + span {
-  outline: var(--bh-space-xxs-2) solid var(--bh-border-focus);
+  outline: var(--bh-focus-ring-width) solid var(--bh-border-focus);
   outline-offset: var(--bh-space-xxs-2);
 }
 
@@ -315,6 +315,10 @@
   white-space: nowrap;
 }
 
+.ds-table-item-text {
+  font-weight: var(--bh-font-weight-semibold);
+}
+
 .ds-table-item-text--subtle {
   color: var(--bh-content-subtle);
 }

package/registry/components/expanded/timeline.css

@@ -9,10 +9,11 @@
   --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-space-xxs: var(--bh-space-xxs-2);
-  --timeline-space-xs: var(--bh-space-xs-4);
-  --timeline-space-sm: var(--bh-space-sm-6);
+  --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);
 
@@ -92,17 +93,19 @@
   direction: ltr;
 }
 
-.ds-timeline__indicator--vertical {
-  align-self: stretch;
-  flex-direction: column;
-  padding-top: var(--timeline-space-xxs);
-}
-
-.ds-timeline__indicator--horizontal {
-  width: 100%;
-  min-width: 0;
-  flex-direction: row;
-}
+.ds-timeline__indicator--vertical {
+  align-self: stretch;
+  flex-direction: column;
+  width: var(--timeline-marker-slot);
+  padding-top: var(--timeline-space-xxs);
+}
+
+.ds-timeline__indicator--horizontal {
+  width: 100%;
+  height: var(--timeline-marker-slot);
+  min-width: 0;
+  flex-direction: row;
+}
 
 .ds-timeline-item--icon .ds-timeline__indicator {
   gap: var(--timeline-space-xxs);