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/card/snice-card.ts ADDED Viewed

@@ -0,0 +1,102 @@
+import { element, property, on, dispatch, ready } from 'snice';
+import css from './snice-card.css?inline';
+import type { CardVariant, CardSize, SniceCardElement } from './snice-card.types';
+@element('snice-card')
+export class SniceCard extends HTMLElement implements SniceCardElement {
+  @property({ reflect: true })
+  variant: CardVariant = 'elevated';
+  @property({ reflect: true })
+  size: CardSize = 'medium';
+  @property({ type: Boolean, reflect: true })
+  clickable = false;
+  @property({ type: Boolean, reflect: true })
+  selected = false;
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+  private hasHeader = false;
+  private hasFooter = false;
+  html() {
+    return /*html*/`
+      <div class="card"
+           role="${this.clickable ? 'button' : 'article'}"
+           tabindex="${this.clickable && !this.disabled ? '0' : '-1'}"
+           aria-selected="${this.selected}"
+           aria-disabled="${this.disabled}">
+        <slot name="image" class="card-image-slot"></slot>
+        <div class="card-header" ${this.hasHeader ? '' : 'hidden'}>
+          <slot name="header"></slot>
+        </div>
+        <div class="card-body">
+          <slot></slot>
+        </div>
+        <div class="card-footer" ${this.hasFooter ? '' : 'hidden'}>
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    `;
+  }
+  css() {
+    return css;
+  }
+  @ready()
+  init() {
+    // Check for slotted content
+    this.setupSlotListeners();
+    this.checkSlots();
+  }
+  private setupSlotListeners() {
+    const slots = this.shadowRoot?.querySelectorAll('slot');
+    slots?.forEach(slot => {
+      slot.addEventListener('slotchange', () => this.checkSlots());
+    });
+  }
+  private checkSlots() {
+    const headerSlot = this.shadowRoot?.querySelector('slot[name="header"]') as HTMLSlotElement;
+    const footerSlot = this.shadowRoot?.querySelector('slot[name="footer"]') as HTMLSlotElement;
+    this.hasHeader = (headerSlot?.assignedNodes().length || 0) > 0;
+    this.hasFooter = (footerSlot?.assignedNodes().length || 0) > 0;
+    // Update visibility
+    const header = this.shadowRoot?.querySelector('.card-header') as HTMLElement;
+    const footer = this.shadowRoot?.querySelector('.card-footer') as HTMLElement;
+    if (header) header.toggleAttribute('hidden', !this.hasHeader);
+    if (footer) footer.toggleAttribute('hidden', !this.hasFooter);
+  }
+  @on('click', '.card')
+  @dispatch('card-click')
+  handleClick(event: MouseEvent) {
+    if (!this.clickable || this.disabled) return;
+    if (this.clickable && !this.disabled) {
+      this.selected = !this.selected;
+    }
+    return {
+      selected: this.selected
+    };
+  }
+  @on('keydown', '.card')
+  handleKeydown(event: KeyboardEvent) {
+    if (!this.clickable || this.disabled) return;
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      this.handleClick(new MouseEvent('click'));
+    }
+  }
+}

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

@@ -0,0 +1,10 @@
+export type CardVariant = 'elevated' | 'bordered' | 'flat';
+export type CardSize = 'small' | 'medium' | 'large';
+export interface SniceCardElement extends HTMLElement {
+  variant: CardVariant;
+  size: CardSize;
+  clickable: boolean;
+  selected: boolean;
+  disabled: boolean;
+}

package/components/checkbox/demo.html ADDED Viewed

@@ -0,0 +1,253 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Checkbox 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);
+    }
+    .checkbox-group {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      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);
+    }
+  </style>
+</head>
+<body>
+  <h2>Checkbox Component Demo</h2>
+  <div class="section">
+    <h3>Basic Checkboxes</h3>
+    <div class="checkbox-group">
+      <snice-checkbox label="Default checkbox"></snice-checkbox>
+      <snice-checkbox label="Pre-checked" checked></snice-checkbox>
+      <snice-checkbox label="Disabled" disabled></snice-checkbox>
+      <snice-checkbox label="Disabled checked" disabled checked></snice-checkbox>
+    </div>
+  </div>
+  <div class="section">
+    <h3>Sizes</h3>
+    <div class="checkbox-group">
+      <snice-checkbox size="small" label="Small checkbox"></snice-checkbox>
+      <snice-checkbox size="medium" label="Medium checkbox (default)"></snice-checkbox>
+      <snice-checkbox size="large" label="Large checkbox"></snice-checkbox>
+    </div>
+  </div>
+  <div class="section">
+    <h3>States</h3>
+    <div class="checkbox-group">
+      <snice-checkbox label="Required field" required></snice-checkbox>
+      <snice-checkbox label="Invalid state" invalid></snice-checkbox>
+      <snice-checkbox label="Invalid and checked" invalid checked></snice-checkbox>
+      <snice-checkbox id="indeterminate-checkbox" label="Indeterminate state" indeterminate></snice-checkbox>
+    </div>
+    <button onclick="document.getElementById('indeterminate-checkbox').setIndeterminate()">
+      Set Indeterminate
+    </button>
+    <button onclick="document.getElementById('indeterminate-checkbox').checked = true">
+      Check
+    </button>
+    <button onclick="document.getElementById('indeterminate-checkbox').checked = false">
+      Uncheck
+    </button>
+  </div>
+  <div class="section">
+    <h3>Checkbox Group Example</h3>
+    <div class="checkbox-group">
+      <strong>Select your interests:</strong>
+      <snice-checkbox name="interests" value="coding" label="Coding" checked></snice-checkbox>
+      <snice-checkbox name="interests" value="design" label="Design"></snice-checkbox>
+      <snice-checkbox name="interests" value="music" label="Music"></snice-checkbox>
+      <snice-checkbox name="interests" value="sports" label="Sports"></snice-checkbox>
+      <snice-checkbox name="interests" value="reading" label="Reading"></snice-checkbox>
+    </div>
+    <button onclick="getSelectedInterests()">Get Selected</button>
+    <div id="interests-output" class="output">Click button to see selected interests</div>
+  </div>
+  <div class="section">
+    <h3>Terms and Conditions Example</h3>
+    <div class="checkbox-group">
+      <snice-checkbox
+        id="terms-all"
+        label="Accept all terms"
+        indeterminate>
+      </snice-checkbox>
+      <div style="margin-left: 24px;">
+        <snice-checkbox
+          class="terms-item"
+          label="I accept the Terms of Service"
+          required>
+        </snice-checkbox>
+        <snice-checkbox
+          class="terms-item"
+          label="I accept the Privacy Policy"
+          required>
+        </snice-checkbox>
+        <snice-checkbox
+          class="terms-item"
+          label="I want to receive newsletters">
+        </snice-checkbox>
+      </div>
+    </div>
+  </div>
+  <div class="section">
+    <h3>Interactive Example</h3>
+    <div class="checkbox-group">
+      <snice-checkbox
+        id="interactive-checkbox"
+        label="Click me or press Space when focused">
+      </snice-checkbox>
+    </div>
+    <div class="row">
+      <button onclick="document.getElementById('interactive-checkbox').toggle()">Toggle</button>
+      <button onclick="document.getElementById('interactive-checkbox').focus()">Focus</button>
+      <button onclick="document.getElementById('interactive-checkbox').click()">Click</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="checkbox-group">
+        <snice-checkbox name="subscribe" label="Subscribe to newsletter"></snice-checkbox>
+        <snice-checkbox name="terms" label="I accept the terms" required></snice-checkbox>
+        <snice-checkbox name="privacy" label="I accept the privacy policy" required></snice-checkbox>
+      </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-checkbox.ts';
+    // Interactive checkbox events
+    const interactiveCheckbox = document.getElementById('interactive-checkbox');
+    const eventOutput = document.getElementById('event-output');
+    interactiveCheckbox.addEventListener('@snice/checkbox-change', (e) => {
+      eventOutput.textContent = `Changed: checked=${e.detail.checked}, indeterminate=${e.detail.indeterminate}`;
+    });
+    // Get selected interests
+    window.getSelectedInterests = function() {
+      const checkboxes = document.querySelectorAll('snice-checkbox[name="interests"]');
+      const selected = Array.from(checkboxes)
+        .filter(cb => cb.checked)
+        .map(cb => cb.value);
+      document.getElementById('interests-output').textContent =
+        `Selected: ${selected.length > 0 ? selected.join(', ') : 'None'}`;
+    };
+    // Terms "select all" functionality
+    const termsAll = document.getElementById('terms-all');
+    const termsItems = document.querySelectorAll('.terms-item');
+    termsAll.addEventListener('@snice/checkbox-change', (e) => {
+      if (!e.detail.indeterminate) {
+        termsItems.forEach(item => {
+          item.checked = e.detail.checked;
+        });
+      }
+    });
+    termsItems.forEach(item => {
+      item.addEventListener('@snice/checkbox-change', updateTermsAll);
+    });
+    function updateTermsAll() {
+      const checkedCount = Array.from(termsItems).filter(item => item.checked).length;
+      if (checkedCount === 0) {
+        termsAll.checked = false;
+        termsAll.indeterminate = false;
+      } else if (checkedCount === termsItems.length) {
+        termsAll.checked = true;
+        termsAll.indeterminate = false;
+      } else {
+        termsAll.indeterminate = true;
+      }
+    }
+    // Form submission
+    document.getElementById('demo-form').addEventListener('submit', (e) => {
+      e.preventDefault();
+      const formData = new FormData(e.target);
+      const data = {};
+      const checkboxes = e.target.querySelectorAll('snice-checkbox');
+      checkboxes.forEach(cb => {
+        if (cb.name) {
+          data[cb.name] = cb.checked;
+        }
+      });
+      document.getElementById('form-output').textContent =
+        `Form data: ${JSON.stringify(data, null, 2)}`;
+    });
+    // Initialize terms state
+    updateTermsAll();
+  </script>
+</body>
+</html>

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

@@ -0,0 +1,164 @@
+:host {
+  display: inline-block;
+  font-family: var(--snice-font-family);
+}
+.checkbox-wrapper {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+}
+.checkbox-wrapper--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+/* Hide native checkbox */
+.checkbox-input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+/* Custom checkbox */
+.checkbox {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--snice-color-background);
+  border: 2px solid var(--snice-color-border);
+  border-radius: var(--snice-border-radius-sm);
+  transition: all var(--snice-transition-fast) ease;
+}
+/* Size variants */
+.checkbox--small {
+  width: 1rem; /* 16px */
+  height: 1rem; /* 16px */
+}
+.checkbox--medium {
+  width: 1.25rem; /* 20px */
+  height: 1.25rem; /* 20px */
+}
+.checkbox--large {
+  width: 1.5rem; /* 24px */
+  height: 1.5rem; /* 24px */
+}
+/* States */
+.checkbox-input:checked ~ .checkbox {
+  background: var(--snice-color-primary);
+  border-color: var(--snice-color-primary);
+}
+.checkbox-input:focus-visible ~ .checkbox {
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+.checkbox-input:disabled ~ .checkbox {
+  background: var(--snice-color-background-secondary);
+  border-color: var(--snice-color-border);
+}
+.checkbox-input:disabled:checked ~ .checkbox {
+  background: var(--snice-color-text-secondary);
+  border-color: var(--snice-color-text-secondary);
+}
+/* Invalid state */
+.checkbox--invalid {
+  border-color: var(--snice-color-danger);
+}
+.checkbox-input:checked ~ .checkbox--invalid {
+  background: var(--snice-color-danger);
+  border-color: var(--snice-color-danger);
+}
+/* Checkmark */
+.checkbox-icon {
+  position: absolute;
+  display: none;
+  color: white;
+}
+.checkbox-input:checked ~ .checkbox .checkbox-icon--check {
+  display: block;
+}
+.checkbox--indeterminate .checkbox-icon--check {
+  display: none !important;
+}
+.checkbox--indeterminate .checkbox-icon--indeterminate {
+  display: block !important;
+}
+/* Icon sizes */
+.checkbox--small .checkbox-icon {
+  width: 0.75rem; /* 12px */
+  height: 0.75rem; /* 12px */
+}
+.checkbox--medium .checkbox-icon {
+  width: 0.875rem; /* 14px */
+  height: 0.875rem; /* 14px */
+}
+.checkbox--large .checkbox-icon {
+  width: 1.125rem; /* 18px */
+  height: 1.125rem; /* 18px */
+}
+/* Label */
+.checkbox-label {
+  margin-left: 0.5rem; /* 8px */
+  color: var(--snice-color-text);
+  cursor: pointer;
+}
+.checkbox-label--small {
+  font-size: var(--snice-font-size-sm);
+}
+.checkbox-label--medium {
+  font-size: var(--snice-font-size-md);
+}
+.checkbox-label--large {
+  font-size: var(--snice-font-size-lg);
+}
+.checkbox-wrapper--disabled .checkbox-label {
+  color: var(--snice-color-text-secondary);
+  cursor: not-allowed;
+}
+/* Required indicator */
+.checkbox-label--required::after {
+  content: ' *';
+  color: var(--snice-color-danger);
+}
+/* Focus ring for keyboard navigation */
+.checkbox-input:focus-visible ~ .checkbox {
+  outline: 2px solid var(--snice-color-primary);
+  outline-offset: 2px;
+}
+/* Hover effect */
+.checkbox-wrapper:not(.checkbox-wrapper--disabled):hover .checkbox {
+  border-color: var(--snice-color-primary);
+}
+.checkbox-wrapper:not(.checkbox-wrapper--disabled):hover .checkbox-input:checked ~ .checkbox {
+  background: var(--snice-color-primary-hover);
+  border-color: var(--snice-color-primary-hover);
+}