@juspay/svelte-ui-components 4.39.0 → 4.40.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -464,10 +464,15 @@
|
|
|
464
464
|
columns the fixed-width cells sat centred inside wider tracks, leaving
|
|
465
465
|
horizontal gaps between days — which broke the range highlight into
|
|
466
466
|
disconnected boxes instead of one continuous pill. The day-name header must
|
|
467
|
-
use the same track sizing so it stays aligned with the day grid below.
|
|
467
|
+
use the same track sizing so it stays aligned with the day grid below.
|
|
468
|
+
|
|
469
|
+
A host that wants the grid to fill a container sets both
|
|
470
|
+
--calendar-grid-columns and --calendar-cell-width: fluid columns with the
|
|
471
|
+
default fixed-width cells bring those gaps back, so the cells must be told
|
|
472
|
+
to fill their tracks too. */
|
|
468
473
|
.day-names {
|
|
469
474
|
display: grid;
|
|
470
|
-
grid-template-columns: repeat(7, var(--calendar-cell-size, 36px));
|
|
475
|
+
grid-template-columns: var(--calendar-grid-columns, repeat(7, var(--calendar-cell-size, 36px)));
|
|
471
476
|
justify-content: center;
|
|
472
477
|
text-align: center;
|
|
473
478
|
}
|
|
@@ -481,7 +486,7 @@
|
|
|
481
486
|
|
|
482
487
|
.grid {
|
|
483
488
|
display: grid;
|
|
484
|
-
grid-template-columns: repeat(7, var(--calendar-cell-size, 36px));
|
|
489
|
+
grid-template-columns: var(--calendar-grid-columns, repeat(7, var(--calendar-cell-size, 36px)));
|
|
485
490
|
justify-content: center;
|
|
486
491
|
row-gap: 2px;
|
|
487
492
|
}
|
|
@@ -490,7 +495,7 @@
|
|
|
490
495
|
display: flex;
|
|
491
496
|
align-items: center;
|
|
492
497
|
justify-content: center;
|
|
493
|
-
width: var(--calendar-cell-size, 36px);
|
|
498
|
+
width: var(--calendar-cell-width, var(--calendar-cell-size, 36px));
|
|
494
499
|
height: var(--calendar-cell-size, 36px);
|
|
495
500
|
font-family: inherit;
|
|
496
501
|
font-size: var(--calendar-cell-font-size, 14px);
|
package/dist-wc/index.js
CHANGED
|
@@ -5647,7 +5647,7 @@ var inited$1 = !1, SvelteDate = class e extends Date {
|
|
|
5647
5647
|
}
|
|
5648
5648
|
}, chevron_left_default = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10 12L6 8L10 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n", chevron_right_default = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M6 4L10 8L6 12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n", root$104 = /* @__PURE__ */ from_html("<div class=\"day-name svelte-kboul8\"> </div>"), root_1$92 = /* @__PURE__ */ from_html("<button type=\"button\"> </button>"), root_2$72 = /* @__PURE__ */ from_html("<span class=\"cell outside-month svelte-kboul8\"> </span>"), root_3$64 = /* @__PURE__ */ from_html("<div role=\"application\" aria-label=\"Calendar\"><div class=\"header svelte-kboul8\"><div class=\"nav-button nav-prev svelte-kboul8\"><!></div> <span class=\"header-label svelte-kboul8\"> </span> <div class=\"nav-button nav-next svelte-kboul8\"><!></div></div> <div class=\"day-names svelte-kboul8\"></div> <div class=\"grid svelte-kboul8\" role=\"grid\"></div></div>"), $$css$191 = {
|
|
5649
5649
|
hash: "svelte-kboul8",
|
|
5650
|
-
code: ".calendar.svelte-kboul8 {font-family:var(--calendar-font-family, inherit);width:var(--calendar-width, 280px);padding:var(--calendar-padding, 16px);background-color:var(--calendar-background, #ffffff);border:var(--calendar-border, 1px solid #e0e0e0);border-radius:var(--calendar-border-radius, var(--radius, 4px));box-shadow:var(--calendar-box-shadow, none);box-sizing:border-box;user-select:none;}.header.svelte-kboul8 {display:var(--calendar-header-display, flex);align-items:center;justify-content:space-between;margin-bottom:var(--calendar-header-margin-bottom, 12px);}.header-label.svelte-kboul8 {font-size:var(--calendar-header-font-size, 16px);font-weight:var(--calendar-header-font-weight, 600);color:var(--calendar-header-color, #000000);text-transform:capitalize;}.nav-button.svelte-kboul8 {display:flex;align-items:center;justify-content:center;--button-width: var(--calendar-nav-button-size, 32px);--button-height: var(--calendar-nav-button-size, 32px);--button-border: none;--button-color: transparent;--button-border-radius: var(--calendar-nav-button-border-radius, var(--radius, 4px));--button-text-color: var(--calendar-nav-button-color, #666666);--button-padding: 0;--button-hover-color: var(--calendar-nav-button-hover-background, #f0f0f0);}\n\n /* Size the columns to the cell, not 1fr, and centre the whole grid. With 1fr\n columns the fixed-width cells sat centred inside wider tracks, leaving\n horizontal gaps between days — which broke the range highlight into\n disconnected boxes instead of one continuous pill. The day-name header must\n use the same track sizing so it stays aligned with the day grid below. */.day-names.svelte-kboul8 {display:grid;grid-template-columns:repeat(7, var(--calendar-cell-size, 36px));justify-content:center;text-align:center;}.day-name.svelte-kboul8 {font-size:var(--calendar-day-name-font-size, 12px);font-weight:var(--calendar-day-name-font-weight, 600);color:var(--calendar-day-name-color, #595959);padding:var(--calendar-day-name-padding, 4px 0);}.grid.svelte-kboul8 {display:grid;grid-template-columns:repeat(7, var(--calendar-cell-size, 36px));justify-content:center;row-gap:2px;}.cell.svelte-kboul8 {display:flex;align-items:center;justify-content:center;width:var(--calendar-cell-size, 36px);height:var(--calendar-cell-size, 36px);font-family:inherit;font-size:var(--calendar-cell-font-size, 14px);border-radius:var(--calendar-cell-border-radius, 50%);color:var(--calendar-cell-color, #000000);border:none;background:none;cursor:pointer;padding:0;outline:none;}.cell.svelte-kboul8:hover:not(.disabled, .outside-month, .selected, .range-start, .range-end) {background-color:var(--calendar-cell-hover-background, #f0f0f0);}.cell.svelte-kboul8:focus-visible {outline:2px solid var(--calendar-focus-ring-color, #000000);outline-offset:-2px;}.today.svelte-kboul8 {border:var(--calendar-today-border, 1px solid #000000);font-weight:var(--calendar-today-font-weight, 700);}.selected.svelte-kboul8 {background-color:var(--calendar-selected-background, #000000);color:var(--calendar-selected-color, #ffffff);}.range-start.svelte-kboul8 {background-color:var(--calendar-range-start-background, #000000);color:var(--calendar-range-start-color, #ffffff);border-radius:50% 0 0 50%;}.range-end.svelte-kboul8 {background-color:var(--calendar-range-end-background, #000000);color:var(--calendar-range-end-color, #ffffff);border-radius:0 50% 50% 0;}.range-start.range-end.svelte-kboul8 {border-radius:var(--calendar-cell-border-radius, 50%);}.in-range.svelte-kboul8 {background-color:var(--calendar-range-background, #e8e8e8);border-radius:0;}\n\n /* #cccccc (1.61:1 on white) read as blank space, not as a disabled digit --\n disabled controls are contrast-exempt under WCAG 1.4.3, but the demo's own\n disabledDates run (10th-15th) is information the user must be able to read,\n not just infer. #949494 lands near the 3:1 floor WCAG 1.4.11 uses elsewhere\n for \"must stay perceivable\" content, while staying well short of the 4.5:1\n enabled-text weight so disabled still reads as visually recessive. */.disabled.svelte-kboul8 {color:var(--calendar-disabled-color, #949494);cursor:var(--calendar-disabled-cursor, not-allowed);}.outside-month.svelte-kboul8 {color:var(--calendar-outside-month-color, #6b7280);cursor:default;}"
|
|
5650
|
+
code: ".calendar.svelte-kboul8 {font-family:var(--calendar-font-family, inherit);width:var(--calendar-width, 280px);padding:var(--calendar-padding, 16px);background-color:var(--calendar-background, #ffffff);border:var(--calendar-border, 1px solid #e0e0e0);border-radius:var(--calendar-border-radius, var(--radius, 4px));box-shadow:var(--calendar-box-shadow, none);box-sizing:border-box;user-select:none;}.header.svelte-kboul8 {display:var(--calendar-header-display, flex);align-items:center;justify-content:space-between;margin-bottom:var(--calendar-header-margin-bottom, 12px);}.header-label.svelte-kboul8 {font-size:var(--calendar-header-font-size, 16px);font-weight:var(--calendar-header-font-weight, 600);color:var(--calendar-header-color, #000000);text-transform:capitalize;}.nav-button.svelte-kboul8 {display:flex;align-items:center;justify-content:center;--button-width: var(--calendar-nav-button-size, 32px);--button-height: var(--calendar-nav-button-size, 32px);--button-border: none;--button-color: transparent;--button-border-radius: var(--calendar-nav-button-border-radius, var(--radius, 4px));--button-text-color: var(--calendar-nav-button-color, #666666);--button-padding: 0;--button-hover-color: var(--calendar-nav-button-hover-background, #f0f0f0);}\n\n /* Size the columns to the cell, not 1fr, and centre the whole grid. With 1fr\n columns the fixed-width cells sat centred inside wider tracks, leaving\n horizontal gaps between days — which broke the range highlight into\n disconnected boxes instead of one continuous pill. The day-name header must\n use the same track sizing so it stays aligned with the day grid below.\n\n A host that wants the grid to fill a container sets both\n --calendar-grid-columns and --calendar-cell-width: fluid columns with the\n default fixed-width cells bring those gaps back, so the cells must be told\n to fill their tracks too. */.day-names.svelte-kboul8 {display:grid;grid-template-columns:var(--calendar-grid-columns, repeat(7, var(--calendar-cell-size, 36px)));justify-content:center;text-align:center;}.day-name.svelte-kboul8 {font-size:var(--calendar-day-name-font-size, 12px);font-weight:var(--calendar-day-name-font-weight, 600);color:var(--calendar-day-name-color, #595959);padding:var(--calendar-day-name-padding, 4px 0);}.grid.svelte-kboul8 {display:grid;grid-template-columns:var(--calendar-grid-columns, repeat(7, var(--calendar-cell-size, 36px)));justify-content:center;row-gap:2px;}.cell.svelte-kboul8 {display:flex;align-items:center;justify-content:center;width:var(--calendar-cell-width, var(--calendar-cell-size, 36px));height:var(--calendar-cell-size, 36px);font-family:inherit;font-size:var(--calendar-cell-font-size, 14px);border-radius:var(--calendar-cell-border-radius, 50%);color:var(--calendar-cell-color, #000000);border:none;background:none;cursor:pointer;padding:0;outline:none;}.cell.svelte-kboul8:hover:not(.disabled, .outside-month, .selected, .range-start, .range-end) {background-color:var(--calendar-cell-hover-background, #f0f0f0);}.cell.svelte-kboul8:focus-visible {outline:2px solid var(--calendar-focus-ring-color, #000000);outline-offset:-2px;}.today.svelte-kboul8 {border:var(--calendar-today-border, 1px solid #000000);font-weight:var(--calendar-today-font-weight, 700);}.selected.svelte-kboul8 {background-color:var(--calendar-selected-background, #000000);color:var(--calendar-selected-color, #ffffff);}.range-start.svelte-kboul8 {background-color:var(--calendar-range-start-background, #000000);color:var(--calendar-range-start-color, #ffffff);border-radius:50% 0 0 50%;}.range-end.svelte-kboul8 {background-color:var(--calendar-range-end-background, #000000);color:var(--calendar-range-end-color, #ffffff);border-radius:0 50% 50% 0;}.range-start.range-end.svelte-kboul8 {border-radius:var(--calendar-cell-border-radius, 50%);}.in-range.svelte-kboul8 {background-color:var(--calendar-range-background, #e8e8e8);border-radius:0;}\n\n /* #cccccc (1.61:1 on white) read as blank space, not as a disabled digit --\n disabled controls are contrast-exempt under WCAG 1.4.3, but the demo's own\n disabledDates run (10th-15th) is information the user must be able to read,\n not just infer. #949494 lands near the 3:1 floor WCAG 1.4.11 uses elsewhere\n for \"must stay perceivable\" content, while staying well short of the 4.5:1\n enabled-text weight so disabled still reads as visually recessive. */.disabled.svelte-kboul8 {color:var(--calendar-disabled-color, #949494);cursor:var(--calendar-disabled-cursor, not-allowed);}.outside-month.svelte-kboul8 {color:var(--calendar-outside-month-color, #6b7280);cursor:default;}"
|
|
5651
5651
|
};
|
|
5652
5652
|
function Calendar(e, t) {
|
|
5653
5653
|
push(t, !0), append_styles$1(e, $$css$191);
|
|
@@ -26529,7 +26529,7 @@ var TIME_DISPLAY_PATTERN = /^(1[0-2]|0?[1-9]):([0-5][0-9])\s?(AM|PM)$/i, pad = (
|
|
|
26529
26529
|
}), append(e, a);
|
|
26530
26530
|
}, root$37 = /* @__PURE__ */ from_html("<span class=\"drp-field-error svelte-gpybdi\" role=\"alert\"> </span>"), root_1$35 = /* @__PURE__ */ from_html("<span class=\"drp-trigger-label svelte-gpybdi\"> </span> <span class=\"drp-trigger-icon svelte-gpybdi\" aria-hidden=\"true\"><!></span>", 1), root_2$27 = /* @__PURE__ */ from_html("<div class=\"drp-compare-panel-body svelte-gpybdi\"><!></div>"), root_3$25 = /* @__PURE__ */ from_html("<div class=\"drp-compare-panel svelte-gpybdi\" role=\"dialog\" aria-label=\"Compare period picker\" aria-modal=\"true\" tabindex=\"-1\"><!> <div class=\"drp-footer svelte-gpybdi\"><!> <!></div></div>"), root_4$22 = /* @__PURE__ */ from_html("<div class=\"drp-compare-trigger-wrapper svelte-gpybdi\"><!> <!></div>"), root_5$21 = /* @__PURE__ */ from_html("<span class=\"drp-preset-group-label svelte-gpybdi\"> </span>"), root_6$20 = /* @__PURE__ */ from_html("<div class=\"drp-preset-divider svelte-gpybdi\" role=\"separator\" aria-hidden=\"true\"><!></div>"), root_7$18 = /* @__PURE__ */ from_html("<span class=\"drp-preset-check svelte-gpybdi\" aria-hidden=\"true\"></span>"), root_8$17 = /* @__PURE__ */ from_html("<!> <button type=\"button\" role=\"option\"> <!></button>", 1), root_9$13 = /* @__PURE__ */ from_html("<div class=\"drp-sidebar svelte-gpybdi\" role=\"listbox\" aria-label=\"Date presets\"></div>"), root_10$13 = /* @__PURE__ */ from_html("<div class=\"drp-date-time-group svelte-gpybdi\"><div><input type=\"text\" class=\"drp-date-input-value svelte-gpybdi\" maxlength=\"32\" placeholder=\"Start date\" aria-label=\"Start date\"/></div> <div><span class=\"drp-time-input-icon svelte-gpybdi\" aria-hidden=\"true\"></span> <input type=\"text\" class=\"drp-time-field svelte-gpybdi\" maxlength=\"8\" placeholder=\"12:00 AM\" aria-label=\"Start time\"/></div> <!></div> <!> <span class=\"drp-datetime-arrow svelte-gpybdi\" aria-hidden=\"true\"></span> <div class=\"drp-date-time-group svelte-gpybdi\"><div><input type=\"text\" class=\"drp-date-input-value svelte-gpybdi\" maxlength=\"32\" placeholder=\"End date\" aria-label=\"End date\"/></div> <div><span class=\"drp-time-input-icon svelte-gpybdi\" aria-hidden=\"true\"></span> <input type=\"text\" class=\"drp-time-field svelte-gpybdi\" maxlength=\"8\" placeholder=\"11:59 PM\" aria-label=\"End time\"/></div> <!></div> <!>", 1), root_11$12 = /* @__PURE__ */ from_html("<button type=\"button\" aria-label=\"Toggle time selection\"><span class=\"drp-time-toggle-icon svelte-gpybdi\" aria-hidden=\"true\"></span></button>"), root_12$11 = /* @__PURE__ */ from_html("<div><input type=\"text\" class=\"drp-date-input-value svelte-gpybdi\" maxlength=\"32\" placeholder=\"Start date\" aria-label=\"Start date\"/> <!></div> <span class=\"drp-datetime-arrow svelte-gpybdi\" aria-hidden=\"true\"></span> <div><input type=\"text\" class=\"drp-date-input-value svelte-gpybdi\" maxlength=\"32\" placeholder=\"End date\" aria-label=\"End date\"/> <!></div> <!>", 1), root_13$9 = /* @__PURE__ */ from_html("<div class=\"drp-time-input-row svelte-gpybdi\"><div><span class=\"drp-time-input-icon svelte-gpybdi\" aria-hidden=\"true\"></span> <input type=\"text\" class=\"drp-time-field svelte-gpybdi\" maxlength=\"8\" placeholder=\"12:00 AM\" aria-label=\"Start time\"/> <!></div> <span class=\"drp-datetime-arrow svelte-gpybdi\" aria-hidden=\"true\"></span> <div><span class=\"drp-time-input-icon svelte-gpybdi\" aria-hidden=\"true\"></span> <input type=\"text\" class=\"drp-time-field svelte-gpybdi\" maxlength=\"8\" placeholder=\"11:59 PM\" aria-label=\"End time\"/> <!></div></div>"), root_14$8 = /* @__PURE__ */ from_html("<div><div class=\"drp-date-input-row svelte-gpybdi\"><!></div> <!></div>"), root_15$6 = /* @__PURE__ */ from_html("<!> <!>", 1), root_16$5 = /* @__PURE__ */ from_html("<div class=\"drp-dual-header svelte-gpybdi\"><button type=\"button\" class=\"drp-nav-btn svelte-gpybdi\" aria-label=\"Previous months\"><span class=\"drp-nav-chevron drp-nav-chevron-left svelte-gpybdi\" aria-hidden=\"true\"></span></button> <div class=\"drp-dual-month-labels svelte-gpybdi\"><span class=\"drp-month-label svelte-gpybdi\"> </span> <span class=\"drp-month-label svelte-gpybdi\"> </span></div> <button type=\"button\" class=\"drp-nav-btn svelte-gpybdi\" aria-label=\"Next months\"><span class=\"drp-nav-chevron drp-nav-chevron-right svelte-gpybdi\" aria-hidden=\"true\"></span></button></div> <div class=\"drp-months-row svelte-gpybdi\"><!></div>", 1), root_17$5 = /* @__PURE__ */ from_html("<div class=\"drp-time-row svelte-gpybdi\"><!></div>"), root_18$4 = /* @__PURE__ */ from_html("<div class=\"drp-compare-section svelte-gpybdi\"><!></div>"), root_19$4 = /* @__PURE__ */ from_html("<div role=\"dialog\" aria-label=\"Date range picker\" aria-modal=\"true\" tabindex=\"-1\"><div class=\"drp-panel-inner svelte-gpybdi\"><!> <div class=\"drp-calendars svelte-gpybdi\"><!> <!> <!> <!></div></div> <div class=\"drp-footer svelte-gpybdi\"><!> <!> <!></div></div>"), root_20$2 = /* @__PURE__ */ from_html("<div><div class=\"drp-trigger-wrapper svelte-gpybdi\"><!></div> <!> <!></div>"), $$css$78 = {
|
|
26531
26531
|
hash: "svelte-gpybdi",
|
|
26532
|
-
code: ".drp-field-error.svelte-gpybdi {display:block;color:var(--drp-field-error-color, #b3261e);font-size:var(--drp-field-error-font-size, 11px);line-height:var(--drp-field-error-line-height, 1.4);margin-top:var(--drp-field-error-margin-top, 2px);}.drp-root.svelte-gpybdi {position:relative;display:inline-block;}\n\n /* ── Trigger wrapper ── */.drp-trigger-wrapper.svelte-gpybdi {display:inline-block;}\n\n /* Bridge drp-trigger CSS vars to Button CSS vars on the wrapper */.drp-trigger-wrapper.svelte-gpybdi {--button-color: var(--drp-trigger-background, inherit);--button-border: var(--drp-trigger-border, 1px solid currentColor);--button-border-radius: var(--drp-trigger-border-radius, var(--radius, 4px));--button-text-color: var(--drp-trigger-color, inherit);--button-padding: var(--drp-trigger-padding, 8px 12px);--button-min-width: var(--drp-trigger-min-width, 200px);--button-gap: var(--drp-trigger-gap, 8px);--button-hover-border: var(\n --drp-trigger-hover-border,\n var(--drp-trigger-border, 1px solid currentColor)\n );}.drp-trigger-wrapper .drp-trigger {display:inline-flex;align-items:center;gap:var(--drp-trigger-gap, 8px);white-space:nowrap;min-width:var(--drp-trigger-min-width, 200px);}.drp-trigger-wrapper .drp-trigger-open {border-color:var(--drp-trigger-open-border-color, #000000);box-shadow:var(--drp-trigger-open-shadow, 0 0 0 2px rgba(0, 0, 0, 0.1));}.drp-trigger-label.svelte-gpybdi {flex:1;text-align:left;}.drp-trigger-icon.svelte-gpybdi {display:inline-flex;align-items:center;color:var(--drp-trigger-icon-color, inherit);flex-shrink:0;}\n\n /* ── Panel ── */.drp-panel.svelte-gpybdi {position:absolute;top:calc(100% + var(--drp-panel-offset, 6px));z-index:var(--drp-panel-z-index, 1000);background:var(--drp-panel-background, #ffffff);border:var(--drp-panel-border, 1px solid #e0e0e0);border-radius:var(--drp-panel-border-radius, var(--radius, 4px));box-shadow:var(--drp-panel-shadow, 0 8px 24px rgba(0, 0, 0, 0.12));display:flex;flex-direction:column;min-width:var(--drp-panel-min-width, 320px);max-width:var(--drp-panel-max-width, 760px);max-height:var(--drp-panel-max-height, calc(100dvh - 80px));overflow:hidden;\n /* A host may disable pointer events on an ancestor (a collapsing sidebar, say) and\n an open aria-modal panel must stay usable, as Modal's content does. */pointer-events:auto;}\n\n /* Set only when the panel would not fit below the trigger — see positionPanel(). */.drp-panel-above.svelte-gpybdi {top:auto;bottom:calc(100% + var(--drp-panel-offset, 6px));}.drp-panel-align-left.svelte-gpybdi {left:0;right:auto;}.drp-panel-align-right.svelte-gpybdi {right:0;left:auto;}\n\n /* Opt-in sheet (responsiveLayout): confine the panel to the viewport instead of the\n trigger. The insets are tokens because the free area differs per host (a fixed\n sidebar, an embedding shell, safe-area insets); the defaults suit a bare page. */.drp-panel.drp-panel-sheet.svelte-gpybdi {position:fixed;top:var(--drp-sheet-top, auto);right:var(--drp-sheet-right, 16px);bottom:var(--drp-sheet-bottom, 16px);left:var(--drp-sheet-left, 16px);z-index:var(--drp-sheet-z-index, var(--drp-panel-z-index, 1000));width:auto;min-width:0;max-width:var(--drp-sheet-max-width, 48rem);max-height:var(--drp-sheet-max-height, calc(100dvh - 2rem));margin-inline:auto;}.drp-panel-inner.svelte-gpybdi {display:flex;flex-direction:row;flex:1;min-height:0;overflow-y:auto;}\n\n /* ── Presets above the calendars (presetsPosition=\"top\", and every sheet) ── */.drp-panel-presets-top.svelte-gpybdi .drp-panel-inner:where(.svelte-gpybdi) {flex-direction:column;}.drp-panel-presets-top.svelte-gpybdi .drp-sidebar:where(.svelte-gpybdi) {flex:none;flex-direction:row;flex-wrap:wrap;min-width:0;max-height:none;overflow-y:visible;border-right:0;border-bottom:var(--drp-sidebar-border, 1px solid #e8e8e8);}.drp-panel-presets-top.svelte-gpybdi .drp-preset-item:where(.svelte-gpybdi) {width:auto;}.drp-panel-presets-top.svelte-gpybdi .drp-preset-divider:where(.svelte-gpybdi) {display:none;}.drp-panel-presets-top.svelte-gpybdi .drp-calendars:where(.svelte-gpybdi) {flex:none;}.drp-panel-presets-top.svelte-gpybdi .drp-months-row:where(.svelte-gpybdi) {justify-content:center;}\n\n /* ── Narrow layout (responsiveLayout, <= 688px): one month, stacked inputs ── */.drp-panel-narrow.svelte-gpybdi .drp-calendars:where(.svelte-gpybdi) {padding:var(--drp-calendars-padding-narrow, 16px 8px);}.drp-panel-narrow.svelte-gpybdi .drp-calendar-embedded {max-width:100%;}.drp-panel-narrow.svelte-gpybdi .drp-date-input-row:where(.svelte-gpybdi),\n .drp-panel-narrow.svelte-gpybdi .drp-time-input-row:where(.svelte-gpybdi) {flex-direction:column;align-items:stretch;}.drp-panel-narrow.svelte-gpybdi .drp-datetime-arrow:where(.svelte-gpybdi) {display:none;}\n\n /* ── Sidebar ── */.drp-sidebar.svelte-gpybdi {display:flex;flex-direction:column;padding:var(--drp-sidebar-padding, 12px 8px);border-right:var(--drp-sidebar-border, 1px solid #e8e8e8);min-width:var(--drp-sidebar-min-width, 140px);gap:2px;overflow-y:auto;max-height:var(--drp-sidebar-max-height, 400px);}.drp-preset-item.svelte-gpybdi {display:block;width:100%;text-align:left;padding:var(--drp-preset-padding, 7px 12px);background:none;border:none;border-radius:var(--drp-preset-border-radius, var(--radius, 4px));color:var(--drp-preset-color, inherit);cursor:pointer;white-space:nowrap;transition:background var(--drp-preset-item-transition-duration, var(--motion-duration, 0.12s))\n var(--drp-preset-item-transition-easing, var(--motion-easing, ease));}.drp-preset-item.svelte-gpybdi:hover {background:var(--drp-preset-hover-background, #f5f5f5);}.drp-preset-active.svelte-gpybdi {background:var(--drp-preset-active-background, currentColor);color:var(--drp-preset-active-color, #ffffff);}.drp-preset-active.svelte-gpybdi:hover {background:var(--drp-preset-active-hover-background, #333333);}\n\n /* Opt-in checkmark layout: reserve a trailing slot so the active preset's tick\n sits flush-right while the label stays left. A preset with no tick (or a\n label-only preset) keeps its single flex child at the start, unchanged. */.drp-preset-checkable.svelte-gpybdi {display:flex;align-items:center;justify-content:space-between;gap:var(--drp-preset-check-gap, 8px);}.drp-preset-check.svelte-gpybdi {display:inline-flex;flex-shrink:0;width:var(--drp-preset-check-size, 16px);height:var(--drp-preset-check-size, 16px);color:var(--drp-preset-check-color, inherit);}.drp-preset-check.svelte-gpybdi svg {width:100%;height:100%;}\n\n /* ── Calendar area ── */.drp-calendars.svelte-gpybdi {display:flex;flex-direction:column;padding:var(--drp-calendars-padding, 16px);gap:var(--drp-calendars-gap, 16px);flex:1;}\n\n /* Dual-month shared nav header */.drp-dual-header.svelte-gpybdi {display:flex;align-items:center;justify-content:space-between;gap:8px;}.drp-dual-month-labels.svelte-gpybdi {display:flex;flex:1;justify-content:space-around;}.drp-month-label.svelte-gpybdi {color:var(--drp-month-label-color, inherit);text-transform:capitalize;}.drp-nav-btn.svelte-gpybdi {display:inline-flex;align-items:center;justify-content:center;width:var(--drp-nav-btn-size, 32px);height:var(--drp-nav-btn-size, 32px);background:none;border:none;border-radius:var(--drp-nav-btn-border-radius, var(--radius, 4px));cursor:pointer;color:var(--drp-nav-btn-color, inherit);transition:background var(--drp-nav-btn-transition-duration, var(--motion-duration, 0.12s))\n var(--drp-nav-btn-transition-easing, var(--motion-easing, ease));padding:0;}.drp-nav-btn.svelte-gpybdi:hover {background:var(--drp-nav-btn-hover-background, #f0f0f0);}\n\n /* CSS-only chevrons for the dual-nav */.drp-nav-chevron.svelte-gpybdi {display:inline-block;width:8px;height:8px;border-right:var(--drp-nav-chevron-border, 2px solid currentColor);border-top:var(--drp-nav-chevron-border, 2px solid currentColor);}.drp-nav-chevron-left.svelte-gpybdi {transform:rotate(-135deg);margin-left:2px;}.drp-nav-chevron-right.svelte-gpybdi {transform:rotate(45deg);margin-right:2px;}.drp-months-row.svelte-gpybdi {display:flex;gap:var(--drp-months-gap, 24px);}\n\n /* Embedded calendar: strip outer chrome so only the grid shows */.drp-calendar-embedded {--calendar-border: none;--calendar-box-shadow: none;--calendar-background: transparent;--calendar-padding: 0;}\n\n /* Suppress Calendar's own header in dual-month mode; single mode keeps it for navigation */.drp-months-row .drp-calendar-embedded {--calendar-header-display: none;}\n\n /* ── Time picker slot ── */.drp-time-row.svelte-gpybdi {display:flex;align-items:center;gap:var(--drp-time-row-gap, 16px);padding-top:var(--drp-time-row-padding-top, 8px);border-top:var(--drp-time-divider, 1px solid #e8e8e8);flex-wrap:wrap;}\n\n /* ── Built-in date + time inputs (showDateInputs / showTimeSelection) ── */.drp-datetime-header.svelte-gpybdi {display:flex;flex-direction:column;gap:var(--drp-datetime-gap, 8px);padding-bottom:var(--drp-datetime-padding-bottom, 12px);margin-bottom:var(--drp-datetime-margin-bottom, 4px);border-bottom:var(--drp-datetime-divider, 1px solid #e8e8e8);}.drp-date-input-row.svelte-gpybdi,\n .drp-time-input-row.svelte-gpybdi {display:flex;align-items:center;gap:var(--drp-datetime-row-gap, 12px);}.drp-date-input.svelte-gpybdi {flex:1;min-width:0;padding:var(--drp-date-input-padding, 10px 14px);border:var(--drp-date-input-border, 1px solid #d4d4d4);border-radius:var(--drp-date-input-radius, var(--radius, 4px));background:var(--drp-date-input-background, #ffffff);}.drp-date-input-invalid.svelte-gpybdi {border-color:var(--drp-date-input-invalid-border, #e5484d);}\n\n /* .drp-date-input-value below sets outline: none with nothing standing in\n for it, so the visible replacement lives on the bordered wrapper instead\n -- :focus-within lights up whenever the text input inside is focused.\n class:drp-date-input-invalid sits alongside .drp-date-input on the same\n div (see markup), and :focus-within's extra pseudo-class outweighs that\n single class, so a focused invalid field shows the focus border, not the\n invalid one -- focus location is the more time-sensitive signal. */.drp-date-input.svelte-gpybdi:focus-within {border-color:var(--drp-date-input-focus-border, #2563eb);box-shadow:var(--drp-date-input-focus-shadow, 0 0 0 2px rgba(37, 99, 235, 0.2));}.drp-date-input-value.svelte-gpybdi {display:block;width:100%;min-width:0;padding:0;border:none;outline:none;background:transparent;color:var(--drp-date-input-color, #333333);font-size:var(--drp-date-input-font-size, 13px);font-family:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.drp-date-input-value.svelte-gpybdi::placeholder {color:var(--drp-date-input-placeholder-color, #aaaaaa);}.drp-datetime-arrow.svelte-gpybdi {flex-shrink:0;display:inline-flex;width:var(--drp-datetime-arrow-size, 16px);height:var(--drp-datetime-arrow-size, 16px);color:var(--drp-datetime-arrow-color, #888888);}.drp-datetime-arrow.svelte-gpybdi svg {width:100%;height:100%;}.drp-time-toggle.svelte-gpybdi {flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:var(--drp-time-toggle-size, 40px);height:var(--drp-time-toggle-size, 40px);padding:0;border:var(--drp-time-toggle-border, 1px solid #d4d4d4);border-radius:var(--drp-time-toggle-radius, var(--radius, 4px));background:var(--drp-time-toggle-background, #f6f7f9);color:var(--drp-time-toggle-color, #555555);cursor:pointer;}.drp-time-toggle-active.svelte-gpybdi {border-color:var(--drp-time-toggle-active-border, currentColor);color:var(--drp-time-toggle-active-color, #1b85ff);}.drp-time-toggle-icon.svelte-gpybdi {display:inline-flex;width:var(--drp-time-toggle-icon-size, 16px);height:var(--drp-time-toggle-icon-size, 16px);}.drp-time-toggle-icon.svelte-gpybdi svg {width:100%;height:100%;}.drp-time-input.svelte-gpybdi {position:relative;flex:1;min-width:0;display:flex;align-items:center;border:var(--drp-time-input-border, 1px solid #d4d4d4);border-radius:var(--drp-time-input-radius, var(--radius, 4px));background:var(--drp-time-input-background, #ffffff);}.drp-time-input-invalid.svelte-gpybdi {border-color:var(--drp-time-input-invalid-border, #e5484d);}\n\n /* .drp-time-field below sets outline: none with nothing standing in for it;\n same fix as .drp-date-input:focus-within above, same specificity\n reasoning against .drp-time-input-invalid. */.drp-time-input.svelte-gpybdi:focus-within {border-color:var(--drp-time-input-focus-border, #2563eb);box-shadow:var(--drp-time-input-focus-shadow, 0 0 0 2px rgba(37, 99, 235, 0.2));}.drp-time-input-icon.svelte-gpybdi {display:inline-flex;flex-shrink:0;width:var(--drp-time-input-icon-size, 16px);height:var(--drp-time-input-icon-size, 16px);margin-left:var(--drp-time-input-icon-gap, 12px);color:var(--drp-time-input-icon-color, #888888);pointer-events:none;}.drp-time-input-icon.svelte-gpybdi svg {width:100%;height:100%;}.drp-time-field.svelte-gpybdi {flex:1;min-width:0;width:100%;padding:var(--drp-time-field-padding, 10px 14px 10px 8px);border:none;outline:none;background:transparent;color:var(--drp-time-field-color, #333333);font-size:var(--drp-time-field-font-size, 13px);font-family:inherit;}.drp-time-field.svelte-gpybdi::placeholder {color:var(--drp-time-field-placeholder-color, #aaaaaa);}\n\n /* ── Inline time layout (timeSelectionLayout=\"inline\") ── */\n /* Each date input is paired with its time input on the same row: the date box\n flexes to fill, the time input takes a fixed compact width beside it. */.drp-date-time-group.svelte-gpybdi {display:flex;align-items:center;flex:1;min-width:0;gap:var(--drp-datetime-inline-gap, 8px);}.drp-date-time-group.svelte-gpybdi .drp-date-input:where(.svelte-gpybdi) {flex:1;}.drp-time-input.drp-time-input-inline.svelte-gpybdi {flex:0 0 var(--drp-time-inline-width, 116px);}\n\n /* ── Compare calendar slot ── */.drp-compare-section.svelte-gpybdi {display:flex;flex-direction:column;gap:8px;padding-top:var(--drp-compare-padding-top, 12px);border-top:var(--drp-compare-divider, 1px solid #e8e8e8);}\n\n /* ── Footer ── */.drp-footer.svelte-gpybdi {display:flex;justify-content:flex-end;align-items:center;gap:var(--drp-footer-gap, 8px);padding:var(--drp-footer-padding, 12px 16px);border-top:var(--drp-footer-border, 1px solid #e8e8e8);}\n\n /* ── Preset group dividers ── */.drp-preset-divider.svelte-gpybdi {display:flex;align-items:center;gap:var(--drp-preset-divider-gap, 6px);margin:var(--drp-preset-divider-margin, 4px 0);padding:0 var(--drp-preset-padding-left, 12px);}.drp-preset-divider.svelte-gpybdi::before {content:'';flex:1;height:0;border-top:var(--drp-preset-divider-border, 1px solid #e8e8e8);}.drp-preset-group-label.svelte-gpybdi {color:var(--drp-preset-group-label-color, #999999);white-space:nowrap;flex-shrink:0;}.drp-preset-divider.svelte-gpybdi:has(.drp-preset-group-label:where(.svelte-gpybdi)) {padding-right:var(--drp-preset-padding-right, 12px);}.drp-preset-divider.svelte-gpybdi:has(.drp-preset-group-label:where(.svelte-gpybdi))::before {flex:none;width:var(--drp-preset-divider-leader-width, 8px);}.drp-preset-divider.svelte-gpybdi:has(.drp-preset-group-label:where(.svelte-gpybdi))::after {content:'';flex:1;height:0;border-top:var(--drp-preset-divider-border, 1px solid #e8e8e8);}\n\n /* Cancel button variant via Button's CSS vars */.drp-btn-cancel {--button-color: transparent;--button-border: 1px solid var(--drp-cancel-border-color, #d0d0d0);--button-text-color: var(--drp-cancel-color, inherit);--button-hover-color: var(--drp-cancel-hover-background, #f5f5f5);}\n\n /* Clear button variant (single-mode reset) */.drp-btn-clear {--button-color: transparent;--button-border: 1px solid var(--drp-clear-border-color, #d0d0d0);--button-text-color: var(--drp-clear-color, inherit);--button-hover-color: var(--drp-clear-hover-background, #f5f5f5);margin-right:auto;}\n\n /* Apply button variant */.drp-btn-apply {--button-color: var(--drp-apply-background, currentColor);--button-border: none;--button-text-color: var(--drp-apply-color, #ffffff);--button-hover-color: var(--drp-apply-hover-background, #333333);--disabled-background-color: var(--drp-apply-disabled-background, #cccccc);--disabled-text-color: var(--drp-apply-disabled-color, #888888);}\n\n /* ── Compare standalone trigger ── */.drp-compare-trigger-wrapper.svelte-gpybdi {display:inline-block;position:relative;--button-color: var(--drp-compare-trigger-background, inherit);--button-border: var(--drp-compare-trigger-border, 1px solid currentColor);--button-border-radius: var(--drp-compare-trigger-border-radius, var(--radius, 4px));--button-text-color: var(--drp-compare-trigger-color, inherit);--button-padding: var(--drp-compare-trigger-padding, 8px 12px);--button-min-width: var(--drp-compare-trigger-min-width, 160px);}.drp-compare-trigger-open {border-color:var(--drp-trigger-open-border-color, #000000);box-shadow:var(--drp-trigger-open-shadow, 0 0 0 2px rgba(0, 0, 0, 0.1));}\n\n /* ── Compare standalone panel ── */.drp-compare-panel.svelte-gpybdi {position:absolute;top:calc(100% + var(--drp-panel-offset, 6px));left:var(--drp-compare-panel-left, 0);z-index:var(--drp-panel-z-index, 1000);background:var(--drp-panel-background, #ffffff);border:var(--drp-panel-border, 1px solid #e0e0e0);border-radius:var(--drp-panel-border-radius, var(--radius, 4px));box-shadow:var(--drp-panel-shadow, 0 8px 24px rgba(0, 0, 0, 0.12));display:flex;flex-direction:column;min-width:var(--drp-compare-panel-min-width, 280px);overflow:hidden;pointer-events:auto;}.drp-compare-panel-body.svelte-gpybdi {padding:var(--drp-calendars-padding, 16px);}"
|
|
26532
|
+
code: ".drp-field-error.svelte-gpybdi {display:block;color:var(--drp-field-error-color, #b3261e);font-size:var(--drp-field-error-font-size, 11px);line-height:var(--drp-field-error-line-height, 1.4);margin-top:var(--drp-field-error-margin-top, 2px);}.drp-root.svelte-gpybdi {position:relative;display:var(--drp-root-display, inline-block);}\n\n /* ── Trigger wrapper ── */.drp-trigger-wrapper.svelte-gpybdi {display:inline-block;}\n\n /* Bridge drp-trigger CSS vars to Button CSS vars on the wrapper */.drp-trigger-wrapper.svelte-gpybdi {--button-color: var(--drp-trigger-background, inherit);--button-border: var(--drp-trigger-border, 1px solid currentColor);--button-border-radius: var(--drp-trigger-border-radius, var(--radius, 4px));--button-text-color: var(--drp-trigger-color, inherit);--button-padding: var(--drp-trigger-padding, 8px 12px);--button-min-width: var(--drp-trigger-min-width, 200px);--button-gap: var(--drp-trigger-gap, 8px);--button-hover-border: var(\n --drp-trigger-hover-border,\n var(--drp-trigger-border, 1px solid currentColor)\n );}.drp-trigger-wrapper .drp-trigger {display:inline-flex;align-items:center;gap:var(--drp-trigger-gap, 8px);white-space:nowrap;min-width:var(--drp-trigger-min-width, 200px);}.drp-trigger-wrapper .drp-trigger-open {border-color:var(--drp-trigger-open-border-color, #000000);box-shadow:var(--drp-trigger-open-shadow, 0 0 0 2px rgba(0, 0, 0, 0.1));}.drp-trigger-label.svelte-gpybdi {flex:1;text-align:left;}.drp-trigger-icon.svelte-gpybdi {display:inline-flex;align-items:center;color:var(--drp-trigger-icon-color, inherit);flex-shrink:0;}\n\n /* ── Panel ── */.drp-panel.svelte-gpybdi {position:absolute;top:calc(100% + var(--drp-panel-offset, 6px));z-index:var(--drp-panel-z-index, 1000);background:var(--drp-panel-background, #ffffff);border:var(--drp-panel-border, 1px solid #e0e0e0);border-radius:var(--drp-panel-border-radius, var(--radius, 4px));box-shadow:var(--drp-panel-shadow, 0 8px 24px rgba(0, 0, 0, 0.12));display:flex;flex-direction:column;min-width:var(--drp-panel-min-width, 320px);max-width:var(--drp-panel-max-width, 760px);max-height:var(--drp-panel-max-height, calc(100dvh - 80px));overflow:hidden;\n /* A host may disable pointer events on an ancestor (a collapsing sidebar, say) and\n an open aria-modal panel must stay usable, as Modal's content does. */pointer-events:auto;}\n\n /* Set only when the panel would not fit below the trigger — see positionPanel(). */.drp-panel-above.svelte-gpybdi {top:auto;bottom:calc(100% + var(--drp-panel-offset, 6px));}.drp-panel-align-left.svelte-gpybdi {left:0;right:auto;}.drp-panel-align-right.svelte-gpybdi {right:0;left:auto;}\n\n /* Opt-in sheet (responsiveLayout): confine the panel to the viewport instead of the\n trigger. The insets are tokens because the free area differs per host (a fixed\n sidebar, an embedding shell, safe-area insets); the defaults suit a bare page. */.drp-panel.drp-panel-sheet.svelte-gpybdi {position:fixed;top:var(--drp-sheet-top, auto);right:var(--drp-sheet-right, 16px);bottom:var(--drp-sheet-bottom, 16px);left:var(--drp-sheet-left, 16px);z-index:var(--drp-sheet-z-index, var(--drp-panel-z-index, 1000));width:auto;min-width:0;max-width:var(--drp-sheet-max-width, 48rem);max-height:var(--drp-sheet-max-height, calc(100dvh - 2rem));margin-inline:auto;}.drp-panel-inner.svelte-gpybdi {display:flex;flex-direction:row;flex:1;min-height:0;overflow-y:auto;}\n\n /* ── Presets above the calendars (presetsPosition=\"top\", and every sheet) ── */.drp-panel-presets-top.svelte-gpybdi .drp-panel-inner:where(.svelte-gpybdi) {flex-direction:column;}.drp-panel-presets-top.svelte-gpybdi .drp-sidebar:where(.svelte-gpybdi) {flex:none;flex-direction:row;flex-wrap:wrap;min-width:0;max-height:none;overflow-y:visible;border-right:0;border-bottom:var(--drp-sidebar-border, 1px solid #e8e8e8);}.drp-panel-presets-top.svelte-gpybdi .drp-preset-item:where(.svelte-gpybdi) {width:auto;}.drp-panel-presets-top.svelte-gpybdi .drp-preset-divider:where(.svelte-gpybdi) {display:none;}.drp-panel-presets-top.svelte-gpybdi .drp-calendars:where(.svelte-gpybdi) {flex:none;}.drp-panel-presets-top.svelte-gpybdi .drp-months-row:where(.svelte-gpybdi) {justify-content:center;}\n\n /* ── Narrow layout (responsiveLayout, <= 688px): one month, stacked inputs ── */.drp-panel-narrow.svelte-gpybdi .drp-calendars:where(.svelte-gpybdi) {padding:var(--drp-calendars-padding-narrow, 16px 8px);}.drp-panel-narrow.svelte-gpybdi .drp-calendar-embedded {max-width:100%;}.drp-panel-narrow.svelte-gpybdi .drp-date-input-row:where(.svelte-gpybdi),\n .drp-panel-narrow.svelte-gpybdi .drp-time-input-row:where(.svelte-gpybdi) {flex-direction:column;align-items:stretch;}.drp-panel-narrow.svelte-gpybdi .drp-datetime-arrow:where(.svelte-gpybdi) {display:none;}\n\n /* ── Sidebar ── */.drp-sidebar.svelte-gpybdi {display:flex;flex-direction:column;padding:var(--drp-sidebar-padding, 12px 8px);border-right:var(--drp-sidebar-border, 1px solid #e8e8e8);min-width:var(--drp-sidebar-min-width, 140px);gap:2px;overflow-y:auto;max-height:var(--drp-sidebar-max-height, 400px);}.drp-preset-item.svelte-gpybdi {display:block;width:100%;text-align:left;padding:var(--drp-preset-padding, 7px 12px);background:none;border:none;border-radius:var(--drp-preset-border-radius, var(--radius, 4px));color:var(--drp-preset-color, inherit);cursor:pointer;white-space:nowrap;transition:background var(--drp-preset-item-transition-duration, var(--motion-duration, 0.12s))\n var(--drp-preset-item-transition-easing, var(--motion-easing, ease));}.drp-preset-item.svelte-gpybdi:hover {background:var(--drp-preset-hover-background, #f5f5f5);}.drp-preset-active.svelte-gpybdi {background:var(--drp-preset-active-background, currentColor);color:var(--drp-preset-active-color, #ffffff);}.drp-preset-active.svelte-gpybdi:hover {background:var(--drp-preset-active-hover-background, #333333);}\n\n /* Opt-in checkmark layout: reserve a trailing slot so the active preset's tick\n sits flush-right while the label stays left. A preset with no tick (or a\n label-only preset) keeps its single flex child at the start, unchanged. */.drp-preset-checkable.svelte-gpybdi {display:flex;align-items:center;justify-content:space-between;gap:var(--drp-preset-check-gap, 8px);}.drp-preset-check.svelte-gpybdi {display:inline-flex;flex-shrink:0;width:var(--drp-preset-check-size, 16px);height:var(--drp-preset-check-size, 16px);color:var(--drp-preset-check-color, inherit);}.drp-preset-check.svelte-gpybdi svg {width:100%;height:100%;}\n\n /* ── Calendar area ── */.drp-calendars.svelte-gpybdi {display:flex;flex-direction:column;padding:var(--drp-calendars-padding, 16px);gap:var(--drp-calendars-gap, 16px);flex:1;}\n\n /* Dual-month shared nav header */.drp-dual-header.svelte-gpybdi {display:flex;align-items:center;justify-content:space-between;gap:8px;}.drp-dual-month-labels.svelte-gpybdi {display:flex;flex:1;justify-content:space-around;}.drp-month-label.svelte-gpybdi {color:var(--drp-month-label-color, inherit);text-transform:capitalize;}.drp-nav-btn.svelte-gpybdi {display:inline-flex;align-items:center;justify-content:center;width:var(--drp-nav-btn-size, 32px);height:var(--drp-nav-btn-size, 32px);background:none;border:none;border-radius:var(--drp-nav-btn-border-radius, var(--radius, 4px));cursor:pointer;color:var(--drp-nav-btn-color, inherit);transition:background var(--drp-nav-btn-transition-duration, var(--motion-duration, 0.12s))\n var(--drp-nav-btn-transition-easing, var(--motion-easing, ease));padding:0;}.drp-nav-btn.svelte-gpybdi:hover {background:var(--drp-nav-btn-hover-background, #f0f0f0);}\n\n /* CSS-only chevrons for the dual-nav */.drp-nav-chevron.svelte-gpybdi {display:inline-block;width:8px;height:8px;border-right:var(--drp-nav-chevron-border, 2px solid currentColor);border-top:var(--drp-nav-chevron-border, 2px solid currentColor);}.drp-nav-chevron-left.svelte-gpybdi {transform:rotate(-135deg);margin-left:2px;}.drp-nav-chevron-right.svelte-gpybdi {transform:rotate(45deg);margin-right:2px;}.drp-months-row.svelte-gpybdi {display:flex;gap:var(--drp-months-gap, 24px);}\n\n /* Embedded calendar: strip outer chrome so only the grid shows */.drp-calendar-embedded {--calendar-border: none;--calendar-box-shadow: none;--calendar-background: transparent;--calendar-padding: 0;}\n\n /* Suppress Calendar's own header in dual-month mode; single mode keeps it for navigation */.drp-months-row .drp-calendar-embedded {--calendar-header-display: none;}\n\n /* ── Time picker slot ── */.drp-time-row.svelte-gpybdi {display:flex;align-items:center;gap:var(--drp-time-row-gap, 16px);padding-top:var(--drp-time-row-padding-top, 8px);border-top:var(--drp-time-divider, 1px solid #e8e8e8);flex-wrap:wrap;}\n\n /* ── Built-in date + time inputs (showDateInputs / showTimeSelection) ── */.drp-datetime-header.svelte-gpybdi {display:flex;flex-direction:column;gap:var(--drp-datetime-gap, 8px);padding-bottom:var(--drp-datetime-padding-bottom, 12px);margin-bottom:var(--drp-datetime-margin-bottom, 4px);border-bottom:var(--drp-datetime-divider, 1px solid #e8e8e8);}.drp-date-input-row.svelte-gpybdi,\n .drp-time-input-row.svelte-gpybdi {display:flex;align-items:center;gap:var(--drp-datetime-row-gap, 12px);}.drp-date-input.svelte-gpybdi {flex:1;min-width:0;padding:var(--drp-date-input-padding, 10px 14px);border:var(--drp-date-input-border, 1px solid #d4d4d4);border-radius:var(--drp-date-input-radius, var(--radius, 4px));background:var(--drp-date-input-background, #ffffff);}.drp-date-input-invalid.svelte-gpybdi {border-color:var(--drp-date-input-invalid-border, #e5484d);}\n\n /* .drp-date-input-value below sets outline: none with nothing standing in\n for it, so the visible replacement lives on the bordered wrapper instead\n -- :focus-within lights up whenever the text input inside is focused.\n class:drp-date-input-invalid sits alongside .drp-date-input on the same\n div (see markup), and :focus-within's extra pseudo-class outweighs that\n single class, so a focused invalid field shows the focus border, not the\n invalid one -- focus location is the more time-sensitive signal. */.drp-date-input.svelte-gpybdi:focus-within {border-color:var(--drp-date-input-focus-border, #2563eb);box-shadow:var(--drp-date-input-focus-shadow, 0 0 0 2px rgba(37, 99, 235, 0.2));}.drp-date-input-value.svelte-gpybdi {display:block;width:100%;min-width:0;padding:0;border:none;outline:none;background:transparent;color:var(--drp-date-input-color, #333333);font-size:var(--drp-date-input-font-size, 13px);font-family:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.drp-date-input-value.svelte-gpybdi::placeholder {color:var(--drp-date-input-placeholder-color, #aaaaaa);}.drp-datetime-arrow.svelte-gpybdi {flex-shrink:0;display:inline-flex;width:var(--drp-datetime-arrow-size, 16px);height:var(--drp-datetime-arrow-size, 16px);color:var(--drp-datetime-arrow-color, #888888);}.drp-datetime-arrow.svelte-gpybdi svg {width:100%;height:100%;}.drp-time-toggle.svelte-gpybdi {flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:var(--drp-time-toggle-size, 40px);height:var(--drp-time-toggle-size, 40px);padding:0;border:var(--drp-time-toggle-border, 1px solid #d4d4d4);border-radius:var(--drp-time-toggle-radius, var(--radius, 4px));background:var(--drp-time-toggle-background, #f6f7f9);color:var(--drp-time-toggle-color, #555555);cursor:pointer;}.drp-time-toggle-active.svelte-gpybdi {border-color:var(--drp-time-toggle-active-border, currentColor);color:var(--drp-time-toggle-active-color, #1b85ff);}.drp-time-toggle-icon.svelte-gpybdi {display:inline-flex;width:var(--drp-time-toggle-icon-size, 16px);height:var(--drp-time-toggle-icon-size, 16px);}.drp-time-toggle-icon.svelte-gpybdi svg {width:100%;height:100%;}.drp-time-input.svelte-gpybdi {position:relative;flex:1;min-width:0;display:flex;align-items:center;border:var(--drp-time-input-border, 1px solid #d4d4d4);border-radius:var(--drp-time-input-radius, var(--radius, 4px));background:var(--drp-time-input-background, #ffffff);}.drp-time-input-invalid.svelte-gpybdi {border-color:var(--drp-time-input-invalid-border, #e5484d);}\n\n /* .drp-time-field below sets outline: none with nothing standing in for it;\n same fix as .drp-date-input:focus-within above, same specificity\n reasoning against .drp-time-input-invalid. */.drp-time-input.svelte-gpybdi:focus-within {border-color:var(--drp-time-input-focus-border, #2563eb);box-shadow:var(--drp-time-input-focus-shadow, 0 0 0 2px rgba(37, 99, 235, 0.2));}.drp-time-input-icon.svelte-gpybdi {display:inline-flex;flex-shrink:0;width:var(--drp-time-input-icon-size, 16px);height:var(--drp-time-input-icon-size, 16px);margin-left:var(--drp-time-input-icon-gap, 12px);color:var(--drp-time-input-icon-color, #888888);pointer-events:none;}.drp-time-input-icon.svelte-gpybdi svg {width:100%;height:100%;}.drp-time-field.svelte-gpybdi {flex:1;min-width:0;width:100%;padding:var(--drp-time-field-padding, 10px 14px 10px 8px);border:none;outline:none;background:transparent;color:var(--drp-time-field-color, #333333);font-size:var(--drp-time-field-font-size, 13px);font-family:inherit;}.drp-time-field.svelte-gpybdi::placeholder {color:var(--drp-time-field-placeholder-color, #aaaaaa);}\n\n /* ── Inline time layout (timeSelectionLayout=\"inline\") ── */\n /* Each date input is paired with its time input on the same row: the date box\n flexes to fill, the time input takes a fixed compact width beside it. */.drp-date-time-group.svelte-gpybdi {display:flex;align-items:center;flex:1;min-width:0;gap:var(--drp-datetime-inline-gap, 8px);}.drp-date-time-group.svelte-gpybdi .drp-date-input:where(.svelte-gpybdi) {flex:1;}.drp-time-input.drp-time-input-inline.svelte-gpybdi {flex:0 0 var(--drp-time-inline-width, 116px);}\n\n /* ── Compare calendar slot ── */.drp-compare-section.svelte-gpybdi {display:flex;flex-direction:column;gap:8px;padding-top:var(--drp-compare-padding-top, 12px);border-top:var(--drp-compare-divider, 1px solid #e8e8e8);}\n\n /* ── Footer ── */.drp-footer.svelte-gpybdi {display:flex;justify-content:flex-end;align-items:center;gap:var(--drp-footer-gap, 8px);padding:var(--drp-footer-padding, 12px 16px);border-top:var(--drp-footer-border, 1px solid #e8e8e8);}\n\n /* ── Preset group dividers ── */.drp-preset-divider.svelte-gpybdi {display:flex;align-items:center;gap:var(--drp-preset-divider-gap, 6px);margin:var(--drp-preset-divider-margin, 4px 0);padding:0 var(--drp-preset-padding-left, 12px);}.drp-preset-divider.svelte-gpybdi::before {content:'';flex:1;height:0;border-top:var(--drp-preset-divider-border, 1px solid #e8e8e8);}.drp-preset-group-label.svelte-gpybdi {color:var(--drp-preset-group-label-color, #999999);white-space:nowrap;flex-shrink:0;}.drp-preset-divider.svelte-gpybdi:has(.drp-preset-group-label:where(.svelte-gpybdi)) {padding-right:var(--drp-preset-padding-right, 12px);}.drp-preset-divider.svelte-gpybdi:has(.drp-preset-group-label:where(.svelte-gpybdi))::before {flex:none;width:var(--drp-preset-divider-leader-width, 8px);}.drp-preset-divider.svelte-gpybdi:has(.drp-preset-group-label:where(.svelte-gpybdi))::after {content:'';flex:1;height:0;border-top:var(--drp-preset-divider-border, 1px solid #e8e8e8);}\n\n /* Cancel button variant via Button's CSS vars */.drp-btn-cancel {--button-color: transparent;--button-border: 1px solid var(--drp-cancel-border-color, #d0d0d0);--button-text-color: var(--drp-cancel-color, inherit);--button-hover-color: var(--drp-cancel-hover-background, #f5f5f5);}\n\n /* Clear button variant (single-mode reset) */.drp-btn-clear {--button-color: transparent;--button-border: 1px solid var(--drp-clear-border-color, #d0d0d0);--button-text-color: var(--drp-clear-color, inherit);--button-hover-color: var(--drp-clear-hover-background, #f5f5f5);margin-right:auto;}\n\n /* Apply button variant */.drp-btn-apply {--button-color: var(--drp-apply-background, currentColor);--button-border: none;--button-text-color: var(--drp-apply-color, #ffffff);--button-hover-color: var(--drp-apply-hover-background, #333333);--disabled-background-color: var(--drp-apply-disabled-background, #cccccc);--disabled-text-color: var(--drp-apply-disabled-color, #888888);}\n\n /* ── Compare standalone trigger ── */.drp-compare-trigger-wrapper.svelte-gpybdi {display:inline-block;position:relative;--button-color: var(--drp-compare-trigger-background, inherit);--button-border: var(--drp-compare-trigger-border, 1px solid currentColor);--button-border-radius: var(--drp-compare-trigger-border-radius, var(--radius, 4px));--button-text-color: var(--drp-compare-trigger-color, inherit);--button-padding: var(--drp-compare-trigger-padding, 8px 12px);--button-min-width: var(--drp-compare-trigger-min-width, 160px);}.drp-compare-trigger-open {border-color:var(--drp-trigger-open-border-color, #000000);box-shadow:var(--drp-trigger-open-shadow, 0 0 0 2px rgba(0, 0, 0, 0.1));}\n\n /* ── Compare standalone panel ── */.drp-compare-panel.svelte-gpybdi {position:absolute;top:calc(100% + var(--drp-panel-offset, 6px));left:var(--drp-compare-panel-left, 0);z-index:var(--drp-panel-z-index, 1000);background:var(--drp-panel-background, #ffffff);border:var(--drp-panel-border, 1px solid #e0e0e0);border-radius:var(--drp-panel-border-radius, var(--radius, 4px));box-shadow:var(--drp-panel-shadow, 0 8px 24px rgba(0, 0, 0, 0.12));display:flex;flex-direction:column;min-width:var(--drp-compare-panel-min-width, 280px);overflow:hidden;pointer-events:auto;}.drp-compare-panel-body.svelte-gpybdi {padding:var(--drp-calendars-padding, 16px);}"
|
|
26533
26533
|
};
|
|
26534
26534
|
function DateRangePicker(e, t) {
|
|
26535
26535
|
let n = props_id();
|