@scalewing/react 1.16.0 → 1.18.0

package/dist/styles.css

@@ -1363,6 +1363,12 @@ body {
   outline-offset: calc(-1 * var(--sw-focus-ring-width));
 }
 
+.sw-table-wrap.sw-scroll-more-start { box-shadow: inset var(--sw-space-6) 0 var(--sw-space-5) calc(-1 * var(--sw-space-5)) color-mix(in srgb, var(--sw-color-text) 28%, transparent); }
+.sw-table-wrap.sw-scroll-more-end { box-shadow: inset calc(-1 * var(--sw-space-6)) 0 var(--sw-space-5) calc(-1 * var(--sw-space-5)) color-mix(in srgb, var(--sw-color-text) 28%, transparent); }
+.sw-table-wrap.sw-scroll-more-start:dir(rtl) { box-shadow: inset calc(-1 * var(--sw-space-6)) 0 var(--sw-space-5) calc(-1 * var(--sw-space-5)) color-mix(in srgb, var(--sw-color-text) 28%, transparent); }
+.sw-table-wrap.sw-scroll-more-end:dir(rtl) { box-shadow: inset var(--sw-space-6) 0 var(--sw-space-5) calc(-1 * var(--sw-space-5)) color-mix(in srgb, var(--sw-color-text) 28%, transparent); }
+.sw-table-wrap.sw-scroll-more-start.sw-scroll-more-end { box-shadow: inset var(--sw-space-6) 0 var(--sw-space-5) calc(-1 * var(--sw-space-5)) color-mix(in srgb, var(--sw-color-text) 28%, transparent), inset calc(-1 * var(--sw-space-6)) 0 var(--sw-space-5) calc(-1 * var(--sw-space-5)) color-mix(in srgb, var(--sw-color-text) 28%, transparent); }
+
 .sw-table {
   border-collapse: collapse;
   width: 100%;
@@ -1884,6 +1890,32 @@ body {
   max-width: min(var(--sw-dialog-max-lg), calc(100vw - var(--sw-space-8)));
 }
 
+@media not all and (min-width: 48rem) {
+  .sw-dialog-sheet-below-md {
+    border-radius: var(--sw-radius-lg) var(--sw-radius-lg) 0 0;
+    border-width: 1px 0 0;
+    margin: auto 0 0;
+    max-height: min(100vh - var(--sw-space-8), 100dvh - var(--sw-space-8));
+    max-width: none;
+    padding-bottom: calc(var(--sw-space-5) + env(safe-area-inset-bottom, 0px));
+    padding-left: max(var(--sw-space-5), env(safe-area-inset-left, 0px));
+    padding-right: max(var(--sw-space-5), env(safe-area-inset-right, 0px));
+    width: 100%;
+  }
+
+  .sw-dialog-sheet-below-md[open] {
+    animation: sw-dialog-sheet-in var(--sw-motion-default) var(--sw-motion-easing);
+  }
+}
+
+@keyframes sw-dialog-sheet-in {
+  from { translate: 0 100%; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sw-dialog-sheet-below-md[open] { animation: none; }
+}
+
 .sw-dialog::backdrop {
   background: color-mix(in srgb, var(--sw-color-text) 28%, transparent);
 }
@@ -1893,6 +1925,59 @@ body {
   outline-offset: var(--sw-focus-ring-offset);
 }
 
+.sw-dialog-header {
+  align-items: flex-start;
+  display: flex;
+  gap: var(--sw-space-2);
+}
+
+.sw-dialog-header > :first-child {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.sw-button.sw-dialog-close {
+  flex: none;
+  padding-inline: 0;
+  min-width: var(--sw-control-sm-min-height);
+    margin-block: calc((28px - var(--sw-control-sm-min-height)) / 2);
+    margin-inline-end: calc((var(--sw-space-4) - var(--sw-control-sm-min-height)) / 2);
+}
+
+@media (pointer: coarse) {
+  .sw-button.sw-dialog-close {
+    min-height: var(--sw-control-md-min-height);
+    min-width: var(--sw-control-md-min-height);
+    margin-block: calc((28px - var(--sw-control-md-min-height)) / 2);
+    margin-inline-end: calc((var(--sw-space-4) - var(--sw-control-md-min-height)) / 2);
+  }
+}
+
+/* Private control chrome: two strokes crossed in a space-4 square, in the
+   button's color; borders, so forced colors keep them. */
+.sw-dialog-close-glyph {
+  flex: none;
+  height: var(--sw-space-4);
+  position: relative;
+  width: var(--sw-space-4);
+}
+
+.sw-dialog-close-glyph::before,
+.sw-dialog-close-glyph::after {
+  border-top: 2px solid currentColor;
+  border-radius: 1px;
+  box-sizing: border-box;
+  content: '';
+  left: 0;
+  margin-top: -1px;
+  position: absolute;
+  top: 50%;
+  width: 100%;
+}
+
+.sw-dialog-close-glyph::before { transform: rotate(45deg); }
+.sw-dialog-close-glyph::after { transform: rotate(-45deg); }
+
 .sw-accordion {
   background: var(--sw-glass-fill);
   border: 1px solid var(--sw-glass-border);
@@ -2266,14 +2351,21 @@ body {
   padding-right: max(var(--sw-space-4), env(safe-area-inset-right, 0px));
 }
 
+/* A Badge and a short line sit on one row a small gap apart; a line that
+   does not fit beside the badge wraps under it. */
 .sw-action-bar-status {
+  align-items: center;
   color: var(--sw-color-muted);
+  column-gap: var(--sw-space-2);
+  display: flex;
   flex: 1 1 auto;
+  flex-wrap: wrap;
   font-family: var(--sw-font-sans);
   font-size: 13px;
   line-height: 18px;
   margin: 0;
   min-width: 0;
+  row-gap: var(--sw-space-1);
 }
 
 /* With no status the live region stays in the page, so a first status is
@@ -2668,8 +2760,26 @@ body {
   outline-offset: var(--sw-focus-ring-offset);
 }
 
+.sw-tabs-sticky {
+  background: color-mix(in srgb, var(--sw-color-background) 90%, transparent);
+  backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
+  -webkit-backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
+  position: sticky;
+  top: env(safe-area-inset-top, 0px);
+  z-index: 4;
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .sw-tabs-sticky {
+    background: var(--sw-color-background);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+}
+
 @media (forced-colors: active) {
   .sw-tab-selected { border-bottom-color: Highlight; color: Highlight; }
+  .sw-tabs-sticky { background: Canvas; backdrop-filter: none; -webkit-backdrop-filter: none; }
 }
 
 .sw-filter-chips {
@@ -2854,6 +2964,33 @@ body {
   outline-offset: calc(-1 * var(--sw-focus-ring-width));
 }
 
+.sw-denomination-scroll.sw-scroll-more-start { box-shadow: inset var(--sw-space-6) 0 var(--sw-space-5) calc(-1 * var(--sw-space-5)) color-mix(in srgb, var(--sw-color-text) 28%, transparent); }
+.sw-denomination-scroll.sw-scroll-more-end { box-shadow: inset calc(-1 * var(--sw-space-6)) 0 var(--sw-space-5) calc(-1 * var(--sw-space-5)) color-mix(in srgb, var(--sw-color-text) 28%, transparent); }
+.sw-denomination-scroll.sw-scroll-more-start:dir(rtl) { box-shadow: inset calc(-1 * var(--sw-space-6)) 0 var(--sw-space-5) calc(-1 * var(--sw-space-5)) color-mix(in srgb, var(--sw-color-text) 28%, transparent); }
+.sw-denomination-scroll.sw-scroll-more-end:dir(rtl) { box-shadow: inset var(--sw-space-6) 0 var(--sw-space-5) calc(-1 * var(--sw-space-5)) color-mix(in srgb, var(--sw-color-text) 28%, transparent); }
+.sw-denomination-scroll.sw-scroll-more-start.sw-scroll-more-end { box-shadow: inset var(--sw-space-6) 0 var(--sw-space-5) calc(-1 * var(--sw-space-5)) color-mix(in srgb, var(--sw-color-text) 28%, transparent), inset calc(-1 * var(--sw-space-6)) 0 var(--sw-space-5) calc(-1 * var(--sw-space-5)) color-mix(in srgb, var(--sw-color-text) 28%, transparent); }
+
+.sw-denomination-scroll.sw-scroll-more-start .sw-denomination-strip .sw-denomination-label::after,
+.sw-denomination-scroll.sw-scroll-more-start .sw-denomination-strip thead .sw-denomination-corner:first-child::after {
+  background: linear-gradient(to right, color-mix(in srgb, var(--sw-color-text) 28%, transparent), transparent);
+  content: '';
+  inset-block: 0;
+  inset-inline-start: 100%;
+  pointer-events: none;
+  position: absolute;
+  width: var(--sw-space-5);
+}
+
+.sw-denomination-scroll.sw-scroll-more-start:dir(rtl) .sw-denomination-strip .sw-denomination-label::after,
+.sw-denomination-scroll.sw-scroll-more-start:dir(rtl) .sw-denomination-strip thead .sw-denomination-corner:first-child::after {
+  background: linear-gradient(to left, color-mix(in srgb, var(--sw-color-text) 28%, transparent), transparent);
+}
+
+@media (forced-colors: active) {
+  .sw-denomination-scroll.sw-scroll-more-start .sw-denomination-strip .sw-denomination-label::after,
+  .sw-denomination-scroll.sw-scroll-more-start .sw-denomination-strip thead .sw-denomination-corner:first-child::after { display: none; }
+}
+
 .sw-denomination-strip {
   border-collapse: collapse;
   width: 100%;
@@ -3068,6 +3205,27 @@ body {
   .sw-denomination-tile-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 }
 
+.sw-denomination-cell-tone-accent { --sw-denomination-cell-tone: var(--sw-color-accent); }
+.sw-denomination-cell-tone-success { --sw-denomination-cell-tone: var(--sw-color-success); }
+.sw-denomination-cell-tone-danger { --sw-denomination-cell-tone: var(--sw-color-danger); }
+.sw-denomination-cell-tone-warning { --sw-denomination-cell-tone: var(--sw-color-warning); }
+
+.sw-denomination-grid .sw-denomination-cell.sw-denomination-cell-toned,
+.sw-denomination-grid .sw-denomination-cell-toned .sw-denomination-cell {
+  color: var(--sw-denomination-cell-tone);
+  opacity: 1;
+}
+
+.sw-denomination-tile.sw-denomination-cell-toned {
+  border-color: var(--sw-denomination-cell-tone);
+  box-shadow: inset 0 0 0 1px var(--sw-denomination-cell-tone);
+}
+
+@media (forced-colors: active) {
+  .sw-denomination-grid .sw-denomination-cell-zero.sw-denomination-cell-toned,
+  .sw-denomination-grid .sw-denomination-cell-toned .sw-denomination-cell-zero { color: GrayText; }
+}
+
 @media (forced-colors: active) {
   .sw-denomination-label { border-inline-start-color: CanvasText; color: CanvasText; }
   .sw-denomination-strip .sw-denomination-label::before { background: CanvasText; forced-color-adjust: none; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalewing/react",
-  "version": "1.16.0",
+  "version": "1.18.0",
   "description": "Scalewing DOM components and package-owned CSS utilities.",
   "type": "module",
   "license": "MIT",