@5voltfx/design-system 0.1.0 → 0.2.0

package/dist/index.css

@@ -0,0 +1,1398 @@
+/* src/tokens/colors.css */
+:root {
+  --ds-color-url: #ff8787;
+  --ds-color-visited: #ffb4a2;
+  --ds-color-bg-0: #1a2f2f;
+  --ds-color-bg-1: #2d4a4a;
+  --ds-color-bg-2: #ff6b6b;
+  --ds-color-bg-3: #5c8a8a;
+  --ds-color-bg-4: #f7f0eb;
+  --ds-color-font-0: #fff5f0;
+  --ds-color-font-1: #ffb4a2;
+  --ds-color-font-2: #ff6b6b;
+  --ds-color-font-3: #2d4a4a;
+  --ds-color-font-4: #1a2f2f;
+  --ds-color-bw-0: #142424;
+  --ds-color-bw-1: #2d4a4a;
+  --ds-color-bw-2: #5c8a8a;
+  --ds-color-bw-3: #c5d5d5;
+  --ds-color-bw-4: #fff;
+  --ds-color-highlight: #7c3aed;
+}
+
+/* src/tokens/themes.css */
+[data-theme=ink] {
+  --ds-color-url: #818cf8;
+  --ds-color-visited: #a5b4fc;
+  --ds-color-bg-0: #0d0f14;
+  --ds-color-bg-1: #1a1f2e;
+  --ds-color-bg-2: #6366f1;
+  --ds-color-bg-3: #2d3348;
+  --ds-color-bg-4: #384260;
+  --ds-color-font-0: #ffffff;
+  --ds-color-font-1: #9aa8d4;
+  --ds-color-font-2: #818cf8;
+  --ds-color-font-3: #c5cce8;
+  --ds-color-font-4: #f0f2ff;
+  --ds-color-bw-0: #000;
+  --ds-color-bw-1: #1e2230;
+  --ds-color-bw-2: #4a5068;
+  --ds-color-bw-3: #5a6380;
+  --ds-color-bw-4: #fff;
+  --ds-color-highlight: #fbbf24;
+}
+[data-theme=sage] {
+  --ds-color-url: #7a8578;
+  --ds-color-visited: #8a9388;
+  --ds-color-bg-0: #3a3f38;
+  --ds-color-bg-1: #4a5248;
+  --ds-color-bg-2: #6b7568;
+  --ds-color-bg-3: #9aa392;
+  --ds-color-bg-4: #d4d8d0;
+  --ds-color-font-0: #e8ebe6;
+  --ds-color-font-1: #c5cbc0;
+  --ds-color-font-2: #6b7568;
+  --ds-color-font-3: #5c6359;
+  --ds-color-font-4: #3a3f38;
+  --ds-color-bw-0: #323632;
+  --ds-color-bw-1: #4a5248;
+  --ds-color-bw-2: #6b7568;
+  --ds-color-bw-3: #9aa392;
+  --ds-color-bw-4: #e8ebe6;
+  --ds-color-highlight: #6b4c9a;
+}
+[data-theme=coral] {
+  --ds-color-url: #ff8787;
+  --ds-color-visited: #ffb4a2;
+  --ds-color-bg-0: #1a2f2f;
+  --ds-color-bg-1: #2d4a4a;
+  --ds-color-bg-2: #ff6b6b;
+  --ds-color-bg-3: #5c8a8a;
+  --ds-color-bg-4: #f7f0eb;
+  --ds-color-font-0: #fff5f0;
+  --ds-color-font-1: #ffb4a2;
+  --ds-color-font-2: #ff6b6b;
+  --ds-color-font-3: #2d4a4a;
+  --ds-color-font-4: #1a2f2f;
+  --ds-color-bw-0: #142424;
+  --ds-color-bw-1: #2d4a4a;
+  --ds-color-bw-2: #5c8a8a;
+  --ds-color-bw-3: #c5d5d5;
+  --ds-color-bw-4: #fff;
+  --ds-color-highlight: #7c3aed;
+}
+[data-theme=midnight] {
+  --ds-color-url: #0099cc;
+  --ds-color-visited: #007aa3;
+  --ds-color-bg-0: #000000;
+  --ds-color-bg-1: #111111;
+  --ds-color-bg-2: #00d4ff;
+  --ds-color-bg-3: #ececec;
+  --ds-color-bg-4: #ffffff;
+  --ds-color-font-0: #ffffff;
+  --ds-color-font-1: #555555;
+  --ds-color-font-2: #007799;
+  --ds-color-font-3: #333333;
+  --ds-color-font-4: #000000;
+  --ds-color-bw-0: #000;
+  --ds-color-bw-1: #222;
+  --ds-color-bw-2: #666;
+  --ds-color-bw-3: #bbb;
+  --ds-color-bw-4: #fff;
+  --ds-color-highlight: #ff6600;
+}
+[data-theme=amber] {
+  --ds-color-url: #a0522d;
+  --ds-color-visited: #8b4513;
+  --ds-color-bg-0: #1a1510;
+  --ds-color-bg-1: #2c2218;
+  --ds-color-bg-2: #b8652a;
+  --ds-color-bg-3: #d9cbb0;
+  --ds-color-bg-4: #f5efe3;
+  --ds-color-font-0: #faf6ef;
+  --ds-color-font-1: #6b5344;
+  --ds-color-font-2: #8b6914;
+  --ds-color-font-3: #4a3d30;
+  --ds-color-font-4: #1a1510;
+  --ds-color-bw-0: #100c08;
+  --ds-color-bw-1: #3d2e1f;
+  --ds-color-bw-2: #6b5344;
+  --ds-color-bw-3: #b8a088;
+  --ds-color-bw-4: #fff;
+  --ds-color-highlight: #1d4ed8;
+}
+[data-theme=harvest] {
+  --ds-color-url: #f4230c;
+  --ds-color-visited: #9bb4e2;
+  --ds-color-bg-0: #005558;
+  --ds-color-bg-1: #684022;
+  --ds-color-bg-2: #9f5508;
+  --ds-color-bg-3: #decebd;
+  --ds-color-bg-4: #fdf7e3;
+  --ds-color-font-0: #fdf7e3;
+  --ds-color-font-1: #decebd;
+  --ds-color-font-2: #9f5508;
+  --ds-color-font-3: #684022;
+  --ds-color-font-4: #005558;
+  --ds-color-bw-0: #000;
+  --ds-color-bw-1: #333;
+  --ds-color-bw-2: #666;
+  --ds-color-bw-3: #ccc;
+  --ds-color-bw-4: #fff;
+  --ds-color-highlight: #f4230c;
+}
+
+/* src/tokens/base.css */
+html,
+body {
+  background-color: var(--ds-color-bg-0);
+  color: var(--ds-color-font-0);
+}
+body {
+  margin: 0;
+  min-height: 100vh;
+  font-family: var(--ds-font-body);
+}
+* {
+  box-sizing: border-box;
+}
+
+/* src/tokens/typography.css */
+:root {
+  --ds-font-body:
+    "Space Grotesk",
+    system-ui,
+    -apple-system,
+    "Segoe UI",
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif;
+  --ds-font-decorative: "Pangolin", cursive;
+  --ds-font-weight-regular: 400;
+  --ds-font-weight-medium: 500;
+  --ds-font-weight-semibold: 600;
+  --ds-font-weight-bold: 700;
+  --ds-line-height-tight: 1.15;
+  --ds-line-height-normal: 1.5;
+  --ds-line-height-relaxed: 1.7;
+  --ds-font-size-100: 0.8rem;
+  --ds-font-size-200: 1rem;
+  --ds-font-size-300: 1.25rem;
+  --ds-font-size-400: 1.563rem;
+  --ds-font-size-500: 1.953rem;
+  --ds-font-size-600: 2.441rem;
+  --ds-font-size-700: 3.052rem;
+}
+
+/* src/tokens/spacing.css */
+:root {
+  --ds-space-1: 0.25rem;
+  --ds-space-2: 0.5rem;
+  --ds-space-3: 0.75rem;
+  --ds-space-4: 1rem;
+  --ds-space-5: 1.5rem;
+  --ds-space-6: 2rem;
+  --ds-space-7: 3rem;
+  --ds-space-8: 4rem;
+}
+
+/* src/tokens/radius.css */
+:root {
+  --ds-radius-sm: 6px;
+  --ds-radius-md: 10px;
+  --ds-radius-lg: 16px;
+  --ds-radius-pill: 999px;
+}
+
+/* src/tokens/elevation.css */
+:root {
+  --ds-shadow-sm: 0 1px 3px color-mix(in srgb, var(--ds-color-bg-2) 18%, transparent);
+  --ds-shadow-md: 0 6px 16px color-mix(in srgb, var(--ds-color-bg-2) 20%, transparent);
+  --ds-shadow-lg: 0 16px 40px color-mix(in srgb, var(--ds-color-bg-2) 24%, transparent);
+}
+
+/* src/tokens/motion.css */
+:root {
+  --ds-motion-duration-fast: 120ms;
+  --ds-motion-duration-base: 200ms;
+  --ds-motion-duration-slow: 320ms;
+  --ds-motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
+}
+
+/* src/tokens/zindex.css */
+:root {
+  --ds-z-base: 0;
+  --ds-z-dropdown: 1000;
+  --ds-z-sticky: 1100;
+  --ds-z-overlay: 1200;
+  --ds-z-modal: 1300;
+  --ds-z-popover: 1400;
+  --ds-z-toast: 1500;
+}
+
+/* src/tokens/semantic.css */
+:root {
+  --ds-color-danger: #dc2626;
+  --ds-color-success: #16a34a;
+  --ds-color-warning: #d97706;
+  --ds-color-info: #2563eb;
+  --ds-color-on-danger: #fff;
+  --ds-color-on-success: #fff;
+  --ds-color-on-warning: #1a1510;
+  --ds-color-on-info: #fff;
+  --ds-color-field-bg: var(--ds-color-bg-1);
+  --ds-color-field-border: var(--ds-color-bw-3);
+  --ds-color-focus-ring: var(--ds-color-bg-2);
+}
+
+/* src/tokens/rule.css */
+:root {
+  --ds-rule-plate: var(--ds-color-bg-1);
+  --ds-rule-plate-2: color-mix( in srgb, var(--ds-color-bg-1) 88%, var(--ds-color-font-0) 12% );
+  --ds-rule-edge: var(--ds-color-bw-3);
+  --ds-rule-tick: var(--ds-color-bw-3);
+  --ds-rule-ink: var(--ds-color-font-0);
+  --ds-rule-ink-soft: color-mix( in srgb, var(--ds-color-font-0) 78%, var(--ds-color-bg-1) 22% );
+  --ds-rule-hair: var(--ds-color-bg-2);
+  --ds-rule-brass: var(--ds-color-font-1);
+  --ds-rule-glass: color-mix(in srgb, var(--ds-color-bg-2) 16%, transparent);
+  --ds-rule-glass-edge: var(--ds-color-bw-2);
+  --ds-rule-shadow: color-mix(in srgb, var(--ds-color-bw-0) 55%, transparent);
+}
+
+/* src/tokens/index.css */
+
+/* src/components/Button/Button.css */
+.ds-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ds-space-2);
+  border: 1px solid transparent;
+  border-radius: var(--ds-radius-pill);
+  font-family: var(--ds-font-body);
+  font-weight: var(--ds-font-weight-semibold);
+  font-size: var(--ds-font-size-200);
+  line-height: var(--ds-line-height-tight);
+  text-decoration: none;
+  cursor: pointer;
+  transition:
+    background-color var(--ds-motion-duration-base) var(--ds-motion-ease-standard),
+    border-color var(--ds-motion-duration-base) var(--ds-motion-ease-standard),
+    color var(--ds-motion-duration-base) var(--ds-motion-ease-standard),
+    transform var(--ds-motion-duration-fast) var(--ds-motion-ease-standard),
+    box-shadow var(--ds-motion-duration-base) var(--ds-motion-ease-standard);
+}
+.ds-button--md {
+  padding: var(--ds-space-3) var(--ds-space-5);
+}
+.ds-button--sm {
+  padding: var(--ds-space-2) var(--ds-space-4);
+  font-size: var(--ds-font-size-100);
+}
+.ds-button--lg {
+  padding: var(--ds-space-4) var(--ds-space-6);
+  font-size: var(--ds-font-size-300);
+}
+.ds-button--primary {
+  background-color: var(--ds-color-bg-2);
+  color: var(--ds-color-font-0);
+  box-shadow: var(--ds-shadow-sm);
+}
+.ds-button--primary:hover {
+  transform: translateY(-1px);
+  box-shadow: var(--ds-shadow-md);
+}
+.ds-button--secondary {
+  background-color: transparent;
+  color: var(--ds-color-font-0);
+  border-color: var(--ds-color-bw-3);
+}
+.ds-button--secondary:hover {
+  background-color: var(--ds-color-bw-1);
+}
+.ds-button--ghost {
+  background: transparent;
+  color: var(--ds-color-font-1);
+  padding-inline: var(--ds-space-3);
+}
+.ds-button--ghost:hover {
+  color: var(--ds-color-font-0);
+}
+.ds-button:focus-visible {
+  outline: 2px solid var(--ds-color-bg-2);
+  outline-offset: 2px;
+}
+.ds-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
+/* src/components/Card/Card.css */
+.ds-card {
+  background-color: var(--ds-color-bg-1);
+  color: var(--ds-color-font-0);
+  border: 1px solid var(--ds-color-bw-1);
+  border-radius: var(--ds-radius-lg);
+  padding: var(--ds-space-5);
+  box-shadow: var(--ds-shadow-sm);
+  transition: box-shadow var(--ds-motion-duration-base) var(--ds-motion-ease-standard), transform var(--ds-motion-duration-base) var(--ds-motion-ease-standard);
+}
+
+/* src/components/Nav/Nav.css */
+.ds-nav__list {
+  display: flex;
+  align-items: center;
+  gap: var(--ds-space-5);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.ds-nav__link {
+  position: relative;
+  display: inline-block;
+  padding: var(--ds-space-2) 0;
+  color: var(--ds-color-font-1);
+  font-family: var(--ds-font-body);
+  font-weight: var(--ds-font-weight-medium);
+  font-size: var(--ds-font-size-100);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  text-decoration: none;
+  transition: color var(--ds-motion-duration-base) var(--ds-motion-ease-standard);
+}
+.ds-nav__link::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: -2px;
+  width: 100%;
+  height: 2px;
+  background-color: var(--ds-color-bg-2);
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform var(--ds-motion-duration-base) var(--ds-motion-ease-standard);
+}
+.ds-nav__link:hover {
+  color: var(--ds-color-font-0);
+}
+.ds-nav__link:hover::after {
+  transform: scaleX(1);
+}
+.ds-nav__link--active {
+  color: var(--ds-color-font-0);
+}
+.ds-nav__link--active::after {
+  transform: scaleX(1);
+}
+@media (width <= 660px) {
+  .ds-nav__list {
+    gap: var(--ds-space-3);
+  }
+  .ds-nav__link {
+    font-size: 0.75rem;
+  }
+}
+
+/* src/components/Header/Header.css */
+.ds-header {
+  background-color: var(--ds-color-bg-0);
+  color: var(--ds-color-font-0);
+  border-bottom: 1px solid var(--ds-color-bw-1);
+  font-family: var(--ds-font-body);
+}
+.ds-header__inner {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: var(--ds-space-4) var(--ds-space-6);
+  display: flex;
+  align-items: center;
+  gap: var(--ds-space-6);
+}
+.ds-header__brand {
+  display: flex;
+  align-items: center;
+  color: var(--ds-color-font-0);
+  text-decoration: none;
+  font-weight: var(--ds-font-weight-bold);
+  font-size: var(--ds-font-size-300);
+  letter-spacing: 0.02em;
+}
+.ds-header__nav {
+  flex: 1;
+}
+.ds-header__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--ds-space-3);
+  margin-left: auto;
+}
+@media (width <= 480px) {
+  .ds-header__inner {
+    padding: var(--ds-space-3) var(--ds-space-4);
+    gap: var(--ds-space-4);
+  }
+  .ds-header__brand {
+    font-size: var(--ds-font-size-200);
+  }
+}
+
+/* src/components/ThemeSwitcher/ThemeSwitcher.css */
+.ds-theme-switcher {
+  display: flex;
+  align-items: center;
+  gap: var(--ds-space-2);
+}
+.ds-theme-switcher__swatch {
+  width: 20px;
+  height: 20px;
+  border-radius: var(--ds-radius-pill);
+  border: 2px solid transparent;
+  cursor: pointer;
+  padding: 0;
+  transition: transform var(--ds-motion-duration-fast) var(--ds-motion-ease-standard), border-color var(--ds-motion-duration-base) var(--ds-motion-ease-standard);
+}
+.ds-theme-switcher__swatch:hover {
+  transform: scale(1.15);
+}
+.ds-theme-switcher__swatch--active {
+  border-color: var(--ds-color-font-0);
+}
+.ds-theme-switcher__swatch:focus-visible {
+  outline: 2px solid var(--ds-color-bg-2);
+  outline-offset: 2px;
+}
+
+/* src/components/Footer/Footer.css */
+.ds-footer {
+  background-color: var(--ds-color-bg-1);
+  color: var(--ds-color-font-1);
+  border-top: 1px solid var(--ds-color-bw-1);
+  font-family: var(--ds-font-body);
+}
+.ds-footer__inner {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: var(--ds-space-4) var(--ds-space-6);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ds-space-4);
+}
+.ds-footer__left,
+.ds-footer__right {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+.ds-footer__right {
+  justify-content: flex-end;
+}
+.ds-footer__center {
+  display: flex;
+  justify-content: center;
+}
+.ds-footer__copyright {
+  font-size: var(--ds-font-size-100);
+}
+@media (width <= 660px) {
+  .ds-footer__inner {
+    flex-direction: column;
+    padding: var(--ds-space-4);
+  }
+  .ds-footer__left,
+  .ds-footer__right {
+    justify-content: center;
+  }
+}
+
+/* src/components/Typography/Typography.css */
+.ds-heading {
+  margin: 0;
+  font-family: var(--ds-font-body);
+  font-weight: var(--ds-font-weight-bold);
+  line-height: var(--ds-line-height-tight);
+  color: var(--ds-color-font-0);
+}
+.ds-heading--decorative {
+  font-family: var(--ds-font-decorative);
+  font-weight: var(--ds-font-weight-regular);
+}
+.ds-heading--700 {
+  font-size: var(--ds-font-size-700);
+}
+.ds-heading--600 {
+  font-size: var(--ds-font-size-600);
+}
+.ds-heading--500 {
+  font-size: var(--ds-font-size-500);
+}
+.ds-heading--400 {
+  font-size: var(--ds-font-size-400);
+}
+.ds-heading--300 {
+  font-size: var(--ds-font-size-300);
+}
+.ds-heading--200 {
+  font-size: var(--ds-font-size-200);
+}
+.ds-text {
+  margin: 0;
+  font-family: var(--ds-font-body);
+  font-weight: var(--ds-font-weight-regular);
+  line-height: var(--ds-line-height-normal);
+  color: var(--ds-color-font-0);
+}
+.ds-text--100 {
+  font-size: var(--ds-font-size-100);
+}
+.ds-text--200 {
+  font-size: var(--ds-font-size-200);
+}
+.ds-text--300 {
+  font-size: var(--ds-font-size-300);
+}
+.ds-text--muted {
+  color: var(--ds-color-font-1);
+}
+
+/* src/components/Layout/Layout.css */
+.ds-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 var(--ds-space-6);
+}
+@media (width <= 660px) {
+  .ds-container {
+    padding: 0 var(--ds-space-4);
+  }
+}
+.ds-stack {
+  display: flex;
+  gap: var(--ds-stack-gap, var(--ds-space-4));
+}
+.ds-grid {
+  display: grid;
+}
+@media (width <= 660px) {
+  .ds-grid {
+    grid-template-columns: 1fr !important;
+  }
+}
+
+/* src/components/Label/Label.css */
+.ds-label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-space-1);
+  font-family: var(--ds-font-body);
+  font-size: var(--ds-font-size-100);
+  font-weight: var(--ds-font-weight-medium);
+  color: var(--ds-color-font-0);
+}
+.ds-label__required {
+  color: var(--ds-color-danger);
+}
+
+/* src/components/FormField/FormField.css */
+.ds-form-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-space-2);
+}
+.ds-form-field__help {
+  font-family: var(--ds-font-body);
+  font-size: var(--ds-font-size-100);
+  color: var(--ds-color-font-1);
+}
+.ds-form-field__error {
+  font-family: var(--ds-font-body);
+  font-size: var(--ds-font-size-100);
+  color: var(--ds-color-danger);
+}
+
+/* src/components/Input/Input.css */
+.ds-input {
+  display: block;
+  width: 100%;
+  font-family: var(--ds-font-body);
+  font-size: var(--ds-font-size-200);
+  line-height: var(--ds-line-height-normal);
+  color: var(--ds-color-font-0);
+  background-color: var(--ds-color-field-bg);
+  border: 1px solid var(--ds-color-field-border);
+  border-radius: var(--ds-radius-md);
+  transition: border-color var(--ds-motion-duration-base) var(--ds-motion-ease-standard), box-shadow var(--ds-motion-duration-base) var(--ds-motion-ease-standard);
+}
+.ds-input::placeholder {
+  color: var(--ds-color-font-1);
+  opacity: 1;
+}
+.ds-input--sm {
+  padding: var(--ds-space-2) var(--ds-space-3);
+  font-size: var(--ds-font-size-100);
+}
+.ds-input--md {
+  padding: var(--ds-space-3) var(--ds-space-4);
+}
+.ds-input--lg {
+  padding: var(--ds-space-4) var(--ds-space-5);
+  font-size: var(--ds-font-size-300);
+}
+.ds-input:focus-visible {
+  outline: none;
+  border-color: var(--ds-color-focus-ring);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-color-focus-ring) 30%, transparent);
+}
+.ds-input--invalid {
+  border-color: var(--ds-color-danger);
+}
+.ds-input--invalid:focus-visible {
+  border-color: var(--ds-color-danger);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-color-danger) 30%, transparent);
+}
+.ds-input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* src/components/Textarea/Textarea.css */
+.ds-textarea {
+  display: block;
+  width: 100%;
+  padding: var(--ds-space-3) var(--ds-space-4);
+  font-family: var(--ds-font-body);
+  font-size: var(--ds-font-size-200);
+  line-height: var(--ds-line-height-normal);
+  color: var(--ds-color-font-0);
+  background-color: var(--ds-color-field-bg);
+  border: 1px solid var(--ds-color-field-border);
+  border-radius: var(--ds-radius-md);
+  resize: vertical;
+  transition: border-color var(--ds-motion-duration-base) var(--ds-motion-ease-standard), box-shadow var(--ds-motion-duration-base) var(--ds-motion-ease-standard);
+}
+.ds-textarea::placeholder {
+  color: var(--ds-color-font-1);
+  opacity: 1;
+}
+.ds-textarea:focus-visible {
+  outline: none;
+  border-color: var(--ds-color-focus-ring);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-color-focus-ring) 30%, transparent);
+}
+.ds-textarea--invalid {
+  border-color: var(--ds-color-danger);
+}
+.ds-textarea--invalid:focus-visible {
+  border-color: var(--ds-color-danger);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-color-danger) 30%, transparent);
+}
+.ds-textarea:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* src/components/Select/Select.css */
+.ds-select {
+  display: block;
+  width: 100%;
+  font-family: var(--ds-font-body);
+  font-size: var(--ds-font-size-200);
+  line-height: var(--ds-line-height-normal);
+  color: var(--ds-color-font-0);
+  background-color: var(--ds-color-field-bg);
+  border: 1px solid var(--ds-color-field-border);
+  border-radius: var(--ds-radius-md);
+  cursor: pointer;
+  appearance: none;
+  background-image:
+    linear-gradient(
+      45deg,
+      transparent 50%,
+      var(--ds-color-font-1) 50%),
+    linear-gradient(
+      135deg,
+      var(--ds-color-font-1) 50%,
+      transparent 50%);
+  background-position: calc(100% - 20px) center, calc(100% - 15px) center;
+  background-size: 5px 5px, 5px 5px;
+  background-repeat: no-repeat;
+  padding-right: var(--ds-space-7);
+  transition: border-color var(--ds-motion-duration-base) var(--ds-motion-ease-standard), box-shadow var(--ds-motion-duration-base) var(--ds-motion-ease-standard);
+}
+.ds-select--sm {
+  padding: var(--ds-space-2) var(--ds-space-7) var(--ds-space-2) var(--ds-space-3);
+  font-size: var(--ds-font-size-100);
+}
+.ds-select--md {
+  padding: var(--ds-space-3) var(--ds-space-7) var(--ds-space-3) var(--ds-space-4);
+}
+.ds-select--lg {
+  padding: var(--ds-space-4) var(--ds-space-7) var(--ds-space-4) var(--ds-space-5);
+  font-size: var(--ds-font-size-300);
+}
+.ds-select:focus-visible {
+  outline: none;
+  border-color: var(--ds-color-focus-ring);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-color-focus-ring) 30%, transparent);
+}
+.ds-select--invalid {
+  border-color: var(--ds-color-danger);
+}
+.ds-select:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* src/components/Checkbox/Checkbox.css */
+.ds-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-space-2);
+  font-family: var(--ds-font-body);
+  font-size: var(--ds-font-size-200);
+  color: var(--ds-color-font-0);
+  cursor: pointer;
+}
+.ds-checkbox__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  margin: 0;
+}
+.ds-checkbox__box {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.15rem;
+  height: 1.15rem;
+  flex-shrink: 0;
+  border: 1px solid var(--ds-color-field-border);
+  border-radius: var(--ds-radius-sm);
+  background-color: var(--ds-color-field-bg);
+  transition: background-color var(--ds-motion-duration-fast) var(--ds-motion-ease-standard), border-color var(--ds-motion-duration-fast) var(--ds-motion-ease-standard);
+}
+.ds-checkbox__box::after {
+  content: "";
+  width: 0.3rem;
+  height: 0.55rem;
+  border: solid var(--ds-color-on-info);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg) scale(0);
+  transition: transform var(--ds-motion-duration-fast) var(--ds-motion-ease-standard);
+  margin-top: -2px;
+}
+.ds-checkbox__input:checked + .ds-checkbox__box {
+  background-color: var(--ds-color-bg-2);
+  border-color: var(--ds-color-bg-2);
+}
+.ds-checkbox__input:checked + .ds-checkbox__box::after {
+  transform: rotate(45deg) scale(1);
+}
+.ds-checkbox__input:focus-visible + .ds-checkbox__box {
+  outline: 2px solid var(--ds-color-focus-ring);
+  outline-offset: 2px;
+}
+.ds-checkbox__input:disabled ~ * {
+  opacity: 0.5;
+}
+.ds-checkbox:has(.ds-checkbox__input:disabled) {
+  cursor: not-allowed;
+}
+
+/* src/components/Radio/Radio.css */
+.ds-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-space-2);
+}
+.ds-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-space-2);
+  font-family: var(--ds-font-body);
+  font-size: var(--ds-font-size-200);
+  color: var(--ds-color-font-0);
+  cursor: pointer;
+}
+.ds-radio__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  margin: 0;
+}
+.ds-radio__dot {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.15rem;
+  height: 1.15rem;
+  flex-shrink: 0;
+  border: 1px solid var(--ds-color-field-border);
+  border-radius: var(--ds-radius-pill);
+  background-color: var(--ds-color-field-bg);
+  transition: border-color var(--ds-motion-duration-fast) var(--ds-motion-ease-standard);
+}
+.ds-radio__dot::after {
+  content: "";
+  width: 0.6rem;
+  height: 0.6rem;
+  border-radius: var(--ds-radius-pill);
+  background-color: var(--ds-color-bg-2);
+  transform: scale(0);
+  transition: transform var(--ds-motion-duration-fast) var(--ds-motion-ease-standard);
+}
+.ds-radio__input:checked + .ds-radio__dot {
+  border-color: var(--ds-color-bg-2);
+}
+.ds-radio__input:checked + .ds-radio__dot::after {
+  transform: scale(1);
+}
+.ds-radio__input:focus-visible + .ds-radio__dot {
+  outline: 2px solid var(--ds-color-focus-ring);
+  outline-offset: 2px;
+}
+.ds-radio__input:disabled ~ * {
+  opacity: 0.5;
+}
+
+/* src/components/Switch/Switch.css */
+.ds-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-space-2);
+  font-family: var(--ds-font-body);
+  font-size: var(--ds-font-size-200);
+  color: var(--ds-color-font-0);
+  cursor: pointer;
+}
+.ds-switch__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  margin: 0;
+}
+.ds-switch__track {
+  display: inline-flex;
+  align-items: center;
+  width: 2.5rem;
+  height: 1.4rem;
+  flex-shrink: 0;
+  padding: 2px;
+  border-radius: var(--ds-radius-pill);
+  background-color: var(--ds-color-bw-2);
+  transition: background-color var(--ds-motion-duration-base) var(--ds-motion-ease-standard);
+}
+.ds-switch__thumb {
+  width: 1rem;
+  height: 1rem;
+  border-radius: var(--ds-radius-pill);
+  background-color: var(--ds-color-bw-4);
+  transition: transform var(--ds-motion-duration-base) var(--ds-motion-ease-standard);
+}
+.ds-switch__input:checked + .ds-switch__track {
+  background-color: var(--ds-color-bg-2);
+}
+.ds-switch__input:checked + .ds-switch__track .ds-switch__thumb {
+  transform: translateX(1.1rem);
+}
+.ds-switch__input:focus-visible + .ds-switch__track {
+  outline: 2px solid var(--ds-color-focus-ring);
+  outline-offset: 2px;
+}
+.ds-switch__input:disabled ~ * {
+  opacity: 0.5;
+}
+
+/* src/components/Modal/Modal.css */
+.ds-modal {
+  position: fixed;
+  inset: 0;
+  z-index: var(--ds-z-modal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--ds-space-4);
+}
+.ds-modal__backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: var(--ds-z-overlay);
+  background-color: color-mix(in srgb, var(--ds-color-bw-0) 60%, transparent);
+  animation: ds-modal-fade var(--ds-motion-duration-base) var(--ds-motion-ease-standard);
+}
+.ds-modal__panel {
+  position: relative;
+  z-index: var(--ds-z-modal);
+  width: 100%;
+  max-height: calc(100vh - 2 * var(--ds-space-6));
+  overflow-y: auto;
+  background-color: var(--ds-color-bg-1);
+  color: var(--ds-color-font-0);
+  border: 1px solid var(--ds-color-bw-1);
+  border-radius: var(--ds-radius-lg);
+  box-shadow: var(--ds-shadow-lg);
+  animation: ds-modal-rise var(--ds-motion-duration-base) var(--ds-motion-ease-standard);
+}
+.ds-modal__panel--sm {
+  max-width: 24rem;
+}
+.ds-modal__panel--md {
+  max-width: 34rem;
+}
+.ds-modal__panel--lg {
+  max-width: 48rem;
+}
+.ds-modal__panel:focus-visible {
+  outline: none;
+}
+.ds-modal__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ds-space-4);
+  padding: var(--ds-space-5) var(--ds-space-5) 0;
+}
+.ds-modal__title {
+  margin: 0;
+  font-family: var(--ds-font-body);
+  font-weight: var(--ds-font-weight-bold);
+  font-size: var(--ds-font-size-400);
+  line-height: var(--ds-line-height-tight);
+}
+.ds-modal__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  flex-shrink: 0;
+  font-size: var(--ds-font-size-400);
+  line-height: 1;
+  color: var(--ds-color-font-1);
+  background: transparent;
+  border: none;
+  border-radius: var(--ds-radius-pill);
+  cursor: pointer;
+  transition: background-color var(--ds-motion-duration-fast) var(--ds-motion-ease-standard);
+}
+.ds-modal__close:hover {
+  background-color: var(--ds-color-bw-1);
+  color: var(--ds-color-font-0);
+}
+.ds-modal__close:focus-visible {
+  outline: 2px solid var(--ds-color-focus-ring);
+  outline-offset: 2px;
+}
+.ds-modal__body {
+  padding: var(--ds-space-5);
+}
+@keyframes ds-modal-fade {
+  from {
+    opacity: 0;
+  }
+}
+@keyframes ds-modal-rise {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ds-modal__backdrop,
+  .ds-modal__panel {
+    animation: none;
+  }
+}
+
+/* src/components/Menu/Menu.css */
+.ds-menu {
+  position: relative;
+  display: inline-block;
+}
+.ds-menu__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-space-2);
+  padding: var(--ds-space-3) var(--ds-space-4);
+  font-family: var(--ds-font-body);
+  font-size: var(--ds-font-size-200);
+  font-weight: var(--ds-font-weight-medium);
+  color: var(--ds-color-font-0);
+  background-color: var(--ds-color-field-bg);
+  border: 1px solid var(--ds-color-field-border);
+  border-radius: var(--ds-radius-md);
+  cursor: pointer;
+}
+.ds-menu__trigger:focus-visible {
+  outline: 2px solid var(--ds-color-focus-ring);
+  outline-offset: 2px;
+}
+.ds-menu__list {
+  position: absolute;
+  top: calc(100% + var(--ds-space-2));
+  z-index: var(--ds-z-dropdown);
+  min-width: 12rem;
+  margin: 0;
+  padding: var(--ds-space-2);
+  list-style: none;
+  background-color: var(--ds-color-bg-1);
+  border: 1px solid var(--ds-color-bw-1);
+  border-radius: var(--ds-radius-md);
+  box-shadow: var(--ds-shadow-md);
+  animation: ds-menu-open var(--ds-motion-duration-fast) var(--ds-motion-ease-standard);
+}
+.ds-menu__list--start {
+  left: 0;
+}
+.ds-menu__list--end {
+  right: 0;
+}
+.ds-menu__item {
+  display: block;
+  width: 100%;
+  padding: var(--ds-space-2) var(--ds-space-3);
+  text-align: left;
+  font-family: var(--ds-font-body);
+  font-size: var(--ds-font-size-200);
+  color: var(--ds-color-font-0);
+  background: transparent;
+  border: none;
+  border-radius: var(--ds-radius-sm);
+  cursor: pointer;
+}
+.ds-menu__item:hover:not(:disabled),
+.ds-menu__item:focus-visible {
+  background-color: var(--ds-color-bw-1);
+  outline: none;
+}
+.ds-menu__item:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+@keyframes ds-menu-open {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ds-menu__list {
+    animation: none;
+  }
+}
+
+/* src/components/Tabs/Tabs.css */
+.ds-tabs__list {
+  display: flex;
+  gap: var(--ds-space-1);
+  border-bottom: 1px solid var(--ds-color-bw-1);
+}
+.ds-tabs__tab {
+  position: relative;
+  padding: var(--ds-space-3) var(--ds-space-4);
+  font-family: var(--ds-font-body);
+  font-size: var(--ds-font-size-200);
+  font-weight: var(--ds-font-weight-medium);
+  color: var(--ds-color-font-1);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: color var(--ds-motion-duration-base) var(--ds-motion-ease-standard);
+}
+.ds-tabs__tab::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -1px;
+  height: 2px;
+  background-color: var(--ds-color-bg-2);
+  transform: scaleX(0);
+  transition: transform var(--ds-motion-duration-base) var(--ds-motion-ease-standard);
+}
+.ds-tabs__tab:hover:not(:disabled) {
+  color: var(--ds-color-font-0);
+}
+.ds-tabs__tab--active {
+  color: var(--ds-color-font-0);
+}
+.ds-tabs__tab--active::after {
+  transform: scaleX(1);
+}
+.ds-tabs__tab:focus-visible {
+  outline: 2px solid var(--ds-color-focus-ring);
+  outline-offset: -2px;
+  border-radius: var(--ds-radius-sm);
+}
+.ds-tabs__tab:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.ds-tabs__panel {
+  padding-top: var(--ds-space-4);
+}
+.ds-tabs__panel:focus-visible {
+  outline: none;
+}
+
+/* src/components/Accordion/Accordion.css */
+.ds-accordion {
+  border: 1px solid var(--ds-color-bw-1);
+  border-radius: var(--ds-radius-md);
+  overflow: hidden;
+}
+.ds-accordion__item + .ds-accordion__item {
+  border-top: 1px solid var(--ds-color-bw-1);
+}
+.ds-accordion__heading {
+  margin: 0;
+}
+.ds-accordion__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ds-space-4);
+  width: 100%;
+  padding: var(--ds-space-4) var(--ds-space-5);
+  font-family: var(--ds-font-body);
+  font-size: var(--ds-font-size-200);
+  font-weight: var(--ds-font-weight-medium);
+  text-align: left;
+  color: var(--ds-color-font-0);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: background-color var(--ds-motion-duration-fast) var(--ds-motion-ease-standard);
+}
+.ds-accordion__trigger:hover {
+  background-color: var(--ds-color-bw-1);
+}
+.ds-accordion__trigger:focus-visible {
+  outline: 2px solid var(--ds-color-focus-ring);
+  outline-offset: -2px;
+}
+.ds-accordion__icon {
+  width: 0.6rem;
+  height: 0.6rem;
+  flex-shrink: 0;
+  border-right: 2px solid var(--ds-color-font-1);
+  border-bottom: 2px solid var(--ds-color-font-1);
+  transform: rotate(45deg);
+  transition: transform var(--ds-motion-duration-base) var(--ds-motion-ease-standard);
+}
+.ds-accordion__trigger[aria-expanded=true] .ds-accordion__icon {
+  transform: rotate(-135deg);
+}
+.ds-accordion__content {
+  padding: 0 var(--ds-space-5) var(--ds-space-5);
+  color: var(--ds-color-font-0);
+}
+@media (prefers-reduced-motion: reduce) {
+  .ds-accordion__icon {
+    transition: none;
+  }
+}
+
+/* src/components/SlideRuleNav/SlideRuleNav.css */
+.ds-rule {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+.ds-rule__stage {
+  position: relative;
+  min-width: 640px;
+}
+.ds-rule__chrome {
+  display: block;
+  width: 100%;
+  height: auto;
+  overflow: visible;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+.ds-rule__rail {
+  fill: var(--ds-rule-plate);
+  stroke: var(--ds-rule-edge);
+  stroke-width: 1;
+}
+.ds-rule__rivet {
+  fill: var(--ds-rule-brass);
+  stroke: var(--ds-rule-brass);
+  stroke-width: 0.5;
+}
+.ds-rule__tick {
+  stroke: var(--ds-rule-tick);
+  stroke-width: 1;
+  shape-rendering: crispEdges;
+}
+.ds-rule__tick--half {
+  opacity: 0.75;
+}
+.ds-rule__tick--quarter {
+  opacity: 0.5;
+}
+.ds-rule__numeral {
+  font-family: var(--ds-font-body);
+  font-size: 8px;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.04em;
+  fill: var(--ds-rule-ink-soft);
+}
+.ds-rule__numeral--accent {
+  fill: var(--ds-rule-hair);
+}
+.ds-rule__caption {
+  font-family: var(--ds-font-body);
+  font-size: 8px;
+  letter-spacing: 0.16em;
+  fill: var(--ds-rule-ink-soft);
+}
+.ds-rule__carriage {
+  cursor: grab;
+}
+.ds-rule__carriage:active {
+  cursor: grabbing;
+}
+.ds-rule__glass {
+  fill: var(--ds-rule-glass);
+  stroke: var(--ds-rule-glass-edge);
+  stroke-width: 0.75;
+}
+.ds-rule__frame {
+  fill: none;
+  stroke: var(--ds-rule-glass-edge);
+  stroke-width: 2.4;
+  stroke-linejoin: round;
+  opacity: 0.7;
+}
+.ds-rule__hairline {
+  stroke: var(--ds-rule-hair);
+  stroke-width: 1.1;
+}
+.ds-rule__pawl {
+  fill: var(--ds-rule-brass);
+}
+.ds-rule__pawl-spring {
+  fill: var(--ds-rule-brass);
+  opacity: 0.45;
+}
+.ds-rule__vernier-line {
+  stroke: var(--ds-rule-tick);
+  stroke-width: 1;
+  shape-rendering: crispEdges;
+}
+.ds-rule__vernier-line--lit {
+  stroke: var(--ds-rule-hair);
+  stroke-width: 2;
+}
+.ds-rule__stations {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  pointer-events: none;
+}
+.ds-rule__station {
+  position: absolute;
+  left: var(--station-x);
+  top: var(--station-y);
+  transform: translate(-50%, -100%);
+  pointer-events: auto;
+}
+.ds-rule__link {
+  display: inline-block;
+  padding: var(--ds-space-1) var(--ds-space-2);
+  border: none;
+  border-bottom: 2px solid transparent;
+  border-radius: var(--ds-radius-sm);
+  background: transparent;
+  font-family: var(--ds-font-body);
+  font-size: var(--ds-font-size-100);
+  font-weight: var(--ds-font-weight-semibold);
+  letter-spacing: 0.13em;
+  text-transform: uppercase;
+  text-decoration: none;
+  white-space: nowrap;
+  color: var(--ds-rule-ink-soft);
+  cursor: pointer;
+  transition: color var(--ds-motion-duration-base) var(--ds-motion-ease-standard);
+}
+.ds-rule__link:hover {
+  color: var(--ds-rule-ink);
+}
+.ds-rule__link:focus-visible {
+  outline: 2px solid var(--ds-color-focus-ring);
+  outline-offset: 2px;
+}
+.ds-rule__link--active {
+  color: var(--ds-rule-ink);
+  border-bottom-color: var(--ds-rule-hair);
+}
+.ds-rule__readout {
+  margin-top: var(--ds-space-3);
+  font-family: var(--ds-font-body);
+  font-size: var(--ds-font-size-100);
+  letter-spacing: 0.13em;
+  text-transform: uppercase;
+  color: var(--ds-rule-ink-soft);
+}
+.ds-rule__readout-key {
+  opacity: 0.7;
+}
+.ds-rule__readout-val {
+  color: var(--ds-rule-ink);
+  border-bottom: 1.5px solid var(--ds-rule-hair);
+}
+.ds-rule__readout-num {
+  color: var(--ds-rule-hair);
+  font-variant-numeric: tabular-nums;
+}
+.ds-rule__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .ds-rule__link {
+    transition-duration: 0.01ms;
+  }
+}
+.ds-rule__shoe {
+  fill: var(--ds-rule-glass-edge);
+}
+.ds-rule__slide {
+  fill: var(--ds-rule-plate-2);
+  stroke: var(--ds-rule-edge);
+  stroke-width: 1;
+}
+.ds-rule__index {
+  fill: var(--ds-rule-hair);
+}
+.ds-rule__caption--accent {
+  fill: var(--ds-rule-hair);
+}
+.ds-rule__window {
+  pointer-events: none;
+}
+.ds-rule--slide .ds-rule__stations {
+  clip-path: inset(0 3.33% 0 3.33%);
+}
+.ds-rule--slide .ds-rule__stage {
+  overflow: hidden;
+}
+/*# sourceMappingURL=index.css.map */