@5voltfx/design-system 0.1.1 → 0.2.0

package/dist/index.css

@@ -220,6 +220,47 @@ body {
   --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 */
@@ -541,4 +582,817 @@ body {
     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 */