@nuralyui/datepicker 0.0.4 → 0.0.6

package/datepicker.style.js

@@ -0,0 +1,455 @@
+import { css } from 'lit';
+import { styleVariables } from './datepicker.style.variables.js';
+/**
+ * Datepicker component styles for the Hybrid UI Library
+ *
+ * This file contains all the styling for the nr-datepicker component, including:
+ * - Base datepicker styles with CSS custom properties for theming
+ * - Multiple datepicker states (default, disabled, focused)
+ * - Size variations (small, medium, large)
+ * - Calendar styling and positioning
+ * - Date selection states and range highlighting
+ * - Focus, disabled, and validation states
+ * - Dark theme support
+ *
+ * The styling system uses CSS custom properties with fallbacks to allow
+ * for both global and local customization of datepicker appearance.
+ */
+export const styles = css `
+  ${styleVariables}
+
+  :host {
+    width: fit-content;
+    display: block;
+    font-family: var(--nuraly-datepicker-font-family, var(--nuraly-datepicker-local-font-family));
+  }
+
+  /* Host attribute selectors for configuration */
+  :host([disabled]) {
+    opacity: var(--nuraly-datepicker-disabled-opacity, var(--nuraly-datepicker-local-disabled-opacity));
+    pointer-events: none;
+  }
+
+  :host([range]) {
+    --nuraly-datepicker-local-calendar-width: 600px;
+  }
+
+  /* Container styles */
+  .datepicker-container {
+    position: relative;
+    display: block;
+    width: var(--nuraly-datepicker-width, var(--nuraly-datepicker-local-width));
+    font-family: var(--nuraly-datepicker-font-family, var(--nuraly-datepicker-local-font-family));
+    /* Allow calendar to overflow container without causing scroll */
+    overflow: visible;
+  }
+
+  .datepicker-disabled {
+    opacity: var(--nuraly-datepicker-disabled-opacity, var(--nuraly-datepicker-local-disabled-opacity));
+    pointer-events: none;
+  }
+
+  /* Size variants */
+  .datepicker-size-small {
+    --nuraly-datepicker-local-day-size: var(--nuraly-datepicker-local-small-day-size);
+    --nuraly-datepicker-local-font-size: var(--nuraly-datepicker-local-small-font-size);
+  }
+
+  .datepicker-size-medium {
+    --nuraly-datepicker-local-day-size: var(--nuraly-datepicker-local-medium-day-size);
+    --nuraly-datepicker-local-font-size: var(--nuraly-datepicker-local-medium-font-size);
+  }
+
+  .datepicker-size-large {
+    --nuraly-datepicker-local-day-size: var(--nuraly-datepicker-local-large-day-size);
+    --nuraly-datepicker-local-font-size: var(--nuraly-datepicker-local-large-font-size);
+  }
+
+  /* Calendar container */
+  .calendar-container {
+    position: fixed;
+    z-index: var(--nuraly-datepicker-calendar-z-index, var(--nuraly-datepicker-local-calendar-z-index));
+    user-select: none;
+    padding: var(--nuraly-datepicker-calendar-padding, var(--nuraly-datepicker-local-calendar-padding));
+    width: var(--nuraly-datepicker-calendar-width, var(--nuraly-datepicker-local-calendar-width));
+    height: var(--nuraly-datepicker-calendar-height, var(--nuraly-datepicker-local-calendar-height));
+    background-color: var(--nuraly-datepicker-background-color, var(--nuraly-datepicker-local-background-color));
+    border: var(--nuraly-datepicker-border-width, var(--nuraly-datepicker-local-border-width)) solid var(--nuraly-datepicker-border-color, var(--nuraly-datepicker-local-border-color));
+    border-radius: var(--nuraly-datepicker-border-radius, var(--nuraly-datepicker-local-border-radius));
+    box-shadow: var(--nuraly-datepicker-box-shadow, var(--nuraly-datepicker-local-box-shadow));
+    animation: calendar-slide-in var(--nuraly-datepicker-calendar-animation-duration, var(--nuraly-datepicker-local-calendar-animation-duration)) var(--nuraly-datepicker-transition-timing, var(--nuraly-datepicker-local-transition-timing));
+  }
+
+  .calendar-range {
+    width: calc(var(--nuraly-datepicker-calendar-width, var(--nuraly-datepicker-local-calendar-width)) * 2);
+  }
+
+  /* Calendar header */
+  .calendar-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--nuraly-datepicker-header-padding, var(--nuraly-datepicker-local-header-padding));
+    height: var(--nuraly-datepicker-header-height, var(--nuraly-datepicker-local-header-height));
+    border-bottom: var(--nuraly-datepicker-border-width, var(--nuraly-datepicker-local-border-width)) solid var(--nuraly-datepicker-border-color, var(--nuraly-datepicker-local-border-color));
+    background: var(--nuraly-datepicker-header-background, var(--nuraly-datepicker-local-header-background));
+  }
+
+  .year-month-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: 1;
+    justify-content: center;
+  }
+
+  .current-year-container {
+    display: inline-flex;
+    align-items: center;
+    gap: calc(var(--nuraly-datepicker-gap, var(--nuraly-datepicker-local-gap)) / 2);
+  }
+
+  .year-icons-toggler {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  /* Calendar content */
+  .calendar-content {
+    padding: var(--nuraly-datepicker-gap, var(--nuraly-datepicker-local-gap));
+    padding-bottom: calc(var(--nuraly-datepicker-gap, var(--nuraly-datepicker-local-gap)) / 2);
+  }
+
+  /* Button customizations */
+  nr-button {
+    --nuraly-button-border-color: transparent;
+    --nuraly-button-background-color: transparent;
+    --nuraly-button-text-color: var(--nuraly-datepicker-text-color, var(--nuraly-datepicker-local-text-color));
+    --nuraly-button-hover-background-color: var(--nuraly-datepicker-hover-color, var(--nuraly-datepicker-local-hover-color));
+    --nuraly-button-transition-duration: var(--nuraly-datepicker-transition-duration, var(--nuraly-datepicker-local-transition-duration));
+  }
+
+  .toggle-year-view,
+  .toggle-month-view {
+    --nuraly-button-font-weight: var(--nuraly-datepicker-header-font-weight, var(--nuraly-datepicker-local-header-font-weight));
+    --nuraly-button-font-size: var(--nuraly-datepicker-header-font-size, var(--nuraly-datepicker-local-header-font-size));
+    --nuraly-button-padding: 4px 20px 4px 8px;
+    --nuraly-button-border-radius: 6px;
+    --nuraly-button-border: 1px solid var(--nuraly-datepicker-border-color, var(--nuraly-datepicker-local-border-color));
+    --nuraly-button-background-color: #ffffff;
+    --nuraly-button-hover-border-color: var(--nuraly-datepicker-primary-color, var(--nuraly-datepicker-local-primary-color));
+    --nuraly-button-hover-background-color: #ffffff;
+    --nuraly-button-active-background-color: var(--nuraly-datepicker-hover-background, var(--nuraly-datepicker-local-hover-background));
+    --nuraly-button-transition: all 0.2s;
+    position: relative;
+    min-width: 80px;
+  }
+
+  .toggle-month-view::after,
+  .toggle-year-view::after {
+    content: '';
+    position: absolute;
+    right: 6px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 0;
+    height: 0;
+    border-left: 3px solid transparent;
+    border-right: 3px solid transparent;
+    border-top: 3px solid rgba(0, 0, 0, 0.45);
+    transition: all 0.2s;
+  }
+
+  .toggle-month-view:hover::after,
+  .toggle-year-view:hover::after {
+    border-top-color: var(--nuraly-datepicker-primary-color, var(--nuraly-datepicker-local-primary-color));
+  }
+
+  .next-year,
+  .previous-year {
+    --nuraly-button-width: 16px;
+    --nuraly-button-height: 12px;
+    --nuraly-button-padding: 0;
+    --nuraly-button-min-width: auto;
+    --nuraly-button-border-radius: 2px;
+    --nuraly-button-text-color: rgba(0, 0, 0, 0.45);
+    --nuraly-button-hover-text-color: rgba(0, 0, 0, 0.85);
+    --nuraly-button-hover-background-color: rgba(0, 0, 0, 0.06);
+  }
+
+  .header-prev-button,
+  .header-next-button {
+    --nuraly-button-width: 24px;
+    --nuraly-button-height: 24px;
+    --nuraly-button-padding: 0;
+    --nuraly-button-min-width: auto;
+    --nuraly-button-border-radius: 2px;
+    --nuraly-button-text-color: rgba(0, 0, 0, 0.45);
+    --nuraly-button-hover-text-color: rgba(0, 0, 0, 0.85);
+    --nuraly-button-hover-background-color: rgba(0, 0, 0, 0.06);
+    --nuraly-button-transition: all 0.2s;
+  }
+
+  .header-prev-button:hover,
+  .header-next-button:hover {
+    --nuraly-button-background-color: rgba(0, 0, 0, 0.06);
+  }
+
+  /* Placement variants */
+  .placement-top {
+    animation: calendar-slide-down var(--nuraly-datepicker-calendar-animation-duration, var(--nuraly-datepicker-local-calendar-animation-duration)) var(--nuraly-datepicker-transition-timing, var(--nuraly-datepicker-local-transition-timing));
+  }
+
+  .placement-bottom {
+    animation: calendar-slide-up var(--nuraly-datepicker-calendar-animation-duration, var(--nuraly-datepicker-local-calendar-animation-duration)) var(--nuraly-datepicker-transition-timing, var(--nuraly-datepicker-local-transition-timing));
+  }
+
+  /* Animations */
+  @keyframes calendar-slide-in {
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes calendar-slide-up {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes calendar-slide-down {
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  /* Legacy compatibility styles */
+  .calendar-container-range {
+    width: 600px;
+  }
+
+  /* Accessibility improvements */
+  .calendar-container:focus-within {
+    outline: var(--nuraly-datepicker-focus-border-width, var(--nuraly-datepicker-local-focus-border-width)) solid var(--nuraly-datepicker-primary-color, var(--nuraly-datepicker-local-primary-color));
+    outline-offset: 2px;
+  }
+
+  /* Focus management */
+  [tabindex="-1"]:focus {
+    outline: none;
+  }
+
+  /* Days grid layout */
+  .days-grid {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .weekdays-header {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 1px;
+    margin-bottom: var(--nuraly-datepicker-gap, var(--nuraly-datepicker-local-gap));
+  }
+
+  .weekday-header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8px 4px;
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--nuraly-datepicker-weekday-color, var(--nuraly-datepicker-local-weekday-color));
+    text-align: center;
+  }
+
+  .days-body {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 1px;
+  }
+
+  /* Day cell base styles */
+  .day-cell {
+    width: var(--nuraly-datepicker-day-size, var(--nuraly-datepicker-local-day-size));
+    height: var(--nuraly-datepicker-day-size, var(--nuraly-datepicker-local-day-size));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all var(--nuraly-datepicker-transition-duration, var(--nuraly-datepicker-local-transition-duration)) var(--nuraly-datepicker-transition-timing, var(--nuraly-datepicker-local-transition-timing));
+    font-size: var(--nuraly-datepicker-day-font-size, var(--nuraly-datepicker-local-day-font-size));
+    font-weight: 400;
+    color: var(--nuraly-datepicker-text-color, var(--nuraly-datepicker-local-text-color));
+    margin: 1px;
+    position: relative;
+  }
+
+  .day-cell:hover:not(.disabled):not(.selected) {
+    background-color: var(--nuraly-datepicker-hover-color, var(--nuraly-datepicker-local-hover-color));
+    scale: 1.05;
+  }
+
+  .day-cell.selected {
+    background-color: var(--nuraly-datepicker-selected-color, var(--nuraly-datepicker-local-selected-color)) !important;
+    color: var(--nuraly-datepicker-selected-text-color, var(--nuraly-datepicker-local-selected-text-color)) !important;
+    font-weight: 600;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  }
+
+  .day-cell.today {
+    border: 2px solid var(--nuraly-datepicker-today-color, var(--nuraly-datepicker-local-today-color));
+    font-weight: 600;
+  }
+
+  .day-cell.today.selected {
+    border-color: var(--nuraly-datepicker-selected-text-color, var(--nuraly-datepicker-local-selected-text-color));
+  }
+
+  .day-cell.disabled {
+    background-color: var(--nuraly-datepicker-disabled-color, var(--nuraly-datepicker-local-disabled-color));
+    color: var(--nuraly-datepicker-disabled-text-color, var(--nuraly-datepicker-local-disabled-text-color));
+    cursor: not-allowed;
+    pointer-events: none;
+    opacity: 0.4;
+  }
+
+  .day-cell.in-range {
+    background-color: var(--nuraly-datepicker-range-color, var(--nuraly-datepicker-local-range-color));
+    border-radius: 0;
+  }
+
+  .day-cell.in-range:first-of-type {
+    border-radius: 6px 0 0 6px;
+  }
+
+  .day-cell.in-range:last-of-type {
+    border-radius: 0 6px 6px 0;
+  }
+
+  .day-cell.in-range.selected {
+    border-radius: 6px;
+  }
+
+  /* Error states */
+  :host([state="error"]) .datepicker-container {
+    --nuraly-datepicker-local-input-border-color: var(--nuraly-datepicker-error-color, var(--nuraly-datepicker-local-error-color));
+  }
+
+  :host([state="warning"]) .datepicker-container {
+    --nuraly-datepicker-local-input-border-color: var(--nuraly-datepicker-warning-color, var(--nuraly-datepicker-local-warning-color));
+  }
+
+  :host([state="success"]) .datepicker-container {
+    --nuraly-datepicker-local-input-border-color: var(--nuraly-datepicker-success-color, var(--nuraly-datepicker-local-success-color));
+  }
+
+  /* Month/Year Dropdown Styles */
+  .month-dropdown,
+  .year-dropdown {
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    right: 0;
+    width: 120px;
+    z-index: 1001;
+    background: var(--nuraly-datepicker-background-color, var(--nuraly-datepicker-local-background-color));
+    border: var(--nuraly-datepicker-border-width, var(--nuraly-datepicker-local-border-width)) solid var(--nuraly-datepicker-border-color, var(--nuraly-datepicker-local-border-color));
+    border-radius: 6px;
+    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+    max-height: 200px;
+    overflow-y: auto;
+    animation: dropdown-slide-in 0.15s ease-out;
+  }
+
+  .year-dropdown {
+    width: 80px;
+  }
+
+  .dropdown-content {
+    padding: 4px 0;
+  }
+
+  .dropdown-item {
+    padding: 8px 12px;
+    cursor: pointer;
+    color: var(--nuraly-datepicker-text-color, var(--nuraly-datepicker-local-text-color));
+    font-size: var(--nuraly-datepicker-font-size, var(--nuraly-datepicker-local-font-size));
+    transition: all 0.2s;
+    border-radius: 0;
+  }
+
+  .dropdown-item:hover {
+    background-color: var(--nuraly-datepicker-hover-background, var(--nuraly-datepicker-local-hover-background));
+  }
+
+  .dropdown-item.selected {
+    background-color: var(--nuraly-datepicker-primary-color, var(--nuraly-datepicker-local-primary-color));
+    color: #ffffff;
+    font-weight: 600;
+  }
+
+  .dropdown-item.selected:hover {
+    background-color: var(--nuraly-datepicker-primary-color, var(--nuraly-datepicker-local-primary-color));
+    opacity: 0.9;
+  }
+
+  /* Dropdown animation */
+  @keyframes dropdown-slide-in {
+    from {
+      opacity: 0;
+      transform: translateY(-8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  /* Year/Month button container positioning */
+  .current-year-container,
+  .month-selector {
+    position: relative;
+    z-index: 1000;
+  }
+
+  .toggle-month-view,
+  .toggle-year-view {
+    position: relative;
+    z-index: 1001;
+  }
+
+  /* Select component styling - Override the default 300px width */
+  .month-select {
+    --nuraly-select-width: 110px !important;
+    --nuraly-select-local-width: 110px !important;
+    width: 110px !important;
+    max-width: 110px !important;
+  }
+
+  .year-select {
+    --nuraly-select-width: 80px !important;
+    --nuraly-select-local-width: 80px !important;  
+    width: 80px !important;
+    max-width: 80px !important;
+  }
+`;
+//# sourceMappingURL=datepicker.style.js.map

package/datepicker.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"datepicker.style.js","sourceRoot":"","sources":["../../../src/components/datepicker/datepicker.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAEjE;;;;;;;;;;;;;;GAcG;AAEH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmbjB,CAAC","sourcesContent":["import { css } from 'lit';\nimport { styleVariables } from './datepicker.style.variables.js';\n\n/**\n * Datepicker component styles for the Hybrid UI Library\n * \n * This file contains all the styling for the nr-datepicker component, including:\n * - Base datepicker styles with CSS custom properties for theming\n * - Multiple datepicker states (default, disabled, focused)\n * - Size variations (small, medium, large)\n * - Calendar styling and positioning\n * - Date selection states and range highlighting\n * - Focus, disabled, and validation states\n * - Dark theme support\n * \n * The styling system uses CSS custom properties with fallbacks to allow\n * for both global and local customization of datepicker appearance.\n */\n\nexport const styles = css`\n  ${styleVariables}\n\n  :host {\n    width: fit-content;\n    display: block;\n    font-family: var(--nuraly-datepicker-font-family, var(--nuraly-datepicker-local-font-family));\n  }\n\n  /* Host attribute selectors for configuration */\n  :host([disabled]) {\n    opacity: var(--nuraly-datepicker-disabled-opacity, var(--nuraly-datepicker-local-disabled-opacity));\n    pointer-events: none;\n  }\n\n  :host([range]) {\n    --nuraly-datepicker-local-calendar-width: 600px;\n  }\n\n  /* Container styles */\n  .datepicker-container {\n    position: relative;\n    display: block;\n    width: var(--nuraly-datepicker-width, var(--nuraly-datepicker-local-width));\n    font-family: var(--nuraly-datepicker-font-family, var(--nuraly-datepicker-local-font-family));\n    /* Allow calendar to overflow container without causing scroll */\n    overflow: visible;\n  }\n\n  .datepicker-disabled {\n    opacity: var(--nuraly-datepicker-disabled-opacity, var(--nuraly-datepicker-local-disabled-opacity));\n    pointer-events: none;\n  }\n\n  /* Size variants */\n  .datepicker-size-small {\n    --nuraly-datepicker-local-day-size: var(--nuraly-datepicker-local-small-day-size);\n    --nuraly-datepicker-local-font-size: var(--nuraly-datepicker-local-small-font-size);\n  }\n\n  .datepicker-size-medium {\n    --nuraly-datepicker-local-day-size: var(--nuraly-datepicker-local-medium-day-size);\n    --nuraly-datepicker-local-font-size: var(--nuraly-datepicker-local-medium-font-size);\n  }\n\n  .datepicker-size-large {\n    --nuraly-datepicker-local-day-size: var(--nuraly-datepicker-local-large-day-size);\n    --nuraly-datepicker-local-font-size: var(--nuraly-datepicker-local-large-font-size);\n  }\n\n  /* Calendar container */\n  .calendar-container {\n    position: fixed;\n    z-index: var(--nuraly-datepicker-calendar-z-index, var(--nuraly-datepicker-local-calendar-z-index));\n    user-select: none;\n    padding: var(--nuraly-datepicker-calendar-padding, var(--nuraly-datepicker-local-calendar-padding));\n    width: var(--nuraly-datepicker-calendar-width, var(--nuraly-datepicker-local-calendar-width));\n    height: var(--nuraly-datepicker-calendar-height, var(--nuraly-datepicker-local-calendar-height));\n    background-color: var(--nuraly-datepicker-background-color, var(--nuraly-datepicker-local-background-color));\n    border: var(--nuraly-datepicker-border-width, var(--nuraly-datepicker-local-border-width)) solid var(--nuraly-datepicker-border-color, var(--nuraly-datepicker-local-border-color));\n    border-radius: var(--nuraly-datepicker-border-radius, var(--nuraly-datepicker-local-border-radius));\n    box-shadow: var(--nuraly-datepicker-box-shadow, var(--nuraly-datepicker-local-box-shadow));\n    animation: calendar-slide-in var(--nuraly-datepicker-calendar-animation-duration, var(--nuraly-datepicker-local-calendar-animation-duration)) var(--nuraly-datepicker-transition-timing, var(--nuraly-datepicker-local-transition-timing));\n  }\n\n  .calendar-range {\n    width: calc(var(--nuraly-datepicker-calendar-width, var(--nuraly-datepicker-local-calendar-width)) * 2);\n  }\n\n  /* Calendar header */\n  .calendar-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: var(--nuraly-datepicker-header-padding, var(--nuraly-datepicker-local-header-padding));\n    height: var(--nuraly-datepicker-header-height, var(--nuraly-datepicker-local-header-height));\n    border-bottom: var(--nuraly-datepicker-border-width, var(--nuraly-datepicker-local-border-width)) solid var(--nuraly-datepicker-border-color, var(--nuraly-datepicker-local-border-color));\n    background: var(--nuraly-datepicker-header-background, var(--nuraly-datepicker-local-header-background));\n  }\n\n  .year-month-header {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    flex: 1;\n    justify-content: center;\n  }\n\n  .current-year-container {\n    display: inline-flex;\n    align-items: center;\n    gap: calc(var(--nuraly-datepicker-gap, var(--nuraly-datepicker-local-gap)) / 2);\n  }\n\n  .year-icons-toggler {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n  }\n\n  /* Calendar content */\n  .calendar-content {\n    padding: var(--nuraly-datepicker-gap, var(--nuraly-datepicker-local-gap));\n    padding-bottom: calc(var(--nuraly-datepicker-gap, var(--nuraly-datepicker-local-gap)) / 2);\n  }\n\n  /* Button customizations */\n  nr-button {\n    --nuraly-button-border-color: transparent;\n    --nuraly-button-background-color: transparent;\n    --nuraly-button-text-color: var(--nuraly-datepicker-text-color, var(--nuraly-datepicker-local-text-color));\n    --nuraly-button-hover-background-color: var(--nuraly-datepicker-hover-color, var(--nuraly-datepicker-local-hover-color));\n    --nuraly-button-transition-duration: var(--nuraly-datepicker-transition-duration, var(--nuraly-datepicker-local-transition-duration));\n  }\n\n  .toggle-year-view,\n  .toggle-month-view {\n    --nuraly-button-font-weight: var(--nuraly-datepicker-header-font-weight, var(--nuraly-datepicker-local-header-font-weight));\n    --nuraly-button-font-size: var(--nuraly-datepicker-header-font-size, var(--nuraly-datepicker-local-header-font-size));\n    --nuraly-button-padding: 4px 20px 4px 8px;\n    --nuraly-button-border-radius: 6px;\n    --nuraly-button-border: 1px solid var(--nuraly-datepicker-border-color, var(--nuraly-datepicker-local-border-color));\n    --nuraly-button-background-color: #ffffff;\n    --nuraly-button-hover-border-color: var(--nuraly-datepicker-primary-color, var(--nuraly-datepicker-local-primary-color));\n    --nuraly-button-hover-background-color: #ffffff;\n    --nuraly-button-active-background-color: var(--nuraly-datepicker-hover-background, var(--nuraly-datepicker-local-hover-background));\n    --nuraly-button-transition: all 0.2s;\n    position: relative;\n    min-width: 80px;\n  }\n\n  .toggle-month-view::after,\n  .toggle-year-view::after {\n    content: '';\n    position: absolute;\n    right: 6px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 0;\n    height: 0;\n    border-left: 3px solid transparent;\n    border-right: 3px solid transparent;\n    border-top: 3px solid rgba(0, 0, 0, 0.45);\n    transition: all 0.2s;\n  }\n\n  .toggle-month-view:hover::after,\n  .toggle-year-view:hover::after {\n    border-top-color: var(--nuraly-datepicker-primary-color, var(--nuraly-datepicker-local-primary-color));\n  }\n\n  .next-year,\n  .previous-year {\n    --nuraly-button-width: 16px;\n    --nuraly-button-height: 12px;\n    --nuraly-button-padding: 0;\n    --nuraly-button-min-width: auto;\n    --nuraly-button-border-radius: 2px;\n    --nuraly-button-text-color: rgba(0, 0, 0, 0.45);\n    --nuraly-button-hover-text-color: rgba(0, 0, 0, 0.85);\n    --nuraly-button-hover-background-color: rgba(0, 0, 0, 0.06);\n  }\n\n  .header-prev-button,\n  .header-next-button {\n    --nuraly-button-width: 24px;\n    --nuraly-button-height: 24px;\n    --nuraly-button-padding: 0;\n    --nuraly-button-min-width: auto;\n    --nuraly-button-border-radius: 2px;\n    --nuraly-button-text-color: rgba(0, 0, 0, 0.45);\n    --nuraly-button-hover-text-color: rgba(0, 0, 0, 0.85);\n    --nuraly-button-hover-background-color: rgba(0, 0, 0, 0.06);\n    --nuraly-button-transition: all 0.2s;\n  }\n\n  .header-prev-button:hover,\n  .header-next-button:hover {\n    --nuraly-button-background-color: rgba(0, 0, 0, 0.06);\n  }\n\n  /* Placement variants */\n  .placement-top {\n    animation: calendar-slide-down var(--nuraly-datepicker-calendar-animation-duration, var(--nuraly-datepicker-local-calendar-animation-duration)) var(--nuraly-datepicker-transition-timing, var(--nuraly-datepicker-local-transition-timing));\n  }\n\n  .placement-bottom {\n    animation: calendar-slide-up var(--nuraly-datepicker-calendar-animation-duration, var(--nuraly-datepicker-local-calendar-animation-duration)) var(--nuraly-datepicker-transition-timing, var(--nuraly-datepicker-local-transition-timing));\n  }\n\n  /* Animations */\n  @keyframes calendar-slide-in {\n    from {\n      opacity: 0;\n      transform: translateY(-10px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  @keyframes calendar-slide-up {\n    from {\n      opacity: 0;\n      transform: translateY(10px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  @keyframes calendar-slide-down {\n    from {\n      opacity: 0;\n      transform: translateY(-10px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  /* Legacy compatibility styles */\n  .calendar-container-range {\n    width: 600px;\n  }\n\n  /* Accessibility improvements */\n  .calendar-container:focus-within {\n    outline: var(--nuraly-datepicker-focus-border-width, var(--nuraly-datepicker-local-focus-border-width)) solid var(--nuraly-datepicker-primary-color, var(--nuraly-datepicker-local-primary-color));\n    outline-offset: 2px;\n  }\n\n  /* Focus management */\n  [tabindex=\"-1\"]:focus {\n    outline: none;\n  }\n\n  /* Days grid layout */\n  .days-grid {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n  }\n\n  .weekdays-header {\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n    gap: 1px;\n    margin-bottom: var(--nuraly-datepicker-gap, var(--nuraly-datepicker-local-gap));\n  }\n\n  .weekday-header {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 8px 4px;\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--nuraly-datepicker-weekday-color, var(--nuraly-datepicker-local-weekday-color));\n    text-align: center;\n  }\n\n  .days-body {\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n    gap: 1px;\n  }\n\n  /* Day cell base styles */\n  .day-cell {\n    width: var(--nuraly-datepicker-day-size, var(--nuraly-datepicker-local-day-size));\n    height: var(--nuraly-datepicker-day-size, var(--nuraly-datepicker-local-day-size));\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 6px;\n    cursor: pointer;\n    transition: all var(--nuraly-datepicker-transition-duration, var(--nuraly-datepicker-local-transition-duration)) var(--nuraly-datepicker-transition-timing, var(--nuraly-datepicker-local-transition-timing));\n    font-size: var(--nuraly-datepicker-day-font-size, var(--nuraly-datepicker-local-day-font-size));\n    font-weight: 400;\n    color: var(--nuraly-datepicker-text-color, var(--nuraly-datepicker-local-text-color));\n    margin: 1px;\n    position: relative;\n  }\n\n  .day-cell:hover:not(.disabled):not(.selected) {\n    background-color: var(--nuraly-datepicker-hover-color, var(--nuraly-datepicker-local-hover-color));\n    scale: 1.05;\n  }\n\n  .day-cell.selected {\n    background-color: var(--nuraly-datepicker-selected-color, var(--nuraly-datepicker-local-selected-color)) !important;\n    color: var(--nuraly-datepicker-selected-text-color, var(--nuraly-datepicker-local-selected-text-color)) !important;\n    font-weight: 600;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n  }\n\n  .day-cell.today {\n    border: 2px solid var(--nuraly-datepicker-today-color, var(--nuraly-datepicker-local-today-color));\n    font-weight: 600;\n  }\n\n  .day-cell.today.selected {\n    border-color: var(--nuraly-datepicker-selected-text-color, var(--nuraly-datepicker-local-selected-text-color));\n  }\n\n  .day-cell.disabled {\n    background-color: var(--nuraly-datepicker-disabled-color, var(--nuraly-datepicker-local-disabled-color));\n    color: var(--nuraly-datepicker-disabled-text-color, var(--nuraly-datepicker-local-disabled-text-color));\n    cursor: not-allowed;\n    pointer-events: none;\n    opacity: 0.4;\n  }\n\n  .day-cell.in-range {\n    background-color: var(--nuraly-datepicker-range-color, var(--nuraly-datepicker-local-range-color));\n    border-radius: 0;\n  }\n\n  .day-cell.in-range:first-of-type {\n    border-radius: 6px 0 0 6px;\n  }\n\n  .day-cell.in-range:last-of-type {\n    border-radius: 0 6px 6px 0;\n  }\n\n  .day-cell.in-range.selected {\n    border-radius: 6px;\n  }\n\n  /* Error states */\n  :host([state=\"error\"]) .datepicker-container {\n    --nuraly-datepicker-local-input-border-color: var(--nuraly-datepicker-error-color, var(--nuraly-datepicker-local-error-color));\n  }\n\n  :host([state=\"warning\"]) .datepicker-container {\n    --nuraly-datepicker-local-input-border-color: var(--nuraly-datepicker-warning-color, var(--nuraly-datepicker-local-warning-color));\n  }\n\n  :host([state=\"success\"]) .datepicker-container {\n    --nuraly-datepicker-local-input-border-color: var(--nuraly-datepicker-success-color, var(--nuraly-datepicker-local-success-color));\n  }\n\n  /* Month/Year Dropdown Styles */\n  .month-dropdown,\n  .year-dropdown {\n    position: absolute;\n    top: calc(100% + 4px);\n    left: 0;\n    right: 0;\n    width: 120px;\n    z-index: 1001;\n    background: var(--nuraly-datepicker-background-color, var(--nuraly-datepicker-local-background-color));\n    border: var(--nuraly-datepicker-border-width, var(--nuraly-datepicker-local-border-width)) solid var(--nuraly-datepicker-border-color, var(--nuraly-datepicker-local-border-color));\n    border-radius: 6px;\n    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);\n    max-height: 200px;\n    overflow-y: auto;\n    animation: dropdown-slide-in 0.15s ease-out;\n  }\n\n  .year-dropdown {\n    width: 80px;\n  }\n\n  .dropdown-content {\n    padding: 4px 0;\n  }\n\n  .dropdown-item {\n    padding: 8px 12px;\n    cursor: pointer;\n    color: var(--nuraly-datepicker-text-color, var(--nuraly-datepicker-local-text-color));\n    font-size: var(--nuraly-datepicker-font-size, var(--nuraly-datepicker-local-font-size));\n    transition: all 0.2s;\n    border-radius: 0;\n  }\n\n  .dropdown-item:hover {\n    background-color: var(--nuraly-datepicker-hover-background, var(--nuraly-datepicker-local-hover-background));\n  }\n\n  .dropdown-item.selected {\n    background-color: var(--nuraly-datepicker-primary-color, var(--nuraly-datepicker-local-primary-color));\n    color: #ffffff;\n    font-weight: 600;\n  }\n\n  .dropdown-item.selected:hover {\n    background-color: var(--nuraly-datepicker-primary-color, var(--nuraly-datepicker-local-primary-color));\n    opacity: 0.9;\n  }\n\n  /* Dropdown animation */\n  @keyframes dropdown-slide-in {\n    from {\n      opacity: 0;\n      transform: translateY(-8px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  /* Year/Month button container positioning */\n  .current-year-container,\n  .month-selector {\n    position: relative;\n    z-index: 1000;\n  }\n\n  .toggle-month-view,\n  .toggle-year-view {\n    position: relative;\n    z-index: 1001;\n  }\n\n  /* Select component styling - Override the default 300px width */\n  .month-select {\n    --nuraly-select-width: 110px !important;\n    --nuraly-select-local-width: 110px !important;\n    width: 110px !important;\n    max-width: 110px !important;\n  }\n\n  .year-select {\n    --nuraly-select-width: 80px !important;\n    --nuraly-select-local-width: 80px !important;  \n    width: 80px !important;\n    max-width: 80px !important;\n  }\n`;\n"]}

package/datepicker.style.variables.d.ts

@@ -0,0 +1,2 @@
+export declare const styleVariables: import("lit").CSSResult;
+//# sourceMappingURL=datepicker.style.variables.d.ts.map

package/datepicker.style.variables.js

@@ -0,0 +1,119 @@
+import { css } from 'lit';
+export const styleVariables = css `
+  :host {
+    /* ========================================
+     * DATEPICKER THEME-AWARE VARIABLES
+     * Uses CSS custom properties from theme files
+     * ======================================== */
+
+    /* Base datepicker styling - uses theme variables with fallbacks */
+    --nuraly-datepicker-local-background-color: var(--nuraly-color-datepicker-background, #ffffff);
+    --nuraly-datepicker-local-text-color: var(--nuraly-color-datepicker-text, #000000);
+    --nuraly-datepicker-local-font-family: var(--nuraly-font-family-datepicker, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif);
+    --nuraly-datepicker-local-font-size: var(--nuraly-font-size-datepicker, 14px);
+    
+    /* Datepicker borders - theme-aware */
+    --nuraly-datepicker-local-border-color: var(--nuraly-color-datepicker-border, #d9d9d9);
+    --nuraly-datepicker-local-border-width: var(--nuraly-border-width-datepicker, 1px);
+    --nuraly-datepicker-local-border-radius: var(--nuraly-border-radius-datepicker, 8px);
+    
+    /* Primary and selection colors - theme-aware */
+    --nuraly-datepicker-local-primary-color: var(--nuraly-color-datepicker-primary, #1677ff);
+    --nuraly-datepicker-local-selected-color: var(--nuraly-color-datepicker-selected, #1677ff);
+    --nuraly-datepicker-local-selected-text-color: var(--nuraly-color-datepicker-selected-text, #ffffff);
+    --nuraly-datepicker-local-hover-color: var(--nuraly-color-datepicker-hover, #f5f5f5);
+    --nuraly-datepicker-local-today-color: var(--nuraly-color-datepicker-today, #1677ff);
+    
+    /* Disabled states - theme-aware */
+    --nuraly-datepicker-local-disabled-color: var(--nuraly-color-datepicker-disabled, #f5f5f5);
+    --nuraly-datepicker-local-disabled-text-color: var(--nuraly-color-datepicker-disabled-text, #bfbfbf);
+    --nuraly-datepicker-local-disabled-opacity: var(--nuraly-opacity-datepicker-disabled, 0.5);
+    
+    /* Input field colors - theme-aware */
+    --nuraly-datepicker-local-input-background: var(--nuraly-color-datepicker-input-background, #ffffff);
+    --nuraly-datepicker-local-input-border-color: var(--nuraly-color-datepicker-input-border, #d9d9d9);
+    --nuraly-datepicker-local-input-focus-border-color: var(--nuraly-color-datepicker-input-focus-border, #1677ff);
+    --nuraly-datepicker-local-input-text-color: var(--nuraly-color-datepicker-input-text, #000000);
+    --nuraly-datepicker-local-input-placeholder-color: var(--nuraly-color-datepicker-input-placeholder, #bfbfbf);
+    
+    /* Special date colors - theme-aware */
+    --nuraly-datepicker-local-weekend-color: var(--nuraly-color-datepicker-weekend, #ff4d4f);
+    --nuraly-datepicker-local-weekday-color: var(--nuraly-color-datepicker-weekday, #8c8c8c);
+    --nuraly-datepicker-local-range-color: var(--nuraly-color-datepicker-range, rgba(22, 119, 255, 0.1));
+    --nuraly-datepicker-local-error-color: var(--nuraly-color-datepicker-error, #da1e28);
+    --nuraly-datepicker-local-warning-color: var(--nuraly-color-datepicker-warning, #f0c300);
+    --nuraly-datepicker-local-success-color: var(--nuraly-color-datepicker-success, #24a148);
+    
+    /* Header specific colors - theme-aware */
+    --nuraly-datepicker-local-header-background: var(--nuraly-color-datepicker-header-background, #ffffff);
+    --nuraly-datepicker-local-hover-background: var(--nuraly-color-datepicker-hover-background, rgba(0, 0, 0, 0.04));
+    --nuraly-datepicker-local-active-background: var(--nuraly-color-datepicker-active-background, rgba(0, 0, 0, 0.06));
+    
+    /* Layout and sizing - theme-aware */
+    --nuraly-datepicker-local-width: var(--nuraly-size-datepicker-width, 280px);
+    --nuraly-datepicker-local-height: var(--nuraly-size-datepicker-height, auto);
+    --nuraly-datepicker-local-calendar-width: var(--nuraly-size-datepicker-calendar-width, 320px);
+    --nuraly-datepicker-local-calendar-height: var(--nuraly-size-datepicker-calendar-height, auto);
+    --nuraly-datepicker-local-day-size: var(--nuraly-size-datepicker-day, 36px);
+    --nuraly-datepicker-local-header-height: var(--nuraly-size-datepicker-header-height, 56px);
+    
+    /* Typography - theme-aware */
+    --nuraly-datepicker-local-font-weight: var(--nuraly-font-weight-datepicker, 400);
+    --nuraly-datepicker-local-header-font-size: var(--nuraly-font-size-datepicker-header, 16px);
+    --nuraly-datepicker-local-header-font-weight: var(--nuraly-font-weight-datepicker-header, 600);
+    --nuraly-datepicker-local-day-font-size: var(--nuraly-font-size-datepicker-day, 14px);
+    --nuraly-datepicker-local-input-font-size: var(--nuraly-font-size-datepicker-input, 14px);
+    --nuraly-datepicker-local-label-font-size: var(--nuraly-font-size-datepicker-label, 14px);
+    --nuraly-datepicker-local-helper-font-size: var(--nuraly-font-size-datepicker-helper, 12px);
+    --nuraly-datepicker-local-message-font-size: var(--nuraly-font-size-datepicker-message, 12px);
+    
+    /* Spacing - theme-aware */
+    --nuraly-datepicker-local-gap: var(--nuraly-spacing-datepicker-gap, 6px);
+    --nuraly-datepicker-local-calendar-padding: var(--nuraly-spacing-datepicker-calendar-padding, 12px);
+    --nuraly-datepicker-local-day-padding: var(--nuraly-spacing-datepicker-day-padding, 6px);
+    --nuraly-datepicker-local-input-padding: var(--nuraly-spacing-datepicker-input-padding, 8px 12px);
+    --nuraly-datepicker-local-padding: var(--nuraly-spacing-datepicker-padding, 16px);
+    --nuraly-datepicker-local-margin: var(--nuraly-spacing-datepicker-margin, 0);
+    
+    /* Borders - theme-aware */
+    --nuraly-datepicker-local-input-border-width: var(--nuraly-border-width-datepicker-input, 1px);
+    --nuraly-datepicker-local-focus-border-width: var(--nuraly-border-width-datepicker-focus, 2px);
+    
+    /* Shadows - theme-aware */
+    --nuraly-datepicker-local-shadow-color: var(--nuraly-color-datepicker-shadow, rgba(0, 0, 0, 0.1));
+    --nuraly-datepicker-local-box-shadow: var(--nuraly-shadow-datepicker-box, 0 6px 16px 0 var(--nuraly-datepicker-local-shadow-color));
+    --nuraly-datepicker-local-input-focus-shadow: var(--nuraly-shadow-datepicker-input-focus, 0 0 0 2px rgba(22, 119, 255, 0.2));
+    
+    /* States - theme-aware */
+    --nuraly-datepicker-local-hover-opacity: var(--nuraly-opacity-datepicker-hover, 0.8);
+    
+    /* Animation and transitions - theme-aware */
+    --nuraly-datepicker-local-transition-duration: var(--nuraly-transition-duration-datepicker, 0.2s);
+    --nuraly-datepicker-local-transition-timing: var(--nuraly-transition-timing-datepicker, ease-in-out);
+    --nuraly-datepicker-local-calendar-animation-duration: var(--nuraly-transition-duration-datepicker-calendar, 0.15s);
+    
+    /* Z-index - theme-aware */
+    --nuraly-datepicker-local-calendar-z-index: var(--nuraly-z-index-datepicker-calendar, 1000);
+    
+    /* Icon sizes - theme-aware */
+    --nuraly-datepicker-local-icon-size: var(--nuraly-size-datepicker-icon, 16px);
+    --nuraly-datepicker-local-arrow-icon-size: var(--nuraly-size-datepicker-arrow-icon, 12px);
+    
+    /* Size variants - theme-aware */
+    --nuraly-datepicker-local-small-font-size: var(--nuraly-font-size-datepicker-small, 12px);
+    --nuraly-datepicker-local-small-padding: var(--nuraly-spacing-datepicker-small-padding, 6px 8px);
+    --nuraly-datepicker-local-small-height: var(--nuraly-size-datepicker-small-height, 32px);
+    --nuraly-datepicker-local-small-day-size: var(--nuraly-size-datepicker-small-day, 28px);
+    
+    --nuraly-datepicker-local-medium-font-size: var(--nuraly-font-size-datepicker-medium, 14px);
+    --nuraly-datepicker-local-medium-padding: var(--nuraly-spacing-datepicker-medium-padding, 8px 12px);
+    --nuraly-datepicker-local-medium-height: var(--nuraly-size-datepicker-medium-height, 36px);
+    --nuraly-datepicker-local-medium-day-size: var(--nuraly-size-datepicker-medium-day, 36px);
+    
+    --nuraly-datepicker-local-large-font-size: var(--nuraly-font-size-datepicker-large, 16px);
+    --nuraly-datepicker-local-large-padding: var(--nuraly-spacing-datepicker-large-padding, 12px 16px);
+    --nuraly-datepicker-local-large-height: var(--nuraly-size-datepicker-large-height, 44px);
+    --nuraly-datepicker-local-large-day-size: var(--nuraly-size-datepicker-large-day, 44px);
+  }
+`;
+//# sourceMappingURL=datepicker.style.variables.js.map

package/datepicker.style.variables.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"datepicker.style.variables.js","sourceRoot":"","sources":["../../../src/components/datepicker/datepicker.style.variables.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoHhC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styleVariables = css`\n  :host {\n    /* ========================================\n     * DATEPICKER THEME-AWARE VARIABLES\n     * Uses CSS custom properties from theme files\n     * ======================================== */\n\n    /* Base datepicker styling - uses theme variables with fallbacks */\n    --nuraly-datepicker-local-background-color: var(--nuraly-color-datepicker-background, #ffffff);\n    --nuraly-datepicker-local-text-color: var(--nuraly-color-datepicker-text, #000000);\n    --nuraly-datepicker-local-font-family: var(--nuraly-font-family-datepicker, Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Ubuntu, Cantarell, \"Noto Sans\", sans-serif);\n    --nuraly-datepicker-local-font-size: var(--nuraly-font-size-datepicker, 14px);\n    \n    /* Datepicker borders - theme-aware */\n    --nuraly-datepicker-local-border-color: var(--nuraly-color-datepicker-border, #d9d9d9);\n    --nuraly-datepicker-local-border-width: var(--nuraly-border-width-datepicker, 1px);\n    --nuraly-datepicker-local-border-radius: var(--nuraly-border-radius-datepicker, 8px);\n    \n    /* Primary and selection colors - theme-aware */\n    --nuraly-datepicker-local-primary-color: var(--nuraly-color-datepicker-primary, #1677ff);\n    --nuraly-datepicker-local-selected-color: var(--nuraly-color-datepicker-selected, #1677ff);\n    --nuraly-datepicker-local-selected-text-color: var(--nuraly-color-datepicker-selected-text, #ffffff);\n    --nuraly-datepicker-local-hover-color: var(--nuraly-color-datepicker-hover, #f5f5f5);\n    --nuraly-datepicker-local-today-color: var(--nuraly-color-datepicker-today, #1677ff);\n    \n    /* Disabled states - theme-aware */\n    --nuraly-datepicker-local-disabled-color: var(--nuraly-color-datepicker-disabled, #f5f5f5);\n    --nuraly-datepicker-local-disabled-text-color: var(--nuraly-color-datepicker-disabled-text, #bfbfbf);\n    --nuraly-datepicker-local-disabled-opacity: var(--nuraly-opacity-datepicker-disabled, 0.5);\n    \n    /* Input field colors - theme-aware */\n    --nuraly-datepicker-local-input-background: var(--nuraly-color-datepicker-input-background, #ffffff);\n    --nuraly-datepicker-local-input-border-color: var(--nuraly-color-datepicker-input-border, #d9d9d9);\n    --nuraly-datepicker-local-input-focus-border-color: var(--nuraly-color-datepicker-input-focus-border, #1677ff);\n    --nuraly-datepicker-local-input-text-color: var(--nuraly-color-datepicker-input-text, #000000);\n    --nuraly-datepicker-local-input-placeholder-color: var(--nuraly-color-datepicker-input-placeholder, #bfbfbf);\n    \n    /* Special date colors - theme-aware */\n    --nuraly-datepicker-local-weekend-color: var(--nuraly-color-datepicker-weekend, #ff4d4f);\n    --nuraly-datepicker-local-weekday-color: var(--nuraly-color-datepicker-weekday, #8c8c8c);\n    --nuraly-datepicker-local-range-color: var(--nuraly-color-datepicker-range, rgba(22, 119, 255, 0.1));\n    --nuraly-datepicker-local-error-color: var(--nuraly-color-datepicker-error, #da1e28);\n    --nuraly-datepicker-local-warning-color: var(--nuraly-color-datepicker-warning, #f0c300);\n    --nuraly-datepicker-local-success-color: var(--nuraly-color-datepicker-success, #24a148);\n    \n    /* Header specific colors - theme-aware */\n    --nuraly-datepicker-local-header-background: var(--nuraly-color-datepicker-header-background, #ffffff);\n    --nuraly-datepicker-local-hover-background: var(--nuraly-color-datepicker-hover-background, rgba(0, 0, 0, 0.04));\n    --nuraly-datepicker-local-active-background: var(--nuraly-color-datepicker-active-background, rgba(0, 0, 0, 0.06));\n    \n    /* Layout and sizing - theme-aware */\n    --nuraly-datepicker-local-width: var(--nuraly-size-datepicker-width, 280px);\n    --nuraly-datepicker-local-height: var(--nuraly-size-datepicker-height, auto);\n    --nuraly-datepicker-local-calendar-width: var(--nuraly-size-datepicker-calendar-width, 320px);\n    --nuraly-datepicker-local-calendar-height: var(--nuraly-size-datepicker-calendar-height, auto);\n    --nuraly-datepicker-local-day-size: var(--nuraly-size-datepicker-day, 36px);\n    --nuraly-datepicker-local-header-height: var(--nuraly-size-datepicker-header-height, 56px);\n    \n    /* Typography - theme-aware */\n    --nuraly-datepicker-local-font-weight: var(--nuraly-font-weight-datepicker, 400);\n    --nuraly-datepicker-local-header-font-size: var(--nuraly-font-size-datepicker-header, 16px);\n    --nuraly-datepicker-local-header-font-weight: var(--nuraly-font-weight-datepicker-header, 600);\n    --nuraly-datepicker-local-day-font-size: var(--nuraly-font-size-datepicker-day, 14px);\n    --nuraly-datepicker-local-input-font-size: var(--nuraly-font-size-datepicker-input, 14px);\n    --nuraly-datepicker-local-label-font-size: var(--nuraly-font-size-datepicker-label, 14px);\n    --nuraly-datepicker-local-helper-font-size: var(--nuraly-font-size-datepicker-helper, 12px);\n    --nuraly-datepicker-local-message-font-size: var(--nuraly-font-size-datepicker-message, 12px);\n    \n    /* Spacing - theme-aware */\n    --nuraly-datepicker-local-gap: var(--nuraly-spacing-datepicker-gap, 6px);\n    --nuraly-datepicker-local-calendar-padding: var(--nuraly-spacing-datepicker-calendar-padding, 12px);\n    --nuraly-datepicker-local-day-padding: var(--nuraly-spacing-datepicker-day-padding, 6px);\n    --nuraly-datepicker-local-input-padding: var(--nuraly-spacing-datepicker-input-padding, 8px 12px);\n    --nuraly-datepicker-local-padding: var(--nuraly-spacing-datepicker-padding, 16px);\n    --nuraly-datepicker-local-margin: var(--nuraly-spacing-datepicker-margin, 0);\n    \n    /* Borders - theme-aware */\n    --nuraly-datepicker-local-input-border-width: var(--nuraly-border-width-datepicker-input, 1px);\n    --nuraly-datepicker-local-focus-border-width: var(--nuraly-border-width-datepicker-focus, 2px);\n    \n    /* Shadows - theme-aware */\n    --nuraly-datepicker-local-shadow-color: var(--nuraly-color-datepicker-shadow, rgba(0, 0, 0, 0.1));\n    --nuraly-datepicker-local-box-shadow: var(--nuraly-shadow-datepicker-box, 0 6px 16px 0 var(--nuraly-datepicker-local-shadow-color));\n    --nuraly-datepicker-local-input-focus-shadow: var(--nuraly-shadow-datepicker-input-focus, 0 0 0 2px rgba(22, 119, 255, 0.2));\n    \n    /* States - theme-aware */\n    --nuraly-datepicker-local-hover-opacity: var(--nuraly-opacity-datepicker-hover, 0.8);\n    \n    /* Animation and transitions - theme-aware */\n    --nuraly-datepicker-local-transition-duration: var(--nuraly-transition-duration-datepicker, 0.2s);\n    --nuraly-datepicker-local-transition-timing: var(--nuraly-transition-timing-datepicker, ease-in-out);\n    --nuraly-datepicker-local-calendar-animation-duration: var(--nuraly-transition-duration-datepicker-calendar, 0.15s);\n    \n    /* Z-index - theme-aware */\n    --nuraly-datepicker-local-calendar-z-index: var(--nuraly-z-index-datepicker-calendar, 1000);\n    \n    /* Icon sizes - theme-aware */\n    --nuraly-datepicker-local-icon-size: var(--nuraly-size-datepicker-icon, 16px);\n    --nuraly-datepicker-local-arrow-icon-size: var(--nuraly-size-datepicker-arrow-icon, 12px);\n    \n    /* Size variants - theme-aware */\n    --nuraly-datepicker-local-small-font-size: var(--nuraly-font-size-datepicker-small, 12px);\n    --nuraly-datepicker-local-small-padding: var(--nuraly-spacing-datepicker-small-padding, 6px 8px);\n    --nuraly-datepicker-local-small-height: var(--nuraly-size-datepicker-small-height, 32px);\n    --nuraly-datepicker-local-small-day-size: var(--nuraly-size-datepicker-small-day, 28px);\n    \n    --nuraly-datepicker-local-medium-font-size: var(--nuraly-font-size-datepicker-medium, 14px);\n    --nuraly-datepicker-local-medium-padding: var(--nuraly-spacing-datepicker-medium-padding, 8px 12px);\n    --nuraly-datepicker-local-medium-height: var(--nuraly-size-datepicker-medium-height, 36px);\n    --nuraly-datepicker-local-medium-day-size: var(--nuraly-size-datepicker-medium-day, 36px);\n    \n    --nuraly-datepicker-local-large-font-size: var(--nuraly-font-size-datepicker-large, 16px);\n    --nuraly-datepicker-local-large-padding: var(--nuraly-spacing-datepicker-large-padding, 12px 16px);\n    --nuraly-datepicker-local-large-height: var(--nuraly-size-datepicker-large-height, 44px);\n    --nuraly-datepicker-local-large-day-size: var(--nuraly-size-datepicker-large-day, 44px);\n  }\n`;\n"]}