banhaten 0.1.0

package/registry/components/expanded/onboardingStepListItem.css

@@ -0,0 +1,126 @@
+.ds-onboarding-step {
+  --onboarding-step-bg-raised: var(--bh-bg-raised);
+  --onboarding-step-border-brand-strong: var(--bh-border-brand-strong);
+  --onboarding-step-border-default: var(--bh-border-default);
+  --onboarding-step-content-brand: var(--bh-content-brand-default);
+  --onboarding-step-content-default: var(--bh-content-default);
+  --onboarding-step-content-subtle: var(--bh-content-subtle);
+  --onboarding-step-content-success: var(--bh-content-success-default);
+  --onboarding-step-radius: var(--bh-control-default);
+  --onboarding-step-space-md: var(--bh-space-md-8);
+  --onboarding-step-space-lg: var(--bh-space-lg-10);
+  --onboarding-step-space-xl: var(--bh-space-xl-12);
+  --onboarding-step-width: calc(var(--bh-space-17xl-288) - var(--bh-space-md-8));
+  --onboarding-step-height: var(--bh-space-7xl-40);
+  --onboarding-step-line-wrap-size: var(--bh-space-5xl-24);
+  --onboarding-step-check-size: var(--bh-space-4xl-20);
+  --onboarding-step-line-width: var(--bh-space-xxs-2);
+  --onboarding-step-line-offset: calc(-1 * var(--bh-space-md-8));
+  --onboarding-step-line-segment-height: calc(var(--bh-space-2xl-14) - var(--bh-space-xxxs-1));
+  --onboarding-step-shadow: var(--shadow-component-default);
+
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--onboarding-step-space-lg);
+  width: var(--onboarding-step-width);
+  height: var(--onboarding-step-height);
+  padding: var(--onboarding-step-space-md) var(--onboarding-step-space-xl);
+  border: var(--bh-space-xxxs-1) solid transparent;
+  border-radius: var(--onboarding-step-radius);
+  color: var(--onboarding-step-content-default);
+  background: transparent;
+  font-family: var(--bh-font-family);
+  font-size: var(--bh-text-body-md-medium-font-size);
+  font-style: normal;
+  font-weight: var(--bh-text-body-md-medium-font-weight);
+  line-height: var(--bh-text-body-md-medium-line-height);
+  letter-spacing: var(--bh-text-body-md-medium-letter-spacing);
+}
+
+.ds-onboarding-step *,
+.ds-onboarding-step *::before,
+.ds-onboarding-step *::after {
+  box-sizing: border-box;
+}
+
+.ds-onboarding-step--active {
+  border-color: var(--onboarding-step-border-default);
+  color: var(--onboarding-step-content-brand);
+  background: var(--onboarding-step-bg-raised);
+  box-shadow: var(--onboarding-step-shadow);
+}
+
+.ds-onboarding-step--inactive {
+  color: var(--onboarding-step-content-subtle);
+}
+
+.ds-onboarding-step--rtl {
+  font-family: var(--bh-font-family);
+}
+
+.ds-onboarding-step__line-wrap {
+  position: relative;
+  display: flex;
+  flex: 0 0 var(--onboarding-step-line-wrap-size);
+  align-items: center;
+  justify-content: center;
+  width: var(--onboarding-step-line-wrap-size);
+  height: var(--onboarding-step-line-wrap-size);
+  color: var(--onboarding-step-content-success);
+}
+
+.ds-onboarding-step__label {
+  flex: 1 0 0;
+  min-width: 0;
+  color: currentColor;
+  word-break: break-word;
+}
+
+.ds-onboarding-step--rtl .ds-onboarding-step__label {
+  text-align: right;
+}
+
+.ds-onboarding-step__check {
+  position: relative;
+  z-index: 1;
+  display: block;
+  flex: 0 0 auto;
+  width: var(--onboarding-step-check-size);
+  height: var(--onboarding-step-check-size);
+  color: var(--onboarding-step-content-success);
+}
+
+.ds-onboarding-step__line {
+  position: absolute;
+  left: 50%;
+  width: var(--onboarding-step-line-width);
+  transform: translateX(-50%);
+  background: var(--onboarding-step-border-default);
+}
+
+.ds-onboarding-step__line--leading {
+  top: var(--onboarding-step-line-offset);
+  height: var(--onboarding-step-line-segment-height);
+}
+
+.ds-onboarding-step__line--trailing {
+  bottom: var(--onboarding-step-line-offset);
+  height: var(--onboarding-step-line-segment-height);
+}
+
+.ds-onboarding-step__line--active {
+  position: relative;
+  left: auto;
+  height: var(--onboarding-step-check-size);
+  transform: none;
+  background: var(--onboarding-step-border-brand-strong);
+}
+
+.ds-onboarding-step__line--inactive {
+  position: relative;
+  left: auto;
+  height: var(--onboarding-step-height);
+  transform: none;
+}

package/registry/components/expanded/pageHeader.css

@@ -0,0 +1,287 @@
+.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-3xl: var(--bh-space-3xl-16);
+  --page-header-space-4xl: var(--bh-space-4xl-20);
+  --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%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--page-header-space-3xl);
+  padding-block: var(--page-header-space-4xl);
+  color: var(--page-header-content-default);
+  font-family: var(--bh-font-family);
+  letter-spacing: var(--bh-text-body-md-regular-letter-spacing);
+}
+
+.ds-page-header *,
+.ds-page-header *::before,
+.ds-page-header *::after {
+  box-sizing: border-box;
+}
+
+.ds-page-header h1,
+.ds-page-header p,
+.ds-page-header ol {
+  margin: 0;
+}
+
+.ds-page-header button,
+.ds-page-header a {
+  font: inherit;
+}
+
+.ds-page-header a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.ds-page-header__breadcrumbs {
+  color: var(--page-header-content-subtle);
+  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);
+}
+
+.ds-page-header__breadcrumbs ol {
+  display: flex;
+  align-items: center;
+  gap: var(--page-header-space-xs);
+  padding: 0;
+  list-style: none;
+}
+
+.ds-page-header__breadcrumbs li,
+.ds-page-header__breadcrumbs a,
+.ds-page-header__breadcrumbs span:not(.ds-page-header__breadcrumb-separator) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--page-header-space-xs);
+  min-width: 0;
+}
+
+.ds-page-header__breadcrumbs a:hover {
+  color: var(--page-header-content-default);
+}
+
+.ds-page-header__breadcrumbs .is-current {
+  color: var(--page-header-content-default);
+}
+
+.ds-page-header__breadcrumb-label {
+  max-width: 20ch;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ds-page-header__breadcrumb-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 {
+  width: var(--page-header-space-3xl);
+  height: var(--page-header-space-3xl);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--page-header-content-subtle);
+  line-height: var(--bh-text-body-2xs-regular-line-height);
+}
+
+.ds-page-header__section {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--page-header-space-xs);
+}
+
+.ds-page-header__topline {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--page-header-space-7xl);
+}
+
+.ds-page-header__copy {
+  min-width: 0;
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--page-header-space-xs);
+}
+
+.ds-page-header__heading-row {
+  width: 100%;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--page-header-space-lg);
+}
+
+.ds-page-header__heading-main {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--page-header-space-md);
+}
+
+.ds-page-header__icon {
+  width: var(--bh-space-5xl-24);
+  height: var(--bh-space-5xl-24);
+  flex: 0 0 auto;
+  display: inline-grid;
+  place-items: center;
+  color: var(--page-header-content-subtle);
+}
+
+.ds-page-header__home-icon {
+  width: var(--bh-space-5xl-24);
+  height: var(--bh-space-5xl-24);
+  display: block;
+}
+
+.ds-page-header h1 {
+  min-width: 0;
+  color: var(--page-header-content-heading);
+  font-size: var(--bh-text-heading-md-semibold-font-size);
+  font-weight: var(--bh-text-heading-md-semibold-font-weight);
+  line-height: var(--bh-text-heading-md-semibold-line-height);
+  overflow-wrap: anywhere;
+}
+
+.ds-page-header__meta {
+  flex: 0 0 auto;
+  padding-top: var(--bh-space-xxs-2);
+  color: var(--page-header-content-muted);
+  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);
+  white-space: nowrap;
+}
+
+.ds-page-header__description {
+  width: 100%;
+  color: var(--page-header-content-subtle);
+  font-size: var(--bh-text-body-md-regular-font-size);
+  font-weight: var(--bh-text-body-md-regular-font-weight);
+  line-height: var(--bh-text-body-md-regular-line-height);
+}
+
+.ds-page-header__actions {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  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;
+  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;
+}
+
+.ds-page-header__action:hover {
+  background: var(--page-header-interactive-secondary-hover);
+}
+
+.ds-page-header__action:disabled {
+  cursor: not-allowed;
+  opacity: var(--bh-opacity-muted);
+}
+
+.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-offset: var(--bh-space-xxs-2);
+}
+
+.ds-page-header__tabs {
+  width: 100%;
+}
+
+.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 {
+  direction: rtl;
+}
+
+/* Approved exception: media query breakpoints stay literal because CSS vars are not reliable in query conditions. */
+@media (max-width: 820px) {
+  .ds-page-header__topline {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: var(--page-header-space-2xl);
+  }
+
+  .ds-page-header__actions {
+    width: 100%;
+    flex-wrap: wrap;
+  }
+}
+
+@media (max-width: 560px) {
+  .ds-page-header {
+    gap: var(--page-header-space-2xl);
+    padding-block: var(--page-header-space-3xl);
+  }
+
+  .ds-page-header__breadcrumbs ol {
+    flex-wrap: wrap;
+  }
+
+  .ds-page-header__heading-row {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: var(--page-header-space-xs);
+  }
+
+  .ds-page-header__heading-main {
+    align-items: flex-start;
+  }
+
+  .ds-page-header__actions {
+    gap: var(--page-header-space-xs);
+  }
+}