@salemcobalt/ui 0.2.0-rc.8 → 0.2.0-rc.9

package/dist/styles.css

@@ -1,4 +1,4 @@
-/* @salemcobalt/ui 0.2.0-rc.8 — requires @salemcobalt/tokens/css. */
+/* @salemcobalt/ui 0.2.0-rc.9 — requires @salemcobalt/tokens/css. */
 @layer sc {
   /* ---- base.css ---- */
   /* Shared: focus ring, reduced motion. Component files follow. */
@@ -306,6 +306,10 @@
   .sc-button[data-loading] > .sc-button__label {
     opacity: 0;
   }
+  /* Its own line box, so descenders sit inside the label (the button sets line-height: 1 for centring). */
+  .sc-button__label {
+    line-height: var(--sc-font-line-height-ui);
+  }
   .sc-button__icon {
     display: inline-flex;
     inline-size: 1.125em;
@@ -325,6 +329,44 @@
     border-inline-end-color: transparent;
     animation: sc-spin 0.8s linear infinite;
   }
+  /* Icon-only: square, the label kept for assistive tech only, no shortcut hint. Same element, so focus and
+     any open tooltip survive the switch. */
+  .sc-button[data-icon-only] {
+    inline-size: var(--_h);
+    padding-inline: 0;
+  }
+  .sc-button[data-icon-only] > .sc-button__label {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  .sc-button[data-icon-only] > .sc-button__shortcut {
+    display: none;
+  }
+  /* A shortcut hint after the label: a Kbd tinted to the button's own colour, so it reads on every variant. */
+  .sc-button__shortcut {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--sc-spacing-3xs);
+    flex: none;
+    margin-inline-start: var(--sc-spacing-3xs);
+  }
+  .sc-button__shortcut .sc-kbd {
+    background: transparent;
+    color: inherit;
+    border-color: currentColor;
+    box-shadow: none;
+    opacity: 0.72;
+  }
+  .sc-button__shortcut .sc-kbd-group {
+    color: inherit;
+  }
+  .sc-button[data-loading] > .sc-button__shortcut {
+    opacity: 0;
+  }
   @keyframes sc-spin {
     to {
       rotate: 1turn;
@@ -361,6 +403,40 @@
   .sc-icon-button[data-loading] > .sc-button__icon {
     opacity: 0;
   }
+  /* Status dot, top-left: icons such as the broom own the top-right and fill the bottom. Physical corner on
+     purpose, because the glyph does not mirror in RTL either. */
+  .sc-icon-button__dot {
+    --_dot: var(--sc-color-accent-default);
+    position: absolute;
+    inset: var(--sc-spacing-2xs) auto auto var(--sc-spacing-2xs);
+    inline-size: 8px;
+    block-size: 8px;
+    border-radius: var(--sc-radius-full);
+    background: var(--_dot);
+    box-shadow: 0 0 0 var(--sc-border-width-focus)
+      var(--sc-icon-button-dot-ring, var(--sc-color-surface-default));
+    pointer-events: none;
+  }
+  .sc-icon-button[data-size='sm'] > .sc-icon-button__dot {
+    inset: var(--sc-spacing-3xs) auto auto var(--sc-spacing-3xs);
+    inline-size: 6px;
+    block-size: 6px;
+  }
+  .sc-icon-button__dot[data-tone='neutral'] {
+    --_dot: var(--sc-color-text-subtle);
+  }
+  .sc-icon-button__dot[data-tone='success'] {
+    --_dot: var(--sc-color-success-solid);
+  }
+  .sc-icon-button__dot[data-tone='warning'] {
+    --_dot: var(--sc-color-warning-solid);
+  }
+  .sc-icon-button__dot[data-tone='danger'] {
+    --_dot: var(--sc-color-danger-solid);
+  }
+  .sc-icon-button__dot[data-tone='info'] {
+    --_dot: var(--sc-color-info-solid);
+  }
   .sc-button[data-popup-open] {
     background: var(--sc-color-surface-active);
   }
@@ -1703,6 +1779,50 @@
   .sc-tabs__panel[data-hidden] {
     display: none;
   }
+  /* Segmented: a quiet control. Sunken track, the active tab raised on `surface-default` by the sliding
+     indicator, no accent colour; counts are plain muted numbers
+     (`text-muted`, not `text-subtle`, which fails AA on the sunken track). */
+  .sc-tabs__list[data-variant='segmented'] {
+    display: inline-flex;
+    align-self: flex-start;
+    max-inline-size: 100%;
+    gap: var(--sc-spacing-3xs);
+    padding: var(--sc-spacing-3xs);
+    border-block-end: 0;
+    border-radius: var(--sc-radius-md);
+    background: var(--sc-color-surface-sunken);
+    isolation: isolate;
+  }
+  .sc-tabs__list[data-variant='segmented'][data-fill] {
+    display: flex;
+    align-self: stretch;
+  }
+  .sc-tabs__list[data-variant='segmented'] > .sc-tabs__tab {
+    position: relative;
+    z-index: 1;
+    block-size: var(--sc-size-control-sm);
+    padding-inline: var(--sc-spacing-sm);
+    border-radius: var(--sc-radius-sm);
+  }
+  .sc-tabs__list[data-variant='segmented'] > .sc-tabs__tab:hover:not([data-disabled]) {
+    background: transparent;
+  }
+  .sc-tabs__list[data-variant='segmented'] .sc-tabs__count,
+  .sc-tabs__list[data-variant='segmented'] > .sc-tabs__tab[data-active] > .sc-tabs__count {
+    padding-inline: 0;
+    background: transparent;
+    color: var(--sc-color-text-muted);
+    font-weight: var(--sc-font-weight-regular);
+  }
+  .sc-tabs__list[data-variant='segmented'] > .sc-tabs__indicator {
+    inset-block: 0 auto;
+    z-index: 0;
+    block-size: var(--active-tab-height);
+    translate: var(--active-tab-left) var(--active-tab-top);
+    background: var(--sc-color-surface-default);
+    border-radius: var(--sc-radius-sm);
+    box-shadow: var(--sc-elevation-1);
+  }
   @media (prefers-reduced-motion: reduce) {
     .sc-tabs__tab,
     .sc-tabs__indicator {
@@ -1710,6 +1830,440 @@
     }
   }
   
+  /* ---- priority-nav.css ---- */
+  /* ---- PriorityNav ----------------------------------------------------------- */
+  /* Takes the free space in a flex header (brand · nav · actions) without sizing to its own links, so the
+     row can grow back after collapsing. In a grid, give it a `minmax(0, 1fr)` track. */
+  .sc-priority-nav {
+    position: relative;
+    flex: 1 1 0%;
+    min-inline-size: 0;
+    /* The toggle goes icon-only when the nav itself is narrow (below), whatever the viewport. */
+    container: sc-priority-nav / inline-size;
+    font-family: var(--sc-font-family-sans);
+    font-size: var(--sc-font-size-sm);
+  }
+  .sc-priority-nav__list {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: var(--sc-spacing-2xs);
+    min-inline-size: 0;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .sc-priority-nav__item,
+  .sc-priority-nav__more {
+    flex: none;
+    display: flex;
+  }
+  .sc-priority-nav__more[hidden] {
+    display: none;
+  }
+  /* Once measured, the current link is the one item that may shrink (ellipsis) when the row cannot hold it
+     and "More". While measuring it keeps its full width like the others. */
+  .sc-priority-nav:not([data-measuring]) .sc-priority-nav__item[data-current] {
+    flex: 0 1 auto;
+    min-inline-size: 0;
+  }
+  /* Before measurement (server HTML, pre-hydration, no JS): one line that never wraps. With JS the line
+     clips for the few frames before hydration measures it; without JS it scrolls sideways (below). */
+  .sc-priority-nav[data-measuring] > .sc-priority-nav__list {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none;
+  }
+  .sc-priority-nav[data-measuring] .sc-priority-nav__more[hidden] {
+    display: flex;
+    position: absolute;
+    visibility: hidden;
+    pointer-events: none;
+  }
+  @media (scripting: none) {
+    .sc-priority-nav[data-measuring] > .sc-priority-nav__list {
+      scrollbar-width: thin;
+    }
+  }
+  .sc-priority-nav__link,
+  .sc-priority-nav__toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--sc-spacing-2xs);
+    box-sizing: border-box;
+    block-size: var(--sc-size-control-sm);
+    margin: 0;
+    padding-inline: var(--sc-spacing-sm);
+    border: 0;
+    border-radius: var(--sc-radius-sm);
+    background: transparent;
+    color: var(--sc-color-text-muted);
+    font: inherit;
+    font-weight: var(--sc-font-weight-medium);
+    line-height: var(--sc-font-line-height-ui);
+    white-space: nowrap;
+    text-decoration: none;
+    cursor: pointer;
+    user-select: none;
+    transition:
+      background-color var(--sc-duration-fast) var(--sc-ease-standard),
+      color var(--sc-duration-fast) var(--sc-ease-standard);
+  }
+  .sc-priority-nav__link {
+    min-inline-size: 0;
+  }
+  .sc-priority-nav__label {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .sc-priority-nav__link:hover,
+  .sc-priority-nav__toggle:hover {
+    background: var(--sc-color-surface-hover);
+    color: var(--sc-color-text-default);
+  }
+  .sc-priority-nav__link:active,
+  .sc-priority-nav__toggle:active {
+    background: var(--sc-color-surface-active);
+  }
+  .sc-priority-nav__link[aria-current='page'] {
+    color: var(--sc-color-text-default);
+    box-shadow: inset 0 calc(-1 * var(--sc-border-width-focus)) 0 var(--sc-color-accent-default);
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+  .sc-priority-nav__link:focus-visible,
+  .sc-priority-nav__toggle:focus-visible {
+    outline: var(--sc-border-width-focus) solid var(--sc-color-border-focus);
+    outline-offset: calc(-1 * var(--sc-border-width-focus));
+  }
+  .sc-priority-nav__toggle[aria-expanded='true'] {
+    background: var(--sc-color-surface-active);
+    color: var(--sc-color-text-default);
+  }
+  .sc-priority-nav__ellipsis {
+    display: none;
+  }
+  @container sc-priority-nav (inline-size <= 400px) {
+    .sc-priority-nav__toggle {
+      justify-content: center;
+      inline-size: var(--sc-size-control-sm);
+      padding-inline: 0;
+    }
+    .sc-priority-nav__ellipsis {
+      display: inline-block;
+    }
+    .sc-priority-nav__chevron {
+      display: none;
+    }
+    /* Visually hidden, still part of the accessible name ("More, 3 links"). */
+    .sc-priority-nav__toggle-label {
+      position: absolute;
+      inline-size: 1px;
+      block-size: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+  }
+  .sc-priority-nav__chevron {
+    transition: rotate var(--sc-duration-fast) var(--sc-ease-standard);
+  }
+  .sc-priority-nav__toggle[aria-expanded='true'] > .sc-priority-nav__chevron {
+    rotate: 180deg;
+  }
+  /* The panel: Menu's surface, a list of the collapsed links. While open it is in the top layer (Popover
+     API), so no ancestor's overflow clips it; it is fixed-positioned against the viewport either way. */
+  .sc-priority-nav__toggle {
+    anchor-name: var(--_anchor);
+  }
+  .sc-priority-nav__panel {
+    --_gutter: var(--sc-spacing-md);
+    position: fixed;
+    inset: auto;
+    z-index: var(--sc-z-dropdown);
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    inline-size: max-content;
+    min-inline-size: min(180px, 100vw - 2 * var(--_gutter));
+    max-inline-size: min(320px, 100vw - 2 * var(--_gutter));
+    max-block-size: min(28rem, 100dvh - 2 * var(--_gutter));
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    margin: 0;
+    padding: var(--sc-spacing-2xs);
+    list-style: none;
+    border-radius: var(--sc-radius-lg);
+    background: var(--sc-color-surface-raised);
+    --sc-color-surface-hover: var(--sc-color-surface-raised-hover);
+    --sc-color-surface-active: var(--sc-color-surface-raised-active);
+    color: var(--sc-color-text-default);
+    border: var(--sc-border-width-hairline) solid var(--sc-color-border-default);
+    box-shadow: var(--sc-elevation-2);
+    font-family: var(--sc-font-family-sans);
+    font-size: var(--sc-font-size-sm);
+    transition:
+      opacity var(--sc-duration-fast) var(--sc-ease-enter),
+      translate var(--sc-duration-fast) var(--sc-ease-enter);
+  }
+  /* Anchored below the toggle, aligned to its inline-end edge; flips to its inline-start edge (and above
+     it) when that would leave the viewport; when no edge fits, it spans the viewport row under the toggle,
+     centred on it and kept a gutter from both edges. Without anchor positioning, JS sets left/top (place.ts). */
+  @supports (anchor-name: --a) {
+    .sc-priority-nav__panel {
+      position-anchor: var(--_anchor);
+      position-area: block-end span-inline-start;
+      margin-block: var(--sc-spacing-2xs);
+      /* Makes an option that ends closer than the gutter to the viewport edge count as overflowing. */
+      margin-inline-start: var(--_gutter);
+      position-try-fallbacks:
+        flip-inline,
+        flip-block,
+        flip-block flip-inline,
+        --sc-priority-nav-fit;
+    }
+  }
+  @position-try --sc-priority-nav-fit {
+    position-area: block-end span-all;
+    justify-self: anchor-center;
+    margin-inline: var(--_gutter);
+  }
+  @starting-style {
+    .sc-priority-nav__panel {
+      opacity: 0;
+      translate: 0 calc(-1 * var(--sc-spacing-2xs));
+    }
+  }
+  .sc-priority-nav__panel[hidden] {
+    display: none;
+  }
+  .sc-priority-nav__panel .sc-priority-nav__link {
+    display: flex;
+    inline-size: 100%;
+    padding-inline: var(--sc-spacing-xs);
+    color: var(--sc-color-text-default);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .sc-priority-nav__link,
+    .sc-priority-nav__toggle,
+    .sc-priority-nav__chevron,
+    .sc-priority-nav__panel {
+      transition: none;
+    }
+  }
+  
+  /* ---- popover.css ---- */
+  /* ---- Popover --------------------------------------------------------------- */
+  .sc-popover__positioner {
+    z-index: var(--sc-z-dropdown);
+    outline: 0;
+  }
+  /* Menu's surface: raised background, hairline border, large radius, elevation 2. */
+  .sc-popover {
+    position: relative;
+    box-sizing: border-box;
+    inline-size: max-content;
+    max-inline-size: min(100vw - 2 * var(--sc-spacing-md), 360px);
+    max-block-size: var(--available-height);
+    overflow: auto;
+    padding: var(--sc-spacing-md);
+    border-radius: var(--sc-radius-lg);
+    background: var(--sc-color-surface-raised);
+    --sc-color-surface-hover: var(--sc-color-surface-raised-hover);
+    --sc-color-surface-active: var(--sc-color-surface-raised-active);
+    color: var(--sc-color-text-default);
+    border: var(--sc-border-width-hairline) solid var(--sc-color-border-default);
+    box-shadow: var(--sc-elevation-2);
+    font-family: var(--sc-font-family-sans);
+    font-size: var(--sc-font-size-sm);
+    line-height: var(--sc-font-line-height-normal);
+    outline: 0;
+    transform-origin: var(--transform-origin);
+    transition:
+      opacity var(--sc-duration-fast) var(--sc-ease-enter),
+      scale var(--sc-duration-fast) var(--sc-ease-enter);
+  }
+  /* With an arrow the popup must not clip it. */
+  .sc-popover:has(> .sc-popover__arrow) {
+    overflow: visible;
+  }
+  .sc-popover[data-starting-style],
+  .sc-popover[data-ending-style] {
+    opacity: 0;
+    scale: 0.97;
+  }
+  .sc-popover[data-ending-style] {
+    transition-timing-function: var(--sc-ease-exit);
+  }
+  .sc-popover[data-instant] {
+    transition: none;
+  }
+  .sc-popover__title {
+    margin: 0;
+    font-size: var(--sc-font-size-md);
+    line-height: var(--sc-font-line-height-snug);
+    font-weight: var(--sc-font-weight-semibold);
+  }
+  .sc-popover__title:has(~ .sc-popover__close),
+  .sc-popover__close ~ .sc-popover__title {
+    padding-inline-end: var(--sc-spacing-xl);
+  }
+  .sc-popover__description {
+    margin: var(--sc-spacing-2xs) 0 0;
+    color: var(--sc-color-text-muted);
+  }
+  .sc-popover__close {
+    position: absolute;
+    inset-block-start: var(--sc-spacing-xs);
+    inset-inline-end: var(--sc-spacing-xs);
+    display: inline-grid;
+    place-items: center;
+    inline-size: var(--sc-size-control-sm);
+    block-size: var(--sc-size-control-sm);
+    padding: 0;
+    border: 0;
+    border-radius: var(--sc-radius-md);
+    background: transparent;
+    color: var(--sc-color-text-muted);
+    cursor: pointer;
+  }
+  .sc-popover__close:hover {
+    background: var(--sc-color-surface-hover);
+    color: var(--sc-color-text-default);
+  }
+  .sc-popover__close:focus-visible {
+    outline: var(--sc-border-width-focus) solid var(--sc-color-border-focus);
+    outline-offset: calc(-1 * var(--sc-border-width-focus));
+  }
+  /* A 16×8 tip with the popup's fill and border, placed by Base UI on the side facing the trigger. It overlaps
+     the popup's border by one hairline so the border does not run across its base. */
+  .sc-popover__arrow {
+    --_w: 16px;
+    --_h: 8px;
+    display: block;
+    inline-size: var(--_w);
+    block-size: calc(var(--_h) + var(--sc-border-width-hairline));
+    overflow: clip;
+    pointer-events: none;
+  }
+  .sc-popover__arrow::before {
+    content: '';
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline-start: 50%;
+    box-sizing: border-box;
+    inline-size: calc(var(--_h) * 1.4142);
+    block-size: calc(var(--_h) * 1.4142);
+    background: var(--sc-color-surface-raised);
+    border: var(--sc-border-width-hairline) solid var(--sc-color-border-default);
+    translate: -50% 50%;
+    rotate: 45deg;
+  }
+  .sc-popover__arrow[data-side='top'] {
+    inset-block-end: calc(-1 * var(--_h));
+    rotate: 180deg;
+  }
+  .sc-popover__arrow[data-side='bottom'] {
+    inset-block-start: calc(-1 * var(--_h));
+  }
+  .sc-popover__arrow[data-side='left'],
+  .sc-popover__arrow[data-side='inline-start'] {
+    inset-inline-end: calc(-1 * (var(--_w) + var(--_h)) / 2);
+    rotate: 90deg;
+  }
+  .sc-popover__arrow[data-side='right'],
+  .sc-popover__arrow[data-side='inline-end'] {
+    inset-inline-start: calc(-1 * (var(--_w) + var(--_h)) / 2);
+    rotate: -90deg;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .sc-popover {
+      transition-duration: 0ms;
+    }
+    .sc-popover[data-starting-style],
+    .sc-popover[data-ending-style] {
+      scale: none;
+    }
+  }
+  
+  /* ---- broom-icon.css ---- */
+  /* ---- BroomIcon ------------------------------------------------------------- */
+  /* Geometry and motion as approved: the body pivots on the handle top (20.2, 2.2) from -14deg to 8deg while
+     the dust fades in and drifts left in step; strokes stay a fixed screen width at any size. */
+  .sc-broom {
+    --sc-broom-stroke: 1.25px;
+  }
+  /* `display` (72px) is a one-off for the broom's showcase and empty states. Move it into the Icon sizes and
+     tokens if a second icon ever needs it. */
+  .sc-icon.sc-broom[data-size='display'] {
+    --_s: calc(var(--sc-size-icon-xl) * 3);
+    --sc-broom-stroke: 1.75px;
+  }
+  .sc-broom__body,
+  .sc-broom__dust {
+    transform-box: view-box;
+    stroke-width: var(--sc-broom-stroke);
+  }
+  .sc-broom__body {
+    transform-origin: 20.2px 2.2px;
+  }
+  .sc-broom * {
+    vector-effect: non-scaling-stroke;
+  }
+  .sc-broom__band {
+    fill: currentColor;
+    stroke: none;
+  }
+  .sc-broom__dust {
+    opacity: 0;
+  }
+  .sc-broom[data-sweeping] .sc-broom__body {
+    animation: sc-broom-sweep 0.9s ease-in-out infinite alternate;
+  }
+  .sc-broom[data-sweeping] .sc-broom__dust {
+    animation: sc-broom-dust 0.9s ease-in-out infinite alternate;
+  }
+  @keyframes sc-broom-sweep {
+    from {
+      transform: rotate(-14deg);
+    }
+    to {
+      transform: rotate(8deg);
+    }
+  }
+  /* At the top of the sweep (8deg) the head stays about 2 grid units clear of the dust. */
+  @keyframes sc-broom-dust {
+    from {
+      opacity: 0;
+      transform: translateX(0.5px);
+    }
+    to {
+      opacity: 0.9;
+      transform: translateX(-1px);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .sc-broom[data-sweeping] .sc-broom__body,
+    .sc-broom[data-sweeping] .sc-broom__dust {
+      animation: none;
+    }
+    .sc-broom[data-sweeping] .sc-broom__dust {
+      opacity: 0.9;
+    }
+  }
+  /* Drawn on a 24px grid (the shipped icons use 16px), so inside an IconButton it takes the next icon size up:
+     20px in an md button, as in the approved nav mock. */
+  .sc-icon-button > .sc-button__icon:has(> .sc-broom) {
+    --_icon: var(--sc-size-icon-lg);
+  }
+  .sc-icon-button[data-size='sm'] > .sc-button__icon:has(> .sc-broom) {
+    --_icon: var(--sc-size-icon-md);
+  }
+  .sc-icon-button[data-size='lg'] > .sc-button__icon:has(> .sc-broom) {
+    --_icon: var(--sc-size-icon-xl);
+  }
+  
   /* ---- toolbar.css ---- */
   /* ---- Toolbar --------------------------------------------------------------- */
   .sc-toolbar {
@@ -2374,9 +2928,11 @@
     inline-size: 100%;
     block-size: 100%;
   }
+  /* The label clips for the ellipsis, so it needs a real line box or descenders get cut (the chip sets line-height: 1). */
   .sc-chip__label {
     overflow: hidden;
     text-overflow: ellipsis;
+    line-height: var(--sc-font-line-height-ui);
   }
   .sc-chip[data-removable] > .sc-chip__action,
   .sc-chip[data-removable] > .sc-chip__label {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@salemcobalt/ui",
-  "version": "0.2.0-rc.8",
-  "description": "React components for the Salem Cobalt design system: Button, IconButton, Icon set, Badge, Card, Stack, Inline, Kbd, Dialog, Tooltip, Menu, Toolbar, Banner, Spinner, Progress, Tabs, Input, Textarea, Select, FileInput, Checkbox, Switch, Heading, Text, Table, Stat, Chip, Disclosure, EmptyState, Skeleton.",
+  "version": "0.2.0-rc.9",
+  "description": "React components for the Salem Cobalt design system: Button, IconButton, Icon set, BroomIcon, Badge, Card, Stack, Inline, Kbd, Dialog, Tooltip, Menu, Popover, PriorityNav, Toolbar, Banner, Spinner, Progress, Tabs, Input, Textarea, Select, FileInput, Checkbox, Switch, Heading, Text, Table, Stat, Chip, Disclosure, EmptyState, Skeleton.",
   "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.8"
+    "@salemcobalt/tokens": "^0.2.0-rc.9"
   },
   "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.8"
+    "@salemcobalt/tokens": "^0.2.0-rc.9"
   },
   "publishConfig": {
     "access": "public"