mgh-components 2.0.2 → 2.1.1

package/README.md

@@ -2,12 +2,14 @@
 
 Metrolina Greenhouses (MGH) component library for React applications.
 
-This package ships two data grids and a date range picker:
+This package ships two data grids and two date pickers:
 
 - **`MGHGrid`** – a self-contained data grid with **no MUI dependency** (and therefore no
   `@mui/x-data-grid-premium` license). This is the grid to use going forward.
 - **`MGHDateRangePicker`** – a MUI-free port of MUI X Pro's `DateRangePicker` (no
   `@mui/x-date-pickers-pro` license).
+- **`MGHDatePicker`** – a MUI-free port of MUI X's `DatePicker` (single date, with the year /
+  month views behind the header dropdown).
 
 Plus a few helpers built on MUI (`Label`, `ConfirmDialog`, `ExportingDialog`, `Iconify`).
 
@@ -21,7 +23,7 @@ pnpm add mgh-components
 
 ## Peer Dependencies
 
-`MGHGrid` and `MGHDateRangePicker` only need:
+`MGHGrid`, `MGHDateRangePicker` and `MGHDatePicker` only need:
 
 - `react`
 - `react-dom`
@@ -81,6 +83,7 @@ Styles are injected automatically the first time a grid mounts – there is no C
 | Area | Details |
 | --- | --- |
 | Columns | `width`, `minWidth`, `maxWidth`, `flex`, `align`, `headerAlign`, `valueGetter`, `valueFormatter`, `renderCell`, `renderHeader`, `cellClassName`, `headerClassName`, `description` |
+| Column sizing | A column with no `width` / `flex` is as wide as it needs to be to show its whole header (at least 100px); `flex` columns never shrink below their header unless `minWidth` says so. An explicit `width` / `maxWidth` is always honoured – the header then wraps onto as many lines as fit in `columnHeaderHeight` before truncating |
 | Column types | `string`, `number`, `date`, `dateTime`, `boolean`, `singleSelect` (`valueOptions`), `actions` (`getActions` + `MGHGridActionsCellItem`) |
 | Sorting | Click header (multi-sort with **Shift**), `sortModel` / `onSortModelChange`, `sortComparator`, `sortingOrder` |
 | Filtering | Filter panel (per-type operators, AND/OR), quick filter (debounced search), `filterModel` / `onFilterModelChange`, custom `filterOperators`, `getApplyQuickFilterFn` |
@@ -322,6 +325,54 @@ Or globally in your CSS:
 
 ---
 
+## MGHDatePicker (MUI-free)
+
+A port of MUI X's `DatePicker` (desktop variant) for picking a **single date**, with no MUI
+dependency. Values are `Dayjs | null`, so existing `DatePicker<Dayjs>` state works unchanged. It
+shares the text field, popover and stylesheet with `MGHDateRangePicker`, so the two look identical
+side by side and are themed through the same `--mgh-drp-*` variables.
+
+```tsx
+import { useState } from 'react';
+import type { Dayjs } from 'dayjs';
+import { MGHDatePicker, MGH_DATE_PICKER_DEFAULT_SHORTCUTS } from 'mgh-components';
+
+export default function Example() {
+  const [date, setDate] = useState<Dayjs | null>(null);
+
+  return (
+    <MGHDatePicker
+      label="Ship date"
+      value={date}
+      onChange={(value) => setDate(value)}
+      onAccept={(value) => refetch(value)}           // fires once a date is picked / accepted
+      shortcuts={MGH_DATE_PICKER_DEFAULT_SHORTCUTS}  // Today, Yesterday, Tomorrow, Start of Week, Start / End of Month, Reset
+      clearable
+    />
+  );
+}
+```
+
+### Props
+
+| Area | Details |
+| --- | --- |
+| Value | `value` / `defaultValue` / `onChange(value, { validationError, shortcut })`, `onAccept(value)`, `onError(error, value)` |
+| Field | `label`, `format` (`'MM/DD/YYYY'`), `size` (`'small'` \| `'medium'`), `fullWidth`, `clearable`, `placeholder`, `helperText`, `error`, `required`, `disabled`, `readOnly`, `name`, `id`, `inputRef` |
+| Opening | Calendar icon button (like MUI), `openOnClick` to also open from the text, `disableOpenPicker`, controlled `open` / `onOpen` / `onClose`, `placement` |
+| Views | `views` (default `['year', 'day']`, add `'month'` for a month grid), `openTo` (default `'day'`), controlled `view` / `onViewChange`, `yearsPerRow`, `monthsPerRow`. The ▾ next to the month name switches between the day and year views, exactly like MUI |
+| Calendar | `referenceDate`, `showDaysOutsideCurrentMonth`, `fixedWeekNumber`, `dayOfWeekFormatter`, `disableHighlightToday`, `onMonthChange`, `onYearChange` |
+| Validation | `minDate`, `maxDate`, `disablePast`, `disableFuture`, `shouldDisableDate(day)`, `shouldDisableMonth(month)`, `shouldDisableYear(year)`; errors: `invalidDate`, `minDate`, `maxDate`, `disablePast`, `disableFuture`, `shouldDisableDate`, `shouldDisableMonth`, `shouldDisableYear` |
+| Selection | `closeOnSelect` (default `true`, `false` when `actions` contains `'accept'`). Picking a year / month moves to the next view (`'partial'`); picking a day finishes and closes |
+| Layout | `shortcuts` (`{ label, getValue }`, same shape as MUI `slotProps.shortcuts.items`), `actions` (`'clear'`, `'today'`, `'cancel'`, `'accept'`), `showToolbar` (+ `toolbarFormat`, default `'ddd, MMM D'`) |
+| Theming | `themeMode="light" \| "dark"` (inherits from a surrounding `MGHGrid` card when omitted), `themeVars` (any `--mgh-drp-*` variable), `className` / `style`, `popoverClassName` / `popoverStyle`, `localeText` |
+| Keyboard | Type a date directly (strict `format` plus `M/D/YYYY`, `YYYY-MM-DD` fallbacks), **↓** opens the calendar, arrows / Home / End / PageUp / PageDown move between days (or years / months in those views), Enter or Space selects, Escape closes |
+
+`MGHDateCalendar` (the calendar without the field / popover) is exported for inline use, e.g.
+`<MGHDateCalendar value={date} onChange={(v) => setDate(v)} />`.
+
+---
+
 ## Legacy: MGHDataGrid (MUI X Premium)
 
 ```tsx
@@ -339,6 +390,7 @@ import { MGHDataGrid } from 'mgh-components';
 ## Components
 
 - `MGHDateRangePicker` (+ `MGHDateRangeCalendar`, `MGH_DATE_RANGE_DEFAULT_SHORTCUTS`, `MGHDateRangeIcons`, `useMGHDateRangePickerStyles`)
+- `MGHDatePicker` (+ `MGHDateCalendar`, `MGH_DATE_PICKER_DEFAULT_SHORTCUTS`, `MGHDatePickerIcons`, `useMGHDatePickerStyles`)
 - `MGHGrid` (+ `MGHGridDefaultToolbar`, `MGHGridQuickFilter`, `MGHGridExportMenu`, `MGHGridExportMenuItem`,
   `MGHGridActionsCellItem`, `MGHGridNoRowsOverlay`, `MGHGridIcons`, `useMGHGridApiRef`, `useMGHGridApiContext`)
 - `MGHDataGrid`, `MGHGridToolbar`, `DataGridQuickFilter`, `CustomNoRowsOverlay`, `CustomGridToolbarExport` (legacy, MUI)

package/dist/components/MGHDatePicker/MGHDateCalendar.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { MGHDateCalendarProps } from './MGHDatePicker.types';
+/**
+ * Pure-React port of MUI X's `DateCalendar`: a single month with a header whose ▾ button switches
+ * to the year (and optionally month) view, keyboard navigation and min/max/disabled validation.
+ */
+export declare function MGHDateCalendar({ value: valueProp, defaultValue, onChange, referenceDate, views: viewsProp, openTo, view: viewProp, onViewChange, minDate, maxDate, disablePast, disableFuture, shouldDisableDate, shouldDisableMonth, shouldDisableYear, disabled, readOnly, showDaysOutsideCurrentMonth, fixedWeekNumber, dayOfWeekFormatter, disableHighlightToday, yearsPerRow, monthsPerRow, autoFocus, onMonthChange, onYearChange, localeText, themeMode, className, style, }: MGHDateCalendarProps): React.JSX.Element;
+export default MGHDateCalendar;

package/dist/components/MGHDatePicker/MGHDatePicker.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { MGHDatePickerLocaleText, MGHDatePickerProps } from './MGHDatePicker.types';
+export declare const MGH_DATE_PICKER_DEFAULT_LOCALE_TEXT: MGHDatePickerLocaleText;
+/**
+ * MUI-free port of MUI X's `DatePicker` (desktop variant): an outlined text field with a calendar
+ * button that opens a single-month calendar (with the year view behind the ▾ in the header),
+ * optional shortcuts and an action bar. Values are `Dayjs | null`, so existing MUI state works unchanged.
+ * Shares its field, popover and stylesheet with `MGHDateRangePicker`.
+ */
+export declare const MGHDatePicker: React.ForwardRefExoticComponent<MGHDatePickerProps & React.RefAttributes<HTMLDivElement>>;
+export default MGHDatePicker;

package/dist/components/MGHDatePicker/MGHDatePicker.styles.d.ts

@@ -0,0 +1,9 @@
+export declare const MGH_DATE_PICKER_STYLE_ID = "mgh-dp-styles";
+/**
+ * Extra rules for MGHDatePicker. The field, popover, buttons, day grid and the `--mgh-drp-*`
+ * colour variables come from the MGHDateRangePicker stylesheet, which is injected alongside.
+ * Dimensions follow MUI X's `DateCalendar` (320 × 334, 72 × 36 month / year buttons).
+ */
+export declare const MGH_DATE_PICKER_CSS = "\n[class*=\"mgh-dp-\"], [class*=\"mgh-dp-\"]::before, [class*=\"mgh-dp-\"]::after { box-sizing: border-box; }\n.mgh-dp .mgh-drp-field:not(.mgh-drp-field--full-width) { width: 240px; }\n\n/* ---- calendar ---- */\n.mgh-dp-calendar { display: flex; flex-direction: column; width: 320px; min-height: 334px; max-width: 100%; overflow: hidden; }\n.mgh-dp-header { display: flex; align-items: center; min-height: 40px; max-height: 40px; margin: 12px 0 8px; padding: 0 12px 0 24px; }\n.mgh-dp-header-label-wrap { display: flex; align-items: center; overflow: hidden; margin-right: auto; cursor: pointer; border-radius: 4px; }\n.mgh-dp-header-label-wrap--static, .mgh-dp-calendar--disabled .mgh-dp-header-label-wrap { cursor: default; }\n.mgh-dp-header-label { margin-right: 6px; font-size: 1rem; font-weight: 500; line-height: 1.75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.mgh-dp-header-switch { color: var(--mgh-drp-fg-secondary); }\n.mgh-dp-header-switch .mgh-drp-icon { transition: transform .2s ease; will-change: transform; }\n.mgh-dp-header-switch--open .mgh-drp-icon { transform: rotate(180deg); }\n.mgh-dp-header-nav { display: flex; align-items: center; flex: 0 0 auto; }\n.mgh-dp-header-nav .mgh-drp-btn--icon { color: var(--mgh-drp-fg-secondary); }\n.mgh-dp-header-nav-spacer { width: 24px; flex: 0 0 auto; }\n\n.mgh-dp-view { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }\n.mgh-dp-view--day { padding-bottom: 8px; }\n\n/* ---- month / year grids ---- */\n.mgh-dp-months, .mgh-dp-years { position: relative; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; width: 100%; padding: 0 4px; }\n.mgh-dp-years { overflow-y: auto; max-height: 280px; }\n.mgh-dp-cell { display: flex; align-items: center; justify-content: center; flex-basis: 33.3333%; }\n.mgh-dp-cell--per-row-4 { flex-basis: 25%; }\n.mgh-dp-pill { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 36px; margin: 8px 0; border: 0; border-radius: 18px; background: transparent; color: var(--mgh-drp-fg); font: inherit; font-size: 1rem; font-weight: 400; line-height: 1.75; letter-spacing: .00938em; cursor: pointer; transition: background-color .15s, color .15s; }\n.mgh-dp-years .mgh-dp-pill { margin: 6px 0; }\n.mgh-dp-pill:hover { background: var(--mgh-drp-hover); }\n.mgh-dp-pill:focus-visible { outline: 2px solid var(--mgh-drp-focus); outline-offset: -1px; }\n.mgh-dp-pill--current:not(.mgh-dp-pill--selected) { border: 1px solid var(--mgh-drp-fg-secondary); }\n.mgh-dp-pill--disabled, .mgh-dp-pill--disabled:hover { color: var(--mgh-drp-fg-disabled); background: transparent; cursor: default; }\n.mgh-dp-pill--selected, .mgh-dp-pill--selected:hover { background: var(--mgh-drp-primary); color: var(--mgh-drp-primary-contrast); font-weight: 500; }\n.mgh-dp-pill--selected:focus-visible { outline-offset: 2px; }\n.mgh-dp-calendar--disabled .mgh-dp-pill, .mgh-dp-calendar--read-only .mgh-dp-pill { cursor: default; }\n.mgh-dp-calendar--disabled .mgh-dp-pill { color: var(--mgh-drp-fg-disabled); }\n.mgh-dp-calendar--disabled .mgh-dp-pill--selected { opacity: .6; }\n.mgh-dp-calendar--disabled .mgh-drp-day { color: var(--mgh-drp-fg-disabled); cursor: default; }\n.mgh-dp-calendar--disabled .mgh-drp-day--selected { opacity: .6; }\n.mgh-dp-calendar--read-only .mgh-drp-day { cursor: default; }\n\n/* ---- toolbar (MUI DatePickerToolbar) ---- */\n.mgh-dp-toolbar-date { display: flex; align-items: center; min-height: 40px; font-size: 2.125rem; font-weight: 400; line-height: 1.235; letter-spacing: .00735em; }\n\n@media (max-width: 599.95px) {\n  .mgh-dp-calendar { width: 100%; max-width: 320px; }\n}\n";
+/** Injects the MGHDateRangePicker + MGHDatePicker stylesheets once per document. Safe on the server (no-op). */
+export declare const useMGHDatePickerStyles: () => void;

package/dist/components/MGHDatePicker/MGHDatePicker.types.d.ts

@@ -0,0 +1,140 @@
+import type React from 'react';
+import type { Dayjs } from 'dayjs';
+/** A single date – the same shape as MUI's `PickerValue` for a `DatePicker<Dayjs>`. */
+export type MGHDateValue = Dayjs | null;
+export type MGHDateThemeMode = 'light' | 'dark';
+export type MGHDateView = 'day' | 'month' | 'year';
+/** `'partial'` while more views are pending (e.g. a year was picked, the day is next), `'finish'` on the last one. */
+export type MGHDateSelectionState = 'partial' | 'finish';
+export type MGHDateValidationError = 'invalidDate' | 'minDate' | 'maxDate' | 'disablePast' | 'disableFuture' | 'shouldDisableDate' | 'shouldDisableMonth' | 'shouldDisableYear' | null;
+export type MGHDateAction = 'clear' | 'today' | 'cancel' | 'accept';
+export interface MGHDateShortcut {
+    label: string;
+    /** Return the date to apply (or `null` to clear). `isValid` reports whether a date passes the picker's validation. */
+    getValue: (context: {
+        isValid: (value: MGHDateValue) => boolean;
+    }) => MGHDateValue;
+    id?: string;
+}
+export interface MGHDateChangeContext {
+    validationError: MGHDateValidationError;
+    /** Set when the change came from a shortcut. */
+    shortcut?: MGHDateShortcut;
+}
+export interface MGHDatePickerLocaleText {
+    /** Placeholder shown in the empty field, e.g. `MM/DD/YYYY`. Defaults to the `format`. */
+    datePlaceholder?: string;
+    /** Label of the calendar button. Receives the formatted value (MUI: `openDatePickerDialogue`). */
+    openPicker: (formattedDate: string | null) => string;
+    clear: string;
+    today: string;
+    cancel: string;
+    accept: string;
+    previousMonth: string;
+    nextMonth: string;
+    /** Label of the ▾ button in the calendar header that switches between the day and year views. */
+    calendarViewSwitchingButtonAriaLabel: (currentView: MGHDateView) => string;
+    /** Title shown in the toolbar, e.g. "Select date". */
+    toolbarTitle: string;
+    /** Shown in the toolbar while no date is selected. @default '––' */
+    toolbarPlaceholder: string;
+}
+export interface MGHDateCalendarProps {
+    value?: MGHDateValue;
+    defaultValue?: MGHDateValue;
+    /**
+     * Fires on every selection. `selectionState` is `'finish'` when the last view was completed
+     * (the picker closes on it), `'partial'` after a year / month was picked and the next view opens.
+     */
+    onChange?: (value: MGHDateValue, selectionState: MGHDateSelectionState, view: MGHDateView) => void;
+    /** Date used to position the calendar (and as the base for year / month picks) when nothing is selected. @default today */
+    referenceDate?: Dayjs;
+    /** Available views, in the order they are stepped through. @default ['year', 'day'] */
+    views?: MGHDateView[];
+    /** View opened first. @default 'day' */
+    openTo?: MGHDateView;
+    /** Controlled view. */
+    view?: MGHDateView;
+    onViewChange?: (view: MGHDateView) => void;
+    minDate?: Dayjs | null;
+    maxDate?: Dayjs | null;
+    disablePast?: boolean;
+    disableFuture?: boolean;
+    shouldDisableDate?: (day: Dayjs) => boolean;
+    shouldDisableMonth?: (month: Dayjs) => boolean;
+    shouldDisableYear?: (year: Dayjs) => boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    /** Render the days of the previous / next month in the empty cells. @default false */
+    showDaysOutsideCurrentMonth?: boolean;
+    /** Always render this many week rows (MUI: `fixedWeekNumber`). */
+    fixedWeekNumber?: number;
+    /** Weekday header formatter. @default first letter of the weekday */
+    dayOfWeekFormatter?: (day: Dayjs) => string;
+    /** Do not outline today's date. @default false */
+    disableHighlightToday?: boolean;
+    /** Years per row in the year view. @default 3 */
+    yearsPerRow?: 3 | 4;
+    /** Months per row in the month view. @default 3 */
+    monthsPerRow?: 3 | 4;
+    /** Focus the selected (or current) day when the calendar mounts. */
+    autoFocus?: boolean;
+    /** Called when the visible month changes. */
+    onMonthChange?: (month: Dayjs) => void;
+    /** Called when a year is picked in the year view. */
+    onYearChange?: (year: Dayjs) => void;
+    localeText?: Partial<Pick<MGHDatePickerLocaleText, 'previousMonth' | 'nextMonth' | 'calendarViewSwitchingButtonAriaLabel'>>;
+    themeMode?: MGHDateThemeMode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface MGHDatePickerProps extends Omit<MGHDateCalendarProps, 'onChange' | 'autoFocus' | 'className' | 'style' | 'localeText'> {
+    onChange?: (value: MGHDateValue, context: MGHDateChangeContext) => void;
+    /** Fires when a date is committed (picking a day, the Accept action, a shortcut, Enter / blur in the field). */
+    onAccept?: (value: MGHDateValue) => void;
+    /** Fires when the validation error changes. */
+    onError?: (error: MGHDateValidationError, value: MGHDateValue) => void;
+    open?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
+    label?: React.ReactNode;
+    /** dayjs display / parse format. @default 'MM/DD/YYYY' */
+    format?: string;
+    size?: 'small' | 'medium';
+    fullWidth?: boolean;
+    /** Show a clear (×) button when a value is set. @default false */
+    clearable?: boolean;
+    /** Open the calendar when the text field itself is clicked (MUI only opens from the icon button). @default false */
+    openOnClick?: boolean;
+    /** Hide the calendar icon button. @default false */
+    disableOpenPicker?: boolean;
+    /** Close the popover as soon as a day is picked. @default true (false when `actions` includes 'accept') */
+    closeOnSelect?: boolean;
+    /** Quick dates listed on the left of the calendar (MUI `slotProps.shortcuts.items`). */
+    shortcuts?: MGHDateShortcut[];
+    /** Buttons in the action bar under the calendar (MUI `slotProps.actionBar.actions`). @default [] */
+    actions?: MGHDateAction[];
+    /** Show the "Select date / Wed, Sep 16" toolbar above the calendar. @default false */
+    showToolbar?: boolean;
+    /** dayjs format of the date shown in the toolbar. @default 'ddd, MMM D' */
+    toolbarFormat?: string;
+    localeText?: Partial<MGHDatePickerLocaleText>;
+    name?: string;
+    id?: string;
+    placeholder?: string;
+    required?: boolean;
+    /** Force the error state. Validation errors from the value are shown automatically. */
+    error?: boolean;
+    helperText?: React.ReactNode;
+    autoFocus?: boolean;
+    inputRef?: React.Ref<HTMLInputElement>;
+    themeMode?: MGHDateThemeMode;
+    /** Override any `--mgh-drp-*` CSS variable for this instance (the stylesheet is shared with MGHDateRangePicker). */
+    themeVars?: Record<string, string>;
+    className?: string;
+    style?: React.CSSProperties;
+    popoverClassName?: string;
+    popoverStyle?: React.CSSProperties;
+    /** Placement of the popover relative to the field. @default 'bottom-start' */
+    placement?: 'bottom-start' | 'bottom-end' | 'bottom';
+}

package/dist/components/MGHDatePicker/index.d.ts

@@ -0,0 +1,7 @@
+export { default } from './MGHDatePicker';
+export { MGHDatePicker, MGH_DATE_PICKER_DEFAULT_LOCALE_TEXT } from './MGHDatePicker';
+export { MGHDateCalendar } from './MGHDateCalendar';
+export * from './MGHDatePicker.types';
+export { MGH_DATE_PICKER_CSS, MGH_DATE_PICKER_STYLE_ID, useMGHDatePickerStyles } from './MGHDatePicker.styles';
+export { MGH_DATE_PICKER_DEFAULT_SHORTCUTS, validateDate as mghDateValidate, isDateEqual as mghDateIsEqual, findClosestEnabledDate as mghDateFindClosestEnabled, } from './utils';
+export * as MGHDatePickerIcons from '../MGHDateRangePicker/icons';

package/dist/components/MGHDatePicker/utils.d.ts

@@ -0,0 +1,36 @@
+import dayjs, { Dayjs } from 'dayjs';
+import type { MGHDateShortcut, MGHDateValidationError, MGHDateValue } from './MGHDatePicker.types';
+/** MUI's default calendar bounds; used for the year grid when no `minDate` / `maxDate` is given. */
+export declare const MGH_DATE_PICKER_DEFAULT_MIN_DATE: dayjs.Dayjs;
+export declare const MGH_DATE_PICKER_DEFAULT_MAX_DATE: dayjs.Dayjs;
+export declare const normalizeDate: (value: unknown) => MGHDateValue;
+export declare const isDateEqual: (a: MGHDateValue | undefined, b: MGHDateValue | undefined) => boolean;
+/** `date`'s calendar day with `time`'s time of day (MUI `mergeDateAndTime`). */
+export declare const mergeDateAndTime: (date: Dayjs, time: Dayjs | null | undefined) => dayjs.Dayjs;
+/** `date` moved to `year`, clamping the day (Feb 29 → Feb 28) instead of overflowing into the next month. */
+export declare const setYear: (date: Dayjs, year: number) => dayjs.Dayjs;
+/** `date` moved to `month` (0–11), clamping the day (Jan 31 → Feb 28) instead of overflowing. */
+export declare const setMonth: (date: Dayjs, month: number) => dayjs.Dayjs;
+export interface DateValidationOptions {
+    minDate?: Dayjs | null;
+    maxDate?: Dayjs | null;
+    disablePast?: boolean;
+    disableFuture?: boolean;
+    shouldDisableDate?: (day: Dayjs) => boolean;
+    shouldDisableMonth?: (month: Dayjs) => boolean;
+    shouldDisableYear?: (year: Dayjs) => boolean;
+}
+export declare const validateDate: (value: MGHDateValue, options: DateValidationOptions, now?: Dayjs) => MGHDateValidationError;
+export declare const isDateDisabled: (day: Dayjs, options: DateValidationOptions, now?: Dayjs) => boolean;
+/** A month is disabled when every day in it is out of bounds (MUI `MonthCalendar` semantics). */
+export declare const isMonthDisabled: (month: Dayjs, options: DateValidationOptions, now?: Dayjs) => boolean;
+/** A year is disabled when every day in it is out of bounds (MUI `YearCalendar` semantics). */
+export declare const isYearDisabled: (year: Dayjs, options: DateValidationOptions, now?: Dayjs) => boolean;
+/**
+ * Nearest enabled day to `date`, searching forwards and backwards at the same time within
+ * `minDate` / `maxDate` (MUI `findClosestEnabledDate`). Returns `null` when nothing is enabled.
+ */
+export declare const findClosestEnabledDate: (date: Dayjs, options: DateValidationOptions, now?: Dayjs) => Dayjs | null;
+/** Years listed in the year view. */
+export declare const getYearRange: (minDate?: Dayjs | null, maxDate?: Dayjs | null) => number[];
+export declare const MGH_DATE_PICKER_DEFAULT_SHORTCUTS: MGHDateShortcut[];

package/dist/components/MGHDateRangePicker/MGHDateRangePicker.styles.d.ts

@@ -4,6 +4,6 @@ export declare const MGH_DATE_RANGE_PICKER_STYLE_ID = "mgh-drp-styles";
  * Colours are CSS variables (`--mgh-drp-*`). When the picker is rendered inside an MGHGrid card
  * it inherits the grid palette (`--mgh-grid-*`) automatically.
  */
-export declare const MGH_DATE_RANGE_PICKER_CSS = "\n.mgh-drp, .mgh-drp-popover, .mgh-drp-calendars {\n  --mgh-drp-font-family: var(--mgh-grid-font-family, inherit);\n  --mgh-drp-font-size: var(--mgh-grid-font-size, 14px);\n  --mgh-drp-paper: var(--mgh-grid-paper, #ffffff);\n  --mgh-drp-fg: var(--mgh-grid-fg, rgba(0, 0, 0, 0.87));\n  --mgh-drp-fg-secondary: var(--mgh-grid-fg-secondary, rgba(0, 0, 0, 0.6));\n  --mgh-drp-fg-disabled: var(--mgh-grid-fg-disabled, rgba(0, 0, 0, 0.38));\n  --mgh-drp-border: var(--mgh-grid-border, rgba(224, 224, 224, 1));\n  --mgh-drp-input-border: var(--mgh-grid-input-border, rgba(0, 0, 0, 0.23));\n  --mgh-drp-hover: var(--mgh-grid-hover, rgba(0, 0, 0, 0.04));\n  --mgh-drp-primary: var(--mgh-grid-primary, #1976d2);\n  --mgh-drp-primary-contrast: var(--mgh-grid-primary-contrast, #ffffff);\n  --mgh-drp-focus: var(--mgh-grid-focus, #1976d2);\n  --mgh-drp-selected: var(--mgh-grid-selected, rgba(25, 118, 210, 0.12));\n  --mgh-drp-preview: rgba(0, 0, 0, 0.06);\n  --mgh-drp-error: #d32f2f;\n  --mgh-drp-radius: 4px;\n  --mgh-drp-popover-radius: 8px;\n  --mgh-drp-popover-shadow: var(--mgh-grid-popover-shadow, 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12));\n  --mgh-drp-day-size: 36px;\n  --mgh-drp-day-margin: 2px;\n  font-family: var(--mgh-drp-font-family);\n  font-size: var(--mgh-drp-font-size);\n  color: var(--mgh-drp-fg);\n  line-height: 1.5;\n}\n/* Dark values also apply to a calendar nested inside a dark picker / popover, so the calendar's own\n   defaults (declared above for standalone use) never reset the colours back to light. */\n.mgh-drp[data-mgh-theme=\"dark\"], .mgh-drp-popover[data-mgh-theme=\"dark\"], .mgh-drp-calendars[data-mgh-theme=\"dark\"],\n.mgh-drp[data-mgh-theme=\"dark\"] .mgh-drp-calendars, .mgh-drp-popover[data-mgh-theme=\"dark\"] .mgh-drp-calendars {\n  --mgh-drp-paper: #212b36;\n  --mgh-drp-fg: #ffffff;\n  --mgh-drp-fg-secondary: rgba(255, 255, 255, 0.7);\n  --mgh-drp-fg-disabled: rgba(255, 255, 255, 0.5);\n  --mgh-drp-border: rgba(81, 81, 81, 1);\n  --mgh-drp-input-border: rgba(255, 255, 255, 0.23);\n  --mgh-drp-hover: rgba(255, 255, 255, 0.08);\n  --mgh-drp-primary: #90caf9;\n  --mgh-drp-primary-contrast: rgba(0, 0, 0, 0.87);\n  --mgh-drp-focus: #90caf9;\n  --mgh-drp-selected: rgba(144, 202, 249, 0.16);\n  --mgh-drp-preview: rgba(255, 255, 255, 0.08);\n  --mgh-drp-error: #f44336;\n}\n[class*=\"mgh-drp\"], [class*=\"mgh-drp\"]::before, [class*=\"mgh-drp\"]::after { box-sizing: border-box; }\n\n/* ---- root / multi-input layout ---- */\n.mgh-drp { display: inline-flex; flex-direction: column; vertical-align: top; min-width: 0; }\n.mgh-drp--full-width { display: flex; width: 100%; }\n.mgh-drp-fields { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }\n.mgh-drp-fields .mgh-drp-field { flex: 1 1 0; min-width: 0; }\n.mgh-drp-fields-separator { align-self: center; color: var(--mgh-drp-fg-secondary); padding: 0 2px; }\n\n/* ---- outlined text field (MUI TextField look-alike) ---- */\n.mgh-drp-field { position: relative; display: inline-flex; align-items: center; min-width: 0; width: 100%; border-radius: var(--mgh-drp-radius); color: var(--mgh-drp-fg); }\n.mgh-drp-field--medium { height: 56px; }\n.mgh-drp-field--small { height: 40px; }\n.mgh-drp-field:not(.mgh-drp-field--full-width) { width: 260px; }\n.mgh-drp-field--multi:not(.mgh-drp-field--full-width) { width: 170px; }\n.mgh-drp-field--full-width { width: 100%; }\n.mgh-drp-input { flex: 1 1 auto; min-width: 0; width: 100%; height: 100%; margin: 0; border: 0; outline: none; background: transparent; color: inherit; font: inherit; font-size: 1rem; letter-spacing: inherit; padding: 16.5px 14px; }\n.mgh-drp-field--small .mgh-drp-input { padding: 8.5px 14px; }\n.mgh-drp-field--adorned .mgh-drp-input { padding-right: 0; }\n.mgh-drp-input::placeholder { color: var(--mgh-drp-fg-disabled); opacity: 1; }\n.mgh-drp-input::-webkit-calendar-picker-indicator { display: none; }\n.mgh-drp-field--disabled .mgh-drp-input { color: var(--mgh-drp-fg-disabled); -webkit-text-fill-color: var(--mgh-drp-fg-disabled); }\n.mgh-drp-field--disabled { cursor: default; }\n.mgh-drp-field--clickable .mgh-drp-input { cursor: pointer; }\n.mgh-drp-adornment { display: flex; align-items: center; gap: 0; margin-right: 6px; flex: 0 0 auto; color: var(--mgh-drp-fg-secondary); }\n.mgh-drp-field--small .mgh-drp-adornment { margin-right: 4px; }\n\n/* notched outline */\n.mgh-drp-outline { position: absolute; inset: -5px 0 0 0; margin: 0; padding: 0 8px; pointer-events: none; border: 1px solid var(--mgh-drp-input-border); border-radius: inherit; min-width: 0; overflow: hidden; text-align: left; transition: border-color .15s; }\n.mgh-drp-outline legend { float: unset; width: auto; padding: 0; height: 11px; font-size: 0.75em; visibility: hidden; max-width: 0.01px; white-space: nowrap; transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms; overflow: hidden; display: block; line-height: 11px; }\n.mgh-drp-outline legend > span { padding-left: 5px; padding-right: 5px; display: inline-block; opacity: 0; visibility: visible; }\n.mgh-drp-field--shrink .mgh-drp-outline legend { max-width: 100%; transition: max-width 100ms cubic-bezier(0.0, 0, 0.2, 1) 50ms; }\n.mgh-drp-field--no-label .mgh-drp-outline legend { display: none; }\n/* Without a label there is no legend notch, so the fieldset must sit on the field box instead of 5px above it;\n   otherwise the visible border is 5px taller than with a label and the field looks off-centre. */\n.mgh-drp-field--no-label .mgh-drp-outline { inset: 0; }\n.mgh-drp-field:hover:not(.mgh-drp-field--disabled) .mgh-drp-outline { border-color: var(--mgh-drp-fg); }\n.mgh-drp-field--focused .mgh-drp-outline, .mgh-drp-field--focused:hover .mgh-drp-outline { border-color: var(--mgh-drp-focus); border-width: 2px; }\n.mgh-drp-field--error .mgh-drp-outline, .mgh-drp-field--error:hover .mgh-drp-outline { border-color: var(--mgh-drp-error); }\n.mgh-drp-field--disabled .mgh-drp-outline { border-color: var(--mgh-drp-fg-disabled); }\n\n/* floating label */\n.mgh-drp-label { position: absolute; left: 0; top: 0; transform-origin: top left; transform: translate(14px, 16px) scale(1); color: var(--mgh-drp-fg-secondary); font-size: 1rem; line-height: 1.4375em; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 24px); transition: color .15s, transform .15s cubic-bezier(0.0, 0, 0.2, 1), max-width .15s; z-index: 1; }\n.mgh-drp-field--small .mgh-drp-label { transform: translate(14px, 9px) scale(1); }\n.mgh-drp-field--shrink .mgh-drp-label, .mgh-drp-field--small.mgh-drp-field--shrink .mgh-drp-label { transform: translate(14px, -9px) scale(0.75); max-width: calc(133% - 32px); }\n.mgh-drp-field--focused .mgh-drp-label { color: var(--mgh-drp-focus); }\n.mgh-drp-field--error .mgh-drp-label { color: var(--mgh-drp-error); }\n.mgh-drp-field--disabled .mgh-drp-label { color: var(--mgh-drp-fg-disabled); }\n.mgh-drp-label-asterisk { margin-left: 2px; }\n\n.mgh-drp-helper { margin: 3px 14px 0; font-size: 0.75rem; line-height: 1.66; color: var(--mgh-drp-fg-secondary); }\n.mgh-drp-helper--error { color: var(--mgh-drp-error); }\n\n/* ---- buttons ---- */\n.mgh-drp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; margin: 0; background: transparent; color: var(--mgh-drp-fg-secondary); font: inherit; font-size: 0.8125rem; font-weight: 500; line-height: 1.75; letter-spacing: .02em; padding: 4px 8px; border-radius: 4px; cursor: pointer; user-select: none; transition: background-color .15s, color .15s; white-space: nowrap; text-transform: uppercase; }\n.mgh-drp-btn:hover { background: var(--mgh-drp-hover); color: var(--mgh-drp-fg); }\n.mgh-drp-btn:focus-visible { outline: 2px solid var(--mgh-drp-focus); outline-offset: 1px; }\n.mgh-drp-btn:disabled { color: var(--mgh-drp-fg-disabled); cursor: default; background: transparent; }\n.mgh-drp-btn--primary { color: var(--mgh-drp-primary); }\n.mgh-drp-btn--primary:hover { background: var(--mgh-drp-selected); color: var(--mgh-drp-primary); }\n.mgh-drp-btn--icon { padding: 8px; border-radius: 50%; width: 40px; height: 40px; text-transform: none; }\n.mgh-drp-btn--icon.mgh-drp-btn--small { width: 32px; height: 32px; padding: 4px; }\n.mgh-drp-icon { flex: 0 0 auto; }\n\n/* ---- popover ---- */\n.mgh-drp-popover { position: fixed; z-index: 1300; display: flex; flex-direction: column; background: var(--mgh-drp-paper); color: var(--mgh-drp-fg); border-radius: var(--mgh-drp-popover-radius); box-shadow: var(--mgh-drp-popover-shadow); outline: none; max-height: calc(100vh - 16px); max-width: calc(100vw - 16px); overflow: auto; animation: mgh-drp-pop .12s ease-out; }\n@keyframes mgh-drp-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }\n.mgh-drp-layout { display: flex; flex-direction: row; align-items: stretch; }\n.mgh-drp-layout--with-toolbar { flex-direction: column; }\n.mgh-drp-layout-main { display: flex; flex-direction: row; align-items: stretch; }\n.mgh-drp-toolbar { padding: 16px 24px 0; }\n.mgh-drp-toolbar-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--mgh-drp-fg-secondary); margin: 0 0 8px; }\n.mgh-drp-toolbar-range { display: flex; align-items: center; gap: 8px; font-size: 1.5rem; font-weight: 400; line-height: 1.334; }\n.mgh-drp-toolbar-range button { border: 0; background: transparent; padding: 0 2px; font: inherit; color: var(--mgh-drp-fg-secondary); cursor: pointer; border-radius: 4px; }\n.mgh-drp-toolbar-range button.mgh-drp-toolbar-range--active { color: var(--mgh-drp-fg); }\n.mgh-drp-toolbar-range button:hover { background: var(--mgh-drp-hover); }\n\n/* shortcuts (left column) */\n.mgh-drp-shortcuts { list-style: none; margin: 0; padding: 8px 0; min-width: 140px; max-height: 340px; overflow: auto; border-right: 1px solid var(--mgh-drp-border); display: flex; flex-direction: column; gap: 4px; padding-left: 8px; padding-right: 8px; }\n.mgh-drp-shortcut { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--mgh-drp-input-border); background: transparent; color: var(--mgh-drp-fg); font: inherit; font-size: 0.8125rem; cursor: pointer; white-space: nowrap; justify-content: flex-start; transition: background-color .15s; }\n.mgh-drp-shortcut:hover { background: var(--mgh-drp-hover); }\n.mgh-drp-shortcut:focus-visible { outline: 2px solid var(--mgh-drp-focus); outline-offset: 1px; }\n.mgh-drp-shortcut:disabled { color: var(--mgh-drp-fg-disabled); cursor: default; }\n.mgh-drp-shortcut--selected { background: var(--mgh-drp-selected); border-color: var(--mgh-drp-primary); color: var(--mgh-drp-primary); }\n\n/* ---- calendars ---- */\n.mgh-drp-calendars { display: flex; flex-direction: row; align-items: flex-start; }\n.mgh-drp-calendar { display: flex; flex-direction: column; width: calc(7 * (var(--mgh-drp-day-size) + 2 * var(--mgh-drp-day-margin)) + 24px); padding: 0 12px 8px; }\n.mgh-drp-calendar + .mgh-drp-calendar { border-left: 1px solid var(--mgh-drp-border); }\n.mgh-drp-calendar-header { display: flex; align-items: center; justify-content: space-between; min-height: 40px; margin: 12px 0 8px; padding: 0 4px; }\n.mgh-drp-calendar-label { flex: 1 1 auto; text-align: center; font-size: 1rem; font-weight: 500; }\n.mgh-drp-calendar-header .mgh-drp-btn--icon { color: var(--mgh-drp-fg-secondary); }\n.mgh-drp-calendar-nav-spacer { width: 40px; height: 40px; flex: 0 0 auto; }\n.mgh-drp-weekdays, .mgh-drp-week { display: flex; justify-content: center; }\n.mgh-drp-weekday { width: var(--mgh-drp-day-size); height: 40px; margin: 0 var(--mgh-drp-day-margin); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; color: var(--mgh-drp-fg-secondary); font-weight: 400; }\n.mgh-drp-weeks { display: flex; flex-direction: column; min-height: calc(6 * (var(--mgh-drp-day-size) + 2 * var(--mgh-drp-day-margin))); }\n.mgh-drp-week { margin: var(--mgh-drp-day-margin) 0; }\n\n/* day cell: the outer wrapper carries the range highlight, the inner button the day itself */\n.mgh-drp-day-wrap { position: relative; width: calc(var(--mgh-drp-day-size) + 2 * var(--mgh-drp-day-margin)); height: var(--mgh-drp-day-size); display: flex; align-items: center; justify-content: center; }\n.mgh-drp-day-wrap--in-range { background: var(--mgh-drp-selected); }\n.mgh-drp-day-wrap--range-start { border-top-left-radius: 50%; border-bottom-left-radius: 50%; }\n.mgh-drp-day-wrap--range-end { border-top-right-radius: 50%; border-bottom-right-radius: 50%; }\n.mgh-drp-day-wrap--preview { border-top: 1px dashed var(--mgh-drp-fg-secondary); border-bottom: 1px dashed var(--mgh-drp-fg-secondary); }\n.mgh-drp-day-wrap--preview-start { border-left: 1px dashed var(--mgh-drp-fg-secondary); border-top-left-radius: 50%; border-bottom-left-radius: 50%; }\n.mgh-drp-day-wrap--preview-end { border-right: 1px dashed var(--mgh-drp-fg-secondary); border-top-right-radius: 50%; border-bottom-right-radius: 50%; }\n.mgh-drp-day-wrap--first-visible.mgh-drp-day-wrap--in-range:not(.mgh-drp-day-wrap--range-start) { border-top-left-radius: 50%; border-bottom-left-radius: 50%; }\n.mgh-drp-day-wrap--last-visible.mgh-drp-day-wrap--in-range:not(.mgh-drp-day-wrap--range-end) { border-top-right-radius: 50%; border-bottom-right-radius: 50%; }\n.mgh-drp-day-wrap--first-visible.mgh-drp-day-wrap--preview:not(.mgh-drp-day-wrap--preview-start) { border-top-left-radius: 50%; border-bottom-left-radius: 50%; border-left: 1px dashed var(--mgh-drp-fg-secondary); }\n.mgh-drp-day-wrap--last-visible.mgh-drp-day-wrap--preview:not(.mgh-drp-day-wrap--preview-end) { border-top-right-radius: 50%; border-bottom-right-radius: 50%; border-right: 1px dashed var(--mgh-drp-fg-secondary); }\n.mgh-drp-day { width: var(--mgh-drp-day-size); height: var(--mgh-drp-day-size); border-radius: 50%; border: 0; margin: 0; padding: 0; background: transparent; color: var(--mgh-drp-fg); font: inherit; font-size: 0.75rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background-color .15s, color .15s; position: relative; }\n.mgh-drp-day:hover { background: var(--mgh-drp-hover); }\n.mgh-drp-day:focus-visible { outline: 2px solid var(--mgh-drp-focus); outline-offset: -1px; }\n.mgh-drp-day--today:not(.mgh-drp-day--selected) { border: 1px solid var(--mgh-drp-fg-secondary); }\n.mgh-drp-day--outside { color: var(--mgh-drp-fg-secondary); opacity: .6; }\n.mgh-drp-day--hidden { visibility: hidden; pointer-events: none; }\n.mgh-drp-day--disabled, .mgh-drp-day--disabled:hover { color: var(--mgh-drp-fg-disabled); cursor: default; background: transparent; }\n.mgh-drp-day--selected, .mgh-drp-day--selected:hover { background: var(--mgh-drp-primary); color: var(--mgh-drp-primary-contrast); font-weight: 500; }\n.mgh-drp-day--selected:focus-visible { outline-offset: 2px; }\n.mgh-drp-calendar--read-only .mgh-drp-day, .mgh-drp-calendar--disabled .mgh-drp-day { cursor: default; }\n.mgh-drp-calendar--disabled .mgh-drp-day { color: var(--mgh-drp-fg-disabled); }\n.mgh-drp-calendar--disabled .mgh-drp-day--selected { opacity: .6; }\n\n/* ---- action bar ---- */\n.mgh-drp-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 8px; border-top: 1px solid var(--mgh-drp-border); }\n.mgh-drp-actions--spread { justify-content: space-between; }\n.mgh-drp-actions-group { display: flex; gap: 8px; }\n\n@media (max-width: 599.95px) {\n  .mgh-drp-layout-main { flex-direction: column; }\n  .mgh-drp-shortcuts { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--mgh-drp-border); max-height: none; }\n  .mgh-drp-calendars { flex-direction: column; align-items: center; }\n  .mgh-drp-calendar + .mgh-drp-calendar { border-left: 0; border-top: 1px solid var(--mgh-drp-border); }\n}\n";
+export declare const MGH_DATE_RANGE_PICKER_CSS = "\n.mgh-drp, .mgh-drp-popover, .mgh-drp-calendars, .mgh-dp-calendar {\n  --mgh-drp-font-family: var(--mgh-grid-font-family, inherit);\n  --mgh-drp-font-size: var(--mgh-grid-font-size, 14px);\n  --mgh-drp-paper: var(--mgh-grid-paper, #ffffff);\n  --mgh-drp-fg: var(--mgh-grid-fg, rgba(0, 0, 0, 0.87));\n  --mgh-drp-fg-secondary: var(--mgh-grid-fg-secondary, rgba(0, 0, 0, 0.6));\n  --mgh-drp-fg-disabled: var(--mgh-grid-fg-disabled, rgba(0, 0, 0, 0.38));\n  --mgh-drp-border: var(--mgh-grid-border, rgba(224, 224, 224, 1));\n  --mgh-drp-input-border: var(--mgh-grid-input-border, rgba(0, 0, 0, 0.23));\n  --mgh-drp-hover: var(--mgh-grid-hover, rgba(0, 0, 0, 0.04));\n  --mgh-drp-primary: var(--mgh-grid-primary, #1976d2);\n  --mgh-drp-primary-contrast: var(--mgh-grid-primary-contrast, #ffffff);\n  --mgh-drp-focus: var(--mgh-grid-focus, #1976d2);\n  --mgh-drp-selected: var(--mgh-grid-selected, rgba(25, 118, 210, 0.12));\n  --mgh-drp-preview: rgba(0, 0, 0, 0.06);\n  --mgh-drp-error: #d32f2f;\n  --mgh-drp-radius: 4px;\n  --mgh-drp-popover-radius: 8px;\n  --mgh-drp-popover-shadow: var(--mgh-grid-popover-shadow, 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12));\n  --mgh-drp-day-size: 36px;\n  --mgh-drp-day-margin: 2px;\n  font-family: var(--mgh-drp-font-family);\n  font-size: var(--mgh-drp-font-size);\n  color: var(--mgh-drp-fg);\n  line-height: 1.5;\n}\n/* Dark values also apply to a calendar nested inside a dark picker / popover, so the calendar's own\n   defaults (declared above for standalone use) never reset the colours back to light.\n   .mgh-dp-calendar is MGHDatePicker's calendar, which shares this stylesheet. */\n.mgh-drp[data-mgh-theme=\"dark\"], .mgh-drp-popover[data-mgh-theme=\"dark\"], .mgh-drp-calendars[data-mgh-theme=\"dark\"], .mgh-dp-calendar[data-mgh-theme=\"dark\"],\n.mgh-drp[data-mgh-theme=\"dark\"] .mgh-drp-calendars, .mgh-drp-popover[data-mgh-theme=\"dark\"] .mgh-drp-calendars,\n.mgh-drp[data-mgh-theme=\"dark\"] .mgh-dp-calendar, .mgh-drp-popover[data-mgh-theme=\"dark\"] .mgh-dp-calendar {\n  --mgh-drp-paper: #212b36;\n  --mgh-drp-fg: #ffffff;\n  --mgh-drp-fg-secondary: rgba(255, 255, 255, 0.7);\n  --mgh-drp-fg-disabled: rgba(255, 255, 255, 0.5);\n  --mgh-drp-border: rgba(81, 81, 81, 1);\n  --mgh-drp-input-border: rgba(255, 255, 255, 0.23);\n  --mgh-drp-hover: rgba(255, 255, 255, 0.08);\n  --mgh-drp-primary: #90caf9;\n  --mgh-drp-primary-contrast: rgba(0, 0, 0, 0.87);\n  --mgh-drp-focus: #90caf9;\n  --mgh-drp-selected: rgba(144, 202, 249, 0.16);\n  --mgh-drp-preview: rgba(255, 255, 255, 0.08);\n  --mgh-drp-error: #f44336;\n}\n[class*=\"mgh-drp\"], [class*=\"mgh-drp\"]::before, [class*=\"mgh-drp\"]::after { box-sizing: border-box; }\n\n/* ---- root / multi-input layout ---- */\n.mgh-drp { display: inline-flex; flex-direction: column; vertical-align: top; min-width: 0; }\n.mgh-drp--full-width { display: flex; width: 100%; }\n.mgh-drp-fields { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }\n.mgh-drp-fields .mgh-drp-field { flex: 1 1 0; min-width: 0; }\n.mgh-drp-fields-separator { align-self: center; color: var(--mgh-drp-fg-secondary); padding: 0 2px; }\n\n/* ---- outlined text field (MUI TextField look-alike) ---- */\n.mgh-drp-field { position: relative; display: inline-flex; align-items: center; min-width: 0; width: 100%; border-radius: var(--mgh-drp-radius); color: var(--mgh-drp-fg); }\n.mgh-drp-field--medium { height: 56px; }\n.mgh-drp-field--small { height: 40px; }\n.mgh-drp-field:not(.mgh-drp-field--full-width) { width: 260px; }\n.mgh-drp-field--multi:not(.mgh-drp-field--full-width) { width: 170px; }\n.mgh-drp-field--full-width { width: 100%; }\n.mgh-drp-input { flex: 1 1 auto; min-width: 0; width: 100%; height: 100%; margin: 0; border: 0; outline: none; background: transparent; color: inherit; font: inherit; font-size: 1rem; letter-spacing: inherit; padding: 16.5px 14px; }\n.mgh-drp-field--small .mgh-drp-input { padding: 8.5px 14px; }\n.mgh-drp-field--adorned .mgh-drp-input { padding-right: 0; }\n.mgh-drp-input::placeholder { color: var(--mgh-drp-fg-disabled); opacity: 1; }\n.mgh-drp-input::-webkit-calendar-picker-indicator { display: none; }\n.mgh-drp-field--disabled .mgh-drp-input { color: var(--mgh-drp-fg-disabled); -webkit-text-fill-color: var(--mgh-drp-fg-disabled); }\n.mgh-drp-field--disabled { cursor: default; }\n.mgh-drp-field--clickable .mgh-drp-input { cursor: pointer; }\n.mgh-drp-adornment { display: flex; align-items: center; gap: 0; margin-right: 6px; flex: 0 0 auto; color: var(--mgh-drp-fg-secondary); }\n.mgh-drp-field--small .mgh-drp-adornment { margin-right: 4px; }\n\n/* notched outline */\n.mgh-drp-outline { position: absolute; inset: -5px 0 0 0; margin: 0; padding: 0 8px; pointer-events: none; border: 1px solid var(--mgh-drp-input-border); border-radius: inherit; min-width: 0; overflow: hidden; text-align: left; transition: border-color .15s; }\n.mgh-drp-outline legend { float: unset; width: auto; padding: 0; height: 11px; font-size: 0.75em; visibility: hidden; max-width: 0.01px; white-space: nowrap; transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms; overflow: hidden; display: block; line-height: 11px; }\n.mgh-drp-outline legend > span { padding-left: 5px; padding-right: 5px; display: inline-block; opacity: 0; visibility: visible; }\n.mgh-drp-field--shrink .mgh-drp-outline legend { max-width: 100%; transition: max-width 100ms cubic-bezier(0.0, 0, 0.2, 1) 50ms; }\n.mgh-drp-field--no-label .mgh-drp-outline legend { display: none; }\n/* Without a label there is no legend notch, so the fieldset must sit on the field box instead of 5px above it;\n   otherwise the visible border is 5px taller than with a label and the field looks off-centre. */\n.mgh-drp-field--no-label .mgh-drp-outline { inset: 0; }\n.mgh-drp-field:hover:not(.mgh-drp-field--disabled) .mgh-drp-outline { border-color: var(--mgh-drp-fg); }\n.mgh-drp-field--focused .mgh-drp-outline, .mgh-drp-field--focused:hover .mgh-drp-outline { border-color: var(--mgh-drp-focus); border-width: 2px; }\n.mgh-drp-field--error .mgh-drp-outline, .mgh-drp-field--error:hover .mgh-drp-outline { border-color: var(--mgh-drp-error); }\n.mgh-drp-field--disabled .mgh-drp-outline { border-color: var(--mgh-drp-fg-disabled); }\n\n/* floating label */\n.mgh-drp-label { position: absolute; left: 0; top: 0; transform-origin: top left; transform: translate(14px, 16px) scale(1); color: var(--mgh-drp-fg-secondary); font-size: 1rem; line-height: 1.4375em; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 24px); transition: color .15s, transform .15s cubic-bezier(0.0, 0, 0.2, 1), max-width .15s; z-index: 1; }\n.mgh-drp-field--small .mgh-drp-label { transform: translate(14px, 9px) scale(1); }\n.mgh-drp-field--shrink .mgh-drp-label, .mgh-drp-field--small.mgh-drp-field--shrink .mgh-drp-label { transform: translate(14px, -9px) scale(0.75); max-width: calc(133% - 32px); }\n.mgh-drp-field--focused .mgh-drp-label { color: var(--mgh-drp-focus); }\n.mgh-drp-field--error .mgh-drp-label { color: var(--mgh-drp-error); }\n.mgh-drp-field--disabled .mgh-drp-label { color: var(--mgh-drp-fg-disabled); }\n.mgh-drp-label-asterisk { margin-left: 2px; }\n\n.mgh-drp-helper { margin: 3px 14px 0; font-size: 0.75rem; line-height: 1.66; color: var(--mgh-drp-fg-secondary); }\n.mgh-drp-helper--error { color: var(--mgh-drp-error); }\n\n/* ---- buttons ---- */\n.mgh-drp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; margin: 0; background: transparent; color: var(--mgh-drp-fg-secondary); font: inherit; font-size: 0.8125rem; font-weight: 500; line-height: 1.75; letter-spacing: .02em; padding: 4px 8px; border-radius: 4px; cursor: pointer; user-select: none; transition: background-color .15s, color .15s; white-space: nowrap; text-transform: uppercase; }\n.mgh-drp-btn:hover { background: var(--mgh-drp-hover); color: var(--mgh-drp-fg); }\n.mgh-drp-btn:focus-visible { outline: 2px solid var(--mgh-drp-focus); outline-offset: 1px; }\n.mgh-drp-btn:disabled { color: var(--mgh-drp-fg-disabled); cursor: default; background: transparent; }\n.mgh-drp-btn--primary { color: var(--mgh-drp-primary); }\n.mgh-drp-btn--primary:hover { background: var(--mgh-drp-selected); color: var(--mgh-drp-primary); }\n.mgh-drp-btn--icon { padding: 8px; border-radius: 50%; width: 40px; height: 40px; text-transform: none; }\n.mgh-drp-btn--icon.mgh-drp-btn--small { width: 32px; height: 32px; padding: 4px; }\n.mgh-drp-icon { flex: 0 0 auto; }\n\n/* ---- popover ---- */\n.mgh-drp-popover { position: fixed; z-index: 1300; display: flex; flex-direction: column; background: var(--mgh-drp-paper); color: var(--mgh-drp-fg); border-radius: var(--mgh-drp-popover-radius); box-shadow: var(--mgh-drp-popover-shadow); outline: none; max-height: calc(100vh - 16px); max-width: calc(100vw - 16px); overflow: auto; animation: mgh-drp-pop .12s ease-out; }\n@keyframes mgh-drp-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }\n.mgh-drp-layout { display: flex; flex-direction: row; align-items: stretch; }\n.mgh-drp-layout--with-toolbar { flex-direction: column; }\n.mgh-drp-layout-main { display: flex; flex-direction: row; align-items: stretch; }\n.mgh-drp-toolbar { padding: 16px 24px 0; }\n.mgh-drp-toolbar-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--mgh-drp-fg-secondary); margin: 0 0 8px; }\n.mgh-drp-toolbar-range { display: flex; align-items: center; gap: 8px; font-size: 1.5rem; font-weight: 400; line-height: 1.334; }\n.mgh-drp-toolbar-range button { border: 0; background: transparent; padding: 0 2px; font: inherit; color: var(--mgh-drp-fg-secondary); cursor: pointer; border-radius: 4px; }\n.mgh-drp-toolbar-range button.mgh-drp-toolbar-range--active { color: var(--mgh-drp-fg); }\n.mgh-drp-toolbar-range button:hover { background: var(--mgh-drp-hover); }\n\n/* shortcuts (left column) */\n.mgh-drp-shortcuts { list-style: none; margin: 0; padding: 8px 0; min-width: 140px; max-height: 340px; overflow: auto; border-right: 1px solid var(--mgh-drp-border); display: flex; flex-direction: column; gap: 4px; padding-left: 8px; padding-right: 8px; }\n.mgh-drp-shortcut { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--mgh-drp-input-border); background: transparent; color: var(--mgh-drp-fg); font: inherit; font-size: 0.8125rem; cursor: pointer; white-space: nowrap; justify-content: flex-start; transition: background-color .15s; }\n.mgh-drp-shortcut:hover { background: var(--mgh-drp-hover); }\n.mgh-drp-shortcut:focus-visible { outline: 2px solid var(--mgh-drp-focus); outline-offset: 1px; }\n.mgh-drp-shortcut:disabled { color: var(--mgh-drp-fg-disabled); cursor: default; }\n.mgh-drp-shortcut--selected { background: var(--mgh-drp-selected); border-color: var(--mgh-drp-primary); color: var(--mgh-drp-primary); }\n\n/* ---- calendars ---- */\n.mgh-drp-calendars { display: flex; flex-direction: row; align-items: flex-start; }\n.mgh-drp-calendar { display: flex; flex-direction: column; width: calc(7 * (var(--mgh-drp-day-size) + 2 * var(--mgh-drp-day-margin)) + 24px); padding: 0 12px 8px; }\n.mgh-drp-calendar + .mgh-drp-calendar { border-left: 1px solid var(--mgh-drp-border); }\n.mgh-drp-calendar-header { display: flex; align-items: center; justify-content: space-between; min-height: 40px; margin: 12px 0 8px; padding: 0 4px; }\n.mgh-drp-calendar-label { flex: 1 1 auto; text-align: center; font-size: 1rem; font-weight: 500; }\n.mgh-drp-calendar-header .mgh-drp-btn--icon { color: var(--mgh-drp-fg-secondary); }\n.mgh-drp-calendar-nav-spacer { width: 40px; height: 40px; flex: 0 0 auto; }\n.mgh-drp-weekdays, .mgh-drp-week { display: flex; justify-content: center; }\n.mgh-drp-weekday { width: var(--mgh-drp-day-size); height: 40px; margin: 0 var(--mgh-drp-day-margin); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; color: var(--mgh-drp-fg-secondary); font-weight: 400; }\n.mgh-drp-weeks { display: flex; flex-direction: column; min-height: calc(6 * (var(--mgh-drp-day-size) + 2 * var(--mgh-drp-day-margin))); }\n.mgh-drp-week { margin: var(--mgh-drp-day-margin) 0; }\n\n/* day cell: the outer wrapper carries the range highlight, the inner button the day itself */\n.mgh-drp-day-wrap { position: relative; width: calc(var(--mgh-drp-day-size) + 2 * var(--mgh-drp-day-margin)); height: var(--mgh-drp-day-size); display: flex; align-items: center; justify-content: center; }\n.mgh-drp-day-wrap--in-range { background: var(--mgh-drp-selected); }\n.mgh-drp-day-wrap--range-start { border-top-left-radius: 50%; border-bottom-left-radius: 50%; }\n.mgh-drp-day-wrap--range-end { border-top-right-radius: 50%; border-bottom-right-radius: 50%; }\n.mgh-drp-day-wrap--preview { border-top: 1px dashed var(--mgh-drp-fg-secondary); border-bottom: 1px dashed var(--mgh-drp-fg-secondary); }\n.mgh-drp-day-wrap--preview-start { border-left: 1px dashed var(--mgh-drp-fg-secondary); border-top-left-radius: 50%; border-bottom-left-radius: 50%; }\n.mgh-drp-day-wrap--preview-end { border-right: 1px dashed var(--mgh-drp-fg-secondary); border-top-right-radius: 50%; border-bottom-right-radius: 50%; }\n.mgh-drp-day-wrap--first-visible.mgh-drp-day-wrap--in-range:not(.mgh-drp-day-wrap--range-start) { border-top-left-radius: 50%; border-bottom-left-radius: 50%; }\n.mgh-drp-day-wrap--last-visible.mgh-drp-day-wrap--in-range:not(.mgh-drp-day-wrap--range-end) { border-top-right-radius: 50%; border-bottom-right-radius: 50%; }\n.mgh-drp-day-wrap--first-visible.mgh-drp-day-wrap--preview:not(.mgh-drp-day-wrap--preview-start) { border-top-left-radius: 50%; border-bottom-left-radius: 50%; border-left: 1px dashed var(--mgh-drp-fg-secondary); }\n.mgh-drp-day-wrap--last-visible.mgh-drp-day-wrap--preview:not(.mgh-drp-day-wrap--preview-end) { border-top-right-radius: 50%; border-bottom-right-radius: 50%; border-right: 1px dashed var(--mgh-drp-fg-secondary); }\n.mgh-drp-day { width: var(--mgh-drp-day-size); height: var(--mgh-drp-day-size); border-radius: 50%; border: 0; margin: 0; padding: 0; background: transparent; color: var(--mgh-drp-fg); font: inherit; font-size: 0.75rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background-color .15s, color .15s; position: relative; }\n.mgh-drp-day:hover { background: var(--mgh-drp-hover); }\n.mgh-drp-day:focus-visible { outline: 2px solid var(--mgh-drp-focus); outline-offset: -1px; }\n.mgh-drp-day--today:not(.mgh-drp-day--selected) { border: 1px solid var(--mgh-drp-fg-secondary); }\n.mgh-drp-day--outside { color: var(--mgh-drp-fg-secondary); opacity: .6; }\n.mgh-drp-day--hidden { visibility: hidden; pointer-events: none; }\n.mgh-drp-day--disabled, .mgh-drp-day--disabled:hover { color: var(--mgh-drp-fg-disabled); cursor: default; background: transparent; }\n.mgh-drp-day--selected, .mgh-drp-day--selected:hover { background: var(--mgh-drp-primary); color: var(--mgh-drp-primary-contrast); font-weight: 500; }\n.mgh-drp-day--selected:focus-visible { outline-offset: 2px; }\n.mgh-drp-calendar--read-only .mgh-drp-day, .mgh-drp-calendar--disabled .mgh-drp-day { cursor: default; }\n.mgh-drp-calendar--disabled .mgh-drp-day { color: var(--mgh-drp-fg-disabled); }\n.mgh-drp-calendar--disabled .mgh-drp-day--selected { opacity: .6; }\n\n/* ---- action bar ---- */\n.mgh-drp-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 8px; border-top: 1px solid var(--mgh-drp-border); }\n.mgh-drp-actions--spread { justify-content: space-between; }\n.mgh-drp-actions-group { display: flex; gap: 8px; }\n\n@media (max-width: 599.95px) {\n  .mgh-drp-layout-main { flex-direction: column; }\n  .mgh-drp-shortcuts { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--mgh-drp-border); max-height: none; }\n  .mgh-drp-calendars { flex-direction: column; align-items: center; }\n  .mgh-drp-calendar + .mgh-drp-calendar { border-left: 0; border-top: 1px solid var(--mgh-drp-border); }\n}\n";
 /** Injects the MGHDateRangePicker stylesheet once per document. Safe on the server (no-op). */
 export declare const useMGHDateRangePickerStyles: () => void;

package/dist/components/MGHDateRangePicker/icons.d.ts

@@ -6,3 +6,5 @@ export declare const DateRangeIcon: React.ForwardRefExoticComponent<Omit<MGHDate
 export declare const ChevronLeftIcon: React.ForwardRefExoticComponent<Omit<MGHDateRangeIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export declare const ChevronRightIcon: React.ForwardRefExoticComponent<Omit<MGHDateRangeIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export declare const CloseIcon: React.ForwardRefExoticComponent<Omit<MGHDateRangeIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export declare const CalendarIcon: React.ForwardRefExoticComponent<Omit<MGHDateRangeIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export declare const ArrowDropDownIcon: React.ForwardRefExoticComponent<Omit<MGHDateRangeIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;

package/dist/components/MGHDateRangePicker/primitives.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+export interface PopoverProps {
+    open: boolean;
+    anchorEl: HTMLElement | null;
+    placement: 'bottom-start' | 'bottom-end' | 'bottom';
+    onDismiss: (reason: 'backdrop' | 'escape') => void;
+    themeMode?: 'light' | 'dark';
+    className?: string;
+    style?: React.CSSProperties;
+    labelledBy?: string;
+    children: React.ReactNode;
+}
+export declare function Popover({ open, anchorEl, placement, onDismiss, themeMode, className, style, labelledBy, children, }: PopoverProps): React.ReactPortal | null;
+export interface TextFieldProps {
+    id: string;
+    label?: React.ReactNode;
+    value: string;
+    placeholder?: string;
+    size: 'small' | 'medium';
+    fullWidth?: boolean;
+    multi?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    error?: boolean;
+    focused?: boolean;
+    clickable?: boolean;
+    name?: string;
+    autoFocus?: boolean;
+    inputRef?: React.Ref<HTMLInputElement>;
+    adornment?: React.ReactNode;
+    ariaLabel?: string;
+    onChange: (text: string) => void;
+    onFocus: () => void;
+    onBlur: () => void;
+    onClick?: () => void;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+}
+export declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/MGHGrid/MGHGrid.styles.d.ts

@@ -5,6 +5,6 @@ export declare const MGH_GRID_STYLE_ID = "mgh-grid-styles";
  * customised globally (by redefining `--mgh-grid-*` on `.mgh-grid-card`) or per instance
  * through the `themeVars` prop.
  */
-export declare const MGH_GRID_CSS = "\n.mgh-grid-card {\n  --mgh-grid-font-family: inherit;\n  --mgh-grid-font-size: 14px;\n  --mgh-grid-radius: 16px;\n  --mgh-grid-inner-radius: 4px;\n  --mgh-grid-paper: #ffffff;\n  --mgh-grid-bg: #ffffff;\n  --mgh-grid-fg: rgba(0, 0, 0, 0.87);\n  --mgh-grid-fg-secondary: rgba(0, 0, 0, 0.6);\n  --mgh-grid-fg-disabled: rgba(0, 0, 0, 0.38);\n  --mgh-grid-border: rgba(224, 224, 224, 1);\n  --mgh-grid-header-bg: #ffffff;\n  --mgh-grid-header-fg: rgba(0, 0, 0, 0.87);\n  --mgh-grid-hover: rgba(0, 0, 0, 0.04);\n  --mgh-grid-hover-strong: rgba(0, 0, 0, 0.08);\n  --mgh-grid-selected: rgba(25, 118, 210, 0.08);\n  --mgh-grid-selected-hover: rgba(25, 118, 210, 0.12);\n  --mgh-grid-primary: #1976d2;\n  --mgh-grid-primary-contrast: #ffffff;\n  --mgh-grid-focus: #1976d2;\n  --mgh-grid-shadow: 0 0 2px rgba(145, 158, 171, 0.2), 0 12px 24px -4px rgba(145, 158, 171, 0.12);\n  --mgh-grid-popover-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);\n  --mgh-grid-overlay: rgba(255, 255, 255, 0.6);\n  --mgh-grid-input-bg: transparent;\n  --mgh-grid-input-border: rgba(0, 0, 0, 0.23);\n  --mgh-grid-pinned-shadow: rgba(0, 0, 0, 0.12);\n  --mgh-grid-group-bg: rgba(0, 0, 0, 0.02);\n  --mgh-grid-footer-bg: rgba(0, 0, 0, 0.02);\n  --mgh-grid-badge: #1976d2;\n  --mgh-grid-scrollbar: rgba(0, 0, 0, 0.3);\n\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  background: var(--mgh-grid-paper);\n  color: var(--mgh-grid-fg);\n  border-radius: var(--mgh-grid-radius);\n  box-shadow: var(--mgh-grid-shadow);\n  font-family: var(--mgh-grid-font-family);\n  font-size: var(--mgh-grid-font-size);\n  line-height: 1.5;\n  overflow: hidden;\n  box-sizing: border-box;\n}\n.mgh-grid-card[data-mgh-theme=\"dark\"] {\n  --mgh-grid-paper: #212b36;\n  --mgh-grid-bg: #212b36;\n  --mgh-grid-fg: #ffffff;\n  --mgh-grid-fg-secondary: rgba(255, 255, 255, 0.7);\n  --mgh-grid-fg-disabled: rgba(255, 255, 255, 0.5);\n  --mgh-grid-border: rgba(81, 81, 81, 1);\n  --mgh-grid-header-bg: #212b36;\n  --mgh-grid-header-fg: #ffffff;\n  --mgh-grid-hover: rgba(255, 255, 255, 0.08);\n  --mgh-grid-hover-strong: rgba(255, 255, 255, 0.16);\n  --mgh-grid-selected: rgba(144, 202, 249, 0.16);\n  --mgh-grid-selected-hover: rgba(144, 202, 249, 0.24);\n  --mgh-grid-primary: #90caf9;\n  --mgh-grid-primary-contrast: rgba(0, 0, 0, 0.87);\n  --mgh-grid-focus: #90caf9;\n  --mgh-grid-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 12px 24px -4px rgba(0, 0, 0, 0.12);\n  --mgh-grid-overlay: rgba(33, 43, 54, 0.6);\n  --mgh-grid-input-border: rgba(255, 255, 255, 0.23);\n  --mgh-grid-pinned-shadow: rgba(0, 0, 0, 0.5);\n  --mgh-grid-group-bg: rgba(255, 255, 255, 0.03);\n  --mgh-grid-footer-bg: rgba(255, 255, 255, 0.03);\n  --mgh-grid-badge: #90caf9;\n  --mgh-grid-scrollbar: rgba(255, 255, 255, 0.3);\n}\n/* Only our own elements get the border-box reset. A blanket descendant reset would leak into\n   consumer content rendered through slots (e.g. MUI TextField inputs rely on content-box). */\n[class*=\"mgh-grid\"], [class*=\"mgh-grid\"]::before, [class*=\"mgh-grid\"]::after { box-sizing: border-box; }\n.mgh-grid-card--plain { box-shadow: none; border-radius: 0; background: transparent; }\n\n/* ---- card header ---- */\n/* Title stays on its row; only the end-content group wraps internally (like the legacy MUI card). */\n.mgh-grid-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 16px 16px 0; flex-wrap: nowrap; }\n.mgh-grid-card-title { flex: 0 0 auto; padding: 8px 24px; margin: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.5556; }\n/* Children are auto-sized so space-between leaves equal gaps title|center|end (like the legacy MUI card).\n   Only the end group shrinks (and wraps internally); the centre content keeps its natural width. */\n.mgh-grid-card-header-center { flex: 0 0 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }\n.mgh-grid-card-header-end { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }\n.mgh-grid-card-header-end:first-child { margin-left: auto; }\n@media (max-width: 599.95px) {\n  .mgh-grid-card-header { flex-wrap: wrap; }\n  .mgh-grid-card-header-end { gap: 8px; }\n}\n\n/* ---- box + root ---- */\n.mgh-grid-box { display: flex; flex-direction: column; flex-grow: 1; min-height: 0; min-width: 0; }\n.mgh-grid {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  min-height: 0;\n  min-width: 0;\n  border: 1px solid var(--mgh-grid-border);\n  border-radius: var(--mgh-grid-inner-radius);\n  background: var(--mgh-grid-bg);\n  color: var(--mgh-grid-fg);\n  outline: none;\n}\n.mgh-grid--auto-height { flex: 0 0 auto; }\n\n/* ---- toolbar ---- */\n.mgh-grid-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 45px; padding: 4px 8px; border-bottom: 1px solid var(--mgh-grid-border); flex-wrap: wrap; }\n.mgh-grid-toolbar-group { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }\n.mgh-grid-toolbar-center { display: flex; align-items: center; flex: 1 1 auto; justify-content: center; }\n\n/* ---- buttons ---- */\n.mgh-grid-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; margin: 0; background: transparent; color: var(--mgh-grid-fg-secondary); font: inherit; font-size: 0.8125rem; font-weight: 500; line-height: 1.75; letter-spacing: .02em; padding: 4px 8px; border-radius: 4px; cursor: pointer; user-select: none; transition: background-color .15s, color .15s; text-transform: none; white-space: nowrap; }\n.mgh-grid-btn:hover { background: var(--mgh-grid-hover); color: var(--mgh-grid-fg); }\n.mgh-grid-btn:focus-visible { outline: 2px solid var(--mgh-grid-focus); outline-offset: 1px; }\n.mgh-grid-btn:disabled { color: var(--mgh-grid-fg-disabled); cursor: default; background: transparent; }\n.mgh-grid-btn--icon { padding: 6px; border-radius: 50%; width: 32px; height: 32px; }\n.mgh-grid-btn--icon.mgh-grid-btn--small { width: 26px; height: 26px; padding: 3px; }\n.mgh-grid-btn--icon.mgh-grid-btn--small .mgh-grid-icon { width: 18px; height: 18px; }\n.mgh-grid-btn--primary { color: var(--mgh-grid-primary); }\n.mgh-grid-btn--primary:hover { background: var(--mgh-grid-selected); color: var(--mgh-grid-primary); }\n.mgh-grid-btn--contained { background: var(--mgh-grid-primary); color: var(--mgh-grid-primary-contrast); }\n.mgh-grid-btn--contained:hover { background: var(--mgh-grid-primary); color: var(--mgh-grid-primary-contrast); filter: brightness(0.92); }\n.mgh-grid-btn--active { color: var(--mgh-grid-primary); }\n\n/* ---- badge ---- */\n.mgh-grid-badge { position: relative; display: inline-flex; }\n.mgh-grid-badge-dot { position: absolute; top: 0; right: 0; min-width: 8px; height: 8px; border-radius: 4px; background: var(--mgh-grid-badge); transform: translate(50%, -50%); }\n.mgh-grid-badge-count { position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--mgh-grid-badge); color: var(--mgh-grid-primary-contrast); font-size: 10px; font-weight: 600; line-height: 16px; text-align: center; transform: translate(50%, -50%); }\n\n/* ---- inputs ---- */\n.mgh-grid-input, .mgh-grid-select { font: inherit; font-size: 0.875rem; color: var(--mgh-grid-fg); background: var(--mgh-grid-input-bg); border: 1px solid var(--mgh-grid-input-border); border-radius: 6px; padding: 6px 10px; height: 36px; min-width: 0; outline: none; transition: border-color .15s, box-shadow .15s; }\n.mgh-grid-input:hover, .mgh-grid-select:hover { border-color: var(--mgh-grid-fg); }\n.mgh-grid-input:focus, .mgh-grid-select:focus { border-color: var(--mgh-grid-focus); box-shadow: 0 0 0 1px var(--mgh-grid-focus); }\n.mgh-grid-input::placeholder { color: var(--mgh-grid-fg-disabled); }\n.mgh-grid-input--small, .mgh-grid-select--small { height: 32px; padding: 4px 8px; font-size: 0.8125rem; }\n.mgh-grid-select { appearance: none; -webkit-appearance: none; padding-right: 28px; background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23888'><path d='M7 10l5 5 5-5z'/></svg>\"); background-repeat: no-repeat; background-position: right 6px center; background-size: 18px; cursor: pointer; }\n.mgh-grid-select option { color: initial; background: initial; }\n.mgh-grid-card[data-mgh-theme=\"dark\"] .mgh-grid-select option, .mgh-grid-popover[data-mgh-theme=\"dark\"] .mgh-grid-select option { color: #fff; background: #212b36; }\n.mgh-grid-select[multiple] { height: auto; min-height: 36px; background-image: none; padding-right: 10px; }\n.mgh-grid-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }\n.mgh-grid-field-label { font-size: 0.75rem; color: var(--mgh-grid-fg-secondary); }\n.mgh-grid-input-adorned { position: relative; display: flex; align-items: center; }\n.mgh-grid-input-adorned .mgh-grid-input { width: 100%; padding-left: 34px; }\n.mgh-grid-input-adorned--clearable .mgh-grid-input { padding-right: 34px; }\n.mgh-grid-input-adornment { position: absolute; left: 10px; display: inline-flex; color: var(--mgh-grid-fg-secondary); pointer-events: none; }\n.mgh-grid-input-adornment--end { left: auto; right: 4px; pointer-events: auto; }\n\n/* ---- checkbox ---- */\n.mgh-grid-checkbox { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; border: 2px solid var(--mgh-grid-fg-secondary); border-radius: 3px; background: transparent; cursor: pointer; display: inline-grid; place-content: center; position: relative; flex: 0 0 auto; transition: background-color .12s, border-color .12s; }\n.mgh-grid-checkbox:hover { border-color: var(--mgh-grid-fg); }\n.mgh-grid-checkbox:focus-visible { outline: 2px solid var(--mgh-grid-focus); outline-offset: 2px; }\n.mgh-grid-checkbox:checked, .mgh-grid-checkbox:indeterminate { background: var(--mgh-grid-primary); border-color: var(--mgh-grid-primary); }\n.mgh-grid-checkbox:checked::after { content: \"\"; width: 5px; height: 10px; border: solid var(--mgh-grid-primary-contrast); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }\n.mgh-grid-checkbox:indeterminate::after { content: \"\"; width: 10px; height: 2px; background: var(--mgh-grid-primary-contrast); }\n.mgh-grid-checkbox:disabled { opacity: 0.4; cursor: default; }\n.mgh-grid-checkbox-label { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 0.875rem; padding: 6px 4px; border-radius: 4px; }\n.mgh-grid-checkbox-label:hover { background: var(--mgh-grid-hover); }\n\n/* ---- quick filter ---- */\n.mgh-grid-quick-filter { display: grid; align-items: center; }\n.mgh-grid-quick-filter-trigger { grid-area: 1 / 1; z-index: 1; transition: opacity .2s; }\n.mgh-grid-quick-filter--expanded .mgh-grid-quick-filter-trigger { opacity: 0; pointer-events: none; }\n.mgh-grid-quick-filter-control { grid-area: 1 / 1; width: 32px; opacity: 0; overflow: hidden; transition: width .2s, opacity .2s; }\n.mgh-grid-quick-filter--expanded .mgh-grid-quick-filter-control { width: 260px; opacity: 1; }\n@media (max-width: 599.95px) { .mgh-grid-quick-filter--expanded .mgh-grid-quick-filter-control { width: 180px; } }\n\n/* ---- main / scroller ---- */\n.mgh-grid-main { position: relative; display: flex; flex: 1 1 auto; min-height: 0; min-width: 0; overflow: hidden; }\n.mgh-grid--auto-height .mgh-grid-main { flex: 0 0 auto; }\n.mgh-grid-scroller { position: relative; flex: 1 1 auto; min-height: 0; min-width: 0; overflow: auto; outline: none; scrollbar-width: thin; }\n.mgh-grid--auto-height .mgh-grid-scroller { overflow-y: hidden; }\n.mgh-grid-scroller::-webkit-scrollbar { width: 10px; height: 10px; }\n.mgh-grid-scroller::-webkit-scrollbar-thumb { background: var(--mgh-grid-scrollbar); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; }\n\n/* ---- column headers ---- */\n.mgh-grid-columns { position: sticky; top: 0; z-index: 3; background: var(--mgh-grid-header-bg); border-bottom: 1px solid var(--mgh-grid-border); min-width: 100%; width: max-content; }\n.mgh-grid-header-row { display: flex; min-width: 100%; }\n.mgh-grid-header-cell { position: relative; display: flex; align-items: center; flex: 0 0 auto; height: var(--mgh-grid-header-height); padding: 0 10px; font-weight: 600; font-size: 0.875rem; color: var(--mgh-grid-header-fg); background: var(--mgh-grid-header-bg); white-space: nowrap; overflow: hidden; user-select: none; outline: none; }\n.mgh-grid-header-cell--sortable { cursor: pointer; }\n.mgh-grid-header-cell:focus-visible { outline: 2px solid var(--mgh-grid-focus); outline-offset: -2px; }\n.mgh-grid-header-cell--align-center { justify-content: center; }\n.mgh-grid-header-cell--align-right { justify-content: flex-end; }\n.mgh-grid-header-cell--align-right .mgh-grid-header-title-container { flex-direction: row-reverse; }\n.mgh-grid-header-title-container { display: flex; align-items: center; gap: 2px; min-width: 0; flex: 1 1 auto; overflow: hidden; }\n.mgh-grid-header-cell--align-center .mgh-grid-header-title-container { flex: 0 1 auto; }\n.mgh-grid-header-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.mgh-grid-sort-icon { display: inline-flex; align-items: center; color: var(--mgh-grid-fg-secondary); opacity: 0; transition: opacity .15s; flex: 0 0 auto; }\n.mgh-grid-header-cell:hover .mgh-grid-sort-icon, .mgh-grid-sort-icon--active { opacity: 1; }\n.mgh-grid-sort-index { font-size: 10px; margin-left: -2px; color: var(--mgh-grid-fg-secondary); }\n.mgh-grid-header-menu-btn { position: absolute; right: 2px; opacity: 0; transition: opacity .15s; background: var(--mgh-grid-header-bg); }\n.mgh-grid-header-cell--align-right .mgh-grid-header-menu-btn { right: auto; left: 2px; }\n.mgh-grid-header-cell:hover .mgh-grid-header-menu-btn, .mgh-grid-header-menu-btn--open, .mgh-grid-header-cell:focus-within .mgh-grid-header-menu-btn { opacity: 1; }\n.mgh-grid-header-cell--menu-open { background: var(--mgh-grid-hover); }\n.mgh-grid-resize-handle { position: absolute; top: 0; right: -4px; width: 9px; height: 100%; cursor: col-resize; z-index: 2; display: flex; justify-content: center; touch-action: none; }\n.mgh-grid-resize-handle::after { content: \"\"; width: 1px; height: 60%; margin-top: 20%; background: var(--mgh-grid-border); transition: background .15s, width .15s; }\n.mgh-grid-resize-handle:hover::after, .mgh-grid-resize-handle--active::after { background: var(--mgh-grid-primary); width: 2px; }\n.mgh-grid-header-cell--last .mgh-grid-resize-handle { right: 0; }\n.mgh-grid-header-cell--dragging { opacity: 0.5; }\n.mgh-grid-header-cell--drop-left::before, .mgh-grid-header-cell--drop-right::before { content: \"\"; position: absolute; top: 4px; bottom: 4px; width: 2px; background: var(--mgh-grid-primary); z-index: 3; }\n.mgh-grid-header-cell--drop-left::before { left: 0; }\n.mgh-grid-header-cell--drop-right::before { right: 0; }\n.mgh-grid-header-filler { flex: 1 1 auto; background: var(--mgh-grid-header-bg); }\n\n/* ---- pinned cells ---- */\n.mgh-grid-cell--pinned-left, .mgh-grid-header-cell--pinned-left { position: sticky; z-index: 2; background-color: var(--mgh-grid-bg); }\n.mgh-grid-cell--pinned-right, .mgh-grid-header-cell--pinned-right { position: sticky; z-index: 2; background-color: var(--mgh-grid-bg); }\n.mgh-grid-header-cell--pinned-left, .mgh-grid-header-cell--pinned-right { z-index: 4; background-color: var(--mgh-grid-header-bg); }\n.mgh-grid-cell--pinned-left-last, .mgh-grid-header-cell--pinned-left-last { box-shadow: 2px 0 4px -2px var(--mgh-grid-pinned-shadow); }\n.mgh-grid-cell--pinned-right-first, .mgh-grid-header-cell--pinned-right-first { box-shadow: -2px 0 4px -2px var(--mgh-grid-pinned-shadow); }\n.mgh-grid--no-pinned-shadow .mgh-grid-cell--pinned-left-last, .mgh-grid--no-pinned-shadow .mgh-grid-header-cell--pinned-left-last { box-shadow: none; }\n\n/* ---- body & rows ---- */\n.mgh-grid-body { position: relative; min-width: 100%; width: max-content; }\n.mgh-grid-body--flow { display: flex; flex-direction: column; }\n.mgh-grid-row-block { min-width: 100%; }\n.mgh-grid-body--virtual .mgh-grid-row-block { position: absolute; left: 0; }\n.mgh-grid-row { display: flex; min-width: 100%; border-bottom: 1px solid var(--mgh-grid-border); background: var(--mgh-grid-bg); position: relative; }\n.mgh-grid-row--auto-height { align-items: stretch; }\n.mgh-grid-row:hover { background: var(--mgh-grid-hover); }\n.mgh-grid-row--selected { background: var(--mgh-grid-selected); }\n.mgh-grid-row--selected:hover { background: var(--mgh-grid-selected-hover); }\n.mgh-grid-row--clickable { cursor: pointer; }\n.mgh-grid-row--group { background: var(--mgh-grid-group-bg); }\n.mgh-grid-row--pinned { background: var(--mgh-grid-bg); }\n.mgh-grid-row--footer { background: var(--mgh-grid-footer-bg); font-weight: 600; }\n.mgh-grid-row:hover .mgh-grid-cell--pinned-left, .mgh-grid-row:hover .mgh-grid-cell--pinned-right { background-image: linear-gradient(var(--mgh-grid-hover), var(--mgh-grid-hover)); }\n.mgh-grid-row--selected .mgh-grid-cell--pinned-left, .mgh-grid-row--selected .mgh-grid-cell--pinned-right { background-image: linear-gradient(var(--mgh-grid-selected), var(--mgh-grid-selected)); }\n.mgh-grid-row--selected:hover .mgh-grid-cell--pinned-left, .mgh-grid-row--selected:hover .mgh-grid-cell--pinned-right { background-image: linear-gradient(var(--mgh-grid-selected-hover), var(--mgh-grid-selected-hover)); }\n.mgh-grid-row--group .mgh-grid-cell--pinned-left, .mgh-grid-row--group .mgh-grid-cell--pinned-right { background-image: linear-gradient(var(--mgh-grid-group-bg), var(--mgh-grid-group-bg)); }\n.mgh-grid-row--footer .mgh-grid-cell--pinned-left, .mgh-grid-row--footer .mgh-grid-cell--pinned-right { background-image: linear-gradient(var(--mgh-grid-footer-bg), var(--mgh-grid-footer-bg)); }\n.mgh-grid-row-filler { flex: 1 1 auto; }\n\n.mgh-grid-cell { display: flex; align-items: center; flex: 0 0 auto; padding: 0 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 0.875rem; outline: none; min-height: 100%; }\n.mgh-grid-cell > .mgh-grid-cell-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }\n.mgh-grid-row--auto-height .mgh-grid-cell { white-space: normal; align-items: flex-start; padding-top: 8px; padding-bottom: 8px; }\n.mgh-grid-row--auto-height .mgh-grid-cell > .mgh-grid-cell-text { white-space: normal; word-break: break-word; }\n.mgh-grid-cell--align-center { justify-content: center; }\n.mgh-grid-cell--align-right { justify-content: flex-end; }\n.mgh-grid-cell--focused { outline: 1px solid var(--mgh-grid-focus); outline-offset: -1px; }\n.mgh-grid-cell--editable { cursor: text; }\n.mgh-grid-cell--editing { padding: 0 4px; outline: 2px solid var(--mgh-grid-focus); outline-offset: -2px; background: var(--mgh-grid-bg); }\n.mgh-grid-cell--editing .mgh-grid-input, .mgh-grid-cell--editing .mgh-grid-select { width: 100%; height: calc(100% - 6px); border: 0; box-shadow: none; padding: 0 6px; background: transparent; }\n.mgh-grid-cell--checkbox, .mgh-grid-header-cell--checkbox, .mgh-grid-cell--detail-toggle, .mgh-grid-header-cell--detail-toggle { justify-content: center; padding: 0; }\n.mgh-grid-cell--boolean .mgh-grid-icon { color: var(--mgh-grid-fg-secondary); }\n.mgh-grid-cell--actions { gap: 2px; justify-content: center; }\n.mgh-grid-cell--aggregation { flex-direction: column; align-items: stretch; justify-content: center; line-height: 1.2; }\n.mgh-grid-cell--aggregation.mgh-grid-cell--align-right { align-items: flex-end; }\n.mgh-grid-cell--aggregation.mgh-grid-cell--align-center { align-items: center; }\n.mgh-grid-aggregation-label { font-size: 0.65rem; font-weight: 500; text-transform: uppercase; color: var(--mgh-grid-fg-secondary); letter-spacing: .04em; }\n.mgh-grid-group-cell { display: flex; align-items: center; gap: 4px; min-width: 0; }\n.mgh-grid-group-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }\n.mgh-grid-group-count { color: var(--mgh-grid-fg-secondary); margin-left: 2px; }\n.mgh-grid-group-toggle { flex: 0 0 auto; }\n.mgh-grid-group-toggle .mgh-grid-icon { transition: transform .15s; }\n.mgh-grid-group-toggle--expanded .mgh-grid-icon { transform: rotate(90deg); }\n.mgh-grid-detail-toggle .mgh-grid-icon { transition: transform .15s; }\n.mgh-grid-detail-toggle--expanded .mgh-grid-icon { transform: rotate(180deg); }\n\n/* ---- pinned rows ---- */\n.mgh-grid-pinned-rows { position: sticky; z-index: 2; min-width: 100%; width: max-content; background: var(--mgh-grid-bg); }\n.mgh-grid-pinned-rows--top { box-shadow: 0 2px 4px -2px var(--mgh-grid-pinned-shadow); }\n.mgh-grid-pinned-rows--bottom { bottom: 0; box-shadow: 0 -2px 4px -2px var(--mgh-grid-pinned-shadow); }\n.mgh-grid-pinned-rows--bottom .mgh-grid-row { border-bottom: 0; border-top: 1px solid var(--mgh-grid-border); }\n\n/* ---- detail panel ---- */\n.mgh-grid-detail-panel { position: sticky; left: 0; overflow: auto; border-bottom: 1px solid var(--mgh-grid-border); background: var(--mgh-grid-bg); z-index: 1; }\n\n/* ---- overlays ---- */\n.mgh-grid-overlay { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; z-index: 5; color: var(--mgh-grid-fg-secondary); font-size: 0.875rem; pointer-events: none; }\n.mgh-grid-overlay--loading { background: var(--mgh-grid-overlay); pointer-events: auto; }\n.mgh-grid-no-rows { display: flex; align-items: center; justify-content: center; gap: 8px; height: 100%; text-align: center; padding: 16px; }\n.mgh-grid-no-rows img, .mgh-grid-no-rows .mgh-grid-icon { width: 50px; height: 50px; color: var(--mgh-grid-fg-disabled); }\n.mgh-grid-spinner { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--mgh-grid-selected); border-top-color: var(--mgh-grid-primary); animation: mgh-grid-spin .8s linear infinite; }\n@keyframes mgh-grid-spin { to { transform: rotate(360deg); } }\n\n/* ---- footer ---- */\n.mgh-grid-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 0 8px 0 16px; border-top: 1px solid var(--mgh-grid-border); font-size: 0.875rem; color: var(--mgh-grid-fg-secondary); flex-wrap: wrap; }\n.mgh-grid-footer-left { display: flex; align-items: center; gap: 16px; }\n.mgh-grid-pagination { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }\n.mgh-grid-pagination-select { height: 32px; padding: 2px 24px 2px 8px; font-size: 0.875rem; border-color: transparent; }\n.mgh-grid-pagination-select:hover { border-color: transparent; background-color: var(--mgh-grid-hover); }\n.mgh-grid-pagination-actions { display: inline-flex; align-items: center; }\n\n/* ---- popover / menu / panels ---- */\n.mgh-grid-popover {\n  --mgh-grid-font-family: inherit; --mgh-grid-font-size: 14px; --mgh-grid-paper: #ffffff; --mgh-grid-bg: #fff; --mgh-grid-fg: rgba(0,0,0,.87); --mgh-grid-fg-secondary: rgba(0,0,0,.6); --mgh-grid-fg-disabled: rgba(0,0,0,.38); --mgh-grid-border: rgba(224,224,224,1); --mgh-grid-hover: rgba(0,0,0,.04); --mgh-grid-selected: rgba(25,118,210,.08); --mgh-grid-primary: #1976d2; --mgh-grid-primary-contrast: #fff; --mgh-grid-focus: #1976d2; --mgh-grid-input-bg: transparent; --mgh-grid-input-border: rgba(0,0,0,.23); --mgh-grid-popover-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);\n  position: fixed; z-index: 1300; background: var(--mgh-grid-paper); color: var(--mgh-grid-fg); border-radius: 8px; box-shadow: var(--mgh-grid-popover-shadow); font-family: var(--mgh-grid-font-family); font-size: var(--mgh-grid-font-size); line-height: 1.5; outline: none; max-height: calc(100vh - 16px); overflow: auto; animation: mgh-grid-pop .12s ease-out;\n}\n.mgh-grid-popover[data-mgh-theme=\"dark\"] { --mgh-grid-paper: #212b36; --mgh-grid-bg: #212b36; --mgh-grid-fg: #fff; --mgh-grid-fg-secondary: rgba(255,255,255,.7); --mgh-grid-fg-disabled: rgba(255,255,255,.5); --mgh-grid-border: rgba(81,81,81,1); --mgh-grid-hover: rgba(255,255,255,.08); --mgh-grid-selected: rgba(144,202,249,.16); --mgh-grid-primary: #90caf9; --mgh-grid-primary-contrast: rgba(0,0,0,.87); --mgh-grid-focus: #90caf9; --mgh-grid-input-border: rgba(255,255,255,.23); }\n@keyframes mgh-grid-pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }\n.mgh-grid-menu { list-style: none; margin: 0; padding: 6px 0; min-width: 180px; }\n.mgh-grid-menu-item { display: flex; align-items: center; gap: 12px; padding: 6px 16px; min-height: 36px; font-size: 0.875rem; cursor: pointer; white-space: nowrap; color: var(--mgh-grid-fg); background: transparent; border: 0; width: 100%; text-align: left; font-family: inherit; outline: none; }\n.mgh-grid-menu-item:hover, .mgh-grid-menu-item:focus-visible { background: var(--mgh-grid-hover); }\n.mgh-grid-menu-item--disabled { color: var(--mgh-grid-fg-disabled); cursor: default; pointer-events: none; }\n.mgh-grid-menu-item--selected { background: var(--mgh-grid-selected); }\n.mgh-grid-menu-item .mgh-grid-icon { color: var(--mgh-grid-fg-secondary); flex: 0 0 auto; }\n.mgh-grid-menu-divider { height: 1px; margin: 6px 0; background: var(--mgh-grid-border); border: 0; }\n.mgh-grid-menu-header { padding: 6px 16px 2px; font-size: 0.75rem; color: var(--mgh-grid-fg-secondary); text-transform: uppercase; letter-spacing: .04em; }\n.mgh-grid-menu-section { padding: 4px 16px 8px; display: flex; flex-direction: column; gap: 4px; }\n.mgh-grid-panel { display: flex; flex-direction: column; min-width: 300px; max-width: min(640px, calc(100vw - 16px)); }\n.mgh-grid-panel-header { padding: 12px 12px 4px; }\n.mgh-grid-panel-content { padding: 4px 12px; overflow: auto; max-height: 360px; }\n.mgh-grid-panel-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; }\n.mgh-grid-columns-list { display: flex; flex-direction: column; }\n.mgh-grid-filter-row { display: grid; grid-template-columns: 32px minmax(120px, 1fr) minmax(120px, 1fr) minmax(140px, 1.3fr); gap: 8px; align-items: end; margin-bottom: 8px; }\n.mgh-grid-filter-row--first { grid-template-columns: 32px minmax(120px, 1fr) minmax(120px, 1fr) minmax(140px, 1.3fr); }\n.mgh-grid-filter-row--with-logic { grid-template-columns: 32px 80px minmax(120px, 1fr) minmax(120px, 1fr) minmax(140px, 1.3fr); }\n.mgh-grid-filter-row .mgh-grid-btn--icon { margin-bottom: 4px; }\n.mgh-grid-filter-empty { padding: 8px 4px; color: var(--mgh-grid-fg-secondary); font-size: 0.875rem; }\n@media (max-width: 599.95px) { .mgh-grid-filter-row, .mgh-grid-filter-row--with-logic { grid-template-columns: 1fr; } }\n\n/* ---- misc ---- */\n.mgh-grid-tooltip-anchor { display: inline-flex; }\n.mgh-grid-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }\n@media print { .mgh-grid-toolbar, .mgh-grid-footer { display: none !important; } }\n";
+export declare const MGH_GRID_CSS = "\n.mgh-grid-card {\n  --mgh-grid-font-family: inherit;\n  --mgh-grid-font-size: 14px;\n  --mgh-grid-radius: 16px;\n  --mgh-grid-inner-radius: 4px;\n  --mgh-grid-paper: #ffffff;\n  --mgh-grid-bg: #ffffff;\n  --mgh-grid-fg: rgba(0, 0, 0, 0.87);\n  --mgh-grid-fg-secondary: rgba(0, 0, 0, 0.6);\n  --mgh-grid-fg-disabled: rgba(0, 0, 0, 0.38);\n  --mgh-grid-border: rgba(224, 224, 224, 1);\n  --mgh-grid-header-bg: #ffffff;\n  --mgh-grid-header-fg: rgba(0, 0, 0, 0.87);\n  --mgh-grid-hover: rgba(0, 0, 0, 0.04);\n  --mgh-grid-hover-strong: rgba(0, 0, 0, 0.08);\n  --mgh-grid-selected: rgba(25, 118, 210, 0.08);\n  --mgh-grid-selected-hover: rgba(25, 118, 210, 0.12);\n  --mgh-grid-primary: #1976d2;\n  --mgh-grid-primary-contrast: #ffffff;\n  --mgh-grid-focus: #1976d2;\n  --mgh-grid-shadow: 0 0 2px rgba(145, 158, 171, 0.2), 0 12px 24px -4px rgba(145, 158, 171, 0.12);\n  --mgh-grid-popover-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);\n  --mgh-grid-overlay: rgba(255, 255, 255, 0.6);\n  --mgh-grid-input-bg: transparent;\n  --mgh-grid-input-border: rgba(0, 0, 0, 0.23);\n  --mgh-grid-pinned-shadow: rgba(0, 0, 0, 0.12);\n  --mgh-grid-group-bg: rgba(0, 0, 0, 0.02);\n  --mgh-grid-footer-bg: rgba(0, 0, 0, 0.02);\n  --mgh-grid-badge: #1976d2;\n  --mgh-grid-scrollbar: rgba(0, 0, 0, 0.3);\n\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  background: var(--mgh-grid-paper);\n  color: var(--mgh-grid-fg);\n  border-radius: var(--mgh-grid-radius);\n  box-shadow: var(--mgh-grid-shadow);\n  font-family: var(--mgh-grid-font-family);\n  font-size: var(--mgh-grid-font-size);\n  line-height: 1.5;\n  overflow: hidden;\n  box-sizing: border-box;\n}\n.mgh-grid-card[data-mgh-theme=\"dark\"] {\n  --mgh-grid-paper: #212b36;\n  --mgh-grid-bg: #212b36;\n  --mgh-grid-fg: #ffffff;\n  --mgh-grid-fg-secondary: rgba(255, 255, 255, 0.7);\n  --mgh-grid-fg-disabled: rgba(255, 255, 255, 0.5);\n  --mgh-grid-border: rgba(81, 81, 81, 1);\n  --mgh-grid-header-bg: #212b36;\n  --mgh-grid-header-fg: #ffffff;\n  --mgh-grid-hover: rgba(255, 255, 255, 0.08);\n  --mgh-grid-hover-strong: rgba(255, 255, 255, 0.16);\n  --mgh-grid-selected: rgba(144, 202, 249, 0.16);\n  --mgh-grid-selected-hover: rgba(144, 202, 249, 0.24);\n  --mgh-grid-primary: #90caf9;\n  --mgh-grid-primary-contrast: rgba(0, 0, 0, 0.87);\n  --mgh-grid-focus: #90caf9;\n  --mgh-grid-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 12px 24px -4px rgba(0, 0, 0, 0.12);\n  --mgh-grid-overlay: rgba(33, 43, 54, 0.6);\n  --mgh-grid-input-border: rgba(255, 255, 255, 0.23);\n  --mgh-grid-pinned-shadow: rgba(0, 0, 0, 0.5);\n  --mgh-grid-group-bg: rgba(255, 255, 255, 0.03);\n  --mgh-grid-footer-bg: rgba(255, 255, 255, 0.03);\n  --mgh-grid-badge: #90caf9;\n  --mgh-grid-scrollbar: rgba(255, 255, 255, 0.3);\n}\n/* Only our own elements get the border-box reset. A blanket descendant reset would leak into\n   consumer content rendered through slots (e.g. MUI TextField inputs rely on content-box). */\n[class*=\"mgh-grid\"], [class*=\"mgh-grid\"]::before, [class*=\"mgh-grid\"]::after { box-sizing: border-box; }\n.mgh-grid-card--plain { box-shadow: none; border-radius: 0; background: transparent; }\n\n/* ---- card header ---- */\n/* Title stays on its row; only the end-content group wraps internally (like the legacy MUI card). */\n.mgh-grid-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 16px 16px 0; flex-wrap: nowrap; }\n.mgh-grid-card-title { flex: 0 0 auto; padding: 8px 24px; margin: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.5556; }\n/* Children are auto-sized so space-between leaves equal gaps title|center|end (like the legacy MUI card).\n   Only the end group shrinks (and wraps internally); the centre content keeps its natural width. */\n.mgh-grid-card-header-center { flex: 0 0 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }\n.mgh-grid-card-header-end { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }\n.mgh-grid-card-header-end:first-child { margin-left: auto; }\n@media (max-width: 599.95px) {\n  .mgh-grid-card-header { flex-wrap: wrap; }\n  .mgh-grid-card-header-end { gap: 8px; }\n}\n\n/* ---- box + root ---- */\n.mgh-grid-box { display: flex; flex-direction: column; flex-grow: 1; min-height: 0; min-width: 0; }\n.mgh-grid {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  min-height: 0;\n  min-width: 0;\n  border: 1px solid var(--mgh-grid-border);\n  border-radius: var(--mgh-grid-inner-radius);\n  background: var(--mgh-grid-bg);\n  color: var(--mgh-grid-fg);\n  outline: none;\n}\n.mgh-grid--auto-height { flex: 0 0 auto; }\n\n/* ---- toolbar ---- */\n.mgh-grid-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 45px; padding: 4px 8px; border-bottom: 1px solid var(--mgh-grid-border); flex-wrap: wrap; }\n.mgh-grid-toolbar-group { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }\n.mgh-grid-toolbar-center { display: flex; align-items: center; flex: 1 1 auto; justify-content: center; }\n\n/* ---- buttons ---- */\n.mgh-grid-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; margin: 0; background: transparent; color: var(--mgh-grid-fg-secondary); font: inherit; font-size: 0.8125rem; font-weight: 500; line-height: 1.75; letter-spacing: .02em; padding: 4px 8px; border-radius: 4px; cursor: pointer; user-select: none; transition: background-color .15s, color .15s; text-transform: none; white-space: nowrap; }\n.mgh-grid-btn:hover { background: var(--mgh-grid-hover); color: var(--mgh-grid-fg); }\n.mgh-grid-btn:focus-visible { outline: 2px solid var(--mgh-grid-focus); outline-offset: 1px; }\n.mgh-grid-btn:disabled { color: var(--mgh-grid-fg-disabled); cursor: default; background: transparent; }\n.mgh-grid-btn--icon { padding: 6px; border-radius: 50%; width: 32px; height: 32px; }\n.mgh-grid-btn--icon.mgh-grid-btn--small { width: 26px; height: 26px; padding: 3px; }\n.mgh-grid-btn--icon.mgh-grid-btn--small .mgh-grid-icon { width: 18px; height: 18px; }\n.mgh-grid-btn--primary { color: var(--mgh-grid-primary); }\n.mgh-grid-btn--primary:hover { background: var(--mgh-grid-selected); color: var(--mgh-grid-primary); }\n.mgh-grid-btn--contained { background: var(--mgh-grid-primary); color: var(--mgh-grid-primary-contrast); }\n.mgh-grid-btn--contained:hover { background: var(--mgh-grid-primary); color: var(--mgh-grid-primary-contrast); filter: brightness(0.92); }\n.mgh-grid-btn--active { color: var(--mgh-grid-primary); }\n\n/* ---- badge ---- */\n.mgh-grid-badge { position: relative; display: inline-flex; }\n.mgh-grid-badge-dot { position: absolute; top: 0; right: 0; min-width: 8px; height: 8px; border-radius: 4px; background: var(--mgh-grid-badge); transform: translate(50%, -50%); }\n.mgh-grid-badge-count { position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--mgh-grid-badge); color: var(--mgh-grid-primary-contrast); font-size: 10px; font-weight: 600; line-height: 16px; text-align: center; transform: translate(50%, -50%); }\n\n/* ---- inputs ---- */\n.mgh-grid-input, .mgh-grid-select { font: inherit; font-size: 0.875rem; color: var(--mgh-grid-fg); background: var(--mgh-grid-input-bg); border: 1px solid var(--mgh-grid-input-border); border-radius: 6px; padding: 6px 10px; height: 36px; min-width: 0; outline: none; transition: border-color .15s, box-shadow .15s; }\n.mgh-grid-input:hover, .mgh-grid-select:hover { border-color: var(--mgh-grid-fg); }\n.mgh-grid-input:focus, .mgh-grid-select:focus { border-color: var(--mgh-grid-focus); box-shadow: 0 0 0 1px var(--mgh-grid-focus); }\n.mgh-grid-input::placeholder { color: var(--mgh-grid-fg-disabled); }\n.mgh-grid-input--small, .mgh-grid-select--small { height: 32px; padding: 4px 8px; font-size: 0.8125rem; }\n.mgh-grid-select { appearance: none; -webkit-appearance: none; padding-right: 28px; background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23888'><path d='M7 10l5 5 5-5z'/></svg>\"); background-repeat: no-repeat; background-position: right 6px center; background-size: 18px; cursor: pointer; }\n.mgh-grid-select option { color: initial; background: initial; }\n.mgh-grid-card[data-mgh-theme=\"dark\"] .mgh-grid-select option, .mgh-grid-popover[data-mgh-theme=\"dark\"] .mgh-grid-select option { color: #fff; background: #212b36; }\n.mgh-grid-select[multiple] { height: auto; min-height: 36px; background-image: none; padding-right: 10px; }\n.mgh-grid-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }\n.mgh-grid-field-label { font-size: 0.75rem; color: var(--mgh-grid-fg-secondary); }\n.mgh-grid-input-adorned { position: relative; display: flex; align-items: center; }\n.mgh-grid-input-adorned .mgh-grid-input { width: 100%; padding-left: 34px; }\n.mgh-grid-input-adorned--clearable .mgh-grid-input { padding-right: 34px; }\n.mgh-grid-input-adornment { position: absolute; left: 10px; display: inline-flex; color: var(--mgh-grid-fg-secondary); pointer-events: none; }\n.mgh-grid-input-adornment--end { left: auto; right: 4px; pointer-events: auto; }\n\n/* ---- checkbox ---- */\n.mgh-grid-checkbox { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; border: 2px solid var(--mgh-grid-fg-secondary); border-radius: 3px; background: transparent; cursor: pointer; display: inline-grid; place-content: center; position: relative; flex: 0 0 auto; transition: background-color .12s, border-color .12s; }\n.mgh-grid-checkbox:hover { border-color: var(--mgh-grid-fg); }\n.mgh-grid-checkbox:focus-visible { outline: 2px solid var(--mgh-grid-focus); outline-offset: 2px; }\n.mgh-grid-checkbox:checked, .mgh-grid-checkbox:indeterminate { background: var(--mgh-grid-primary); border-color: var(--mgh-grid-primary); }\n.mgh-grid-checkbox:checked::after { content: \"\"; width: 5px; height: 10px; border: solid var(--mgh-grid-primary-contrast); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }\n.mgh-grid-checkbox:indeterminate::after { content: \"\"; width: 10px; height: 2px; background: var(--mgh-grid-primary-contrast); }\n.mgh-grid-checkbox:disabled { opacity: 0.4; cursor: default; }\n.mgh-grid-checkbox-label { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 0.875rem; padding: 6px 4px; border-radius: 4px; }\n.mgh-grid-checkbox-label:hover { background: var(--mgh-grid-hover); }\n\n/* ---- quick filter ---- */\n.mgh-grid-quick-filter { display: grid; align-items: center; }\n.mgh-grid-quick-filter-trigger { grid-area: 1 / 1; z-index: 1; transition: opacity .2s; }\n.mgh-grid-quick-filter--expanded .mgh-grid-quick-filter-trigger { opacity: 0; pointer-events: none; }\n.mgh-grid-quick-filter-control { grid-area: 1 / 1; width: 32px; opacity: 0; overflow: hidden; transition: width .2s, opacity .2s; }\n.mgh-grid-quick-filter--expanded .mgh-grid-quick-filter-control { width: 260px; opacity: 1; }\n@media (max-width: 599.95px) { .mgh-grid-quick-filter--expanded .mgh-grid-quick-filter-control { width: 180px; } }\n\n/* ---- main / scroller ---- */\n.mgh-grid-main { position: relative; display: flex; flex: 1 1 auto; min-height: 0; min-width: 0; overflow: hidden; }\n.mgh-grid--auto-height .mgh-grid-main { flex: 0 0 auto; }\n.mgh-grid-scroller { position: relative; flex: 1 1 auto; min-height: 0; min-width: 0; overflow: auto; outline: none; scrollbar-width: thin; }\n.mgh-grid--auto-height .mgh-grid-scroller { overflow-y: hidden; }\n.mgh-grid-scroller::-webkit-scrollbar { width: 10px; height: 10px; }\n.mgh-grid-scroller::-webkit-scrollbar-thumb { background: var(--mgh-grid-scrollbar); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; }\n\n/* ---- column headers ---- */\n.mgh-grid-columns { position: sticky; top: 0; z-index: 3; background: var(--mgh-grid-header-bg); border-bottom: 1px solid var(--mgh-grid-border); min-width: 100%; width: max-content; }\n.mgh-grid-header-row { display: flex; min-width: 100%; }\n.mgh-grid-header-cell { position: relative; display: flex; align-items: center; flex: 0 0 auto; height: var(--mgh-grid-header-height); padding: 0 10px; font-weight: 600; font-size: 0.875rem; color: var(--mgh-grid-header-fg); background: var(--mgh-grid-header-bg); white-space: nowrap; overflow: hidden; user-select: none; outline: none; }\n.mgh-grid-header-cell--sortable { cursor: pointer; }\n.mgh-grid-header-cell:focus-visible { outline: 2px solid var(--mgh-grid-focus); outline-offset: -2px; }\n.mgh-grid-header-cell--align-center { justify-content: center; }\n.mgh-grid-header-cell--align-right { justify-content: flex-end; }\n.mgh-grid-header-cell--align-right .mgh-grid-header-title-container { flex-direction: row-reverse; }\n.mgh-grid-header-title-container { display: flex; align-items: center; gap: 2px; min-width: 0; flex: 1 1 auto; overflow: hidden; }\n.mgh-grid-header-cell--align-center .mgh-grid-header-title-container { flex: 0 1 auto; }\n/* Titles wrap onto as many lines as fit in the header height (see --mgh-grid-header-lines) before truncating. */\n.mgh-grid-header-title { overflow: hidden; text-overflow: ellipsis; white-space: normal; overflow-wrap: break-word; line-height: 1.2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--mgh-grid-header-lines, 1); line-clamp: var(--mgh-grid-header-lines, 1); }\n.mgh-grid-header-cell--align-right .mgh-grid-header-title { text-align: right; }\n.mgh-grid-header-cell--align-center .mgh-grid-header-title { text-align: center; }\n.mgh-grid-sort-icon { display: inline-flex; align-items: center; color: var(--mgh-grid-fg-secondary); opacity: 0; transition: opacity .15s; flex: 0 0 auto; }\n.mgh-grid-header-cell:hover .mgh-grid-sort-icon, .mgh-grid-sort-icon--active { opacity: 1; }\n.mgh-grid-sort-index { font-size: 10px; margin-left: -2px; color: var(--mgh-grid-fg-secondary); }\n.mgh-grid-header-menu-btn { position: absolute; right: 2px; opacity: 0; transition: opacity .15s; background: var(--mgh-grid-header-bg); }\n.mgh-grid-header-cell--align-right .mgh-grid-header-menu-btn { right: auto; left: 2px; }\n.mgh-grid-header-cell:hover .mgh-grid-header-menu-btn, .mgh-grid-header-menu-btn--open, .mgh-grid-header-cell:focus-within .mgh-grid-header-menu-btn { opacity: 1; }\n.mgh-grid-header-cell--menu-open { background: var(--mgh-grid-hover); }\n.mgh-grid-resize-handle { position: absolute; top: 0; right: -4px; width: 9px; height: 100%; cursor: col-resize; z-index: 2; display: flex; justify-content: center; touch-action: none; }\n.mgh-grid-resize-handle::after { content: \"\"; width: 1px; height: 60%; margin-top: 20%; background: var(--mgh-grid-border); transition: background .15s, width .15s; }\n.mgh-grid-resize-handle:hover::after, .mgh-grid-resize-handle--active::after { background: var(--mgh-grid-primary); width: 2px; }\n.mgh-grid-header-cell--last .mgh-grid-resize-handle { right: 0; }\n.mgh-grid-header-cell--dragging { opacity: 0.5; }\n.mgh-grid-header-cell--drop-left::before, .mgh-grid-header-cell--drop-right::before { content: \"\"; position: absolute; top: 4px; bottom: 4px; width: 2px; background: var(--mgh-grid-primary); z-index: 3; }\n.mgh-grid-header-cell--drop-left::before { left: 0; }\n.mgh-grid-header-cell--drop-right::before { right: 0; }\n.mgh-grid-header-filler { flex: 1 1 auto; background: var(--mgh-grid-header-bg); }\n\n/* ---- pinned cells ---- */\n.mgh-grid-cell--pinned-left, .mgh-grid-header-cell--pinned-left { position: sticky; z-index: 2; background-color: var(--mgh-grid-bg); }\n.mgh-grid-cell--pinned-right, .mgh-grid-header-cell--pinned-right { position: sticky; z-index: 2; background-color: var(--mgh-grid-bg); }\n.mgh-grid-header-cell--pinned-left, .mgh-grid-header-cell--pinned-right { z-index: 4; background-color: var(--mgh-grid-header-bg); }\n.mgh-grid-cell--pinned-left-last, .mgh-grid-header-cell--pinned-left-last { box-shadow: 2px 0 4px -2px var(--mgh-grid-pinned-shadow); }\n.mgh-grid-cell--pinned-right-first, .mgh-grid-header-cell--pinned-right-first { box-shadow: -2px 0 4px -2px var(--mgh-grid-pinned-shadow); }\n.mgh-grid--no-pinned-shadow .mgh-grid-cell--pinned-left-last, .mgh-grid--no-pinned-shadow .mgh-grid-header-cell--pinned-left-last { box-shadow: none; }\n\n/* ---- body & rows ---- */\n.mgh-grid-body { position: relative; min-width: 100%; width: max-content; }\n.mgh-grid-body--flow { display: flex; flex-direction: column; }\n.mgh-grid-row-block { min-width: 100%; }\n.mgh-grid-body--virtual .mgh-grid-row-block { position: absolute; left: 0; }\n.mgh-grid-row { display: flex; min-width: 100%; border-bottom: 1px solid var(--mgh-grid-border); background: var(--mgh-grid-bg); position: relative; }\n.mgh-grid-row--auto-height { align-items: stretch; }\n.mgh-grid-row:hover { background: var(--mgh-grid-hover); }\n.mgh-grid-row--selected { background: var(--mgh-grid-selected); }\n.mgh-grid-row--selected:hover { background: var(--mgh-grid-selected-hover); }\n.mgh-grid-row--clickable { cursor: pointer; }\n.mgh-grid-row--group { background: var(--mgh-grid-group-bg); }\n.mgh-grid-row--pinned { background: var(--mgh-grid-bg); }\n.mgh-grid-row--footer { background: var(--mgh-grid-footer-bg); font-weight: 600; }\n.mgh-grid-row:hover .mgh-grid-cell--pinned-left, .mgh-grid-row:hover .mgh-grid-cell--pinned-right { background-image: linear-gradient(var(--mgh-grid-hover), var(--mgh-grid-hover)); }\n.mgh-grid-row--selected .mgh-grid-cell--pinned-left, .mgh-grid-row--selected .mgh-grid-cell--pinned-right { background-image: linear-gradient(var(--mgh-grid-selected), var(--mgh-grid-selected)); }\n.mgh-grid-row--selected:hover .mgh-grid-cell--pinned-left, .mgh-grid-row--selected:hover .mgh-grid-cell--pinned-right { background-image: linear-gradient(var(--mgh-grid-selected-hover), var(--mgh-grid-selected-hover)); }\n.mgh-grid-row--group .mgh-grid-cell--pinned-left, .mgh-grid-row--group .mgh-grid-cell--pinned-right { background-image: linear-gradient(var(--mgh-grid-group-bg), var(--mgh-grid-group-bg)); }\n.mgh-grid-row--footer .mgh-grid-cell--pinned-left, .mgh-grid-row--footer .mgh-grid-cell--pinned-right { background-image: linear-gradient(var(--mgh-grid-footer-bg), var(--mgh-grid-footer-bg)); }\n.mgh-grid-row-filler { flex: 1 1 auto; }\n\n.mgh-grid-cell { display: flex; align-items: center; flex: 0 0 auto; padding: 0 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 0.875rem; outline: none; min-height: 100%; }\n.mgh-grid-cell > .mgh-grid-cell-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }\n.mgh-grid-row--auto-height .mgh-grid-cell { white-space: normal; align-items: flex-start; padding-top: 8px; padding-bottom: 8px; }\n.mgh-grid-row--auto-height .mgh-grid-cell > .mgh-grid-cell-text { white-space: normal; word-break: break-word; }\n.mgh-grid-cell--align-center { justify-content: center; }\n.mgh-grid-cell--align-right { justify-content: flex-end; }\n.mgh-grid-cell--focused { outline: 1px solid var(--mgh-grid-focus); outline-offset: -1px; }\n.mgh-grid-cell--editable { cursor: text; }\n.mgh-grid-cell--editing { padding: 0 4px; outline: 2px solid var(--mgh-grid-focus); outline-offset: -2px; background: var(--mgh-grid-bg); }\n.mgh-grid-cell--editing .mgh-grid-input, .mgh-grid-cell--editing .mgh-grid-select { width: 100%; height: calc(100% - 6px); border: 0; box-shadow: none; padding: 0 6px; background: transparent; }\n.mgh-grid-cell--checkbox, .mgh-grid-header-cell--checkbox, .mgh-grid-cell--detail-toggle, .mgh-grid-header-cell--detail-toggle { justify-content: center; padding: 0; }\n.mgh-grid-cell--boolean .mgh-grid-icon { color: var(--mgh-grid-fg-secondary); }\n.mgh-grid-cell--actions { gap: 2px; justify-content: center; }\n.mgh-grid-cell--aggregation { flex-direction: column; align-items: stretch; justify-content: center; line-height: 1.2; }\n.mgh-grid-cell--aggregation.mgh-grid-cell--align-right { align-items: flex-end; }\n.mgh-grid-cell--aggregation.mgh-grid-cell--align-center { align-items: center; }\n.mgh-grid-aggregation-label { font-size: 0.65rem; font-weight: 500; text-transform: uppercase; color: var(--mgh-grid-fg-secondary); letter-spacing: .04em; }\n.mgh-grid-group-cell { display: flex; align-items: center; gap: 4px; min-width: 0; }\n.mgh-grid-group-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }\n.mgh-grid-group-count { color: var(--mgh-grid-fg-secondary); margin-left: 2px; }\n.mgh-grid-group-toggle { flex: 0 0 auto; }\n.mgh-grid-group-toggle .mgh-grid-icon { transition: transform .15s; }\n.mgh-grid-group-toggle--expanded .mgh-grid-icon { transform: rotate(90deg); }\n.mgh-grid-detail-toggle .mgh-grid-icon { transition: transform .15s; }\n.mgh-grid-detail-toggle--expanded .mgh-grid-icon { transform: rotate(180deg); }\n\n/* ---- pinned rows ---- */\n.mgh-grid-pinned-rows { position: sticky; z-index: 2; min-width: 100%; width: max-content; background: var(--mgh-grid-bg); }\n.mgh-grid-pinned-rows--top { box-shadow: 0 2px 4px -2px var(--mgh-grid-pinned-shadow); }\n.mgh-grid-pinned-rows--bottom { bottom: 0; box-shadow: 0 -2px 4px -2px var(--mgh-grid-pinned-shadow); }\n.mgh-grid-pinned-rows--bottom .mgh-grid-row { border-bottom: 0; border-top: 1px solid var(--mgh-grid-border); }\n\n/* ---- detail panel ---- */\n.mgh-grid-detail-panel { position: sticky; left: 0; overflow: auto; border-bottom: 1px solid var(--mgh-grid-border); background: var(--mgh-grid-bg); z-index: 1; }\n\n/* ---- overlays ---- */\n.mgh-grid-overlay { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; z-index: 5; color: var(--mgh-grid-fg-secondary); font-size: 0.875rem; pointer-events: none; }\n.mgh-grid-overlay--loading { background: var(--mgh-grid-overlay); pointer-events: auto; }\n.mgh-grid-no-rows { display: flex; align-items: center; justify-content: center; gap: 8px; height: 100%; text-align: center; padding: 16px; }\n.mgh-grid-no-rows img, .mgh-grid-no-rows .mgh-grid-icon { width: 50px; height: 50px; color: var(--mgh-grid-fg-disabled); }\n.mgh-grid-spinner { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--mgh-grid-selected); border-top-color: var(--mgh-grid-primary); animation: mgh-grid-spin .8s linear infinite; }\n@keyframes mgh-grid-spin { to { transform: rotate(360deg); } }\n\n/* ---- footer ---- */\n.mgh-grid-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 0 8px 0 16px; border-top: 1px solid var(--mgh-grid-border); font-size: 0.875rem; color: var(--mgh-grid-fg-secondary); flex-wrap: wrap; }\n.mgh-grid-footer-left { display: flex; align-items: center; gap: 16px; }\n.mgh-grid-pagination { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }\n.mgh-grid-pagination-select { height: 32px; padding: 2px 24px 2px 8px; font-size: 0.875rem; border-color: transparent; }\n.mgh-grid-pagination-select:hover { border-color: transparent; background-color: var(--mgh-grid-hover); }\n.mgh-grid-pagination-actions { display: inline-flex; align-items: center; }\n\n/* ---- popover / menu / panels ---- */\n.mgh-grid-popover {\n  --mgh-grid-font-family: inherit; --mgh-grid-font-size: 14px; --mgh-grid-paper: #ffffff; --mgh-grid-bg: #fff; --mgh-grid-fg: rgba(0,0,0,.87); --mgh-grid-fg-secondary: rgba(0,0,0,.6); --mgh-grid-fg-disabled: rgba(0,0,0,.38); --mgh-grid-border: rgba(224,224,224,1); --mgh-grid-hover: rgba(0,0,0,.04); --mgh-grid-selected: rgba(25,118,210,.08); --mgh-grid-primary: #1976d2; --mgh-grid-primary-contrast: #fff; --mgh-grid-focus: #1976d2; --mgh-grid-input-bg: transparent; --mgh-grid-input-border: rgba(0,0,0,.23); --mgh-grid-popover-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);\n  position: fixed; z-index: 1300; background: var(--mgh-grid-paper); color: var(--mgh-grid-fg); border-radius: 8px; box-shadow: var(--mgh-grid-popover-shadow); font-family: var(--mgh-grid-font-family); font-size: var(--mgh-grid-font-size); line-height: 1.5; outline: none; max-height: calc(100vh - 16px); overflow: auto; animation: mgh-grid-pop .12s ease-out;\n}\n.mgh-grid-popover[data-mgh-theme=\"dark\"] { --mgh-grid-paper: #212b36; --mgh-grid-bg: #212b36; --mgh-grid-fg: #fff; --mgh-grid-fg-secondary: rgba(255,255,255,.7); --mgh-grid-fg-disabled: rgba(255,255,255,.5); --mgh-grid-border: rgba(81,81,81,1); --mgh-grid-hover: rgba(255,255,255,.08); --mgh-grid-selected: rgba(144,202,249,.16); --mgh-grid-primary: #90caf9; --mgh-grid-primary-contrast: rgba(0,0,0,.87); --mgh-grid-focus: #90caf9; --mgh-grid-input-border: rgba(255,255,255,.23); }\n@keyframes mgh-grid-pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }\n.mgh-grid-menu { list-style: none; margin: 0; padding: 6px 0; min-width: 180px; }\n.mgh-grid-menu-item { display: flex; align-items: center; gap: 12px; padding: 6px 16px; min-height: 36px; font-size: 0.875rem; cursor: pointer; white-space: nowrap; color: var(--mgh-grid-fg); background: transparent; border: 0; width: 100%; text-align: left; font-family: inherit; outline: none; }\n.mgh-grid-menu-item:hover, .mgh-grid-menu-item:focus-visible { background: var(--mgh-grid-hover); }\n.mgh-grid-menu-item--disabled { color: var(--mgh-grid-fg-disabled); cursor: default; pointer-events: none; }\n.mgh-grid-menu-item--selected { background: var(--mgh-grid-selected); }\n.mgh-grid-menu-item .mgh-grid-icon { color: var(--mgh-grid-fg-secondary); flex: 0 0 auto; }\n.mgh-grid-menu-divider { height: 1px; margin: 6px 0; background: var(--mgh-grid-border); border: 0; }\n.mgh-grid-menu-header { padding: 6px 16px 2px; font-size: 0.75rem; color: var(--mgh-grid-fg-secondary); text-transform: uppercase; letter-spacing: .04em; }\n.mgh-grid-menu-section { padding: 4px 16px 8px; display: flex; flex-direction: column; gap: 4px; }\n.mgh-grid-panel { display: flex; flex-direction: column; min-width: 300px; max-width: min(640px, calc(100vw - 16px)); }\n.mgh-grid-panel-header { padding: 12px 12px 4px; }\n.mgh-grid-panel-content { padding: 4px 12px; overflow: auto; max-height: 360px; }\n.mgh-grid-panel-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; }\n.mgh-grid-columns-list { display: flex; flex-direction: column; }\n.mgh-grid-filter-row { display: grid; grid-template-columns: 32px minmax(120px, 1fr) minmax(120px, 1fr) minmax(140px, 1.3fr); gap: 8px; align-items: end; margin-bottom: 8px; }\n.mgh-grid-filter-row--first { grid-template-columns: 32px minmax(120px, 1fr) minmax(120px, 1fr) minmax(140px, 1.3fr); }\n.mgh-grid-filter-row--with-logic { grid-template-columns: 32px 80px minmax(120px, 1fr) minmax(120px, 1fr) minmax(140px, 1.3fr); }\n.mgh-grid-filter-row .mgh-grid-btn--icon { margin-bottom: 4px; }\n.mgh-grid-filter-empty { padding: 8px 4px; color: var(--mgh-grid-fg-secondary); font-size: 0.875rem; }\n@media (max-width: 599.95px) { .mgh-grid-filter-row, .mgh-grid-filter-row--with-logic { grid-template-columns: 1fr; } }\n\n/* ---- misc ---- */\n.mgh-grid-tooltip-anchor { display: inline-flex; }\n.mgh-grid-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }\n@media print { .mgh-grid-toolbar, .mgh-grid-footer { display: none !important; } }\n";
 /** Injects the MGHGrid stylesheet once per document. Safe on the server (no-op). */
 export declare const useMGHGridStyles: () => void;

package/dist/components/index.d.ts

@@ -6,3 +6,4 @@ export * from './Exporting';
 export * from './iconify';
 export * from './Label';
 export * from './MGHDateRangePicker';
+export * from './MGHDatePicker';