@scalewing/react 0.2.0 → 0.3.0

package/dist/styles.css

@@ -1,11 +1,11 @@
 /* Generated by @scalewing/tokens. Do not edit by hand. */
 :root,
 [data-theme='light'] {
-  --sw-color-background: #F5F5F7;
+  --sw-color-background: #FFFFFF;
   --sw-color-surface: #FFFFFF;
   --sw-color-text: #1D1D1F;
   --sw-color-muted: #6E6E73;
-  --sw-color-accent: #0B615E;
+  --sw-color-accent: #5B3DF5;
   --sw-color-onAccent: #FFFFFF;
   --sw-color-danger: #B42318;
   --sw-color-onDanger: #FFFFFF;
@@ -24,6 +24,8 @@
   --sw-radius-md: 16px;
   --sw-radius-lg: 24px;
   --sw-radius-pill: 999px;
+  --sw-control-xs-min-height: 28px;
+  --sw-control-xs-padding-inline: 10px;
   --sw-control-sm-min-height: 32px;
   --sw-control-sm-padding-inline: 12px;
   --sw-control-md-min-height: 44px;
@@ -32,13 +34,25 @@
   --sw-elevation-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.06);
   --sw-elevation-md: 0 16px 48px rgba(0, 0, 0, 0.1);
   --sw-disabled-opacity: 0.4;
+  --sw-quiet-opacity: 0.55;
   --sw-focus-ring-width: 2px;
   --sw-focus-ring-offset: 2px;
   --sw-container-max: 72rem;
+  --sw-dialog-max: 32rem;
+  --sw-select-max: 16rem;
+  --sw-split-min: 14rem;
+  --sw-split-size: 22rem;
+  --sw-split-max: 32rem;
+  --sw-motion-fast: 120ms;
+  --sw-motion-default: 180ms;
+  --sw-motion-travel: 1400ms;
+  --sw-motion-easing: cubic-bezier(0.2, 0, 0, 1);
+  --sw-motion-travel-easing: linear;
   --sw-glass-blur: 24px;
-  --sw-glass-saturate: 1.8;
-  --sw-glass-fill: rgba(255, 255, 255, 0.78);
-  --sw-glass-border: rgba(255, 255, 255, 0.62);
+  --sw-glass-saturate: 1;
+  --sw-glass-fill: rgba(255, 255, 255, 1);
+  --sw-glass-border: rgba(210, 210, 215, 1);
+  --sw-glass-specular: rgba(255, 255, 255, 0);
 }
 
 [data-theme='dark'] {
@@ -46,7 +60,7 @@
   --sw-color-surface: #1C1C1E;
   --sw-color-text: #F5F5F7;
   --sw-color-muted: #A1A1A6;
-  --sw-color-accent: #7EDAD6;
+  --sw-color-accent: #A78BFA;
   --sw-color-onAccent: #101214;
   --sw-color-danger: #F97066;
   --sw-color-onDanger: #101214;
@@ -65,6 +79,8 @@
   --sw-radius-md: 16px;
   --sw-radius-lg: 24px;
   --sw-radius-pill: 999px;
+  --sw-control-xs-min-height: 28px;
+  --sw-control-xs-padding-inline: 10px;
   --sw-control-sm-min-height: 32px;
   --sw-control-sm-padding-inline: 12px;
   --sw-control-md-min-height: 44px;
@@ -73,13 +89,390 @@
   --sw-elevation-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.06);
   --sw-elevation-md: 0 16px 48px rgba(0, 0, 0, 0.1);
   --sw-disabled-opacity: 0.4;
+  --sw-quiet-opacity: 0.55;
   --sw-focus-ring-width: 2px;
   --sw-focus-ring-offset: 2px;
   --sw-container-max: 72rem;
+  --sw-dialog-max: 32rem;
+  --sw-select-max: 16rem;
+  --sw-split-min: 14rem;
+  --sw-split-size: 22rem;
+  --sw-split-max: 32rem;
+  --sw-motion-fast: 120ms;
+  --sw-motion-default: 180ms;
+  --sw-motion-travel: 1400ms;
+  --sw-motion-easing: cubic-bezier(0.2, 0, 0, 1);
+  --sw-motion-travel-easing: linear;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(53, 48, 70, 0.72);
+  --sw-glass-border: rgba(220, 209, 253, 0.22);
+  --sw-glass-specular: rgba(237, 232, 254, 0.28);
+}
+
+[data-theme='light'][data-palette='cerulean'] {
+  --sw-color-accent: #0066CC;
+  --sw-color-onAccent: #FFFFFF;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1;
+  --sw-glass-fill: rgba(255, 255, 255, 1);
+  --sw-glass-border: rgba(210, 210, 215, 1);
+  --sw-glass-specular: rgba(255, 255, 255, 0);
+}
+
+[data-theme='dark'][data-palette='cerulean'] {
+  --sw-color-accent: #5AC8FA;
+  --sw-color-onAccent: #101214;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(39, 59, 70, 0.72);
+  --sw-glass-border: rgba(189, 233, 253, 0.22);
+  --sw-glass-specular: rgba(222, 244, 254, 0.28);
+}
+
+[data-theme='light'][data-palette='navy'] {
+  --sw-color-accent: #0A2540;
+  --sw-color-onAccent: #FFFFFF;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1;
+  --sw-glass-fill: rgba(255, 255, 255, 1);
+  --sw-glass-border: rgba(210, 210, 215, 1);
+  --sw-glass-specular: rgba(255, 255, 255, 0);
+}
+
+[data-theme='dark'][data-palette='navy'] {
+  --sw-color-accent: #7EB8FF;
+  --sw-color-onAccent: #101214;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(46, 56, 71, 0.72);
+  --sw-glass-border: rgba(203, 227, 255, 0.22);
+  --sw-glass-specular: rgba(229, 241, 255, 0.28);
+}
+
+[data-theme='light'][data-palette='sky'] {
+  --sw-color-accent: #0369A1;
+  --sw-color-onAccent: #FFFFFF;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1;
+  --sw-glass-fill: rgba(255, 255, 255, 1);
+  --sw-glass-border: rgba(210, 210, 215, 1);
+  --sw-glass-specular: rgba(255, 255, 255, 0);
+}
+
+[data-theme='dark'][data-palette='sky'] {
+  --sw-color-accent: #38BDF8;
+  --sw-color-onAccent: #101214;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(33, 57, 69, 0.72);
+  --sw-glass-border: rgba(175, 229, 252, 0.22);
+  --sw-glass-specular: rgba(215, 242, 254, 0.28);
+}
+
+[data-theme='light'][data-palette='ink'] {
+  --sw-color-accent: #1D1D1F;
+  --sw-color-onAccent: #FFFFFF;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1;
+  --sw-glass-fill: rgba(255, 255, 255, 1);
+  --sw-glass-border: rgba(210, 210, 215, 1);
+  --sw-glass-specular: rgba(255, 255, 255, 0);
+}
+
+[data-theme='dark'][data-palette='ink'] {
+  --sw-color-accent: #F5F5F7;
+  --sw-color-onAccent: #101214;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(67, 67, 69, 0.72);
+  --sw-glass-border: rgba(251, 251, 252, 0.22);
+  --sw-glass-specular: rgba(253, 253, 253, 0.28);
+}
+
+[data-theme='light'][data-palette='cornflower'] {
+  --sw-color-accent: #4F6BED;
+  --sw-color-onAccent: #FFFFFF;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1;
+  --sw-glass-fill: rgba(255, 255, 255, 1);
+  --sw-glass-border: rgba(210, 210, 215, 1);
+  --sw-glass-specular: rgba(255, 255, 255, 0);
+}
+
+[data-theme='dark'][data-palette='cornflower'] {
+  --sw-color-accent: #93A4FF;
+  --sw-color-onAccent: #101214;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(49, 52, 71, 0.72);
+  --sw-glass-border: rgba(212, 219, 255, 0.22);
+  --sw-glass-specular: rgba(233, 237, 255, 0.28);
+}
+
+[data-theme='light'][data-palette='soft-blue'] {
+  --sw-color-accent: #3B6FD4;
+  --sw-color-onAccent: #FFFFFF;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1;
+  --sw-glass-fill: rgba(255, 255, 255, 1);
+  --sw-glass-border: rgba(210, 210, 215, 1);
+  --sw-glass-specular: rgba(255, 255, 255, 0);
+}
+
+[data-theme='dark'][data-palette='soft-blue'] {
+  --sw-color-accent: #8BB8FF;
+  --sw-color-onAccent: #101214;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(48, 56, 71, 0.72);
+  --sw-glass-border: rgba(209, 227, 255, 0.22);
+  --sw-glass-specular: rgba(232, 241, 255, 0.28);
+}
+
+[data-theme='light'][data-palette='capri'] {
+  --sw-color-accent: #0077B6;
+  --sw-color-onAccent: #FFFFFF;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1;
+  --sw-glass-fill: rgba(255, 255, 255, 1);
+  --sw-glass-border: rgba(210, 210, 215, 1);
+  --sw-glass-specular: rgba(255, 255, 255, 0);
+}
+
+[data-theme='dark'][data-palette='capri'] {
+  --sw-color-accent: #48CAE4;
+  --sw-color-onAccent: #101214;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1.8;
-  --sw-glass-fill: rgba(28, 28, 30, 0.72);
-  --sw-glass-border: rgba(255, 255, 255, 0.16);
+  --sw-glass-fill: rgba(36, 59, 66, 0.72);
+  --sw-glass-border: rgba(182, 234, 244, 0.22);
+  --sw-glass-specular: rgba(218, 244, 250, 0.28);
+}
+
+[data-theme='light'][data-palette='raspberry'] {
+  --sw-color-accent: #DB2777;
+  --sw-color-onAccent: #FFFFFF;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1;
+  --sw-glass-fill: rgba(255, 255, 255, 1);
+  --sw-glass-border: rgba(210, 210, 215, 1);
+  --sw-glass-specular: rgba(255, 255, 255, 0);
+}
+
+[data-theme='dark'][data-palette='raspberry'] {
+  --sw-color-accent: #F472B6;
+  --sw-color-onAccent: #101214;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(67, 43, 57, 0.72);
+  --sw-glass-border: rgba(251, 199, 226, 0.22);
+  --sw-glass-specular: rgba(253, 227, 240, 0.28);
+}
+
+[data-theme='light'][data-palette='tangerine'] {
+  --sw-color-accent: #C2410C;
+  --sw-color-onAccent: #FFFFFF;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1;
+  --sw-glass-fill: rgba(255, 255, 255, 1);
+  --sw-glass-border: rgba(210, 210, 215, 1);
+  --sw-glass-specular: rgba(255, 255, 255, 0);
+}
+
+[data-theme='dark'][data-palette='tangerine'] {
+  --sw-color-accent: #FB923C;
+  --sw-color-onAccent: #101214;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(68, 49, 35, 0.72);
+  --sw-glass-border: rgba(253, 211, 177, 0.22);
+  --sw-glass-specular: rgba(254, 233, 216, 0.28);
+}
+
+[data-theme='light'][data-palette='amber'] {
+  --sw-color-accent: #B45309;
+  --sw-color-onAccent: #FFFFFF;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1;
+  --sw-glass-fill: rgba(255, 255, 255, 1);
+  --sw-glass-border: rgba(210, 210, 215, 1);
+  --sw-glass-specular: rgba(255, 255, 255, 0);
+}
+
+[data-theme='dark'][data-palette='amber'] {
+  --sw-color-accent: #FCD34D;
+  --sw-color-onAccent: #101214;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(68, 61, 38, 0.72);
+  --sw-glass-border: rgba(254, 237, 184, 0.22);
+  --sw-glass-specular: rgba(254, 246, 219, 0.28);
+}
+
+[data-theme='light'][data-palette='fuchsia'] {
+  --sw-color-accent: #C026D3;
+  --sw-color-onAccent: #FFFFFF;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1;
+  --sw-glass-fill: rgba(255, 255, 255, 1);
+  --sw-glass-border: rgba(210, 210, 215, 1);
+  --sw-glass-specular: rgba(255, 255, 255, 0);
+}
+
+[data-theme='dark'][data-palette='fuchsia'] {
+  --sw-color-accent: #E879F9;
+  --sw-color-onAccent: #101214;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(65, 45, 69, 0.72);
+  --sw-glass-border: rgba(246, 201, 253, 0.22);
+  --sw-glass-specular: rgba(250, 228, 254, 0.28);
+}
+
+[data-theme='light'][data-palette='sunburst'] {
+  --sw-color-background: #F6DCAC;
+  --sw-color-surface: #FBF0D8;
+  --sw-color-text: #1D1D1F;
+  --sw-color-muted: #5C5346;
+  --sw-color-accent: #A33B20;
+  --sw-color-onAccent: #FFFFFF;
+  --sw-color-border: #E5C48A;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1;
+  --sw-glass-fill: rgba(255, 255, 255, 1);
+  --sw-glass-border: rgba(210, 210, 215, 1);
+  --sw-glass-specular: rgba(255, 255, 255, 0);
+}
+
+[data-theme='dark'][data-palette='sunburst'] {
+  --sw-color-background: #012D4E;
+  --sw-color-surface: #0A3D5C;
+  --sw-color-text: #F6DCAC;
+  --sw-color-muted: #C4A882;
+  --sw-color-accent: #FAA968;
+  --sw-color-onAccent: #101214;
+  --sw-color-border: #1A5A70;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(68, 53, 43, 0.72);
+  --sw-glass-border: rgba(253, 221, 195, 0.22);
+  --sw-glass-specular: rgba(254, 238, 225, 0.28);
+}
+
+[data-theme='light'][data-palette='harvest'] {
+  --sw-color-background: #E3DCC8;
+  --sw-color-surface: #EBE6D6;
+  --sw-color-text: #1D1D1F;
+  --sw-color-muted: #5C5346;
+  --sw-color-accent: #3E3E24;
+  --sw-color-onAccent: #FFFFFF;
+  --sw-color-border: #C9C2AE;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1;
+  --sw-glass-fill: rgba(255, 255, 255, 1);
+  --sw-glass-border: rgba(210, 210, 215, 1);
+  --sw-glass-specular: rgba(255, 255, 255, 0);
+}
+
+[data-theme='dark'][data-palette='harvest'] {
+  --sw-color-background: #263E24;
+  --sw-color-surface: #2F4A2C;
+  --sw-color-text: #E3DCC8;
+  --sw-color-muted: #B8B090;
+  --sw-color-accent: #CEA453;
+  --sw-color-onAccent: #101214;
+  --sw-color-border: #3D5238;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(60, 52, 40, 0.72);
+  --sw-glass-border: rgba(235, 219, 186, 0.22);
+  --sw-glass-specular: rgba(245, 237, 221, 0.28);
+}
+
+[data-theme='light'][data-palette='postcard'] {
+  --sw-color-background: #E4E4CC;
+  --sw-color-surface: #EEEEDD;
+  --sw-color-text: #1B2130;
+  --sw-color-muted: #5C5346;
+  --sw-color-accent: #A33B2B;
+  --sw-color-onAccent: #FFFFFF;
+  --sw-color-border: #D0D0B8;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1;
+  --sw-glass-fill: rgba(255, 255, 255, 1);
+  --sw-glass-border: rgba(210, 210, 215, 1);
+  --sw-glass-specular: rgba(255, 255, 255, 0);
+}
+
+[data-theme='dark'][data-palette='postcard'] {
+  --sw-color-background: #1B2130;
+  --sw-color-surface: #252B40;
+  --sw-color-text: #E4E4CC;
+  --sw-color-muted: #B8B49A;
+  --sw-color-accent: #EEAF90;
+  --sw-color-onAccent: #101214;
+  --sw-color-border: #3A4158;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(66, 54, 51, 0.72);
+  --sw-glass-border: rgba(248, 223, 211, 0.22);
+  --sw-glass-specular: rgba(252, 239, 233, 0.28);
+}
+
+[data-theme='light'][data-palette='mocha'] {
+  --sw-color-background: #F3E3C3;
+  --sw-color-surface: #F8EEE0;
+  --sw-color-text: #473333;
+  --sw-color-muted: #6B5348;
+  --sw-color-accent: #473333;
+  --sw-color-onAccent: #FFFFFF;
+  --sw-color-border: #E0CBA8;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1;
+  --sw-glass-fill: rgba(255, 255, 255, 1);
+  --sw-glass-border: rgba(210, 210, 215, 1);
+  --sw-glass-specular: rgba(255, 255, 255, 0);
+}
+
+[data-theme='dark'][data-palette='mocha'] {
+  --sw-color-background: #473333;
+  --sw-color-surface: #5A4242;
+  --sw-color-text: #F3E3C3;
+  --sw-color-muted: #D4C4A8;
+  --sw-color-accent: #E8C69F;
+  --sw-color-onAccent: #101214;
+  --sw-color-border: #6B5353;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(65, 59, 53, 0.72);
+  --sw-glass-border: rgba(246, 232, 217, 0.22);
+  --sw-glass-specular: rgba(250, 244, 236, 0.28);
+}
+
+[data-theme='light'][data-palette='synthwave'] {
+  --sw-color-accent: #D81B60;
+  --sw-color-onAccent: #FFFFFF;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1;
+  --sw-glass-fill: rgba(255, 255, 255, 1);
+  --sw-glass-border: rgba(210, 210, 215, 1);
+  --sw-glass-specular: rgba(255, 255, 255, 0);
+}
+
+[data-theme='dark'][data-palette='synthwave'] {
+  --sw-color-background: #1A0533;
+  --sw-color-surface: #241043;
+  --sw-color-text: #F5F5F7;
+  --sw-color-muted: #C9B8E8;
+  --sw-color-accent: #FF2A6D;
+  --sw-color-onAccent: #101214;
+  --sw-color-border: #4A2C6A;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(69, 31, 44, 0.72);
+  --sw-glass-border: rgba(255, 170, 197, 0.22);
+  --sw-glass-specular: rgba(255, 212, 226, 0.28);
 }
 
 html,
@@ -100,6 +493,10 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+[data-theme] [data-theme] {
+  min-height: 0;
+}
+
 [data-theme='light'] {
   color-scheme: light;
 }
@@ -122,16 +519,54 @@ body {
   outline-offset: var(--sw-focus-ring-offset);
 }
 
-[data-theme] :is(input[type='text'], input[type='email'], input[type='number'], input[type='search'], input[type='url'], input[type='password'], input:not([type]), select, textarea) {
+[data-theme] :is(input[type='text'], input[type='email'], input[type='number'], input[type='search'], input[type='url'], input[type='password'], input:not([type]), textarea) {
   background-color: var(--sw-glass-fill);
   border: 1px solid var(--sw-color-border);
   border-radius: var(--sw-radius-sm);
-  box-sizing: border-box;
   color: inherit;
   font-family: inherit;
   font-size: inherit;
+  padding-inline: var(--sw-control-md-padding-inline);
+  box-sizing: border-box;
   min-height: var(--sw-control-md-min-height);
+}
+
+[data-theme] select {
+  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);
+  appearance: none;
+  background-image:
+    linear-gradient(45deg, transparent 50%, var(--sw-color-muted) 50%),
+    linear-gradient(135deg, var(--sw-color-muted) 50%, transparent 50%);
+  background-position:
+    calc(100% - var(--sw-space-4)) calc(50% - 1px),
+    calc(100% - calc(var(--sw-space-4) - var(--sw-space-1))) calc(50% - 1px);
+  background-repeat: no-repeat;
+  background-size: var(--sw-space-1) var(--sw-space-1),
+    var(--sw-space-1) var(--sw-space-1);
+  box-sizing: content-box;
+  height: calc(var(--sw-control-md-min-height) - 1px - 1px);
+  min-height: 0;
+  padding-inline-end: calc(
+    var(--sw-control-md-padding-inline) + var(--sw-space-5)
+  );
+}
+
+[data-theme] :is(input[type='text'], input[type='email'], input[type='number'], input[type='search'], input[type='url'], input[type='password'], input:not([type]), textarea):focus,
+[data-theme] select:focus {
+  box-shadow: none;
+  outline: none;
+}
+
+[data-theme] :is(input[type='text'], input[type='email'], input[type='number'], input[type='search'], input[type='url'], input[type='password'], input:not([type]), textarea):focus-visible,
+[data-theme] select:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
 }
 
 .sw-padding-0 { padding: var(--sw-space-0); }
@@ -238,6 +673,7 @@ body {
 .sw-card-glass {
   background: var(--sw-glass-fill);
   border: 1px solid var(--sw-glass-border);
+  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));
 }
@@ -255,7 +691,16 @@ body {
 
 @media (prefers-reduced-transparency: reduce) {
   .sw-card-glass,
-  .sw-button-secondary {
+  .sw-app-header,
+  .sw-button-secondary,
+  .sw-badge-neutral,
+  .sw-segmented,
+  .sw-table-sticky thead th,
+  .sw-bar-chart-track,
+  .sw-dialog,
+  .sw-accordion,
+  .sw-select-list,
+  .sw-toast {
     background: var(--sw-color-surface);
     backdrop-filter: none;
     -webkit-backdrop-filter: none;
@@ -268,12 +713,17 @@ body {
   white-space: nowrap;
 }
 
+.sw-tabular {
+  font-variant-numeric: tabular-nums;
+}
+
 .sw-text-display { font-family: var(--sw-font-sans); font-size: 40px; line-height: 48px; font-weight: 600; letter-spacing: -0.8px; }
 .sw-text-heading { font-family: var(--sw-font-sans); font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.45px; }
 .sw-text-title { font-family: var(--sw-font-sans); font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.3px; }
 .sw-text-body { font-family: var(--sw-font-sans); font-size: 17px; line-height: 25px; font-weight: 400; letter-spacing: -0.2px; }
 .sw-text-label { font-family: var(--sw-font-sans); font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -0.2px; }
 .sw-text-caption { font-family: var(--sw-font-sans); font-size: 13px; line-height: 18px; font-weight: 400; letter-spacing: -0.08px; }
+.sw-text-data { font-family: var(--sw-font-sans); font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: -0.08px; font-variant-numeric: tabular-nums; }
 
 .sw-button {
   appearance: none;
@@ -303,9 +753,631 @@ body {
   opacity: var(--sw-disabled-opacity);
 }
 
+.sw-button[aria-pressed='false'] {
+  opacity: var(--sw-quiet-opacity);
+}
+
 .sw-button-primary { background: var(--sw-color-accent); border-color: transparent; color: var(--sw-color-onAccent); }
-.sw-button-secondary { background: var(--sw-glass-fill); border-color: var(--sw-glass-border); color: var(--sw-color-text); 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)); }
+.sw-button-secondary { background: var(--sw-color-surface); border-color: var(--sw-color-border); color: var(--sw-color-text); }
 .sw-button-ghost { background: transparent; border-color: transparent; color: var(--sw-color-accent); }
 .sw-button-danger { background: var(--sw-color-danger); border-color: transparent; color: var(--sw-color-onDanger); }
+.sw-button-xs { min-height: 28px; padding-inline: 10px; }
 .sw-button-sm { min-height: 32px; padding-inline: 12px; }
 .sw-button-md { min-height: 44px; padding-inline: 16px; }
+
+.sw-badge {
+  align-items: center;
+  border: 1px solid transparent;
+  border-radius: var(--sw-radius-pill);
+  box-sizing: border-box;
+  display: inline-flex;
+  font-family: var(--sw-font-sans);
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+}
+
+.sw-badge-md {
+  min-height: var(--sw-control-xs-min-height);
+  padding-inline: var(--sw-control-xs-padding-inline);
+}
+
+.sw-badge-sm {
+  padding-inline: var(--sw-space-2);
+}
+
+.sw-badge-neutral {
+  background: var(--sw-glass-fill);
+  border-color: var(--sw-color-border);
+  color: var(--sw-color-text);
+}
+
+.sw-badge-accent {
+  background: transparent;
+  border-color: var(--sw-color-accent);
+  color: var(--sw-color-accent);
+}
+
+.sw-badge-success {
+  background: transparent;
+  border-color: var(--sw-color-success);
+  color: var(--sw-color-success);
+}
+
+.sw-badge-danger {
+  background: transparent;
+  border-color: var(--sw-color-danger);
+  color: var(--sw-color-danger);
+}
+
+.sw-segmented {
+  background: var(--sw-glass-fill);
+  border: 1px solid var(--sw-glass-border);
+  border-radius: var(--sw-radius-pill);
+  box-sizing: border-box;
+  display: inline-flex;
+  gap: 2px;
+  padding: 2px;
+}
+
+.sw-segmented-item {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: var(--sw-radius-pill);
+  color: var(--sw-color-muted);
+  cursor: pointer;
+  font-family: var(--sw-font-sans);
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+  min-height: var(--sw-control-xs-min-height);
+  padding-inline: var(--sw-control-xs-padding-inline);
+}
+
+.sw-segmented-item:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+.sw-segmented-item-selected {
+  background: var(--sw-color-surface);
+  color: var(--sw-color-text);
+}
+
+.sw-table-wrap {
+  overflow: auto;
+  width: 100%;
+}
+
+.sw-table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.sw-table th,
+.sw-table td {
+  border-bottom: 1px solid var(--sw-color-border);
+  padding: var(--sw-space-2) var(--sw-space-3);
+  text-align: start;
+  vertical-align: middle;
+}
+
+.sw-table th {
+  color: var(--sw-color-muted);
+  font-family: var(--sw-font-sans);
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+}
+
+.sw-table-end {
+  text-align: end;
+}
+
+.sw-table-numeric {
+  font-variant-numeric: tabular-nums;
+  text-align: end;
+}
+
+.sw-table-clip {
+  max-width: 0;
+  overflow: hidden;
+}
+
+.sw-table-sticky thead th {
+  background: var(--sw-glass-fill);
+  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: 0;
+  z-index: 1;
+}
+
+.sw-table-compact th,
+.sw-table-compact td {
+  padding: var(--sw-space-1) var(--sw-space-2);
+}
+
+.sw-table-row-selected > :first-child {
+  padding-inline-start: var(--sw-space-5);
+  position: relative;
+}
+
+.sw-table-compact .sw-table-row-selected > :first-child {
+  padding-inline-start: var(--sw-space-4);
+}
+
+.sw-table-row-selected > :first-child::before {
+  background: var(--sw-color-accent);
+  border-radius: var(--sw-radius-pill);
+  content: '';
+  height: var(--sw-space-2);
+  inset-block-start: 50%;
+  inset-inline-start: var(--sw-space-2);
+  position: absolute;
+  transform: translateY(-50%);
+  width: var(--sw-space-2);
+}
+
+.sw-table-compact .sw-table-row-selected > :first-child::before {
+  inset-inline-start: var(--sw-space-1);
+}
+
+.sw-bar-chart {
+  display: grid;
+  gap: var(--sw-space-2);
+}
+
+.sw-bar-chart-plot {
+  display: grid;
+  gap: var(--sw-space-2);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.sw-bar-chart-row,
+.sw-bar-chart-axis {
+  align-items: center;
+  display: grid;
+  gap: var(--sw-space-3);
+  grid-template-columns: minmax(0, 2fr) minmax(0, 5fr) minmax(var(--sw-space-8), max-content);
+}
+
+.sw-bar-chart-label {
+  color: var(--sw-color-muted);
+  font-family: var(--sw-font-sans);
+  font-size: 13px;
+  font-weight: 400;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sw-bar-chart-track {
+  background: var(--sw-glass-fill);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-pill);
+  height: var(--sw-space-3);
+  min-width: 0;
+  overflow: hidden;
+}
+
+.sw-bar-chart-fill {
+  background: var(--sw-color-accent);
+  border-radius: inherit;
+  display: block;
+  height: 100%;
+  width: calc(var(--sw-bar-fill, 0) * 100%);
+}
+
+.sw-bar-chart-fill-negative {
+  background: var(--sw-color-danger);
+}
+
+.sw-bar-chart-value {
+  color: var(--sw-color-text);
+  font-family: var(--sw-font-sans);
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 500;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+  text-align: end;
+}
+
+.sw-bar-chart-axis {
+  color: var(--sw-color-muted);
+  font-family: var(--sw-font-sans);
+  font-size: 13px;
+  font-weight: 400;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+}
+
+.sw-bar-chart-axis-track {
+  display: flex;
+  justify-content: space-between;
+}
+
+.sw-app-header {
+  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));
+}
+
+.sw-app-header-sticky {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+
+.sw-nav {
+  align-items: center;
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-3);
+}
+
+.sw-nav a {
+  font-size: 15px;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+  line-height: 20px;
+}
+
+.sw-nav a[aria-current='page'] {
+  color: var(--sw-color-text);
+}
+
+.sw-field-xs :is(select, input, textarea) {
+  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-xs select {
+  background-position:
+    calc(100% - var(--sw-space-3)) calc(50% - 1px),
+    calc(100% - calc(var(--sw-space-3) - var(--sw-space-1))) calc(50% - 1px);
+  height: calc(var(--sw-control-xs-min-height) - 1px - 1px);
+  min-height: 0;
+  padding-inline-end: calc(
+    var(--sw-control-xs-padding-inline) + var(--sw-space-5)
+  );
+}
+
+.sw-dialog {
+  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);
+  margin: auto;
+  max-height: min(100vh - var(--sw-space-8), 100dvh - var(--sw-space-8));
+  max-width: min(var(--sw-dialog-max), calc(100vw - var(--sw-space-8)));
+  overflow: auto;
+  width: calc(100% - var(--sw-space-8));
+}
+
+.sw-dialog::backdrop {
+  background: color-mix(in srgb, var(--sw-color-text) 28%, transparent);
+}
+
+.sw-dialog:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+.sw-accordion {
+  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));
+  color: var(--sw-color-text);
+}
+
+.sw-accordion-summary {
+  cursor: pointer;
+  display: list-item;
+  min-height: var(--sw-control-md-min-height);
+}
+
+.sw-accordion-summary::-webkit-details-marker {
+  color: var(--sw-color-muted);
+}
+
+.sw-accordion-summary::marker {
+  color: var(--sw-color-muted);
+}
+
+.sw-accordion-summary:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+.sw-select {
+  max-width: 100%;
+  width: max-content;
+}
+
+.sw-select-control {
+  position: relative;
+}
+
+.sw-select-trigger {
+  appearance: none;
+  -webkit-appearance: none;
+  background-color: var(--sw-glass-fill);
+  background-image:
+    linear-gradient(45deg, transparent 50%, var(--sw-color-muted) 50%),
+    linear-gradient(135deg, var(--sw-color-muted) 50%, transparent 50%);
+  background-repeat: no-repeat;
+  background-size: var(--sw-space-1) var(--sw-space-1),
+    var(--sw-space-1) var(--sw-space-1);
+  background-position:
+    calc(100% - var(--sw-space-4)) calc(50% - 1px),
+    calc(100% - calc(var(--sw-space-4) - var(--sw-space-1))) calc(50% - 1px);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-sm);
+  box-sizing: border-box;
+  color: var(--sw-color-text);
+  cursor: pointer;
+  display: inline-flex;
+  font-family: inherit;
+  font-size: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+  margin: 0;
+  min-height: var(--sw-control-md-min-height);
+  padding-block: 0;
+  padding-inline: var(--sw-control-md-padding-inline);
+  padding-inline-end: calc(
+    var(--sw-control-md-padding-inline) + var(--sw-space-5)
+  );
+  text-align: start;
+  white-space: nowrap;
+}
+
+.sw-select-trigger:focus {
+  box-shadow: none;
+  outline: none;
+}
+
+.sw-select-trigger:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+.sw-select-xs .sw-select-trigger {
+  background-position:
+    calc(100% - var(--sw-space-3)) calc(50% - 1px),
+    calc(100% - calc(var(--sw-space-3) - var(--sw-space-1))) calc(50% - 1px);
+  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);
+  padding-inline-end: calc(
+    var(--sw-control-xs-padding-inline) + var(--sw-space-5)
+  );
+}
+
+.sw-select-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);
+  inset-inline-start: 0;
+  margin: var(--sw-space-1) 0 0;
+  max-height: var(--sw-select-max);
+  max-width: var(--sw-dialog-max);
+  min-width: 100%;
+  overflow: auto;
+  padding: var(--sw-space-1);
+  position: absolute;
+  width: max-content;
+  z-index: 3;
+}
+
+.sw-select-option {
+  border-radius: var(--sw-radius-sm);
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  min-height: var(--sw-control-xs-min-height);
+  padding-inline: var(--sw-control-xs-padding-inline);
+}
+
+.sw-select-option[aria-selected='true'] {
+  font-weight: 600;
+}
+
+.sw-select-option[data-active='true'] {
+  background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+}
+
+.sw-select-xs .sw-select-option {
+  font-size: 13px;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+}
+
+.sw-select-action {
+  border-top: 1px solid var(--sw-color-border);
+  color: var(--sw-color-accent);
+  margin-top: var(--sw-space-1);
+}
+
+.sw-split {
+  align-items: stretch;
+  align-self: start;
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: row;
+  min-width: 0;
+}
+
+.sw-split-pane {
+  box-sizing: border-box;
+  max-width: var(--sw-split-max);
+  min-width: 0;
+  overflow: auto;
+  width: var(--sw-split-size);
+}
+
+.sw-split[data-collapsed] .sw-split-pane {
+  display: none;
+}
+
+.sw-split-handle {
+  align-items: flex-start;
+  background: transparent;
+  border: 0;
+  box-sizing: border-box;
+  cursor: col-resize;
+  display: flex;
+  flex: none;
+  justify-content: center;
+  margin: 0;
+  min-height: var(--sw-control-md-min-height);
+  min-width: var(--sw-control-xs-min-height);
+  padding: var(--sw-space-5) 0 0;
+  touch-action: none;
+  user-select: none;
+}
+
+.sw-split-handle:hover,
+.sw-split-handle:focus-visible {
+  background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+}
+
+.sw-split-handle:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+.sw-split[data-collapsed] .sw-split-handle {
+  cursor: e-resize;
+}
+
+.sw-split-grip {
+  border-inline-end: var(--sw-focus-ring-width) solid var(--sw-color-muted);
+  border-inline-start: var(--sw-focus-ring-width) solid var(--sw-color-muted);
+  box-sizing: border-box;
+  display: block;
+  height: var(--sw-space-6);
+  position: sticky;
+  top: var(--sw-space-5);
+  width: var(--sw-space-2);
+}
+
+.sw-toast {
+  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);
+  inset: unset;
+  bottom: var(--sw-space-6);
+  left: 50%;
+  margin: 0;
+  overflow: visible;
+  pointer-events: none;
+  position: fixed;
+  translate: -50% 0;
+  width: max-content;
+}
+
+.sw-toast:popover-open {
+  animation: sw-toast-float var(--sw-motion-default) var(--sw-motion-easing);
+}
+
+.sw-toast-travel {
+  bottom: auto;
+  left: 0;
+  top: 0;
+  translate: var(--sw-toast-from-x) var(--sw-toast-from-y);
+}
+
+.sw-toast-travel:popover-open {
+  animation: sw-toast-travel var(--sw-motion-travel)
+    var(--sw-motion-travel-easing) forwards;
+}
+
+@keyframes sw-toast-float {
+  from {
+    opacity: 0;
+    translate: -50% var(--sw-space-3);
+  }
+  to {
+    opacity: 1;
+    translate: -50% 0;
+  }
+}
+
+@keyframes sw-toast-travel {
+  0% {
+    opacity: 1;
+    scale: 0.6;
+    translate: var(--sw-toast-from-x) var(--sw-toast-from-y);
+  }
+  16% {
+    opacity: 1;
+    scale: 1.2;
+    translate: var(--sw-toast-from-x) var(--sw-toast-from-y);
+  }
+  42% {
+    opacity: 1;
+    scale: 1;
+    translate: var(--sw-toast-to-x) var(--sw-toast-to-y);
+  }
+  78% {
+    opacity: 1;
+    scale: 1;
+    translate: var(--sw-toast-to-x) var(--sw-toast-to-y);
+  }
+  100% {
+    opacity: 0;
+    scale: 0.94;
+    translate: var(--sw-toast-to-x) var(--sw-toast-to-y);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sw-toast:popover-open,
+  .sw-toast-travel:popover-open {
+    animation: none;
+  }
+
+  .sw-toast-travel:popover-open {
+    opacity: 1;
+    scale: 1;
+    translate: var(--sw-toast-to-x) var(--sw-toast-to-y);
+  }
+}