@scalewing/react 0.6.0 → 0.7.0

package/dist/styles.css

@@ -700,6 +700,7 @@ body {
   .sw-dialog,
   .sw-accordion,
   .sw-select-list,
+  .sw-action-menu-list,
   .sw-toast {
     background: var(--sw-color-surface);
     backdrop-filter: none;
@@ -765,6 +766,247 @@ body {
 .sw-button-sm { min-height: 32px; padding-inline: 12px; }
 .sw-button-md { min-height: 44px; padding-inline: 16px; }
 
+.sw-checkbox {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-1);
+  max-width: 100%;
+}
+
+.sw-checkbox-label {
+  align-items: center;
+  cursor: pointer;
+  display: inline-flex;
+  gap: var(--sw-space-2);
+  max-width: 100%;
+  min-height: var(--sw-control-md-min-height);
+  width: max-content;
+}
+
+.sw-checkbox-control {
+  align-items: center;
+  display: inline-flex;
+  flex: 0 0 var(--sw-space-5);
+  height: var(--sw-space-5);
+  position: relative;
+}
+
+.sw-checkbox-input {
+  cursor: inherit;
+  height: 100%;
+  inset: 0;
+  margin: 0;
+  opacity: 0;
+  position: absolute;
+  width: 100%;
+}
+
+.sw-checkbox-mark {
+  background: var(--sw-glass-fill);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-sm);
+  box-sizing: border-box;
+  height: var(--sw-space-5);
+  pointer-events: none;
+  position: relative;
+  width: var(--sw-space-5);
+}
+
+.sw-checkbox-mark::after {
+  border-bottom: 2px solid var(--sw-color-surface);
+  border-right: 2px solid var(--sw-color-surface);
+  content: '';
+  display: none;
+  height: var(--sw-space-2);
+  inset-block-start: var(--sw-space-1);
+  inset-inline-start: var(--sw-space-2);
+  position: absolute;
+  transform: rotate(45deg);
+  width: var(--sw-space-1);
+}
+
+.sw-checkbox-input:checked + .sw-checkbox-mark {
+  background: var(--sw-color-accent);
+  border-color: var(--sw-color-accent);
+}
+
+.sw-checkbox-input:checked + .sw-checkbox-mark::after { display: block; }
+
+.sw-checkbox-input:focus-visible + .sw-checkbox-mark {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+.sw-checkbox-input[aria-invalid='true'] + .sw-checkbox-mark {
+  border-color: var(--sw-color-danger);
+}
+
+.sw-checkbox-label:has(.sw-checkbox-input:disabled) {
+  cursor: not-allowed;
+  opacity: var(--sw-disabled-opacity);
+}
+
+.sw-checkbox-text {
+  color: var(--sw-color-text);
+  font-family: var(--sw-font-sans);
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 20px;
+  min-width: 0;
+}
+
+.sw-checkbox-description,
+.sw-checkbox-error {
+  font-family: var(--sw-font-sans);
+  font-size: 13px;
+  line-height: 18px;
+}
+
+.sw-checkbox-description { color: var(--sw-color-muted); }
+.sw-checkbox-error { color: var(--sw-color-danger); }
+
+@media (prefers-reduced-transparency: reduce) {
+  .sw-checkbox-mark { background: var(--sw-color-surface); }
+  .sw-checkbox-input:checked + .sw-checkbox-mark { background: var(--sw-color-accent); }
+}
+
+@media (forced-colors: active) {
+  .sw-checkbox-mark { background: Canvas; border-color: CanvasText; }
+  .sw-checkbox-input:checked + .sw-checkbox-mark { background: Highlight; border-color: Highlight; }
+  .sw-checkbox-input:checked + .sw-checkbox-mark::after { border-color: HighlightText; }
+  .sw-checkbox-input[aria-invalid='true'] + .sw-checkbox-mark { border-color: CanvasText; }
+}
+
+.sw-radio-group {
+  border: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-2);
+  margin: 0;
+  max-width: 100%;
+  min-width: 0;
+  padding: 0;
+}
+
+.sw-radio-group-legend {
+  color: var(--sw-color-text);
+  font-family: var(--sw-font-sans);
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 20px;
+  padding: 0;
+}
+
+.sw-radio-group-options {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-1);
+  min-width: 0;
+}
+
+.sw-radio-group-option {
+  align-items: center;
+  cursor: pointer;
+  display: inline-flex;
+  gap: var(--sw-space-2);
+  max-width: 100%;
+  min-height: var(--sw-control-md-min-height);
+  width: max-content;
+}
+
+.sw-radio-group-control {
+  align-items: center;
+  display: inline-flex;
+  flex: 0 0 var(--sw-space-5);
+  height: var(--sw-space-5);
+  position: relative;
+}
+
+.sw-radio-group-input {
+  cursor: inherit;
+  height: 100%;
+  inset: 0;
+  margin: 0;
+  opacity: 0;
+  position: absolute;
+  width: 100%;
+}
+
+.sw-radio-group-mark {
+  background: var(--sw-glass-fill);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-pill);
+  box-sizing: border-box;
+  height: var(--sw-space-5);
+  pointer-events: none;
+  position: relative;
+  width: var(--sw-space-5);
+}
+
+.sw-radio-group-mark::after {
+  background: var(--sw-color-surface);
+  border-radius: var(--sw-radius-pill);
+  content: '';
+  display: none;
+  height: var(--sw-space-2);
+  inset-block-start: calc((var(--sw-space-5) - var(--sw-space-2)) / 2);
+  inset-inline-start: calc((var(--sw-space-5) - var(--sw-space-2)) / 2);
+  position: absolute;
+  width: var(--sw-space-2);
+}
+
+.sw-radio-group-input:checked + .sw-radio-group-mark {
+  background: var(--sw-color-accent);
+  border-color: var(--sw-color-accent);
+}
+
+.sw-radio-group-input:checked + .sw-radio-group-mark::after { display: block; }
+
+.sw-radio-group-input:focus-visible + .sw-radio-group-mark {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+.sw-radio-group:has(.sw-radio-group-error) .sw-radio-group-mark {
+  border-color: var(--sw-color-danger);
+}
+
+.sw-radio-group-option:has(.sw-radio-group-input:disabled) {
+  cursor: not-allowed;
+  opacity: var(--sw-disabled-opacity);
+}
+
+.sw-radio-group-text {
+  color: var(--sw-color-text);
+  font-family: var(--sw-font-sans);
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 20px;
+  min-width: 0;
+}
+
+.sw-radio-group-description,
+.sw-radio-group-error {
+  font-family: var(--sw-font-sans);
+  font-size: 13px;
+  line-height: 18px;
+}
+
+.sw-radio-group-description { color: var(--sw-color-muted); }
+.sw-radio-group-error { color: var(--sw-color-danger); }
+
+@media (prefers-reduced-transparency: reduce) {
+  .sw-radio-group-mark { background: var(--sw-color-surface); }
+  .sw-radio-group-input:checked + .sw-radio-group-mark { background: var(--sw-color-accent); }
+}
+
+@media (forced-colors: active) {
+  .sw-radio-group-mark { background: Canvas; border-color: CanvasText; }
+  .sw-radio-group-input:checked + .sw-radio-group-mark { background: Highlight; border-color: Highlight; }
+  .sw-radio-group-input:checked + .sw-radio-group-mark::after { background: HighlightText; }
+  .sw-radio-group:has(.sw-radio-group-error) .sw-radio-group-mark { border-color: CanvasText; }
+}
+
 .sw-badge {
   align-items: center;
   border: 1px solid transparent;
@@ -927,6 +1169,69 @@ body {
   inset-inline-start: var(--sw-space-1);
 }
 
+.sw-date-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-1);
+  max-width: 100%;
+  min-width: 0;
+  width: max-content;
+}
+
+.sw-date-field-label {
+  color: var(--sw-color-text);
+  font-family: var(--sw-font-sans);
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 20px;
+}
+
+.sw-date-field-input {
+  background: var(--sw-glass-fill);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-sm);
+  box-sizing: border-box;
+  color: var(--sw-color-text);
+  font-family: var(--sw-font-sans);
+  font-size: 17px;
+  min-height: var(--sw-control-md-min-height);
+  min-width: 0;
+  padding-inline: var(--sw-control-md-padding-inline);
+  width: 100%;
+}
+
+.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'] {
+  border-color: var(--sw-color-danger);
+}
+
+.sw-date-field-input:disabled {
+  cursor: not-allowed;
+  opacity: var(--sw-disabled-opacity);
+}
+
+.sw-date-field-description,
+.sw-date-field-error {
+  font-family: var(--sw-font-sans);
+  font-size: 13px;
+  line-height: 18px;
+}
+
+.sw-date-field-description { color: var(--sw-color-muted); }
+.sw-date-field-error { color: var(--sw-color-danger); }
+
+@media (prefers-reduced-transparency: reduce) {
+  .sw-date-field-input { background: var(--sw-color-surface); }
+}
+
+@media (forced-colors: active) {
+  .sw-date-field-input[aria-invalid='true'] { border-color: CanvasText; }
+}
+
 .sw-bar-chart {
   display: grid;
   gap: var(--sw-space-2);
@@ -1231,6 +1536,435 @@ body {
   margin-top: var(--sw-space-1);
 }
 
+.sw-action-menu {
+  display: inline-flex;
+  position: relative;
+}
+
+.sw-action-menu-trigger {
+  appearance: none;
+  background: var(--sw-glass-fill);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-sm);
+  color: var(--sw-color-text);
+  cursor: pointer;
+  font: inherit;
+  min-height: var(--sw-control-xs-min-height);
+  padding-inline: var(--sw-control-xs-padding-inline);
+}
+
+.sw-action-menu-trigger:focus-visible,
+.sw-action-menu-item:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+.sw-action-menu-trigger:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.sw-action-menu-list {
+  background: var(--sw-glass-fill);
+  border: 1px solid var(--sw-glass-border);
+  border-radius: var(--sw-radius-sm);
+  box-shadow: var(--sw-elevation-sm), 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);
+  margin: 0;
+  max-height: var(--sw-select-max);
+  max-width: calc(100vw - var(--sw-space-2));
+  min-width: max-content;
+  overflow: auto;
+  padding: var(--sw-space-1);
+  position: fixed;
+  z-index: 10;
+}
+
+.sw-action-menu-list[hidden] {
+  display: none;
+}
+
+.sw-action-menu-item {
+  align-items: center;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: var(--sw-radius-sm);
+  color: inherit;
+  cursor: pointer;
+  display: flex;
+  font-family: var(--sw-font-sans);
+  font-size: 15px;
+  gap: var(--sw-space-2);
+  min-height: var(--sw-control-xs-min-height);
+  padding-inline: var(--sw-control-xs-padding-inline);
+  text-align: start;
+  width: 100%;
+}
+
+.sw-action-menu-item:hover,
+.sw-action-menu-item:focus-visible {
+  background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+}
+
+.sw-action-menu-item:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.sw-action-menu-item-danger {
+  color: var(--sw-color-danger);
+}
+
+.sw-switch {
+  align-items: center;
+  cursor: pointer;
+  display: inline-flex;
+  gap: var(--sw-space-2);
+  min-height: var(--sw-control-md-min-height);
+}
+
+.sw-switch-control {
+  align-items: center;
+  display: inline-flex;
+  flex: 0 0 var(--sw-space-8);
+  min-height: var(--sw-control-md-min-height);
+  position: relative;
+}
+
+.sw-switch-input {
+  cursor: inherit;
+  height: 100%;
+  inset: 0;
+  margin: 0;
+  opacity: 0;
+  position: absolute;
+  width: 100%;
+}
+
+.sw-switch-track {
+  background: var(--sw-color-border);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-pill);
+  box-sizing: border-box;
+  display: block;
+  height: var(--sw-space-5);
+  pointer-events: none;
+  position: relative;
+  width: var(--sw-space-8);
+}
+
+.sw-switch-thumb {
+  background: var(--sw-color-surface);
+  border-radius: var(--sw-radius-pill);
+  height: var(--sw-space-4);
+  inset-block-start: var(--sw-space-1);
+  inset-inline-start: var(--sw-space-1);
+  position: absolute;
+  transition: inset-inline-start var(--sw-motion-fast) var(--sw-motion-easing);
+  width: var(--sw-space-4);
+}
+
+.sw-switch-input:checked + .sw-switch-track {
+  background: var(--sw-color-accent);
+  border-color: var(--sw-color-accent);
+}
+
+.sw-switch-input:checked + .sw-switch-track .sw-switch-thumb {
+  inset-inline-start: calc(var(--sw-space-8) - var(--sw-space-4) - var(--sw-space-1));
+}
+
+.sw-switch-input:focus-visible + .sw-switch-track {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+.sw-switch:has(.sw-switch-input:disabled) {
+  cursor: not-allowed;
+  opacity: var(--sw-disabled-opacity);
+}
+
+.sw-switch-copy {
+  display: flex;
+  flex-direction: column;
+}
+
+.sw-switch-label {
+  color: var(--sw-color-text);
+  font-family: var(--sw-font-sans);
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 20px;
+}
+
+.sw-switch-description {
+  color: var(--sw-color-muted);
+  font-family: var(--sw-font-sans);
+  font-size: 13px;
+  line-height: 18px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sw-switch-thumb { transition: none; }
+}
+
+@media (forced-colors: active) {
+  .sw-switch-track { background: Canvas; border-color: CanvasText; }
+  .sw-switch-thumb { background: CanvasText; }
+  .sw-switch-input:checked + .sw-switch-track { background: Highlight; border-color: Highlight; }
+  .sw-switch-input:checked + .sw-switch-track .sw-switch-thumb { background: HighlightText; }
+}
+
+.sw-spinner {
+  align-items: center;
+  display: inline-flex;
+  flex: none;
+  justify-content: center;
+  vertical-align: middle;
+}
+
+.sw-spinner-sm { --sw-spinner-size: var(--sw-space-4); }
+.sw-spinner-md { --sw-spinner-size: var(--sw-space-6); }
+.sw-spinner-lg { --sw-spinner-size: var(--sw-space-8); }
+
+.sw-spinner-icon {
+  animation: sw-spinner-rotate var(--sw-motion-travel) var(--sw-motion-travel-easing) infinite;
+  border: var(--sw-focus-ring-width) solid var(--sw-color-border);
+  border-block-start-color: var(--sw-color-accent);
+  border-radius: var(--sw-radius-pill);
+  box-sizing: border-box;
+  display: block;
+  height: var(--sw-spinner-size);
+  width: var(--sw-spinner-size);
+}
+
+@keyframes sw-spinner-rotate {
+  to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sw-spinner-icon { animation: none; }
+}
+
+@media (forced-colors: active) {
+  .sw-spinner-icon { border-color: CanvasText; border-block-start-color: Highlight; }
+}
+
+.sw-progress {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-2);
+  max-width: 100%;
+  min-width: 0;
+  width: 100%;
+}
+
+.sw-progress-accent { --sw-progress-color: var(--sw-color-accent); }
+.sw-progress-success { --sw-progress-color: var(--sw-color-success); }
+.sw-progress-danger { --sw-progress-color: var(--sw-color-danger); }
+
+.sw-progress-heading {
+  align-items: baseline;
+  display: flex;
+  gap: var(--sw-space-2);
+  justify-content: space-between;
+  min-width: 0;
+}
+
+.sw-progress-label {
+  color: var(--sw-color-text);
+  font-family: var(--sw-font-sans);
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 20px;
+  min-width: 0;
+}
+
+.sw-progress-count {
+  color: var(--sw-color-muted);
+  flex: none;
+  font-family: var(--sw-font-sans);
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+  line-height: 18px;
+}
+
+.sw-progress-bar {
+  appearance: none;
+  background: var(--sw-color-border);
+  border: 0;
+  border-radius: var(--sw-radius-pill);
+  display: block;
+  height: var(--sw-space-2);
+  overflow: hidden;
+  width: 100%;
+}
+
+.sw-progress-bar::-webkit-progress-bar { background: var(--sw-color-border); }
+.sw-progress-bar::-webkit-progress-value { background: var(--sw-progress-color); }
+.sw-progress-bar::-moz-progress-bar { background: var(--sw-progress-color); }
+
+@media (forced-colors: active) {
+  .sw-progress-bar { background: CanvasText; forced-color-adjust: auto; }
+  .sw-progress-bar::-webkit-progress-bar { background: Canvas; }
+  .sw-progress-bar::-webkit-progress-value { background: Highlight; }
+  .sw-progress-bar::-moz-progress-bar { background: Highlight; }
+}
+
+.sw-tooltip-anchor {
+  display: inline-flex;
+  position: relative;
+}
+
+.sw-tooltip {
+  background: var(--sw-color-surface);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-sm);
+  box-shadow: var(--sw-elevation-sm);
+  color: var(--sw-color-text);
+  font-family: var(--sw-font-sans);
+  font-size: 13px;
+  line-height: 18px;
+  inset-block-start: calc(100% + var(--sw-space-1));
+  inset-inline-start: 0;
+  max-width: min(18rem, calc(100vw - 2 * var(--sw-space-3)));
+  padding: var(--sw-space-2);
+  position: absolute;
+  width: max-content;
+  z-index: 10;
+}
+
+.sw-tooltip[hidden] { display: none; }
+
+@media (forced-colors: active) {
+  .sw-tooltip { border-color: CanvasText; box-shadow: none; }
+}
+
+.sw-separator {
+  background: var(--sw-color-border);
+  border: 0;
+  flex: none;
+  margin: 0;
+}
+
+.sw-separator-horizontal {
+  height: 1px;
+  width: 100%;
+}
+
+.sw-separator-vertical {
+  align-self: stretch;
+  min-height: var(--sw-space-4);
+  width: 1px;
+}
+
+@media (forced-colors: active) {
+  .sw-separator { background: CanvasText; }
+}
+
+.sw-filter-chips {
+  border: 0;
+  margin: 0;
+  max-width: 100%;
+  min-width: 0;
+  padding: 0;
+}
+
+.sw-filter-chips-legend {
+  color: var(--sw-color-text);
+  font-family: var(--sw-font-sans);
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 20px;
+  padding: 0 0 var(--sw-space-2);
+}
+
+.sw-filter-chips-options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2);
+  min-width: 0;
+}
+
+.sw-filter-chip {
+  cursor: pointer;
+  display: inline-flex;
+  max-width: 100%;
+  position: relative;
+}
+
+.sw-filter-chip-input {
+  cursor: inherit;
+  height: 100%;
+  inset: 0;
+  margin: 0;
+  opacity: 0;
+  position: absolute;
+  width: 100%;
+}
+
+.sw-filter-chip-face {
+  align-items: center;
+  background: var(--sw-glass-fill);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-pill);
+  color: var(--sw-color-text);
+  display: inline-flex;
+  font-family: var(--sw-font-sans);
+  font-size: 15px;
+  line-height: 20px;
+  min-height: var(--sw-control-md-min-height);
+  min-width: 0;
+  overflow-wrap: anywhere;
+  padding: var(--sw-space-1) var(--sw-space-3);
+}
+
+.sw-filter-chip-input:checked + .sw-filter-chip-face {
+  background: var(--sw-color-accent);
+  border-color: var(--sw-color-accent);
+  color: var(--sw-color-onAccent);
+}
+
+.sw-filter-chip-input:focus-visible + .sw-filter-chip-face {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+.sw-filter-chip:has(.sw-filter-chip-input:disabled) {
+  cursor: not-allowed;
+  opacity: var(--sw-disabled-opacity);
+}
+
+@media (forced-colors: active) {
+  .sw-filter-chip-face { background: Canvas; border-color: CanvasText; color: CanvasText; }
+  .sw-filter-chip-input:checked + .sw-filter-chip-face { background: Highlight; border-color: Highlight; color: HighlightText; }
+  .sw-filter-chip-input:focus-visible + .sw-filter-chip-face { outline-color: Highlight; }
+}
+
+.sw-field-required { color: var(--sw-color-danger); }
+
+.sw-field-description,
+.sw-field-error {
+  font-family: var(--sw-font-sans);
+  font-size: 13px;
+  line-height: 18px;
+}
+
+.sw-field-description { color: var(--sw-color-muted); }
+.sw-field-error { color: var(--sw-color-danger); }
+
+[data-theme] .sw-field-invalid :is(input, select, textarea) {
+  border-color: var(--sw-color-danger);
+}
+
+@media (forced-colors: active) {
+  [data-theme] .sw-field-invalid :is(input, select, textarea) { border-color: Mark; }
+  .sw-field-error, .sw-field-required { color: Mark; }
+}
+
 .sw-split {
   align-items: stretch;
   align-self: start;