@salemcobalt/ui 0.2.0-rc.21 → 0.2.0-rc.23

package/dist/styles.css

@@ -1,9 +1,10 @@
-/* @salemcobalt/ui 0.2.0-rc.21 — requires @salemcobalt/tokens/css. */
+/* @salemcobalt/ui 0.2.0-rc.23 — requires @salemcobalt/tokens/css. */
 @layer sc {
   /* ---- base.css ---- */
   /* Shared: focus ring, reduced motion. Component files follow. */
   .sc-focus-ring:focus-visible,
   .sc-button:focus-visible,
+  .sc-avatar-button:focus-visible,
   .sc-card[data-interactive]:focus-visible,
   .sc-dialog__close:focus-visible,
   .sc-menu__item:focus-visible,
@@ -266,10 +267,10 @@
     background: var(--sc-color-accent-default);
     color: var(--sc-color-text-on-accent);
   }
-  .sc-button[data-variant='primary']:hover {
+  .sc-button[data-variant='primary']:hover:where(:not(:disabled)) {
     background: var(--sc-color-accent-hover);
   }
-  .sc-button[data-variant='primary']:active {
+  .sc-button[data-variant='primary']:active:where(:not(:disabled)) {
     background: var(--sc-color-accent-active);
   }
   .sc-button[data-variant='secondary'] {
@@ -277,30 +278,30 @@
     color: var(--sc-color-text-default);
     border-color: var(--sc-color-border-strong);
   }
-  .sc-button[data-variant='secondary']:hover {
+  .sc-button[data-variant='secondary']:hover:where(:not(:disabled)) {
     background: var(--sc-color-surface-hover);
   }
-  .sc-button[data-variant='secondary']:active {
+  .sc-button[data-variant='secondary']:active:where(:not(:disabled)) {
     background: var(--sc-color-surface-active);
   }
   .sc-button[data-variant='ghost'] {
     background: transparent;
     color: var(--sc-color-text-default);
   }
-  .sc-button[data-variant='ghost']:hover {
+  .sc-button[data-variant='ghost']:hover:where(:not(:disabled)) {
     background: var(--sc-color-surface-hover);
   }
-  .sc-button[data-variant='ghost']:active {
+  .sc-button[data-variant='ghost']:active:where(:not(:disabled)) {
     background: var(--sc-color-surface-active);
   }
   .sc-button[data-variant='danger'] {
     background: var(--sc-color-danger-solid);
     color: var(--sc-color-text-on-status);
   }
-  .sc-button[data-variant='danger']:hover {
+  .sc-button[data-variant='danger']:hover:where(:not(:disabled)) {
     background: var(--sc-color-danger-hover);
   }
-  .sc-button[data-variant='danger']:active {
+  .sc-button[data-variant='danger']:active:where(:not(:disabled)) {
     background: var(--sc-color-danger-hover);
     filter: brightness(0.95);
   }
@@ -308,11 +309,6 @@
     opacity: 0.5;
     cursor: not-allowed;
   }
-  .sc-button:disabled:hover,
-  .sc-button:disabled:active {
-    background: revert-layer;
-    filter: none;
-  }
   .sc-button[data-loading] {
     cursor: progress;
   }
@@ -2581,8 +2577,8 @@
   .sc-banner > .sc-button[data-variant='ghost'] {
     color: inherit;
   }
-  .sc-banner > .sc-button[data-variant='ghost']:hover,
-  .sc-banner > .sc-button[data-variant='ghost']:active {
+  .sc-banner > .sc-button[data-variant='ghost']:hover:where(:not(:disabled)),
+  .sc-banner > .sc-button[data-variant='ghost']:active:where(:not(:disabled)) {
     background: rgb(from var(--_fg) r g b / 0.1);
   }
   
@@ -5689,4 +5685,112 @@
     margin: 0;
   }
   
+  /* ---- avatar.css ---- */
+  /* ---- Avatar ---------------------------------------------------------------- */
+  /* Sizes follow the control heights (so compact density shrinks them too), xs the 24px icon. The tint alone is about
+     1.0-1.4:1 on the surfaces, so the 1px ring (avatar.ring, 3:1 on the fill and every surface) draws the circle. It is
+     an overlay, so it also edges a picture. */
+  .sc-avatar {
+    --_size: var(--sc-size-control-md);
+    --_fs: var(--sc-font-size-sm);
+    --_ring: var(--sc-border-width-hairline);
+    position: relative;
+    display: inline-grid;
+    place-items: center;
+    flex: none;
+    box-sizing: border-box;
+    inline-size: var(--_size);
+    block-size: var(--_size);
+    overflow: hidden;
+    border-radius: var(--sc-radius-full);
+    background: var(--sc-color-avatar-fill);
+    color: var(--sc-color-avatar-text);
+    font-family: var(--sc-font-family-sans);
+    font-size: var(--_fs);
+    font-weight: var(--sc-font-weight-semibold);
+    line-height: 1;
+    letter-spacing: 0;
+    white-space: nowrap;
+    user-select: none;
+    vertical-align: middle;
+  }
+  .sc-avatar::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 var(--_ring) var(--sc-color-avatar-ring);
+    pointer-events: none;
+    transition: box-shadow var(--sc-duration-fast) var(--sc-ease-standard);
+  }
+  .sc-avatar[data-size='xs'] {
+    --_size: var(--sc-size-icon-xl);
+    --_fs: var(--sc-font-size-xs);
+  }
+  .sc-avatar[data-size='sm'] {
+    --_size: var(--sc-size-control-sm);
+    --_fs: var(--sc-font-size-xs);
+  }
+  .sc-avatar[data-size='lg'] {
+    --_size: var(--sc-size-control-lg);
+    --_fs: var(--sc-font-size-md);
+  }
+  .sc-avatar__image {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+  }
+  .sc-avatar__fallback {
+    display: contents;
+  }
+  /* No name and no initials: a person glyph at 60% of the circle. */
+  .sc-avatar__icon {
+    font-size: calc(var(--_size) * 0.6);
+  }
+  
+  /* ---- AvatarButton ---------------------------------------------------------- */
+  .sc-avatar-button {
+    position: relative;
+    display: inline-grid;
+    flex: none;
+    padding: 0;
+    border: 0;
+    border-radius: var(--sc-radius-full);
+    background: none;
+    color: inherit;
+    font: inherit;
+    text-decoration: none;
+    cursor: pointer;
+  }
+  .sc-avatar-button:hover > .sc-avatar,
+  .sc-avatar-button[data-popup-open] > .sc-avatar,
+  .sc-avatar-button[aria-expanded='true'] > .sc-avatar {
+    --_ring: var(--sc-border-width-focus);
+  }
+  .sc-avatar-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .sc-avatar-button:disabled:hover > .sc-avatar {
+    --_ring: var(--sc-border-width-hairline);
+  }
+  /* 44px hit area on touch without changing layout, as on Button. */
+  @media (pointer: coarse) {
+    .sc-avatar-button::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));
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .sc-avatar::after {
+      transition: none;
+    }
+  }
+  
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salemcobalt/ui",
-  "version": "0.2.0-rc.21",
+  "version": "0.2.0-rc.23",
   "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; TextEditor (CodeMirror 6, inline word diffs) at @salemcobalt/ui/editor.",
   "license": "MIT",
   "repository": {
@@ -46,7 +46,7 @@
     "diff": "^8.0.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@salemcobalt/tokens": "^0.2.0-rc.21"
+    "@salemcobalt/tokens": "^0.2.0-rc.23"
   },
   "peerDependenciesMeta": {
     "@codemirror/commands": {
@@ -109,7 +109,7 @@
     "tsup": "^9.0.0",
     "typescript": "^5.9.3",
     "vitest": "^5.0.5",
-    "@salemcobalt/tokens": "^0.2.0-rc.21"
+    "@salemcobalt/tokens": "^0.2.0-rc.23"
   },
   "publishConfig": {
     "access": "public"