@hearthsound/design 0.2.10 → 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/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

@@ -171,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.10",
+  "version": "0.2.11",
   "license": "MIT",
   "description": "Design language of Hearthsound: tokens, fonts, icons and component styles",
   "repository": {