@nuralyui/datepicker 0.0.3 → 0.0.5

package/datepicker.style.js

@@ -0,0 +1,456 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { css } from 'lit';
+import { datepickerVariables } from './datepicker.style.variables.js';
+export const styles = css `
+  ${datepickerVariables}
+
+  :host {
+    width: fit-content;
+    display: block;
+    font-family: var(--hybrid-datepicker-font-family, var(--hybrid-datepicker-local-font-family));
+  }
+
+  /* Host attribute selectors for configuration */
+  :host([disabled]) {
+    opacity: var(--hybrid-datepicker-disabled-opacity, var(--hybrid-datepicker-local-disabled-opacity));
+    pointer-events: none;
+  }
+
+  :host([range]) {
+    --hybrid-datepicker-local-calendar-width: 600px;
+  }
+
+  /* Theme-specific styles */
+  :host([theme='dark']) {
+    --hybrid-datepicker-local-background-color: #1f1f1f;
+    --hybrid-datepicker-local-border-color: #424242;
+    --hybrid-datepicker-local-text-color: #ffffff;
+    --hybrid-datepicker-local-hover-color: #333333;
+    --hybrid-datepicker-local-input-background: #1f1f1f;
+    --hybrid-datepicker-local-input-border-color: #424242;
+    --hybrid-datepicker-local-input-text-color: #ffffff;
+  }
+
+  /* Container styles */
+  .datepicker-container {
+    position: relative;
+    display: block;
+    width: var(--hybrid-datepicker-width, var(--hybrid-datepicker-local-width));
+    font-family: var(--hybrid-datepicker-font-family, var(--hybrid-datepicker-local-font-family));
+    /* Allow calendar to overflow container without causing scroll */
+    overflow: visible;
+  }
+
+  .datepicker-disabled {
+    opacity: var(--hybrid-datepicker-disabled-opacity, var(--hybrid-datepicker-local-disabled-opacity));
+    pointer-events: none;
+  }
+
+  /* Size variants */
+  .datepicker-size-small {
+    --hybrid-datepicker-local-day-size: var(--hybrid-datepicker-local-small-day-size);
+    --hybrid-datepicker-local-font-size: var(--hybrid-datepicker-local-small-font-size);
+  }
+
+  .datepicker-size-medium {
+    --hybrid-datepicker-local-day-size: var(--hybrid-datepicker-local-medium-day-size);
+    --hybrid-datepicker-local-font-size: var(--hybrid-datepicker-local-medium-font-size);
+  }
+
+  .datepicker-size-large {
+    --hybrid-datepicker-local-day-size: var(--hybrid-datepicker-local-large-day-size);
+    --hybrid-datepicker-local-font-size: var(--hybrid-datepicker-local-large-font-size);
+  }
+
+  /* Calendar container */
+  .calendar-container {
+    position: fixed;
+    z-index: var(--hybrid-datepicker-calendar-z-index, var(--hybrid-datepicker-local-calendar-z-index));
+    user-select: none;
+    padding: var(--hybrid-datepicker-calendar-padding, var(--hybrid-datepicker-local-calendar-padding));
+    width: var(--hybrid-datepicker-calendar-width, var(--hybrid-datepicker-local-calendar-width));
+    height: var(--hybrid-datepicker-calendar-height, var(--hybrid-datepicker-local-calendar-height));
+    background-color: var(--hybrid-datepicker-background-color, var(--hybrid-datepicker-local-background-color));
+    border: var(--hybrid-datepicker-border-width, var(--hybrid-datepicker-local-border-width)) solid var(--hybrid-datepicker-border-color, var(--hybrid-datepicker-local-border-color));
+    border-radius: var(--hybrid-datepicker-border-radius, var(--hybrid-datepicker-local-border-radius));
+    box-shadow: var(--hybrid-datepicker-box-shadow, var(--hybrid-datepicker-local-box-shadow));
+    animation: calendar-slide-in var(--hybrid-datepicker-calendar-animation-duration, var(--hybrid-datepicker-local-calendar-animation-duration)) var(--hybrid-datepicker-transition-timing, var(--hybrid-datepicker-local-transition-timing));
+  }
+
+  .calendar-range {
+    width: calc(var(--hybrid-datepicker-calendar-width, var(--hybrid-datepicker-local-calendar-width)) * 2);
+  }
+
+  /* Calendar header */
+  .calendar-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--hybrid-datepicker-header-padding, var(--hybrid-datepicker-local-header-padding));
+    height: var(--hybrid-datepicker-header-height, var(--hybrid-datepicker-local-header-height));
+    border-bottom: var(--hybrid-datepicker-border-width, var(--hybrid-datepicker-local-border-width)) solid var(--hybrid-datepicker-border-color, var(--hybrid-datepicker-local-border-color));
+    background: var(--hybrid-datepicker-header-background, var(--hybrid-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(--hybrid-datepicker-gap, var(--hybrid-datepicker-local-gap)) / 2);
+  }
+
+  .year-icons-toggler {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  /* Calendar content */
+  .calendar-content {
+    padding: var(--hybrid-datepicker-gap, var(--hybrid-datepicker-local-gap));
+    padding-bottom: calc(var(--hybrid-datepicker-gap, var(--hybrid-datepicker-local-gap)) / 2);
+  }
+
+  /* Button customizations */
+  hy-button {
+    --hybrid-button-border-color: transparent;
+    --hybrid-button-background-color: transparent;
+    --hybrid-button-text-color: var(--hybrid-datepicker-text-color, var(--hybrid-datepicker-local-text-color));
+    --hybrid-button-hover-background-color: var(--hybrid-datepicker-hover-color, var(--hybrid-datepicker-local-hover-color));
+    --hybrid-button-transition-duration: var(--hybrid-datepicker-transition-duration, var(--hybrid-datepicker-local-transition-duration));
+  }
+
+  .toggle-year-view,
+  .toggle-month-view {
+    --hybrid-button-font-weight: var(--hybrid-datepicker-header-font-weight, var(--hybrid-datepicker-local-header-font-weight));
+    --hybrid-button-font-size: var(--hybrid-datepicker-header-font-size, var(--hybrid-datepicker-local-header-font-size));
+    --hybrid-button-padding: 4px 20px 4px 8px;
+    --hybrid-button-border-radius: 6px;
+    --hybrid-button-border: 1px solid var(--hybrid-datepicker-border-color, var(--hybrid-datepicker-local-border-color));
+    --hybrid-button-background-color: #ffffff;
+    --hybrid-button-hover-border-color: var(--hybrid-datepicker-primary-color, var(--hybrid-datepicker-local-primary-color));
+    --hybrid-button-hover-background-color: #ffffff;
+    --hybrid-button-active-background-color: var(--hybrid-datepicker-hover-background, var(--hybrid-datepicker-local-hover-background));
+    --hybrid-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(--hybrid-datepicker-primary-color, var(--hybrid-datepicker-local-primary-color));
+  }
+
+  .next-year,
+  .previous-year {
+    --hybrid-button-width: 16px;
+    --hybrid-button-height: 12px;
+    --hybrid-button-padding: 0;
+    --hybrid-button-min-width: auto;
+    --hybrid-button-border-radius: 2px;
+    --hybrid-button-text-color: rgba(0, 0, 0, 0.45);
+    --hybrid-button-hover-text-color: rgba(0, 0, 0, 0.85);
+    --hybrid-button-hover-background-color: rgba(0, 0, 0, 0.06);
+  }
+
+  .header-prev-button,
+  .header-next-button {
+    --hybrid-button-width: 24px;
+    --hybrid-button-height: 24px;
+    --hybrid-button-padding: 0;
+    --hybrid-button-min-width: auto;
+    --hybrid-button-border-radius: 2px;
+    --hybrid-button-text-color: rgba(0, 0, 0, 0.45);
+    --hybrid-button-hover-text-color: rgba(0, 0, 0, 0.85);
+    --hybrid-button-hover-background-color: rgba(0, 0, 0, 0.06);
+    --hybrid-button-transition: all 0.2s;
+  }
+
+  .header-prev-button:hover,
+  .header-next-button:hover {
+    --hybrid-button-background-color: rgba(0, 0, 0, 0.06);
+  }
+
+  /* Placement variants */
+  .placement-top {
+    animation: calendar-slide-down var(--hybrid-datepicker-calendar-animation-duration, var(--hybrid-datepicker-local-calendar-animation-duration)) var(--hybrid-datepicker-transition-timing, var(--hybrid-datepicker-local-transition-timing));
+  }
+
+  .placement-bottom {
+    animation: calendar-slide-up var(--hybrid-datepicker-calendar-animation-duration, var(--hybrid-datepicker-local-calendar-animation-duration)) var(--hybrid-datepicker-transition-timing, var(--hybrid-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(--hybrid-datepicker-focus-border-width, var(--hybrid-datepicker-local-focus-border-width)) solid var(--hybrid-datepicker-primary-color, var(--hybrid-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(--hybrid-datepicker-gap, var(--hybrid-datepicker-local-gap));
+  }
+
+  .weekday-header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8px 4px;
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--hybrid-datepicker-weekday-color, var(--hybrid-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(--hybrid-datepicker-day-size, var(--hybrid-datepicker-local-day-size));
+    height: var(--hybrid-datepicker-day-size, var(--hybrid-datepicker-local-day-size));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all var(--hybrid-datepicker-transition-duration, var(--hybrid-datepicker-local-transition-duration)) var(--hybrid-datepicker-transition-timing, var(--hybrid-datepicker-local-transition-timing));
+    font-size: var(--hybrid-datepicker-day-font-size, var(--hybrid-datepicker-local-day-font-size));
+    font-weight: 400;
+    color: var(--hybrid-datepicker-text-color, var(--hybrid-datepicker-local-text-color));
+    margin: 1px;
+    position: relative;
+  }
+
+  .day-cell:hover:not(.disabled):not(.selected) {
+    background-color: var(--hybrid-datepicker-hover-color, var(--hybrid-datepicker-local-hover-color));
+    scale: 1.05;
+  }
+
+  .day-cell.selected {
+    background-color: var(--hybrid-datepicker-selected-color, var(--hybrid-datepicker-local-selected-color)) !important;
+    color: var(--hybrid-datepicker-selected-text-color, var(--hybrid-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(--hybrid-datepicker-today-color, var(--hybrid-datepicker-local-today-color));
+    font-weight: 600;
+  }
+
+  .day-cell.today.selected {
+    border-color: var(--hybrid-datepicker-selected-text-color, var(--hybrid-datepicker-local-selected-text-color));
+  }
+
+  .day-cell.disabled {
+    background-color: var(--hybrid-datepicker-disabled-color, var(--hybrid-datepicker-local-disabled-color));
+    color: var(--hybrid-datepicker-disabled-text-color, var(--hybrid-datepicker-local-disabled-text-color));
+    cursor: not-allowed;
+    pointer-events: none;
+    opacity: 0.4;
+  }
+
+  .day-cell.in-range {
+    background-color: var(--hybrid-datepicker-range-color, var(--hybrid-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 {
+    --hybrid-datepicker-local-input-border-color: var(--hybrid-datepicker-error-color, var(--hybrid-datepicker-local-error-color));
+  }
+
+  :host([state="warning"]) .datepicker-container {
+    --hybrid-datepicker-local-input-border-color: var(--hybrid-datepicker-warning-color, var(--hybrid-datepicker-local-warning-color));
+  }
+
+  :host([state="success"]) .datepicker-container {
+    --hybrid-datepicker-local-input-border-color: var(--hybrid-datepicker-success-color, var(--hybrid-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(--hybrid-datepicker-background-color, var(--hybrid-datepicker-local-background-color));
+    border: var(--hybrid-datepicker-border-width, var(--hybrid-datepicker-local-border-width)) solid var(--hybrid-datepicker-border-color, var(--hybrid-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(--hybrid-datepicker-text-color, var(--hybrid-datepicker-local-text-color));
+    font-size: var(--hybrid-datepicker-font-size, var(--hybrid-datepicker-local-font-size));
+    transition: all 0.2s;
+    border-radius: 0;
+  }
+
+  .dropdown-item:hover {
+    background-color: var(--hybrid-datepicker-hover-background, var(--hybrid-datepicker-local-hover-background));
+  }
+
+  .dropdown-item.selected {
+    background-color: var(--hybrid-datepicker-primary-color, var(--hybrid-datepicker-local-primary-color));
+    color: #ffffff;
+    font-weight: 600;
+  }
+
+  .dropdown-item.selected:hover {
+    background-color: var(--hybrid-datepicker-primary-color, var(--hybrid-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 {
+    --hybrid-select-width: 110px !important;
+    --hybrid-select-local-width: 110px !important;
+    width: 110px !important;
+    max-width: 110px !important;
+  }
+
+  .year-select {
+    --hybrid-select-width: 80px !important;
+    --hybrid-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;;;;GAIG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAEtE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8btB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Google Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { css } from 'lit';\nimport { datepickerVariables } from './datepicker.style.variables.js';\n\nexport const styles = css`\n  ${datepickerVariables}\n\n  :host {\n    width: fit-content;\n    display: block;\n    font-family: var(--hybrid-datepicker-font-family, var(--hybrid-datepicker-local-font-family));\n  }\n\n  /* Host attribute selectors for configuration */\n  :host([disabled]) {\n    opacity: var(--hybrid-datepicker-disabled-opacity, var(--hybrid-datepicker-local-disabled-opacity));\n    pointer-events: none;\n  }\n\n  :host([range]) {\n    --hybrid-datepicker-local-calendar-width: 600px;\n  }\n\n  /* Theme-specific styles */\n  :host([theme='dark']) {\n    --hybrid-datepicker-local-background-color: #1f1f1f;\n    --hybrid-datepicker-local-border-color: #424242;\n    --hybrid-datepicker-local-text-color: #ffffff;\n    --hybrid-datepicker-local-hover-color: #333333;\n    --hybrid-datepicker-local-input-background: #1f1f1f;\n    --hybrid-datepicker-local-input-border-color: #424242;\n    --hybrid-datepicker-local-input-text-color: #ffffff;\n  }\n\n  /* Container styles */\n  .datepicker-container {\n    position: relative;\n    display: block;\n    width: var(--hybrid-datepicker-width, var(--hybrid-datepicker-local-width));\n    font-family: var(--hybrid-datepicker-font-family, var(--hybrid-datepicker-local-font-family));\n    /* Allow calendar to overflow container without causing scroll */\n    overflow: visible;\n  }\n\n  .datepicker-disabled {\n    opacity: var(--hybrid-datepicker-disabled-opacity, var(--hybrid-datepicker-local-disabled-opacity));\n    pointer-events: none;\n  }\n\n  /* Size variants */\n  .datepicker-size-small {\n    --hybrid-datepicker-local-day-size: var(--hybrid-datepicker-local-small-day-size);\n    --hybrid-datepicker-local-font-size: var(--hybrid-datepicker-local-small-font-size);\n  }\n\n  .datepicker-size-medium {\n    --hybrid-datepicker-local-day-size: var(--hybrid-datepicker-local-medium-day-size);\n    --hybrid-datepicker-local-font-size: var(--hybrid-datepicker-local-medium-font-size);\n  }\n\n  .datepicker-size-large {\n    --hybrid-datepicker-local-day-size: var(--hybrid-datepicker-local-large-day-size);\n    --hybrid-datepicker-local-font-size: var(--hybrid-datepicker-local-large-font-size);\n  }\n\n  /* Calendar container */\n  .calendar-container {\n    position: fixed;\n    z-index: var(--hybrid-datepicker-calendar-z-index, var(--hybrid-datepicker-local-calendar-z-index));\n    user-select: none;\n    padding: var(--hybrid-datepicker-calendar-padding, var(--hybrid-datepicker-local-calendar-padding));\n    width: var(--hybrid-datepicker-calendar-width, var(--hybrid-datepicker-local-calendar-width));\n    height: var(--hybrid-datepicker-calendar-height, var(--hybrid-datepicker-local-calendar-height));\n    background-color: var(--hybrid-datepicker-background-color, var(--hybrid-datepicker-local-background-color));\n    border: var(--hybrid-datepicker-border-width, var(--hybrid-datepicker-local-border-width)) solid var(--hybrid-datepicker-border-color, var(--hybrid-datepicker-local-border-color));\n    border-radius: var(--hybrid-datepicker-border-radius, var(--hybrid-datepicker-local-border-radius));\n    box-shadow: var(--hybrid-datepicker-box-shadow, var(--hybrid-datepicker-local-box-shadow));\n    animation: calendar-slide-in var(--hybrid-datepicker-calendar-animation-duration, var(--hybrid-datepicker-local-calendar-animation-duration)) var(--hybrid-datepicker-transition-timing, var(--hybrid-datepicker-local-transition-timing));\n  }\n\n  .calendar-range {\n    width: calc(var(--hybrid-datepicker-calendar-width, var(--hybrid-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(--hybrid-datepicker-header-padding, var(--hybrid-datepicker-local-header-padding));\n    height: var(--hybrid-datepicker-header-height, var(--hybrid-datepicker-local-header-height));\n    border-bottom: var(--hybrid-datepicker-border-width, var(--hybrid-datepicker-local-border-width)) solid var(--hybrid-datepicker-border-color, var(--hybrid-datepicker-local-border-color));\n    background: var(--hybrid-datepicker-header-background, var(--hybrid-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(--hybrid-datepicker-gap, var(--hybrid-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(--hybrid-datepicker-gap, var(--hybrid-datepicker-local-gap));\n    padding-bottom: calc(var(--hybrid-datepicker-gap, var(--hybrid-datepicker-local-gap)) / 2);\n  }\n\n  /* Button customizations */\n  hy-button {\n    --hybrid-button-border-color: transparent;\n    --hybrid-button-background-color: transparent;\n    --hybrid-button-text-color: var(--hybrid-datepicker-text-color, var(--hybrid-datepicker-local-text-color));\n    --hybrid-button-hover-background-color: var(--hybrid-datepicker-hover-color, var(--hybrid-datepicker-local-hover-color));\n    --hybrid-button-transition-duration: var(--hybrid-datepicker-transition-duration, var(--hybrid-datepicker-local-transition-duration));\n  }\n\n  .toggle-year-view,\n  .toggle-month-view {\n    --hybrid-button-font-weight: var(--hybrid-datepicker-header-font-weight, var(--hybrid-datepicker-local-header-font-weight));\n    --hybrid-button-font-size: var(--hybrid-datepicker-header-font-size, var(--hybrid-datepicker-local-header-font-size));\n    --hybrid-button-padding: 4px 20px 4px 8px;\n    --hybrid-button-border-radius: 6px;\n    --hybrid-button-border: 1px solid var(--hybrid-datepicker-border-color, var(--hybrid-datepicker-local-border-color));\n    --hybrid-button-background-color: #ffffff;\n    --hybrid-button-hover-border-color: var(--hybrid-datepicker-primary-color, var(--hybrid-datepicker-local-primary-color));\n    --hybrid-button-hover-background-color: #ffffff;\n    --hybrid-button-active-background-color: var(--hybrid-datepicker-hover-background, var(--hybrid-datepicker-local-hover-background));\n    --hybrid-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(--hybrid-datepicker-primary-color, var(--hybrid-datepicker-local-primary-color));\n  }\n\n  .next-year,\n  .previous-year {\n    --hybrid-button-width: 16px;\n    --hybrid-button-height: 12px;\n    --hybrid-button-padding: 0;\n    --hybrid-button-min-width: auto;\n    --hybrid-button-border-radius: 2px;\n    --hybrid-button-text-color: rgba(0, 0, 0, 0.45);\n    --hybrid-button-hover-text-color: rgba(0, 0, 0, 0.85);\n    --hybrid-button-hover-background-color: rgba(0, 0, 0, 0.06);\n  }\n\n  .header-prev-button,\n  .header-next-button {\n    --hybrid-button-width: 24px;\n    --hybrid-button-height: 24px;\n    --hybrid-button-padding: 0;\n    --hybrid-button-min-width: auto;\n    --hybrid-button-border-radius: 2px;\n    --hybrid-button-text-color: rgba(0, 0, 0, 0.45);\n    --hybrid-button-hover-text-color: rgba(0, 0, 0, 0.85);\n    --hybrid-button-hover-background-color: rgba(0, 0, 0, 0.06);\n    --hybrid-button-transition: all 0.2s;\n  }\n\n  .header-prev-button:hover,\n  .header-next-button:hover {\n    --hybrid-button-background-color: rgba(0, 0, 0, 0.06);\n  }\n\n  /* Placement variants */\n  .placement-top {\n    animation: calendar-slide-down var(--hybrid-datepicker-calendar-animation-duration, var(--hybrid-datepicker-local-calendar-animation-duration)) var(--hybrid-datepicker-transition-timing, var(--hybrid-datepicker-local-transition-timing));\n  }\n\n  .placement-bottom {\n    animation: calendar-slide-up var(--hybrid-datepicker-calendar-animation-duration, var(--hybrid-datepicker-local-calendar-animation-duration)) var(--hybrid-datepicker-transition-timing, var(--hybrid-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(--hybrid-datepicker-focus-border-width, var(--hybrid-datepicker-local-focus-border-width)) solid var(--hybrid-datepicker-primary-color, var(--hybrid-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(--hybrid-datepicker-gap, var(--hybrid-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(--hybrid-datepicker-weekday-color, var(--hybrid-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(--hybrid-datepicker-day-size, var(--hybrid-datepicker-local-day-size));\n    height: var(--hybrid-datepicker-day-size, var(--hybrid-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(--hybrid-datepicker-transition-duration, var(--hybrid-datepicker-local-transition-duration)) var(--hybrid-datepicker-transition-timing, var(--hybrid-datepicker-local-transition-timing));\n    font-size: var(--hybrid-datepicker-day-font-size, var(--hybrid-datepicker-local-day-font-size));\n    font-weight: 400;\n    color: var(--hybrid-datepicker-text-color, var(--hybrid-datepicker-local-text-color));\n    margin: 1px;\n    position: relative;\n  }\n\n  .day-cell:hover:not(.disabled):not(.selected) {\n    background-color: var(--hybrid-datepicker-hover-color, var(--hybrid-datepicker-local-hover-color));\n    scale: 1.05;\n  }\n\n  .day-cell.selected {\n    background-color: var(--hybrid-datepicker-selected-color, var(--hybrid-datepicker-local-selected-color)) !important;\n    color: var(--hybrid-datepicker-selected-text-color, var(--hybrid-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(--hybrid-datepicker-today-color, var(--hybrid-datepicker-local-today-color));\n    font-weight: 600;\n  }\n\n  .day-cell.today.selected {\n    border-color: var(--hybrid-datepicker-selected-text-color, var(--hybrid-datepicker-local-selected-text-color));\n  }\n\n  .day-cell.disabled {\n    background-color: var(--hybrid-datepicker-disabled-color, var(--hybrid-datepicker-local-disabled-color));\n    color: var(--hybrid-datepicker-disabled-text-color, var(--hybrid-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(--hybrid-datepicker-range-color, var(--hybrid-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    --hybrid-datepicker-local-input-border-color: var(--hybrid-datepicker-error-color, var(--hybrid-datepicker-local-error-color));\n  }\n\n  :host([state=\"warning\"]) .datepicker-container {\n    --hybrid-datepicker-local-input-border-color: var(--hybrid-datepicker-warning-color, var(--hybrid-datepicker-local-warning-color));\n  }\n\n  :host([state=\"success\"]) .datepicker-container {\n    --hybrid-datepicker-local-input-border-color: var(--hybrid-datepicker-success-color, var(--hybrid-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(--hybrid-datepicker-background-color, var(--hybrid-datepicker-local-background-color));\n    border: var(--hybrid-datepicker-border-width, var(--hybrid-datepicker-local-border-width)) solid var(--hybrid-datepicker-border-color, var(--hybrid-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(--hybrid-datepicker-text-color, var(--hybrid-datepicker-local-text-color));\n    font-size: var(--hybrid-datepicker-font-size, var(--hybrid-datepicker-local-font-size));\n    transition: all 0.2s;\n    border-radius: 0;\n  }\n\n  .dropdown-item:hover {\n    background-color: var(--hybrid-datepicker-hover-background, var(--hybrid-datepicker-local-hover-background));\n  }\n\n  .dropdown-item.selected {\n    background-color: var(--hybrid-datepicker-primary-color, var(--hybrid-datepicker-local-primary-color));\n    color: #ffffff;\n    font-weight: 600;\n  }\n\n  .dropdown-item.selected:hover {\n    background-color: var(--hybrid-datepicker-primary-color, var(--hybrid-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    --hybrid-select-width: 110px !important;\n    --hybrid-select-local-width: 110px !important;\n    width: 110px !important;\n    max-width: 110px !important;\n  }\n\n  .year-select {\n    --hybrid-select-width: 80px !important;\n    --hybrid-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,11 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * CSS custom properties for datepicker component (light theme defaults)
+ * These are the local component defaults that can be overridden globally
+ */
+export declare const datepickerVariables: import("lit").CSSResult;
+//# sourceMappingURL=datepicker.style.variables.d.ts.map

package/datepicker.style.variables.js

@@ -0,0 +1,115 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { css } from 'lit';
+/**
+ * CSS custom properties for datepicker component (light theme defaults)
+ * These are the local component defaults that can be overridden globally
+ */
+export const datepickerVariables = css `
+  :host {
+    /* Layout and sizing */
+    --hybrid-datepicker-local-width: 280px;
+    --hybrid-datepicker-local-height: auto;
+    --hybrid-datepicker-local-padding: 16px;
+    --hybrid-datepicker-local-margin: 0;
+    --hybrid-datepicker-local-border-radius: 8px;
+    --hybrid-datepicker-local-calendar-width: 320px;
+    --hybrid-datepicker-local-calendar-height: auto;
+    --hybrid-datepicker-local-day-size: 36px;
+    --hybrid-datepicker-local-header-height: 56px;
+    
+    /* Colors - Light theme defaults */
+    --hybrid-datepicker-local-background-color: #ffffff;
+    --hybrid-datepicker-local-border-color: #d9d9d9;
+    --hybrid-datepicker-local-text-color: #000000;
+    --hybrid-datepicker-local-primary-color: #1677ff;
+    --hybrid-datepicker-local-hover-color: #f5f5f5;
+    --hybrid-datepicker-local-selected-color: #1677ff;
+    --hybrid-datepicker-local-selected-text-color: #ffffff;
+    --hybrid-datepicker-local-today-color: #1677ff;
+    --hybrid-datepicker-local-disabled-color: #f5f5f5;
+    --hybrid-datepicker-local-disabled-text-color: #bfbfbf;
+    --hybrid-datepicker-local-weekend-color: #ff4d4f;
+    --hybrid-datepicker-local-weekday-color: #8c8c8c;
+    --hybrid-datepicker-local-range-color: rgba(22, 119, 255, 0.1);
+    --hybrid-datepicker-local-shadow-color: rgba(0, 0, 0, 0.1);
+    --hybrid-datepicker-local-error-color: #da1e28;
+    --hybrid-datepicker-local-warning-color: #f0c300;
+    --hybrid-datepicker-local-success-color: #24a148;
+    
+    /* Header specific colors */
+    --hybrid-datepicker-local-header-background: #ffffff;
+    --hybrid-datepicker-local-hover-background: rgba(0, 0, 0, 0.04);
+    --hybrid-datepicker-local-active-background: rgba(0, 0, 0, 0.06);
+    
+    /* Input field colors */
+    --hybrid-datepicker-local-input-background: #ffffff;
+    --hybrid-datepicker-local-input-border-color: #d9d9d9;
+    --hybrid-datepicker-local-input-focus-border-color: #1677ff;
+    --hybrid-datepicker-local-input-text-color: #000000;
+    --hybrid-datepicker-local-input-placeholder-color: #bfbfbf;
+    
+    /* Typography */
+    --hybrid-datepicker-local-font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
+    --hybrid-datepicker-local-font-size: 14px;
+    --hybrid-datepicker-local-font-weight: 400;
+    --hybrid-datepicker-local-header-font-size: 16px;
+    --hybrid-datepicker-local-header-font-weight: 600;
+    --hybrid-datepicker-local-day-font-size: 14px;
+    --hybrid-datepicker-local-input-font-size: 14px;
+    --hybrid-datepicker-local-label-font-size: 14px;
+    --hybrid-datepicker-local-helper-font-size: 12px;
+    --hybrid-datepicker-local-message-font-size: 12px;
+    
+    /* Spacing */
+    --hybrid-datepicker-local-gap: 6px;
+    --hybrid-datepicker-local-calendar-padding: 12px;
+    --hybrid-datepicker-local-day-padding: 6px;
+    --hybrid-datepicker-local-input-padding: 8px 12px;
+    
+    /* Borders */
+    --hybrid-datepicker-local-border-width: 1px;
+    --hybrid-datepicker-local-input-border-width: 1px;
+    --hybrid-datepicker-local-focus-border-width: 2px;
+    
+    /* Shadows */
+    --hybrid-datepicker-local-box-shadow: 0 6px 16px 0 var(--hybrid-datepicker-local-shadow-color);
+    --hybrid-datepicker-local-input-focus-shadow: 0 0 0 2px rgba(22, 119, 255, 0.2);
+    
+    /* States */
+    --hybrid-datepicker-local-disabled-opacity: 0.5;
+    --hybrid-datepicker-local-hover-opacity: 0.8;
+    
+    /* Animation and transitions */
+    --hybrid-datepicker-local-transition-duration: 0.2s;
+    --hybrid-datepicker-local-transition-timing: ease-in-out;
+    --hybrid-datepicker-local-calendar-animation-duration: 0.15s;
+    
+    /* Z-index */
+    --hybrid-datepicker-local-calendar-z-index: 1000;
+    
+    /* Icon sizes */
+    --hybrid-datepicker-local-icon-size: 16px;
+    --hybrid-datepicker-local-arrow-icon-size: 12px;
+    
+    /* Size variants */
+    --hybrid-datepicker-local-small-font-size: 12px;
+    --hybrid-datepicker-local-small-padding: 6px 8px;
+    --hybrid-datepicker-local-small-height: 32px;
+    --hybrid-datepicker-local-small-day-size: 28px;
+    
+    --hybrid-datepicker-local-medium-font-size: 14px;
+    --hybrid-datepicker-local-medium-padding: 8px 12px;
+    --hybrid-datepicker-local-medium-height: 36px;
+    --hybrid-datepicker-local-medium-day-size: 36px;
+    
+    --hybrid-datepicker-local-large-font-size: 16px;
+    --hybrid-datepicker-local-large-padding: 12px 16px;
+    --hybrid-datepicker-local-large-height: 44px;
+    --hybrid-datepicker-local-large-day-size: 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;;;;GAIG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;GAGG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuGrC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Google Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { css } from 'lit';\n\n/**\n * CSS custom properties for datepicker component (light theme defaults)\n * These are the local component defaults that can be overridden globally\n */\nexport const datepickerVariables = css`\n  :host {\n    /* Layout and sizing */\n    --hybrid-datepicker-local-width: 280px;\n    --hybrid-datepicker-local-height: auto;\n    --hybrid-datepicker-local-padding: 16px;\n    --hybrid-datepicker-local-margin: 0;\n    --hybrid-datepicker-local-border-radius: 8px;\n    --hybrid-datepicker-local-calendar-width: 320px;\n    --hybrid-datepicker-local-calendar-height: auto;\n    --hybrid-datepicker-local-day-size: 36px;\n    --hybrid-datepicker-local-header-height: 56px;\n    \n    /* Colors - Light theme defaults */\n    --hybrid-datepicker-local-background-color: #ffffff;\n    --hybrid-datepicker-local-border-color: #d9d9d9;\n    --hybrid-datepicker-local-text-color: #000000;\n    --hybrid-datepicker-local-primary-color: #1677ff;\n    --hybrid-datepicker-local-hover-color: #f5f5f5;\n    --hybrid-datepicker-local-selected-color: #1677ff;\n    --hybrid-datepicker-local-selected-text-color: #ffffff;\n    --hybrid-datepicker-local-today-color: #1677ff;\n    --hybrid-datepicker-local-disabled-color: #f5f5f5;\n    --hybrid-datepicker-local-disabled-text-color: #bfbfbf;\n    --hybrid-datepicker-local-weekend-color: #ff4d4f;\n    --hybrid-datepicker-local-weekday-color: #8c8c8c;\n    --hybrid-datepicker-local-range-color: rgba(22, 119, 255, 0.1);\n    --hybrid-datepicker-local-shadow-color: rgba(0, 0, 0, 0.1);\n    --hybrid-datepicker-local-error-color: #da1e28;\n    --hybrid-datepicker-local-warning-color: #f0c300;\n    --hybrid-datepicker-local-success-color: #24a148;\n    \n    /* Header specific colors */\n    --hybrid-datepicker-local-header-background: #ffffff;\n    --hybrid-datepicker-local-hover-background: rgba(0, 0, 0, 0.04);\n    --hybrid-datepicker-local-active-background: rgba(0, 0, 0, 0.06);\n    \n    /* Input field colors */\n    --hybrid-datepicker-local-input-background: #ffffff;\n    --hybrid-datepicker-local-input-border-color: #d9d9d9;\n    --hybrid-datepicker-local-input-focus-border-color: #1677ff;\n    --hybrid-datepicker-local-input-text-color: #000000;\n    --hybrid-datepicker-local-input-placeholder-color: #bfbfbf;\n    \n    /* Typography */\n    --hybrid-datepicker-local-font-family: Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Ubuntu, Cantarell, \"Noto Sans\", sans-serif;\n    --hybrid-datepicker-local-font-size: 14px;\n    --hybrid-datepicker-local-font-weight: 400;\n    --hybrid-datepicker-local-header-font-size: 16px;\n    --hybrid-datepicker-local-header-font-weight: 600;\n    --hybrid-datepicker-local-day-font-size: 14px;\n    --hybrid-datepicker-local-input-font-size: 14px;\n    --hybrid-datepicker-local-label-font-size: 14px;\n    --hybrid-datepicker-local-helper-font-size: 12px;\n    --hybrid-datepicker-local-message-font-size: 12px;\n    \n    /* Spacing */\n    --hybrid-datepicker-local-gap: 6px;\n    --hybrid-datepicker-local-calendar-padding: 12px;\n    --hybrid-datepicker-local-day-padding: 6px;\n    --hybrid-datepicker-local-input-padding: 8px 12px;\n    \n    /* Borders */\n    --hybrid-datepicker-local-border-width: 1px;\n    --hybrid-datepicker-local-input-border-width: 1px;\n    --hybrid-datepicker-local-focus-border-width: 2px;\n    \n    /* Shadows */\n    --hybrid-datepicker-local-box-shadow: 0 6px 16px 0 var(--hybrid-datepicker-local-shadow-color);\n    --hybrid-datepicker-local-input-focus-shadow: 0 0 0 2px rgba(22, 119, 255, 0.2);\n    \n    /* States */\n    --hybrid-datepicker-local-disabled-opacity: 0.5;\n    --hybrid-datepicker-local-hover-opacity: 0.8;\n    \n    /* Animation and transitions */\n    --hybrid-datepicker-local-transition-duration: 0.2s;\n    --hybrid-datepicker-local-transition-timing: ease-in-out;\n    --hybrid-datepicker-local-calendar-animation-duration: 0.15s;\n    \n    /* Z-index */\n    --hybrid-datepicker-local-calendar-z-index: 1000;\n    \n    /* Icon sizes */\n    --hybrid-datepicker-local-icon-size: 16px;\n    --hybrid-datepicker-local-arrow-icon-size: 12px;\n    \n    /* Size variants */\n    --hybrid-datepicker-local-small-font-size: 12px;\n    --hybrid-datepicker-local-small-padding: 6px 8px;\n    --hybrid-datepicker-local-small-height: 32px;\n    --hybrid-datepicker-local-small-day-size: 28px;\n    \n    --hybrid-datepicker-local-medium-font-size: 14px;\n    --hybrid-datepicker-local-medium-padding: 8px 12px;\n    --hybrid-datepicker-local-medium-height: 36px;\n    --hybrid-datepicker-local-medium-day-size: 36px;\n    \n    --hybrid-datepicker-local-large-font-size: 16px;\n    --hybrid-datepicker-local-large-padding: 12px 16px;\n    --hybrid-datepicker-local-large-height: 44px;\n    --hybrid-datepicker-local-large-day-size: 44px;\n  }\n`;\n"]}