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

package/dist/styles.css

@@ -1,4 +1,4 @@
-/* @salemcobalt/ui 0.2.0-rc.15 — requires @salemcobalt/tokens/css. */
+/* @salemcobalt/ui 0.2.0-rc.17 — requires @salemcobalt/tokens/css. */
 @layer sc {
   /* ---- base.css ---- */
   /* Shared: focus ring, reduced motion. Component files follow. */
@@ -2072,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;
@@ -2084,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;
@@ -5395,6 +5437,12 @@
     --_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;
@@ -5458,8 +5506,9 @@
     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);
+    /* Moves only when the value changes; the first render draws it in place. The data motion (600ms, a long soft
+       landing) is what makes a change from one score to the next read; the 300ms panel timing was over too soon. */
+    transition: stroke-dashoffset var(--sc-duration-data) var(--sc-ease-data);
   }
   .sc-score[data-variant='ring'] .sc-score__body {
     position: relative;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salemcobalt/ui",
-  "version": "0.2.0-rc.15",
+  "version": "0.2.0-rc.17",
   "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": {
@@ -33,7 +33,7 @@
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@salemcobalt/tokens": "^0.2.0-rc.15"
+    "@salemcobalt/tokens": "^0.2.0-rc.17"
   },
   "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.15"
+    "@salemcobalt/tokens": "^0.2.0-rc.17"
   },
   "publishConfig": {
     "access": "public"