snice 2.5.4 → 3.1.0

package/dist/components/progress/snice-progress.js

@@ -1,7 +1,7 @@
 import { __runInitializers, __esDecorate } from 'tslib';
-import { element, property, query, ready, watch, dispatch } from 'snice';
+import { element, property, query, render, styles, watch, css, html } from 'snice';
 
-var css = ":host {\n  --progress-height: 0.5rem; /* 8px */\n  --progress-radius: 4px;\n  --progress-bg: #e5e7eb;\n  --progress-color: #3b82f6;\n  --progress-animation-duration: 1.5s;\n  \n  display: inline-block;\n  width: 100%;\n}\n\n:host([variant=\"circular\"]) {\n  width: auto;\n}\n\n/* Linear Progress Bar */\n.progress {\n  position: relative;\n  width: 100%;\n  background: var(--progress-bg);\n  border-radius: var(--progress-radius);\n  overflow: hidden;\n}\n\n.progress--linear {\n  height: var(--progress-height);\n}\n\n.progress__bar {\n  height: 100%;\n  background: var(--progress-color);\n  border-radius: var(--progress-radius);\n  transition: width 0.3s ease;\n  position: relative;\n  overflow: hidden;\n}\n\n/* Sizes */\n:host([size=\"small\"]) {\n  --progress-height: 0.25rem; /* 4px */\n  --progress-spinner-size: 1.5rem; /* 24px */\n  --progress-spinner-stroke: 3px;\n}\n\n:host([size=\"medium\"]) {\n  --progress-height: 0.5rem; /* 8px */\n  --progress-spinner-size: 2.5rem; /* 40px */\n  --progress-spinner-stroke: 4px;\n}\n\n:host([size=\"large\"]) {\n  --progress-height: 0.75rem; /* 12px */\n  --progress-spinner-size: 3.5rem; /* 56px */\n  --progress-spinner-stroke: 5px;\n}\n\n:host([size=\"xl\"]) {\n  --progress-height: 1rem; /* 16px */\n  --progress-spinner-size: 5rem; /* 80px */\n  --progress-spinner-stroke: 6px;\n}\n\n:host([size=\"xxl\"]) {\n  --progress-height: 1.25rem; /* 20px */\n  --progress-spinner-size: 7.5rem; /* 120px */\n  --progress-spinner-stroke: 8px;\n}\n\n:host([size=\"xxxl\"]) {\n  --progress-height: 1.5rem; /* 24px */\n  --progress-spinner-size: 10rem; /* 160px */\n  --progress-spinner-stroke: 10px;\n}\n\n/* Colors */\n:host([color=\"primary\"]) {\n  --progress-color: #3b82f6;\n}\n\n:host([color=\"success\"]) {\n  --progress-color: #10b981;\n}\n\n:host([color=\"warning\"]) {\n  --progress-color: #f59e0b;\n}\n\n:host([color=\"error\"]) {\n  --progress-color: #ef4444;\n}\n\n:host([color=\"info\"]) {\n  --progress-color: #6366f1;\n}\n\n/* Striped Pattern */\n:host([striped]) .progress__bar::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-image: linear-gradient(\n    45deg,\n    rgba(255, 255, 255, 0.15) 25%,\n    transparent 25%,\n    transparent 50%,\n    rgba(255, 255, 255, 0.15) 50%,\n    rgba(255, 255, 255, 0.15) 75%,\n    transparent 75%,\n    transparent\n  );\n  background-size: 1rem 1rem;\n}\n\n/* Animated Stripes */\n:host([animated]) .progress__bar::after {\n  animation: progress-stripes var(--progress-animation-duration) linear infinite;\n}\n\n@keyframes progress-stripes {\n  from {\n    background-position: 1rem 0;\n  }\n  to {\n    background-position: 0 0;\n  }\n}\n\n/* Indeterminate State */\n:host([indeterminate]) .progress__bar {\n  width: 30% !important;\n  animation: progress-indeterminate var(--progress-animation-duration) ease-in-out infinite;\n}\n\n@keyframes progress-indeterminate {\n  0% {\n    transform: translateX(-100%);\n  }\n  100% {\n    transform: translateX(400%);\n  }\n}\n\n/* Label */\n.progress__label {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: white;\n  text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);\n  white-space: nowrap;\n  z-index: 1;\n}\n\n.progress--with-label {\n  height: calc(var(--progress-height) + 0.5rem); /* +8px */\n  min-height: 1.25rem; /* 20px */\n}\n\n/* Circular Progress */\n.progress--circular {\n  display: inline-block;\n  width: var(--progress-spinner-size, 2.5rem); /* 40px */\n  height: var(--progress-spinner-size, 2.5rem); /* 40px */\n  position: relative;\n  background: transparent;\n}\n\n.progress__circle {\n  transform: rotate(-90deg);\n  width: 100%;\n  height: 100%;\n  background: transparent;\n  shape-rendering: geometricPrecision;\n}\n\n.progress__circle-bg,\n.progress__circle-bar {\n  fill: none;\n  stroke-width: var(--progress-spinner-stroke, 4px);\n  shape-rendering: geometricPrecision;\n  vector-effect: non-scaling-stroke;\n}\n\n.progress__circle-bg {\n  stroke: var(--progress-bg);\n  opacity: 0.2;\n}\n\n.progress__circle-bar {\n  stroke: var(--progress-color);\n  stroke-linecap: round;\n  transition: stroke-dashoffset 0.3s ease;\n}\n\n/* Circular Indeterminate */\n:host([variant=\"circular\"][indeterminate]) .progress__circle {\n  animation: progress-rotate 2s linear infinite;\n}\n\n:host([variant=\"circular\"][indeterminate]) .progress__circle-bar {\n  animation: progress-dash 1.5s ease-in-out infinite;\n}\n\n@keyframes progress-rotate {\n  100% {\n    transform: rotate(270deg);\n  }\n}\n\n@keyframes progress-dash {\n  0% {\n    stroke-dasharray: 1, 150;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 90, 150;\n    stroke-dashoffset: -35;\n  }\n  100% {\n    stroke-dasharray: 90, 150;\n    stroke-dashoffset: -124;\n  }\n}\n\n/* Circular Label */\n.progress__circle-label {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  font-size: 0.625rem; /* Default medium size */\n  font-weight: 600;\n  color: var(--progress-color);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n/* Adjust label size for different sizes */\n:host([size=\"small\"]) .progress__circle-label {\n  font-size: 0.375rem;\n}\n\n:host([size=\"medium\"]) .progress__circle-label {\n  font-size: 0.625rem;\n}\n\n:host([size=\"large\"]) .progress__circle-label {\n  font-size: 1rem;\n}\n\n:host([size=\"xl\"]) .progress__circle-label {\n  font-size: 1.25rem;\n}\n\n:host([size=\"xxl\"]) .progress__circle-label {\n  font-size: 1.75rem;\n}\n\n:host([size=\"xxxl\"]) .progress__circle-label {\n  font-size: 2.25rem;\n}";
+var cssContent = ":host {\n  --progress-height: 0.5rem; /* 8px */\n  --progress-radius: 4px;\n  --progress-bg: #e5e7eb;\n  --progress-color: #3b82f6;\n  --progress-animation-duration: 1.5s;\n  \n  display: inline-block;\n  width: 100%;\n}\n\n:host([variant=\"circular\"]) {\n  width: auto;\n}\n\n/* Linear Progress Bar */\n.progress {\n  position: relative;\n  width: 100%;\n  background: var(--progress-bg);\n  border-radius: var(--progress-radius);\n  overflow: hidden;\n}\n\n.progress--linear {\n  height: var(--progress-height);\n}\n\n.progress__bar {\n  height: 100%;\n  background: var(--progress-color);\n  border-radius: var(--progress-radius);\n  transition: width 0.3s ease;\n  position: relative;\n  overflow: hidden;\n}\n\n/* Sizes */\n:host([size=\"small\"]) {\n  --progress-height: 0.25rem; /* 4px */\n  --progress-spinner-size: 1.5rem; /* 24px */\n  --progress-spinner-stroke: 3px;\n}\n\n:host([size=\"medium\"]) {\n  --progress-height: 0.5rem; /* 8px */\n  --progress-spinner-size: 2.5rem; /* 40px */\n  --progress-spinner-stroke: 4px;\n}\n\n:host([size=\"large\"]) {\n  --progress-height: 0.75rem; /* 12px */\n  --progress-spinner-size: 3.5rem; /* 56px */\n  --progress-spinner-stroke: 5px;\n}\n\n:host([size=\"xl\"]) {\n  --progress-height: 1rem; /* 16px */\n  --progress-spinner-size: 5rem; /* 80px */\n  --progress-spinner-stroke: 6px;\n}\n\n:host([size=\"xxl\"]) {\n  --progress-height: 1.25rem; /* 20px */\n  --progress-spinner-size: 7.5rem; /* 120px */\n  --progress-spinner-stroke: 8px;\n}\n\n:host([size=\"xxxl\"]) {\n  --progress-height: 1.5rem; /* 24px */\n  --progress-spinner-size: 10rem; /* 160px */\n  --progress-spinner-stroke: 10px;\n}\n\n/* Colors */\n:host([color=\"primary\"]) {\n  --progress-color: #3b82f6;\n}\n\n:host([color=\"success\"]) {\n  --progress-color: #10b981;\n}\n\n:host([color=\"warning\"]) {\n  --progress-color: #f59e0b;\n}\n\n:host([color=\"error\"]) {\n  --progress-color: #ef4444;\n}\n\n:host([color=\"info\"]) {\n  --progress-color: #6366f1;\n}\n\n/* Striped Pattern */\n:host([striped]) .progress__bar::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-image: linear-gradient(\n    45deg,\n    rgba(255, 255, 255, 0.15) 25%,\n    transparent 25%,\n    transparent 50%,\n    rgba(255, 255, 255, 0.15) 50%,\n    rgba(255, 255, 255, 0.15) 75%,\n    transparent 75%,\n    transparent\n  );\n  background-size: 1rem 1rem;\n}\n\n/* Animated Stripes */\n:host([animated]) .progress__bar::after {\n  animation: progress-stripes var(--progress-animation-duration) linear infinite;\n}\n\n@keyframes progress-stripes {\n  from {\n    background-position: 1rem 0;\n  }\n  to {\n    background-position: 0 0;\n  }\n}\n\n/* Indeterminate State */\n:host([indeterminate]) .progress__bar {\n  width: 30% !important;\n  animation: progress-indeterminate var(--progress-animation-duration) ease-in-out infinite;\n}\n\n@keyframes progress-indeterminate {\n  0% {\n    transform: translateX(-100%);\n  }\n  100% {\n    transform: translateX(400%);\n  }\n}\n\n/* Label */\n.progress__label {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: white;\n  text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);\n  white-space: nowrap;\n  z-index: 1;\n}\n\n.progress--with-label {\n  height: calc(var(--progress-height) + 0.5rem); /* +8px */\n  min-height: 1.25rem; /* 20px */\n}\n\n/* Circular Progress */\n.progress--circular {\n  display: inline-block;\n  width: var(--progress-spinner-size, 2.5rem); /* 40px */\n  height: var(--progress-spinner-size, 2.5rem); /* 40px */\n  position: relative;\n  background: transparent;\n}\n\n.progress__circle {\n  transform: rotate(-90deg);\n  width: 100%;\n  height: 100%;\n  background: transparent;\n  shape-rendering: geometricPrecision;\n}\n\n.progress__circle-bg,\n.progress__circle-bar {\n  fill: none;\n  stroke-width: var(--progress-spinner-stroke, 4px);\n  shape-rendering: geometricPrecision;\n  vector-effect: non-scaling-stroke;\n}\n\n.progress__circle-bg {\n  stroke: var(--progress-bg);\n  opacity: 0.2;\n}\n\n.progress__circle-bar {\n  stroke: var(--progress-color);\n  stroke-linecap: round;\n  transition: stroke-dashoffset 0.3s ease;\n}\n\n/* Circular Indeterminate */\n:host([variant=\"circular\"][indeterminate]) .progress__circle {\n  animation: progress-rotate 2s linear infinite;\n}\n\n:host([variant=\"circular\"][indeterminate]) .progress__circle-bar {\n  animation: progress-dash 1.5s ease-in-out infinite;\n}\n\n@keyframes progress-rotate {\n  100% {\n    transform: rotate(270deg);\n  }\n}\n\n@keyframes progress-dash {\n  0% {\n    stroke-dasharray: 1, 150;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 90, 150;\n    stroke-dashoffset: -35;\n  }\n  100% {\n    stroke-dasharray: 90, 150;\n    stroke-dashoffset: -124;\n  }\n}\n\n/* Circular Label */\n.progress__circle-label {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  font-size: 0.625rem; /* Default medium size */\n  font-weight: 600;\n  color: var(--progress-color);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n/* Adjust label size for different sizes */\n:host([size=\"small\"]) .progress__circle-label {\n  font-size: 0.375rem;\n}\n\n:host([size=\"medium\"]) .progress__circle-label {\n  font-size: 0.625rem;\n}\n\n:host([size=\"large\"]) .progress__circle-label {\n  font-size: 1rem;\n}\n\n:host([size=\"xl\"]) .progress__circle-label {\n  font-size: 1.25rem;\n}\n\n:host([size=\"xxl\"]) .progress__circle-label {\n  font-size: 1.75rem;\n}\n\n:host([size=\"xxxl\"]) .progress__circle-label {\n  font-size: 2.25rem;\n}";
 
 let SniceProgress = (() => {
     let _classDecorators = [element('snice-progress')];
@@ -55,12 +55,10 @@ let SniceProgress = (() => {
     let _circleLabelElement_decorators;
     let _circleLabelElement_initializers = [];
     let _circleLabelElement_extraInitializers = [];
-    let _init_decorators;
+    let _renderContent_decorators;
+    let _componentStyles_decorators;
     let _handleProgressChange_decorators;
-    let _handleVariantChange_decorators;
-    let _handleLabelChange_decorators;
     let _handleThicknessChange_decorators;
-    let _dispatchProgressChange_decorators;
     (class extends _classSuper {
         static { _classThis = this; }
         constructor() {
@@ -100,18 +98,14 @@ let SniceProgress = (() => {
             _circleBar_decorators = [query('.progress__circle-bar')];
             _labelElement_decorators = [query('.progress__label')];
             _circleLabelElement_decorators = [query('.progress__circle-label')];
-            _init_decorators = [ready()];
+            _renderContent_decorators = [render()];
+            _componentStyles_decorators = [styles()];
             _handleProgressChange_decorators = [watch('value', 'max', 'indeterminate')];
-            _handleVariantChange_decorators = [watch('variant')];
-            _handleLabelChange_decorators = [watch('showLabel', 'label')];
             _handleThicknessChange_decorators = [watch('thickness')];
-            _dispatchProgressChange_decorators = [dispatch('progress-change', { bubbles: true, composed: true })];
-            __esDecorate(this, null, _init_decorators, { kind: "method", name: "init", static: false, private: false, access: { has: obj => "init" in obj, get: obj => obj.init }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _renderContent_decorators, { kind: "method", name: "renderContent", static: false, private: false, access: { has: obj => "renderContent" in obj, get: obj => obj.renderContent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _componentStyles_decorators, { kind: "method", name: "componentStyles", static: false, private: false, access: { has: obj => "componentStyles" in obj, get: obj => obj.componentStyles }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _handleProgressChange_decorators, { kind: "method", name: "handleProgressChange", static: false, private: false, access: { has: obj => "handleProgressChange" in obj, get: obj => obj.handleProgressChange }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _handleVariantChange_decorators, { kind: "method", name: "handleVariantChange", static: false, private: false, access: { has: obj => "handleVariantChange" in obj, get: obj => obj.handleVariantChange }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _handleLabelChange_decorators, { kind: "method", name: "handleLabelChange", static: false, private: false, access: { has: obj => "handleLabelChange" in obj, get: obj => obj.handleLabelChange }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _handleThicknessChange_decorators, { kind: "method", name: "handleThicknessChange", static: false, private: false, access: { has: obj => "handleThicknessChange" in obj, get: obj => obj.handleThicknessChange }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _dispatchProgressChange_decorators, { kind: "method", name: "dispatchProgressChange", static: false, private: false, access: { has: obj => "dispatchProgressChange" in obj, get: obj => obj.dispatchProgressChange }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(null, null, _value_decorators, { kind: "field", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
             __esDecorate(null, null, _max_decorators, { kind: "field", name: "max", static: false, private: false, access: { has: obj => "max" in obj, get: obj => obj.max, set: (obj, value) => { obj.max = value; } }, metadata: _metadata }, _max_initializers, _max_extraInitializers);
             __esDecorate(null, null, _variant_decorators, { kind: "field", name: "variant", static: false, private: false, access: { has: obj => "variant" in obj, get: obj => obj.variant, set: (obj, value) => { obj.variant = value; } }, metadata: _metadata }, _variant_initializers, _variant_extraInitializers);
@@ -132,29 +126,31 @@ let SniceProgress = (() => {
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
             __runInitializers(_classThis, _classExtraInitializers);
         }
-        html() {
+        renderContent() {
             if (this.variant === 'circular') {
                 return this.renderCircular();
             }
             return this.renderLinear();
         }
-        css() {
-            return css;
+        componentStyles() {
+            return css `${cssContent}`;
         }
         renderLinear() {
             const percentage = this.getPercentage();
             const labelText = this.label || `${Math.round(percentage)}%`;
-            return /*html*/ `
-      <div class="progress progress--linear ${this.showLabel ? 'progress--with-label' : ''}" 
-           role="progressbar" 
+            const progressClass = `progress progress--linear${this.showLabel ? ' progress--with-label' : ''}`;
+            const barStyle = this.indeterminate ? '' : `width: ${percentage}%`;
+            return html `
+      <div class="${progressClass}"
+           role="progressbar"
            aria-valuenow="${this.value}"
            aria-valuemin="0"
            aria-valuemax="${this.max}"
            aria-label="${labelText}">
-        <div class="progress__bar" style="width: ${this.indeterminate ? '' : percentage + '%'}">
-          ${this.showLabel ? /*html*/ `
+        <div class="progress__bar" style="${barStyle}">
+          <if ${this.showLabel}>
             <span class="progress__label">${labelText}</span>
-          ` : ''}
+          </if>
         </div>
       </div>
     `;
@@ -169,101 +165,44 @@ let SniceProgress = (() => {
             const labelText = this.label || `${Math.round(percentage)}%`;
             this.radius = radius;
             this.circumference = circumference;
-            return /*html*/ `
-      <div class="progress progress--circular" 
+            const viewBox = `0 0 ${size} ${size}`;
+            const centerX = size / 2;
+            const centerY = size / 2;
+            return html `
+      <div class="progress progress--circular"
            role="progressbar"
            aria-valuenow="${this.value}"
            aria-valuemin="0"
            aria-valuemax="${this.max}"
            aria-label="${labelText}">
-        <svg class="progress__circle" viewBox="0 0 ${size} ${size}">
+        <svg class="progress__circle" viewBox="${viewBox}">
           <circle
             class="progress__circle-bg"
-            cx="${size / 2}"
-            cy="${size / 2}"
+            cx="${centerX}"
+            cy="${centerY}"
             r="${radius}"
           />
           <circle
             class="progress__circle-bar"
-            cx="${size / 2}"
-            cy="${size / 2}"
+            cx="${centerX}"
+            cy="${centerY}"
             r="${radius}"
             stroke-dasharray="${circumference}"
             stroke-dashoffset="${offset}"
           />
         </svg>
-        ${this.showLabel && !this.indeterminate ? /*html*/ `
+        <if ${this.showLabel && !this.indeterminate}>
           <div class="progress__circle-label">${labelText}</div>
-        ` : ''}
+        </if>
       </div>
     `;
         }
-        init() {
-            this.updateProgress();
-        }
         handleProgressChange() {
-            this.updateProgress();
             this.dispatchProgressChange();
         }
-        handleVariantChange() {
-            // Re-render when variant changes
-            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));
-                // Re-query elements after re-render
-                this.progressBar = shadow.querySelector('.progress__bar');
-                this.circleBar = shadow.querySelector('.progress__circle-bar');
-                this.labelElement = shadow.querySelector('.progress__label');
-                this.circleLabelElement = shadow.querySelector('.progress__circle-label');
-                this.updateProgress();
-            }
-        }
-        handleLabelChange() {
-            this.updateLabel();
-        }
         handleThicknessChange() {
             if (this.variant === 'circular') {
                 this.style.setProperty('--progress-spinner-stroke', `${this.thickness}px`);
-                this.handleVariantChange(); // Re-render circular to update stroke
-            }
-        }
-        updateProgress() {
-            const percentage = this.getPercentage();
-            if (this.variant === 'linear' && this.progressBar) {
-                if (!this.indeterminate) {
-                    this.progressBar.style.width = `${percentage}%`;
-                }
-                // Update ARIA attributes
-                this.progressBar.parentElement?.setAttribute('aria-valuenow', String(this.value));
-                this.progressBar.parentElement?.setAttribute('aria-valuemax', String(this.max));
-            }
-            else if (this.variant === 'circular' && this.circleBar) {
-                if (!this.indeterminate) {
-                    const offset = this.circumference - (percentage / 100) * this.circumference;
-                    this.circleBar.style.strokeDashoffset = String(offset);
-                }
-                // Update ARIA attributes
-                this.circleBar.parentElement?.parentElement?.setAttribute('aria-valuenow', String(this.value));
-                this.circleBar.parentElement?.parentElement?.setAttribute('aria-valuemax', String(this.max));
-            }
-            this.updateLabel();
-        }
-        updateLabel() {
-            const percentage = this.getPercentage();
-            const labelText = this.label || `${Math.round(percentage)}%`;
-            if (this.labelElement) {
-                this.labelElement.textContent = labelText;
-            }
-            if (this.circleLabelElement) {
-                this.circleLabelElement.textContent = labelText;
             }
         }
         getPercentage() {
@@ -290,12 +229,16 @@ let SniceProgress = (() => {
             }
         }
         dispatchProgressChange() {
-            return {
-                value: this.value,
-                max: this.max,
-                percentage: this.getPercentage(),
-                indeterminate: this.indeterminate
-            };
+            this.dispatchEvent(new CustomEvent('progress-change', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    value: this.value,
+                    max: this.max,
+                    percentage: this.getPercentage(),
+                    indeterminate: this.indeterminate
+                }
+            }));
         }
     });
     return _classThis;

package/dist/components/progress/snice-progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"snice-progress.js","sources":["../../../components/progress/snice-progress.css?inline","../../../../components/progress/snice-progress.ts"],"sourcesContent":["export default \":host {\\n  --progress-height: 0.5rem; /* 8px */\\n  --progress-radius: 4px;\\n  --progress-bg: #e5e7eb;\\n  --progress-color: #3b82f6;\\n  --progress-animation-duration: 1.5s;\\n  \\n  display: inline-block;\\n  width: 100%;\\n}\\n\\n:host([variant=\\\"circular\\\"]) {\\n  width: auto;\\n}\\n\\n/* Linear Progress Bar */\\n.progress {\\n  position: relative;\\n  width: 100%;\\n  background: var(--progress-bg);\\n  border-radius: var(--progress-radius);\\n  overflow: hidden;\\n}\\n\\n.progress--linear {\\n  height: var(--progress-height);\\n}\\n\\n.progress__bar {\\n  height: 100%;\\n  background: var(--progress-color);\\n  border-radius: var(--progress-radius);\\n  transition: width 0.3s ease;\\n  position: relative;\\n  overflow: hidden;\\n}\\n\\n/* Sizes */\\n:host([size=\\\"small\\\"]) {\\n  --progress-height: 0.25rem; /* 4px */\\n  --progress-spinner-size: 1.5rem; /* 24px */\\n  --progress-spinner-stroke: 3px;\\n}\\n\\n:host([size=\\\"medium\\\"]) {\\n  --progress-height: 0.5rem; /* 8px */\\n  --progress-spinner-size: 2.5rem; /* 40px */\\n  --progress-spinner-stroke: 4px;\\n}\\n\\n:host([size=\\\"large\\\"]) {\\n  --progress-height: 0.75rem; /* 12px */\\n  --progress-spinner-size: 3.5rem; /* 56px */\\n  --progress-spinner-stroke: 5px;\\n}\\n\\n:host([size=\\\"xl\\\"]) {\\n  --progress-height: 1rem; /* 16px */\\n  --progress-spinner-size: 5rem; /* 80px */\\n  --progress-spinner-stroke: 6px;\\n}\\n\\n:host([size=\\\"xxl\\\"]) {\\n  --progress-height: 1.25rem; /* 20px */\\n  --progress-spinner-size: 7.5rem; /* 120px */\\n  --progress-spinner-stroke: 8px;\\n}\\n\\n:host([size=\\\"xxxl\\\"]) {\\n  --progress-height: 1.5rem; /* 24px */\\n  --progress-spinner-size: 10rem; /* 160px */\\n  --progress-spinner-stroke: 10px;\\n}\\n\\n/* Colors */\\n:host([color=\\\"primary\\\"]) {\\n  --progress-color: #3b82f6;\\n}\\n\\n:host([color=\\\"success\\\"]) {\\n  --progress-color: #10b981;\\n}\\n\\n:host([color=\\\"warning\\\"]) {\\n  --progress-color: #f59e0b;\\n}\\n\\n:host([color=\\\"error\\\"]) {\\n  --progress-color: #ef4444;\\n}\\n\\n:host([color=\\\"info\\\"]) {\\n  --progress-color: #6366f1;\\n}\\n\\n/* Striped Pattern */\\n:host([striped]) .progress__bar::after {\\n  content: '';\\n  position: absolute;\\n  top: 0;\\n  left: 0;\\n  right: 0;\\n  bottom: 0;\\n  background-image: linear-gradient(\\n    45deg,\\n    rgba(255, 255, 255, 0.15) 25%,\\n    transparent 25%,\\n    transparent 50%,\\n    rgba(255, 255, 255, 0.15) 50%,\\n    rgba(255, 255, 255, 0.15) 75%,\\n    transparent 75%,\\n    transparent\\n  );\\n  background-size: 1rem 1rem;\\n}\\n\\n/* Animated Stripes */\\n:host([animated]) .progress__bar::after {\\n  animation: progress-stripes var(--progress-animation-duration) linear infinite;\\n}\\n\\n@keyframes progress-stripes {\\n  from {\\n    background-position: 1rem 0;\\n  }\\n  to {\\n    background-position: 0 0;\\n  }\\n}\\n\\n/* Indeterminate State */\\n:host([indeterminate]) .progress__bar {\\n  width: 30% !important;\\n  animation: progress-indeterminate var(--progress-animation-duration) ease-in-out infinite;\\n}\\n\\n@keyframes progress-indeterminate {\\n  0% {\\n    transform: translateX(-100%);\\n  }\\n  100% {\\n    transform: translateX(400%);\\n  }\\n}\\n\\n/* Label */\\n.progress__label {\\n  position: absolute;\\n  top: 50%;\\n  left: 50%;\\n  transform: translate(-50%, -50%);\\n  font-size: 0.75rem;\\n  font-weight: 600;\\n  color: white;\\n  text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);\\n  white-space: nowrap;\\n  z-index: 1;\\n}\\n\\n.progress--with-label {\\n  height: calc(var(--progress-height) + 0.5rem); /* +8px */\\n  min-height: 1.25rem; /* 20px */\\n}\\n\\n/* Circular Progress */\\n.progress--circular {\\n  display: inline-block;\\n  width: var(--progress-spinner-size, 2.5rem); /* 40px */\\n  height: var(--progress-spinner-size, 2.5rem); /* 40px */\\n  position: relative;\\n  background: transparent;\\n}\\n\\n.progress__circle {\\n  transform: rotate(-90deg);\\n  width: 100%;\\n  height: 100%;\\n  background: transparent;\\n  shape-rendering: geometricPrecision;\\n}\\n\\n.progress__circle-bg,\\n.progress__circle-bar {\\n  fill: none;\\n  stroke-width: var(--progress-spinner-stroke, 4px);\\n  shape-rendering: geometricPrecision;\\n  vector-effect: non-scaling-stroke;\\n}\\n\\n.progress__circle-bg {\\n  stroke: var(--progress-bg);\\n  opacity: 0.2;\\n}\\n\\n.progress__circle-bar {\\n  stroke: var(--progress-color);\\n  stroke-linecap: round;\\n  transition: stroke-dashoffset 0.3s ease;\\n}\\n\\n/* Circular Indeterminate */\\n:host([variant=\\\"circular\\\"][indeterminate]) .progress__circle {\\n  animation: progress-rotate 2s linear infinite;\\n}\\n\\n:host([variant=\\\"circular\\\"][indeterminate]) .progress__circle-bar {\\n  animation: progress-dash 1.5s ease-in-out infinite;\\n}\\n\\n@keyframes progress-rotate {\\n  100% {\\n    transform: rotate(270deg);\\n  }\\n}\\n\\n@keyframes progress-dash {\\n  0% {\\n    stroke-dasharray: 1, 150;\\n    stroke-dashoffset: 0;\\n  }\\n  50% {\\n    stroke-dasharray: 90, 150;\\n    stroke-dashoffset: -35;\\n  }\\n  100% {\\n    stroke-dasharray: 90, 150;\\n    stroke-dashoffset: -124;\\n  }\\n}\\n\\n/* Circular Label */\\n.progress__circle-label {\\n  position: absolute;\\n  top: 50%;\\n  left: 50%;\\n  transform: translate(-50%, -50%);\\n  font-size: 0.625rem; /* Default medium size */\\n  font-weight: 600;\\n  color: var(--progress-color);\\n  -webkit-font-smoothing: antialiased;\\n  -moz-osx-font-smoothing: grayscale;\\n}\\n\\n/* Adjust label size for different sizes */\\n:host([size=\\\"small\\\"]) .progress__circle-label {\\n  font-size: 0.375rem;\\n}\\n\\n:host([size=\\\"medium\\\"]) .progress__circle-label {\\n  font-size: 0.625rem;\\n}\\n\\n:host([size=\\\"large\\\"]) .progress__circle-label {\\n  font-size: 1rem;\\n}\\n\\n:host([size=\\\"xl\\\"]) .progress__circle-label {\\n  font-size: 1.25rem;\\n}\\n\\n:host([size=\\\"xxl\\\"]) .progress__circle-label {\\n  font-size: 1.75rem;\\n}\\n\\n:host([size=\\\"xxxl\\\"]) .progress__circle-label {\\n  font-size: 2.25rem;\\n}\";",null],"names":[],"mappings":"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"}
+{"version":3,"file":"snice-progress.js","sources":["../../../components/progress/snice-progress.css?inline","../../../../components/progress/snice-progress.ts"],"sourcesContent":["export default \":host {\\n  --progress-height: 0.5rem; /* 8px */\\n  --progress-radius: 4px;\\n  --progress-bg: #e5e7eb;\\n  --progress-color: #3b82f6;\\n  --progress-animation-duration: 1.5s;\\n  \\n  display: inline-block;\\n  width: 100%;\\n}\\n\\n:host([variant=\\\"circular\\\"]) {\\n  width: auto;\\n}\\n\\n/* Linear Progress Bar */\\n.progress {\\n  position: relative;\\n  width: 100%;\\n  background: var(--progress-bg);\\n  border-radius: var(--progress-radius);\\n  overflow: hidden;\\n}\\n\\n.progress--linear {\\n  height: var(--progress-height);\\n}\\n\\n.progress__bar {\\n  height: 100%;\\n  background: var(--progress-color);\\n  border-radius: var(--progress-radius);\\n  transition: width 0.3s ease;\\n  position: relative;\\n  overflow: hidden;\\n}\\n\\n/* Sizes */\\n:host([size=\\\"small\\\"]) {\\n  --progress-height: 0.25rem; /* 4px */\\n  --progress-spinner-size: 1.5rem; /* 24px */\\n  --progress-spinner-stroke: 3px;\\n}\\n\\n:host([size=\\\"medium\\\"]) {\\n  --progress-height: 0.5rem; /* 8px */\\n  --progress-spinner-size: 2.5rem; /* 40px */\\n  --progress-spinner-stroke: 4px;\\n}\\n\\n:host([size=\\\"large\\\"]) {\\n  --progress-height: 0.75rem; /* 12px */\\n  --progress-spinner-size: 3.5rem; /* 56px */\\n  --progress-spinner-stroke: 5px;\\n}\\n\\n:host([size=\\\"xl\\\"]) {\\n  --progress-height: 1rem; /* 16px */\\n  --progress-spinner-size: 5rem; /* 80px */\\n  --progress-spinner-stroke: 6px;\\n}\\n\\n:host([size=\\\"xxl\\\"]) {\\n  --progress-height: 1.25rem; /* 20px */\\n  --progress-spinner-size: 7.5rem; /* 120px */\\n  --progress-spinner-stroke: 8px;\\n}\\n\\n:host([size=\\\"xxxl\\\"]) {\\n  --progress-height: 1.5rem; /* 24px */\\n  --progress-spinner-size: 10rem; /* 160px */\\n  --progress-spinner-stroke: 10px;\\n}\\n\\n/* Colors */\\n:host([color=\\\"primary\\\"]) {\\n  --progress-color: #3b82f6;\\n}\\n\\n:host([color=\\\"success\\\"]) {\\n  --progress-color: #10b981;\\n}\\n\\n:host([color=\\\"warning\\\"]) {\\n  --progress-color: #f59e0b;\\n}\\n\\n:host([color=\\\"error\\\"]) {\\n  --progress-color: #ef4444;\\n}\\n\\n:host([color=\\\"info\\\"]) {\\n  --progress-color: #6366f1;\\n}\\n\\n/* Striped Pattern */\\n:host([striped]) .progress__bar::after {\\n  content: '';\\n  position: absolute;\\n  top: 0;\\n  left: 0;\\n  right: 0;\\n  bottom: 0;\\n  background-image: linear-gradient(\\n    45deg,\\n    rgba(255, 255, 255, 0.15) 25%,\\n    transparent 25%,\\n    transparent 50%,\\n    rgba(255, 255, 255, 0.15) 50%,\\n    rgba(255, 255, 255, 0.15) 75%,\\n    transparent 75%,\\n    transparent\\n  );\\n  background-size: 1rem 1rem;\\n}\\n\\n/* Animated Stripes */\\n:host([animated]) .progress__bar::after {\\n  animation: progress-stripes var(--progress-animation-duration) linear infinite;\\n}\\n\\n@keyframes progress-stripes {\\n  from {\\n    background-position: 1rem 0;\\n  }\\n  to {\\n    background-position: 0 0;\\n  }\\n}\\n\\n/* Indeterminate State */\\n:host([indeterminate]) .progress__bar {\\n  width: 30% !important;\\n  animation: progress-indeterminate var(--progress-animation-duration) ease-in-out infinite;\\n}\\n\\n@keyframes progress-indeterminate {\\n  0% {\\n    transform: translateX(-100%);\\n  }\\n  100% {\\n    transform: translateX(400%);\\n  }\\n}\\n\\n/* Label */\\n.progress__label {\\n  position: absolute;\\n  top: 50%;\\n  left: 50%;\\n  transform: translate(-50%, -50%);\\n  font-size: 0.75rem;\\n  font-weight: 600;\\n  color: white;\\n  text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);\\n  white-space: nowrap;\\n  z-index: 1;\\n}\\n\\n.progress--with-label {\\n  height: calc(var(--progress-height) + 0.5rem); /* +8px */\\n  min-height: 1.25rem; /* 20px */\\n}\\n\\n/* Circular Progress */\\n.progress--circular {\\n  display: inline-block;\\n  width: var(--progress-spinner-size, 2.5rem); /* 40px */\\n  height: var(--progress-spinner-size, 2.5rem); /* 40px */\\n  position: relative;\\n  background: transparent;\\n}\\n\\n.progress__circle {\\n  transform: rotate(-90deg);\\n  width: 100%;\\n  height: 100%;\\n  background: transparent;\\n  shape-rendering: geometricPrecision;\\n}\\n\\n.progress__circle-bg,\\n.progress__circle-bar {\\n  fill: none;\\n  stroke-width: var(--progress-spinner-stroke, 4px);\\n  shape-rendering: geometricPrecision;\\n  vector-effect: non-scaling-stroke;\\n}\\n\\n.progress__circle-bg {\\n  stroke: var(--progress-bg);\\n  opacity: 0.2;\\n}\\n\\n.progress__circle-bar {\\n  stroke: var(--progress-color);\\n  stroke-linecap: round;\\n  transition: stroke-dashoffset 0.3s ease;\\n}\\n\\n/* Circular Indeterminate */\\n:host([variant=\\\"circular\\\"][indeterminate]) .progress__circle {\\n  animation: progress-rotate 2s linear infinite;\\n}\\n\\n:host([variant=\\\"circular\\\"][indeterminate]) .progress__circle-bar {\\n  animation: progress-dash 1.5s ease-in-out infinite;\\n}\\n\\n@keyframes progress-rotate {\\n  100% {\\n    transform: rotate(270deg);\\n  }\\n}\\n\\n@keyframes progress-dash {\\n  0% {\\n    stroke-dasharray: 1, 150;\\n    stroke-dashoffset: 0;\\n  }\\n  50% {\\n    stroke-dasharray: 90, 150;\\n    stroke-dashoffset: -35;\\n  }\\n  100% {\\n    stroke-dasharray: 90, 150;\\n    stroke-dashoffset: -124;\\n  }\\n}\\n\\n/* Circular Label */\\n.progress__circle-label {\\n  position: absolute;\\n  top: 50%;\\n  left: 50%;\\n  transform: translate(-50%, -50%);\\n  font-size: 0.625rem; /* Default medium size */\\n  font-weight: 600;\\n  color: var(--progress-color);\\n  -webkit-font-smoothing: antialiased;\\n  -moz-osx-font-smoothing: grayscale;\\n}\\n\\n/* Adjust label size for different sizes */\\n:host([size=\\\"small\\\"]) .progress__circle-label {\\n  font-size: 0.375rem;\\n}\\n\\n:host([size=\\\"medium\\\"]) .progress__circle-label {\\n  font-size: 0.625rem;\\n}\\n\\n:host([size=\\\"large\\\"]) .progress__circle-label {\\n  font-size: 1rem;\\n}\\n\\n:host([size=\\\"xl\\\"]) .progress__circle-label {\\n  font-size: 1.25rem;\\n}\\n\\n:host([size=\\\"xxl\\\"]) .progress__circle-label {\\n  font-size: 1.75rem;\\n}\\n\\n:host([size=\\\"xxxl\\\"]) .progress__circle-label {\\n  font-size: 2.25rem;\\n}\";",null],"names":["cssTag"],"mappings":"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"}

package/dist/components/radio/snice-radio.d.ts

@@ -1,5 +1,6 @@
 import type { RadioSize, SniceRadioElement } from './snice-radio.types';
 export declare class SniceRadio extends HTMLElement implements SniceRadioElement {
+    private _isUpdatingGroup;
     checked: boolean;
     disabled: boolean;
     required: boolean;
@@ -12,12 +13,11 @@ export declare class SniceRadio extends HTMLElement implements SniceRadioElement
     radio?: HTMLElement;
     labelElement?: HTMLElement;
     wrapper?: HTMLElement;
-    html(): string;
-    css(): string;
+    renderContent(): import("snice").TemplateResult;
+    componentStyles(): import("snice").CSSResult;
     init(): void;
-    handleChange(e: Event): void;
     handleClick(e: Event): void;
-    handleCheckedChange(): void;
+    handleCheckedChange(oldValue: boolean, newValue: boolean): void;
     handleDisabledChange(): void;
     handleInvalidChange(): void;
     handleRequiredChange(): void;

package/dist/components/radio/snice-radio.js

@@ -1,7 +1,7 @@
 import { __esDecorate, __runInitializers } from 'tslib';
-import { element, property, query, ready, on, watch, dispatch } from 'snice';
+import { element, property, query, render, styles, ready, on, watch, dispatch, html, css } from 'snice';
 
-var css = ":host {\n  display: inline-block;\n  font-family: var(--snice-font-family);\n}\n\n.radio-wrapper {\n  display: inline-flex;\n  align-items: center;\n  position: relative;\n  cursor: pointer;\n  user-select: none;\n}\n\n.radio-wrapper--disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n/* Hide native radio */\n.radio-input {\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n\n/* Custom radio */\n.radio {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--snice-color-background);\n  border: 2px solid var(--snice-color-border);\n  border-radius: 50%;\n  transition: all var(--snice-transition-fast) ease;\n}\n\n/* Size variants */\n.radio--small {\n  width: 1rem; /* 16px */\n  height: 1rem; /* 16px */\n}\n\n.radio--medium {\n  width: 1.25rem; /* 20px */\n  height: 1.25rem; /* 20px */\n}\n\n.radio--large {\n  width: 1.5rem; /* 24px */\n  height: 1.5rem; /* 24px */\n}\n\n/* States */\n.radio-input:checked ~ .radio {\n  border-color: var(--snice-color-primary);\n}\n\n.radio-input:focus-visible ~ .radio {\n  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n.radio-input:disabled ~ .radio {\n  background: var(--snice-color-background-secondary);\n  border-color: var(--snice-color-border);\n}\n\n.radio-input:disabled:checked ~ .radio {\n  border-color: var(--snice-color-text-secondary);\n}\n\n.radio-input:disabled:checked ~ .radio .radio-dot {\n  background: var(--snice-color-text-secondary);\n}\n\n/* Invalid state */\n.radio--invalid {\n  border-color: var(--snice-color-danger);\n}\n\n.radio-input:checked ~ .radio--invalid {\n  border-color: var(--snice-color-danger);\n}\n\n.radio-input:checked ~ .radio--invalid .radio-dot {\n  background: var(--snice-color-danger);\n}\n\n/* Radio dot */\n.radio-dot {\n  position: absolute;\n  border-radius: 50%;\n  background: var(--snice-color-primary);\n  transform: scale(0);\n  transition: transform var(--snice-transition-fast) ease;\n}\n\n.radio-input:checked ~ .radio .radio-dot {\n  transform: scale(1);\n}\n\n/* Dot sizes */\n.radio--small .radio-dot {\n  width: 0.375rem; /* 6px */\n  height: 0.375rem; /* 6px */\n}\n\n.radio--medium .radio-dot {\n  width: 0.5rem; /* 8px */\n  height: 0.5rem; /* 8px */\n}\n\n.radio--large .radio-dot {\n  width: 0.625rem; /* 10px */\n  height: 0.625rem; /* 10px */\n}\n\n/* Label */\n.radio-label {\n  margin-left: 0.5rem; /* 8px */\n  color: var(--snice-color-text);\n  cursor: pointer;\n}\n\n.radio-label--small {\n  font-size: var(--snice-font-size-sm);\n}\n\n.radio-label--medium {\n  font-size: var(--snice-font-size-md);\n}\n\n.radio-label--large {\n  font-size: var(--snice-font-size-lg);\n}\n\n.radio-wrapper--disabled .radio-label {\n  color: var(--snice-color-text-secondary);\n  cursor: not-allowed;\n}\n\n/* Required indicator */\n.radio-label--required::after {\n  content: ' *';\n  color: var(--snice-color-danger);\n}\n\n/* Focus ring for keyboard navigation */\n.radio-input:focus-visible ~ .radio {\n  outline: 2px solid var(--snice-color-primary);\n  outline-offset: 2px;\n}\n\n/* Hover effect */\n.radio-wrapper:not(.radio-wrapper--disabled):hover .radio {\n  border-color: var(--snice-color-primary);\n}\n\n/* Radio Group styling (when used together) */\n:host {\n  --radio-group-gap: 0.75rem; /* 12px */\n}\n\n:host([data-group]) {\n  display: block;\n}\n\n:host([data-group]) + :host([data-group]) {\n  margin-top: var(--radio-group-gap);\n}";
+var cssContent = ":host {\n  display: inline-block;\n  font-family: var(--snice-font-family);\n}\n\n.radio-wrapper {\n  display: inline-flex;\n  align-items: center;\n  position: relative;\n  cursor: pointer;\n  user-select: none;\n}\n\n.radio-wrapper--disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n/* Hide native radio */\n.radio-input {\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n\n/* Custom radio */\n.radio {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--snice-color-background);\n  border: 2px solid var(--snice-color-border);\n  border-radius: 50%;\n  transition: all var(--snice-transition-fast) ease;\n}\n\n/* Size variants */\n.radio--small {\n  width: 1rem; /* 16px */\n  height: 1rem; /* 16px */\n}\n\n.radio--medium {\n  width: 1.25rem; /* 20px */\n  height: 1.25rem; /* 20px */\n}\n\n.radio--large {\n  width: 1.5rem; /* 24px */\n  height: 1.5rem; /* 24px */\n}\n\n/* States */\n.radio-input:checked ~ .radio {\n  border-color: var(--snice-color-primary);\n}\n\n.radio-input:focus-visible ~ .radio {\n  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n.radio-input:disabled ~ .radio {\n  background: var(--snice-color-background-secondary);\n  border-color: var(--snice-color-border);\n}\n\n.radio-input:disabled:checked ~ .radio {\n  border-color: var(--snice-color-text-secondary);\n}\n\n.radio-input:disabled:checked ~ .radio .radio-dot {\n  background: var(--snice-color-text-secondary);\n}\n\n/* Invalid state */\n.radio--invalid {\n  border-color: var(--snice-color-danger);\n}\n\n.radio-input:checked ~ .radio--invalid {\n  border-color: var(--snice-color-danger);\n}\n\n.radio-input:checked ~ .radio--invalid .radio-dot {\n  background: var(--snice-color-danger);\n}\n\n/* Radio dot */\n.radio-dot {\n  position: absolute;\n  border-radius: 50%;\n  background: var(--snice-color-primary);\n  transform: scale(0);\n  transition: transform var(--snice-transition-fast) ease;\n}\n\n.radio-input:checked ~ .radio .radio-dot {\n  transform: scale(1);\n}\n\n/* Dot sizes */\n.radio--small .radio-dot {\n  width: 0.375rem; /* 6px */\n  height: 0.375rem; /* 6px */\n}\n\n.radio--medium .radio-dot {\n  width: 0.5rem; /* 8px */\n  height: 0.5rem; /* 8px */\n}\n\n.radio--large .radio-dot {\n  width: 0.625rem; /* 10px */\n  height: 0.625rem; /* 10px */\n}\n\n/* Label */\n.radio-label {\n  margin-left: 0.5rem; /* 8px */\n  color: var(--snice-color-text);\n  cursor: pointer;\n}\n\n.radio-label--small {\n  font-size: var(--snice-font-size-sm);\n}\n\n.radio-label--medium {\n  font-size: var(--snice-font-size-md);\n}\n\n.radio-label--large {\n  font-size: var(--snice-font-size-lg);\n}\n\n.radio-wrapper--disabled .radio-label {\n  color: var(--snice-color-text-secondary);\n  cursor: not-allowed;\n}\n\n/* Required indicator */\n.radio-label--required::after {\n  content: ' *';\n  color: var(--snice-color-danger);\n}\n\n/* Focus ring for keyboard navigation */\n.radio-input:focus-visible ~ .radio {\n  outline: 2px solid var(--snice-color-primary);\n  outline-offset: 2px;\n}\n\n/* Hover effect */\n.radio-wrapper:not(.radio-wrapper--disabled):hover .radio {\n  border-color: var(--snice-color-primary);\n}\n\n/* Radio Group styling (when used together) */\n:host {\n  --radio-group-gap: 0.75rem; /* 12px */\n}\n\n:host([data-group]) {\n  display: block;\n}\n\n:host([data-group]) + :host([data-group]) {\n  margin-top: var(--radio-group-gap);\n}";
 
 let SniceRadio = (() => {
     let _classDecorators = [element('snice-radio')];
@@ -46,8 +46,9 @@ let SniceRadio = (() => {
     let _wrapper_decorators;
     let _wrapper_initializers = [];
     let _wrapper_extraInitializers = [];
+    let _renderContent_decorators;
+    let _componentStyles_decorators;
     let _init_decorators;
-    let _handleChange_decorators;
     let _handleClick_decorators;
     let _handleCheckedChange_decorators;
     let _handleDisabledChange_decorators;
@@ -73,9 +74,10 @@ let SniceRadio = (() => {
             _radio_decorators = [query('.radio')];
             _labelElement_decorators = [query('.radio-label')];
             _wrapper_decorators = [query('.radio-wrapper')];
+            _renderContent_decorators = [render()];
+            _componentStyles_decorators = [styles()];
             _init_decorators = [ready()];
-            _handleChange_decorators = [on('change', '.radio-input')];
-            _handleClick_decorators = [on('click', '.radio-input')];
+            _handleClick_decorators = [on('click')];
             _handleCheckedChange_decorators = [watch('checked')];
             _handleDisabledChange_decorators = [watch('disabled')];
             _handleInvalidChange_decorators = [watch('invalid')];
@@ -84,8 +86,9 @@ let SniceRadio = (() => {
             _handleNameChange_decorators = [watch('name')];
             _handleValueChange_decorators = [watch('value')];
             _dispatchChangeEvent_decorators = [dispatch('@snice/radio-change', { bubbles: true, composed: true })];
+            __esDecorate(this, null, _renderContent_decorators, { kind: "method", name: "renderContent", static: false, private: false, access: { has: obj => "renderContent" in obj, get: obj => obj.renderContent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _componentStyles_decorators, { kind: "method", name: "componentStyles", static: false, private: false, access: { has: obj => "componentStyles" in obj, get: obj => obj.componentStyles }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _init_decorators, { kind: "method", name: "init", static: false, private: false, access: { has: obj => "init" in obj, get: obj => obj.init }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _handleChange_decorators, { kind: "method", name: "handleChange", static: false, private: false, access: { has: obj => "handleChange" in obj, get: obj => obj.handleChange }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _handleClick_decorators, { kind: "method", name: "handleClick", static: false, private: false, access: { has: obj => "handleClick" in obj, get: obj => obj.handleClick }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _handleCheckedChange_decorators, { kind: "method", name: "handleCheckedChange", static: false, private: false, access: { has: obj => "handleCheckedChange" in obj, get: obj => obj.handleCheckedChange }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _handleDisabledChange_decorators, { kind: "method", name: "handleDisabledChange", static: false, private: false, access: { has: obj => "handleDisabledChange" in obj, get: obj => obj.handleDisabledChange }, metadata: _metadata }, null, _instanceExtraInitializers);
@@ -112,38 +115,38 @@ let SniceRadio = (() => {
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
             __runInitializers(_classThis, _classExtraInitializers);
         }
-        html() {
-            return /*html*/ `
-      <label class="radio-wrapper ${this.disabled ? 'radio-wrapper--disabled' : ''}">
+        renderContent() {
+            const wrapperClasses = `radio-wrapper${this.disabled ? ' radio-wrapper--disabled' : ''}`;
+            const radioClasses = `radio radio--${this.size}${this.invalid ? ' radio--invalid' : ''}`;
+            const labelClasses = `radio-label radio-label--${this.size}${this.required ? ' radio-label--required' : ''}`;
+            return html /*html*/ `
+      <label class="${wrapperClasses}">
         <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}"` : ''}
+          ?checked="${this.checked}"
+          ?disabled="${this.disabled}"
+          ?required="${this.required}"
+          name="${this.name}"
+          value="${this.value}"
           aria-invalid="${this.invalid}"
           part="input"
         />
-        
-        <span class="radio 
-          radio--${this.size}
-          ${this.invalid ? 'radio--invalid' : ''}"
-          part="radio">
+
+        <span class="${radioClasses}" 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">
+
+        <if ${this.label}>
+          <span class="${labelClasses}" part="label">
             ${this.label}
           </span>
-        ` : ''}
+        </if>
       </label>
     `;
         }
-        css() {
-            return css;
+        componentStyles() {
+            return css /*css*/ `${cssContent}`;
         }
         init() {
             // Set initial states
@@ -158,26 +161,26 @@ let SniceRadio = (() => {
                 }
             }
         }
-        handleChange(e) {
-            const target = e.target;
-            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();
-        }
         handleClick(e) {
-            // Allow click to propagate for label association
-            e.stopPropagation();
+            // Don't handle if disabled
+            if (this.disabled)
+                return;
+            // Set this radio as checked
+            if (!this.checked) {
+                this.checked = true;
+                this.dispatchChangeEvent();
+            }
         }
-        handleCheckedChange() {
+        handleCheckedChange(oldValue, newValue) {
             if (this.input) {
                 this.input.checked = this.checked;
             }
-            // If checked, uncheck others in the same group
-            if (this.checked && this.name) {
+            // Skip if we're in the middle of updating the group (prevent infinite loops)
+            if (this._isUpdatingGroup) {
+                return;
+            }
+            // Only uncheck others when transitioning from false to true
+            if (newValue === true && oldValue === false && this.name) {
                 this.uncheckOthersInGroup();
             }
         }
@@ -221,14 +224,18 @@ let SniceRadio = (() => {
                 this.input.value = this.value;
             }
         }
-        uncheckOthersInGroup() {
+        uncheckOthersInGroup(except) {
             if (!this.name)
                 return;
-            // Find all radios with the same name
+            const exceptElement = except || this;
+            // Find all radios with the same name and uncheck them
             const radios = document.querySelectorAll(`snice-radio[name="${this.name}"]`);
             radios.forEach(radio => {
-                if (radio !== this && radio.checked) {
+                if (radio !== exceptElement && radio.checked) {
+                    // Set flag to prevent recursive watch handler calls
+                    radio._isUpdatingGroup = true;
                     radio.checked = false;
+                    radio._isUpdatingGroup = false;
                 }
             });
         }
@@ -257,7 +264,8 @@ let SniceRadio = (() => {
         }
         constructor() {
             super(...arguments);
-            this.checked = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _checked_initializers, false));
+            this._isUpdatingGroup = (__runInitializers(this, _instanceExtraInitializers), false);
+            this.checked = __runInitializers(this, _checked_initializers, false);
             this.disabled = (__runInitializers(this, _checked_extraInitializers), __runInitializers(this, _disabled_initializers, false));
             this.required = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _required_initializers, false));
             this.invalid = (__runInitializers(this, _required_extraInitializers), __runInitializers(this, _invalid_initializers, false));