@hearthsound/design 0.2.9 → 0.2.11

package/README.md

@@ -52,6 +52,9 @@ Components use BEM-like `hs-` classes:
 - utilities: the type scale (`hs-display`, `hs-title-1` to `hs-title-4`, `hs-heading`,
   `hs-body`, `hs-caption`), `hs-link`, `hs-visually-hidden` and `hs-icon`.
 
+Card modifiers `hs-card--album` and `hs-card--playlist` mark the kind of card and carry no
+rules of their own; `hs-card--artist` is the only card that changes layout.
+
 State is expressed with real pseudo-classes and ARIA attributes, never helper classes:
 `:hover`, `:focus-visible`, `:disabled`, `[aria-disabled="true"]`, `[aria-pressed="true"]`,
 `[aria-selected="true"]`, `[aria-current]`, `[aria-busy="true"]`, `[aria-invalid="true"]`

package/css/components/admin.css

@@ -5,10 +5,9 @@
  * import-root rows, the plugin permission list, the storage bar with its legend, and
  * the acquisition row spacing.
  *
- * plugin-approval-interim: the Install confirmation (340 px dialog with the permission
- * list, Cancel and a suggested Install) and the File-tab permission list are built but
- * stay switched off until the core reports permissions for uninstalled plugins. Until
- * then no permission list shows before install. No CSS state is added for the switch.
+ * p24-r3: the permission list is shown in the 340 px Install confirmation before an
+ * install from an index, and in the review of an upgrade that asks for new permissions.
+ * `plugins.confirm_install` (Don't ask again) skips the confirmation.
  */
 
 /* ------------------------------------------------------------------ */
@@ -111,39 +110,42 @@
 }
 
 .hs-permission-row {
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(64px, max-content) minmax(0, 1fr) max-content;
   align-items: center;
   gap: 10px;
   font-size: 13px;
 }
 
 .hs-permission-row__scope {
-  flex: none;
-  min-width: 64px;
   font: 12px var(--hs-font-mono);
   color: var(--hs-fg);
 }
 
 .hs-permission-row__detail {
-  flex: 1;
   min-width: 0;
   color: var(--hs-fg-muted);
+  overflow-wrap: anywhere;
 }
 
 .hs-permission-row .hs-pill {
-  flex: none;
-  margin-left: auto;
+  justify-self: end;
 }
 
 @media (max-width: 720px) {
   .hs-permission-row {
-    flex-wrap: wrap;
+    grid-template-columns: minmax(64px, max-content) minmax(0, 1fr);
     row-gap: 2px;
   }
 
   .hs-permission-row__detail {
-    flex-basis: 100%;
-    order: 3;
+    grid-column: 1 / -1;
+    grid-row: 2;
+  }
+
+  .hs-permission-row .hs-pill {
+    grid-column: 2;
+    grid-row: 1;
   }
 }
 

package/css/components/library-mark.css

@@ -6,16 +6,22 @@
  * name and the glyph says what it is. Items that are not in the library carry
  * no mark at all.
  *
- * Two placements: inline in a track row's status cell, and as a badge on the
- * bottom-left of an album card's cover.
+ * Two placements: beside a track row's title, where it is small and muted so it
+ * reads as a detail of the title rather than as a column of its own, and as a
+ * badge on the bottom-left of an album card's cover.
  */
 
 .hs-library-mark {
-  --hs-icon-size: 16px;
   display: inline-flex;
+  flex: none;
   align-items: center;
-  justify-content: center;
-  color: var(--hs-accent-text);
+  color: var(--hs-fg-muted);
+}
+
+/* `.hs-icon` declares its own size on the element, so the mark's size is set
+ * there too rather than inherited from the wrapper. */
+.hs-library-mark .hs-icon {
+  --hs-icon-size: 11px;
 }
 
 /* Sits above the cover art and its play disc, and takes no pointer events: the

package/css/components/page-header.css

@@ -123,6 +123,19 @@
   font-weight: 600;
 }
 
+/* E-E-2: the album hero's artist is a link inside the by-line, in the line's own
+ * weight and tone; the underline appears on hover and keyboard focus only. */
+.hs-hero__by-link {
+  color: inherit;
+  text-decoration: none;
+}
+
+.hs-hero__by-link:hover,
+.hs-hero__by-link:focus-visible {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
 .hs-hero__meta {
   margin: 0;
   color: var(--hs-fg-muted);

package/css/components/track.css

@@ -144,6 +144,19 @@
   min-width: 0;
 }
 
+/* The title and the library mark share one line: the title keeps the ellipsis
+ * and the mark stays visible beside it at every width. */
+.hs-track-row__title-line {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+}
+
+.hs-track-row__title-line .hs-track-row__title {
+  min-width: 0;
+}
+
 .hs-track-row__title,
 .hs-track-row__artist,
 .hs-track-row__album {
@@ -158,6 +171,23 @@
   color: var(--hs-fg-muted);
 }
 
+/* E-E-2: an artist name inside a row is a link. The row's text is pointer-events:
+ * none so presses reach the covering play button, so the link takes presses back and
+ * lifts above that button; the underline appears on hover and keyboard focus only. */
+.hs-track-row__link {
+  pointer-events: auto;
+  position: relative;
+  z-index: 1;
+  color: inherit;
+  text-decoration: none;
+}
+
+.hs-track-row__link:hover,
+.hs-track-row__link:focus-visible {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
 .hs-track-row__duration {
   font-size: 13px;
   font-variant-numeric: tabular-nums;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hearthsound/design",
-  "version": "0.2.9",
+  "version": "0.2.11",
   "license": "MIT",
   "description": "Design language of Hearthsound: tokens, fonts, icons and component styles",
   "repository": {