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

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.16 — 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;

package/package.json

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