npm - snice - Versions diffs - 1.14.3 → 2.1.0 - Mend

snice 1.14.3 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (185) hide show

package/bin/templates/base/tsconfig.json +5 -4
package/components/accordion/demo.html +403 -0
package/components/accordion/snice-accordion-item.css +85 -0
package/components/accordion/snice-accordion-item.ts +226 -0
package/components/accordion/snice-accordion.css +31 -0
package/components/accordion/snice-accordion.ts +182 -0
package/components/accordion/snice-accordion.types.ts +32 -0
package/components/alert/demo.html +445 -0
package/components/alert/snice-alert.css +195 -0
package/components/alert/snice-alert.ts +141 -0
package/components/alert/snice-alert.types.ts +12 -0
package/components/avatar/demo.html +598 -0
package/components/avatar/snice-avatar.css +131 -0
package/components/avatar/snice-avatar.ts +136 -0
package/components/avatar/snice-avatar.types.ts +13 -0
package/components/badge/demo.html +523 -0
package/components/badge/snice-badge.css +161 -0
package/components/badge/snice-badge.ts +117 -0
package/components/badge/snice-badge.types.ts +16 -0
package/components/breadcrumbs/demo.html +404 -0
package/components/breadcrumbs/snice-breadcrumbs.css +133 -0
package/components/breadcrumbs/snice-breadcrumbs.ts +191 -0
package/components/breadcrumbs/snice-breadcrumbs.types.ts +26 -0
package/components/breadcrumbs/snice-crumb.ts +26 -0
package/components/button/demo.html +42 -0
package/components/button/snice-button.css +230 -0
package/components/button/snice-button.ts +169 -0
package/components/button/snice-button.types.ts +25 -0
package/components/card/demo.html +525 -0
package/components/card/snice-card.css +140 -0
package/components/card/snice-card.ts +102 -0
package/components/card/snice-card.types.ts +10 -0
package/components/checkbox/demo.html +253 -0
package/components/checkbox/snice-checkbox.css +164 -0
package/components/checkbox/snice-checkbox.ts +223 -0
package/components/checkbox/snice-checkbox.types.ts +22 -0
package/components/chip/demo.html +383 -0
package/components/chip/snice-chip.css +195 -0
package/components/chip/snice-chip.ts +139 -0
package/components/chip/snice-chip.types.ts +15 -0
package/components/date-picker/README.md +233 -0
package/components/date-picker/demo.html +191 -0
package/components/date-picker/snice-date-picker.css +330 -0
package/components/date-picker/snice-date-picker.ts +777 -0
package/components/date-picker/snice-date-picker.types.ts +83 -0
package/components/divider/demo.html +233 -0
package/components/divider/snice-divider.css +155 -0
package/components/divider/snice-divider.ts +69 -0
package/components/divider/snice-divider.types.ts +15 -0
package/components/drawer/demo.html +328 -0
package/components/drawer/snice-drawer.css +476 -0
package/components/drawer/snice-drawer.ts +287 -0
package/components/drawer/snice-drawer.types.ts +17 -0
package/components/global.d.ts +14 -0
package/components/input/demo.html +303 -0
package/components/input/snice-input.css +257 -0
package/components/input/snice-input.ts +442 -0
package/components/input/snice-input.types.ts +59 -0
package/components/input/test.html +77 -0
package/components/layout/README.md +260 -0
package/components/layout/demo.html +538 -0
package/components/layout/snice-layout-blog.css +129 -0
package/components/layout/snice-layout-blog.ts +48 -0
package/components/layout/snice-layout-card.css +104 -0
package/components/layout/snice-layout-card.ts +35 -0
package/components/layout/snice-layout-centered.css +51 -0
package/components/layout/snice-layout-centered.ts +22 -0
package/components/layout/snice-layout-dashboard.css +98 -0
package/components/layout/snice-layout-dashboard.ts +45 -0
package/components/layout/snice-layout-fullscreen.css +72 -0
package/components/layout/snice-layout-fullscreen.ts +34 -0
package/components/layout/snice-layout-landing.css +92 -0
package/components/layout/snice-layout-landing.ts +47 -0
package/components/layout/snice-layout-minimal.css +16 -0
package/components/layout/snice-layout-minimal.ts +19 -0
package/components/layout/snice-layout-sidebar.css +117 -0
package/components/layout/snice-layout-sidebar.ts +48 -0
package/components/layout/snice-layout-split.css +103 -0
package/components/layout/snice-layout-split.ts +29 -0
package/components/layout/snice-layout.css +72 -0
package/components/layout/snice-layout.ts +35 -0
package/components/layout/snice-layout.types.ts +5 -0
package/components/login/demo-auth-controller.ts +185 -0
package/components/login/demo.html +470 -0
package/components/login/snice-login.css +204 -0
package/components/login/snice-login.ts +337 -0
package/components/login/snice-login.types.ts +34 -0
package/components/modal/demo.html +291 -0
package/components/modal/snice-modal.css +203 -0
package/components/modal/snice-modal.ts +233 -0
package/components/modal/snice-modal.types.ts +21 -0
package/components/pagination/demo.html +395 -0
package/components/pagination/snice-pagination.ts +333 -0
package/components/pagination/snice-pagination.types.ts +21 -0
package/components/progress/demo.html +510 -0
package/components/progress/snice-progress.css +267 -0
package/components/progress/snice-progress.ts +247 -0
package/components/progress/snice-progress.types.ts +19 -0
package/components/radio/demo.html +287 -0
package/components/radio/snice-radio.css +171 -0
package/components/radio/snice-radio.ts +218 -0
package/components/radio/snice-radio.types.ts +21 -0
package/components/select/demo.html +511 -0
package/components/select/snice-option.ts +52 -0
package/components/select/snice-option.types.ts +14 -0
package/components/select/snice-select.css +392 -0
package/components/select/snice-select.ts +796 -0
package/components/select/snice-select.types.ts +55 -0
package/components/skeleton/demo.html +514 -0
package/components/skeleton/snice-skeleton.css +109 -0
package/components/skeleton/snice-skeleton.ts +126 -0
package/components/skeleton/snice-skeleton.types.ts +11 -0
package/components/switch/demo.html +284 -0
package/components/switch/snice-switch.css +221 -0
package/components/switch/snice-switch.ts +229 -0
package/components/switch/snice-switch.types.ts +23 -0
package/components/symbols.ts +23 -0
package/components/table/demo-table-controller.ts +100 -0
package/components/table/demo.html +480 -0
package/components/table/snice-cell-boolean.ts +112 -0
package/components/table/snice-cell-date.ts +210 -0
package/components/table/snice-cell-duration.ts +91 -0
package/components/table/snice-cell-filesize.ts +90 -0
package/components/table/snice-cell-number.ts +165 -0
package/components/table/snice-cell-progress.ts +83 -0
package/components/table/snice-cell-rating.ts +82 -0
package/components/table/snice-cell-sparkline.ts +253 -0
package/components/table/snice-cell-text.ts +125 -0
package/components/table/snice-cell.css +296 -0
package/components/table/snice-cell.ts +473 -0
package/components/table/snice-column.ts +353 -0
package/components/table/snice-header.css +243 -0
package/components/table/snice-header.ts +261 -0
package/components/table/snice-progress.ts +66 -0
package/components/table/snice-rating.ts +45 -0
package/components/table/snice-row.css +255 -0
package/components/table/snice-row.ts +331 -0
package/components/table/snice-table.css +241 -0
package/components/table/snice-table.ts +737 -0
package/components/table/snice-table.types.ts +158 -0
package/components/tabs/demo.html +487 -0
package/components/tabs/snice-tab-panel.css +264 -0
package/components/tabs/snice-tab-panel.ts +47 -0
package/components/tabs/snice-tab.css +96 -0
package/components/tabs/snice-tab.ts +65 -0
package/components/tabs/snice-tabs.css +189 -0
package/components/tabs/snice-tabs.ts +332 -0
package/components/tabs/snice-tabs.types.ts +28 -0
package/components/theme/theme.css +234 -0
package/components/toast/demo.html +329 -0
package/components/toast/snice-toast-container.ts +256 -0
package/components/toast/snice-toast.css +213 -0
package/components/toast/snice-toast.ts +276 -0
package/components/toast/snice-toast.types.ts +35 -0
package/components/tooltip/demo.html +350 -0
package/components/tooltip/snice-tooltip-portal.css +79 -0
package/components/tooltip/snice-tooltip.css +117 -0
package/components/tooltip/snice-tooltip.ts +612 -0
package/components/tooltip/snice-tooltip.types.ts +32 -0
package/components/transitions.ts +94 -0
package/components/tsconfig.json +18 -0
package/dist/index.cjs +441 -329
package/dist/index.cjs.map +1 -1
package/dist/index.cjs.min.map +1 -1
package/dist/index.esm.js +441 -329
package/dist/index.esm.js.map +1 -1
package/dist/index.esm.min.js +3 -3
package/dist/index.esm.min.js.map +1 -1
package/dist/index.iife.js +441 -329
package/dist/index.iife.js.map +1 -1
package/dist/index.iife.min.js +3 -3
package/dist/index.iife.min.js.map +1 -1
package/dist/symbols.esm.js +1 -1
package/dist/transitions.esm.js +1 -1
package/dist/types/controller.d.ts +1 -1
package/dist/types/element.d.ts +10 -10
package/dist/types/events.d.ts +2 -2
package/dist/types/index.d.ts +1 -1
package/dist/types/observe.d.ts +1 -1
package/dist/types/request-response.d.ts +2 -3
package/dist/types/router.d.ts +1 -1
package/package.json +9 -3
package/dist/index.cjs.min +0 -15
package/dist/symbols.cjs +0 -103
package/dist/transitions.cjs +0 -219

package/components/skeleton/snice-skeleton.ts ADDED Viewed

@@ -0,0 +1,126 @@
+import { element, property, watch, ready } from 'snice';
+import css from './snice-skeleton.css?inline';
+import type { SkeletonVariant, SkeletonAnimation, SniceSkeletonElement } from './snice-skeleton.types';
+@element('snice-skeleton')
+export class SniceSkeleton extends HTMLElement implements SniceSkeletonElement {
+  @property({ reflect: true })
+  variant: SkeletonVariant = 'text';
+  @property({ reflect: true })
+  width = '';
+  @property({ reflect: true })
+  height = '';
+  @property({ reflect: true })
+  animation: SkeletonAnimation = 'wave';
+  @property({ type: Number, reflect: true })
+  count = 1;
+  @property({ reflect: true })
+  spacing = '8px';
+  html() {
+    const items = Array(this.count).fill(0);
+    return /*html*/`
+      <div class="skeleton-container" style="gap: ${this.spacing}">
+        ${items.map(() => /*html*/`
+          <div class="skeleton skeleton--${this.variant} skeleton--${this.animation}"
+               style="${this.getInlineStyles()}"
+               role="status"
+               aria-label="Loading...">
+            <span class="skeleton-screen-reader">Loading...</span>
+          </div>
+        `).join('')}
+      </div>
+    `;
+  }
+  css() {
+    return css;
+  }
+  @ready()
+  init() {
+    this.updateDimensions();
+  }
+  @watch('width', 'height')
+  updateDimensions() {
+    const container = this.shadowRoot?.querySelector('.skeleton-container');
+    if (!container) return;
+    const skeletons = container.querySelectorAll('.skeleton');
+    skeletons.forEach(skeleton => {
+      (skeleton as HTMLElement).style.cssText = this.getInlineStyles();
+    });
+  }
+  @watch('variant')
+  updateVariant() {
+    // Re-render when variant changes to apply proper default dimensions
+    this.render();
+  }
+  private getInlineStyles(): string {
+    const styles: string[] = [];
+    // Apply width
+    if (this.width) {
+      styles.push(`width: ${this.width}`);
+    } else {
+      // Default widths based on variant
+      switch (this.variant) {
+        case 'circular':
+          styles.push('width: 40px');
+          break;
+        case 'rectangular':
+        case 'rounded':
+          styles.push('width: 100%');
+          break;
+        case 'text':
+          styles.push('width: 100%');
+          break;
+      }
+    }
+    // Apply height
+    if (this.height) {
+      styles.push(`height: ${this.height}`);
+    } else {
+      // Default heights based on variant
+      switch (this.variant) {
+        case 'circular':
+          styles.push('height: 40px');
+          break;
+        case 'rectangular':
+        case 'rounded':
+          styles.push('height: 120px');
+          break;
+        case 'text':
+          styles.push('height: 20px');
+          break;
+      }
+    }
+    return styles.join('; ');
+  }
+  private render() {
+    const shadow = this.shadowRoot;
+    if (shadow) {
+      shadow.innerHTML = '';
+      if (this.css) {
+        const style = document.createElement('style');
+        style.textContent = this.css();
+        shadow.appendChild(style);
+      }
+      const template = document.createElement('template');
+      template.innerHTML = this.html();
+      shadow.appendChild(template.content.cloneNode(true));
+    }
+  }
+}

package/components/skeleton/snice-skeleton.types.ts ADDED Viewed

@@ -0,0 +1,11 @@
+export type SkeletonVariant = 'text' | 'circular' | 'rectangular' | 'rounded';
+export type SkeletonAnimation = 'pulse' | 'wave' | 'none';
+export interface SniceSkeletonElement extends HTMLElement {
+  variant: SkeletonVariant;
+  width: string;
+  height: string;
+  animation: SkeletonAnimation;
+  count: number;
+  spacing: string;
+}

package/components/switch/demo.html ADDED Viewed

@@ -0,0 +1,284 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Toggle/Switch Demo</title>
+  <link rel="stylesheet" href="../theme/theme.css">
+  <style>
+    body {
+      padding: 40px;
+      font-family: var(--snice-font-family);
+      background: var(--snice-color-background);
+      color: var(--snice-color-text);
+      max-width: 800px;
+      margin: 0 auto;
+    }
+    .section {
+      margin-bottom: 40px;
+    }
+    h2 {
+      color: var(--snice-color-text);
+      margin-bottom: 20px;
+      font-size: var(--snice-font-size-2xl);
+    }
+    h3 {
+      color: var(--snice-color-text-secondary);
+      margin-bottom: 16px;
+      font-size: var(--snice-font-size-lg);
+    }
+    .switch-group {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      margin-bottom: 20px;
+    }
+    .row {
+      display: flex;
+      gap: 20px;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+    .output {
+      padding: 10px;
+      background: var(--snice-color-background-secondary);
+      border-radius: var(--snice-border-radius-md);
+      font-family: monospace;
+      font-size: var(--snice-font-size-sm);
+      margin-top: 10px;
+    }
+    button {
+      padding: 8px 16px;
+      background: var(--snice-color-primary);
+      color: white;
+      border: none;
+      border-radius: var(--snice-border-radius-md);
+      cursor: pointer;
+      font-size: var(--snice-font-size-md);
+      margin-right: 8px;
+    }
+    button:hover {
+      background: var(--snice-color-primary-hover);
+    }
+    .settings-card {
+      background: var(--snice-color-background-secondary);
+      border: 1px solid var(--snice-color-border);
+      border-radius: var(--snice-border-radius-lg);
+      padding: 20px;
+      margin-bottom: 20px;
+    }
+    .settings-card h4 {
+      margin-top: 0;
+      margin-bottom: 16px;
+      font-size: var(--snice-font-size-lg);
+    }
+    .setting-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 12px 0;
+      border-bottom: 1px solid var(--snice-color-border);
+    }
+    .setting-row:last-child {
+      border-bottom: none;
+    }
+    .setting-info {
+      flex: 1;
+      margin-right: 16px;
+    }
+    .setting-title {
+      font-weight: 500;
+      margin-bottom: 4px;
+    }
+    .setting-description {
+      font-size: var(--snice-font-size-sm);
+      color: var(--snice-color-text-secondary);
+    }
+  </style>
+</head>
+<body>
+  <h2>Toggle/Switch Component Demo</h2>
+  <div class="section">
+    <h3>Basic Toggles</h3>
+    <div class="switch-group">
+      <snice-switch label="Default switch"></snice-switch>
+      <snice-switch label="Pre-checked" checked></snice-switch>
+      <snice-switch label="Without label"></snice-switch>
+      <snice-switch label="Disabled" disabled></snice-switch>
+      <snice-switch label="Disabled checked" disabled checked></snice-switch>
+    </div>
+  </div>
+  <div class="section">
+    <h3>Sizes</h3>
+    <div class="switch-group">
+      <snice-switch size="small" label="Small switch"></snice-switch>
+      <snice-switch size="medium" label="Medium switch (default)"></snice-switch>
+      <snice-switch size="large" label="Large switch"></snice-switch>
+    </div>
+  </div>
+  <div class="section">
+    <h3>With State Labels</h3>
+    <div class="switch-group">
+      <snice-switch size="medium" label="Medium with labels" label-on="ON" label-off="OFF"></snice-switch>
+      <snice-switch size="large" label="Large with labels" label-on="YES" label-off="NO" checked></snice-switch>
+      <snice-switch size="large" label="Enabled/Disabled" label-on="✓" label-off="✗"></snice-switch>
+    </div>
+  </div>
+  <div class="section">
+    <h3>States</h3>
+    <div class="switch-group">
+      <snice-switch label="Required field" required></snice-switch>
+      <snice-switch label="Invalid state" invalid></snice-switch>
+      <snice-switch label="Invalid and checked" invalid checked></snice-switch>
+    </div>
+  </div>
+  <div class="section">
+    <h3>Settings Panel Example</h3>
+    <div class="settings-card">
+      <h4>Notification Settings</h4>
+      <div class="setting-row">
+        <div class="setting-info">
+          <div class="setting-title">Email Notifications</div>
+          <div class="setting-description">Receive email updates about your account</div>
+        </div>
+        <snice-switch id="email-notifications" checked></snice-switch>
+      </div>
+      <div class="setting-row">
+        <div class="setting-info">
+          <div class="setting-title">Push Notifications</div>
+          <div class="setting-description">Get push notifications on your device</div>
+        </div>
+        <snice-switch id="push-notifications"></snice-switch>
+      </div>
+      <div class="setting-row">
+        <div class="setting-info">
+          <div class="setting-title">Marketing Emails</div>
+          <div class="setting-description">Receive promotional content and updates</div>
+        </div>
+        <snice-switch id="marketing-emails"></snice-switch>
+      </div>
+      <div class="setting-row">
+        <div class="setting-info">
+          <div class="setting-title">Dark Mode</div>
+          <div class="setting-description">Use dark theme across the application</div>
+        </div>
+        <snice-switch id="dark-mode" size="large" label-on="🌙" label-off="☀️"></snice-switch>
+      </div>
+    </div>
+    <button onclick="getSettings()">Get Current Settings</button>
+    <div id="settings-output" class="output">Click button to see current settings</div>
+  </div>
+  <div class="section">
+    <h3>Feature Flags</h3>
+    <div class="switch-group">
+      <snice-switch id="feature-beta" label="Enable Beta Features" label-on="BETA" label-off=""></snice-switch>
+      <snice-switch id="feature-experimental" label="Experimental Mode" label-on="EXP" label-off=""></snice-switch>
+      <snice-switch id="feature-debug" label="Debug Mode" label-on="DBG" label-off=""></snice-switch>
+    </div>
+  </div>
+  <div class="section">
+    <h3>Interactive Example</h3>
+    <div class="switch-group">
+      <snice-switch
+        id="interactive-switch"
+        label="Interactive Toggle"
+        size="large"
+        label-on="ON"
+        label-off="OFF">
+      </snice-switch>
+    </div>
+    <div class="row">
+      <button onclick="document.getElementById('interactive-switch').toggle()">Toggle</button>
+      <button onclick="document.getElementById('interactive-switch').focus()">Focus</button>
+      <button onclick="document.getElementById('interactive-switch').checked = true">Turn On</button>
+      <button onclick="document.getElementById('interactive-switch').checked = false">Turn Off</button>
+    </div>
+    <div id="event-output" class="output">Events will appear here...</div>
+  </div>
+  <div class="section">
+    <h3>Form Example</h3>
+    <form id="demo-form">
+      <div class="switch-group">
+        <snice-switch name="terms" label="I accept the terms and conditions" required></snice-switch>
+        <snice-switch name="newsletter" label="Subscribe to newsletter"></snice-switch>
+        <snice-switch name="privacy" label="I accept the privacy policy" required></snice-switch>
+      </div>
+      <button type="submit">Submit</button>
+    </form>
+    <div id="form-output" class="output">Form data will appear here...</div>
+  </div>
+  <script type="module">
+    import './snice-switch.ts';
+    // Settings panel
+    window.getSettings = function() {
+      const settings = {
+        emailNotifications: document.getElementById('email-notifications').checked,
+        pushNotifications: document.getElementById('push-notifications').checked,
+        marketingEmails: document.getElementById('marketing-emails').checked,
+        darkMode: document.getElementById('dark-mode').checked
+      };
+      document.getElementById('settings-output').textContent =
+        `Settings: ${JSON.stringify(settings, null, 2)}`;
+    };
+    // Interactive switch events
+    const interactiveToggle = document.getElementById('interactive-switch');
+    const eventOutput = document.getElementById('event-output');
+    interactiveToggle.addEventListener('@snice/switch-change', (e) => {
+      eventOutput.textContent = `Changed: checked=${e.detail.checked}`;
+    });
+    // Feature flags
+    const featureToggles = document.querySelectorAll('[id^="feature-"]');
+    featureToggles.forEach(_switch => {
+      _switch.addEventListener('@snice/switch-change', (e) => {
+        console.log(`Feature ${_switch.id}: ${e.detail.checked ? 'enabled' : 'disabled'}`);
+      });
+    });
+    // Form submission
+    document.getElementById('demo-form').addEventListener('submit', (e) => {
+      e.preventDefault();
+      const data = {};
+      const switches = e.target.querySelectorAll('snice-switch');
+      switches.forEach(_switch => {
+        if (_switch.name) {
+          data[_switch.name] = _switch.checked;
+        }
+      });
+      document.getElementById('form-output').textContent =
+        `Form data: ${JSON.stringify(data, null, 2)}`;
+    });
+  </script>
+</body>
+</html>

package/components/switch/snice-switch.css ADDED Viewed

@@ -0,0 +1,221 @@
+:host {
+  display: inline-block;
+  font-family: var(--snice-font-family);
+}
+.switch-wrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem; /* 8px */
+  cursor: pointer;
+  user-select: none;
+}
+.switch-wrapper--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+/* Hide native checkbox */
+.switch-input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+/* Toggle track */
+.switch-track {
+  position: relative;
+  display: inline-block;
+  background: var(--snice-color-border);
+  border-radius: 999px;
+  transition: background-color var(--snice-transition-fast) ease;
+}
+/* Size variants */
+.switch-track--small {
+  width: 2.25rem; /* 36px */
+  height: 1.25rem; /* 20px */
+}
+.switch-track--medium {
+  width: 2.75rem; /* 44px */
+  height: 1.5rem; /* 24px */
+}
+.switch-track--large {
+  width: 3.25rem; /* 52px */
+  height: 1.75rem; /* 28px */
+}
+/* Toggle thumb */
+.switch-thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  background: white;
+  border-radius: 50%;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  transition: transform var(--snice-transition-fast) ease;
+}
+/* Thumb sizes */
+.switch-track--small .switch-thumb {
+  width: 1rem; /* 16px */
+  height: 1rem; /* 16px */
+}
+.switch-track--medium .switch-thumb {
+  width: 1.25rem; /* 20px */
+  height: 1.25rem; /* 20px */
+}
+.switch-track--large .switch-thumb {
+  width: 1.5rem; /* 24px */
+  height: 1.5rem; /* 24px */
+}
+/* Checked state */
+.switch-input:checked ~ .switch-track {
+  background: var(--snice-color-primary);
+}
+.switch-input:checked ~ .switch-track--small .switch-thumb {
+  transform: translateX(1rem); /* 16px */
+}
+.switch-input:checked ~ .switch-track--medium .switch-thumb {
+  transform: translateX(1.25rem); /* 20px */
+}
+.switch-input:checked ~ .switch-track--large .switch-thumb {
+  transform: translateX(1.5rem); /* 24px */
+}
+/* Focus state */
+.switch-input:focus-visible ~ .switch-track {
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+.switch-input:focus-visible ~ .switch-track {
+  outline: 2px solid var(--snice-color-primary);
+  outline-offset: 2px;
+}
+/* Disabled state */
+.switch-input:disabled ~ .switch-track {
+  background: var(--snice-color-background-secondary);
+}
+.switch-input:disabled ~ .switch-track .switch-thumb {
+  background: var(--snice-color-background);
+}
+.switch-input:disabled:checked ~ .switch-track {
+  background: var(--snice-color-text-secondary);
+}
+/* Invalid state */
+.switch-track--invalid {
+  background: var(--snice-color-danger-light);
+}
+.switch-input:checked ~ .switch-track--invalid {
+  background: var(--snice-color-danger);
+}
+/* Hover effect */
+.switch-wrapper:not(.switch-wrapper--disabled):hover .switch-track {
+  background: var(--snice-color-border-hover);
+}
+.switch-wrapper:not(.switch-wrapper--disabled):hover .switch-input:checked ~ .switch-track {
+  background: var(--snice-color-primary-hover);
+}
+/* Labels */
+.switch-label {
+  color: var(--snice-color-text);
+  cursor: pointer;
+}
+.switch-label--small {
+  font-size: var(--snice-font-size-sm);
+}
+.switch-label--medium {
+  font-size: var(--snice-font-size-md);
+}
+.switch-label--large {
+  font-size: var(--snice-font-size-lg);
+}
+.switch-wrapper--disabled .switch-label {
+  color: var(--snice-color-text-secondary);
+  cursor: not-allowed;
+}
+/* Required indicator */
+.switch-label--required::after {
+  content: ' *';
+  color: var(--snice-color-danger);
+}
+/* State labels (on/off text inside the track) */
+.switch-state-label {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 0.625rem; /* 10px */
+  font-weight: 600;
+  color: white;
+  text-transform: uppercase;
+  opacity: 0;
+  transition: opacity var(--snice-transition-fast) ease;
+  pointer-events: none;
+}
+.switch-state-label--on {
+  left: 0.375rem; /* 6px */
+}
+.switch-state-label--off {
+  right: 0.375rem; /* 6px */
+}
+.switch-track--medium .switch-state-label {
+  font-size: 0.6875rem; /* 11px */
+}
+.switch-track--large .switch-state-label {
+  font-size: 0.75rem; /* 12px */
+}
+.switch-input:checked ~ .switch-track .switch-state-label--on {
+  opacity: 0.8;
+}
+.switch-input:not(:checked) ~ .switch-track .switch-state-label--off {
+  opacity: 0.8;
+}
+/* Hide state labels on small size */
+.switch-track--small .switch-state-label {
+  display: none;
+}
+/* Loading state */
+.switch-track--loading .switch-thumb {
+  animation: switch-pulse 1s ease-in-out infinite;
+}
+@keyframes switch-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}