@salemcobalt/ui 0.2.0-rc.13 → 0.2.0-rc.15

package/dist/styles.css

@@ -1,4 +1,4 @@
-/* @salemcobalt/ui 0.2.0-rc.13 — requires @salemcobalt/tokens/css. */
+/* @salemcobalt/ui 0.2.0-rc.15 — 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;
@@ -5296,4 +5336,277 @@
     }
   }
   
+  /* ---- 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);
+  }
+  .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.13",
-  "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.15",
+  "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.13"
+    "@salemcobalt/tokens": "^0.2.0-rc.15"
   },
   "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.13"
+    "@salemcobalt/tokens": "^0.2.0-rc.15"
   },
   "publishConfig": {
     "access": "public"