snice 2.5.4 → 3.1.0

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

@@ -1 +1 @@
-{"version":3,"file":"snice-chip.js","sources":["../../../components/chip/snice-chip.css?inline","../../../../components/chip/snice-chip.ts"],"sourcesContent":["export default \":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}\";",null],"names":[],"mappings":"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"}
+{"version":3,"file":"snice-chip.js","sources":["../../../components/chip/snice-chip.css?inline","../../../../components/chip/snice-chip.ts"],"sourcesContent":["export default \":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}\";",null],"names":[],"mappings":"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"}

package/dist/components/date-picker/snice-date-picker.d.ts

@@ -29,8 +29,8 @@ export declare class SniceDatePicker extends HTMLElement implements SniceDatePic
     private viewDate;
     private monthNames;
     private dayNames;
-    css(): string;
-    html(): string;
+    componentStyles(): import("snice").CSSResult;
+    renderContent(): import("snice").TemplateResult;
     init(): void;
     private parseInitialValue;
     private parseDate;
@@ -44,15 +44,15 @@ export declare class SniceDatePicker extends HTMLElement implements SniceDatePic
     private updateClearButton;
     private updateCalendarGrid;
     private setupCalendarClickOutside;
-    handleInput(e: Event): void;
-    handleChange(e: Event): void;
-    handleFocus(): void;
-    handleInputClick(): void;
-    handleBlur(): void;
-    handleCalendarToggle(): void;
-    handleClear(): void;
-    handleCalendarClick(e: Event): void;
-    handleKeydown(e: KeyboardEvent): void;
+    private handleInput;
+    private handleChange;
+    private handleFocus;
+    private handleInputClick;
+    private handleBlur;
+    private handleCalendarToggle;
+    private handleClear;
+    private handleCalendarClick;
+    private handleKeydown;
     private handleNavigation;
     handleValueChange(): void;
     handleShowCalendarChange(): void;

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 = "/* 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/* 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}";
 
 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();
             }