banhaten 0.1.0

package/registry/components/expanded/breadcrumbs.css

@@ -0,0 +1,140 @@
+.ds-breadcrumbs {
+  --breadcrumbs-color: var(--bh-content-subtle);
+  --breadcrumbs-current: var(--bh-content-default);
+  --breadcrumbs-border: var(--bh-border-subtle);
+  --breadcrumbs-surface: var(--bh-bg-raised);
+  --breadcrumbs-radius: var(--bh-radius-lg-8);
+
+  box-sizing: border-box;
+  display: block;
+  max-width: 100%;
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  color: var(--breadcrumbs-color);
+  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;
+  line-height: var(--bh-text-body-md-line-height);
+}
+
+.ds-breadcrumbs *,
+.ds-breadcrumbs *::before,
+.ds-breadcrumbs *::after {
+  box-sizing: border-box;
+}
+
+.ds-breadcrumbs ol {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bh-space-xs-4);
+  max-width: 100%;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.ds-breadcrumbs--raised ol {
+  gap: var(--bh-space-md-8);
+  padding: var(--bh-space-xl-12);
+  border: var(--bh-space-xxxs-1) solid var(--breadcrumbs-border);
+  border-radius: var(--breadcrumbs-radius);
+  background: var(--breadcrumbs-surface);
+}
+
+.ds-breadcrumbs li,
+.ds-breadcrumbs a,
+.ds-breadcrumbs li > span {
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bh-space-xs-4);
+}
+
+.ds-breadcrumbs a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.ds-breadcrumbs a:hover {
+  color: var(--breadcrumbs-current);
+}
+
+.ds-breadcrumbs a:focus-visible {
+  border-radius: var(--bh-radius-sm-4);
+  outline: var(--bh-space-xxs-2) solid var(--bh-border-focus);
+  outline-offset: var(--bh-space-xxs-2);
+}
+
+.ds-breadcrumbs .is-current {
+  color: var(--breadcrumbs-current);
+}
+
+.ds-breadcrumbs__icon {
+  width: var(--bh-space-4xl-20);
+  height: var(--bh-space-4xl-20);
+  flex: 0 0 auto;
+  display: inline-grid;
+  place-items: center;
+  color: currentColor;
+}
+
+.ds-breadcrumbs__icon:empty {
+  display: none;
+}
+
+.ds-breadcrumbs__icon svg {
+  width: var(--bh-space-4xl-20);
+  height: var(--bh-space-4xl-20);
+  display: block;
+}
+
+.ds-breadcrumbs__label {
+  max-width: 20ch;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ds-breadcrumbs__label--hidden {
+  position: absolute;
+  width: var(--bh-space-xxxs-1);
+  height: var(--bh-space-xxxs-1);
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+.ds-breadcrumbs__separator {
+  width: var(--bh-space-3xl-16);
+  height: var(--bh-space-3xl-16);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--breadcrumbs-color);
+  line-height: var(--bh-text-body-2xs-regular-line-height);
+}
+
+.ds-breadcrumbs__separator svg {
+  width: var(--bh-space-3xl-16);
+  height: var(--bh-space-3xl-16);
+  display: block;
+}
+
+.ds-breadcrumbs[dir="rtl"] .ds-breadcrumbs__separator svg {
+  transform: scaleX(-1);
+}
+
+.ds-breadcrumbs--icon-only a,
+.ds-breadcrumbs--icon-only li > span:not(.ds-breadcrumbs__separator) {
+  width: var(--bh-space-6xl-32);
+  height: var(--bh-space-6xl-32);
+  justify-content: center;
+  border-radius: var(--breadcrumbs-radius);
+}
+
+.ds-breadcrumbs--icon-only a:hover {
+  background: var(--bh-interactive-ghost-hover);
+}

package/registry/components/expanded/catalogComponentsShowcase.css

@@ -0,0 +1,87 @@
+.catalog-showcase {
+  min-width: 0;
+  max-width: 100%;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--bh-space-4xl-20);
+}
+
+.catalog-showcase__card {
+  min-width: 0;
+  display: grid;
+  gap: calc(var(--bh-space-xl-12) + var(--bh-space-sm-6));
+  align-content: start;
+  border: var(--bh-space-xxxs-1) solid var(--bh-border-subtle);
+  border-radius: var(--bh-radius-lg-8);
+  background: var(--bh-bg-raised);
+  padding: var(--bh-space-4xl-20);
+  box-shadow: var(--shadow-component-default);
+}
+
+.catalog-showcase__card:nth-child(4),
+.catalog-showcase__card:nth-child(5) {
+  grid-column: 1 / -1;
+}
+
+.catalog-showcase__card-header {
+  min-width: 0;
+  display: grid;
+  gap: var(--bh-space-xs-4);
+}
+
+.catalog-showcase__card h3,
+.catalog-showcase__card p {
+  margin: 0;
+}
+
+.catalog-showcase__card h3 {
+  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);
+  line-height: var(--bh-text-heading-xs-semibold-line-height);
+}
+
+.catalog-showcase__card p {
+  color: var(--bh-content-subtle);
+  font-size: var(--bh-text-body-xs-regular-font-size);
+  line-height: var(--bh-text-body-sm-regular-line-height);
+}
+
+.catalog-showcase__stack {
+  min-width: 0;
+  display: grid;
+  gap: var(--bh-space-2xl-14);
+}
+
+.catalog-showcase__tag-grid {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--bh-space-lg-10);
+}
+
+.catalog-showcase__upload-grid {
+  display: grid;
+  grid-template-columns: minmax(var(--bh-catalog-file-grid-min), var(--bh-catalog-file-grid-max)) minmax(var(--bh-catalog-file-preview-min), var(--bh-catalog-file-preview-max));
+  gap: calc(var(--bh-space-xl-12) + var(--bh-space-sm-6));
+  align-items: start;
+}
+
+/* Approved exception: media query breakpoints stay literal because CSS vars are not reliable in query conditions. */
+@media (max-width: 1100px) {
+  .catalog-showcase,
+  .catalog-showcase__upload-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .catalog-showcase__card:nth-child(4),
+  .catalog-showcase__card:nth-child(5) {
+    grid-column: auto;
+  }
+}
+
+@media (max-width: 640px) {
+  .catalog-showcase__card {
+    padding: var(--bh-space-3xl-16);
+  }
+}

package/registry/components/expanded/commandBar.css

@@ -0,0 +1,473 @@
+.ds-command-bar {
+  --command-bg-raised: var(--bh-bg-raised);
+  --command-bg-neutral-soft: var(--bh-bg-neutral-soft);
+  --command-bg-neutral-subtle: var(--bh-bg-neutral-subtle);
+  --command-border-default: var(--bh-border-default);
+  --command-border-input: var(--bh-border-input);
+  --command-border-subtle: var(--bh-border-subtle);
+  --command-content-default: var(--bh-content-default);
+  --command-content-muted: var(--bh-content-muted);
+  --command-content-subtle: var(--bh-content-subtle);
+  --command-control-default: var(--bh-control-default);
+  --command-input-default: var(--bh-interactive-input-default);
+  --command-interactive-hover: var(--bh-interactive-ghost-hover);
+  --command-interactive-secondary: var(--bh-interactive-secondary-default);
+  --command-interactive-soft: var(--bh-interactive-soft-default);
+  --command-radius-3xl: var(--bh-radius-3xl-16);
+  --command-radius-full: var(--bh-radius-full);
+  --command-radius-lg: var(--bh-radius-lg-8);
+  --command-radius-md: var(--bh-radius-md-6);
+  --command-space-xs: var(--bh-space-xs-4);
+  --command-space-sm: var(--bh-space-sm-6);
+  --command-space-md: var(--bh-space-md-8);
+  --command-space-xl: var(--bh-space-xl-12);
+  --command-space-3xl: var(--bh-space-3xl-16);
+  --command-space-4xl: var(--bh-space-4xl-20);
+  --command-space-5xl: var(--bh-space-5xl-24);
+  --command-space-10xl: var(--bh-space-10xl-80);
+  --command-width-desktop: calc(var(--bh-space-18xl-320) + var(--bh-space-18xl-320));
+  --command-width-mobile: calc(var(--bh-space-19xl-384) - var(--bh-space-md-8) - var(--bh-space-xxxs-1));
+  --command-height-mobile: calc(var(--bh-space-19xl-384) + var(--bh-space-19xl-384) + var(--bh-space-7xl-40) + var(--bh-space-xs-4));
+  --command-height-default: calc(var(--bh-space-8xl-48) + var(--bh-space-xl-12));
+  --command-height-recent: calc(var(--bh-space-19xl-384) + var(--bh-space-18xl-320) + var(--bh-space-xs-4));
+  --command-height-results: calc(var(--bh-space-19xl-384) + var(--bh-space-18xl-320));
+  --command-height-empty: calc(var(--bh-space-18xl-320) - var(--bh-space-xs-4));
+  --command-content-height-recent: calc(var(--bh-space-19xl-384) + var(--bh-space-14xl-192) + var(--bh-space-5xl-24));
+  --command-content-height-results: calc(var(--bh-space-19xl-384) + var(--bh-space-14xl-192) + var(--bh-space-4xl-20));
+  --command-search-mobile-height: var(--bh-space-8xl-48);
+  --command-item-height: calc(var(--bh-space-8xl-48) + var(--bh-space-md-8));
+  --command-icon-size: var(--bh-space-6xl-32);
+  --command-close-size: var(--bh-space-5xl-24);
+  --command-shortcut-min-width: calc(var(--bh-space-5xl-24) + var(--bh-space-xs-4));
+  --command-tag-height: calc(var(--bh-space-6xl-32) + var(--bh-space-xs-4));
+  --command-empty-mobile-padding: calc(var(--bh-space-13xl-160) + var(--bh-space-5xl-24));
+  --command-shadow-surface: var(--shadow-component-default);
+
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: var(--command-width-desktop);
+  max-width: var(--command-width-desktop);
+  overflow: hidden;
+  border: var(--bh-space-xxxs-1) solid var(--command-border-subtle);
+  background: var(--command-bg-raised);
+  color: var(--command-content-default);
+  font-family: var(--bh-font-family);
+  font-size: var(--bh-text-body-md-regular-font-size);
+  font-style: normal;
+  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-command-bar *,
+.ds-command-bar *::before,
+.ds-command-bar *::after {
+  box-sizing: border-box;
+}
+
+.ds-command-bar button {
+  font: inherit;
+}
+
+.ds-command-bar svg {
+  display: block;
+  flex: 0 0 auto;
+}
+
+.ds-command-bar--desktop {
+  border-radius: var(--command-radius-3xl);
+  box-shadow: var(--command-shadow-surface);
+}
+
+.ds-command-bar--mobile {
+  width: var(--command-width-mobile);
+  height: var(--command-height-mobile);
+  max-width: var(--command-width-mobile);
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.ds-command-bar--desktop.ds-command-bar--default {
+  height: var(--command-height-default);
+}
+
+.ds-command-bar--desktop.ds-command-bar--recent {
+  height: var(--command-height-recent);
+}
+
+.ds-command-bar--desktop.ds-command-bar--results {
+  height: var(--command-height-results);
+}
+
+.ds-command-bar--desktop.ds-command-bar--no-result {
+  height: var(--command-height-empty);
+}
+
+.ds-command-bar--rtl {
+  font-family: var(--bh-font-family);
+}
+
+.ds-command-bar__input-wrap {
+  width: 100%;
+  padding: var(--command-space-3xl) var(--command-space-3xl) 0;
+}
+
+.ds-command-bar__search {
+  appearance: none;
+  width: 100%;
+  min-height: var(--command-height-default);
+  border: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--command-space-md);
+  margin: 0;
+  background: var(--command-bg-raised);
+  color: var(--command-content-subtle);
+  padding: var(--command-space-3xl) var(--command-space-4xl) var(--command-space-3xl) var(--command-space-3xl);
+  text-align: start;
+}
+
+.ds-command-bar__search--default {
+  cursor: pointer;
+}
+
+.ds-command-bar__search--divider {
+  border-bottom: var(--bh-space-xxxs-1) solid var(--command-border-input);
+}
+
+.ds-command-bar--mobile .ds-command-bar__search {
+  min-height: var(--command-search-mobile-height);
+  border: var(--bh-space-xxxs-1) solid var(--command-border-input);
+  border-radius: var(--command-radius-lg);
+  background: var(--command-input-default);
+  padding: var(--command-space-xl);
+}
+
+.ds-command-bar--desktop.ds-command-bar--rtl .ds-command-bar__search {
+  padding-right: var(--command-space-3xl);
+  padding-left: var(--command-space-4xl);
+}
+
+.ds-command-bar__search-content {
+  display: flex;
+  flex: 1 0 0;
+  align-items: center;
+  gap: var(--command-space-md);
+  min-width: 0;
+}
+
+.ds-command-bar__placeholder,
+.ds-command-bar__search-text {
+  display: block;
+  flex: 1 0 0;
+  min-width: 0;
+  overflow: hidden;
+  line-height: var(--bh-text-body-md-regular-line-height);
+  text-align: start;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-word;
+}
+
+.ds-command-bar__placeholder {
+  color: var(--command-content-muted);
+}
+
+.ds-command-bar__search-text {
+  color: var(--command-content-default);
+}
+
+.ds-command-bar__shortcut {
+  min-width: var(--command-shortcut-min-width);
+  border: var(--bh-space-xxxs-1) solid var(--command-border-default);
+  border-radius: var(--command-radius-md);
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  background: var(--command-interactive-soft);
+  color: var(--command-content-subtle);
+  font-family: inherit;
+  font-size: var(--bh-text-body-md-regular-font-size);
+  font-style: normal;
+  font-weight: var(--bh-text-body-md-regular-font-weight);
+  line-height: var(--bh-text-body-md-regular-line-height);
+  padding: var(--bh-space-xxs-2) var(--command-space-sm);
+}
+
+.ds-command-bar__close {
+  appearance: none;
+  width: var(--command-close-size);
+  height: var(--command-close-size);
+  border: 0;
+  border-radius: var(--command-radius-full);
+  display: inline-grid;
+  flex: 0 0 auto;
+  place-items: center;
+  background: transparent;
+  color: var(--command-content-subtle);
+  cursor: pointer;
+  padding: 0;
+}
+
+.ds-command-bar__close:focus-visible,
+.ds-command-bar__search:focus-visible,
+.ds-command-bar__item:focus-visible,
+.ds-command-bar__tag:focus-visible {
+  outline: var(--bh-space-xxs-2) solid var(--bh-border-focus);
+  outline-offset: var(--bh-space-xxs-2);
+}
+
+.ds-command-bar__content {
+  width: 100%;
+  overflow: hidden;
+  padding-block: var(--command-space-3xl);
+}
+
+.ds-command-bar--desktop.ds-command-bar--recent .ds-command-bar__content {
+  height: var(--command-content-height-recent);
+}
+
+.ds-command-bar--desktop.ds-command-bar--results .ds-command-bar__content {
+  height: var(--command-content-height-results);
+}
+
+.ds-command-bar--mobile .ds-command-bar__content {
+  flex: 1 1 auto;
+  min-height: 0;
+  padding-block: var(--command-space-3xl);
+}
+
+.ds-command-bar__main {
+  display: flex;
+  flex-direction: column;
+  gap: var(--command-space-5xl);
+  min-width: 0;
+}
+
+.ds-command-bar__section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--command-space-md);
+  width: 100%;
+}
+
+.ds-command-bar__section-heading {
+  display: flex;
+  width: 100%;
+  padding-inline: var(--command-space-4xl);
+}
+
+.ds-command-bar--mobile .ds-command-bar__section-heading {
+  padding-inline: var(--command-space-3xl);
+}
+
+.ds-command-bar__section-heading span {
+  flex: 1 0 0;
+  min-width: 0;
+  color: var(--command-content-subtle);
+  line-height: var(--bh-text-body-md-regular-line-height);
+  text-align: start;
+}
+
+.ds-command-bar__group {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding-inline: var(--command-space-md);
+}
+
+.ds-command-bar--mobile .ds-command-bar__group {
+  padding-inline: var(--command-space-xs);
+}
+
+.ds-command-bar__item {
+  appearance: none;
+  width: 100%;
+  min-height: var(--command-item-height);
+  border: 0;
+  border-radius: var(--command-radius-lg);
+  display: flex;
+  align-items: center;
+  gap: var(--command-space-xl);
+  margin: 0;
+  background: transparent;
+  color: var(--command-content-default);
+  cursor: pointer;
+  padding: var(--command-space-xl);
+  text-align: start;
+}
+
+.ds-command-bar__item.is-highlighted,
+.ds-command-bar__item:hover {
+  background: var(--command-interactive-hover);
+}
+
+.ds-command-bar__icon-wrap,
+.ds-command-bar__avatar {
+  width: var(--command-icon-size);
+  height: var(--command-icon-size);
+  border-radius: var(--command-radius-md);
+  display: inline-grid;
+  flex: 0 0 auto;
+  place-items: center;
+}
+
+.ds-command-bar__icon-wrap {
+  background: var(--command-bg-neutral-soft);
+  color: var(--command-content-subtle);
+}
+
+.ds-command-bar__avatar {
+  overflow: hidden;
+  border: var(--bh-space-xxxs-1) solid var(--command-border-subtle);
+  border-radius: var(--command-radius-full);
+  background:
+    radial-gradient(circle at 42% 34%, var(--bh-bg-accent-amber-soft) 0 10%, transparent 11%),
+    radial-gradient(circle at 52% 42%, var(--bh-bg-accent-amber-default) 0 20%, transparent 21%),
+    linear-gradient(135deg, var(--bh-bg-inverse), var(--bh-bg-brand-strong) 42%, var(--bh-bg-always-dark));
+}
+
+.ds-command-bar__item-copy {
+  display: flex;
+  flex: 1 0 0;
+  flex-direction: column;
+  min-width: 0;
+  text-align: start;
+  word-break: break-word;
+}
+
+.ds-command-bar__item-copy strong {
+  width: 100%;
+  overflow: hidden;
+  color: var(--command-content-default);
+  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);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ds-command-bar__item-copy span {
+  width: 100%;
+  overflow: hidden;
+  color: var(--command-content-subtle);
+  font-size: var(--bh-text-body-2xs-regular-font-size);
+  font-weight: var(--bh-text-body-2xs-regular-font-weight);
+  line-height: var(--bh-text-body-2xs-regular-line-height);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ds-command-bar__filter {
+  display: flex;
+  flex-direction: column;
+  gap: var(--command-space-3xl);
+  width: 100%;
+  padding-inline: var(--command-space-4xl);
+}
+
+.ds-command-bar--mobile .ds-command-bar__filter {
+  padding-inline: var(--command-space-3xl);
+}
+
+.ds-command-bar__filter .ds-command-bar__section-heading {
+  padding-inline: 0;
+}
+
+.ds-command-bar__tags {
+  display: flex;
+  gap: var(--command-space-md);
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.ds-command-bar__tag {
+  appearance: none;
+  height: var(--command-tag-height);
+  border: var(--bh-space-xxxs-1) solid var(--command-border-default);
+  border-radius: var(--command-control-default);
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  background: var(--command-interactive-secondary);
+  color: var(--command-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);
+  padding-inline: var(--command-space-xl);
+  text-align: center;
+  white-space: nowrap;
+}
+
+.ds-command-bar__empty {
+  width: 100%;
+  display: grid;
+  flex: 1 1 auto;
+  place-items: center;
+  padding: var(--command-space-10xl) var(--command-space-4xl);
+}
+
+.ds-command-bar--mobile .ds-command-bar__empty {
+  align-items: start;
+  padding-top: var(--command-empty-mobile-padding);
+}
+
+.ds-command-bar__empty-wrap {
+  display: grid;
+  place-items: center;
+  gap: var(--command-space-xs);
+  text-align: center;
+}
+
+.ds-command-bar__empty-icon {
+  width: var(--bh-space-7xl-40);
+  height: var(--bh-space-7xl-40);
+  border: var(--bh-space-xxxs-1) solid var(--command-border-subtle);
+  border-radius: var(--command-radius-full);
+  display: grid;
+  place-items: center;
+  background: var(--command-bg-neutral-subtle);
+  color: var(--command-content-default);
+}
+
+.ds-command-bar__empty-wrap strong {
+  color: var(--command-content-default);
+  font-size: var(--bh-text-body-lg-medium-font-size);
+  font-weight: var(--bh-text-body-lg-medium-font-weight);
+  line-height: var(--bh-text-body-lg-medium-line-height);
+}
+
+.ds-command-bar__empty-wrap span:last-child {
+  color: var(--command-content-subtle);
+  font-size: var(--bh-text-body-md-regular-font-size);
+  line-height: var(--bh-text-body-md-regular-line-height);
+}
+
+.ds-command-bar__footer {
+  width: 100%;
+  border-top: var(--bh-space-xxxs-1) solid var(--command-border-subtle);
+  display: flex;
+  align-items: center;
+  background: var(--command-bg-raised);
+  color: var(--command-content-subtle);
+  padding: var(--command-space-xl);
+}
+
+.ds-command-bar__footer-content {
+  display: flex;
+  align-items: center;
+  gap: var(--command-space-3xl);
+}
+
+.ds-command-bar__footer-hint {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--command-space-xs);
+  white-space: nowrap;
+}