banhaten 0.4.0 → 0.5.0

package/registry/components/task-list.css

@@ -0,0 +1,328 @@
+[data-slot="task-list"] {
+  --task-list-check: var(--bh-content-success-default);
+  --task-list-icon-size: var(--bh-task-list-icon-size);
+  --task-list-muted: var(--bh-content-subtle);
+  --task-list-row-gap: calc(var(--bh-space-md-8) + var(--bh-space-xxxs-1));
+  --task-list-small-icon-size: calc(
+    var(--task-list-icon-size) - 3 * var(--bh-space-xxxs-1)
+  );
+  --task-list-strong: var(--bh-content-default);
+
+  color: var(--task-list-strong);
+  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);
+  letter-spacing: var(--bh-text-body-xs-regular-letter-spacing);
+  line-height: var(--bh-text-body-xs-regular-line-height);
+}
+
+[data-slot="task-list"][data-surface="card"] {
+  background-color: var(--bh-bg-raised);
+  border-radius: var(--bh-radius-2xl-12);
+  box-shadow: var(--elevation-02);
+  padding: var(--bh-space-sm-6) var(--bh-space-xl-12) var(--bh-space-xl-12);
+}
+
+[data-slot="task-list"][data-surface="well"] {
+  background-color: var(--bh-bg-subtle);
+  border-radius: var(--bh-radius-lg-8);
+  padding: var(--bh-space-md-8) var(--bh-space-xl-12) var(--bh-space-lg-10);
+}
+
+[data-slot="task-list-header"] {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--bh-radius-sm-4);
+  color: inherit;
+  display: flex;
+  font: inherit;
+  gap: var(--bh-space-md-8);
+  inline-size: 100%;
+  letter-spacing: inherit;
+  margin: 0;
+  min-block-size: calc(var(--bh-space-4xl-20) + var(--bh-space-xxs-2));
+  outline: none;
+  padding: 0;
+  text-align: start;
+}
+
+button[data-slot="task-list-header"] {
+  cursor: pointer;
+}
+
+button[data-slot="task-list-header"]:focus-visible {
+  box-shadow: var(--elevation-component-focus-ring);
+}
+
+/* Header glyphs stack in one slot and crossfade between list, pie, and check. */
+[data-slot="task-list-header-icon"] {
+  block-size: var(--task-list-icon-size);
+  color: var(--task-list-muted);
+  flex: none;
+  inline-size: var(--task-list-icon-size);
+  position: relative;
+}
+
+[data-slot="task-list-header-icon"] > * {
+  block-size: var(--task-list-small-icon-size);
+  inline-size: var(--task-list-small-icon-size);
+  inset: 0;
+  margin: auto;
+  opacity: var(--bh-opacity-0);
+  position: absolute;
+  transition: opacity var(--bh-duration-fast) var(--bh-easing-standard);
+}
+
+/* The ring and the check match the row icons below; only the list glyph and
+   the chevron sit smaller. */
+[data-slot="task-list-header-icon"] > [data-icon="progress"],
+[data-slot="task-list-header-icon"] > [data-icon="done"] {
+  block-size: var(--task-list-icon-size);
+  inline-size: var(--task-list-icon-size);
+}
+
+[data-slot="task-list-header-icon"] > [data-icon="done"] {
+  color: var(--task-list-check);
+}
+
+[data-slot="task-list-header-icon"][data-state="idle"] > [data-icon="list"],
+[data-slot="task-list-header-icon"][data-state="running"]
+  > [data-icon="progress"],
+[data-slot="task-list-header-icon"][data-state="done"] > [data-icon="done"] {
+  opacity: var(--bh-opacity-100);
+}
+
+[data-slot="task-list-header-icon"] > [data-icon="chevron"] {
+  transition: opacity var(--bh-duration-fast) var(--bh-easing-standard),
+    transform var(--bh-duration-default) var(--bh-easing-standard);
+}
+
+button[data-slot="task-list-header"]:hover
+  [data-slot="task-list-header-icon"]
+  > :not([data-icon="chevron"]) {
+  opacity: var(--bh-opacity-0);
+}
+
+button[data-slot="task-list-header"]:hover
+  [data-slot="task-list-header-icon"]
+  > [data-icon="chevron"] {
+  opacity: var(--bh-opacity-100);
+}
+
+[data-slot="task-list-header"][aria-expanded="false"] [data-icon="chevron"] {
+  transform: rotate(-90deg);
+}
+
+[dir="rtl"] [data-slot="task-list-header"][aria-expanded="false"] [data-icon="chevron"] {
+  transform: rotate(90deg);
+}
+
+/* Determinate pie: done / total, animated through a registered property. */
+@property --task-list-progress {
+  syntax: "<percentage>";
+  inherits: true;
+  initial-value: 0%;
+}
+
+[data-slot="task-list-progress"] {
+  --task-list-progress: 0%;
+
+  border-radius: var(--bh-radius-full);
+  color: var(--task-list-strong);
+  transition: opacity var(--bh-duration-fast) var(--bh-easing-standard),
+    --task-list-progress var(--bh-duration-slow) var(--bh-easing-standard);
+}
+
+[data-slot="task-list-progress"]::after {
+  background: conic-gradient(currentColor var(--task-list-progress), transparent 0);
+  border-radius: var(--bh-radius-full);
+  content: "";
+  /* Leaves a clear gap inside the dashed ring. */
+  inset: var(--bh-space-xs-4);
+  position: absolute;
+}
+
+[data-slot="task-list-progress-ring"] {
+  block-size: 100%;
+  color: var(--task-list-muted);
+  inline-size: 100%;
+  inset: 0;
+  overflow: visible;
+  position: absolute;
+}
+
+[data-slot="task-list-title"] {
+  font-weight: var(--bh-text-body-xs-medium-font-weight);
+  min-inline-size: 0;
+}
+
+[data-slot="task-list-count"] {
+  color: var(--task-list-muted);
+  font-variant-numeric: tabular-nums;
+  margin-inline-start: auto;
+}
+
+/* The toggle's fold and the preview's fold are both Collapsible panels; this
+   tunes their shared motion. */
+[data-slot="task-list-collapsible"] {
+  --collapsible-panel-duration: var(--bh-duration-moderate);
+  --collapsible-panel-easing: var(--bh-easing-standard);
+}
+
+[data-slot="task-list-items"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bh-space-md-8);
+  list-style: none;
+  margin: 0;
+  padding: var(--bh-space-lg-10) 0 0;
+}
+
+[data-slot="task-list-items"][data-rest="true"] {
+  padding-block-start: var(--bh-space-md-8);
+}
+
+/* Rows that open a composed list, with no header above them, start flush. */
+[data-slot="task-list"] > [data-slot="task-list-items"]:first-child,
+[data-slot="task-list"]
+  > [data-slot="task-list-preview"]:first-child
+  > [data-slot="task-list-items"]:first-child {
+  padding-block-start: 0;
+}
+
+[data-slot="task-list-item"] {
+  align-items: flex-start;
+  animation: bh-task-list-item-in var(--bh-duration-slow)
+    var(--bh-easing-standard) backwards;
+  animation-delay: calc(var(--task-list-index, 0) * var(--bh-task-list-stagger));
+  color: var(--task-list-muted);
+  display: flex;
+  gap: var(--task-list-row-gap);
+}
+
+[data-slot="task-list-item-icon"] {
+  block-size: var(--task-list-icon-size);
+  flex: none;
+  inline-size: var(--task-list-icon-size);
+  margin-block-start: var(--bh-space-xxxs-1);
+  position: relative;
+}
+
+[data-slot="task-list-item-icon"] > svg {
+  block-size: 100%;
+  color: var(--task-list-muted);
+  inline-size: 100%;
+  inset: 0;
+  opacity: var(--bh-opacity-0);
+  position: absolute;
+  transition: opacity var(--bh-duration-slow) var(--bh-easing-standard);
+}
+
+[data-slot="task-list-item"][data-status="pending"] [data-icon="pending"],
+[data-slot="task-list-item"][data-status="active"] [data-icon="active"],
+[data-slot="task-list-item"][data-status="done"] [data-icon="done"] {
+  opacity: var(--bh-opacity-100);
+}
+
+[data-slot="task-list-item"] [data-icon="active"] {
+  color: var(--task-list-strong);
+}
+
+[dir="rtl"] [data-slot="task-list-item"] [data-icon="active"] {
+  transform: scaleX(-1);
+}
+
+[data-slot="task-list-label"] {
+  min-inline-size: 0;
+  position: relative;
+}
+
+[data-slot="task-list-label-text"] {
+  color: var(--task-list-muted);
+  transition: color var(--bh-duration-slow) var(--bh-easing-standard);
+}
+
+/* The active row crossfades its muted label into a shimmering strong one.
+   The base label stays opaque underneath so its contrast remains measurable;
+   the shine paints the same glyphs on top. */
+[data-slot="task-list-label-shine"] {
+  inset: 0;
+  opacity: var(--bh-opacity-0);
+  pointer-events: none;
+  position: absolute;
+  transition: opacity var(--bh-duration-slow) var(--bh-easing-standard);
+}
+
+[data-slot="task-list-item"][data-status="active"] [data-slot="task-list-label-text"] {
+  color: var(--task-list-strong);
+}
+
+[data-slot="task-list-item"][data-status="active"] [data-slot="task-list-label-shine"] {
+  opacity: var(--bh-opacity-100);
+}
+
+[data-slot="task-list-item"][data-status="done"] [data-slot="task-list-label-text"] {
+  text-decoration: line-through;
+}
+
+[data-slot="task-list-more"] {
+  align-items: flex-start;
+  background: transparent;
+  border: 0;
+  border-radius: var(--bh-radius-sm-4);
+  color: var(--task-list-muted);
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  gap: var(--task-list-row-gap);
+  letter-spacing: inherit;
+  margin: var(--bh-space-md-8) 0 0;
+  outline: none;
+  padding: 0;
+  text-align: start;
+  transition: color var(--bh-duration-fast) var(--bh-easing-standard);
+}
+
+[data-slot="task-list-more"]:hover {
+  color: var(--task-list-strong);
+}
+
+[data-slot="task-list-more"]:focus-visible {
+  box-shadow: var(--elevation-component-focus-ring);
+}
+
+[data-slot="task-list-more-icon"] {
+  align-items: center;
+  block-size: var(--task-list-icon-size);
+  display: inline-flex;
+  flex: none;
+  inline-size: var(--task-list-icon-size);
+  justify-content: center;
+  margin-block-start: var(--bh-space-xxxs-1);
+}
+
+[data-slot="task-list-more-icon"] > svg {
+  block-size: 100%;
+  inline-size: 100%;
+}
+
+/* The stagger uses animation-delay, which the global reduced-motion rule does
+   not shorten, so rows must skip the entrance entirely. */
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="task-list-item"] {
+    animation: none;
+  }
+}
+
+/* Rows settle into place with a slide only. A fade would leave their text
+   partially transparent during the stagger, which reads as low contrast. */
+@keyframes bh-task-list-item-in {
+  from {
+    transform: translateY(calc(-1 * var(--bh-space-sm-6)));
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}