@salemcobalt/ui 0.2.0-rc.22 → 0.2.0-rc.24

package/dist/styles.css

@@ -1,4 +1,4 @@
-/* @salemcobalt/ui 0.2.0-rc.22 — requires @salemcobalt/tokens/css. */
+/* @salemcobalt/ui 0.2.0-rc.24 — requires @salemcobalt/tokens/css. */
 @layer sc {
   /* ---- base.css ---- */
   /* Shared: focus ring, reduced motion. Component files follow. */
@@ -7,6 +7,7 @@
   .sc-avatar-button:focus-visible,
   .sc-card[data-interactive]:focus-visible,
   .sc-dialog__close:focus-visible,
+  .sc-dialog__handle:focus-visible,
   .sc-menu__item:focus-visible,
   .sc-input:focus-visible,
   .sc-select:focus-visible,
@@ -267,10 +268,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'] {
@@ -278,30 +279,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);
   }
@@ -309,11 +310,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;
   }
@@ -970,6 +966,10 @@
     overflow: auto;
     overscroll-behavior: contain;
   }
+  /* The sheet's grab handle shows only where the sheet docks. */
+  .sc-dialog__handle {
+    display: none;
+  }
   /* Below 640px the sheet docks to the bottom edge, full width, and slides up. The breakpoint is fixed
      here because custom properties cannot drive a media query. */
   @media (width < 640px) {
@@ -986,17 +986,48 @@
       border-radius: var(--sc-radius-xl) var(--sc-radius-xl) 0 0;
       transition:
         opacity var(--sc-duration-base) var(--sc-ease-enter),
-        translate var(--sc-duration-base) var(--sc-ease-enter);
+        translate var(--sc-duration-base) var(--sc-ease-enter),
+        transform var(--sc-duration-slow) var(--sc-ease-standard);
     }
-    .sc-dialog__popup[data-variant='sheet']::before {
-      content: '';
+    /* The handle: a 36 × 4 bar centred in a 64 × 24 target, where the bar alone used to sit. */
+    .sc-dialog__popup[data-variant='sheet'] > .sc-dialog__handle {
+      display: grid;
+      place-items: center;
       flex: none;
       align-self: center;
+      inline-size: 64px;
+      block-size: 24px;
+      margin-block: calc(-1 * var(--sc-spacing-sm) - 10px) calc(var(--sc-spacing-md) - 10px);
+      padding: 0;
+      border: 0;
+      border-radius: var(--sc-radius-md);
+      background: transparent;
+      color: var(--sc-color-border-strong);
+    }
+    /* Inset, so the popup's clipped top edge does not cut the ring. */
+    .sc-dialog__popup[data-variant='sheet'] > .sc-dialog__handle:focus-visible {
+      outline-offset: calc(-1 * var(--sc-border-width-focus));
+    }
+    .sc-dialog__popup[data-variant='sheet'] > .sc-dialog__handle::before {
+      content: '';
       inline-size: 36px;
       block-size: 4px;
-      margin-block: calc(-1 * var(--sc-spacing-sm)) var(--sc-spacing-md);
       border-radius: var(--sc-radius-full);
-      background: var(--sc-color-border-strong);
+      background: currentColor;
+    }
+    /* Swipe to dismiss (sheetSwipe.ts): the page never pans under the sheet, while `Dialog.Body` and any other
+       scroll container inside keep scrolling, because touch-action resets at a scroll container. The drag
+       moves the sheet with `transform`, which adds to the `translate` the exit transition animates. */
+    .sc-dialog__popup[data-variant='sheet'][data-swipe-dismiss] {
+      touch-action: none;
+    }
+    .sc-dialog__popup[data-variant='sheet'][data-swipe-dismiss] > .sc-dialog__handle {
+      cursor: grab;
+    }
+    .sc-dialog__popup[data-variant='sheet'][data-swiping] {
+      cursor: grabbing;
+      user-select: none;
+      transition: none;
     }
     .sc-dialog__popup[data-variant='sheet'][data-starting-style],
     .sc-dialog__popup[data-variant='sheet'][data-ending-style] {
@@ -1099,6 +1130,17 @@
       transition-duration: var(--sc-duration-fast);
     }
   }
+  /* Reduced motion: a docked sheet appears and goes without sliding, and a released swipe closes or snaps
+     back in place without the spring. */
+  @media (width < 640px) and (prefers-reduced-motion: reduce) {
+    .sc-dialog__popup[data-variant='sheet'] {
+      transition-duration: 0ms;
+    }
+    .sc-dialog__popup[data-variant='sheet'][data-starting-style],
+    .sc-dialog__popup[data-variant='sheet'][data-ending-style] {
+      translate: none;
+    }
+  }
   
   /* ---- tooltip.css ---- */
   /* ---- Tooltip --------------------------------------------------------------- */
@@ -2582,8 +2624,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);
   }
   

package/package.json

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