banhaten 0.1.0 → 0.1.2

package/registry/components/expanded/emptyState.css

@@ -0,0 +1,111 @@
+.ds-empty-state {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: calc(var(--bh-space-19xl-384) + var(--bh-space-9xl-64));
+  min-height: var(--bh-space-16xl-256);
+  display: grid;
+  align-content: center;
+  justify-items: center;
+  gap: var(--bh-space-5xl-24);
+  margin-inline: auto;
+  padding: var(--bh-space-6xl-32);
+  color: var(--bh-content-default);
+  font-family: var(--bh-font-family);
+  letter-spacing: 0;
+  text-align: center;
+}
+
+.ds-empty-state *,
+.ds-empty-state *::before,
+.ds-empty-state *::after {
+  box-sizing: border-box;
+}
+
+.ds-empty-state--start {
+  justify-items: start;
+  margin-inline: 0;
+  text-align: start;
+}
+
+.ds-empty-state--compact {
+  min-height: var(--bh-space-13xl-160);
+  gap: var(--bh-space-3xl-16);
+  padding: var(--bh-space-5xl-24);
+}
+
+.ds-empty-state__icon-wrap {
+  width: var(--bh-space-10xl-80);
+  height: var(--bh-space-10xl-80);
+  border-radius: var(--bh-radius-full);
+  display: grid;
+  flex: 0 0 auto;
+  place-items: center;
+  background: var(--bh-bg-neutral-subtle);
+  color: var(--bh-content-default);
+}
+
+.ds-empty-state--compact .ds-empty-state__icon-wrap {
+  width: var(--bh-space-9xl-64);
+  height: var(--bh-space-9xl-64);
+}
+
+.ds-empty-state__icon-media {
+  width: var(--bh-space-6xl-32);
+  height: var(--bh-space-6xl-32);
+  display: grid;
+  place-items: center;
+  color: var(--bh-content-default);
+}
+
+.ds-empty-state--compact .ds-empty-state__icon-media {
+  width: var(--bh-space-5xl-24);
+  height: var(--bh-space-5xl-24);
+}
+
+.ds-empty-state__icon-media svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+  stroke-width: var(--bh-empty-state-icon-stroke-width);
+}
+
+.ds-empty-state__copy {
+  min-width: 0;
+  display: grid;
+  justify-items: inherit;
+  gap: var(--bh-space-xs-4);
+}
+
+.ds-empty-state__title,
+.ds-empty-state__description {
+  margin: 0;
+}
+
+.ds-empty-state__title {
+  color: var(--bh-content-default);
+  font-size: var(--bh-text-heading-xs-semibold-font-size);
+  font-weight: var(--bh-text-heading-xs-semibold-font-weight);
+  letter-spacing: var(--bh-text-heading-xs-semibold-letter-spacing);
+  line-height: var(--bh-text-heading-xs-semibold-line-height);
+}
+
+.ds-empty-state__description {
+  max-width: var(--bh-space-19xl-384);
+  color: var(--bh-content-subtle);
+  font-size: var(--bh-text-body-md-regular-font-size);
+  font-weight: var(--bh-text-body-md-regular-font-weight);
+  letter-spacing: var(--bh-text-body-md-regular-letter-spacing);
+  line-height: var(--bh-text-body-md-regular-line-height);
+}
+
+.ds-empty-state__actions {
+  min-width: 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: var(--bh-space-xl-12);
+}
+
+.ds-empty-state--start .ds-empty-state__actions {
+  justify-content: flex-start;
+}

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/slideout.css

@@ -202,6 +202,7 @@
   padding: var(--slideout-space-4xl);
   overflow-x: hidden;
   overflow-y: auto;
+  scrollbar-gutter: stable;
   scrollbar-color: var(--bh-bg-neutral-medium) transparent;
   scrollbar-width: thin;
 }