@juspay/svelte-ui-components 4.44.0 → 4.44.1

package/dist/DateRangePicker/DateRangePicker.svelte

@@ -2037,11 +2037,25 @@
     border-top: var(--drp-preset-divider-border, 1px solid #e8e8e8);
   }
 
-  /* Cancel button variant via Button's CSS vars */
+  /* The label colour Cancel and Clear fall back to. `inherit` as a var() fallback of a custom
+     property inherits the ancestor's --button-text-color, never the text colour, so an unset
+     token reached Button's white primary label on the white panel. Resolving it here, on the
+     footer, keeps an ancestor's --button-text-color winning (it is read at this element, the
+     buttons' parent) and ends the chain on the secondary button's label rather than on white. */
+  :where(.drp-footer) {
+    --_drp-footer-text-color: var(--button-text-color, var(--button-secondary-text-color, #3a4550));
+  }
+
+  /* Cancel button variant via Button's CSS vars. The label chain restates the secondary label
+     after the footer's resolved colour, so its last literal sits beside a token the dark layer
+     overrides; inside the footer the first link always resolves. */
   :global(.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-text-color: var(
+      --drp-cancel-color,
+      var(--_drp-footer-text-color, var(--button-secondary-text-color, #3a4550))
+    );
     --button-hover-color: var(--drp-cancel-hover-background, #f5f5f5);
   }
 
@@ -2049,14 +2063,17 @@
   :global(.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-text-color: var(
+      --drp-clear-color,
+      var(--_drp-footer-text-color, var(--button-secondary-text-color, #3a4550))
+    );
     --button-hover-color: var(--drp-clear-hover-background, #f5f5f5);
     margin-right: auto;
   }
 
   /* Apply button variant */
   :global(.drp-btn-apply) {
-    --button-color: var(--drp-apply-background, currentColor);
+    --button-color: var(--drp-apply-background, #3a4550);
     --button-border: none;
     --button-text-color: var(--drp-apply-color, #ffffff);
     --button-hover-color: var(--drp-apply-hover-background, #333333);

package/dist-wc/index.js

@@ -26543,7 +26543,7 @@ var TIME_DISPLAY_PATTERN = /^(1[0-2]|0?[1-9]):([0-5][0-9])\s?(AM|PM)$/i, pad = (
 	}), append(e, a);
 }, 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 = {
 	hash: "svelte-gpybdi",
-	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);}"
+	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  /* The label colour Cancel and Clear fall back to. `inherit` as a var() fallback of a custom\n     property inherits the ancestor's --button-text-color, never the text colour, so an unset\n     token reached Button's white primary label on the white panel. Resolving it here, on the\n     footer, keeps an ancestor's --button-text-color winning (it is read at this element, the\n     buttons' parent) and ends the chain on the secondary button's label rather than on white. */:where(.drp-footer.svelte-gpybdi) {--_drp-footer-text-color: var(--button-text-color, var(--button-secondary-text-color, #3a4550));}\n\n  /* Cancel button variant via Button's CSS vars. The label chain restates the secondary label\n     after the footer's resolved colour, so its last literal sits beside a token the dark layer\n     overrides; inside the footer the first link always resolves. */.drp-btn-cancel {--button-color: transparent;--button-border: 1px solid var(--drp-cancel-border-color, #d0d0d0);--button-text-color: var(\n      --drp-cancel-color,\n      var(--_drp-footer-text-color, var(--button-secondary-text-color, #3a4550))\n    );--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(\n      --drp-clear-color,\n      var(--_drp-footer-text-color, var(--button-secondary-text-color, #3a4550))\n    );--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, #3a4550);--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);}"
 };
 function DateRangePicker(e, t) {
 	let n = props_id();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "4.44.0",
+  "version": "4.44.1",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",