@scalewing/react 1.8.0 → 1.9.0

package/dist/styles.css

@@ -733,11 +733,11 @@ body {
   -webkit-backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
 }
 
-/* Backdrop blur makes a glass surface its own stacking context, so an open popup inside it would paint under the next surface. */
-.sw-card-glass:has(.sw-select-list, .sw-action-menu-list:not([hidden]), .sw-tooltip:not([hidden])),
-.sw-accordion:has(.sw-select-list, .sw-action-menu-list:not([hidden]), .sw-tooltip:not([hidden])) {
+/* Backdrop blur makes a glass surface its own stacking context, so it lifts while it holds an open popup (see stacking.ts). */
+.sw-card-glass:has(.sw-select-list, .sw-action-menu-list:not([hidden]), .sw-tooltip:not([hidden]), .sw-date-field-calendar),
+.sw-accordion:has(.sw-select-list, .sw-action-menu-list:not([hidden]), .sw-tooltip:not([hidden]), .sw-date-field-calendar) {
   position: relative;
-  z-index: 1;
+  z-index: 3;
 }
 
 .sw-card-outlined {
@@ -1296,7 +1296,15 @@ body {
   line-height: 20px;
 }
 
-.sw-date-field-input {
+.sw-date-field-control {
+  align-self: flex-start;
+  display: flex;
+  max-width: 100%;
+  min-width: 0;
+  position: relative;
+}
+
+.sw-date-field .sw-date-field-control > .sw-date-field-input {
   background: var(--sw-glass-fill);
   border: 1px solid var(--sw-color-border);
   border-radius: var(--sw-radius-sm);
@@ -1304,26 +1312,78 @@ body {
   color: var(--sw-color-text);
   font-family: var(--sw-font-sans);
   font-size: 17px;
+  font-variant-numeric: tabular-nums;
+  margin: 0;
+  max-width: 100%;
   min-height: var(--sw-control-md-min-height);
   min-width: 0;
-  padding-inline: var(--sw-control-md-padding-inline);
-  width: 100%;
+  padding-inline: var(--sw-control-md-padding-inline) var(--sw-control-md-min-height);
+  width: calc(12ch + var(--sw-control-md-padding-inline) + var(--sw-control-md-min-height));
+}
+
+.sw-date-field .sw-date-field-control > .sw-date-field-input::placeholder {
+  color: var(--sw-color-muted);
+  opacity: 1;
+}
+
+.sw-date-field .sw-date-field-control > .sw-date-field-input:focus {
+  box-shadow: none;
+  outline: none;
 }
 
-.sw-date-field-input:focus-visible {
+.sw-date-field .sw-date-field-control > .sw-date-field-input:focus-visible {
   outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
   outline-offset: var(--sw-focus-ring-offset);
 }
 
-.sw-date-field-input[aria-invalid='true'] {
+.sw-date-field .sw-date-field-control > .sw-date-field-input[aria-invalid='true'] {
   border-color: var(--sw-color-danger);
 }
 
-.sw-date-field-input:disabled {
+.sw-date-field .sw-date-field-control > .sw-date-field-input:disabled,
+.sw-date-field-button:disabled {
   cursor: not-allowed;
   opacity: var(--sw-disabled-opacity);
 }
 
+.sw-date-field-button {
+  align-items: center;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: var(--sw-radius-sm);
+  color: var(--sw-color-muted);
+  cursor: pointer;
+  display: flex;
+  inset-block: 0;
+  inset-inline-end: 0;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  width: var(--sw-control-md-min-height);
+}
+
+.sw-date-field-button:hover:not(:disabled),
+.sw-date-field-button[aria-expanded='true'] {
+  color: var(--sw-color-text);
+}
+
+.sw-date-field-glyph {
+  fill: none;
+  flex: none;
+  height: var(--sw-space-5);
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.75;
+  width: var(--sw-space-5);
+}
+
+[dir='rtl'] .sw-date-field-glyph-directional {
+  transform: scaleX(-1);
+}
+
 .sw-date-field-description,
 .sw-date-field-error {
   font-family: var(--sw-font-sans);
@@ -1334,12 +1394,154 @@ body {
 .sw-date-field-description { color: var(--sw-color-muted); }
 .sw-date-field-error { color: var(--sw-color-danger); }
 
+.sw-date-field-calendar {
+  background: var(--sw-glass-fill);
+  border: 1px solid var(--sw-glass-border);
+  border-radius: var(--sw-radius-md);
+  box-shadow: var(--sw-elevation-md), inset 0 1px 0 var(--sw-glass-specular);
+  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));
+  box-sizing: border-box;
+  color: var(--sw-color-text);
+  display: flex;
+  flex-direction: column;
+  font-family: var(--sw-font-sans);
+  gap: var(--sw-space-2);
+  height: auto;
+  inset: auto;
+  margin: 0;
+  max-width: calc(100vw - var(--sw-space-2) - var(--sw-space-2));
+  overflow: visible;
+  padding: var(--sw-space-3);
+  position: fixed;
+  width: max-content;
+  z-index: 10;
+}
+
+.sw-date-field-header {
+  align-items: center;
+  display: flex;
+  gap: var(--sw-space-1);
+  justify-content: space-between;
+}
+
+.sw-date-field-jump {
+  display: flex;
+  gap: var(--sw-space-1);
+  min-width: 0;
+}
+
+.sw-date-field-step {
+  align-items: center;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: var(--sw-radius-pill);
+  color: var(--sw-color-text);
+  cursor: pointer;
+  display: flex;
+  flex: none;
+  height: var(--sw-control-md-min-height);
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  width: var(--sw-control-md-min-height);
+}
+
+.sw-date-field-step[aria-disabled='true'] {
+  cursor: not-allowed;
+  opacity: var(--sw-disabled-opacity);
+}
+
+.sw-date-field-grid {
+  border-collapse: separate;
+  border-spacing: 0;
+  table-layout: fixed;
+}
+
+.sw-date-field-grid th {
+  color: var(--sw-color-muted);
+  font-size: 13px;
+  font-weight: normal;
+  line-height: 18px;
+  padding: 0 0 var(--sw-space-1);
+  text-align: center;
+}
+
+.sw-date-field-day {
+  border: 1px solid transparent;
+  border-radius: var(--sw-radius-pill);
+  box-sizing: border-box;
+  cursor: pointer;
+  font-size: 15px;
+  font-variant-numeric: tabular-nums;
+  height: var(--sw-control-md-min-height);
+  padding: 0;
+  text-align: center;
+  vertical-align: middle;
+  width: var(--sw-control-md-min-height);
+}
+
+.sw-date-field-day-outside {
+  color: var(--sw-color-muted);
+}
+
+.sw-date-field-step:hover:not([aria-disabled='true']),
+.sw-date-field-day:hover:not([aria-disabled='true']) {
+  background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+}
+
+.sw-date-field-day[aria-current='date'] {
+  border-color: var(--sw-color-accent);
+  color: var(--sw-color-accent);
+  font-weight: 600;
+}
+
+.sw-date-field-day[aria-selected='true'],
+.sw-date-field-day[aria-selected='true']:hover {
+  background: var(--sw-color-accent);
+  border-color: var(--sw-color-accent);
+  color: var(--sw-color-onAccent);
+  font-weight: 600;
+}
+
+.sw-date-field-day[aria-disabled='true'] {
+  cursor: not-allowed;
+  opacity: var(--sw-disabled-opacity);
+}
+
+.sw-date-field-button:focus,
+.sw-date-field-step:focus,
+.sw-date-field-day:focus {
+  outline: none;
+}
+
+.sw-date-field-button:focus-visible,
+.sw-date-field-step:focus-visible,
+.sw-date-field-day:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+.sw-date-field-footer {
+  display: flex;
+  gap: var(--sw-space-1);
+  justify-content: flex-end;
+}
+
 @media (prefers-reduced-transparency: reduce) {
-  .sw-date-field-input { background: var(--sw-color-surface); }
+  .sw-date-field .sw-date-field-control > .sw-date-field-input { background: var(--sw-color-surface); }
 }
 
 @media (forced-colors: active) {
-  .sw-date-field-input[aria-invalid='true'] { border-color: CanvasText; }
+  .sw-date-field .sw-date-field-control > .sw-date-field-input[aria-invalid='true'] { border-color: CanvasText; }
+  .sw-date-field-calendar { border-color: CanvasText; }
+  .sw-date-field-day[aria-current='date'] { border-color: CanvasText; }
+  .sw-date-field-day[aria-selected='true'] {
+    background: Highlight;
+    color: HighlightText;
+    forced-color-adjust: none;
+  }
 }
 
 .sw-bar-chart {
@@ -1434,7 +1636,7 @@ body {
 .sw-app-header-sticky {
   position: sticky;
   top: 0;
-  z-index: 2;
+  z-index: 4;
 }
 
 .sw-nav {
@@ -1513,18 +1715,27 @@ body {
   color: var(--sw-color-text);
 }
 
+/* A nested disclosure sits inside a larger surface, so its corners are smaller. */
+.sw-accordion-sm { border-radius: var(--sw-radius-md); }
+
 .sw-accordion-summary {
+  align-items: center;
+  box-sizing: border-box;
   cursor: pointer;
-  display: list-item;
+  display: flex;
+  gap: var(--sw-space-3);
+  list-style: none;
   min-height: var(--sw-control-md-min-height);
 }
 
-.sw-accordion-summary::-webkit-details-marker {
-  color: var(--sw-color-muted);
-}
+/* A nested header is an sm control, still a comfortable pointer and touch target. */
+.sw-accordion-sm > .sw-accordion-summary { min-height: var(--sw-control-sm-min-height); }
 
-.sw-accordion-summary::marker {
-  color: var(--sw-color-muted);
+.sw-accordion-heading {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-width: 0;
 }
 
 .sw-accordion-summary:focus-visible {
@@ -1532,6 +1743,35 @@ body {
   outline-offset: var(--sw-focus-ring-offset);
 }
 
+/* A token chevron replaces the user-agent triangle: it points to the inline end when closed and down when open. */
+.sw-accordion-summary::-webkit-details-marker { display: none; }
+
+.sw-accordion-marker {
+  border-bottom: 2px solid var(--sw-color-muted);
+  border-right: 2px solid var(--sw-color-muted);
+  box-sizing: border-box;
+  flex: none;
+  height: var(--sw-space-2);
+  margin-inline-end: var(--sw-space-1);
+  transform: rotate(-45deg);
+  transition: transform var(--sw-motion-default) var(--sw-motion-easing);
+  width: var(--sw-space-2);
+}
+
+.sw-accordion-marker:dir(rtl) { transform: rotate(135deg); }
+
+.sw-accordion[open] > .sw-accordion-summary .sw-accordion-marker {
+  transform: rotate(45deg);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sw-accordion-marker { transition: none; }
+}
+
+@media (forced-colors: active) {
+  .sw-accordion-marker { border-color: CanvasText; }
+}
+
 .sw-select {
   max-width: 100%;
   width: max-content;
@@ -1617,7 +1857,7 @@ body {
   padding: var(--sw-space-1);
   position: absolute;
   width: max-content;
-  z-index: 3;
+  z-index: 10;
 }
 
 .sw-select-option {
@@ -1733,6 +1973,74 @@ body {
   color: var(--sw-color-danger);
 }
 
+.sw-action-bar {
+  align-items: center;
+  background: var(--sw-glass-fill);
+  border: 1px solid var(--sw-glass-border);
+  border-radius: var(--sw-radius-lg);
+  box-shadow: inset 0 1px 0 var(--sw-glass-specular);
+  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));
+  box-sizing: border-box;
+  color: var(--sw-color-text);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2) var(--sw-space-4);
+  padding-block: var(--sw-space-3);
+  padding-left: max(var(--sw-space-4), env(safe-area-inset-left, 0px));
+  padding-right: max(var(--sw-space-4), env(safe-area-inset-right, 0px));
+}
+
+.sw-action-bar-status {
+  color: var(--sw-color-muted);
+  flex: 1 1 auto;
+  font-family: var(--sw-font-sans);
+  font-size: 13px;
+  line-height: 18px;
+  margin: 0;
+  min-width: 0;
+}
+
+/* With no status the live region stays in the page, so a first status is
+   still announced, but it takes no room in the bar. */
+.sw-action-bar-status:empty {
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  width: 1px;
+}
+
+.sw-action-bar-actions {
+  align-items: center;
+  display: flex;
+  flex: 0 1 auto;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2);
+  justify-content: flex-end;
+  margin-inline-start: auto;
+}
+
+@media not all and (min-width: 48rem) {
+  .sw-action-bar-status,
+  .sw-action-bar-actions { flex-basis: 100%; }
+  .sw-action-bar-actions > * { flex: 1 1 auto; }
+}
+
+.sw-action-bar-sticky {
+  bottom: calc(var(--sw-space-2) + env(safe-area-inset-bottom, 0px));
+  position: sticky;
+  z-index: 2;
+}
+
+@media not all and (min-width: 48rem) {
+  .sw-action-bar-sticky-below-md {
+    bottom: calc(var(--sw-space-2) + env(safe-area-inset-bottom, 0px));
+    position: sticky;
+    z-index: 2;
+  }
+}
+
 .sw-switch {
   align-items: center;
   cursor: pointer;
@@ -2486,8 +2794,62 @@ body {
   border-color: var(--sw-color-danger);
 }
 
+.sw-field-adorned {
+  background-color: var(--sw-glass-fill);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-sm);
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  padding-inline: var(--sw-control-md-padding-inline);
+  align-items: center;
+  box-sizing: border-box;
+  cursor: text;
+  display: flex;
+  gap: var(--sw-space-1);
+  min-height: var(--sw-control-md-min-height);
+}
+
+[data-theme] .sw-field-adorned > input {
+  align-self: stretch;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  flex: 1 1 auto;
+  min-height: 0;
+  min-width: 0;
+  padding-inline: 0;
+}
+
+[data-theme] .sw-field-adorned > input:focus-visible { outline: none; }
+
+.sw-field-adorned:focus-within {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+.sw-field-prefix,
+.sw-field-suffix {
+  color: var(--sw-color-muted);
+  flex: none;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.sw-field-xs .sw-field-adorned {
+  font-size: 13px;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+  min-height: var(--sw-control-xs-min-height);
+  padding-inline: var(--sw-control-xs-padding-inline);
+}
+
+.sw-field-invalid .sw-field-adorned { border-color: var(--sw-color-danger); }
+
 @media (forced-colors: active) {
-  [data-theme] .sw-field-invalid :is(input, select, textarea) { border-color: Mark; }
+  [data-theme] .sw-field-invalid :is(input, select, textarea),
+  .sw-field-invalid .sw-field-adorned { border-color: Mark; }
+  .sw-field-prefix, .sw-field-suffix { color: CanvasText; }
   .sw-field-error, .sw-field-required { color: Mark; }
 }
 
@@ -2650,9 +3012,13 @@ body {
   .sw-hide-below-md { display: none; }
 }
 
+.sw-border { border: 1px solid var(--sw-color-border); }
+.sw-border-dashed { border: 1px dashed var(--sw-color-border); }
+
 @media (prefers-reduced-transparency: reduce) {
   .sw-card-glass,
   .sw-app-header,
+  .sw-action-bar,
   .sw-badge-neutral,
   .sw-segmented,
   .sw-table-sticky thead th,
@@ -2663,6 +3029,7 @@ body {
   .sw-accordion,
   .sw-select-list,
   .sw-action-menu-list,
+  .sw-date-field-calendar,
   .sw-toast {
     background: var(--sw-color-surface);
     backdrop-filter: none;

package/package.json

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