@mono-lit/helper 0.0.0-stage → 0.0.2

package/dist/src/components/date/date-types.d.ts

@@ -0,0 +1,163 @@
+import { Options as FlatpickrOptions } from 'flatpickr/dist/types/options';
+import { VisibilityProps } from '../../composables/visibility';
+/** Picker mode — drives flatpickr's calendar/time configuration. */
+export type DateType = 'date' | 'datetime' | 'time';
+export type DateSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export type DateColor = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'teal' | 'purple' | 'neutral' | 'dark';
+export type DateVariant = 'outlined' | 'filled' | 'underlined';
+export type DateValidationState = 'default' | 'error' | 'success';
+/** flatpickr selection mode. */
+export type DateMode = 'single' | 'multiple' | 'range';
+export interface DateCssClass {
+    root?: string;
+    label?: string;
+    required?: string;
+    field?: string;
+    icon?: string;
+    native?: string;
+    clear?: string;
+    messageWrap?: string;
+    message?: string;
+}
+/** Emitted on selection change. */
+export interface DateChangeEventDetail {
+    /** Formatted value string (flatpickr `dateStr`) — mirrors `modelValue`. */
+    value: string;
+    /** Same as `value`; read this for Vue `v-model` (`$event.detail.modelValue`). */
+    modelValue: string;
+    /** Raw selected Date objects (one for single, two for range, N for multiple). */
+    dates: Date[];
+    /** The flatpickr instance, for advanced access. */
+    instance: unknown;
+    sourceEvent?: Event;
+}
+export type DateChangeEvent = CustomEvent<DateChangeEventDetail>;
+export type DateOpenEvent = CustomEvent<{
+    dates: Date[];
+    instance: unknown;
+}>;
+export type DateCloseEvent = CustomEvent<{
+    dates: Date[];
+    instance: unknown;
+}>;
+export interface DateEvents {
+    change: DateChangeEvent;
+    open: DateOpenEvent;
+    close: DateCloseEvent;
+    'mno-change': DateChangeEvent;
+    mnoChange: DateChangeEvent;
+    'mno-open': DateOpenEvent;
+    mnoOpen: DateOpenEvent;
+    'mno-close': DateCloseEvent;
+    mnoClose: DateCloseEvent;
+}
+export interface DateProps extends VisibilityProps {
+    /** Picker mode: `date` (default), `datetime`, or `time`. */
+    type?: DateType;
+    /** Selected value as a formatted string (two-way bound). */
+    modelValue?: string;
+    'model-value'?: string;
+    modelvalue?: string;
+    value?: string;
+    /** Visual size / color / variant (mirror mono-input). */
+    size?: DateSize;
+    color?: DateColor;
+    variant?: DateVariant;
+    /** Field label + helper / validation messaging. */
+    label?: string;
+    placeholder?: string;
+    helperText?: string;
+    'helper-text'?: string;
+    validationState?: DateValidationState;
+    'validation-state'?: DateValidationState;
+    validationMessage?: string;
+    'validation-message'?: string;
+    error?: boolean;
+    errorMessage?: string;
+    'error-message'?: string;
+    success?: boolean;
+    successMessage?: string;
+    'success-message'?: string;
+    /** State flags. */
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    clearable?: boolean;
+    ariaLabelText?: string;
+    'aria-label-text'?: string;
+    /** Output/parsing format, e.g. `"Y-m-d"`, `"d M Y"`, `"H:i"`. */
+    dateFormat?: string;
+    'date-format'?: string;
+    /** Show a second, human-readable input while submitting `dateFormat`. */
+    altInput?: boolean;
+    'alt-input'?: boolean;
+    altFormat?: string;
+    'alt-format'?: string;
+    /**
+     * Let the user type into the input directly. Beyond flatpickr's Enter/blur
+     * parsing, mono-date live-parses as you type: the calendar navigates to the
+     * value and auto-selects it once a complete date (matching `dateFormat`) is
+     * entered. Best used without `altInput`.
+     */
+    typeable?: boolean;
+    /** Open the calendar on input click (default true). */
+    clickOpens?: boolean;
+    'click-opens'?: boolean;
+    defaultDate?: string | number | Date | Array<string | number | Date>;
+    'default-date'?: string | number | Date | Array<string | number | Date>;
+    minDate?: string | number | Date;
+    'min-date'?: string | number | Date;
+    maxDate?: string | number | Date;
+    'max-date'?: string | number | Date;
+    /** Dates to disable (values, ranges, or predicate fns). */
+    disable?: FlatpickrOptions['disable'];
+    /** Whitelist of selectable dates (everything else disabled). */
+    enable?: FlatpickrOptions['enable'];
+    mode?: DateMode;
+    enableSeconds?: boolean;
+    'enable-seconds'?: boolean;
+    /** 24-hour time (flatpickr `time_24hr`). */
+    time24hr?: boolean;
+    'time-24hr'?: boolean;
+    hourIncrement?: number;
+    'hour-increment'?: number;
+    minuteIncrement?: number;
+    'minute-increment'?: number;
+    defaultHour?: number;
+    'default-hour'?: number;
+    defaultMinute?: number;
+    'default-minute'?: number;
+    /** Render the calendar inline (always visible). */
+    inline?: boolean;
+    weekNumbers?: boolean;
+    'week-numbers'?: boolean;
+    monthSelectorType?: 'dropdown' | 'static';
+    'month-selector-type'?: 'dropdown' | 'static';
+    shorthandCurrentMonth?: boolean;
+    'shorthand-current-month'?: boolean;
+    position?: FlatpickrOptions['position'];
+    ariaDateFormat?: string;
+    'aria-date-format'?: string;
+    /** flatpickr locale key or object. */
+    locale?: FlatpickrOptions['locale'];
+    /**
+     * Escape hatch — any other flatpickr option, merged into the config. Lets you
+     * use the full flatpickr feature set beyond the named props above.
+     */
+    options?: Partial<FlatpickrOptions>;
+    /** Explicit sizing (CSS string or number → px). Use `width="100%"` for full width. */
+    width?: string | number;
+    height?: string | number;
+    minWidth?: string | number;
+    'min-width'?: string | number;
+    maxWidth?: string | number;
+    'max-width'?: string | number;
+    minHeight?: string | number;
+    'min-height'?: string | number;
+    maxHeight?: string | number;
+    'max-height'?: string | number;
+    /** Per-part class overrides. */
+    cssClass?: DateCssClass;
+    cssclass?: DateCssClass;
+    'css-class'?: DateCssClass | string;
+}

package/dist/src/components/date/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference path="../../../vue.d.ts" />
+export { MonoDate } from './mono-date.js';
+export type { DateType, DateSize, DateColor, DateVariant, DateValidationState, DateMode, DateCssClass, DateProps, DateEvents, DateChangeEventDetail, } from './date-types.js';

package/dist/src/components/date/index.shadow.d.ts

@@ -0,0 +1,4 @@
+/// <reference path="../../../vue.d.ts" />
+export { MonoDateShadow } from './mono-date.shadow.js';
+export { MonoDateCore } from './date-core.js';
+export type { DateType, DateSize, DateColor, DateVariant, DateValidationState, DateMode, DateCssClass, DateProps, DateEvents, DateChangeEventDetail, } from './date-types.js';

package/dist/src/components/date/mono-date.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+declare const MonoDate_base: import('../../composables/hybird-prop').Constructor<import('./date-core.js').MonoDateCoreInterface> & typeof LitElement;
+/**
+ * Light-DOM `mono-date` (default build, `@mono-lit/helper/ui/date`).
+ *
+ * `createRenderRoot()` returns `this`, so it renders into light DOM and inherits
+ * the page's global stylesheet (`dist/ui/index.css`, which includes flatpickr's
+ * base + the `.mono-flatpickr` calendar theme). All render-mode-agnostic logic —
+ * props, hybrid aliases, flatpickr lifecycle, render — is shared with the shadow
+ * build (`@mono-lit/helper/ui/shadow/date`) via `MonoDateCore`; both register
+ * `mono-date`, so a document loads one.
+ */
+export declare class MonoDate extends MonoDate_base {
+    static styles: import('lit').CSSResult[];
+    protected createRenderRoot(): HTMLElement;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mono-date': MonoDate;
+    }
+}
+export {};

package/dist/src/components/date/mono-date.shadow.d.ts

@@ -0,0 +1,31 @@
+import { LitElement, TemplateResult } from 'lit';
+declare const MonoDateShadow_base: import('../../composables/hybird-prop').Constructor<import('./date-core.js').MonoDateCoreInterface> & typeof LitElement;
+/**
+ * Shadow-DOM `mono-date` (the opt-in SSR build, `@mono-lit/helper/ui/shadow/date`).
+ *
+ * Real shadow root + `static styles`, so `@lit-labs/ssr` serializes it to
+ * Declarative Shadow DOM and styles are scoped (`mono-date`→`:host`). The field
+ * (label / input / message) renders server-side; flatpickr's calendar is created
+ * on the client after hydration (it lives in <body>, styled by the global
+ * bundle). Interactivity needs the first client update to flush (so flatpickr
+ * inits and `@input` binds) — hence the defer-hydration poll. Shares all logic
+ * with the light build via `MonoDateCore`; both register `mono-date`, so a
+ * document loads one.
+ */
+export declare class MonoDateShadow extends MonoDateShadow_base {
+    static styles: import('lit').CSSResult[];
+    connectedCallback(): void;
+    /**
+     * Inline SVG — the global `.mono-icon`/`i-mdi-*` UnoCSS icons can't reach a
+     * shadow root (the mask rule never applies, so an `i-mdi-*` span renders as a
+     * solid "black cube"). The `.mono-icon` class is still applied so the existing
+     * `.mono-date-icon > .mono-icon` / `.mono-date-clear > .mono-icon` sizing rules
+     * take effect; `fill="currentColor"` follows the `--date-muted` icon color.
+     *
+     * The paths are the exact `mdi:calendar-outline` / `mdi:clock-outline` /
+     * `mdi:close` glyph bodies (same MDI set the light build resolves via
+     * `i-mdi-*`), so the shadow icons match the light-DOM date pixel-for-pixel.
+     */
+    protected renderIcon(name: 'calendar' | 'clock' | 'close'): TemplateResult;
+}
+export {};

package/dist/src/components/drawer/drawer-core.d.ts

@@ -0,0 +1,99 @@
+import { LitElement, TemplateResult } from 'lit';
+import { DrawerPosition, DrawerSize, DrawerColor, DrawerSource, DrawerCssClass } from './drawer-types.js';
+import { Constructor } from '../../composables/hybird-prop';
+import { MonoAutoFullscreen } from '../../composables/breakpoints';
+import { PopupLayer } from '../../composables/popup-stack';
+/**
+ * Named slots projected by `mono-drawer` (light: captured; shadow: native).
+ *
+ * `header` replaces the heading COLUMN — title + subtitle — and beats the
+ * `title` / `subtitle` slots and props. The close ✕ always stays. `foot` is
+ * accepted as an alias of `footer`.
+ */
+export type DrawerSlotName = 'header' | 'title' | 'subtitle' | 'body' | 'footer';
+/**
+ * `MonoDrawerCore` — render-mode-agnostic logic for `mono-drawer`: props/hybrid
+ * aliases, the open/close model (`show`/`hide`/`toggle` + `mno-*` events), the
+ * `PopupLayer` surface (shared z-stack / scroll-lock / topmost-Escape via the
+ * SSR-safe `popup-stack`), resizeable-edge logic, and the shared drawer markup
+ * (`_renderDrawerBody`). SSR-safe: `popup-stack` no-ops server-side and the
+ * `window`/resize access is `isServer`-guarded. Mirrors `modal-core.ts`.
+ *
+ * Each build supplies the render root + slot/icon strategy:
+ *  - light (`mono-drawer.ts`): a `<body>` portal that IS the `.mono-drawer` root,
+ *    `data-mono-slot` placeholders, UnoCSS `.i-mdi-close`.
+ *  - shadow (`mono-drawer.shadow.ts`): a real shadow root with an inner
+ *    `.mono-drawer` root, native `<slot>`s, inline-SVG ✕.
+ */
+export declare const MonoDrawerCore: <T extends Constructor<LitElement>>(superClass: T) => Constructor<MonoDrawerCoreInterface> & T;
+/** Public + shared-protected surface added by the core mixin. */
+export declare class MonoDrawerCoreInterface implements PopupLayer {
+    position: DrawerPosition;
+    size: DrawerSize;
+    color: DrawerColor;
+    title: string;
+    subtitle: string;
+    modelValue: boolean;
+    dismissible: boolean;
+    persistent: boolean;
+    overlay: boolean;
+    closeOnEscape: boolean;
+    closeOnOverlay: boolean;
+    lockScroll: boolean;
+    resizeable: boolean;
+    autoFullscreen: MonoAutoFullscreen;
+    stackable: boolean;
+    zIndex?: number;
+    width?: string | number;
+    height?: string | number;
+    cssClass: DrawerCssClass;
+    cssClassName: string;
+    show(source?: DrawerSource, sourceEvent?: Event): void;
+    hide(source?: DrawerSource, sourceEvent?: Event): void;
+    toggle(source?: DrawerSource, sourceEvent?: Event): void;
+    get lockBodyScroll(): boolean;
+    get hasBackdrop(): boolean;
+    get pinnedZ(): number | undefined;
+    onStackEscape(event: KeyboardEvent): void;
+    setStackZ(z: number, isTopBackdrop: boolean): void;
+    protected _slotsCaptured: boolean;
+    protected _hasHeaderSlotState: boolean;
+    protected _hasTitleSlotState: boolean;
+    protected _hasSubtitleSlotState: boolean;
+    protected get _headingState(): {
+        title: boolean;
+        subtitle: boolean;
+        heading: boolean;
+    };
+    protected get _headingIdBase(): string;
+    protected _headingAria(): {
+        labelledby?: string;
+        describedby?: string;
+    };
+    protected _hasBodySlotState: boolean;
+    protected _hasFooterSlotState: boolean;
+    protected _drawerZ: number;
+    protected get _effectiveZ(): number;
+    protected _panelEl?: HTMLElement;
+    protected get _isMonoDrawer(): boolean;
+    protected _computeDrawerClasses(): string[];
+    protected _setCssClass(value: unknown): void;
+    protected _cls(base: string, key: keyof DrawerCssClass): string;
+    protected _computeRootAttrs(): Record<string, string | null>;
+    protected _applyRootAttrs(root: HTMLElement | null | undefined): void;
+    protected bindRoot: (el: Element | undefined) => void;
+    /** The shadow build's inner root, bound by `bindRoot`. */
+    protected _rootEl: HTMLElement | null;
+    protected _toBoolean(value: unknown): boolean;
+    protected _applyOpenSideEffects(): void;
+    protected _releaseSideEffects(): void;
+    protected _setDrawerSizeVar(name: string, value: string): void;
+    protected _removeDrawerSizeVar(name: string): void;
+    protected _onResizeStart: (event: PointerEvent) => void;
+    protected _renderDrawerBody(): TemplateResult;
+    protected get _slotsAlwaysRender(): boolean;
+    protected _hasSlot(name: DrawerSlotName): boolean;
+    protected _setSlotState(name: DrawerSlotName, has: boolean): void;
+    protected _slotOutlet(name: DrawerSlotName, fallback?: unknown): TemplateResult;
+    protected renderIcon(name: 'close'): TemplateResult;
+}

package/dist/src/components/drawer/drawer-types.d.ts

@@ -0,0 +1,153 @@
+import { MonoBreakpoint } from '../../composables/breakpoints';
+export type DrawerPosition = 'left' | 'right' | 'top' | 'bottom';
+/**
+ * Content scale of the drawer — title font, body font, padding and the close icon.
+ * The same 6-step scale accordion, modal and the form controls use.
+ *
+ * It does **not** set the panel's width or height. Use the `width` / `height` props
+ * (or `--mono-drawer-width` / `--mono-drawer-height`) for that, so a compact
+ * `size="sm"` drawer can still be wide. Before 2026-08-17 `size` was a dimension
+ * preset; the old `size="full"` is now `width="100%"` for a left/right drawer or
+ * `height="100%"` for a top/bottom one.
+ */
+export type DrawerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+/**
+ * Named dimension presets accepted by `width` and `height`.
+ *
+ * The same six tokens as {@link DrawerSize}, on a different axis — `size` scales the
+ * CONTENT, these name a MEASURE. Widths (left/right) are `220px` … `900px` and
+ * heights (top/bottom) `22vh` … `95vh`; `md` reproduces the drawer's stylesheet
+ * defaults, `420px` and `50vh`.
+ */
+export type DrawerDimensionPreset = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+/**
+ * A dimension-prop value: a {@link DrawerDimensionPreset} token, any CSS length
+ * string, or a number / numeric string read as px.
+ *
+ * The `string & {}` arm keeps the token list in editor autocomplete without
+ * narrowing the type — `"32rem"` is still perfectly valid.
+ */
+export type DrawerDimension = DrawerDimensionPreset | (string & {}) | number;
+export type DrawerColor = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'teal' | 'purple' | 'neutral' | 'dark';
+export type DrawerSource = 'overlay' | 'close' | 'escape' | 'manual';
+export interface DrawerCssClass {
+    root?: string;
+    overlay?: string;
+    panel?: string;
+    head?: string;
+    /** The heading column inside the head (title + subtitle, or `slot="header"`). */
+    heading?: string;
+    title?: string;
+    subtitle?: string;
+    close?: string;
+    body?: string;
+    foot?: string;
+    resizer?: string;
+}
+export type DrawerClickEventDetail = {
+    modelValue: boolean;
+    currentValue: boolean;
+    oldValue: boolean;
+    value: boolean;
+    source: DrawerSource;
+    sourceEvent?: Event;
+};
+export type DrawerClickEvent = CustomEvent<DrawerClickEventDetail>;
+/** Emitted on the false → true transition only. */
+export type DrawerOpenEventDetail = DrawerClickEventDetail;
+export type DrawerOpenEvent = CustomEvent<DrawerOpenEventDetail>;
+/** Emitted on the true → false transition only. */
+export type DrawerCloseEventDetail = DrawerClickEventDetail;
+export type DrawerCloseEvent = CustomEvent<DrawerCloseEventDetail>;
+export interface DrawerProps {
+    /** Two-way bound open state of the drawer. */
+    modelValue?: boolean;
+    'model-value'?: boolean;
+    modelvalue?: boolean;
+    /** Edge the drawer slides in from. */
+    position?: DrawerPosition;
+    /** Sizing scale of the drawer panel. */
+    size?: DrawerSize;
+    /** Color theme applied to the drawer. */
+    color?: DrawerColor;
+    /** Heading text shown in the drawer header. `slot="title"` replaces it. */
+    title?: string;
+    /**
+     * Secondary line under the title — muted and smaller, hidden when empty.
+     * `slot="subtitle"` replaces it; `slot="header"` replaces title + subtitle
+     * together (the close ✕ stays).
+     */
+    subtitle?: string;
+    /** Shows a close button and allows dismissal. */
+    dismissible?: boolean;
+    /** Prevents closing via overlay click or escape. */
+    persistent?: boolean;
+    /** Renders a backdrop overlay behind the panel. */
+    overlay?: boolean;
+    /** Closes the drawer when the Escape key is pressed. */
+    closeOnEscape?: boolean;
+    'close-on-escape'?: boolean;
+    closeonescape?: boolean;
+    /** Closes the drawer on a click outside the panel: the overlay, or — with `overlay: false` — the page itself (the click still reaches the page). */
+    closeOnOverlay?: boolean;
+    'close-on-overlay'?: boolean;
+    closeonoverlay?: boolean;
+    /**
+     * Locks page scroll while the drawer is open (default `true`). The lock is shared
+     * across overlapping overlays, so it lifts only when the last one closes.
+     */
+    lockScroll?: boolean;
+    'lock-scroll'?: boolean;
+    lockscroll?: boolean;
+    /**
+     * Fill the screen at a breakpoint and below (default `false`). `auto-fullscreen`
+     * on its own means Tailwind's `sm` (< 640px); a token moves the boundary, so
+     * `auto-fullscreen="lg"` covers everything `lg:` does not match (< 1024px).
+     */
+    autoFullscreen?: boolean | MonoBreakpoint;
+    'auto-fullscreen'?: boolean | MonoBreakpoint;
+    autofullscreen?: boolean | MonoBreakpoint;
+    /** Allow resizing the drawer by dragging a handle on the panel's inner edge. */
+    resizeable?: boolean;
+    /**
+     * Allow this drawer to stack on top of others. When false (default) it is
+     * exclusive — opening it closes any other open drawers.
+     */
+    stackable?: boolean;
+    /**
+     * Panel dimensions. Each accepts a preset token (`"xs"`…`"xxl"` — see
+     * {@link DrawerDimensionPreset}), a CSS length string (`"12rem"`, `"80%"`,
+     * `"100vw"`), or a number / numeric string (interpreted as px).
+     *
+     * `width` applies to left/right drawers, `height` to top/bottom ones — the other
+     * axis is pinned to the viewport edge by `position`. `width="100%"` (or
+     * `height="100%"`) replaces the old `size="full"`.
+     */
+    width?: DrawerDimension;
+    height?: DrawerDimension;
+    /**
+     * Pin the drawer to an explicit stacking level. Unset (the default) lets the
+     * shared popup stack assign one so the newest layer is always on top. The value
+     * is the overlay's `z-index`; the panel sits one above it.
+     */
+    zIndex?: number | string;
+    'z-index'?: number | string;
+    zindex?: number | string;
+    /** Per-element class overrides for internal parts. */
+    cssClass?: DrawerCssClass;
+    cssclass?: DrawerCssClass;
+    'css-class'?: DrawerCssClass | string;
+    /** Extra class name applied to the drawer root. */
+    cssClassName?: string;
+}
+export interface DrawerEvents {
+    toggle: DrawerClickEvent;
+    open: DrawerOpenEvent;
+    close: DrawerCloseEvent;
+    'mno-click': DrawerClickEvent;
+    mnoClick: DrawerClickEvent;
+    'mno-open': DrawerOpenEvent;
+    mnoOpen: DrawerOpenEvent;
+    'mno-close': DrawerCloseEvent;
+    mnoClose: DrawerCloseEvent;
+}

package/dist/src/components/drawer/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference path="../../../vue.d.ts" />
+export { MonoDrawer } from './mono-drawer.js';
+export type { DrawerPosition, DrawerSize, DrawerDimensionPreset, DrawerDimension, DrawerColor, DrawerSource, DrawerCssClass, DrawerClickEventDetail, DrawerClickEvent, DrawerOpenEventDetail, DrawerOpenEvent, DrawerCloseEventDetail, DrawerCloseEvent, DrawerProps, DrawerEvents, } from './drawer-types.js';

package/dist/src/components/drawer/index.shadow.d.ts

@@ -0,0 +1,4 @@
+/// <reference path="../../../vue.d.ts" />
+export { MonoDrawerShadow } from './mono-drawer.shadow.js';
+export { MonoDrawerCore, type DrawerSlotName } from './drawer-core.js';
+export type { DrawerPosition, DrawerSize, DrawerDimensionPreset, DrawerDimension, DrawerColor, DrawerSource, DrawerCssClass, DrawerClickEventDetail, DrawerClickEvent, DrawerOpenEventDetail, DrawerOpenEvent, DrawerCloseEventDetail, DrawerCloseEvent, DrawerProps, DrawerEvents, } from './drawer-types.js';

package/dist/src/components/drawer/mono-drawer.d.ts

@@ -0,0 +1,45 @@
+import { LitElement, TemplateResult } from 'lit';
+declare const MonoDrawer_base: import('../../composables/hybird-prop').Constructor<import('./drawer-core.js').MonoDrawerCoreInterface> & typeof LitElement;
+/**
+ * Light-DOM `mono-drawer` (the default build).
+ *
+ * Renders into a `<div data-mono-drawer-portal>` appended to `<body>` — the only
+ * reliable way to escape transformed / filtered ancestors that would otherwise
+ * hijack the containing block of the `position: fixed` overlay + panel. The
+ * portal div IS the `.mono-drawer` root, so the shared markup from
+ * `MonoDrawerCore._renderDrawerBody()` is rendered straight into it; state
+ * classes + `--drawer-z`/resize size-vars are applied imperatively to the portal,
+ * and the header/title/subtitle/body/footer slots are captured from light-DOM children and
+ * re-parented into `[data-mono-slot]` placeholders. The SSR build lives in
+ * `mono-drawer.shadow.ts`; all logic is shared via `MonoDrawerCore`.
+ */
+export declare class MonoDrawer extends MonoDrawer_base {
+    static styles: import('lit').CSSResult[];
+    private _portal;
+    private _appliedPortalClasses;
+    private _slotHeader;
+    private _slotTitle;
+    private _slotSubtitle;
+    private _slotBody;
+    private _slotFooter;
+    /** Parking for captured title/subtitle nodes a `slot="header"` displaced. */
+    private _orphanHolder?;
+    protected createRenderRoot(): HTMLElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    /** Light build: the size-vars live on the portal (the `.mono-drawer` root). */
+    protected _setDrawerSizeVar(name: string, value: string): void;
+    protected _removeDrawerSizeVar(name: string): void;
+    private _updatePortalClasses;
+    private _updatePortalAttributes;
+    protected render(): TemplateResult;
+    private _captureSlots;
+    private _placeSlot;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mono-drawer': MonoDrawer;
+    }
+}
+export {};

package/dist/src/components/drawer/mono-drawer.shadow.d.ts

@@ -0,0 +1,46 @@
+import { LitElement, TemplateResult } from 'lit';
+import { DrawerSlotName } from './drawer-core.js';
+declare const MonoDrawerShadow_base: import('../../composables/hybird-prop').Constructor<import('./drawer-core.js').MonoDrawerCoreInterface> & typeof LitElement;
+/**
+ * Shadow-DOM `mono-drawer` (the opt-in SSR build, `@mono-lit/helper/ui/shadow/drawer`).
+ *
+ * Real shadow root + `static styles`, so `@lit-labs/ssr` serializes it to
+ * Declarative Shadow DOM. Unlike the light build (which renders into a `<body>`
+ * portal that IS the `.mono-drawer` root), the shadow build can't portal — so it
+ * renders an inner `.mono-drawer` root inside the shadow tree and carries the
+ * state classes + `--drawer-z` there (mirrors `mono-modal.shadow.ts`). The
+ * overlay/panel stay `position: fixed`; z-stacking / scroll-lock / Escape all
+ * flow through the SSR-safe `popup-stack`. Slots are native `<slot>`s (default =
+ * body), scanned in `firstUpdated`/`updated`. Shares all logic with the light
+ * build via `MonoDrawerCore`; both register `mono-drawer`.
+ */
+export declare class MonoDrawerShadow extends MonoDrawerShadow_base {
+    static styles: import('lit').CSSResult[];
+    protected get _slotsAlwaysRender(): boolean;
+    /** Shadow build: the size-vars live on the inner `.mono-drawer` root. */
+    protected _setDrawerSizeVar(name: string, value: string): void;
+    connectedCallback(): void;
+    firstUpdated(changed: Map<string, unknown>): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private _slotFor;
+    private _defaultSlot;
+    private _slotHasContent;
+    private _onSlotChange;
+    /** Reconcile the 3 slot-presence flags from their slots' assigned content.
+     *  Body is the default (unnamed) slot OR an explicit `slot="body"`. */
+    private _scanSlots;
+    /**
+     * Native `<slot>`. Body accepts both the default (unnamed) slot and an
+     * explicit `slot="body"` — matching the light build's capture, which treats
+     * unslotted children and `slot="body"` alike.
+     */
+    protected _slotOutlet(name: DrawerSlotName, fallback?: unknown): TemplateResult;
+    /** Inline SVG — the global `.mono-icon`/`i-mdi-close` UnoCSS icon can't reach
+     *  a shadow root. */
+    protected renderIcon(_name: 'close'): TemplateResult;
+    /** Ids are scoped to this shadow root, so a constant is unique enough — and,
+     *  unlike a counter, the same on the server and the client. */
+    protected get _headingIdBase(): string;
+    protected render(): TemplateResult;
+}
+export {};

package/dist/src/components/dropdown/dropdown-core.d.ts

@@ -0,0 +1,33 @@
+import { LitElement } from 'lit';
+import { DropdownPlacement, DropdownTrigger, DropdownSize, DropdownColor, DropdownSource, DropdownCssClass } from './dropdown-types.js';
+import { Constructor } from '../../composables/hybird-prop';
+import { PopupPortalController } from '../../composables/popup-portal';
+/** Public surface added by the core mixin (for typing the wrappers + tag map). */
+export declare class MonoDropdownCoreInterface {
+    placement: DropdownPlacement;
+    trigger: DropdownTrigger;
+    size: DropdownSize;
+    color: DropdownColor;
+    modelValue: boolean;
+    disabled: boolean;
+    flip: boolean;
+    shift: boolean;
+    offset: number;
+    closeOnOutsideClick: boolean;
+    closeOnEscape: boolean;
+    cssClass: DropdownCssClass;
+    cssClassName: string;
+    show(source?: DropdownSource): void;
+    hide(source?: DropdownSource): void;
+    toggle(source?: DropdownSource): void;
+    protected _cls(base: string, key: keyof DropdownCssClass): string;
+    protected _computeHostClasses(): string[];
+    protected _computeRootAttrs(): Record<string, string | null>;
+    protected _applyRootAttrs(root: HTMLElement | null | undefined): void;
+    protected _updateHostClasses(): void;
+    protected _activeMainNodes(): HTMLElement[];
+    protected _syncTriggerListeners(): void;
+    protected _positionPanel(): void;
+    protected _popup: PopupPortalController;
+}
+export declare const MonoDropdownCore: <T extends Constructor<LitElement>>(superClass: T) => Constructor<MonoDropdownCoreInterface> & T;