banhaten 0.4.0 → 0.5.0

package/registry/components/approval-card.css

@@ -0,0 +1,409 @@
+[data-slot="approval-card"] {
+  --approval-card-icon-size: var(--bh-space-2xl-14);
+  --approval-card-tile-size: var(--bh-space-5xl-24);
+
+  animation: bh-approval-card-in var(--bh-duration-slow)
+    var(--bh-easing-emphasized) both;
+  background-color: var(--bh-bg-raised);
+  border-radius: var(--bh-radius-2xl-12);
+  box-shadow: var(--elevation-02);
+  color: var(--bh-content-default);
+  font-family: var(--bh-font-family);
+  font-size: var(--bh-text-body-xs-regular-font-size);
+  font-weight: var(--bh-text-body-xs-regular-font-weight);
+  gap: var(--bh-space-xl-12);
+  letter-spacing: var(--bh-text-body-xs-regular-letter-spacing);
+  line-height: var(--bh-text-body-xs-regular-line-height);
+  padding: var(--bh-space-xl-12);
+}
+
+[data-slot="approval-card-header"] {
+  align-items: center;
+  display: flex;
+  gap: var(--bh-space-md-8);
+  min-block-size: var(--approval-card-tile-size);
+}
+
+/* Tone-tinted icon tile. Any icon placed in it gets the system size and stroke. */
+[data-slot="approval-card-icon"] {
+  align-items: center;
+  background-color: var(--bh-bg-subtle);
+  block-size: var(--approval-card-tile-size);
+  border-radius: var(--bh-radius-md-6);
+  color: var(--bh-content-default);
+  display: inline-flex;
+  flex: none;
+  inline-size: var(--approval-card-tile-size);
+  justify-content: center;
+}
+
+[data-slot="approval-card-icon"] > svg {
+  block-size: var(--approval-card-icon-size);
+  inline-size: var(--approval-card-icon-size);
+  stroke-width: var(--bh-icon-stroke-200);
+}
+
+[data-slot="approval-card-icon"][data-tone="info"] {
+  background-color: var(--bh-bg-info-subtle);
+  color: var(--bh-content-information-default);
+}
+
+[data-slot="approval-card-icon"][data-tone="warning"] {
+  background-color: var(--bh-bg-warning-subtle);
+  color: var(--bh-content-warning-default);
+}
+
+[data-slot="approval-card-icon"][data-tone="success"] {
+  background-color: var(--bh-bg-success-subtle);
+  color: var(--bh-content-success-default);
+}
+
+[data-slot="approval-card-title"] {
+  flex: 1;
+  font-weight: var(--bh-text-body-xs-medium-font-weight);
+  min-inline-size: 0;
+}
+
+[data-slot="approval-card-header-actions"] {
+  align-items: center;
+  display: inline-flex;
+  flex: none;
+  gap: var(--bh-space-xxs-2);
+  margin-inline-start: auto;
+}
+
+/* Questions slide vertically inside a viewport sized to the active one. */
+[data-slot="approval-card-questions"] {
+  inline-size: 100%;
+  margin: calc(-1 * var(--bh-space-xxxs-1));
+  overflow: hidden;
+  padding: var(--bh-space-xxxs-1);
+}
+
+[data-slot="approval-card-questions"][data-animate="true"] {
+  transition: height var(--bh-duration-slow) var(--bh-easing-emphasized);
+}
+
+[data-slot="approval-card-questions-track"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bh-space-6xl-32);
+  position: relative;
+  will-change: transform;
+}
+
+[data-slot="approval-card-questions-track"][data-animate="true"] {
+  transition: transform var(--bh-duration-slow) var(--bh-easing-emphasized);
+}
+
+[data-slot="approval-card-question"] {
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  gap: var(--bh-space-md-8);
+  opacity: var(--bh-opacity-0);
+}
+
+[data-slot="approval-card-question"][data-active="true"] {
+  opacity: var(--bh-opacity-100);
+}
+
+[data-slot="approval-card-question"][data-active="false"] {
+  pointer-events: none;
+}
+
+[data-slot="approval-card-questions-track"][data-animate="true"]
+  [data-slot="approval-card-question"] {
+  transition: opacity var(--bh-duration-slow) var(--bh-easing-emphasized);
+}
+
+[data-slot="approval-card-prompt"] {
+  font-weight: var(--bh-text-body-xs-medium-font-weight);
+  padding-inline-start: var(--bh-space-xxs-2);
+}
+
+[data-slot="approval-card-options"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bh-space-sm-6);
+}
+
+[data-slot="approval-card-option"] {
+  align-items: center;
+  background-color: transparent;
+  border: var(--bh-border-width-default) solid var(--bh-border-subtle);
+  border-radius: var(--bh-radius-lg-8);
+  color: var(--bh-content-default);
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  gap: var(--bh-space-md-8);
+  letter-spacing: inherit;
+  margin: 0;
+  outline: none;
+  padding: var(--bh-space-xs-4) var(--bh-space-sm-6);
+  /* Anchors the visually hidden radio inside its own row. */
+  position: relative;
+  text-align: start;
+  transition: background-color var(--bh-duration-fast) var(--bh-easing-standard),
+    border-color var(--bh-duration-fast) var(--bh-easing-standard),
+    box-shadow var(--bh-duration-fast) var(--bh-easing-standard);
+}
+
+[data-slot="approval-card-option"]:hover {
+  background-color: var(--bh-bg-subtle);
+}
+
+/* The radio itself is visually hidden, so its row carries the focus ring. */
+[data-slot="approval-card-option"]:has([data-slot="approval-card-option-radio"]:focus-visible) {
+  box-shadow: var(--elevation-component-focus-ring);
+}
+
+[data-slot="approval-card-option"][data-selected="true"] {
+  background-color: var(--bh-bg-raised);
+  border-color: transparent;
+  box-shadow: var(--elevation-02);
+}
+
+[data-slot="approval-card-option"][data-other="true"] {
+  cursor: text;
+}
+
+[data-slot="approval-card-other-choice"] {
+  cursor: pointer;
+  display: inline-flex;
+  flex: none;
+}
+
+/* The key cap fills with the inverse surface once its option is selected. */
+[data-slot="approval-card-option"] [data-slot="kbd"] {
+  transition: background-color var(--bh-duration-default) var(--bh-easing-standard),
+    border-color var(--bh-duration-default) var(--bh-easing-standard),
+    color var(--bh-duration-default) var(--bh-easing-standard);
+}
+
+[data-slot="approval-card-option"][data-selected="true"] [data-slot="kbd"] {
+  background-color: var(--bh-bg-inverse);
+  border-color: transparent;
+  box-shadow: none;
+  color: var(--bh-content-inverse);
+}
+
+[data-slot="approval-card-option-input"] {
+  background: transparent;
+  border: 0;
+  color: var(--bh-content-default);
+  flex: 1;
+  font: inherit;
+  letter-spacing: inherit;
+  margin: 0;
+  min-inline-size: 0;
+  outline: none;
+  padding: 0;
+}
+
+[data-slot="approval-card-option-input"]::placeholder {
+  color: var(--bh-content-muted);
+}
+
+[data-slot="approval-card-command"] {
+  background-color: var(--bh-bg-subtle);
+  border-radius: var(--bh-radius-lg-8);
+  display: flex;
+  flex-direction: column;
+  gap: var(--bh-space-xxs-2);
+  padding: var(--bh-space-md-8) var(--bh-space-xl-12) var(--bh-space-lg-10);
+}
+
+[data-slot="approval-card-cwd"] {
+  color: var(--bh-content-subtle);
+  font-family: var(--bh-font-family-mono);
+  font-size: var(--bh-text-body-3xs-regular-font-size);
+  line-height: var(--bh-text-body-3xs-regular-line-height);
+  text-align: start;
+}
+
+[data-slot="approval-card-code"] {
+  color: var(--bh-content-default);
+  font-family: var(--bh-font-family-mono);
+  font-size: var(--bh-text-body-2xs-regular-font-size);
+  line-height: var(--bh-text-body-2xs-regular-line-height);
+  margin: 0;
+  overflow-wrap: anywhere;
+  text-align: start;
+  white-space: pre-wrap;
+}
+
+[data-slot="approval-card-plan"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bh-space-xxs-2);
+  min-inline-size: 0;
+  padding-inline-start: var(--bh-space-xxs-2);
+}
+
+[data-slot="approval-card-plan-title"] {
+  font-size: var(--bh-text-body-md-medium-font-size);
+  font-weight: var(--bh-text-body-md-medium-font-weight);
+  letter-spacing: var(--bh-text-body-md-medium-letter-spacing);
+  line-height: var(--bh-text-body-md-medium-line-height);
+}
+
+[data-slot="approval-card-plan-summary"] {
+  color: var(--bh-content-subtle);
+  font-size: var(--bh-text-body-2xs-regular-font-size);
+  line-height: var(--bh-text-body-2xs-regular-line-height);
+  white-space: pre-line;
+}
+
+[data-slot="approval-card-actions"] {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--bh-space-md-8);
+  justify-content: space-between;
+  padding-inline-start: var(--bh-space-xxs-2);
+}
+
+[data-slot="approval-card-spacer"] {
+  flex: none;
+  inline-size: 0;
+}
+
+[data-slot="approval-card-buttons"] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--bh-space-sm-6);
+  justify-content: flex-end;
+  margin-inline-start: auto;
+}
+
+[data-slot="approval-card-step-nav"] {
+  align-items: center;
+  color: var(--bh-content-subtle);
+  display: inline-flex;
+  flex: none;
+  gap: var(--bh-space-xs-4);
+}
+
+[data-slot="approval-card-step"] {
+  color: var(--bh-content-subtle);
+  flex: none;
+  font-size: var(--bh-text-body-2xs-medium-font-size);
+  font-variant-numeric: tabular-nums;
+  font-weight: var(--bh-text-body-2xs-medium-font-weight);
+  line-height: 1;
+  white-space: nowrap;
+}
+
+/* Auto-approve countdown: a draining ring that becomes a cancel glyph on hover. */
+[data-slot="approval-card-auto-approve"] {
+  align-items: center;
+  color: var(--bh-content-subtle);
+  display: inline-flex;
+  flex: none;
+  gap: var(--bh-space-sm-6);
+  min-inline-size: 0;
+  transition: opacity var(--bh-duration-moderate) var(--bh-easing-emphasized);
+}
+
+[data-slot="approval-card-auto-approve"][data-state="leaving"] {
+  opacity: var(--bh-opacity-0);
+  pointer-events: none;
+}
+
+[data-slot="approval-card-countdown"] {
+  align-items: center;
+  background: transparent;
+  block-size: var(--bh-space-3xl-16);
+  border: 0;
+  border-radius: var(--bh-radius-full);
+  color: var(--bh-content-success-default);
+  cursor: pointer;
+  display: inline-flex;
+  flex: none;
+  inline-size: var(--bh-space-3xl-16);
+  justify-content: center;
+  outline: none;
+  padding: 0;
+  position: relative;
+}
+
+[data-slot="approval-card-countdown"]:disabled {
+  cursor: default;
+}
+
+[data-slot="approval-card-countdown"]:focus-visible {
+  box-shadow: var(--elevation-component-focus-ring);
+}
+
+[data-slot="approval-card-countdown-pie"] {
+  block-size: 100%;
+  display: block;
+  inline-size: 100%;
+  transition: opacity var(--bh-duration-fast) var(--bh-easing-standard);
+}
+
+[data-slot="approval-card-countdown-track"] {
+  stroke: var(--bh-border-success-subtle);
+}
+
+[data-slot="approval-card-countdown-fill"] {
+  stroke: currentColor;
+  /* The duration is one countdown tick, set inline by the component. */
+  transition-property: stroke-dashoffset;
+  transition-timing-function: linear;
+}
+
+[data-slot="approval-card-countdown-cancel"] {
+  align-items: center;
+  background-color: var(--bh-bg-success-subtle);
+  border-radius: var(--bh-radius-full);
+  display: inline-flex;
+  inset: var(--bh-space-xxxs-1);
+  justify-content: center;
+  opacity: var(--bh-opacity-0);
+  pointer-events: none;
+  position: absolute;
+  transition: opacity var(--bh-duration-fast) var(--bh-easing-standard);
+}
+
+[data-slot="approval-card-countdown-cancel"] > svg {
+  block-size: var(--bh-space-md-8);
+  inline-size: var(--bh-space-md-8);
+}
+
+[data-slot="approval-card-countdown"]:hover [data-slot="approval-card-countdown-pie"],
+[data-slot="approval-card-countdown"]:focus-visible
+  [data-slot="approval-card-countdown-pie"] {
+  opacity: var(--bh-opacity-0);
+}
+
+[data-slot="approval-card-countdown"]:hover [data-slot="approval-card-countdown-cancel"],
+[data-slot="approval-card-countdown"]:focus-visible
+  [data-slot="approval-card-countdown-cancel"] {
+  opacity: var(--bh-opacity-100);
+}
+
+[data-slot="approval-card-auto-approve-label"] {
+  font-size: var(--bh-text-body-2xs-regular-font-size);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+[data-slot="approval-card-seconds"] {
+  font-weight: var(--bh-text-body-2xs-medium-font-weight);
+}
+
+@keyframes bh-approval-card-in {
+  from {
+    opacity: var(--bh-opacity-0);
+    transform: translateY(var(--bh-space-md-8));
+  }
+
+  to {
+    opacity: var(--bh-opacity-100);
+    transform: none;
+  }
+}