snice 2.5.4 → 3.2.0

package/dist/components/date-picker/snice-date-picker.js

@@ -1,7 +1,7 @@
 import { __runInitializers, __esDecorate } from 'tslib';
-import { element, property, query, ready, on, watch, dispatch } from 'snice';
+import { element, property, query, styles, render, ready, watch, dispatch, css, html } from 'snice';
 
-var css = "/* Date Picker Component Styles */\n:host {\n  display: block;\n  position: relative;\n  font-family: var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);\n  font-size: var(--snice-font-size-sm, 14px);\n  line-height: var(--snice-line-height-normal, 1.4);\n  min-height: 40px;\n}\n\n/* Wrapper */\n.date-picker-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n/* Label */\n.label {\n  font-weight: var(--snice-font-weight-medium, 500);\n  color: var(--snice-color-text, #374151);\n  margin-bottom: var(--snice-spacing-2xs, 0.25rem);\n}\n\n.label--required::after {\n  content: '*';\n  color: var(--snice-color-danger, #ef4444);\n  margin-left: var(--snice-spacing-2xs, 0.25rem);\n}\n\n/* Input Container */\n.input-container {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n/* Input Styles */\n.input {\n  width: 100%;\n  border: 1px solid var(--snice-color-border, #d1d5db);\n  border-radius: var(--snice-border-radius-lg, 6px);\n  padding: var(--snice-spacing-xs, 0.5rem) 3rem var(--snice-spacing-xs, 0.5rem) var(--snice-spacing-sm, 0.75rem);\n  font-size: inherit;\n  line-height: var(--snice-line-height-normal, 1.5);\n  background: var(--snice-color-background, white);\n  color: var(--snice-color-text, #374151);\n  transition: border-color var(--snice-transition-fast, 0.15s) ease, box-shadow var(--snice-transition-fast, 0.15s) ease;\n}\n\n.input:focus {\n  outline: none;\n  border-color: var(--snice-color-border-focus, #2563eb);\n  box-shadow: 0 0 0 var(--snice-focus-ring-width, 3px) var(--snice-focus-ring-color, rgba(37, 99, 235, 0.1));\n}\n\n.input--small {\n  padding: 0.375rem 2.75rem 0.375rem 0.625rem;\n  font-size: 0.875rem;\n}\n\n.input--large {\n  padding: 0.75rem 3.5rem 0.75rem 1rem;\n  font-size: 1rem;\n}\n\n.input--filled {\n  background: var(--snice-color-background-secondary, #f9fafb);\n  border: 1px solid transparent;\n}\n\n.input--underlined {\n  border: none;\n  border-bottom: 1px solid #d1d5db;\n  border-radius: 0;\n  background: transparent;\n  padding-left: 0;\n}\n\n.input--invalid {\n  border-color: #ef4444;\n}\n\n.input--invalid:focus {\n  border-color: #ef4444;\n  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);\n}\n\n.input:disabled {\n  background: var(--snice-color-background-secondary, #f9fafb);\n  color: var(--snice-color-text-tertiary, #9ca3af);\n  cursor: not-allowed;\n}\n\n.input:not(:disabled):not([readonly]) {\n  cursor: pointer;\n}\n\n/* Button Styles */\n.calendar-toggle,\n.clear-button {\n  position: absolute;\n  right: 0.5rem;\n  padding: 0.25rem /* 4px */;\n  border: none;\n  background: transparent;\n  color: #6b7280;\n  cursor: pointer;\n  border-radius: 4px;\n  transition: color 0.15s ease, background-color 0.15s ease;\n}\n\n.calendar-toggle {\n  right: 0.5rem;\n}\n\n.clear-button {\n  right: 2.5rem;\n}\n\n.calendar-toggle:hover,\n.clear-button:hover {\n  color: #374151;\n  background: #f3f4f6;\n}\n\n.calendar-toggle:disabled,\n.clear-button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Calendar Popup */\n.calendar {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: var(--snice-z-index-dropdown, 1000);\n  background: var(--snice-color-background-element, rgb(252, 251, 249));\n  border: 1px solid var(--snice-color-border, #d1d5db);\n  border-radius: var(--snice-border-radius-lg, 8px);\n  box-shadow: var(--snice-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));\n  margin-top: var(--snice-spacing-3xs, 0.125rem);\n  padding: var(--snice-spacing-md, 1rem);\n  min-width: 280px;\n}\n\n.calendar[hidden] {\n  display: none;\n}\n\n/* Calendar Header */\n.calendar-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 1rem;\n}\n\n.calendar-title {\n  flex: 1;\n  text-align: center;\n}\n\n.month-button {\n  background: none;\n  border: none;\n  font-size: var(--snice-font-size-md, 1rem);\n  font-weight: var(--snice-font-weight-semibold, 600);\n  color: var(--snice-color-text, #374151);\n  cursor: pointer;\n  padding: var(--snice-spacing-2xs, 0.25rem) var(--snice-spacing-xs, 0.5rem);\n  border-radius: var(--snice-border-radius-md, 4px);\n  transition: background-color var(--snice-transition-fast, 0.15s) ease;\n}\n\n.month-button:hover {\n  background: var(--snice-color-background-tertiary, #f3f4f6);\n}\n\n.nav-button {\n  background: none;\n  border: none;\n  padding: 0.5rem;\n  cursor: pointer;\n  color: #6b7280;\n  border-radius: 4px;\n  transition: color 0.15s ease, background-color 0.15s ease;\n}\n\n.nav-button:hover {\n  color: #374151;\n  background: #f3f4f6;\n}\n\n/* Calendar Grid */\n.calendar-weekdays {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  gap: 0.25rem /* 4px */;\n  margin-bottom: 0.5rem;\n}\n\n.weekday {\n  text-align: center;\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: #6b7280;\n  padding: 0.5rem 0.25rem;\n}\n\n.calendar-days {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  gap: 0.25rem /* 4px */;\n}\n\n.day {\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: none;\n  cursor: pointer;\n  border-radius: var(--snice-border-radius-md, 4px);\n  font-size: var(--snice-font-size-sm, 0.875rem);\n  color: var(--snice-color-text, #374151);\n  transition: background-color var(--snice-transition-fast, 0.15s) ease, color var(--snice-transition-fast, 0.15s) ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.day:hover:not(.day--disabled) {\n  background: var(--snice-color-background-tertiary, #f3f4f6);\n}\n\n.day--today {\n  background: var(--snice-color-primary-light, #dbeafe);\n  color: var(--snice-color-primary, #2563eb);\n  font-weight: var(--snice-font-weight-semibold, 600);\n}\n\n.day--selected {\n  background: var(--snice-color-primary, #2563eb);\n  color: var(--snice-color-text-inverse, white);\n  font-weight: var(--snice-font-weight-semibold, 600);\n}\n\n.day--disabled {\n  color: #d1d5db;\n  cursor: not-allowed;\n}\n\n.day--empty {\n  cursor: default;\n}\n\n/* Calendar Footer */\n.calendar-footer {\n  margin-top: 1rem;\n  padding-top: 1rem;\n  border-top: 1px solid #f3f4f6;\n  display: flex;\n  justify-content: center;\n}\n\n.today-button {\n  background: none;\n  border: 1px solid #d1d5db;\n  padding: 0.5rem 1rem;\n  font-size: 0.875rem;\n  color: #374151;\n  cursor: pointer;\n  border-radius: 4px;\n  transition: background-color 0.15s ease, border-color 0.15s ease;\n}\n\n.today-button:hover {\n  background: #f9fafb;\n  border-color: #9ca3af;\n}\n\n/* Helper/Error Text */\n.helper-text,\n.error-text {\n  font-size: var(--snice-font-size-sm, 0.875rem);\n  margin-top: var(--snice-spacing-2xs, 0.25rem);\n}\n\n.helper-text {\n  color: var(--snice-color-text-secondary, #6b7280);\n}\n\n.error-text {\n  color: var(--snice-color-danger, #ef4444);\n}\n\n/* Size variants */\n:host([size=\"small\"]) .calendar {\n  min-width: 240px;\n  padding: 0.75rem;\n}\n\n:host([size=\"small\"]) .day {\n  width: 28px;\n  height: 28px;\n  font-size: 0.8125rem;\n}\n\n:host([size=\"large\"]) .calendar {\n  min-width: 320px;\n  padding: 1.25rem;\n}\n\n:host([size=\"large\"]) .day {\n  width: 36px;\n  height: 36px;\n  font-size: 0.9375rem;\n}\n\n/* Responsive */\n@media (max-width: 640px) {\n  .calendar {\n    left: 50%;\n    right: auto;\n    transform: translateX(-50%);\n    min-width: 280px;\n  }\n}";
+var cssContent = ":host{display:block;position:relative;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);font-size:var(--snice-font-size-sm, 14px);line-height:var(--snice-line-height-normal, 1.4);min-height:40px}.date-picker-wrapper{display:flex;flex-direction:column;gap:.5rem}.label{font-weight:var(--snice-font-weight-medium,500);color:var(--snice-color-text,#374151);margin-bottom:var(--snice-spacing-2xs,.25rem)}.label--required::after{content:'*';color:var(--snice-color-danger,#ef4444);margin-left:var(--snice-spacing-2xs,.25rem)}.input-container{position:relative;display:flex;align-items:center}.input{width:100%;border:1px solid var(--snice-color-border,#d1d5db);border-radius:var(--snice-border-radius-lg,6px);padding:var(--snice-spacing-xs,.5rem) 3rem var(--snice-spacing-xs,.5rem) var(--snice-spacing-sm,.75rem);font-size:inherit;line-height:var(--snice-line-height-normal, 1.5);background:var(--snice-color-background,#fff);color:var(--snice-color-text,#374151);transition:border-color var(--snice-transition-fast, .15s) ease,box-shadow var(--snice-transition-fast, .15s) ease}.input:focus{outline:0;border-color:var(--snice-color-border-focus,#2563eb);box-shadow:0 0 0 var(--snice-focus-ring-width,3px) var(--snice-focus-ring-color,rgba(37,99,235,.1))}.input--small{padding:.375rem 2.75rem .375rem .625rem;font-size:.875rem}.input--large{padding:.75rem 3.5rem .75rem 1rem;font-size:1rem}.input--filled{background:var(--snice-color-background-secondary,#f9fafb);border:1px solid transparent}.input--underlined{border:none;border-bottom:1px solid #d1d5db;border-radius:0;background:0 0;padding-left:0}.input--invalid{border-color:#ef4444}.input--invalid:focus{border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.1)}.input:disabled{background:var(--snice-color-background-secondary,#f9fafb);color:var(--snice-color-text-tertiary,#9ca3af);cursor:not-allowed}.input:not(:disabled):not([readonly]){cursor:pointer}.calendar-toggle,.clear-button{position:absolute;padding:.25rem;border:none;background:0 0;color:#6b7280;cursor:pointer;border-radius:4px;transition:color .15s,background-color .15s}.calendar-toggle{right:.5rem}.clear-button{right:2.5rem}.calendar-toggle:hover,.clear-button:hover{color:#374151;background:#f3f4f6}.calendar-toggle:disabled,.clear-button:disabled{opacity:.5;cursor:not-allowed}.calendar{position:absolute;top:100%;left:0;right:0;z-index:var(--snice-z-index-dropdown,1000);background:var(--snice-color-background-element,#fcfbf9);border:1px solid var(--snice-color-border,#d1d5db);border-radius:var(--snice-border-radius-lg,8px);box-shadow:var(--snice-shadow-lg,0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05));margin-top:var(--snice-spacing-3xs,.125rem);padding:var(--snice-spacing-md,1rem);min-width:280px}.calendar[hidden]{display:none}.calendar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.calendar-title{flex:1;text-align:center}.month-button{background:0 0;border:none;font-size:var(--snice-font-size-md, 1rem);font-weight:var(--snice-font-weight-semibold,600);color:var(--snice-color-text,#374151);cursor:pointer;padding:var(--snice-spacing-2xs,.25rem) var(--snice-spacing-xs,.5rem);border-radius:var(--snice-border-radius-md,4px);transition:background-color var(--snice-transition-fast, .15s) ease}.month-button:hover{background:var(--snice-color-background-tertiary,#f3f4f6)}.nav-button{background:0 0;border:none;padding:.5rem;cursor:pointer;color:#6b7280;border-radius:4px;transition:color .15s,background-color .15s}.nav-button:hover{color:#374151;background:#f3f4f6}.calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:.25rem;margin-bottom:.5rem}.weekday{text-align:center;font-size:.75rem;font-weight:600;color:#6b7280;padding:.5rem .25rem}.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:.25rem}.day{width:32px;height:32px;border:none;background:0 0;cursor:pointer;border-radius:var(--snice-border-radius-md,4px);font-size:var(--snice-font-size-sm, .875rem);color:var(--snice-color-text,#374151);transition:background-color var(--snice-transition-fast, .15s) ease,color var(--snice-transition-fast, .15s) ease;display:flex;align-items:center;justify-content:center}.day:hover:not(.day--disabled){background:var(--snice-color-background-tertiary,#f3f4f6)}.day--today{background:var(--snice-color-primary-light,#dbeafe);color:var(--snice-color-primary,#2563eb);font-weight:var(--snice-font-weight-semibold,600)}.day--selected{background:var(--snice-color-primary,#2563eb);color:var(--snice-color-text-inverse,#fff);font-weight:var(--snice-font-weight-semibold,600)}.day--disabled{color:#d1d5db;cursor:not-allowed}.day--empty{cursor:default}.calendar-footer{margin-top:1rem;padding-top:1rem;border-top:1px solid #f3f4f6;display:flex;justify-content:center}.error-text,.helper-text{font-size:var(--snice-font-size-sm, .875rem);margin-top:var(--snice-spacing-2xs,.25rem)}.helper-text{color:var(--snice-color-text-secondary,#6b7280)}.error-text{color:var(--snice-color-danger,#ef4444)}:host([size=small]) .calendar{min-width:240px;padding:.75rem}:host([size=small]) .day{width:28px;height:28px;font-size:.8125rem}:host([size=large]) .calendar{min-width:320px;padding:1.25rem}:host([size=large]) .day{width:36px;height:36px;font-size:.9375rem}@media (max-width:640px){.calendar{left:50%;right:auto;transform:translateX(-50%);min-width:280px}}";
 
 let SniceDatePicker = (() => {
     let _classDecorators = [element('snice-date-picker')];
@@ -82,16 +82,9 @@ let SniceDatePicker = (() => {
     let _firstDayButton_decorators;
     let _firstDayButton_initializers = [];
     let _firstDayButton_extraInitializers = [];
+    let _componentStyles_decorators;
+    let _renderContent_decorators;
     let _init_decorators;
-    let _handleInput_decorators;
-    let _handleChange_decorators;
-    let _handleFocus_decorators;
-    let _handleInputClick_decorators;
-    let _handleBlur_decorators;
-    let _handleCalendarToggle_decorators;
-    let _handleClear_decorators;
-    let _handleCalendarClick_decorators;
-    let _handleKeydown_decorators;
     let _handleValueChange_decorators;
     let _handleShowCalendarChange_decorators;
     let _handleDisabledChange_decorators;
@@ -170,16 +163,9 @@ let SniceDatePicker = (() => {
             _calendarToggle_decorators = [query('.calendar-toggle')];
             _selectedDayButton_decorators = [query('.day--selected')];
             _firstDayButton_decorators = [query('.day:not(.day--empty):not(.day--disabled)')];
+            _componentStyles_decorators = [styles()];
+            _renderContent_decorators = [render()];
             _init_decorators = [ready()];
-            _handleInput_decorators = [on('input', '.input')];
-            _handleChange_decorators = [on('change', '.input')];
-            _handleFocus_decorators = [on('focus', '.input')];
-            _handleInputClick_decorators = [on('click', '.input')];
-            _handleBlur_decorators = [on('blur', '.input')];
-            _handleCalendarToggle_decorators = [on('click', '.calendar-toggle')];
-            _handleClear_decorators = [on('click', '.clear-button')];
-            _handleCalendarClick_decorators = [on('click', '.calendar')];
-            _handleKeydown_decorators = [on('keydown', '.input')];
             _handleValueChange_decorators = [watch('value')];
             _handleShowCalendarChange_decorators = [watch('show-calendar')];
             _handleDisabledChange_decorators = [watch('disabled')];
@@ -194,16 +180,9 @@ let SniceDatePicker = (() => {
             _dispatchCloseEvent_decorators = [dispatch('@snice/datepicker-close', { bubbles: true, composed: true })];
             _dispatchClearEvent_decorators = [dispatch('@snice/datepicker-clear', { bubbles: true, composed: true })];
             _dispatchSelectEvent_decorators = [dispatch('@snice/datepicker-select', { bubbles: true, composed: true })];
+            __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, _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, _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, _handleInput_decorators, { kind: "method", name: "handleInput", static: false, private: false, access: { has: obj => "handleInput" in obj, get: obj => obj.handleInput }, 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, _handleFocus_decorators, { kind: "method", name: "handleFocus", static: false, private: false, access: { has: obj => "handleFocus" in obj, get: obj => obj.handleFocus }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _handleInputClick_decorators, { kind: "method", name: "handleInputClick", static: false, private: false, access: { has: obj => "handleInputClick" in obj, get: obj => obj.handleInputClick }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _handleBlur_decorators, { kind: "method", name: "handleBlur", static: false, private: false, access: { has: obj => "handleBlur" in obj, get: obj => obj.handleBlur }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _handleCalendarToggle_decorators, { kind: "method", name: "handleCalendarToggle", static: false, private: false, access: { has: obj => "handleCalendarToggle" in obj, get: obj => obj.handleCalendarToggle }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _handleClear_decorators, { kind: "method", name: "handleClear", static: false, private: false, access: { has: obj => "handleClear" in obj, get: obj => obj.handleClear }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _handleCalendarClick_decorators, { kind: "method", name: "handleCalendarClick", static: false, private: false, access: { has: obj => "handleCalendarClick" in obj, get: obj => obj.handleCalendarClick }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _handleKeydown_decorators, { kind: "method", name: "handleKeydown", static: false, private: false, access: { has: obj => "handleKeydown" in obj, get: obj => obj.handleKeydown }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _handleValueChange_decorators, { kind: "method", name: "handleValueChange", static: false, private: false, access: { has: obj => "handleValueChange" in obj, get: obj => obj.handleValueChange }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _handleShowCalendarChange_decorators, { kind: "method", name: "handleShowCalendarChange", static: false, private: false, access: { has: obj => "handleShowCalendarChange" in obj, get: obj => obj.handleShowCalendarChange }, 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);
@@ -247,49 +226,60 @@ let SniceDatePicker = (() => {
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
             __runInitializers(_classThis, _classExtraInitializers);
         }
-        css() {
-            return css;
-        }
-        html() {
-            return /*html*/ `
+        componentStyles() {
+            return css /*css*/ `${cssContent}`;
+        }
+        renderContent() {
+            const labelClasses = ['label', this.required ? 'label--required' : ''].filter(Boolean).join(' ');
+            const inputClasses = [
+                'input',
+                `input--${this.size}`,
+                `input--${this.variant}`,
+                this.invalid ? 'input--invalid' : '',
+                this.clearable ? 'input--clearable' : ''
+            ].filter(Boolean).join(' ');
+            return html /*html*/ `
       <div class="date-picker-wrapper">
-        ${this.label ? /*html*/ `
-          <label class="label ${this.required ? 'label--required' : ''}">
+        <if ${this.label}>
+          <label class="${labelClasses}">
             ${this.label}
           </label>
-        ` : ''}
-        
+        </if>
+
         <div class="input-container">
           <input
-            class="input 
-              input--${this.size} 
-              input--${this.variant}
-              ${this.invalid ? 'input--invalid' : ''}
-              ${this.clearable ? 'input--clearable' : ''}"
+            class="${inputClasses}"
             type="text"
             value="${this.inputValue || this.getFormattedValue()}"
             placeholder="${this.placeholder || this.getPlaceholderForFormat()}"
-            ${this.disabled ? 'disabled' : ''}
-            ${this.readonly ? 'readonly' : ''}
-            ${this.required ? 'required' : ''}
-            ${this.name ? `name="${this.name}"` : ''}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            ?required=${this.required}
+            name="${this.name || ''}"
             part="input"
             autocomplete="off"
+            @input=${(e) => this.handleInput(e)}
+            @change=${(e) => this.handleChange(e)}
+            @focus=${(e) => this.handleFocus(e)}
+            @blur=${(e) => this.handleBlur(e)}
+            @click=${(e) => this.handleInputClick(e)}
+            @keydown=${(e) => this.handleKeydown(e)}
           />
-          
+
           <button
             class="calendar-toggle"
             type="button"
             aria-label="Open calendar"
             tabindex="-1"
             part="calendar-toggle"
-            ${this.disabled ? 'disabled' : ''}
+            ?disabled=${this.disabled}
+            @click=${(e) => this.handleCalendarToggle(e)}
           >
             <svg viewBox="0 0 24 24" width="18" height="18">
               <path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z" fill="currentColor"/>
             </svg>
           </button>
-          
+
           <button
             class="clear-button"
             type="button"
@@ -297,62 +287,68 @@ let SniceDatePicker = (() => {
             tabindex="-1"
             part="clear"
             style="display: none;"
+            @click=${(e) => this.handleClear(e)}
           >
             <svg viewBox="0 0 24 24" width="16" height="16">
               <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="currentColor"/>
             </svg>
           </button>
-          
-          <div class="calendar" part="calendar" hidden>
+
+          <div class="calendar" part="calendar" ?hidden=${!this.showCalendar} @click=${(e) => this.handleCalendarClick(e)}>
             <div class="calendar-header">
               <button class="nav-button" type="button" data-nav="prev-month" aria-label="Previous month">
                 <svg viewBox="0 0 24 24" width="20" height="20">
                   <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" fill="currentColor"/>
                 </svg>
               </button>
-              
+
               <div class="calendar-title">
                 <button class="month-button" type="button" data-nav="month-picker">
                   ${this.monthNames[this.viewDate.getMonth()]} ${this.viewDate.getFullYear()}
                 </button>
               </div>
-              
+
               <button class="nav-button" type="button" data-nav="next-month" aria-label="Next month">
                 <svg viewBox="0 0 24 24" width="20" height="20">
                   <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="currentColor"/>
                 </svg>
               </button>
             </div>
-            
+
             <div class="calendar-weekdays">
               ${this.getDayHeaders()}
             </div>
-            
+
             <div class="calendar-days">
               ${this.getDaysGrid()}
             </div>
-            
+
             <div class="calendar-footer">
-              <button class="today-button" type="button" data-nav="today">
+              <snice-button class="today-button" variant="default" size="small" data-nav="today">
                 Today
-              </button>
+              </snice-button>
             </div>
           </div>
         </div>
-        
-        ${this.errorText ? /*html*/ `
-          <span class="error-text" part="error-text">${this.errorText}</span>
-        ` : this.helperText ? /*html*/ `
-          <span class="helper-text" part="helper-text">${this.helperText}</span>
-        ` : /*html*/ `
-          <span class="helper-text" part="helper-text">&nbsp;</span>
-        `}
+
+        <case ${this.errorText ? 'error' : this.helperText ? 'helper' : 'empty'}>
+          <when value="error">
+            <span class="error-text" part="error-text">${this.errorText}</span>
+          </when>
+          <when value="helper">
+            <span class="helper-text" part="helper-text">${this.helperText}</span>
+          </when>
+          <default>
+            <span class="helper-text" part="helper-text">&nbsp;</span>
+          </default>
+        </case>
       </div>
     `;
         }
         init() {
             this.parseInitialValue();
-            this.updateClearButton();
+            // Update clear button after queries are resolved
+            queueMicrotask(() => this.updateClearButton());
             this.setupCalendarClickOutside();
             if (this.input) {
                 this.input.disabled = this.disabled;
@@ -395,36 +391,43 @@ let SniceDatePicker = (() => {
                 }
                 return null;
             }
-            let date = new Date(dateString);
-            if (!isNaN(date.getTime())) {
-                return date;
-            }
-            const parts = dateString.split(/[-\/]/);
-            if (parts.length !== 3)
-                return null;
-            let year, month, day;
-            switch (this.format) {
-                case 'mm/dd/yyyy':
-                case 'mm-dd-yyyy':
-                    [month, day, year] = parts.map(Number);
-                    break;
-                case 'dd/mm/yyyy':
-                case 'dd-mm-yyyy':
-                    [day, month, year] = parts.map(Number);
-                    break;
-                case 'yyyy-mm-dd':
-                case 'yyyy/mm/dd':
-                    [year, month, day] = parts.map(Number);
-                    break;
-                default:
-                    return null;
-            }
-            if (year && month && day) {
-                date = new Date(year, month - 1, day);
+            // Detect ISO date format (yyyy-mm-dd) and parse manually to avoid UTC issues
+            const isoDateRegex = /^(\d{4})-(\d{2})-(\d{2})$/;
+            const isoMatch = dateString.match(isoDateRegex);
+            if (isoMatch) {
+                const [, year, month, day] = isoMatch.map(Number);
+                const date = new Date(year, month - 1, day);
                 if (!isNaN(date.getTime())) {
                     return date;
                 }
             }
+            // Try manual parsing based on format
+            const parts = dateString.split(/[-\/]/);
+            if (parts.length === 3) {
+                let year, month, day;
+                switch (this.format) {
+                    case 'mm/dd/yyyy':
+                    case 'mm-dd-yyyy':
+                        [month, day, year] = parts.map(Number);
+                        break;
+                    case 'dd/mm/yyyy':
+                    case 'dd-mm-yyyy':
+                        [day, month, year] = parts.map(Number);
+                        break;
+                    case 'yyyy-mm-dd':
+                    case 'yyyy/mm/dd':
+                        [year, month, day] = parts.map(Number);
+                        break;
+                    default:
+                        return null;
+                }
+                if (year && month && day) {
+                    const date = new Date(year, month - 1, day);
+                    if (!isNaN(date.getTime())) {
+                        return date;
+                    }
+                }
+            }
             return null;
         }
         formatDate(date) {
@@ -484,7 +487,7 @@ let SniceDatePicker = (() => {
             for (let i = 0; i < this.firstDayOfWeek; i++) {
                 days.push(days.shift());
             }
-            return days.map(day => `<div class="weekday">${day}</div>`).join('');
+            return days.map(day => html `<div class="weekday">${day}</div>`);
         }
         getDaysGrid() {
             const year = this.viewDate.getFullYear();
@@ -519,10 +522,10 @@ let SniceDatePicker = (() => {
                 }
                 return false;
             };
-            let html = '';
+            const days = [];
             // Empty cells for days before month starts
             for (let i = 0; i < startingDayOfWeek; i++) {
-                html += '<div class="day day--empty"></div>';
+                days.push(html `<div class="day day--empty"></div>`);
             }
             // Days of the month
             for (let day = 1; day <= daysInMonth; day++) {
@@ -534,19 +537,20 @@ let SniceDatePicker = (() => {
                     classes.push('day--selected');
                 if (isDisabled(date))
                     classes.push('day--disabled');
-                html += `
-        <button 
-          class="${classes.join(' ')}" 
-          type="button" 
-          data-date="${year}-${(month + 1).toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}"
-          ${isDisabled(date) ? 'disabled' : ''}
+                const dateStr = `${year}-${(month + 1).toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
+                days.push(html `
+        <button
+          class="${classes.join(' ')}"
+          type="button"
+          data-date="${dateStr}"
+          ?disabled="${isDisabled(date)}"
           aria-label="${this.formatDate(date)}"
         >
           ${day}
         </button>
-      `;
+      `);
             }
-            return html;
+            return days;
         }
         updateInputValue() {
             if (this.input && document.activeElement !== this.input) {
@@ -564,21 +568,15 @@ let SniceDatePicker = (() => {
             return separators >= 2 && value.length >= 8;
         }
         updateClearButton() {
-            if (this.clearButton && this.clearable) {
-                const shouldShow = this.selectedDate && !this.disabled && !this.readonly;
-                this.clearButton.style.display = shouldShow ? '' : 'none';
-                this.clearButton.classList.toggle('clear-button--visible', !!shouldShow);
-            }
+            if (!this.clearButton || !this.clearable)
+                return;
+            const shouldShow = this.selectedDate && !this.disabled && !this.readonly;
+            this.clearButton.style.display = shouldShow ? '' : 'none';
+            this.clearButton.classList.toggle('clear-button--visible', !!shouldShow);
         }
         updateCalendarGrid() {
-            const calendarDays = this.calendar?.querySelector('.calendar-days');
-            const calendarTitle = this.calendar?.querySelector('.month-button');
-            if (calendarDays) {
-                calendarDays.innerHTML = this.getDaysGrid();
-            }
-            if (calendarTitle) {
-                calendarTitle.textContent = `${this.monthNames[this.viewDate.getMonth()]} ${this.viewDate.getFullYear()}`;
-            }
+            // Trigger full re-render instead of manual DOM manipulation
+            this.renderContent();
         }
         setupCalendarClickOutside() {
             document.addEventListener('click', (e) => {
@@ -588,10 +586,10 @@ let SniceDatePicker = (() => {
             });
         }
         handleInput(e) {
-            const target = e.target;
-            this.inputValue = target.value;
-            const date = this.parseDate(target.value);
-            if (date && this.isCompleteDate(target.value)) {
+            const input = e.target;
+            this.inputValue = input.value;
+            const date = this.parseDate(input.value);
+            if (date && this.isCompleteDate(input.value)) {
                 this.selectedDate = date;
                 this.viewDate = new Date(date);
                 if (this.showCalendar) {
@@ -602,8 +600,8 @@ let SniceDatePicker = (() => {
             this.dispatchInputEvent();
         }
         handleChange(e) {
-            const target = e.target;
-            const date = this.parseDate(target.value);
+            const input = e.target;
+            const date = this.parseDate(input.value);
             if (date) {
                 this.selectedDate = date;
                 this.value = this.formatDate(date);
@@ -612,10 +610,10 @@ let SniceDatePicker = (() => {
                     this.input.value = this.value;
                 }
             }
-            else if (target.value) {
+            else if (input.value) {
                 this.selectedDate = null;
-                this.value = target.value;
-                this.inputValue = target.value;
+                this.value = input.value;
+                this.inputValue = input.value;
             }
             else {
                 this.selectedDate = null;
@@ -625,18 +623,18 @@ let SniceDatePicker = (() => {
             this.updateClearButton();
             this.dispatchChangeEvent();
         }
-        handleFocus() {
+        handleFocus(e) {
             this.dispatchFocusEvent();
         }
-        handleInputClick() {
+        handleInputClick(e) {
             if (!this.showCalendar && !this.disabled && !this.readonly) {
                 this.open();
             }
         }
-        handleBlur() {
+        handleBlur(e) {
             this.dispatchBlurEvent();
         }
-        handleCalendarToggle() {
+        handleCalendarToggle(e) {
             if (this.showCalendar) {
                 this.close();
             }
@@ -644,7 +642,7 @@ let SniceDatePicker = (() => {
                 this.open();
             }
         }
-        handleClear() {
+        handleClear(e) {
             this.clear();
         }
         handleCalendarClick(e) {
@@ -653,7 +651,9 @@ let SniceDatePicker = (() => {
             if (target.closest('[data-date]')) {
                 const dateString = target.closest('[data-date]')?.getAttribute('data-date');
                 if (dateString) {
-                    const date = new Date(dateString);
+                    // Parse as local date to avoid timezone issues
+                    const [year, month, day] = dateString.split('-').map(Number);
+                    const date = new Date(year, month - 1, day);
                     this.selectDate(date);
                 }
             }
@@ -696,6 +696,7 @@ let SniceDatePicker = (() => {
                 this.viewDate = new Date(date);
             }
             this.updateInputValue();
+            this.updateClearButton();
             if (this.showCalendar) {
                 this.updateCalendarGrid();
             }