@hearthsound/design 0.0.0-stage → 0.1.0

package/css/components/status-page.css

@@ -0,0 +1,48 @@
+/*
+ * k22 A - status page: centred in the content area, biased slightly upward by the
+ * 90 px bottom padding. Used by the o03 load failure, the p27 system states and the
+ * p08e empty library views. The playlist empty state uses the inline variant (p17).
+ * The title is a heading, the icon is aria-hidden, and a failure sets role="alert".
+ */
+
+.hs-status-page {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 10px;
+  padding: 24px 24px 90px;
+  box-sizing: border-box;
+  color: var(--hs-fg);
+}
+
+.hs-status-page__icon {
+  width: 64px;
+  height: 64px;
+  color: var(--hs-fg-muted);
+  opacity: 0.8;
+}
+
+.hs-status-page__title {
+  margin: 6px 0 0;
+  font: 750 23px/1.2 var(--hs-font-display);
+  letter-spacing: -0.02em;
+}
+
+.hs-status-page__text {
+  margin: 0;
+  max-width: 46ch;
+  color: var(--hs-fg-muted);
+}
+
+.hs-status-page__action {
+  margin-top: 8px;
+}
+
+/* p17: the inline empty state under a playlist hero keeps the page compact. */
+.hs-status-page--inline {
+  padding-top: 32px;
+  padding-bottom: 48px;
+}

package/css/components/stepper.css

@@ -0,0 +1,130 @@
+/*
+ * @hearthsound/design - stepper
+ *
+ * k29 B: six 28 px markers across the top on desktop, the compact step line on
+ * phones. p06 renamed step 6 to Summary. Values from shared/approved/
+ * components.css (.stepper, .stepdot, .stepline) and spec/components.md.
+ */
+
+.hs-stepper {
+  display: flex;
+  align-items: flex-start;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.hs-step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  width: 84px;
+  font: 400 12px var(--hs-font-body);
+  text-align: center;
+  color: var(--hs-fg-muted);
+}
+
+.hs-step__marker {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  font: 650 13px var(--hs-font-body);
+  background: var(--hs-control-tone);
+  color: var(--hs-fg-muted);
+}
+
+.hs-step__marker .hs-icon {
+  width: 14px;
+  height: 14px;
+}
+
+/* Done: acid disc with the 14 px check. */
+.hs-step--done {
+  color: var(--hs-fg);
+}
+
+.hs-step--done .hs-step__marker {
+  background: var(--hs-accent-bg);
+  color: var(--hs-accent-fg);
+}
+
+/* Current: the text-colour disc, label at weight 600. */
+.hs-step[aria-current='step'] {
+  color: var(--hs-fg);
+  font-weight: 600;
+}
+
+.hs-step[aria-current='step'] .hs-step__marker {
+  background: var(--hs-fg);
+  color: var(--hs-view-bg);
+}
+
+.hs-step__connector {
+  flex: 1;
+  height: 2px;
+  margin-top: 13px;
+  background: color-mix(in srgb, var(--hs-fg) 16%, transparent);
+}
+
+/* The connector after a done step is accent. */
+.hs-step--done + .hs-step__connector {
+  background: var(--hs-accent-bg);
+}
+
+/* ------------------------------------------------------------------ */
+/* Phone step line (k29)                                              */
+/* ------------------------------------------------------------------ */
+
+.hs-step-line {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 8px 4px;
+}
+
+.hs-step-line__row {
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font: 600 13px var(--hs-font-body);
+}
+
+.hs-step-line__row .hs-step__marker {
+  font-weight: 650;
+}
+
+.hs-step-line__count {
+  color: var(--hs-fg-muted);
+  font-weight: 500;
+}
+
+.hs-step-line__segment {
+  height: 6px;
+  border-radius: 3px;
+  background: color-mix(in srgb, var(--hs-fg) 16%, transparent);
+}
+
+.hs-step-line__segment--done {
+  background: var(--hs-accent-bg);
+}
+
+.hs-step-line__segment--current {
+  background: var(--hs-fg);
+}
+
+@media (max-width: 720px) {
+  .hs-stepper {
+    display: none;
+  }
+}
+
+@media (min-width: 721px) {
+  .hs-step-line {
+    display: none;
+  }
+}

package/css/components/toast.css

@@ -0,0 +1,88 @@
+/*
+ * k20-r3 D - toast: a pill, ink in light and popover in dark, placed per l11 and l11d.
+ *
+ * Markup, in the l11d dock (banner.css owns .hs-overlay-dock):
+ *   <div class="hs-overlay-dock">
+ *     <div class="hs-banner hs-banner--warning hs-banner--floating">...</div>
+ *     <div class="hs-toast-region" role="status" aria-label="Messages">
+ *       <div class="hs-toast" role="status">
+ *         <svg class="hs-icon hs-toast__glyph">...</svg>
+ *         <span class="hs-toast__message">Added to Road Trip.</span>
+ *         <button class="hs-toast__action" type="button">Dismiss</button>
+ *       </div>
+ *     </div>
+ *   </div>
+ * The dock is in column-reverse order: the banner sits on the player edge and the toast
+ * stacks 12 px above it. The region never takes focus; the action is reachable through
+ * the region. Errors use role="alert" on the toast. 5 s, paused on hover and focus.
+ */
+
+.hs-toast-region {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  pointer-events: none;
+}
+
+.hs-toast {
+  pointer-events: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  height: 48px;
+  padding: 0 6px 0 16px;
+  box-sizing: border-box;
+  border-radius: var(--hs-radius-full);
+  font: 400 14px var(--hs-font-body);
+  color: var(--hs-toast-fg);
+  background: var(--hs-toast-bg);
+  box-shadow: var(--hs-toast-shadow);
+  max-width: calc(100vw - 24px);
+}
+
+.hs-toast__glyph {
+  --hs-icon-size: 16px;
+  color: var(--hs-toast-glyph);
+}
+
+.hs-toast__message {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Flat text button: 32 px, weight 600, inherits the toast's ink. */
+.hs-toast__action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  height: 32px;
+  padding: 0 12px;
+  margin: 0;
+  border: 0;
+  border-radius: var(--hs-radius-control);
+  background: transparent;
+  color: inherit;
+  font: 600 14px var(--hs-font-body);
+  cursor: default;
+  appearance: none;
+}
+
+.hs-toast__action:focus-visible {
+  outline: none;
+  background: var(--hs-accent-tint);
+  color: var(--hs-accent-text);
+  box-shadow: var(--hs-focus-shadow);
+}
+
+/* l11 A: phones cap the width at 100vw - 24 px and the toast fills it. */
+@media (max-width: 720px) {
+  .hs-toast {
+    width: 100%;
+  }
+}

package/css/components/tooltip.css

@@ -0,0 +1,29 @@
+/*
+ * k27 C - tooltip: ink in light, popover in dark, matching the toast (k20-r3 D).
+ *
+ * Markup: <span class="hs-tooltip" role="tooltip" id="...">Text</span> placed below its
+ * control, with the control carrying aria-describedby and the same text as its name.
+ * The tooltip is never focusable and ignores pointer events.
+ *
+ * Behaviour is the client's (b04):
+ *   - hover: shown after an 800 ms pause;
+ *   - keyboard focus: shown at once (and hidden on blur);
+ *   - touch: shown after a 500 ms long-press, hidden 1.5 s after the finger lifts;
+ *   - Escape hides it;
+ *   - the placement is below the control.
+ * Uses: the "Failed" pill in the player, mini player, now playing and queue rows carries
+ * the failure reason as its tooltip (o07).
+ */
+
+.hs-tooltip {
+  position: absolute;
+  z-index: 20;
+  padding: 6px 10px;
+  border-radius: var(--hs-radius-control);
+  font: 500 13px var(--hs-font-body);
+  white-space: nowrap;
+  pointer-events: none;
+  background: var(--hs-tooltip-bg);
+  color: var(--hs-tooltip-fg);
+  box-shadow: var(--hs-tooltip-shadow);
+}

package/css/components/track.css

@@ -0,0 +1,336 @@
+/*
+ * @hearthsound/design - track rows
+ *
+ * k12-r1 A, k12-ctx, p08 column subgrid, p21-r2 actions area, k17-r3 feedback
+ * glyph, k12-rm equaliser. Values from shared/approved/components.css
+ * (.tr2, .eq, .tlist, p21-r2) and spec/components.md.
+ */
+
+/* ------------------------------------------------------------------ */
+/* List grid - rows share columns through subgrid (p08)               */
+/* ------------------------------------------------------------------ */
+
+.hs-track-list {
+  display: grid;
+  grid-template-columns: 40px minmax(0, 1.5fr) minmax(0, 1fr) auto auto 44px;
+  column-gap: 12px;
+  align-content: start;
+}
+
+.hs-track-list--album {
+  grid-template-columns: 40px minmax(0, 1fr) auto auto 44px;
+}
+
+/* List columns minus the album column (artist Top Songs, Uploads on desktop). */
+.hs-track-list--no-album {
+  grid-template-columns: 40px minmax(0, 1fr) auto auto 44px;
+}
+
+.hs-track-list > .hs-track-row {
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+}
+
+/* ------------------------------------------------------------------ */
+/* Row                                                                */
+/* ------------------------------------------------------------------ */
+
+.hs-track-row {
+  display: grid;
+  grid-template-columns: 40px minmax(0, 1.5fr) minmax(0, 1fr) auto auto 44px;
+  column-gap: 12px;
+  align-items: center;
+  min-height: 52px;
+  padding: 0 8px 0 6px;
+  border-radius: var(--hs-radius-row);
+  position: relative;
+  font: 400 14px/1.35 var(--hs-font-body);
+  color: var(--hs-fg);
+  transition: background var(--hs-duration-hover) var(--hs-ease);
+}
+
+/* Album context (k12-ctx): numbered lead, no album column. */
+.hs-track-row--album {
+  grid-template-columns: 40px minmax(0, 1fr) auto auto 44px;
+}
+
+.hs-track-row--album .hs-track-row__album {
+  display: none;
+}
+
+/* No-album list context: cover lead, album name as the second line (p16-r1). */
+.hs-track-row--no-album,
+.hs-track-row--queue {
+  grid-template-columns: 40px minmax(0, 1fr) auto auto 44px;
+}
+
+.hs-track-row--no-album .hs-track-row__album,
+.hs-track-row--queue .hs-track-row__album {
+  display: none;
+}
+
+/* Lead: cover in list context, track number in album context. */
+.hs-track-row__lead {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  position: relative;
+  color: var(--hs-fg-muted);
+  font-variant-numeric: tabular-nums;
+  font-size: 13px;
+}
+
+.hs-track-row__art {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--hs-radius-art-small);
+  display: block;
+  object-fit: cover;
+}
+
+.hs-track-row__lead .hs-art-placeholder {
+  border-radius: var(--hs-radius-art-small);
+}
+
+.hs-track-row__number {
+  transition: opacity var(--hs-duration-hover) var(--hs-ease);
+}
+
+/* Hover: play icon over the cover darkened 50% (list) or in place of the
+ * number (album context, k12-r1 board). */
+.hs-track-row__overlay {
+  position: absolute;
+  inset: 0;
+  border-radius: var(--hs-radius-art-small);
+  background: rgb(0 0 0 / 50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity var(--hs-duration-hover) var(--hs-ease);
+}
+
+.hs-track-row__overlay .hs-icon {
+  color: #fff;
+  width: 16px;
+  height: 16px;
+}
+
+.hs-track-row--album .hs-track-row__overlay {
+  background: transparent;
+}
+
+.hs-track-row--album .hs-track-row__overlay .hs-icon {
+  color: inherit;
+}
+
+.hs-track-row:hover .hs-track-row__overlay,
+.hs-track-row:focus-within .hs-track-row__overlay,
+.hs-track-row--current .hs-track-row__overlay {
+  opacity: 1;
+}
+
+.hs-track-row--album:hover .hs-track-row__number,
+.hs-track-row--album:focus-within .hs-track-row__number {
+  opacity: 0;
+}
+
+.hs-track-row__text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.hs-track-row__title,
+.hs-track-row__artist,
+.hs-track-row__album {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.hs-track-row__artist,
+.hs-track-row__album,
+.hs-track-row__duration {
+  color: var(--hs-fg-muted);
+}
+
+.hs-track-row__duration {
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
+.hs-track-row--current .hs-track-row__title {
+  font-weight: 650;
+}
+
+/* Queue only (l06): played rows dim their content. */
+.hs-track-row--played .hs-track-row__text,
+.hs-track-row--played .hs-track-row__album {
+  opacity: 0.55;
+}
+
+/* ------------------------------------------------------------------ */
+/* Equaliser (k12-r1)                                                 */
+/* ------------------------------------------------------------------ */
+
+.hs-eq {
+  display: inline-flex;
+  align-items: flex-end;
+  gap: 2px;
+  height: 14px;
+}
+
+.hs-eq i {
+  width: 3px;
+  border-radius: 1px;
+  background: var(--hs-accent-bg);
+  animation: hs-eq 1s ease-in-out infinite;
+}
+
+.hs-eq i:nth-child(1) {
+  height: 60%;
+  animation-delay: -0.3s;
+}
+
+.hs-eq i:nth-child(2) {
+  height: 100%;
+  animation-delay: -0.6s;
+}
+
+.hs-eq i:nth-child(3) {
+  height: 40%;
+}
+
+.hs-eq--paused i {
+  animation: none;
+}
+
+@keyframes hs-eq {
+  50% {
+    height: 25%;
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/* Feedback glyph (k17-r3, p21-r2)                                    */
+/* ------------------------------------------------------------------ */
+
+.hs-feedback-glyph {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--hs-accent-text);
+}
+
+.hs-feedback-glyph .hs-icon {
+  width: 16px;
+  height: 16px;
+}
+
+/* ------------------------------------------------------------------ */
+/* Actions area (p21-r2): fixed width, like / dislike / menu           */
+/* ------------------------------------------------------------------ */
+
+.hs-track-row__actions {
+  display: flex;
+  align-items: center;
+}
+
+.hs-track-row__actions .hs-button {
+  width: 32px;
+  height: 32px;
+  color: var(--hs-fg-muted);
+}
+
+.hs-track-row__actions .hs-button--on {
+  background: transparent;
+  color: var(--hs-accent-text);
+}
+
+@media (min-width: 721px) {
+  .hs-track-row__actions {
+    position: relative;
+    width: 96px;
+    justify-content: flex-end;
+  }
+
+  /* At rest only the state glyph shows, in the rightmost (menu) spot. */
+  .hs-track-row__actions .hs-feedback-glyph {
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 32px;
+    height: 32px;
+  }
+
+  .hs-track-row:hover .hs-track-row__actions .hs-feedback-glyph,
+  .hs-track-row:focus-within .hs-track-row__actions .hs-feedback-glyph {
+    display: none;
+  }
+
+  .hs-track-row:not(:hover):not(:focus-within) .hs-track-row__actions .hs-button {
+    visibility: hidden;
+  }
+}
+
+.hs-track-row:hover {
+  background: var(--hs-control-tone);
+}
+
+.hs-track-row:focus-visible {
+  outline: none;
+  background: var(--hs-accent-tint);
+  box-shadow: var(--hs-focus-shadow);
+}
+
+/* ------------------------------------------------------------------ */
+/* Phones (l07, p21-r2): menu always visible, glyph beside it          */
+/* ------------------------------------------------------------------ */
+
+@media (max-width: 720px) {
+  .hs-track-list,
+  .hs-track-list--album,
+  .hs-track-list--no-album {
+    grid-template-columns: 40px minmax(0, 1fr) auto auto;
+  }
+
+  .hs-track-row,
+  .hs-track-row--album,
+  .hs-track-row--no-album,
+  .hs-track-row--queue {
+    grid-template-columns: 40px minmax(0, 1fr) auto;
+  }
+
+  .hs-track-row__album,
+  .hs-track-row__status,
+  .hs-track-row__duration {
+    display: none;
+  }
+
+  .hs-track-row__actions .hs-button:not([aria-haspopup]) {
+    display: none;
+  }
+
+  .hs-track-row__actions {
+    width: auto;
+    gap: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hs-eq i {
+    animation: none;
+  }
+
+  .hs-track-row,
+  .hs-track-row__number,
+  .hs-track-row__overlay {
+    transition: none;
+  }
+}

package/css/components/upload.css

@@ -0,0 +1,70 @@
+/*
+ * @hearthsound/design - uploads
+ *
+ * k31-r1 A drop zone (neutral grey, acid tint with a dashed outline while
+ * dragging) and the p21-r1 upload items: k11-r1 two-line rows with a k10 pill,
+ * no progress bar. Values from shared/approved/components.css (.dz) and
+ * spec/components.md.
+ */
+
+.hs-drop-zone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  text-align: center;
+  padding: 34px 20px;
+  border-radius: var(--hs-radius-card);
+  background: var(--hs-group-bg);
+  border: 2px dashed transparent;
+  transition: background var(--hs-duration-hover) var(--hs-ease),
+    border-color var(--hs-duration-hover) var(--hs-ease);
+}
+
+.hs-drop-zone > .hs-icon {
+  width: 40px;
+  height: 40px;
+  color: var(--hs-fg-muted);
+}
+
+.hs-drop-zone__hint {
+  color: var(--hs-fg-muted);
+}
+
+.hs-drop-zone--over {
+  background: var(--hs-accent-tint);
+  border-color: var(--hs-accent-bg);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hs-drop-zone {
+    transition: none;
+  }
+}
+
+/* Upload items: no duration-style bar; the pill carries the state. */
+.hs-upload-row .hs-setting-row__text {
+  gap: 4px;
+}
+
+.hs-upload-row > .hs-pill {
+  max-width: 45%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@media (max-width: 720px) {
+  .hs-drop-zone {
+    padding: 24px 16px;
+  }
+
+  .hs-upload-row {
+    flex-wrap: wrap;
+  }
+
+  .hs-upload-row > .hs-pill {
+    max-width: 100%;
+    margin-left: 28px;
+  }
+}