snice 2.5.4 → 3.2.0

package/dist/components/checkbox/snice-checkbox.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, html, css } from 'snice';
 
-var css = ":host {\n  display: inline-block;\n  font-family: var(--snice-font-family);\n}\n\n.checkbox-wrapper {\n  display: inline-flex;\n  align-items: center;\n  position: relative;\n  cursor: pointer;\n  user-select: none;\n}\n\n.checkbox-wrapper--disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n/* Hide native checkbox */\n.checkbox-input {\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n\n/* Custom checkbox */\n.checkbox {\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: var(--snice-border-radius-sm);\n  transition: all var(--snice-transition-fast) ease;\n}\n\n/* Size variants */\n.checkbox--small {\n  width: 1rem; /* 16px */\n  height: 1rem; /* 16px */\n}\n\n.checkbox--medium {\n  width: 1.25rem; /* 20px */\n  height: 1.25rem; /* 20px */\n}\n\n.checkbox--large {\n  width: 1.5rem; /* 24px */\n  height: 1.5rem; /* 24px */\n}\n\n/* States */\n.checkbox-input:checked ~ .checkbox {\n  background: var(--snice-color-primary);\n  border-color: var(--snice-color-primary);\n}\n\n.checkbox-input:focus-visible ~ .checkbox {\n  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n.checkbox-input:disabled ~ .checkbox {\n  background: var(--snice-color-background-secondary);\n  border-color: var(--snice-color-border);\n}\n\n.checkbox-input:disabled:checked ~ .checkbox {\n  background: var(--snice-color-text-secondary);\n  border-color: var(--snice-color-text-secondary);\n}\n\n/* Invalid state */\n.checkbox--invalid {\n  border-color: var(--snice-color-danger);\n}\n\n.checkbox-input:checked ~ .checkbox--invalid {\n  background: var(--snice-color-danger);\n  border-color: var(--snice-color-danger);\n}\n\n/* Checkmark */\n.checkbox-icon {\n  position: absolute;\n  display: none;\n  color: white;\n}\n\n.checkbox-input:checked ~ .checkbox .checkbox-icon--check {\n  display: block;\n}\n\n.checkbox--indeterminate .checkbox-icon--check {\n  display: none !important;\n}\n\n.checkbox--indeterminate .checkbox-icon--indeterminate {\n  display: block !important;\n}\n\n/* Icon sizes */\n.checkbox--small .checkbox-icon {\n  width: 0.75rem; /* 12px */\n  height: 0.75rem; /* 12px */\n}\n\n.checkbox--medium .checkbox-icon {\n  width: 0.875rem; /* 14px */\n  height: 0.875rem; /* 14px */\n}\n\n.checkbox--large .checkbox-icon {\n  width: 1.125rem; /* 18px */\n  height: 1.125rem; /* 18px */\n}\n\n/* Label */\n.checkbox-label {\n  margin-left: 0.5rem; /* 8px */\n  color: var(--snice-color-text);\n  cursor: pointer;\n}\n\n.checkbox-label--small {\n  font-size: var(--snice-font-size-sm);\n}\n\n.checkbox-label--medium {\n  font-size: var(--snice-font-size-md);\n}\n\n.checkbox-label--large {\n  font-size: var(--snice-font-size-lg);\n}\n\n.checkbox-wrapper--disabled .checkbox-label {\n  color: var(--snice-color-text-secondary);\n  cursor: not-allowed;\n}\n\n/* Required indicator */\n.checkbox-label--required::after {\n  content: ' *';\n  color: var(--snice-color-danger);\n}\n\n/* Focus ring for keyboard navigation */\n.checkbox-input:focus-visible ~ .checkbox {\n  outline: 2px solid var(--snice-color-primary);\n  outline-offset: 2px;\n}\n\n/* Hover effect */\n.checkbox-wrapper:not(.checkbox-wrapper--disabled):hover .checkbox {\n  border-color: var(--snice-color-primary);\n}\n\n.checkbox-wrapper:not(.checkbox-wrapper--disabled):hover .checkbox-input:checked ~ .checkbox {\n  background: var(--snice-color-primary-hover);\n  border-color: var(--snice-color-primary-hover);\n}";
+var cssContent = ":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;min-height:1.25rem}.checkbox-wrapper--disabled{cursor:not-allowed;opacity:.6}.checkbox-input{position:absolute;opacity:0;left:0;top:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1;pointer-events:all}.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}.checkbox--small{width:1rem;height:1rem}.checkbox--medium{width:1.25rem;height:1.25rem}.checkbox--large{width:1.5rem;height:1.5rem}.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,.1);outline:2px solid var(--snice-color-primary);outline-offset:2px}.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)}.checkbox--invalid{border-color:var(--snice-color-danger)}.checkbox-input:checked~.checkbox--invalid{background:var(--snice-color-danger);border-color:var(--snice-color-danger)}.checkbox-icon{position:absolute;display:none;color:#fff}.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}.checkbox--small .checkbox-icon{width:.75rem;height:.75rem}.checkbox--medium .checkbox-icon{width:.875rem;height:.875rem}.checkbox--large .checkbox-icon{width:1.125rem;height:1.125rem}.checkbox-label{margin-left:.5rem;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}.checkbox-label--required::after{content:' *';color:var(--snice-color-danger)}.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)}";
 
 let SniceCheckbox = (() => {
     let _classDecorators = [element('snice-checkbox')];
@@ -49,16 +49,8 @@ let SniceCheckbox = (() => {
     let _wrapper_decorators;
     let _wrapper_initializers = [];
     let _wrapper_extraInitializers = [];
-    let _init_decorators;
-    let _handleChange_decorators;
-    let _handleClick_decorators;
-    let _handleCheckedChange_decorators;
-    let _handleIndeterminateChange_decorators;
-    let _handleDisabledChange_decorators;
-    let _handleInvalidChange_decorators;
-    let _handleRequiredChange_decorators;
-    let _handleLabelChange_decorators;
-    let _dispatchChangeEvent_decorators;
+    let _renderContent_decorators;
+    let _componentStyles_decorators;
     (class extends _classSuper {
         static { _classThis = this; }
         static {
@@ -76,26 +68,10 @@ let SniceCheckbox = (() => {
             _checkbox_decorators = [query('.checkbox')];
             _labelElement_decorators = [query('.checkbox-label')];
             _wrapper_decorators = [query('.checkbox-wrapper')];
-            _init_decorators = [ready()];
-            _handleChange_decorators = [on('change', '.checkbox-input')];
-            _handleClick_decorators = [on('click', '.checkbox-input')];
-            _handleCheckedChange_decorators = [watch('checked')];
-            _handleIndeterminateChange_decorators = [watch('indeterminate')];
-            _handleDisabledChange_decorators = [watch('disabled')];
-            _handleInvalidChange_decorators = [watch('invalid')];
-            _handleRequiredChange_decorators = [watch('required')];
-            _handleLabelChange_decorators = [watch('label')];
-            _dispatchChangeEvent_decorators = [dispatch('@snice/checkbox-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, _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, _handleIndeterminateChange_decorators, { kind: "method", name: "handleIndeterminateChange", static: false, private: false, access: { has: obj => "handleIndeterminateChange" in obj, get: obj => obj.handleIndeterminateChange }, 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);
-            __esDecorate(this, null, _handleInvalidChange_decorators, { kind: "method", name: "handleInvalidChange", static: false, private: false, access: { has: obj => "handleInvalidChange" in obj, get: obj => obj.handleInvalidChange }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _handleRequiredChange_decorators, { kind: "method", name: "handleRequiredChange", static: false, private: false, access: { has: obj => "handleRequiredChange" in obj, get: obj => obj.handleRequiredChange }, 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, _dispatchChangeEvent_decorators, { kind: "method", name: "dispatchChangeEvent", static: false, private: false, access: { has: obj => "dispatchChangeEvent" in obj, get: obj => obj.dispatchChangeEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            _renderContent_decorators = [render()];
+            _componentStyles_decorators = [styles()];
+            __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(null, null, _checked_decorators, { kind: "field", name: "checked", static: false, private: false, access: { has: obj => "checked" in obj, get: obj => obj.checked, set: (obj, value) => { obj.checked = value; } }, metadata: _metadata }, _checked_initializers, _checked_extraInitializers);
             __esDecorate(null, null, _indeterminate_decorators, { kind: "field", name: "indeterminate", static: false, private: false, access: { has: obj => "indeterminate" in obj, get: obj => obj.indeterminate, set: (obj, value) => { obj.indeterminate = value; } }, metadata: _metadata }, _indeterminate_initializers, _indeterminate_extraInitializers);
             __esDecorate(null, null, _disabled_decorators, { kind: "field", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
@@ -114,132 +90,69 @@ let SniceCheckbox = (() => {
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
             __runInitializers(_classThis, _classExtraInitializers);
         }
-        html() {
-            return /*html*/ `
-      <label class="checkbox-wrapper ${this.disabled ? 'checkbox-wrapper--disabled' : ''}">
+        connectedCallback() {
+            this.addEventListener('click', (e) => {
+                if (!this.disabled && e.target === this)
+                    this.input?.click();
+            });
+        }
+        renderContent() {
+            const wrapperClasses = `checkbox-wrapper${this.disabled ? ' checkbox-wrapper--disabled' : ''}`;
+            const checkboxClasses = `checkbox checkbox--${this.size}${this.invalid ? ' checkbox--invalid' : ''}${this.indeterminate ? ' checkbox--indeterminate' : ''}`;
+            const labelClasses = `checkbox-label checkbox-label--${this.size}${this.required ? ' checkbox-label--required' : ''}`;
+            return html /*html*/ `
+      <label class="${wrapperClasses}" @change="${(e) => this.handleInternalChange(e)}">
         <input
           type="checkbox"
           class="checkbox-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}"
           aria-checked="${this.indeterminate ? 'mixed' : this.checked}"
           part="input"
         />
-        
-        <span class="checkbox 
-          checkbox--${this.size}
-          ${this.invalid ? 'checkbox--invalid' : ''}
-          ${this.indeterminate ? 'checkbox--indeterminate' : ''}"
-          part="checkbox">
-          
+
+        <span class="${checkboxClasses}" part="checkbox">
           <svg class="checkbox-icon checkbox-icon--check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
             <polyline points="20 6 9 17 4 12"></polyline>
           </svg>
-          
+
           <svg class="checkbox-icon checkbox-icon--indeterminate" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
             <line x1="5" y1="12" x2="19" y2="12"></line>
           </svg>
         </span>
-        
-        ${this.label ? /*html*/ `
-          <span class="checkbox-label checkbox-label--${this.size} ${this.required ? 'checkbox-label--required' : ''}" part="label">
+
+        <if ${this.label}>
+          <span class="${labelClasses}" part="label">
             ${this.label}
           </span>
-        ` : ''}
+        </if>
       </label>
     `;
         }
-        css() {
-            return css;
-        }
-        init() {
-            // Set initial states
-            if (this.input) {
-                this.input.checked = this.checked;
-                this.input.indeterminate = this.indeterminate;
-                // Set form value
-                if (this.name) {
-                    this.input.name = this.name;
-                }
-                if (this.value) {
-                    this.input.value = this.value;
-                }
-            }
-            // Update visual state
-            this.updateCheckboxState();
-        }
-        handleChange(e) {
-            const target = e.target;
+        handleInternalChange(event) {
+            const target = event.target;
+            // Only handle change events from the checkbox input
+            if (target.type !== 'checkbox')
+                return;
             this.checked = target.checked;
             this.indeterminate = false; // Clear indeterminate on user interaction
-            this.dispatchChangeEvent();
-        }
-        handleClick(e) {
-            // Allow click to propagate for label association
-            e.stopPropagation();
-        }
-        handleCheckedChange() {
-            if (this.input) {
-                this.input.checked = this.checked;
-            }
-            this.updateCheckboxState();
-        }
-        handleIndeterminateChange() {
-            if (this.input) {
-                this.input.indeterminate = this.indeterminate;
-            }
-            this.updateCheckboxState();
-        }
-        handleDisabledChange() {
-            if (this.input) {
-                this.input.disabled = this.disabled;
-            }
-            if (this.wrapper) {
-                this.wrapper.classList.toggle('checkbox-wrapper--disabled', this.disabled);
-            }
-        }
-        handleInvalidChange() {
-            if (this.input) {
-                this.input.setAttribute('aria-invalid', String(this.invalid));
-            }
-            if (this.checkbox) {
-                this.checkbox.classList.toggle('checkbox--invalid', this.invalid);
-            }
-        }
-        handleRequiredChange() {
-            if (this.input) {
-                this.input.required = this.required;
-            }
-            if (this.labelElement) {
-                this.labelElement.classList.toggle('checkbox-label--required', this.required);
-            }
-        }
-        handleLabelChange() {
-            if (this.labelElement) {
-                this.labelElement.textContent = this.label;
-                this.labelElement.style.display = this.label ? '' : 'none';
-            }
-        }
-        updateCheckboxState() {
-            if (this.checkbox) {
-                // Update indeterminate state
-                this.checkbox.classList.toggle('checkbox--indeterminate', this.indeterminate);
-                // Update aria-checked
-                if (this.input) {
-                    this.input.setAttribute('aria-checked', this.indeterminate ? 'mixed' : String(this.checked));
+            // Dispatch custom event
+            this.dispatchEvent(new CustomEvent('@snice/change', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    checked: this.checked,
+                    indeterminate: this.indeterminate,
+                    checkbox: this
                 }
-            }
+            }));
         }
-        dispatchChangeEvent() {
-            return {
-                checked: this.checked,
-                indeterminate: this.indeterminate,
-                checkbox: this
-            };
+        componentStyles() {
+            return css /*css*/ `${cssContent}`;
         }
         // Public API
         focus() {
@@ -254,12 +167,28 @@ let SniceCheckbox = (() => {
         toggle() {
             this.checked = !this.checked;
             this.indeterminate = false;
-            this.dispatchChangeEvent();
+            this.dispatchEvent(new CustomEvent('@snice/change', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    checked: this.checked,
+                    indeterminate: this.indeterminate,
+                    checkbox: this
+                }
+            }));
         }
         setIndeterminate() {
             this.indeterminate = true;
             this.checked = false;
-            this.dispatchChangeEvent();
+            this.dispatchEvent(new CustomEvent('@snice/change', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    checked: this.checked,
+                    indeterminate: this.indeterminate,
+                    checkbox: this
+                }
+            }));
         }
         constructor() {
             super(...arguments);

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

@@ -1 +1 @@
-{"version":3,"file":"snice-checkbox.js","sources":["../../../components/checkbox/snice-checkbox.css?inline","../../../../components/checkbox/snice-checkbox.ts"],"sourcesContent":["export default \":host {\\n  display: inline-block;\\n  font-family: var(--snice-font-family);\\n}\\n\\n.checkbox-wrapper {\\n  display: inline-flex;\\n  align-items: center;\\n  position: relative;\\n  cursor: pointer;\\n  user-select: none;\\n}\\n\\n.checkbox-wrapper--disabled {\\n  cursor: not-allowed;\\n  opacity: 0.6;\\n}\\n\\n/* Hide native checkbox */\\n.checkbox-input {\\n  position: absolute;\\n  opacity: 0;\\n  width: 0;\\n  height: 0;\\n}\\n\\n/* Custom checkbox */\\n.checkbox {\\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: var(--snice-border-radius-sm);\\n  transition: all var(--snice-transition-fast) ease;\\n}\\n\\n/* Size variants */\\n.checkbox--small {\\n  width: 1rem; /* 16px */\\n  height: 1rem; /* 16px */\\n}\\n\\n.checkbox--medium {\\n  width: 1.25rem; /* 20px */\\n  height: 1.25rem; /* 20px */\\n}\\n\\n.checkbox--large {\\n  width: 1.5rem; /* 24px */\\n  height: 1.5rem; /* 24px */\\n}\\n\\n/* States */\\n.checkbox-input:checked ~ .checkbox {\\n  background: var(--snice-color-primary);\\n  border-color: var(--snice-color-primary);\\n}\\n\\n.checkbox-input:focus-visible ~ .checkbox {\\n  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\\n}\\n\\n.checkbox-input:disabled ~ .checkbox {\\n  background: var(--snice-color-background-secondary);\\n  border-color: var(--snice-color-border);\\n}\\n\\n.checkbox-input:disabled:checked ~ .checkbox {\\n  background: var(--snice-color-text-secondary);\\n  border-color: var(--snice-color-text-secondary);\\n}\\n\\n/* Invalid state */\\n.checkbox--invalid {\\n  border-color: var(--snice-color-danger);\\n}\\n\\n.checkbox-input:checked ~ .checkbox--invalid {\\n  background: var(--snice-color-danger);\\n  border-color: var(--snice-color-danger);\\n}\\n\\n/* Checkmark */\\n.checkbox-icon {\\n  position: absolute;\\n  display: none;\\n  color: white;\\n}\\n\\n.checkbox-input:checked ~ .checkbox .checkbox-icon--check {\\n  display: block;\\n}\\n\\n.checkbox--indeterminate .checkbox-icon--check {\\n  display: none !important;\\n}\\n\\n.checkbox--indeterminate .checkbox-icon--indeterminate {\\n  display: block !important;\\n}\\n\\n/* Icon sizes */\\n.checkbox--small .checkbox-icon {\\n  width: 0.75rem; /* 12px */\\n  height: 0.75rem; /* 12px */\\n}\\n\\n.checkbox--medium .checkbox-icon {\\n  width: 0.875rem; /* 14px */\\n  height: 0.875rem; /* 14px */\\n}\\n\\n.checkbox--large .checkbox-icon {\\n  width: 1.125rem; /* 18px */\\n  height: 1.125rem; /* 18px */\\n}\\n\\n/* Label */\\n.checkbox-label {\\n  margin-left: 0.5rem; /* 8px */\\n  color: var(--snice-color-text);\\n  cursor: pointer;\\n}\\n\\n.checkbox-label--small {\\n  font-size: var(--snice-font-size-sm);\\n}\\n\\n.checkbox-label--medium {\\n  font-size: var(--snice-font-size-md);\\n}\\n\\n.checkbox-label--large {\\n  font-size: var(--snice-font-size-lg);\\n}\\n\\n.checkbox-wrapper--disabled .checkbox-label {\\n  color: var(--snice-color-text-secondary);\\n  cursor: not-allowed;\\n}\\n\\n/* Required indicator */\\n.checkbox-label--required::after {\\n  content: ' *';\\n  color: var(--snice-color-danger);\\n}\\n\\n/* Focus ring for keyboard navigation */\\n.checkbox-input:focus-visible ~ .checkbox {\\n  outline: 2px solid var(--snice-color-primary);\\n  outline-offset: 2px;\\n}\\n\\n/* Hover effect */\\n.checkbox-wrapper:not(.checkbox-wrapper--disabled):hover .checkbox {\\n  border-color: var(--snice-color-primary);\\n}\\n\\n.checkbox-wrapper:not(.checkbox-wrapper--disabled):hover .checkbox-input:checked ~ .checkbox {\\n  background: var(--snice-color-primary-hover);\\n  border-color: var(--snice-color-primary-hover);\\n}\";",null],"names":[],"mappings":"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"}
+{"version":3,"file":"snice-checkbox.js","sources":["../../../components/checkbox/snice-checkbox.css?inline","../../../../components/checkbox/snice-checkbox.ts"],"sourcesContent":["export default \":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;min-height:1.25rem}.checkbox-wrapper--disabled{cursor:not-allowed;opacity:.6}.checkbox-input{position:absolute;opacity:0;left:0;top:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1;pointer-events:all}.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}.checkbox--small{width:1rem;height:1rem}.checkbox--medium{width:1.25rem;height:1.25rem}.checkbox--large{width:1.5rem;height:1.5rem}.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,.1);outline:2px solid var(--snice-color-primary);outline-offset:2px}.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)}.checkbox--invalid{border-color:var(--snice-color-danger)}.checkbox-input:checked~.checkbox--invalid{background:var(--snice-color-danger);border-color:var(--snice-color-danger)}.checkbox-icon{position:absolute;display:none;color:#fff}.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}.checkbox--small .checkbox-icon{width:.75rem;height:.75rem}.checkbox--medium .checkbox-icon{width:.875rem;height:.875rem}.checkbox--large .checkbox-icon{width:1.125rem;height:1.125rem}.checkbox-label{margin-left:.5rem;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}.checkbox-label--required::after{content:' *';color:var(--snice-color-danger)}.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)}\";",null],"names":[],"mappings":"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"}

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

@@ -10,17 +10,11 @@ export declare class SniceChip extends HTMLElement implements SniceChipElement {
     avatar: string;
     chipElement?: HTMLElement;
     removeButton?: HTMLButtonElement;
-    html(): string;
-    css(): string;
-    handleClick(event: MouseEvent): {
-        label: string;
-        selected: boolean;
-    } | undefined;
-    handleRemove(event: MouseEvent): {
-        label: string;
-    } | undefined;
-    handleKeyPress(event: KeyboardEvent): void;
-    handleDelete(event: KeyboardEvent): void;
+    renderContent(): import("snice").TemplateResult;
+    componentStyles(): import("snice").CSSResult;
+    private handleChipClick;
+    private handleRemoveClick;
+    private handleKeydown;
     updateSelected(): void;
     updateDisabled(): void;
     private dispatchChipClick;

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

@@ -1,7 +1,7 @@
 import { __esDecorate, __runInitializers } from 'tslib';
-import { element, property, query, on, dispatch, watch } from 'snice';
+import { element, property, query, render, styles, watch, dispatch, html, css } from 'snice';
 
-var css = ":host {\n  display: inline-block;\n  --chip-height: 2rem; /* 32px */\n  --chip-padding: 0 0.75rem; /* 0 12px */\n  --chip-font-size: 0.875rem; /* 14px */\n  --chip-border-radius: 16px;\n}\n\n.chip {\n  display: inline-flex;\n  align-items: center;\n  height: var(--chip-height);\n  padding: var(--chip-padding);\n  border-radius: var(--chip-border-radius);\n  font-size: var(--chip-font-size);\n  font-weight: 500;\n  cursor: pointer;\n  user-select: none;\n  transition: box-shadow 0.2s ease, opacity 0.2s ease, transform 0.1s ease;\n  position: relative;\n  gap: 0.375rem; /* 6px */\n  white-space: nowrap;\n  outline: none;\n}\n\n.chip:focus-visible {\n  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4);\n}\n\n.chip[aria-disabled=\"true\"] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Sizes */\n:host([size=\"small\"]) {\n  --chip-height: 24px;\n  --chip-padding: 0 8px;\n  --chip-font-size: 12px;\n  --chip-border-radius: 12px;\n}\n\n:host([size=\"large\"]) {\n  --chip-height: 40px;\n  --chip-padding: 0 16px;\n  --chip-font-size: 16px;\n  --chip-border-radius: 20px;\n}\n\n/* Variants */\n:host([variant=\"default\"]) .chip,\n:host(:not([variant])) .chip {\n  background: #f3f4f6;\n  color: #374151;\n}\n\n:host([variant=\"default\"]) .chip:hover:not([aria-disabled=\"true\"]):not(.chip--selected),\n:host(:not([variant])) .chip:hover:not([aria-disabled=\"true\"]):not(.chip--selected) {\n  background: #e5e7eb;\n}\n\n:host([variant=\"default\"]) .chip--selected,\n:host(:not([variant])) .chip--selected {\n  background: #374151;\n  color: white;\n  text-shadow: 0 0 3px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.4);\n}\n\n:host([variant=\"primary\"]) .chip {\n  background: #dbeafe;\n  color: #1e40af;\n}\n\n:host([variant=\"primary\"]) .chip:hover:not([aria-disabled=\"true\"]):not(.chip--selected) {\n  background: #bfdbfe;\n}\n\n:host([variant=\"primary\"]) .chip--selected {\n  background: #3b82f6;\n  color: white;\n  text-shadow: 0 0 3px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.4);\n}\n\n:host([variant=\"success\"]) .chip {\n  background: #d1fae5;\n  color: #065f46;\n}\n\n:host([variant=\"success\"]) .chip:hover:not([aria-disabled=\"true\"]):not(.chip--selected) {\n  background: #a7f3d0;\n}\n\n:host([variant=\"success\"]) .chip--selected {\n  background: #10b981;\n  color: white;\n  text-shadow: 0 0 3px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.4);\n}\n\n:host([variant=\"warning\"]) .chip {\n  background: #fed7aa;\n  color: #92400e;\n}\n\n:host([variant=\"warning\"]) .chip:hover:not([aria-disabled=\"true\"]):not(.chip--selected) {\n  background: #fde68a;\n}\n\n:host([variant=\"warning\"]) .chip--selected {\n  background: #f59e0b;\n  color: white;\n  text-shadow: 0 0 3px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.4);\n}\n\n:host([variant=\"error\"]) .chip {\n  background: #fee2e2;\n  color: #991b1b;\n}\n\n:host([variant=\"error\"]) .chip:hover:not([aria-disabled=\"true\"]):not(.chip--selected) {\n  background: #fecaca;\n}\n\n:host([variant=\"error\"]) .chip--selected {\n  background: #ef4444;\n  color: white;\n  text-shadow: 0 0 3px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.4);\n}\n\n:host([variant=\"info\"]) .chip {\n  background: #e0e7ff;\n  color: #3730a3;\n}\n\n:host([variant=\"info\"]) .chip:hover:not([aria-disabled=\"true\"]):not(.chip--selected) {\n  background: #c7d2fe;\n}\n\n:host([variant=\"info\"]) .chip--selected {\n  background: #6366f1;\n  color: white;\n  text-shadow: 0 0 3px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.4);\n}\n\n/* Avatar */\n.chip-avatar {\n  width: calc(var(--chip-height) - 8px);\n  height: calc(var(--chip-height) - 8px);\n  border-radius: 50%;\n  object-fit: cover;\n  margin-left: -6px;\n}\n\n/* Icon */\n.chip-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  margin-left: -4px;\n}\n\n/* Label */\n.chip-label {\n  flex: 1;\n  line-height: 1;\n}\n\n/* Remove button */\n.chip-remove {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  margin-right: -6px;\n  margin-left: 4px;\n  padding: 0;\n  background: none;\n  border: none;\n  border-radius: 50%;\n  cursor: pointer;\n  opacity: 0.7;\n  transition: opacity 0.2s ease;\n  color: inherit;\n}\n\n.chip-remove:hover {\n  opacity: 1;\n}\n\n.chip-remove svg {\n  width: 12px;\n  height: 12px;\n}";
+var cssContent = ":host{display:inline-block;--chip-height:2rem;--chip-padding:0 0.75rem;--chip-font-size:0.875rem;--chip-border-radius:16px}.chip{display:inline-flex;align-items:center;height:var(--chip-height);padding:var(--chip-padding);border-radius:var(--chip-border-radius);font-size:var(--chip-font-size);font-weight:500;cursor:pointer;user-select:none;transition:box-shadow .2s,opacity .2s,transform .1s;position:relative;gap:.375rem;white-space:nowrap;outline:0}.chip:focus-visible{box-shadow:0 0 0 2px rgba(59,130,246,.4)}.chip[aria-disabled=true]{opacity:.5;cursor:not-allowed}:host([size=small]){--chip-height:24px;--chip-padding:0 8px;--chip-font-size:12px;--chip-border-radius:12px}:host([size=large]){--chip-height:40px;--chip-padding:0 16px;--chip-font-size:16px;--chip-border-radius:20px}:host(:not([variant])) .chip,:host([variant=default]) .chip{background:#f3f4f6;color:#374151}:host(:not([variant])) .chip:hover:not([aria-disabled=true]):not(.chip--selected),:host([variant=default]) .chip:hover:not([aria-disabled=true]):not(.chip--selected){background:#e5e7eb}:host(:not([variant])) .chip--selected,:host([variant=default]) .chip--selected{background:#374151;color:#fff;text-shadow:0 0 3px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.4)}:host([variant=primary]) .chip{background:#dbeafe;color:#1e40af}:host([variant=primary]) .chip:hover:not([aria-disabled=true]):not(.chip--selected){background:#bfdbfe}:host([variant=primary]) .chip--selected{background:#3b82f6;color:#fff;text-shadow:0 0 3px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.4)}:host([variant=success]) .chip{background:#d1fae5;color:#065f46}:host([variant=success]) .chip:hover:not([aria-disabled=true]):not(.chip--selected){background:#a7f3d0}:host([variant=success]) .chip--selected{background:#10b981;color:#fff;text-shadow:0 0 3px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.4)}:host([variant=warning]) .chip{background:#fed7aa;color:#92400e}:host([variant=warning]) .chip:hover:not([aria-disabled=true]):not(.chip--selected){background:#fde68a}:host([variant=warning]) .chip--selected{background:#f59e0b;color:#fff;text-shadow:0 0 3px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.4)}:host([variant=error]) .chip{background:#fee2e2;color:#991b1b}:host([variant=error]) .chip:hover:not([aria-disabled=true]):not(.chip--selected){background:#fecaca}:host([variant=error]) .chip--selected{background:#ef4444;color:#fff;text-shadow:0 0 3px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.4)}:host([variant=info]) .chip{background:#e0e7ff;color:#3730a3}:host([variant=info]) .chip:hover:not([aria-disabled=true]):not(.chip--selected){background:#c7d2fe}:host([variant=info]) .chip--selected{background:#6366f1;color:#fff;text-shadow:0 0 3px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.4)}.chip-avatar{width:calc(var(--chip-height) - 8px);height:calc(var(--chip-height) - 8px);border-radius:50%;object-fit:cover;margin-left:-6px}.chip-icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:-4px}.chip-label{flex:1;line-height:1}.chip-remove{display:flex;align-items:center;justify-content:center;width:18px;height:18px;margin-right:-6px;margin-left:4px;padding:0;background:0 0;border:none;border-radius:50%;cursor:pointer;opacity:.7;transition:opacity .2s;color:inherit}.chip-remove:hover{opacity:1}.chip-remove svg{width:12px;height:12px}";
 
 let SniceChip = (() => {
     let _classDecorators = [element('snice-chip')];
@@ -40,10 +40,8 @@ let SniceChip = (() => {
     let _removeButton_decorators;
     let _removeButton_initializers = [];
     let _removeButton_extraInitializers = [];
-    let _handleClick_decorators;
-    let _handleRemove_decorators;
-    let _handleKeyPress_decorators;
-    let _handleDelete_decorators;
+    let _renderContent_decorators;
+    let _componentStyles_decorators;
     let _updateSelected_decorators;
     let _updateDisabled_decorators;
     let _dispatchChipClick_decorators;
@@ -62,18 +60,14 @@ let SniceChip = (() => {
             _avatar_decorators = [property({})];
             _chipElement_decorators = [query('.chip')];
             _removeButton_decorators = [query('.chip-remove')];
-            _handleClick_decorators = [on('click', '.chip'), dispatch('chip-click')];
-            _handleRemove_decorators = [on('click', '.chip-remove'), dispatch('chip-remove')];
-            _handleKeyPress_decorators = [on(['keydown:Enter', 'keydown:Space'], '.chip')];
-            _handleDelete_decorators = [on(['keydown:Delete', 'keydown:Backspace'], '.chip')];
+            _renderContent_decorators = [render()];
+            _componentStyles_decorators = [styles()];
             _updateSelected_decorators = [watch('selected')];
             _updateDisabled_decorators = [watch('disabled')];
             _dispatchChipClick_decorators = [dispatch('chip-click')];
             _dispatchChipRemove_decorators = [dispatch('chip-remove')];
-            __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, _handleRemove_decorators, { kind: "method", name: "handleRemove", static: false, private: false, access: { has: obj => "handleRemove" in obj, get: obj => obj.handleRemove }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _handleKeyPress_decorators, { kind: "method", name: "handleKeyPress", static: false, private: false, access: { has: obj => "handleKeyPress" in obj, get: obj => obj.handleKeyPress }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _handleDelete_decorators, { kind: "method", name: "handleDelete", static: false, private: false, access: { has: obj => "handleDelete" in obj, get: obj => obj.handleDelete }, 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, _updateSelected_decorators, { kind: "method", name: "updateSelected", static: false, private: false, access: { has: obj => "updateSelected" in obj, get: obj => obj.updateSelected }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _updateDisabled_decorators, { kind: "method", name: "updateDisabled", static: false, private: false, access: { has: obj => "updateDisabled" in obj, get: obj => obj.updateDisabled }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _dispatchChipClick_decorators, { kind: "method", name: "dispatchChipClick", static: false, private: false, access: { has: obj => "dispatchChipClick" in obj, get: obj => obj.dispatchChipClick }, metadata: _metadata }, null, _instanceExtraInitializers);
@@ -93,68 +87,71 @@ let SniceChip = (() => {
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
             __runInitializers(_classThis, _classExtraInitializers);
         }
-        html() {
-            return /*html*/ `
-      <div class="chip ${this.selected ? 'chip--selected' : ''}" 
+        renderContent() {
+            const chipClasses = `chip${this.selected ? ' chip--selected' : ''}`;
+            return html /*html*/ `
+      <div class="${chipClasses}"
            role="${this.removable ? 'button' : 'status'}"
            tabindex="${this.disabled ? '-1' : '0'}"
            aria-disabled="${this.disabled}"
-           aria-selected="${this.selected}">
-        ${this.avatar ? /*html*/ `
+           aria-selected="${this.selected}"
+           @click=${(e) => this.handleChipClick(e)}
+           @keydown=${(e) => this.handleKeydown(e)}>
+        <if ${this.avatar}>
           <img class="chip-avatar" src="${this.avatar}" alt="">
-        ` : this.icon ? /*html*/ `
+        </if>
+        <if ${!this.avatar && this.icon}>
           <span class="chip-icon">${this.icon}</span>
-        ` : ''}
+        </if>
         <span class="chip-label">${this.label}</span>
-        ${this.removable && !this.disabled ? /*html*/ `
-          <button class="chip-remove" 
-                  type="button" 
+        <if ${this.removable && !this.disabled}>
+          <button class="chip-remove"
+                  type="button"
                   tabindex="-1"
-                  aria-label="Remove ${this.label}">
+                  aria-label="Remove ${this.label}"
+                  @click=${(e) => this.handleRemoveClick(e)}>
             <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
               <path d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z"/>
             </svg>
           </button>
-        ` : ''}
+        </if>
       </div>
     `;
         }
-        css() {
-            return css;
+        componentStyles() {
+            return css /*css*/ `${cssContent}`;
         }
-        handleClick(event) {
+        handleChipClick(event) {
             if (this.disabled)
                 return;
-            if (event.target.closest('.chip-remove'))
+            const target = event.target;
+            if (target.closest('.chip-remove'))
                 return;
             if (!this.removable) {
                 this.selected = !this.selected;
             }
-            return {
-                label: this.label,
-                selected: this.selected
-            };
+            this.dispatchChipClick();
         }
-        handleRemove(event) {
+        handleRemoveClick(event) {
             event.stopPropagation();
             if (this.disabled)
                 return;
-            return { label: this.label };
+            this.dispatchChipRemove();
         }
-        handleKeyPress(event) {
-            event.preventDefault();
+        handleKeydown(event) {
             if (this.disabled)
                 return;
-            if (!this.removable) {
-                this.selected = !this.selected;
-                this.dispatchChipClick();
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                if (!this.removable) {
+                    this.selected = !this.selected;
+                    this.dispatchChipClick();
+                }
+            }
+            else if ((event.key === 'Delete' || event.key === 'Backspace') && this.removable) {
+                event.preventDefault();
+                this.dispatchChipRemove();
             }
-        }
-        handleDelete(event) {
-            if (this.disabled || !this.removable)
-                return;
-            event.preventDefault();
-            this.dispatchChipRemove();
         }
         updateSelected() {
             if (this.chipElement) {