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/radio/demo.html ADDED Viewed

@@ -0,0 +1,287 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Radio Button 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);
+    }
+    .radio-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);
+    }
+    fieldset {
+      border: 1px solid var(--snice-color-border);
+      border-radius: var(--snice-border-radius-md);
+      padding: 16px;
+      margin: 0;
+    }
+    legend {
+      padding: 0 8px;
+      font-weight: 500;
+    }
+  </style>
+</head>
+<body>
+  <h2>Radio Button Component Demo</h2>
+  <div class="section">
+    <h3>Basic Radio Buttons</h3>
+    <div class="radio-group">
+      <snice-radio name="basic" value="option1" label="Option 1" checked></snice-radio>
+      <snice-radio name="basic" value="option2" label="Option 2"></snice-radio>
+      <snice-radio name="basic" value="option3" label="Option 3"></snice-radio>
+      <snice-radio name="basic" value="option4" label="Option 4" disabled></snice-radio>
+    </div>
+  </div>
+  <div class="section">
+    <h3>Sizes</h3>
+    <fieldset>
+      <legend>Small</legend>
+      <div class="radio-group">
+        <snice-radio size="small" name="size-small" value="1" label="Small Option 1"></snice-radio>
+        <snice-radio size="small" name="size-small" value="2" label="Small Option 2"></snice-radio>
+      </div>
+    </fieldset>
+    <fieldset style="margin-top: 16px;">
+      <legend>Medium (Default)</legend>
+      <div class="radio-group">
+        <snice-radio size="medium" name="size-medium" value="1" label="Medium Option 1"></snice-radio>
+        <snice-radio size="medium" name="size-medium" value="2" label="Medium Option 2"></snice-radio>
+      </div>
+    </fieldset>
+    <fieldset style="margin-top: 16px;">
+      <legend>Large</legend>
+      <div class="radio-group">
+        <snice-radio size="large" name="size-large" value="1" label="Large Option 1"></snice-radio>
+        <snice-radio size="large" name="size-large" value="2" label="Large Option 2"></snice-radio>
+      </div>
+    </fieldset>
+  </div>
+  <div class="section">
+    <h3>States</h3>
+    <div class="radio-group">
+      <snice-radio name="states" value="required" label="Required field" required></snice-radio>
+      <snice-radio name="states" value="invalid" label="Invalid state" invalid></snice-radio>
+      <snice-radio name="states" value="disabled" label="Disabled" disabled></snice-radio>
+      <snice-radio name="states" value="disabled-checked" label="Disabled checked" disabled checked></snice-radio>
+    </div>
+  </div>
+  <div class="section">
+    <h3>Payment Method Example</h3>
+    <fieldset>
+      <legend>Select Payment Method</legend>
+      <div class="radio-group">
+        <snice-radio name="payment" value="card" label="Credit/Debit Card" checked></snice-radio>
+        <snice-radio name="payment" value="paypal" label="PayPal"></snice-radio>
+        <snice-radio name="payment" value="bank" label="Bank Transfer"></snice-radio>
+        <snice-radio name="payment" value="crypto" label="Cryptocurrency"></snice-radio>
+      </div>
+    </fieldset>
+    <button onclick="getPaymentMethod()">Get Selected Payment</button>
+    <div id="payment-output" class="output">Selected: Credit/Debit Card</div>
+  </div>
+  <div class="section">
+    <h3>Theme Selection</h3>
+    <fieldset>
+      <legend>Choose Theme</legend>
+      <div class="radio-group">
+        <snice-radio id="theme-light" name="theme" value="light" label="Light" checked></snice-radio>
+        <snice-radio id="theme-dark" name="theme" value="dark" label="Dark"></snice-radio>
+        <snice-radio id="theme-auto" name="theme" value="auto" label="System"></snice-radio>
+      </div>
+    </fieldset>
+    <div id="theme-output" class="output">Current theme: light</div>
+  </div>
+  <div class="section">
+    <h3>Interactive Example</h3>
+    <div class="radio-group">
+      <snice-radio id="interactive-1" name="interactive" value="option1" label="Option 1"></snice-radio>
+      <snice-radio id="interactive-2" name="interactive" value="option2" label="Option 2"></snice-radio>
+      <snice-radio id="interactive-3" name="interactive" value="option3" label="Option 3"></snice-radio>
+    </div>
+    <div class="row">
+      <button onclick="document.getElementById('interactive-2').select()">Select Option 2</button>
+      <button onclick="document.getElementById('interactive-1').focus()">Focus Option 1</button>
+      <button onclick="getInteractiveValue()">Get Value</button>
+    </div>
+    <div id="interactive-output" class="output">Events will appear here...</div>
+  </div>
+  <div class="section">
+    <h3>Form Example</h3>
+    <form id="demo-form">
+      <fieldset>
+        <legend>Survey</legend>
+        <div style="margin-bottom: 16px;">
+          <strong>How satisfied are you?</strong>
+          <div class="radio-group" style="margin-top: 8px;">
+            <snice-radio name="satisfaction" value="very-satisfied" label="Very Satisfied" required></snice-radio>
+            <snice-radio name="satisfaction" value="satisfied" label="Satisfied" required></snice-radio>
+            <snice-radio name="satisfaction" value="neutral" label="Neutral" required></snice-radio>
+            <snice-radio name="satisfaction" value="dissatisfied" label="Dissatisfied" required></snice-radio>
+            <snice-radio name="satisfaction" value="very-dissatisfied" label="Very Dissatisfied" required></snice-radio>
+          </div>
+        </div>
+        <div>
+          <strong>Would you recommend us?</strong>
+          <div class="radio-group" style="margin-top: 8px;">
+            <snice-radio name="recommend" value="yes" label="Yes" required></snice-radio>
+            <snice-radio name="recommend" value="no" label="No" required></snice-radio>
+            <snice-radio name="recommend" value="maybe" label="Maybe" required></snice-radio>
+          </div>
+        </div>
+      </fieldset>
+      <button type="submit" style="margin-top: 16px;">Submit Survey</button>
+    </form>
+    <div id="form-output" class="output">Form data will appear here...</div>
+  </div>
+  <script type="module">
+    import './snice-radio.ts';
+    // Payment method
+    window.getPaymentMethod = function() {
+      const radios = document.querySelectorAll('snice-radio[name="payment"]');
+      let selected = null;
+      radios.forEach(radio => {
+        if (radio.checked) {
+          selected = radio;
+        }
+      });
+      const output = document.getElementById('payment-output');
+      if (selected) {
+        output.textContent = `Selected: ${selected.label}`;
+      }
+    };
+    // Theme selection
+    const themeRadios = document.querySelectorAll('snice-radio[name="theme"]');
+    themeRadios.forEach(radio => {
+      radio.addEventListener('@snice/radio-change', (e) => {
+        if (e.detail.checked) {
+          document.getElementById('theme-output').textContent =
+            `Current theme: ${e.detail.value}`;
+        }
+      });
+    });
+    // Interactive example
+    const interactiveRadios = document.querySelectorAll('snice-radio[name="interactive"]');
+    interactiveRadios.forEach(radio => {
+      radio.addEventListener('@snice/radio-change', (e) => {
+        document.getElementById('interactive-output').textContent =
+          `Changed: value=${e.detail.value}, checked=${e.detail.checked}`;
+      });
+    });
+    window.getInteractiveValue = function() {
+      const radios = document.querySelectorAll('snice-radio[name="interactive"]');
+      let selected = null;
+      radios.forEach(radio => {
+        if (radio.checked) {
+          selected = radio;
+        }
+      });
+      document.getElementById('interactive-output').textContent =
+        selected ? `Current value: ${selected.value}` : 'No selection';
+    };
+    // Form submission
+    document.getElementById('demo-form').addEventListener('submit', (e) => {
+      e.preventDefault();
+      const data = {};
+      const radios = e.target.querySelectorAll('snice-radio');
+      const groups = new Set();
+      radios.forEach(radio => {
+        if (radio.name) {
+          groups.add(radio.name);
+        }
+      });
+      groups.forEach(groupName => {
+        const radios = e.target.querySelectorAll(`snice-radio[name="${groupName}"]`);
+        let selected = null;
+        radios.forEach(radio => {
+          if (radio.checked) {
+            selected = radio;
+          }
+        });
+        data[groupName] = selected ? selected.value : null;
+      });
+      document.getElementById('form-output').textContent =
+        `Form data: ${JSON.stringify(data, null, 2)}`;
+    });
+  </script>
+</body>
+</html>

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

@@ -0,0 +1,171 @@
+:host {
+  display: inline-block;
+  font-family: var(--snice-font-family);
+}
+.radio-wrapper {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+}
+.radio-wrapper--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+/* Hide native radio */
+.radio-input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+/* Custom radio */
+.radio {
+  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: 50%;
+  transition: all var(--snice-transition-fast) ease;
+}
+/* Size variants */
+.radio--small {
+  width: 1rem; /* 16px */
+  height: 1rem; /* 16px */
+}
+.radio--medium {
+  width: 1.25rem; /* 20px */
+  height: 1.25rem; /* 20px */
+}
+.radio--large {
+  width: 1.5rem; /* 24px */
+  height: 1.5rem; /* 24px */
+}
+/* States */
+.radio-input:checked ~ .radio {
+  border-color: var(--snice-color-primary);
+}
+.radio-input:focus-visible ~ .radio {
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+.radio-input:disabled ~ .radio {
+  background: var(--snice-color-background-secondary);
+  border-color: var(--snice-color-border);
+}
+.radio-input:disabled:checked ~ .radio {
+  border-color: var(--snice-color-text-secondary);
+}
+.radio-input:disabled:checked ~ .radio .radio-dot {
+  background: var(--snice-color-text-secondary);
+}
+/* Invalid state */
+.radio--invalid {
+  border-color: var(--snice-color-danger);
+}
+.radio-input:checked ~ .radio--invalid {
+  border-color: var(--snice-color-danger);
+}
+.radio-input:checked ~ .radio--invalid .radio-dot {
+  background: var(--snice-color-danger);
+}
+/* Radio dot */
+.radio-dot {
+  position: absolute;
+  border-radius: 50%;
+  background: var(--snice-color-primary);
+  transform: scale(0);
+  transition: transform var(--snice-transition-fast) ease;
+}
+.radio-input:checked ~ .radio .radio-dot {
+  transform: scale(1);
+}
+/* Dot sizes */
+.radio--small .radio-dot {
+  width: 0.375rem; /* 6px */
+  height: 0.375rem; /* 6px */
+}
+.radio--medium .radio-dot {
+  width: 0.5rem; /* 8px */
+  height: 0.5rem; /* 8px */
+}
+.radio--large .radio-dot {
+  width: 0.625rem; /* 10px */
+  height: 0.625rem; /* 10px */
+}
+/* Label */
+.radio-label {
+  margin-left: 0.5rem; /* 8px */
+  color: var(--snice-color-text);
+  cursor: pointer;
+}
+.radio-label--small {
+  font-size: var(--snice-font-size-sm);
+}
+.radio-label--medium {
+  font-size: var(--snice-font-size-md);
+}
+.radio-label--large {
+  font-size: var(--snice-font-size-lg);
+}
+.radio-wrapper--disabled .radio-label {
+  color: var(--snice-color-text-secondary);
+  cursor: not-allowed;
+}
+/* Required indicator */
+.radio-label--required::after {
+  content: ' *';
+  color: var(--snice-color-danger);
+}
+/* Focus ring for keyboard navigation */
+.radio-input:focus-visible ~ .radio {
+  outline: 2px solid var(--snice-color-primary);
+  outline-offset: 2px;
+}
+/* Hover effect */
+.radio-wrapper:not(.radio-wrapper--disabled):hover .radio {
+  border-color: var(--snice-color-primary);
+}
+/* Radio Group styling (when used together) */
+:host {
+  --radio-group-gap: 0.75rem; /* 12px */
+}
+:host([data-group]) {
+  display: block;
+}
+:host([data-group]) + :host([data-group]) {
+  margin-top: var(--radio-group-gap);
+}

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

@@ -0,0 +1,218 @@
+import { element, property, query, on, watch, dispatch, ready } from 'snice';
+import css from './snice-radio.css?inline';
+import type { RadioSize, SniceRadioElement } from './snice-radio.types';
+@element('snice-radio')
+export class SniceRadio extends HTMLElement implements SniceRadioElement {
+  @property({ type: Boolean, reflect: true })
+  checked = false;
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+  @property({ type: Boolean, reflect: true })
+  required = false;
+  @property({ type: Boolean, reflect: true })
+  invalid = false;
+  @property({ reflect: true })
+  size: RadioSize = 'medium';
+  @property({ reflect: true })
+  name = '';
+  @property({ reflect: true })
+  value = '';
+  @property({ reflect: true })
+  label = '';
+  @query('.radio-input')
+  input?: HTMLInputElement;
+  @query('.radio')
+  radio?: HTMLElement;
+  @query('.radio-label')
+  labelElement?: HTMLElement;
+  @query('.radio-wrapper')
+  wrapper?: HTMLElement;
+  html() {
+    return /*html*/`
+      <label class="radio-wrapper ${this.disabled ? 'radio-wrapper--disabled' : ''}">
+        <input
+          type="radio"
+          class="radio-input"
+          ${this.checked ? 'checked' : ''}
+          ${this.disabled ? 'disabled' : ''}
+          ${this.required ? 'required' : ''}
+          ${this.name ? `name="${this.name}"` : ''}
+          ${this.value ? `value="${this.value}"` : ''}
+          aria-invalid="${this.invalid}"
+          part="input"
+        />
+        <span class="radio
+          radio--${this.size}
+          ${this.invalid ? 'radio--invalid' : ''}"
+          part="radio">
+          <span class="radio-dot" part="dot"></span>
+        </span>
+        ${this.label ? /*html*/`
+          <span class="radio-label radio-label--${this.size} ${this.required ? 'radio-label--required' : ''}" part="label">
+            ${this.label}
+          </span>
+        ` : ''}
+      </label>
+    `;
+  }
+  css() {
+    return css;
+  }
+  @ready()
+  init() {
+    // Set initial states
+    if (this.input) {
+      this.input.checked = this.checked;
+      // Set form value
+      if (this.name) {
+        this.input.name = this.name;
+      }
+      if (this.value) {
+        this.input.value = this.value;
+      }
+    }
+  }
+  @on('change', '.radio-input')
+  handleChange(e: Event) {
+    const target = e.target as HTMLInputElement;
+    const wasChecked = this.checked;
+    this.checked = target.checked;
+    // If this radio was just checked, uncheck others in the same group
+    if (this.checked && !wasChecked && this.name) {
+      this.uncheckOthersInGroup();
+    }
+    this.dispatchChangeEvent();
+  }
+  @on('click', '.radio-input')
+  handleClick(e: Event) {
+    // Allow click to propagate for label association
+    e.stopPropagation();
+  }
+  @watch('checked')
+  handleCheckedChange() {
+    if (this.input) {
+      this.input.checked = this.checked;
+    }
+    // If checked, uncheck others in the same group
+    if (this.checked && this.name) {
+      this.uncheckOthersInGroup();
+    }
+  }
+  @watch('disabled')
+  handleDisabledChange() {
+    if (this.input) {
+      this.input.disabled = this.disabled;
+    }
+    if (this.wrapper) {
+      this.wrapper.classList.toggle('radio-wrapper--disabled', this.disabled);
+    }
+  }
+  @watch('invalid')
+  handleInvalidChange() {
+    if (this.input) {
+      this.input.setAttribute('aria-invalid', String(this.invalid));
+    }
+    if (this.radio) {
+      this.radio.classList.toggle('radio--invalid', this.invalid);
+    }
+  }
+  @watch('required')
+  handleRequiredChange() {
+    if (this.input) {
+      this.input.required = this.required;
+    }
+    if (this.labelElement) {
+      this.labelElement.classList.toggle('radio-label--required', this.required);
+    }
+  }
+  @watch('label')
+  handleLabelChange() {
+    if (this.labelElement) {
+      this.labelElement.textContent = this.label;
+      this.labelElement.style.display = this.label ? '' : 'none';
+    }
+  }
+  @watch('name')
+  handleNameChange() {
+    if (this.input) {
+      this.input.name = this.name;
+    }
+  }
+  @watch('value')
+  handleValueChange() {
+    if (this.input) {
+      this.input.value = this.value;
+    }
+  }
+  private uncheckOthersInGroup() {
+    if (!this.name) return;
+    // Find all radios with the same name
+    const radios = document.querySelectorAll(`snice-radio[name="${this.name}"]`) as NodeListOf<SniceRadio>;
+    radios.forEach(radio => {
+      if (radio !== this && radio.checked) {
+        radio.checked = false;
+      }
+    });
+  }
+  @dispatch('@snice/radio-change', { bubbles: true, composed: true })
+  private dispatchChangeEvent() {
+    return {
+      checked: this.checked,
+      value: this.value,
+      radio: this
+    };
+  }
+  // Public API
+  focus() {
+    this.input?.focus();
+  }
+  blur() {
+    this.input?.blur();
+  }
+  click() {
+    this.input?.click();
+  }
+  select() {
+    if (!this.checked) {
+      this.checked = true;
+      this.dispatchChangeEvent();
+    }
+  }
+}

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

@@ -0,0 +1,21 @@
+export type RadioSize = 'small' | 'medium' | 'large';
+export interface SniceRadioElement extends HTMLElement {
+  checked: boolean;
+  disabled: boolean;
+  required: boolean;
+  invalid: boolean;
+  size: RadioSize;
+  name: string;
+  value: string;
+  label: string;
+  focus(): void;
+  blur(): void;
+  click(): void;
+}
+export interface RadioChangeDetail {
+  checked: boolean;
+  value: string;
+  radio: SniceRadioElement;
+}