@nuraly/lumenui 0.1.0 → 0.2.1

package/dist/src/components/datepicker/datepicker.component.d.ts

@@ -8,7 +8,7 @@ import { DatePickerMode, DatePickerType, DatePickerSize, DatePickerVariant, Date
 import { DatePickerHost } from './interfaces/base-controller.interface.js';
 import './utils/locale.helper.js';
 import { INPUT_STATE } from '../input/input.types.js';
-declare const HyDatePickerElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
+declare const HyDatePickerElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & (new (...args: any[]) => import("packages/common/src/shared/base-mixin.js").LightDomContent) & typeof LitElement;
 /**
  * HyDatePicker - A comprehensive date picker component
  *
@@ -53,6 +53,7 @@ declare const HyDatePickerElement_base: (new (...args: any[]) => import("@nuraly
  * ```
  */
 export declare class HyDatePickerElement extends HyDatePickerElement_base implements DatePickerHost {
+    static useShadowDom: boolean;
     static styles: import("lit").CSSResult;
     requiredComponents: string[];
     private calendarController;

package/dist/src/components/datepicker/datepicker.component.js

@@ -551,6 +551,7 @@ let HyDatePickerElement = class HyDatePickerElement extends NuralyUIBaseMixin(Li
         return renderYearsTemplate(this.navigationDates.start.year, this.selectYear);
     }
 };
+HyDatePickerElement.useShadowDom = true;
 HyDatePickerElement.styles = styles;
 __decorate([
     property({ type: String })

package/dist/src/components/datepicker/datepicker.style.js

@@ -21,12 +21,12 @@ export const styles = css `
   :host {
     width: fit-content;
     display: block;
-    font-family: var(--nuraly-datepicker-font-family, var(--nuraly-datepicker-local-font-family));
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   }
 
   /* Host attribute selectors for configuration */
   :host([disabled]) {
-    opacity: var(--nuraly-datepicker-disabled-opacity, var(--nuraly-datepicker-local-disabled-opacity));
+    opacity: 0.5;
     pointer-events: none;
   }
 
@@ -38,50 +38,50 @@ export const styles = css `
   .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));
+    width: 280px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
     /* Allow calendar to overflow container without causing scroll */
     overflow: visible;
   }
 
   .datepicker-disabled {
-    opacity: var(--nuraly-datepicker-disabled-opacity, var(--nuraly-datepicker-local-disabled-opacity));
+    opacity: 0.5;
     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);
+    --nuraly-datepicker-local-day-size: 1.75rem;
+    --nuraly-datepicker-local-font-size: 0.75rem;
   }
 
   .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);
+    --nuraly-datepicker-local-day-size: 2rem;
+    --nuraly-datepicker-local-font-size: 0.875rem;
   }
 
   .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);
+    --nuraly-datepicker-local-day-size: 2.5rem;
+    --nuraly-datepicker-local-font-size: 1rem;
   }
 
   /* Calendar container */
   .calendar-container {
     position: fixed;
-    z-index: var(--nuraly-datepicker-calendar-z-index, var(--nuraly-datepicker-local-calendar-z-index));
+    z-index: 1000;
     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));
+    padding: 0.75rem;
+    width: 280px;
+    height: auto;
+    background-color: #ffffff;
+    border: 1px solid #e0e0e0;
+    border-radius: 6px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+    animation: calendar-slide-in 0.2s ease;
   }
 
   .calendar-range {
-    width: calc(var(--nuraly-datepicker-calendar-width, var(--nuraly-datepicker-local-calendar-width)) * 2);
+    width: calc(280px * 2);
   }
 
   /* Calendar header */
@@ -89,10 +89,10 @@ export const styles = css `
     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));
+    padding: 0.5rem;
+    height: 2.5rem;
+    border-bottom: 1px solid #e0e0e0;
+    background: transparent;
   }
 
   .year-month-header {
@@ -106,7 +106,7 @@ export const styles = css `
   .current-year-container {
     display: inline-flex;
     align-items: center;
-    gap: calc(var(--nuraly-datepicker-gap, var(--nuraly-datepicker-local-gap)) / 2);
+    gap: calc(0.25rem / 2);
   }
 
   .year-icons-toggler {
@@ -117,30 +117,30 @@ export const styles = css `
 
   /* 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);
+    padding: 0.25rem;
+    padding-bottom: calc(0.25rem / 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));
+    --nuraly-button-text-color: #161616;
+    --nuraly-button-hover-background-color: #7c3aed;
+    --nuraly-button-transition-duration: 0.2s;
   }
 
   .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-font-weight: 600;
+    --nuraly-button-font-size: 0.875rem;
     --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-border: 1px solid #e0e0e0;
     --nuraly-button-background-color: #ffffff;
-    --nuraly-button-hover-border-color: var(--nuraly-datepicker-primary-color, var(--nuraly-datepicker-local-primary-color));
+    --nuraly-button-hover-border-color: #7c3aed;
     --nuraly-button-hover-background-color: #ffffff;
-    --nuraly-button-active-background-color: var(--nuraly-datepicker-hover-background, var(--nuraly-datepicker-local-hover-background));
+    --nuraly-button-active-background-color: #f4f4f4;
     --nuraly-button-transition: all 0.2s;
     position: relative;
     min-width: 80px;
@@ -163,7 +163,7 @@ export const styles = css `
 
   .toggle-month-view:hover::after,
   .toggle-year-view:hover::after {
-    border-top-color: var(--nuraly-datepicker-primary-color, var(--nuraly-datepicker-local-primary-color));
+    border-top-color: #7c3aed;
   }
 
   .next-year,
@@ -198,11 +198,11 @@ export const styles = css `
 
   /* 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));
+    animation: calendar-slide-down 0.2s ease;
   }
 
   .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));
+    animation: calendar-slide-up 0.2s ease;
   }
 
   /* Animations */
@@ -246,7 +246,7 @@ export const styles = css `
 
   /* 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: 2px solid #7c3aed;
     outline-offset: 2px;
   }
 
@@ -266,7 +266,7 @@ export const styles = css `
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     gap: 1px;
-    margin-bottom: var(--nuraly-datepicker-gap, var(--nuraly-datepicker-local-gap));
+    margin-bottom: 0.25rem;
   }
 
   .weekday-header {
@@ -276,7 +276,7 @@ export const styles = css `
     padding: 8px 4px;
     font-size: 12px;
     font-weight: 500;
-    color: var(--nuraly-datepicker-weekday-color, var(--nuraly-datepicker-local-weekday-color));
+    color: #525252;
     text-align: center;
   }
 
@@ -288,52 +288,52 @@ export const styles = css `
 
   /* 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));
+    width: 2rem;
+    height: 2rem;
     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));
+    transition: all 0.2s ease;
+    font-size: 0.875rem;
     font-weight: 400;
-    color: var(--nuraly-datepicker-text-color, var(--nuraly-datepicker-local-text-color));
+    color: #161616;
     margin: 1px;
     position: relative;
   }
 
   .day-cell:hover:not(.disabled):not(.selected) {
-    background-color: var(--nuraly-datepicker-hover-color, var(--nuraly-datepicker-local-hover-color));
+    background-color: #7c3aed;
     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;
+    background-color: #7c3aed !important;
+    color: #ffffff !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));
+    border: 2px solid #7c3aed;
     font-weight: 600;
   }
 
   .day-cell.today.selected {
-    border-color: var(--nuraly-datepicker-selected-text-color, var(--nuraly-datepicker-local-selected-text-color));
+    border-color: #ffffff;
   }
 
   .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));
+    background-color: #f4f4f4;
+    color: #c6c6c6;
     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));
+    background-color: #f4f0fd;
     border-radius: 0;
   }
 
@@ -351,15 +351,15 @@ export const styles = css `
 
   /* Error states */
   :host([state="error"]) .datepicker-container {
-    --nuraly-datepicker-local-input-border-color: var(--nuraly-datepicker-error-color, var(--nuraly-datepicker-local-error-color));
+    --nuraly-datepicker-local-input-border-color: #dc2626;
   }
 
   :host([state="warning"]) .datepicker-container {
-    --nuraly-datepicker-local-input-border-color: var(--nuraly-datepicker-warning-color, var(--nuraly-datepicker-local-warning-color));
+    --nuraly-datepicker-local-input-border-color: #f1c21b;
   }
 
   :host([state="success"]) .datepicker-container {
-    --nuraly-datepicker-local-input-border-color: var(--nuraly-datepicker-success-color, var(--nuraly-datepicker-local-success-color));
+    --nuraly-datepicker-local-input-border-color: #198038;
   }
 
   /* Month/Year Dropdown Styles */
@@ -371,8 +371,8 @@ export const styles = css `
     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));
+    background: #ffffff;
+    border: 1px solid #e0e0e0;
     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;
@@ -391,24 +391,24 @@ export const styles = css `
   .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));
+    color: #161616;
+    font-size: 0.875rem;
     transition: all 0.2s;
     border-radius: 0;
   }
 
   .dropdown-item:hover {
-    background-color: var(--nuraly-datepicker-hover-background, var(--nuraly-datepicker-local-hover-background));
+    background-color: #f4f4f4;
   }
 
   .dropdown-item.selected {
-    background-color: var(--nuraly-datepicker-primary-color, var(--nuraly-datepicker-local-primary-color));
+    background-color: #7c3aed;
     color: #ffffff;
     font-weight: 600;
   }
 
   .dropdown-item.selected:hover {
-    background-color: var(--nuraly-datepicker-primary-color, var(--nuraly-datepicker-local-primary-color));
+    background-color: #7c3aed;
     opacity: 0.9;
   }
 

package/dist/src/components/datepicker/datepicker.style.variables.js

@@ -7,113 +7,113 @@ export const styleVariables = css `
      * ======================================== */
 
     /* 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);
-    
+    --nuraly-datepicker-local-background-color: #ffffff;
+    --nuraly-datepicker-local-text-color: #000000;
+    --nuraly-datepicker-local-font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
+    --nuraly-datepicker-local-font-size: 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);
-    
+    --nuraly-datepicker-local-border-color: #d9d9d9;
+    --nuraly-datepicker-local-border-width: 1px;
+    --nuraly-datepicker-local-border-radius: 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);
-    
+    --nuraly-datepicker-local-primary-color: #1677ff;
+    --nuraly-datepicker-local-selected-color: #1677ff;
+    --nuraly-datepicker-local-selected-text-color: #ffffff;
+    --nuraly-datepicker-local-hover-color: #f5f5f5;
+    --nuraly-datepicker-local-today-color: #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);
-    
+    --nuraly-datepicker-local-disabled-color: #f5f5f5;
+    --nuraly-datepicker-local-disabled-text-color: #bfbfbf;
+    --nuraly-datepicker-local-disabled-opacity: 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);
-    
+    --nuraly-datepicker-local-input-background: #ffffff;
+    --nuraly-datepicker-local-input-border-color: #d9d9d9;
+    --nuraly-datepicker-local-input-focus-border-color: #1677ff;
+    --nuraly-datepicker-local-input-text-color: #000000;
+    --nuraly-datepicker-local-input-placeholder-color: #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);
-    
+    --nuraly-datepicker-local-weekend-color: #ff4d4f;
+    --nuraly-datepicker-local-weekday-color: #8c8c8c;
+    --nuraly-datepicker-local-range-color: rgba(22, 119, 255, 0.1);
+    --nuraly-datepicker-local-error-color: #da1e28;
+    --nuraly-datepicker-local-warning-color: #f0c300;
+    --nuraly-datepicker-local-success-color: #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));
-    
+    --nuraly-datepicker-local-header-background: #ffffff;
+    --nuraly-datepicker-local-hover-background: rgba(0, 0, 0, 0.04);
+    --nuraly-datepicker-local-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);
-    
+    --nuraly-datepicker-local-width: 280px;
+    --nuraly-datepicker-local-height: auto;
+    --nuraly-datepicker-local-calendar-width: 320px;
+    --nuraly-datepicker-local-calendar-height: auto;
+    --nuraly-datepicker-local-day-size: 36px;
+    --nuraly-datepicker-local-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);
-    
+    --nuraly-datepicker-local-font-weight: 400;
+    --nuraly-datepicker-local-header-font-size: 16px;
+    --nuraly-datepicker-local-header-font-weight: 600;
+    --nuraly-datepicker-local-day-font-size: 14px;
+    --nuraly-datepicker-local-input-font-size: 14px;
+    --nuraly-datepicker-local-label-font-size: 14px;
+    --nuraly-datepicker-local-helper-font-size: 12px;
+    --nuraly-datepicker-local-message-font-size: 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);
-    
+    --nuraly-datepicker-local-gap: 6px;
+    --nuraly-datepicker-local-calendar-padding: 12px;
+    --nuraly-datepicker-local-day-padding: 6px;
+    --nuraly-datepicker-local-input-padding: 8px 12px;
+    --nuraly-datepicker-local-padding: 16px;
+    --nuraly-datepicker-local-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);
-    
+    --nuraly-datepicker-local-input-border-width: 1px;
+    --nuraly-datepicker-local-focus-border-width: 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));
-    
+    --nuraly-datepicker-local-shadow-color: rgba(0, 0, 0, 0.1);
+    --nuraly-datepicker-local-box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.1);
+    --nuraly-datepicker-local-input-focus-shadow: 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);
-    
+    --nuraly-datepicker-local-hover-opacity: 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);
-    
+    --nuraly-datepicker-local-transition-duration: 0.2s;
+    --nuraly-datepicker-local-transition-timing: ease-in-out;
+    --nuraly-datepicker-local-calendar-animation-duration: 0.15s;
+
     /* Z-index - theme-aware */
-    --nuraly-datepicker-local-calendar-z-index: var(--nuraly-z-index-datepicker-calendar, 1000);
-    
+    --nuraly-datepicker-local-calendar-z-index: 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);
-    
+    --nuraly-datepicker-local-icon-size: 16px;
+    --nuraly-datepicker-local-arrow-icon-size: 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);
+    --nuraly-datepicker-local-small-font-size: 12px;
+    --nuraly-datepicker-local-small-padding: 6px 8px;
+    --nuraly-datepicker-local-small-height: 32px;
+    --nuraly-datepicker-local-small-day-size: 28px;
+
+    --nuraly-datepicker-local-medium-font-size: 14px;
+    --nuraly-datepicker-local-medium-padding: 8px 12px;
+    --nuraly-datepicker-local-medium-height: 36px;
+    --nuraly-datepicker-local-medium-day-size: 36px;
+
+    --nuraly-datepicker-local-large-font-size: 16px;
+    --nuraly-datepicker-local-large-padding: 12px 16px;
+    --nuraly-datepicker-local-large-height: 44px;
+    --nuraly-datepicker-local-large-day-size: 44px;
   }
 `;
 //# sourceMappingURL=datepicker.style.variables.js.map

package/dist/src/components/db-connection-select/bundle.js

@@ -1,9 +1,9 @@
-import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{property as r,state as o,customElement as a}from"lit/decorators.js";
+import{css as t,LitElement as e,html as i,nothing as r}from"lit";import{property as s,state as o,customElement as a}from"lit/decorators.js";
 /**
  * @license
  * Copyright 2024 Nuraly
  * SPDX-License-Identifier: MIT
- */var n=function(t,e,i,s){for(var r,o=arguments.length,a=o<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s,n=t.length-1;n>=0;n--)(r=t[n])&&(a=(o<3?r(a):o>3?r(e,i,a):r(e,i))||a);return o>3&&a&&Object.defineProperty(e,i,a),a};let l=class extends e{constructor(){super(...arguments),this.dbType="postgresql",this.value="",this.placeholder="Select database connection...",this.entries=[],this.loading=!1,this.testResult=null,this.showCreateForm=!1,this.creating=!1,this.testing=!1,this.error="",this.newConnectionName="",this.newHost="localhost",this.newPort=5432,this.newDatabase="",this.newUsername="",this.newPassword="",this.newSsl=!1}connectedCallback(){super.connectedCallback(),this.updateDefaultPort()}updated(t){t.has("dbType")&&this.updateDefaultPort()}updateDefaultPort(){this.newPort={postgresql:5432,mysql:3306,mongodb:27017,mssql:1433,oracle:1521,sqlite:0}[this.dbType]||5432}handleSelectChange(t){var e;const i=(null===(e=t.detail)||void 0===e?void 0:e.value)||"";this.value=i,this.dispatchEvent(new CustomEvent("value-change",{detail:{value:i},bubbles:!0,composed:!0}))}toggleCreateForm(){this.showCreateForm=!this.showCreateForm,this.showCreateForm||this.resetCreateForm()}resetCreateForm(){this.newConnectionName="",this.newHost="localhost",this.updateDefaultPort(),this.newDatabase="",this.newUsername="",this.newPassword="",this.newSsl=!1,this.error="",this.testing=!1,this.creating=!1}handleTestConnection(){this.testing=!0,this.dispatchEvent(new CustomEvent("test-connection",{detail:{type:this.dbType,host:this.newHost,port:this.newPort,database:this.newDatabase,username:this.newUsername,password:this.newPassword,ssl:this.newSsl},bubbles:!0,composed:!0}))}notifyTestResult(t){this.testResult=t,this.testing=!1}handleCreate(){if(!this.newConnectionName||!this.newHost||!this.newDatabase)return;this.creating=!0,this.error="";const t=`database/${this.newConnectionName}`,e={type:this.dbType,host:this.newHost,port:this.newPort,database:this.newDatabase,username:this.newUsername,password:this.newPassword,ssl:this.newSsl};this.dispatchEvent(new CustomEvent("create-entry",{detail:{keyPath:t,value:JSON.stringify(e),scope:this.dbType,isSecret:!0},bubbles:!0,composed:!0}))}notifyCreateSuccess(t){this.value=t,this.showCreateForm=!1,this.resetCreateForm(),this.dispatchEvent(new CustomEvent("value-change",{detail:{value:t},bubbles:!0,composed:!0}))}notifyCreateError(t){this.error=t,this.creating=!1}getDbTypeLabel(){return{postgresql:"PostgreSQL",mysql:"MySQL",mongodb:"MongoDB",mssql:"SQL Server",oracle:"Oracle",sqlite:"SQLite"}[this.dbType]||this.dbType}renderCreateForm(){const t=this.newConnectionName&&this.newHost&&this.newDatabase&&this.newUsername;return i`
+ */var n=function(t,e,i,r){for(var s,o=arguments.length,a=o<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r,n=t.length-1;n>=0;n--)(s=t[n])&&(a=(o<3?s(a):o>3?s(e,i,a):s(e,i))||a);return o>3&&a&&Object.defineProperty(e,i,a),a};let l=class extends e{constructor(){super(...arguments),this.dbType="postgresql",this.value="",this.placeholder="Select database connection...",this.entries=[],this.loading=!1,this.testResult=null,this.showCreateForm=!1,this.creating=!1,this.testing=!1,this.error="",this.newConnectionName="",this.newHost="localhost",this.newPort=5432,this.newDatabase="",this.newUsername="",this.newPassword="",this.newSsl=!1}connectedCallback(){super.connectedCallback(),this.updateDefaultPort()}updated(t){t.has("dbType")&&this.updateDefaultPort()}updateDefaultPort(){this.newPort={postgresql:5432,mysql:3306,mongodb:27017,mssql:1433,oracle:1521,sqlite:0}[this.dbType]||5432}handleSelectChange(t){var e;const i=(null===(e=t.detail)||void 0===e?void 0:e.value)||"";this.value=i,this.dispatchEvent(new CustomEvent("value-change",{detail:{value:i},bubbles:!0,composed:!0}))}toggleCreateForm(){this.showCreateForm=!this.showCreateForm,this.showCreateForm||this.resetCreateForm()}resetCreateForm(){this.newConnectionName="",this.newHost="localhost",this.updateDefaultPort(),this.newDatabase="",this.newUsername="",this.newPassword="",this.newSsl=!1,this.error="",this.testing=!1,this.creating=!1}handleTestConnection(){this.testing=!0,this.dispatchEvent(new CustomEvent("test-connection",{detail:{type:this.dbType,host:this.newHost,port:this.newPort,database:this.newDatabase,username:this.newUsername,password:this.newPassword,ssl:this.newSsl},bubbles:!0,composed:!0}))}notifyTestResult(t){this.testResult=t,this.testing=!1}handleCreate(){if(!this.newConnectionName||!this.newHost||!this.newDatabase)return;this.creating=!0,this.error="";const t=`database/${this.newConnectionName}`,e={type:this.dbType,host:this.newHost,port:this.newPort,database:this.newDatabase,username:this.newUsername,password:this.newPassword,ssl:this.newSsl};this.dispatchEvent(new CustomEvent("create-entry",{detail:{keyPath:t,value:JSON.stringify(e),scope:this.dbType,isSecret:!0},bubbles:!0,composed:!0}))}notifyCreateSuccess(t){this.value=t,this.showCreateForm=!1,this.resetCreateForm(),this.dispatchEvent(new CustomEvent("value-change",{detail:{value:t},bubbles:!0,composed:!0}))}notifyCreateError(t){this.error=t,this.creating=!1}getDbTypeLabel(){return{postgresql:"PostgreSQL",mysql:"MySQL",mongodb:"MongoDB",mssql:"SQL Server",oracle:"Oracle",sqlite:"SQLite"}[this.dbType]||this.dbType}renderCreateForm(){const t=this.newConnectionName&&this.newHost&&this.newDatabase&&this.newUsername;return i`
       <div class="create-form">
         <div class="create-form-header">
           <span class="create-form-title">Add ${this.getDbTypeLabel()} Connection</span>
@@ -85,9 +85,9 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{property
           <div class="test-result ${this.testResult.success?"success":"error"}">
             ${this.testResult.message}
           </div>
-        `:s}
+        `:r}
 
-        ${this.error?i`<div class="error-message">${this.error}</div>`:s}
+        ${this.error?i`<div class="error-message">${this.error}</div>`:r}
 
         <div class="form-actions">
           <button
@@ -121,6 +121,7 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{property
       </div>
     `}render(){const t=this.entries.filter(t=>t.isSecret).map(t=>({label:t.keyPath.replace("database/",""),value:t.keyPath,icon:"database"}));return i`
       <nr-select
+        part="container"
         .value=${this.value}
         .options=${t}
         placeholder=${this.placeholder}
@@ -128,7 +129,7 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{property
         @nr-change=${this.handleSelectChange}
       >
         <div slot="after-options">
-          ${this.loading?i`<div class="loading">Loading...</div>`:s}
+          ${this.loading?i`<div class="loading">Loading...</div>`:r}
           ${this.showCreateForm?this.renderCreateForm():this.renderAddButton()}
         </div>
       </nr-select>
@@ -305,4 +306,4 @@ import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{property
     .checkbox-field label {
       margin-bottom: 0;
     }
-  `,n([r({type:String})],l.prototype,"dbType",void 0),n([r({type:String})],l.prototype,"value",void 0),n([r({type:String})],l.prototype,"placeholder",void 0),n([r({attribute:!1})],l.prototype,"entries",void 0),n([r({type:Boolean})],l.prototype,"loading",void 0),n([r({attribute:!1})],l.prototype,"testResult",void 0),n([o()],l.prototype,"showCreateForm",void 0),n([o()],l.prototype,"creating",void 0),n([o()],l.prototype,"testing",void 0),n([o()],l.prototype,"error",void 0),n([o()],l.prototype,"newConnectionName",void 0),n([o()],l.prototype,"newHost",void 0),n([o()],l.prototype,"newPort",void 0),n([o()],l.prototype,"newDatabase",void 0),n([o()],l.prototype,"newUsername",void 0),n([o()],l.prototype,"newPassword",void 0),n([o()],l.prototype,"newSsl",void 0),l=n([a("nr-db-connection-select")],l);export{l as NrDbConnectionSelect};
+  `,l.useShadowDom=!0,n([s({type:String})],l.prototype,"dbType",void 0),n([s({type:String})],l.prototype,"value",void 0),n([s({type:String})],l.prototype,"placeholder",void 0),n([s({attribute:!1})],l.prototype,"entries",void 0),n([s({type:Boolean})],l.prototype,"loading",void 0),n([s({attribute:!1})],l.prototype,"testResult",void 0),n([o()],l.prototype,"showCreateForm",void 0),n([o()],l.prototype,"creating",void 0),n([o()],l.prototype,"testing",void 0),n([o()],l.prototype,"error",void 0),n([o()],l.prototype,"newConnectionName",void 0),n([o()],l.prototype,"newHost",void 0),n([o()],l.prototype,"newPort",void 0),n([o()],l.prototype,"newDatabase",void 0),n([o()],l.prototype,"newUsername",void 0),n([o()],l.prototype,"newPassword",void 0),n([o()],l.prototype,"newSsl",void 0),l=n([a("nr-db-connection-select")],l);export{l as NrDbConnectionSelect};

package/dist/src/components/db-connection-select/db-connection-select.component.d.ts

@@ -40,9 +40,12 @@ export interface KvConnectionEntry {
  * @fires value-change - Fired when selection changes
  * @fires create-entry - Fired when user submits the create form
  * @fires test-connection - Fired when user clicks Test Connection
+ *
+ * @csspart container - The root nr-select wrapper
  */
 export declare class NrDbConnectionSelect extends LitElement {
     static styles: import("lit").CSSResult;
+    static useShadowDom: boolean;
     /** Database type/scope to filter KV entries by */
     dbType: DatabaseType;
     /** Currently selected connection path */