@salemcobalt/ui 0.2.0-rc.14 → 0.2.0-rc.16

package/dist/styles.css

@@ -1,4 +1,4 @@
-/* @salemcobalt/ui 0.2.0-rc.14 — requires @salemcobalt/tokens/css. */
+/* @salemcobalt/ui 0.2.0-rc.16 — requires @salemcobalt/tokens/css. */
 @layer sc {
   /* ---- base.css ---- */
   /* Shared: focus ring, reduced motion. Component files follow. */
@@ -73,6 +73,16 @@
     line-height: var(--sc-font-line-height-tight);
     letter-spacing: var(--sc-font-tracking-tight);
   }
+  /* Overline: a section label. 12px uppercase mono with wide tracking; muted unless a tone is set. */
+  .sc-heading[data-size='overline'] {
+    font-family: var(--sc-font-family-mono);
+    font-size: var(--sc-font-size-xs);
+    font-weight: var(--sc-font-weight-medium);
+    line-height: var(--sc-font-line-height-snug);
+    letter-spacing: var(--sc-font-tracking-wider);
+    text-transform: uppercase;
+    text-wrap: wrap;
+  }
   .sc-heading[data-truncate] {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -117,6 +127,9 @@
   .sc-text[data-numeric] {
     font-variant-numeric: tabular-nums;
   }
+  .sc-text[data-family='mono'] {
+    font-family: var(--sc-font-family-mono);
+  }
   .sc-text[data-truncate=''] {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -367,6 +380,13 @@
   .sc-button[data-loading] > .sc-button__shortcut {
     opacity: 0;
   }
+  /* No hint where there is no fine pointer (phones, tablets without a trackpad): touch users rarely have the keys,
+     and the hint costs width. A tablet with a trackpad (any-pointer: fine) keeps it. `aria-keyshortcuts` stays. */
+  @media not all and (any-pointer: fine) {
+    .sc-button__shortcut {
+      display: none;
+    }
+  }
   @keyframes sc-spin {
     to {
       rotate: 1turn;
@@ -627,6 +647,26 @@
     border-color: var(--sc-color-accent-default);
     box-shadow: inset 0 0 0 1px var(--sc-color-accent-default);
   }
+  /* Plain: a quiet row. No surface or shadow; interactive hover is a wash (no border or elevation, so a long list
+     does not flicker); selected is the accent wash with a 1px accent border (3:1, the selection cue). */
+  .sc-card[data-variant='plain'] {
+    background: transparent;
+    border-color: transparent;
+  }
+  .sc-card[data-variant='plain'][data-interactive]:hover {
+    background: var(--sc-color-surface-hover);
+    border-color: transparent;
+    box-shadow: none;
+  }
+  .sc-card[data-variant='plain'][data-interactive]:active {
+    background: var(--sc-color-surface-active);
+  }
+  .sc-card[data-variant='plain'][data-selected],
+  .sc-card[data-variant='plain'][data-selected]:hover {
+    background: var(--sc-color-accent-wash);
+    border-color: var(--sc-color-accent-border);
+    box-shadow: none;
+  }
   @media (prefers-reduced-motion: reduce) {
     .sc-card {
       transition: none;
@@ -2032,6 +2072,37 @@
   .sc-priority-nav__ellipsis {
     display: none;
   }
+  /* Item badge (`badge`): a count pill or a dot after the label, in accent. Decorative (aria-hidden); the link's
+     name carries `badgeLabel`. "More" shows the collapsed items' badges summed. No transition or animation. */
+  .sc-priority-nav__badge {
+    display: inline-grid;
+    place-items: center;
+    flex: none;
+    box-sizing: border-box;
+    border-radius: var(--sc-radius-full);
+    background: var(--sc-color-accent-default);
+    color: var(--sc-color-text-on-accent);
+    pointer-events: none;
+  }
+  .sc-priority-nav__badge[data-kind='count'] {
+    min-inline-size: var(--sc-size-icon-md);
+    block-size: var(--sc-size-icon-md);
+    padding-inline: var(--sc-spacing-3xs);
+    font-size: var(--sc-font-size-xs);
+    font-weight: var(--sc-font-weight-semibold);
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+  }
+  .sc-priority-nav__badge[data-kind='dot'] {
+    inline-size: 8px;
+    block-size: 8px;
+  }
+  .sc-priority-nav__panel .sc-priority-nav__badge {
+    margin-inline-start: auto;
+  }
+  .sc-priority-nav__toggle {
+    position: relative;
+  }
   @container sc-priority-nav (inline-size <= 400px) {
     .sc-priority-nav__toggle {
       justify-content: center;
@@ -2044,6 +2115,17 @@
     .sc-priority-nav__chevron {
       display: none;
     }
+    /* Icon-only: the badge sits on the toggle's inline-end corner, ringed like IconButton's dot. */
+    .sc-priority-nav__toggle > .sc-priority-nav__badge {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+      box-shadow: 0 0 0 var(--sc-border-width-focus) var(--sc-color-surface-default);
+    }
+    .sc-priority-nav__toggle > .sc-priority-nav__badge[data-kind='dot'] {
+      inset-block-start: var(--sc-spacing-2xs);
+      inset-inline-end: var(--sc-spacing-2xs);
+    }
     /* Visually hidden, still part of the accessible name ("More, 3 links"). */
     .sc-priority-nav__toggle-label {
       position: absolute;
@@ -5296,4 +5378,283 @@
     }
   }
   
+  /* ---- score.css ---- */
+  /* ---- Score ----------------------------------------------------------------- */
+  /* A number on a tinted tile, or inside a ring. Tone sets the tint (--_bg), the number (--_fg) and the solid used
+     for the ring arc and the selected tile (--_solid, --_on-solid). */
+  .sc-score {
+    --_bg: var(--sc-color-accent-subtle);
+    --_fg: var(--sc-color-accent-text);
+    --_solid: var(--sc-color-accent-default);
+    --_on-solid: var(--sc-color-text-on-accent);
+    --_s: var(--sc-size-score-sm);
+    position: relative;
+    display: inline-grid;
+    place-items: center;
+    flex: none;
+    box-sizing: border-box;
+    inline-size: var(--_s);
+    block-size: var(--_s);
+    border-radius: var(--sc-radius-lg);
+    background: var(--_bg);
+    color: var(--_fg);
+    font-family: var(--sc-font-family-sans);
+    font-size: var(--sc-font-size-sm);
+    font-weight: var(--sc-font-weight-semibold);
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+    vertical-align: middle;
+    transition:
+      background-color var(--sc-duration-fast) var(--sc-ease-standard),
+      color var(--sc-duration-fast) var(--sc-ease-standard);
+  }
+  .sc-score[data-size='md'] {
+    --_s: var(--sc-size-score-md);
+    border-radius: var(--sc-radius-xl);
+    font-size: var(--sc-font-size-lg);
+  }
+  .sc-score[data-tone='neutral'] {
+    /* surface.active, so the tile still shows on a hovered row (surface.hover). Selected turns accent. */
+    --_bg: var(--sc-color-surface-active);
+    --_fg: var(--sc-color-text-muted);
+    --_solid: var(--sc-color-text-muted);
+  }
+  .sc-score[data-tone='success'] {
+    --_bg: var(--sc-color-success-subtle);
+    --_fg: var(--sc-color-success-text);
+    --_solid: var(--sc-color-success-solid);
+    --_on-solid: var(--sc-color-text-on-status);
+  }
+  .sc-score[data-tone='warning'] {
+    --_bg: var(--sc-color-warning-subtle);
+    --_fg: var(--sc-color-warning-text);
+    --_solid: var(--sc-color-warning-solid);
+    --_on-solid: var(--sc-color-text-on-status);
+  }
+  .sc-score[data-tone='danger'] {
+    --_bg: var(--sc-color-danger-subtle);
+    --_fg: var(--sc-color-danger-text);
+    --_solid: var(--sc-color-danger-solid);
+    --_on-solid: var(--sc-color-text-on-status);
+  }
+  /* Not scored (`value={null}`): no tone, a muted dash on the neutral tile or inside an empty ring. --_solid stays
+     accent, so a selected row still turns the tile solid accent, as neutral does. */
+  .sc-score[data-unscored] {
+    --_bg: var(--sc-color-surface-active);
+    --_fg: var(--sc-color-text-muted);
+  }
+  .sc-score__body {
+    display: grid;
+    justify-items: center;
+    gap: var(--sc-spacing-3xs);
+  }
+  .sc-score__caption {
+    font-family: var(--sc-font-family-mono);
+    font-size: var(--sc-font-size-xs);
+    font-weight: var(--sc-font-weight-medium);
+    letter-spacing: var(--sc-font-tracking-wide);
+    text-transform: uppercase;
+    color: var(--sc-color-text-muted);
+  }
+  /* Selected: the tile goes solid in its tone (neutral goes accent), inside a selected row or on `selected`. */
+  .sc-score[data-variant='tile'][data-selected],
+  .sc-card[data-selected] .sc-score[data-variant='tile'],
+  [aria-pressed='true'] .sc-score[data-variant='tile'],
+  [aria-selected='true'] .sc-score[data-variant='tile'] {
+    background: var(--_solid);
+    color: var(--_on-solid);
+  }
+  .sc-score[data-variant='tile'][data-tone='neutral'][data-selected],
+  .sc-card[data-selected] .sc-score[data-variant='tile'][data-tone='neutral'],
+  [aria-pressed='true'] .sc-score[data-variant='tile'][data-tone='neutral'],
+  [aria-selected='true'] .sc-score[data-variant='tile'][data-tone='neutral'] {
+    background: var(--sc-color-accent-default);
+    color: var(--sc-color-text-on-accent);
+  }
+  .sc-score[data-variant='tile'][data-selected] .sc-score__caption,
+  .sc-card[data-selected] .sc-score[data-variant='tile'] .sc-score__caption,
+  [aria-pressed='true'] .sc-score[data-variant='tile'] .sc-score__caption,
+  [aria-selected='true'] .sc-score[data-variant='tile'] .sc-score__caption {
+    color: inherit;
+  }
+  /* Ring: the number in the tone's text colour over a donut. The SVG is drawn for the 64px ring token with a 6px
+     stroke (r = 29 in Score.tsx); the arc length comes from --sc-score-fill (0–100, set inline). */
+  .sc-score[data-variant='ring'] {
+    --_s: var(--sc-size-score-ring);
+    border-radius: var(--sc-radius-full);
+    background: transparent;
+    font-size: var(--sc-font-size-lg);
+  }
+  .sc-score__ring {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    rotate: -90deg;
+    overflow: visible;
+  }
+  .sc-score__track,
+  .sc-score__arc {
+    fill: none;
+    stroke-width: var(--sc-size-score-ring-stroke);
+  }
+  .sc-score__track {
+    stroke: var(--sc-color-surface-active);
+  }
+  .sc-score__arc {
+    stroke: var(--_solid);
+    stroke-linecap: round;
+    stroke-dasharray: 100;
+    stroke-dashoffset: calc(100 - var(--sc-score-fill, 0));
+    /* Moves only when the value changes; the first render draws it in place. */
+    transition: stroke-dashoffset var(--sc-duration-slow) var(--sc-ease-enter);
+  }
+  .sc-score[data-variant='ring'] .sc-score__body {
+    position: relative;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .sc-score,
+    .sc-score__arc {
+      transition: none;
+    }
+  }
+  
+  /* ---- reason-list.css ---- */
+  /* ---- ReasonList ------------------------------------------------------------ */
+  /* Marker shape per tone: for = filled square, against = bar, gap = hollow circle. Markers use the tone's solid,
+     3:1 on every surface; the shape carries the meaning on its own (WCAG 1.4.1). */
+  .sc-reason-list {
+    --_m: 9px;
+    --_marker: var(--sc-color-success-solid);
+    display: grid;
+    gap: var(--sc-spacing-xs);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    font-family: var(--sc-font-family-sans);
+    font-size: var(--sc-font-size-sm);
+    line-height: var(--sc-font-line-height-ui);
+    color: var(--sc-color-text-muted);
+  }
+  .sc-reason-list[data-size='sm'] {
+    --_m: 7px;
+    gap: var(--sc-spacing-2xs);
+    font-size: var(--sc-font-size-xs);
+  }
+  .sc-reason-list[data-divider] {
+    padding-block-start: var(--sc-spacing-xs);
+    border-block-start: var(--sc-border-width-hairline) dashed var(--sc-color-border-default);
+  }
+  .sc-reason-list[data-tone='against'] {
+    --_marker: var(--sc-color-danger-solid);
+  }
+  .sc-reason-list[data-tone='gap'] {
+    --_marker: var(--sc-color-warning-solid);
+  }
+  .sc-reason-list__item {
+    position: relative;
+    padding-inline-start: calc(var(--_m) + var(--sc-spacing-xs));
+  }
+  /* Centred on the first line: half the line box less half the marker. */
+  .sc-reason-list__item::before {
+    content: '';
+    position: absolute;
+    inset-inline-start: 0;
+    inset-block-start: 0.45em;
+    inset-block-start: calc((1lh - var(--_m)) / 2);
+    box-sizing: border-box;
+    inline-size: var(--_m);
+    block-size: var(--_m);
+    border-radius: var(--sc-radius-xs);
+    background: var(--_marker);
+  }
+  .sc-reason-list[data-tone='against'] > .sc-reason-list__item::before {
+    inset-block-start: 0.6em;
+    inset-block-start: calc((1lh - var(--_m) / 3) / 2);
+    block-size: calc(var(--_m) / 3);
+    border-radius: var(--sc-radius-full);
+  }
+  .sc-reason-list[data-tone='gap'] > .sc-reason-list__item::before {
+    background: transparent;
+    border: var(--sc-border-width-focus) solid var(--_marker);
+    border-radius: var(--sc-radius-full);
+  }
+  .sc-reason-list__item :where(strong, b) {
+    font-weight: var(--sc-font-weight-semibold);
+    color: var(--sc-color-text-default);
+  }
+  
+  /* ---- word-diff.css ---- */
+  /* ---- WordDiff -------------------------------------------------------------- */
+  /* Strike-through and underline carry the meaning; the tint only groups the words. Both lines are 3:1 on their tint
+     (diff.*-stroke on diff.*-wash) in light and dark. */
+  .sc-word-diff {
+    margin: 0;
+    font-family: var(--sc-font-family-sans);
+    font-size: var(--sc-font-size-sm);
+    line-height: var(--sc-font-line-height-normal);
+    color: var(--sc-color-text-default);
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+  .sc-word-diff[data-size='md'] {
+    font-size: var(--sc-font-size-md);
+  }
+  p.sc-word-diff,
+  div.sc-word-diff {
+    max-inline-size: var(--sc-font-measure);
+  }
+  .sc-word-diff__added,
+  .sc-word-diff__removed {
+    padding-inline: var(--sc-spacing-3xs);
+    border-radius: var(--sc-radius-xs);
+    text-decoration-thickness: var(--sc-border-width-focus);
+    box-decoration-break: clone;
+    -webkit-box-decoration-break: clone;
+  }
+  .sc-word-diff__added {
+    background: var(--sc-color-diff-added-wash);
+    color: var(--sc-color-text-default);
+    text-decoration-line: underline;
+    text-decoration-color: var(--sc-color-diff-added-stroke);
+    text-underline-offset: 0.2em;
+  }
+  .sc-word-diff__removed {
+    background: var(--sc-color-diff-removed-wash);
+    color: var(--sc-color-text-muted);
+    text-decoration-line: line-through;
+    text-decoration-color: var(--sc-color-diff-removed-stroke);
+  }
+  
+  /* ---- quote.css ---- */
+  /* ---- Quote ----------------------------------------------------------------- */
+  /* Label and words on one line, on the accent wash with the accent border (both from the plain Card selected
+     state), so an echoed instruction reads as "yours" next to what changed. */
+  .sc-quote {
+    box-sizing: border-box;
+    margin: 0;
+    padding: var(--sc-spacing-xs) var(--sc-spacing-sm);
+    border: var(--sc-border-width-hairline) solid var(--sc-color-accent-border);
+    border-radius: var(--sc-radius-lg);
+    background: var(--sc-color-accent-wash);
+    font-family: var(--sc-font-family-sans);
+    font-size: var(--sc-font-size-sm);
+    line-height: var(--sc-font-line-height-ui);
+    color: var(--sc-color-text-muted);
+  }
+  .sc-quote__label {
+    display: inline;
+    margin-inline-end: var(--sc-spacing-xs);
+    font-family: var(--sc-font-family-mono);
+    font-size: var(--sc-font-size-xs);
+    font-weight: var(--sc-font-weight-medium);
+    letter-spacing: var(--sc-font-tracking-wider);
+    text-transform: uppercase;
+    color: var(--sc-color-accent-text);
+  }
+  .sc-quote__text {
+    display: inline;
+    margin: 0;
+  }
+  
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@salemcobalt/ui",
-  "version": "0.2.0-rc.14",
-  "description": "React components for the Salem Cobalt design system: Button, IconButton, Icon set, BroomIcon, Badge, Card, Stack, Inline, Kbd, Dialog, FullScreenFlow, Tooltip, Menu, Popover, PriorityNav, Toolbar, Banner, Spinner, Progress, Tabs, Input, Textarea, Select, FileInput, Checkbox, Switch, Heading, Text, Table, Stat, Chip, Disclosure, EmptyState, Skeleton.",
+  "version": "0.2.0-rc.16",
+  "description": "React components for the Salem Cobalt design system: Button, IconButton, Icon set, BroomIcon, Badge, Card, Stack, Inline, Kbd, Dialog, FullScreenFlow, Tooltip, Menu, Popover, PriorityNav, Toolbar, Banner, Spinner, Progress, Tabs, Input, Textarea, Select, FileInput, Checkbox, Switch, Heading, Text, Table, Stat, Chip, Disclosure, EmptyState, Skeleton, Score, ReasonList, WordDiff, Quote.",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -33,7 +33,7 @@
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@salemcobalt/tokens": "^0.2.0-rc.14"
+    "@salemcobalt/tokens": "^0.2.0-rc.16"
   },
   "dependencies": {
     "@base-ui/react": "^1.9.0",
@@ -57,7 +57,7 @@
     "tsup": "^9.0.0",
     "typescript": "^5.9.3",
     "vitest": "^5.0.5",
-    "@salemcobalt/tokens": "^0.2.0-rc.14"
+    "@salemcobalt/tokens": "^0.2.0-rc.16"
   },
   "publishConfig": {
     "access": "public"