@scalewing/react 1.37.0 → 1.39.0

package/dist/styles.css

@@ -1833,6 +1833,15 @@ body {
   .sw-table-row-sub > th[scope='row']::after { border-color: CanvasText; }
 }
 
+.sw-table .sw-table-row-total > :is(th, td) {
+  border-top: 2px solid var(--sw-color-border);
+  font-weight: 600;
+}
+
+@media (forced-colors: active) {
+  .sw-table .sw-table-row-total > :is(th, td) { border-top-color: CanvasText; }
+}
+
 .sw-table tfoot :is(th, td) {
   font-weight: 600;
   position: relative;
@@ -1868,6 +1877,121 @@ body {
   overflow: visible;
 }
 
+.sw-table-bounded {
+  --sw-table-cell-pad: var(--sw-space-2);
+  --sw-table-head-block: 0px;
+  --sw-table-foot-rows: 0;
+  max-height: calc((var(--sw-table-max-rows) + var(--sw-table-foot-rows)) * (25px + 2 * var(--sw-table-cell-pad) + 1px) + var(--sw-table-head-block));
+}
+
+.sw-table-bounded:has(> .sw-table-compact) {
+  --sw-table-cell-pad: var(--sw-space-1);
+}
+
+.sw-table-bounded:has(> .sw-table > thead) {
+  --sw-table-head-block: calc(18px + 2 * var(--sw-table-cell-pad));
+}
+
+.sw-table-bounded:has(> .sw-table > thead .sw-table-sort) {
+  --sw-table-head-block: calc(max(18px, var(--sw-control-xs-min-height)) + 2 * var(--sw-table-cell-pad));
+}
+
+@media (pointer: coarse) {
+  .sw-table-bounded:has(> .sw-table > thead .sw-table-sort) {
+    --sw-table-head-block: calc(max(18px, var(--sw-control-md-min-height)) + 2 * var(--sw-table-cell-pad));
+  }
+}
+
+.sw-table-bounded:has(> .sw-table > tfoot) {
+  --sw-table-foot-rows: 1;
+}
+
+@media print {
+  .sw-table-bounded { max-height: none; }
+}
+
+.sw-table-bounded.sw-scroll-more-top > .sw-table-sticky > thead > tr:last-child > :is(th, td)::before {
+  background: linear-gradient(to bottom, color-mix(in srgb, var(--sw-color-text) 28%, transparent), transparent);
+  border-bottom: 0;
+  border-top: 1px solid var(--sw-color-border);
+  box-sizing: border-box;
+  height: var(--sw-space-5);
+  inset-block-end: auto;
+  inset-block-start: calc(100% - 1px);
+}
+
+.sw-table-bounded.sw-scroll-more-bottom > .sw-table > .sw-table-footer-sticky > tr:first-child > :is(th, td)::before {
+  background: linear-gradient(to top, color-mix(in srgb, var(--sw-color-text) 28%, transparent), transparent);
+  border-bottom: 2px solid var(--sw-color-border);
+  border-top: 0;
+  box-sizing: border-box;
+  height: var(--sw-space-5);
+  inset-block-end: calc(100% - 1px);
+  inset-block-start: auto;
+}
+
+.sw-table-bounded.sw-scroll-more-top:not(:has(> .sw-table > thead)),
+.sw-table-bounded.sw-scroll-more-bottom:not(:has(> .sw-table > .sw-table-footer-sticky)) {
+  background-repeat: no-repeat;
+  background-size: 100% var(--sw-space-5);
+}
+
+.sw-table-bounded.sw-scroll-more-top:not(:has(> .sw-table > thead)) {
+  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--sw-color-text) 28%, transparent), transparent);
+  background-position: top;
+}
+
+.sw-table-bounded.sw-scroll-more-bottom:not(:has(> .sw-table > .sw-table-footer-sticky)) {
+  background-image: linear-gradient(to top, color-mix(in srgb, var(--sw-color-text) 28%, transparent), transparent);
+  background-position: bottom;
+}
+
+.sw-table-bounded.sw-scroll-more-top.sw-scroll-more-bottom:not(:has(> .sw-table > thead)):not(:has(> .sw-table > .sw-table-footer-sticky)) {
+  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--sw-color-text) 28%, transparent), transparent), linear-gradient(to top, color-mix(in srgb, var(--sw-color-text) 28%, transparent), transparent);
+  background-position: top, bottom;
+}
+
+@media (forced-colors: active) {
+  .sw-table-bounded.sw-scroll-more-top > .sw-table-sticky > thead > tr:last-child > :is(th, td)::before,
+  .sw-table-bounded.sw-scroll-more-bottom > .sw-table > .sw-table-footer-sticky > tr:first-child > :is(th, td)::before { background: none; border-color: CanvasText; }
+  .sw-table-bounded.sw-scroll-more-top:not(:has(> .sw-table > thead)),
+  .sw-table-bounded.sw-scroll-more-bottom:not(:has(> .sw-table > .sw-table-footer-sticky)),
+  .sw-table-bounded.sw-scroll-more-top.sw-scroll-more-bottom:not(:has(> .sw-table > thead)):not(:has(> .sw-table > .sw-table-footer-sticky)) { background-image: none; }
+}
+
+.sw-table-bounded:focus-visible > .sw-table-sticky > thead > tr > :is(th, td),
+.sw-table-bounded:focus-visible > .sw-table > .sw-table-footer-sticky > tr > :is(th, td) {
+  box-shadow: var(--sw-table-ring-block, 0 0 transparent), var(--sw-table-ring-start, 0 0 transparent), var(--sw-table-ring-end, 0 0 transparent);
+}
+
+.sw-table-bounded:focus-visible > .sw-table-sticky > thead > tr:first-child > :is(th, td) {
+  --sw-table-ring-block: inset 0 var(--sw-focus-ring-width) 0 0 var(--sw-color-accent);
+}
+
+.sw-table-bounded:focus-visible > .sw-table > .sw-table-footer-sticky > tr:last-child > :is(th, td) {
+  --sw-table-ring-block: inset 0 calc(-1 * var(--sw-focus-ring-width)) 0 0 var(--sw-color-accent);
+}
+
+.sw-table-bounded:focus-visible > .sw-table-sticky > thead > tr > :first-child,
+.sw-table-bounded:focus-visible > .sw-table > .sw-table-footer-sticky > tr > :first-child {
+  --sw-table-ring-start: inset var(--sw-focus-ring-width) 0 0 0 var(--sw-color-accent);
+}
+
+.sw-table-bounded:focus-visible > .sw-table-sticky > thead > tr > :last-child,
+.sw-table-bounded:focus-visible > .sw-table > .sw-table-footer-sticky > tr > :last-child {
+  --sw-table-ring-end: inset calc(-1 * var(--sw-focus-ring-width)) 0 0 0 var(--sw-color-accent);
+}
+
+.sw-table-bounded:focus-visible > .sw-table-sticky > thead > tr > :first-child:dir(rtl),
+.sw-table-bounded:focus-visible > .sw-table > .sw-table-footer-sticky > tr > :first-child:dir(rtl) {
+  --sw-table-ring-start: inset calc(-1 * var(--sw-focus-ring-width)) 0 0 0 var(--sw-color-accent);
+}
+
+.sw-table-bounded:focus-visible > .sw-table-sticky > thead > tr > :last-child:dir(rtl),
+.sw-table-bounded:focus-visible > .sw-table > .sw-table-footer-sticky > tr > :last-child:dir(rtl) {
+  --sw-table-ring-end: inset var(--sw-focus-ring-width) 0 0 0 var(--sw-color-accent);
+}
+
 .sw-table-row-press {
   cursor: pointer;
 }
@@ -2405,6 +2529,324 @@ body {
   .sw-bar-chart-fill { background: CanvasText; }
 }
 
+.sw-data-bar {
+  display: block;
+  height: var(--sw-space-4);
+  min-width: var(--sw-space-6);
+  position: relative;
+  width: 100%;
+}
+
+.sw-data-bar-fill {
+  border-radius: calc(var(--sw-radius-sm) / 2);
+  inset-block: 0;
+  inset-inline-start: calc(var(--sw-data-bar-start, 0) * 100%);
+  position: absolute;
+  width: calc(var(--sw-data-bar-size, 0) * 100%);
+}
+
+.sw-data-bar-neutral > .sw-data-bar-fill { background: color-mix(in srgb, var(--sw-color-muted) 65%, var(--sw-color-surface)); }
+.sw-data-bar-success > .sw-data-bar-fill { background: color-mix(in srgb, var(--sw-color-success) 55%, var(--sw-color-surface)); }
+.sw-data-bar-muted > .sw-data-bar-fill { background: color-mix(in srgb, var(--sw-color-muted) 35%, var(--sw-color-surface)); }
+.sw-data-bar-strong > .sw-data-bar-fill { background: color-mix(in srgb, var(--sw-color-text) 85%, var(--sw-color-surface)); }
+.sw-data-bar-accent > .sw-data-bar-fill { background: var(--sw-color-accent); }
+.sw-data-bar-danger > .sw-data-bar-fill { background: color-mix(in srgb, var(--sw-color-danger) 40%, var(--sw-color-surface)); }
+
+.sw-data-bar-diverging::before {
+  background: var(--sw-color-border);
+  content: '';
+  inset-block: calc(-1 * var(--sw-space-1));
+  inset-inline-start: calc(var(--sw-data-bar-zero, 0) * 100%);
+  /* Centred on zero, mirrored right to left. */
+  margin-inline-start: -0.5px;
+  position: absolute;
+  width: 1px;
+}
+
+.sw-data-bar-zero-start > .sw-data-bar-fill {
+  border-end-start-radius: 0;
+  border-start-start-radius: 0;
+}
+
+.sw-data-bar-zero-end > .sw-data-bar-fill {
+  border-end-end-radius: 0;
+  border-start-end-radius: 0;
+}
+
+@media (forced-colors: active) {
+  .sw-data-bar > .sw-data-bar-fill,
+  .sw-data-bar-diverging::before { background: CanvasText; }
+}
+
+.sw-chart-tone-green { --sw-chart-fill: color-mix(in srgb, var(--sw-categorical-green) 72%, var(--sw-color-surface)); --sw-chart-ink: color-mix(in srgb, var(--sw-categorical-green) 30%, var(--sw-color-text)); }
+.sw-chart-tone-blue { --sw-chart-fill: color-mix(in srgb, var(--sw-categorical-blue) 72%, var(--sw-color-surface)); --sw-chart-ink: color-mix(in srgb, var(--sw-categorical-blue) 30%, var(--sw-color-text)); }
+.sw-chart-tone-orange { --sw-chart-fill: color-mix(in srgb, var(--sw-categorical-orange) 72%, var(--sw-color-surface)); --sw-chart-ink: color-mix(in srgb, var(--sw-categorical-orange) 30%, var(--sw-color-text)); }
+.sw-chart-tone-purple { --sw-chart-fill: color-mix(in srgb, var(--sw-categorical-purple) 72%, var(--sw-color-surface)); --sw-chart-ink: color-mix(in srgb, var(--sw-categorical-purple) 30%, var(--sw-color-text)); }
+.sw-chart-tone-teal { --sw-chart-fill: color-mix(in srgb, var(--sw-categorical-teal) 72%, var(--sw-color-surface)); --sw-chart-ink: color-mix(in srgb, var(--sw-categorical-teal) 30%, var(--sw-color-text)); }
+.sw-chart-tone-rose { --sw-chart-fill: color-mix(in srgb, var(--sw-categorical-rose) 72%, var(--sw-color-surface)); --sw-chart-ink: color-mix(in srgb, var(--sw-categorical-rose) 30%, var(--sw-color-text)); }
+.sw-chart-tone-neutral { --sw-chart-fill: color-mix(in srgb, var(--sw-color-muted) 65%, var(--sw-color-surface)); --sw-chart-stroke: var(--sw-color-muted); --sw-chart-ink: var(--sw-color-muted); }
+.sw-chart-tone-success { --sw-chart-fill: color-mix(in srgb, var(--sw-color-success) 55%, var(--sw-color-surface)); --sw-chart-stroke: var(--sw-color-success); --sw-chart-ink: color-mix(in srgb, var(--sw-color-success) 50%, var(--sw-color-text)); }
+.sw-chart-tone-muted { --sw-chart-fill: color-mix(in srgb, var(--sw-color-muted) 35%, var(--sw-color-surface)); }
+.sw-chart-tone-strong { --sw-chart-fill: color-mix(in srgb, var(--sw-color-text) 85%, var(--sw-color-surface)); }
+.sw-chart-tone-accent { --sw-chart-fill: var(--sw-color-accent); --sw-chart-stroke: var(--sw-color-accent); --sw-chart-ink: color-mix(in srgb, var(--sw-color-accent) 50%, var(--sw-color-text)); }
+.sw-chart-tone-danger { --sw-chart-fill: color-mix(in srgb, var(--sw-color-danger) 40%, var(--sw-color-surface)); --sw-chart-stroke: var(--sw-color-danger); --sw-chart-ink: color-mix(in srgb, var(--sw-color-danger) 50%, var(--sw-color-text)); }
+.sw-chart-tone-warning { --sw-chart-stroke: var(--sw-color-warning); --sw-chart-ink: color-mix(in srgb, var(--sw-color-warning) 50%, var(--sw-color-text)); }
+
+.sw-chart-legend {
+  color: var(--sw-color-text);
+  column-gap: var(--sw-space-5);
+  display: flex;
+  flex-wrap: wrap;
+  font-family: var(--sw-font-sans);
+  font-size: 13px;
+  font-weight: 400;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  row-gap: var(--sw-space-2);
+}
+
+.sw-chart-legend-item {
+  align-items: flex-start;
+  display: inline-flex;
+  gap: var(--sw-space-2);
+  min-width: 0;
+}
+
+.sw-chart-legend-swatch {
+  display: block;
+  flex: none;
+  /* Centred on the first line of the words, however many lines they wrap to. */
+  margin-block-start: calc((18px - var(--sw-space-3)) / 2);
+}
+
+.sw-chart-legend-line {
+  margin-block-start: calc((18px - 2px) / 2);
+}
+
+.sw-chart-legend-bar {
+  background: var(--sw-chart-fill);
+  border-radius: calc(var(--sw-radius-sm) / 4);
+  height: var(--sw-space-3);
+  width: var(--sw-space-3);
+}
+
+.sw-chart-legend-line {
+  background: var(--sw-chart-stroke);
+  border-radius: var(--sw-radius-pill);
+  height: 2px;
+  width: var(--sw-space-4);
+}
+
+.sw-chart-legend-marker {
+  background: var(--sw-chart-stroke);
+  clip-path: polygon(0 0, 100% 0, 50% 100%);
+  height: var(--sw-space-3);
+  width: var(--sw-space-3);
+}
+
+.sw-chart-legend-box {
+  border: 1px dashed var(--sw-chart-stroke);
+  border-radius: calc(var(--sw-radius-sm) / 2);
+  box-sizing: border-box;
+  height: var(--sw-space-3);
+  width: var(--sw-space-4);
+}
+
+@media (forced-colors: active) {
+  .sw-chart-legend-bar,
+  .sw-chart-legend-line,
+  .sw-chart-legend-marker { background: CanvasText; }
+  .sw-chart-legend-box { border-color: CanvasText; }
+}
+
+.sw-chart {
+  display: grid;
+  gap: var(--sw-space-2);
+  min-width: 0;
+}
+
+.sw-chart-svg {
+  display: block;
+  font-family: var(--sw-font-sans);
+  font-size: 13px;
+  height: auto;
+  letter-spacing: -0.08px;
+  max-width: 100%;
+  overflow: visible;
+  width: 100%;
+}
+
+.sw-chart-tick,
+.sw-chart-category {
+  fill: var(--sw-color-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.sw-chart-tick-line { fill: var(--sw-chart-ink); }
+
+.sw-chart-grid {
+  stroke: var(--sw-color-border);
+  stroke-width: 1;
+}
+
+.sw-chart-zero {
+  stroke: var(--sw-color-muted);
+  stroke-width: 1;
+}
+
+.sw-chart-highlight {
+  fill: none;
+  stroke: var(--sw-chart-stroke);
+  stroke-dasharray: 3 3;
+  stroke-width: 1;
+}
+
+.sw-chart-line {
+  fill: none;
+  stroke: var(--sw-chart-stroke);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2;
+}
+
+.sw-chart-dot { fill: var(--sw-chart-stroke); }
+
+.sw-chart-end-label {
+  fill: var(--sw-chart-ink);
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+}
+
+.sw-chart-leader {
+  stroke: var(--sw-chart-ink, var(--sw-color-text));
+  stroke-dasharray: 2 2;
+  stroke-width: 1;
+}
+
+.sw-chart-callout-text {
+  fill: var(--sw-chart-ink, var(--sw-color-text));
+  font-weight: 600;
+}
+
+.sw-chart-column { fill: var(--sw-chart-fill); }
+
+.sw-chart-callouts {
+  display: grid;
+  font-family: var(--sw-font-sans);
+  font-size: 13px;
+  gap: var(--sw-space-1);
+  letter-spacing: -0.08px;
+  line-height: 18px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.sw-chart-callout {
+  align-items: flex-start;
+  color: var(--sw-chart-ink, var(--sw-color-text));
+  display: flex;
+  font-weight: 600;
+  gap: var(--sw-space-2);
+}
+
+.sw-chart-callout-dot {
+  background: var(--sw-chart-fill, currentColor);
+  border-radius: var(--sw-radius-pill);
+  flex: none;
+  height: var(--sw-space-2);
+  margin-block-start: calc((18px - var(--sw-space-2)) / 2);
+  width: var(--sw-space-2);
+}
+
+@media (forced-colors: active) {
+  .sw-chart-column { fill: CanvasText; stroke: Canvas; }
+  .sw-chart-grid { stroke: GrayText; }
+  .sw-chart-zero,
+  .sw-chart-highlight,
+  .sw-chart-leader { stroke: CanvasText; }
+  .sw-chart-line { stroke: Highlight; }
+  .sw-chart-dot,
+  .sw-chart-end-label { fill: Highlight; }
+  .sw-chart-tick,
+  .sw-chart-category,
+  .sw-chart-callout-text { fill: CanvasText; }
+  .sw-chart-callout { color: CanvasText; }
+  .sw-chart-callout-dot { background: CanvasText; }
+}
+
+.sw-chart-area {
+  fill: color-mix(in srgb, var(--sw-chart-stroke) 12%, transparent);
+}
+
+.sw-chart-marker { fill: var(--sw-chart-stroke); }
+
+.sw-chart-marker-label {
+  fill: var(--sw-chart-ink);
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+}
+
+@media (forced-colors: active) {
+  .sw-chart-area { fill: none; }
+  .sw-chart-marker,
+  .sw-chart-marker-label { fill: CanvasText; }
+}
+
+.sw-pagination {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2) var(--sw-space-3);
+}
+
+.sw-pagination-range {
+  color: var(--sw-color-muted);
+  font-family: var(--sw-font-sans);
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+}
+
+.sw-pagination-steps {
+  display: flex;
+  gap: var(--sw-space-2);
+  margin-inline-start: auto;
+}
+
+.sw-button.sw-pagination-step {
+  flex: none;
+  padding-inline: 0;
+}
+
+.sw-button-xs.sw-pagination-step { min-width: var(--sw-control-xs-min-height); }
+.sw-button-sm.sw-pagination-step { min-width: var(--sw-control-sm-min-height); }
+.sw-button-md.sw-pagination-step { min-width: var(--sw-control-md-min-height); }
+
+@media (pointer: coarse) {
+  .sw-button.sw-pagination-step {
+    min-height: var(--sw-control-md-min-height);
+    min-width: var(--sw-control-md-min-height);
+  }
+}
+
+.sw-pagination-glyph {
+  border-bottom: 2px solid currentColor;
+  border-right: 2px solid currentColor;
+  box-sizing: border-box;
+  height: var(--sw-space-2);
+  width: var(--sw-space-2);
+  display: block;
+}
+
+.sw-pagination-glyph-previous { transform: translateX(25%) rotate(135deg); }
+.sw-pagination-glyph-next { transform: translateX(-25%) rotate(-45deg); }
+.sw-pagination-glyph:dir(rtl) { scale: -1 1; }
+
 .sw-app-header {
   background: var(--sw-glass-fill);
   border: 1px solid var(--sw-glass-border);

package/package.json

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