@hearthsound/design 0.1.0 → 0.1.2

package/css/components/card.css

@@ -182,6 +182,8 @@
 }
 
 .hs-mosaic img {
+  /* The tiles are spliced edge to edge; only the whole mosaic is rounded. */
+  border-radius: 0;
   width: 100%;
   height: 100%;
   min-height: 0;

package/css/components/field.css

@@ -49,6 +49,12 @@
   caret-color: var(--hs-accent-text);
 }
 
+/* Masked passwords: larger bullets; the placeholder keeps the body size. */
+.hs-field__input[type='password']:not(:placeholder-shown) {
+  font-size: 20px;
+  letter-spacing: 0.08em;
+}
+
 .hs-field__input::placeholder {
   color: var(--hs-fg-muted);
 }
@@ -128,7 +134,9 @@
 /* Declared after focus: the invalid tint is not a focus treatment and stays while the
  * field is focused or hovered. The doubled class matches the focus rule's specificity. */
 .hs-field.hs-field--invalid,
-.hs-field[aria-invalid='true'] {
+.hs-field[aria-invalid='true'],
+.hs-select.hs-field--invalid,
+.hs-select[aria-invalid='true'] {
   background: color-mix(in srgb, var(--hs-error) 12%, transparent);
 }
 

package/css/components/list.css

@@ -12,6 +12,10 @@
 /* ------------------------------------------------------------------ */
 
 .hs-settings-group {
+  /* Also used on <ul>/<ol> (reorder lists): no list indent or markers. */
+  margin: 0;
+  padding: 0;
+  list-style: none;
   background: var(--hs-group-bg);
   box-shadow: var(--hs-group-shadow);
   border-radius: var(--hs-radius-card);
@@ -124,10 +128,14 @@
 }
 
 .hs-setting-row[aria-disabled='true'] {
-  opacity: 0.4;
   pointer-events: none;
 }
 
+/* The contents dim, not the row, so its hairline keeps the separator colour. */
+.hs-setting-row[aria-disabled='true'] > * {
+  opacity: 0.4;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .hs-setting-row,
   .hs-setting-row--expander > .hs-setting-row__icon:last-child {

package/css/components/menu.css

@@ -126,6 +126,59 @@
   box-shadow: var(--hs-focus-shadow);
 }
 
+/* ------------------------------------------------------------------ */
+/* k05 A - drop-down list: the menu surface and items, check at the end */
+/* ------------------------------------------------------------------ */
+
+.hs-listbox {
+  background: var(--hs-popover-bg);
+  border-radius: var(--hs-radius-popover);
+  box-shadow: var(--hs-elevation-2);
+  padding: 6px;
+  box-sizing: border-box;
+  min-width: 200px;
+  margin: 0;
+  list-style: none;
+}
+
+.hs-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 36px;
+  padding: 0 10px;
+  border-radius: var(--hs-radius-row);
+  font: 400 14px var(--hs-font-body);
+  color: var(--hs-fg);
+  box-sizing: border-box;
+  cursor: default;
+}
+
+.hs-option > .hs-icon {
+  width: 16px;
+  height: 16px;
+  margin-left: auto;
+  color: var(--hs-accent-text);
+  visibility: hidden;
+  flex: none;
+}
+
+.hs-option--selected > .hs-icon,
+.hs-option[aria-selected='true'] > .hs-icon {
+  visibility: visible;
+}
+
+.hs-option:hover {
+  background: var(--hs-control-tone);
+}
+
+.hs-option--active {
+  background: var(--hs-accent-tint);
+  color: var(--hs-accent-text);
+  font-weight: 600;
+  box-shadow: var(--hs-focus-shadow);
+}
+
 /* ------------------------------------------------------------------ */
 /* k18 A - add-to-playlist submenu                                    */
 /* ------------------------------------------------------------------ */

package/css/components/segmented.css

@@ -10,6 +10,7 @@
  */
 
 .hs-segmented {
+  position: relative;
   display: flex;
   gap: 0;
   margin: 0 14px 12px;
@@ -62,3 +63,35 @@
   font-weight: 600;
   box-shadow: var(--hs-focus-shadow);
 }
+
+/*
+ * Sliding selection: with a thumb element the selected look moves between tabs.
+ * The thumb sits under the tabs; the selected tab drops its own background.
+ * Markup: <span class="hs-segmented__thumb" style="--hs-segment-x: <px>; --hs-segment-w: <px>">
+ * as the first child of the control; the client sets both from the selected tab.
+ */
+.hs-segmented__thumb {
+  position: absolute;
+  top: 3px;
+  bottom: 3px;
+  left: 0;
+  width: var(--hs-segment-w, 0);
+  transform: translateX(var(--hs-segment-x, 0));
+  border-radius: var(--hs-radius-full);
+  background: var(--hs-segment-selected-bg);
+  box-shadow: var(--hs-elevation-1);
+  transition: transform var(--hs-duration-popover) var(--hs-ease),
+    width var(--hs-duration-popover) var(--hs-ease);
+  pointer-events: none;
+}
+
+.hs-segmented:has(.hs-segmented__thumb) .hs-segmented__tab {
+  position: relative;
+  transition: background var(--hs-duration-hover) var(--hs-ease);
+}
+
+.hs-segmented:has(.hs-segmented__thumb) .hs-segmented__tab--selected,
+.hs-segmented:has(.hs-segmented__thumb) .hs-segmented__tab[aria-selected='true'] {
+  background: transparent;
+  box-shadow: none;
+}

package/package.json

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