@salemcobalt/ui 0.2.0-rc.4 → 0.2.0-rc.6

package/dist/styles.css

@@ -1,4 +1,4 @@
-/* @salemcobalt/ui 0.2.0-rc.4 — requires @salemcobalt/tokens/css. */
+/* @salemcobalt/ui 0.2.0-rc.6 — requires @salemcobalt/tokens/css. */
 @layer sc {
   /* ---- base.css ---- */
   /* Shared: focus ring, reduced motion. Component files follow. */
@@ -10,6 +10,7 @@
   .sc-input:focus-visible,
   .sc-select:focus-visible,
   .sc-select__item:focus-visible,
+  .sc-select__clear:focus-visible,
   .sc-checkbox:focus-visible,
   .sc-switch:focus-visible,
   .sc-tabs__tab:focus-visible,
@@ -513,6 +514,9 @@
     --_p: var(--sc-spacing-lg);
   }
   .sc-card[data-variant='elevated'] {
+    /* Hover and pressed washes inside a raised surface use the raised tokens, so they show against it (docs/adr/0003). */
+    --sc-color-surface-hover: var(--sc-color-surface-raised-hover);
+    --sc-color-surface-active: var(--sc-color-surface-raised-active);
     box-shadow: var(--sc-elevation-1);
     border-color: transparent;
   }
@@ -749,6 +753,9 @@
     padding: var(--sc-spacing-lg);
     border-radius: var(--sc-radius-xl);
     background: var(--sc-color-surface-raised);
+    /* Hover and pressed washes inside a raised surface use the raised tokens, so they show against it (docs/adr/0003). */
+    --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-3);
@@ -1006,6 +1013,9 @@
     padding: var(--sc-spacing-2xs);
     border-radius: var(--sc-radius-lg);
     background: var(--sc-color-surface-raised);
+    /* Hover and pressed washes inside a raised surface use the raised tokens, so they show against it (docs/adr/0003). */
+    --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);
@@ -1041,7 +1051,7 @@
     border-radius: var(--sc-radius-sm);
     color: var(--sc-color-text-default);
     text-decoration: none;
-    cursor: default;
+    cursor: pointer;
     user-select: none;
     outline: 0;
   }
@@ -1178,6 +1188,7 @@
     min-inline-size: 0;
   }
   .sc-input {
+    appearance: none;
     box-sizing: border-box;
     inline-size: 100%;
     min-inline-size: 0;
@@ -1215,6 +1226,30 @@
     color: var(--sc-color-text-subtle);
     cursor: not-allowed;
   }
+  /* Native date, time and number fields: same box, tabular digits, the picker indicator at the end edge. */
+  .sc-input:is(
+    [type='date'],
+    [type='time'],
+    [type='datetime-local'],
+    [type='month'],
+    [type='week'],
+    [type='number']
+  ) {
+    font-variant-numeric: tabular-nums;
+  }
+  .sc-input::-webkit-date-and-time-value {
+    min-block-size: 1lh;
+    text-align: start;
+  }
+  .sc-input::-webkit-calendar-picker-indicator {
+    margin-inline-start: var(--sc-spacing-xs);
+    padding: 0;
+    opacity: 0.7;
+    cursor: pointer;
+  }
+  .sc-input::-webkit-calendar-picker-indicator:hover {
+    opacity: 1;
+  }
   .sc-input-wrap[data-icon-start] > .sc-input {
     padding-inline-start: calc(var(--_px) + var(--sc-size-icon-md) + var(--sc-spacing-xs));
   }
@@ -1252,7 +1287,29 @@
   .sc-textarea[data-resize='none'] {
     resize: none;
   }
+  .sc-textarea[data-variant='code'] {
+    font-family: var(--sc-font-family-mono);
+    font-size: calc(var(--_fs) * 0.95);
+    line-height: var(--sc-font-line-height-normal);
+    tab-size: 2;
+    hyphens: none;
+    overflow-wrap: normal;
+  }
+  .sc-textarea[wrap='off'] {
+    white-space: pre;
+    overflow-x: auto;
+  }
   /* Select */
+  .sc-select__wrap {
+    position: relative;
+    display: inline-flex;
+    max-inline-size: 100%;
+    align-self: flex-start;
+  }
+  .sc-select__wrap[data-full-width] {
+    display: flex;
+    align-self: stretch;
+  }
   .sc-select {
     box-sizing: border-box;
     display: inline-flex;
@@ -1284,6 +1341,30 @@
     inline-size: 100%;
     align-self: stretch;
   }
+  /* Room for the × between the value and the chevron. The clear button is a sibling, never nested in the trigger. */
+  .sc-select[data-clearable] > .sc-select__icon {
+    margin-inline-start: calc(var(--sc-size-icon-lg) + var(--sc-spacing-2xs));
+  }
+  .sc-select__clear {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-end: calc(var(--sc-spacing-xs) + var(--sc-size-icon-md) + var(--sc-spacing-2xs));
+    translate: 0 -50%;
+    display: inline-grid;
+    place-items: center;
+    inline-size: var(--sc-size-icon-lg);
+    block-size: var(--sc-size-icon-lg);
+    padding: 0;
+    border: 0;
+    border-radius: var(--sc-radius-sm);
+    background: transparent;
+    color: var(--sc-color-text-muted);
+    cursor: pointer;
+  }
+  .sc-select__clear:hover {
+    background: var(--sc-color-surface-hover);
+    color: var(--sc-color-text-default);
+  }
   .sc-select:hover:not([data-disabled]) {
     border-color: var(--sc-color-text-muted);
   }
@@ -1326,6 +1407,9 @@
     padding: var(--sc-spacing-2xs);
     border-radius: var(--sc-radius-lg);
     background: var(--sc-color-surface-raised);
+    /* Hover and pressed washes inside a raised surface use the raised tokens, so they show against it (docs/adr/0003). */
+    --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);
@@ -1353,7 +1437,7 @@
     padding-inline: var(--sc-spacing-xs);
     padding-block: var(--sc-spacing-2xs);
     border-radius: var(--sc-radius-sm);
-    cursor: default;
+    cursor: pointer;
     user-select: none;
     outline: 0;
   }
@@ -2192,4 +2276,398 @@
     font-size: var(--sc-font-size-xs);
   }
   
+  /* ---- chip.css ---- */
+  /* ---- Chip ------------------------------------------------------------------ */
+  .sc-chip {
+    --_h: var(--sc-size-control-sm);
+    --_px: var(--sc-spacing-sm);
+    --_fs: var(--sc-font-size-sm);
+    --_icon: var(--sc-size-icon-sm);
+    --_bg: transparent;
+    --_fg: var(--sc-color-text-default);
+    --_bd: var(--sc-color-border-strong);
+    --_bg-hover: var(--sc-color-surface-hover);
+    --_bg-on: var(--sc-color-surface-active);
+    --_fg-on: var(--sc-color-text-default);
+    --_bd-on: var(--sc-color-text-muted);
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    max-inline-size: 100%;
+    block-size: var(--_h);
+    border-radius: var(--sc-radius-full);
+    border: var(--sc-border-width-hairline) solid var(--_bd);
+    background: var(--_bg);
+    color: var(--_fg);
+    font-family: var(--sc-font-family-sans);
+    font-size: var(--_fs);
+    font-weight: var(--sc-font-weight-medium);
+    line-height: 1;
+    white-space: nowrap;
+    transition:
+      background-color var(--sc-duration-fast) var(--sc-ease-standard),
+      border-color var(--sc-duration-fast) var(--sc-ease-standard),
+      color var(--sc-duration-fast) var(--sc-ease-standard);
+  }
+  .sc-chip[data-size='sm'] {
+    --_h: var(--sc-size-badge-md);
+    --_px: var(--sc-spacing-xs);
+    --_fs: var(--sc-font-size-xs);
+    --_icon: var(--sc-size-icon-xs);
+  }
+  .sc-chip[data-selected] {
+    --_bg: var(--_bg-on);
+    --_fg: var(--_fg-on);
+    --_bd: var(--_bd-on);
+  }
+  .sc-chip[data-disabled] {
+    opacity: 0.5;
+  }
+  /* The text, or the toggle button that holds it. */
+  .sc-chip__action,
+  .sc-chip > .sc-chip__icon,
+  .sc-chip > .sc-chip__label {
+    display: inline-flex;
+    align-items: center;
+    min-inline-size: 0;
+  }
+  .sc-chip > .sc-chip__icon {
+    margin-inline-start: var(--_px);
+  }
+  .sc-chip > .sc-chip__label {
+    padding-inline: var(--_px);
+  }
+  .sc-chip > .sc-chip__icon + .sc-chip__label {
+    padding-inline-start: var(--sc-spacing-2xs);
+  }
+  .sc-chip__action {
+    gap: var(--sc-spacing-2xs);
+    box-sizing: border-box;
+    block-size: 100%;
+    margin: 0;
+    padding-inline: var(--_px);
+    border: 0;
+    border-radius: inherit;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    line-height: 1;
+    cursor: pointer;
+  }
+  .sc-chip__action:hover:not(:disabled) {
+    background: var(--_bg-hover);
+  }
+  .sc-chip[data-selected] > .sc-chip__action:hover:not(:disabled) {
+    background: transparent;
+    filter: brightness(0.97);
+  }
+  .sc-chip__action:disabled {
+    cursor: not-allowed;
+  }
+  .sc-chip__icon {
+    flex: none;
+    inline-size: var(--_icon);
+    block-size: var(--_icon);
+  }
+  .sc-chip__icon > svg {
+    inline-size: 100%;
+    block-size: 100%;
+  }
+  .sc-chip__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .sc-chip[data-removable] > .sc-chip__action,
+  .sc-chip[data-removable] > .sc-chip__label {
+    padding-inline-end: var(--sc-spacing-2xs);
+  }
+  .sc-chip__remove {
+    flex: none;
+    display: inline-grid;
+    place-items: center;
+    box-sizing: border-box;
+    inline-size: calc(var(--_h) - 2 * var(--sc-spacing-2xs) - 2px);
+    block-size: calc(var(--_h) - 2 * var(--sc-spacing-2xs) - 2px);
+    margin-inline-end: var(--sc-spacing-2xs);
+    padding: 0;
+    border: 0;
+    border-radius: var(--sc-radius-full);
+    background: transparent;
+    color: inherit;
+    opacity: 0.7;
+    cursor: pointer;
+  }
+  .sc-chip__remove:hover:not(:disabled) {
+    opacity: 1;
+    background: var(--_bg-hover);
+  }
+  .sc-chip__remove:disabled {
+    cursor: not-allowed;
+  }
+  .sc-chip__action:focus-visible,
+  .sc-chip__remove:focus-visible {
+    outline: var(--sc-border-width-focus) solid var(--sc-color-border-focus);
+    outline-offset: 0;
+  }
+  /* 44px hit area on touch without changing layout. */
+  @media (pointer: coarse) {
+    .sc-chip__action::after,
+    .sc-chip__remove::after {
+      content: '';
+      position: absolute;
+      inset: 50% auto auto 50%;
+      translate: -50% -50%;
+      inline-size: max(100%, var(--sc-size-touch-target));
+      block-size: max(100%, var(--sc-size-touch-target));
+    }
+    .sc-chip__action,
+    .sc-chip__remove {
+      position: relative;
+    }
+  }
+  /* Tones: soft fill when selected, tinted outline otherwise. */
+  .sc-chip[data-tone='accent'] {
+    --_fg: var(--sc-color-accent-text);
+    --_bd: var(--sc-color-accent-text);
+    --_bg-hover: var(--sc-color-accent-subtle);
+    --_bg-on: var(--sc-color-accent-subtle);
+    --_fg-on: var(--sc-color-accent-text);
+    --_bd-on: var(--sc-color-accent-default);
+  }
+  .sc-chip[data-tone='success'] {
+    --_fg: var(--sc-color-success-text);
+    --_bd: var(--sc-color-success-text);
+    --_bg-hover: var(--sc-color-success-subtle);
+    --_bg-on: var(--sc-color-success-subtle);
+    --_fg-on: var(--sc-color-success-text);
+    --_bd-on: var(--sc-color-success-solid);
+  }
+  .sc-chip[data-tone='warning'] {
+    --_fg: var(--sc-color-warning-text);
+    --_bd: var(--sc-color-warning-text);
+    --_bg-hover: var(--sc-color-warning-subtle);
+    --_bg-on: var(--sc-color-warning-subtle);
+    --_fg-on: var(--sc-color-warning-text);
+    --_bd-on: var(--sc-color-warning-solid);
+  }
+  .sc-chip[data-tone='danger'] {
+    --_fg: var(--sc-color-danger-text);
+    --_bd: var(--sc-color-danger-text);
+    --_bg-hover: var(--sc-color-danger-subtle);
+    --_bg-on: var(--sc-color-danger-subtle);
+    --_fg-on: var(--sc-color-danger-text);
+    --_bd-on: var(--sc-color-danger-solid);
+  }
+  .sc-chip[data-tone='info'] {
+    --_fg: var(--sc-color-info-text);
+    --_bd: var(--sc-color-info-text);
+    --_bg-hover: var(--sc-color-info-subtle);
+    --_bg-on: var(--sc-color-info-subtle);
+    --_fg-on: var(--sc-color-info-text);
+    --_bd-on: var(--sc-color-info-solid);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .sc-chip {
+      transition: none;
+    }
+  }
+  
+  /* ---- disclosure.css ---- */
+  /* ---- Disclosure ------------------------------------------------------------ */
+  .sc-disclosure {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sc-spacing-xs);
+    min-inline-size: 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);
+  }
+  .sc-disclosure__summary {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--sc-spacing-2xs);
+    inline-size: fit-content;
+    margin-inline: calc(-1 * var(--sc-spacing-2xs));
+    padding: var(--sc-spacing-2xs);
+    border-radius: var(--sc-radius-sm);
+    color: var(--sc-color-accent-text);
+    font-weight: var(--sc-font-weight-medium);
+    line-height: var(--sc-font-line-height-ui);
+    list-style: none;
+    cursor: pointer;
+    user-select: none;
+  }
+  .sc-disclosure__summary::-webkit-details-marker,
+  .sc-disclosure__summary::marker {
+    display: none;
+    content: '';
+  }
+  .sc-disclosure__summary:hover {
+    background: var(--sc-color-surface-hover);
+  }
+  .sc-disclosure__summary:focus-visible {
+    outline: var(--sc-border-width-focus) solid var(--sc-color-border-focus);
+    outline-offset: 0;
+  }
+  .sc-disclosure__chevron {
+    flex: none;
+    inline-size: var(--sc-size-icon-md);
+    block-size: var(--sc-size-icon-md);
+    transition: rotate var(--sc-duration-fast) var(--sc-ease-standard);
+  }
+  .sc-disclosure[open] > .sc-disclosure__summary > .sc-disclosure__chevron {
+    rotate: 180deg;
+  }
+  .sc-disclosure[data-summary-position='end'] > .sc-disclosure__summary {
+    order: 1;
+  }
+  .sc-disclosure__content {
+    min-inline-size: 0;
+  }
+  /* Preview: while closed, the content stays rendered, clipped to N lines and faded. Browsers without
+     `::details-content` keep the native behaviour (content hidden until open). */
+  .sc-disclosure[data-preview]:not([open])::details-content {
+    content-visibility: visible;
+    display: block;
+    max-block-size: calc(var(--_lines, 3) * 1lh);
+    overflow: clip;
+    mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .sc-disclosure__chevron {
+      transition: none;
+    }
+  }
+  
+  /* ---- empty-state.css ---- */
+  /* ---- EmptyState ------------------------------------------------------------ */
+  .sc-empty-state {
+    --_icon: var(--sc-size-icon-xl);
+    --_ring: 48px;
+    --_py: var(--sc-spacing-2xl);
+    --_title: var(--sc-font-size-lg);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--sc-spacing-xs);
+    box-sizing: border-box;
+    inline-size: 100%;
+    margin: 0;
+    padding: var(--_py) var(--sc-spacing-lg);
+    list-style: none;
+    text-align: center;
+    font-family: var(--sc-font-family-sans);
+    color: var(--sc-color-text-default);
+  }
+  .sc-empty-state[data-size='sm'] {
+    --_icon: var(--sc-size-icon-lg);
+    --_ring: 40px;
+    --_py: var(--sc-spacing-lg);
+    --_title: var(--sc-font-size-md);
+    gap: var(--sc-spacing-2xs);
+  }
+  .sc-empty-state__icon {
+    display: inline-grid;
+    place-items: center;
+    inline-size: var(--_ring);
+    block-size: var(--_ring);
+    margin-block-end: var(--sc-spacing-xs);
+    border-radius: var(--sc-radius-full);
+    background: var(--sc-color-surface-sunken);
+    color: var(--sc-color-text-muted);
+  }
+  .sc-empty-state__icon > svg {
+    inline-size: var(--_icon);
+    block-size: var(--_icon);
+  }
+  .sc-empty-state__title {
+    margin: 0;
+    max-inline-size: 36ch;
+    font-size: var(--_title);
+    font-weight: var(--sc-font-weight-semibold);
+    line-height: var(--sc-font-line-height-snug);
+    letter-spacing: var(--sc-font-tracking-snug);
+    text-wrap: balance;
+  }
+  .sc-empty-state__description {
+    margin: 0;
+    max-inline-size: 48ch;
+    font-size: var(--sc-font-size-sm);
+    line-height: var(--sc-font-line-height-normal);
+    color: var(--sc-color-text-muted);
+    text-wrap: pretty;
+  }
+  .sc-empty-state__actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: var(--sc-spacing-xs);
+    margin-block-start: var(--sc-spacing-sm);
+  }
+  
+  /* ---- skeleton.css ---- */
+  /* ---- Skeleton -------------------------------------------------------------- */
+  .sc-skeleton {
+    --_base: var(--sc-color-surface-active);
+    --_sheen: var(--sc-color-surface-hover);
+    display: block;
+    box-sizing: border-box;
+    inline-size: 100%;
+    block-size: 1em;
+    border-radius: var(--sc-radius-sm);
+    background: var(--_base);
+    background-image: linear-gradient(90deg, var(--_base) 0%, var(--_sheen) 50%, var(--_base) 100%);
+    background-size: 200% 100%;
+    animation: sc-shimmer 1.6s ease-in-out infinite;
+  }
+  .sc-skeleton[data-variant='text'] {
+    display: inline-block;
+    vertical-align: middle;
+    block-size: 1em;
+    border-radius: var(--sc-radius-sm);
+  }
+  .sc-skeleton[data-variant='rect'] {
+    block-size: 80px;
+    border-radius: var(--sc-radius-md);
+  }
+  .sc-skeleton[data-variant='circle'] {
+    inline-size: 40px;
+    aspect-ratio: 1;
+    block-size: auto;
+    border-radius: var(--sc-radius-full);
+  }
+  .sc-skeleton[data-still] {
+    animation: none;
+    background-image: none;
+  }
+  .sc-skeleton-lines {
+    display: flex;
+    flex-direction: column;
+    gap: calc(1lh - 1em);
+    inline-size: 100%;
+  }
+  .sc-skeleton-lines > .sc-skeleton {
+    display: block;
+  }
+  .sc-skeleton-lines > .sc-skeleton[data-last] {
+    inline-size: 60%;
+  }
+  @keyframes sc-shimmer {
+    from {
+      background-position: 200% 0;
+    }
+    to {
+      background-position: -200% 0;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .sc-skeleton {
+      animation: none;
+      background-image: none;
+    }
+  }
+  
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@salemcobalt/ui",
-  "version": "0.2.0-rc.4",
-  "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, Checkbox, Switch, Heading, Text, Table, Stat.",
+  "version": "0.2.0-rc.6",
+  "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, 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.4"
+    "@salemcobalt/tokens": "^0.2.0-rc.6"
   },
   "dependencies": {
     "@base-ui/react": "^1.9.0",
@@ -56,7 +56,7 @@
     "tsup": "^9.0.0",
     "typescript": "^5.9.3",
     "vitest": "^5.0.5",
-    "@salemcobalt/tokens": "^0.2.0-rc.4"
+    "@salemcobalt/tokens": "^0.2.0-rc.6"
   },
   "publishConfig": {
     "access": "public"