minora 0.1.0

package/src/components/toggle.css

@@ -0,0 +1,457 @@
+/* ============================================================
+   ELEGANT MINIMALIST UI KIT — Toggle / Switch Component
+   toggle.css
+
+   ANATOMY — SWITCH
+   ─────────────────────────────────────────────────────────────
+   Structure:
+     <label class="switch switch-md">
+       <input type="checkbox" class="switch-native" />
+       <span class="switch-track">
+         <span class="switch-thumb">
+           <!-- optional icon inside thumb -->
+         </span>
+         <!-- optional ON/OFF labels inside track -->
+       </span>
+       <span class="switch-label">Label text</span>
+     </label>
+
+   Class layers:
+     1. .switch              → Wrapper label, flex layout
+     2. .switch-{size}       → Track & thumb sizes (sm/md/lg)
+     3. .switch-{variant}    → Style (card/icon/labels)
+     4. .switch-label-{pos}  → Label position (right/left/top)
+     5. .switch-native       → Hidden native checkbox (accessible)
+     6. .switch-track        → Pill-shaped background
+     7. .switch-thumb        → Circle that slides via translateX
+   ─────────────────────────────────────────────────────────────
+
+   ANATOMY — SWITCH GROUP
+   ─────────────────────────────────────────────────────────────
+     <div class="switch-group">
+       <span class="switch-group-label">Settings</span>
+       <div class="switch-group-item">
+         <label class="switch switch-md">...</label>
+       </div>
+       <div class="switch-separator"></div>
+       <div class="switch-group-item">
+         <label class="switch switch-md">...</label>
+       </div>
+     </div>
+   ─────────────────────────────────────────────────────────────
+   ============================================================ */
+
+/* ═══════════════════════════════════════════════════════════
+   SWITCH — Base wrapper (label)
+   ═══════════════════════════════════════════════════════════ */
+
+.switch {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--control-gap);
+  cursor: pointer;
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  color: var(--input-text-color);
+  line-height: var(--leading-tight);
+  position: relative;
+}
+
+/* Hide native input — accessible but invisible */
+.switch-native {
+  position: absolute;
+  width: var(--space-0);
+  height: var(--space-0);
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* ── Track (pill shape) ─────────────────────────────────── */
+.switch-track {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+  width: var(--switch-md-track-w);
+  height: var(--switch-md-track-h);
+  border-radius: var(--radius-pill);
+  background-color: var(--switch-track-off);
+  transition: background-color var(--duration-normal) var(--ease-in-out),
+              box-shadow var(--duration-fast) var(--ease-out);
+  position: relative;
+  padding: var(--space-0-5);
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+/* ── Thumb (circle that slides) ─────────────────────────── */
+.switch-thumb {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--switch-md-thumb);
+  height: var(--switch-md-thumb);
+  border-radius: var(--radius-pill);
+  background-color: var(--switch-thumb);
+  box-shadow: var(--switch-thumb-shadow);
+  transform: translateX(0);
+  transition: transform var(--duration-normal) var(--ease-out);
+  position: relative;
+  flex-shrink: 0;
+}
+
+/* Checked: slide thumb to right, change track color */
+.switch-native:checked ~ .switch-track {
+  background-color: var(--switch-track-on);
+}
+
+.switch-native:checked ~ .switch-track .switch-thumb {
+  transform: translateX(var(--switch-md-translate));
+}
+
+/* ── Sizes ──────────────────────────────────────────────── */
+
+/* Small */
+.switch-sm .switch-track {
+  width: var(--switch-sm-track-w);
+  height: var(--switch-sm-track-h);
+}
+
+.switch-sm .switch-thumb {
+  width: var(--switch-sm-thumb);
+  height: var(--switch-sm-thumb);
+}
+
+.switch-sm .switch-native:checked ~ .switch-track .switch-thumb {
+  transform: translateX(var(--switch-sm-translate));
+}
+
+/* Medium (default) — sizes already set on base */
+
+/* Large */
+.switch-lg .switch-track {
+  width: var(--switch-lg-track-w);
+  height: var(--switch-lg-track-h);
+}
+
+.switch-lg .switch-thumb {
+  width: var(--switch-lg-thumb);
+  height: var(--switch-lg-thumb);
+}
+
+.switch-lg .switch-native:checked ~ .switch-track .switch-thumb {
+  transform: translateX(var(--switch-lg-translate));
+}
+
+/* ═══════════════════════════════════════════════════════════
+   SWITCH — Icon inside thumb
+   ═══════════════════════════════════════════════════════════ */
+
+.switch-thumb-icon {
+  width: 55%;
+  height: 55%;
+  stroke: var(--color-accent-500);
+  fill: none;
+  stroke-width: 2.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  opacity: 0;
+  transform: scale(0.7);
+  transition: opacity var(--duration-fast) var(--ease-in-out),
+              transform var(--duration-fast) var(--ease-out);
+}
+
+/* Show icon when on */
+.switch-native:checked ~ .switch-track .switch-thumb-icon.is-on {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* Show off icon when off */
+.switch-track .switch-thumb-icon.is-off {
+  opacity: 0.4;
+  stroke: var(--color-neutral-400);
+  transform: scale(1);
+}
+
+.switch-native:checked ~ .switch-track .switch-thumb-icon.is-off {
+  opacity: 0;
+  transform: scale(0.7);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   SWITCH — ON/OFF labels inside track
+   ═══════════════════════════════════════════════════════════ */
+
+.switch-track .switch-label-on,
+.switch-track .switch-label-off {
+  font-family: var(--font-sans);
+  font-size: var(--switch-label-font-size);
+  font-weight: var(--font-semibold);
+  line-height: 1;
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-wider);
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  user-select: none;
+  -webkit-user-select: none;
+  pointer-events: none;
+}
+
+.switch-track .switch-label-off {
+  left: var(--space-1-5);
+  color: var(--color-neutral-500);
+}
+
+.switch-track .switch-label-on {
+  right: var(--space-1-5);
+  color: var(--color-neutral-50);
+  opacity: 0;
+  transition: opacity var(--duration-fast) var(--ease-in-out);
+}
+
+.switch-native:checked ~ .switch-track .switch-label-on {
+  opacity: 1;
+}
+
+/* Hide labels when thumb covers them */
+.switch-track .switch-label-off {
+  transition: opacity var(--duration-fast) var(--ease-in-out);
+}
+
+.switch-native:checked ~ .switch-track .switch-label-off {
+  opacity: 0;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   SWITCH — Variant: Card
+   Entire row clickable, like a settings item.
+   ═══════════════════════════════════════════════════════════ */
+
+.switch-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding: var(--space-4);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-md);
+  background-color: var(--select-bg);
+  transition: border-color var(--duration-normal) var(--ease-in-out),
+              background-color var(--duration-fast) var(--ease-in-out),
+              box-shadow var(--duration-fast) var(--ease-out);
+  width: 100%;
+  cursor: pointer;
+}
+
+.switch-card:hover {
+  border-color: var(--border-color-strong);
+  background-color: var(--color-neutral-50);
+}
+
+.switch-card .switch-content {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  min-width: 0;
+  flex: 1;
+}
+
+.switch-card-icon {
+  flex-shrink: 0;
+  width: var(--space-5);
+  height: var(--space-5);
+  color: var(--color-neutral-500);
+}
+
+.switch-card-text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-0-5);
+  min-width: 0;
+}
+
+.switch-card-title {
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--input-text-color);
+}
+
+.switch-card-desc {
+  font-size: var(--text-xs);
+  color: var(--input-helper-color);
+  line-height: var(--leading-tight);
+}
+
+.switch-card .switch-track {
+  flex-shrink: 0;
+}
+
+.switch-card .switch-native:checked ~ .switch-track {
+  background-color: var(--switch-track-on);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   SWITCH — Label positions
+   ═══════════════════════════════════════════════════════════ */
+
+/* Label left (switch on right) */
+.switch-label-left {
+  flex-direction: row-reverse;
+}
+
+/* Label top (switch below) */
+.switch-label-top {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.switch-label-top .switch-track {
+  margin-top: var(--space-1-5);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   SWITCH — States
+   ═══════════════════════════════════════════════════════════ */
+
+/* Focus visible */
+.switch-native:focus-visible ~ .switch-track {
+  outline: var(--focus-ring-width) solid var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
+}
+
+/* Disabled */
+.switch.is-disabled {
+  opacity: var(--switch-disabled-opacity);
+  cursor: var(--input-disabled-cursor);
+  pointer-events: none;
+}
+
+.switch-card.is-disabled {
+  opacity: var(--switch-disabled-opacity);
+  cursor: var(--input-disabled-cursor);
+  pointer-events: none;
+}
+
+/* Loading state — thumb spins */
+.switch.is-loading .switch-thumb {
+  animation: switch-spin var(--anim-spin-duration) linear infinite;
+  background-image: none;
+  position: relative;
+}
+
+.switch.is-loading .switch-thumb::before {
+  content: '';
+  position: absolute;
+  inset: var(--switch-spinner-inset);
+  border-radius: var(--radius-pill);
+  border: var(--border-width-2) solid var(--color-neutral-300);
+  border-top-color: var(--color-accent-500);
+  animation: switch-spinner-ring var(--anim-spinner-fast) linear infinite;
+}
+
+.switch.is-loading .switch-track {
+  background-color: var(--color-neutral-200);
+  cursor: wait;
+}
+
+@keyframes switch-spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+@keyframes switch-spinner-ring {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* Override translate during loading so thumb stays centered */
+.switch.is-loading .switch-native:checked ~ .switch-track .switch-thumb {
+  animation: switch-spin var(--anim-spin-duration) linear infinite;
+  transform: translateX(var(--switch-md-translate));
+}
+
+.switch-sm.is-loading .switch-native:checked ~ .switch-track .switch-thumb {
+  transform: translateX(var(--switch-sm-translate));
+}
+
+.switch-lg.is-loading .switch-native:checked ~ .switch-track .switch-thumb {
+  transform: translateX(var(--switch-lg-translate));
+}
+
+/* ═══════════════════════════════════════════════════════════
+   SWITCH GROUP — Container with separators
+   ═══════════════════════════════════════════════════════════ */
+
+.switch-group {
+  display: flex;
+  flex-direction: column;
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-md);
+  background-color: var(--select-bg);
+  overflow: hidden;
+}
+
+.switch-group-label {
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  font-weight: var(--font-semibold);
+  color: var(--input-label-color);
+  padding: var(--space-4) var(--space-4) var(--space-2);
+  display: block;
+}
+
+.switch-group-helper {
+  font-family: var(--font-sans);
+  font-size: var(--text-xs);
+  color: var(--input-helper-color);
+  padding: var(--space-2) var(--space-4) var(--space-4);
+  display: block;
+}
+
+.switch-group-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-3) var(--space-4);
+  transition: background-color var(--duration-fast) var(--ease-in-out);
+}
+
+.switch-group-item:hover {
+  background-color: var(--color-neutral-50);
+}
+
+/* Separator between items */
+.switch-separator {
+  height: var(--border-width);
+  background-color: var(--color-neutral-100);
+  margin: 0 var(--space-4);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   SWITCH GROUP — Error state
+   ═══════════════════════════════════════════════════════════ */
+
+.switch-group-error .switch-group {
+  border-color: var(--color-error);
+}
+
+.switch-group-error-msg {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  margin-top: var(--space-2);
+  font-family: var(--font-sans);
+  font-size: var(--text-xs);
+  font-weight: var(--font-medium);
+  color: var(--color-error);
+  line-height: var(--leading-tight);
+}
+
+.switch-group-error-msg svg {
+  width: var(--space-3);
+  height: var(--space-3);
+  flex-shrink: 0;
+  color: var(--color-error);
+}