@mono-lit/helper 0.0.0-stage → 0.0.1

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

@@ -0,0 +1,258 @@
+import { PanelSizeProps } from '../../composables/css-size';
+import { MonoDataSource, LoadMoreMode } from '../../composables/data-source-controller';
+import { VisibilityProps } from '../../composables/visibility';
+import { MonoSearchValue } from '../../search/data-search';
+/**
+ * Sizes the popup PANEL only, independent of the field — the same object
+ * `<mono-tag-input>` and `<mono-dropdown-table>` take. `height` is an exact height and
+ * `maxHeight` the cap.
+ */
+export type SelectDropdownOptions = PanelSizeProps;
+export type SelectSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export type SelectColor = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'teal' | 'purple' | 'neutral' | 'dark';
+export type SelectVariant = 'outlined' | 'filled' | 'underlined';
+export type SelectValidationState = 'default' | 'valid' | 'invalid' | 'warning';
+export type SelectValue = unknown;
+export interface SelectItem {
+    label?: string;
+    value?: unknown;
+    disabled?: boolean;
+    [key: string]: unknown;
+}
+/**
+ * A field name, or an accessor over the consumer's OWN row type. The parameter is
+ * `any` on purpose (matching `monoDataDropdown`'s `displayExpr`): under
+ * `strictFunctionTypes` a `(row: User) => string` is not assignable to
+ * `(item: SelectItem) => string`, and the row type is the consumer's to know.
+ */
+export type SelectDisplayValue = string | ((item: any) => string);
+/**
+ * Per-level accessors for grouped options — one entry per group level. Each
+ * resolves a group header's label from a representative leaf row of that group:
+ * a string reads `row[field]`; a function receives the row.
+ */
+export type SelectDisplayGroup = Array<string | ((item: any) => string)>;
+/** Re-exported so consumers can type a `search-value` binding without a deep import. */
+export type { MonoSearchValue };
+/**
+ * Structural shape of a devextreme DataSource (duck-typed; no hard dependency).
+ * Aliased to the shared {@link MonoDataSource} so select and other components
+ * share one definition.
+ */
+export type SelectDataSource<T = SelectItem> = MonoDataSource<T>;
+/**
+ * Incremental loading mode. Works with BOTH a paged DataSource and a plain
+ * `items` array (the array is revealed one `page-size` chunk at a time):
+ * - 'button' → render a "Load more" button at the end of the list.
+ * - 'scroll' → load/reveal the next chunk when scrolled near the bottom.
+ */
+export type SelectLoadMore = LoadMoreMode;
+/** @deprecated Use {@link SelectLoadMore}. */
+export type SelectDataSourceLoadMore = SelectLoadMore;
+export interface SelectCssClass {
+    root?: string;
+    label?: string;
+    required?: string;
+    trigger?: string;
+    value?: string;
+    placeholder?: string;
+    searchField?: string;
+    actions?: string;
+    clear?: string;
+    arrow?: string;
+    dropdown?: string;
+    dropdownBody?: string;
+    group?: string;
+    item?: string;
+    itemActive?: string;
+    itemSelected?: string;
+    itemDisabled?: string;
+    loadMore?: string;
+    messageWrap?: string;
+    message?: string;
+}
+export type SelectModelEventDetail<TValue = SelectValue> = {
+    modelValue: TValue;
+    currentValue: TValue;
+    oldValue: TValue;
+    value: TValue;
+    selectedItem?: SelectItem;
+    sourceEvent?: Event;
+};
+export type SelectModelEvent<TValue = SelectValue> = CustomEvent<SelectModelEventDetail<TValue>>;
+export interface SelectProps extends VisibilityProps {
+    /** The currently selected value. */
+    modelValue?: SelectValue;
+    'model-value'?: SelectValue;
+    modelvalue?: SelectValue;
+    /** Alias for the selected value, kept in sync with modelValue. */
+    value?: SelectValue;
+    /** List of selectable items, as an array or JSON string. */
+    items?: SelectItem[] | string;
+    /** DataSource used to drive the item list, taking precedence over items. */
+    dataSource?: SelectDataSource;
+    'data-source'?: SelectDataSource;
+    datasource?: SelectDataSource;
+    /** Auto-load the DataSource on attach when it has no items yet. */
+    immediate?: boolean;
+    /** Incremental loading mode: scroll, button, or off. */
+    loadMore?: SelectLoadMore | boolean | '';
+    'load-more'?: SelectLoadMore | boolean | '';
+    loadmore?: SelectLoadMore | boolean | '';
+    /** Chunk size used when paging a plain items array. */
+    pageSize?: number;
+    'page-size'?: number;
+    pagesize?: number;
+    /** Item property name used as the model value. */
+    keyValue?: string;
+    'key-value'?: string;
+    keyvalue?: string;
+    /** Item property name or function used to derive display text. */
+    displayValue?: SelectDisplayValue;
+    'display-value'?: SelectDisplayValue;
+    displayvalue?: SelectDisplayValue;
+    /** Per-level accessors for grouped options (header label per group level). */
+    displayGroup?: SelectDisplayGroup;
+    'display-group'?: SelectDisplayGroup;
+    displaygroup?: SelectDisplayGroup;
+    /** Field holding a group node's key (default 'key'). */
+    groupKey?: string;
+    'group-key'?: string;
+    groupkey?: string;
+    /** Field holding a group node's child array (default 'items'). */
+    groupItems?: string;
+    'group-items'?: string;
+    groupitems?: string;
+    /** Turn the field itself into a search input (combobox); server query when a DataSource is bound. */
+    searchable?: boolean;
+    /**
+     * Field(s) the search matches (server query + client filter target). A comma
+     * string or an array; entries may be plain columns, paths (`Company.Name`,
+     * `Transaction.[*].Price`), `*` patterns (`'*'`, `'*.[*].*'`) or, in array
+     * form, `{ field, custom }` clause builders.
+     */
+    searchValue?: MonoSearchValue;
+    'search-value'?: MonoSearchValue;
+    searchvalue?: MonoSearchValue;
+    /** devextreme search operation for server search (default 'contains'). */
+    searchOperation?: string;
+    'search-operation'?: string;
+    searchoperation?: string;
+    /** Debounce (ms) before a server search fires (default 300). */
+    searchDebounce?: number;
+    'search-debounce'?: number;
+    searchdebounce?: number;
+    /** Placeholder shown in the field while it is open/searching (falls back to `placeholder`). */
+    searchPlaceholder?: string;
+    'search-placeholder'?: string;
+    searchplaceholder?: string;
+    /** Group a plain, paginated DataSource client-side (keeps scroll/load-more). */
+    group?: boolean;
+    /** Keep group headers pinned to the top while their rows scroll. */
+    groupSticky?: boolean;
+    'group-sticky'?: boolean;
+    groupsticky?: boolean;
+    /**
+     * Sizes the popup PANEL only, independent of the field —
+     * `:dropdown.prop="{ width: 460, maxHeight: 320 }"`.
+     *
+     * Without it the panel matches the field's width, which is right for a picker whose options read
+     * as continuations of the field, and wrong for a wide one. Setting `width` also stops the panel
+     * tracking the field.
+     *
+     * The widths land on the panel and the heights on its scrolling body, which is why a fixed
+     * `height` here still scrolls rather than clipping.
+     */
+    dropdown?: SelectDropdownOptions;
+    /** Fixed height of the scrollable dropdown list. */
+    dropdownHeight?: string | number;
+    'dropdown-height'?: string | number;
+    dropdownheight?: string | number;
+    /** Maximum height of the scrollable dropdown list. */
+    dropdownMaxHeight?: string | number;
+    'dropdown-max-height'?: string | number;
+    dropdownmaxheight?: string | number;
+    /**
+     * Exempt this select from every automatic close — clicking or focusing
+     * anything outside it, which includes opening another select. Not a lock: its
+     * own trigger, Escape and picking an item still close it. Set it on every
+     * select to allow several dropdowns open at once.
+     */
+    stayOpen?: boolean;
+    'stay-open'?: boolean;
+    stayopen?: boolean;
+    /** Visual size of the select. */
+    size?: SelectSize;
+    /** Color theme applied to the select. */
+    color?: SelectColor;
+    /** Visual style variant of the select. */
+    variant?: SelectVariant;
+    /** Text label shown above the select. */
+    label?: string;
+    /** Placeholder text shown when no value is selected. */
+    placeholder?: string;
+    /** Helper text shown below the select. */
+    helperText?: string;
+    'helper-text'?: string;
+    helpertext?: string;
+    /** Validation state controlling the select's appearance. */
+    validationState?: SelectValidationState;
+    'validation-state'?: SelectValidationState;
+    validationstate?: SelectValidationState;
+    /** Validation message shown below the select. */
+    validationMessage?: string;
+    'validation-message'?: string;
+    validationmessage?: string;
+    /** Error message shown below the select. */
+    errorMessage?: string;
+    'error-message'?: string;
+    errormessage?: string;
+    /** Success message shown below the select. */
+    successMessage?: string;
+    'success-message'?: string;
+    successmessage?: string;
+    /** Form field name submitted with the value. */
+    name?: string;
+    /** Disables the select, preventing interaction. */
+    disabled?: boolean;
+    /** Makes the select read-only, blocking value changes. */
+    readonly?: boolean;
+    /** Marks the select as required and shows a required indicator. */
+    required?: boolean;
+    /** Shows a clear button to reset the selected value. */
+    clearable?: boolean;
+    /** Accessible label used when no visible label is present. */
+    ariaLabelText?: string;
+    ariaLabel?: string;
+    'aria-label'?: string;
+    'aria-label-text'?: string;
+    arialabel?: string;
+    arialabeltext?: string;
+    /**
+     * Explicit sizing of the field. Each accepts a CSS length string (`"320px"`,
+     * `"80%"`) or a number (interpreted as px). Use `width="100%"` for full width.
+     * (Distinct from `dropdownHeight`/`dropdownMaxHeight`, which size the popup.)
+     */
+    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;
+    /** Custom CSS classes applied to internal select parts. */
+    cssClass?: SelectCssClass;
+    cssclass?: SelectCssClass;
+    'css-class'?: SelectCssClass | string;
+}
+export interface SelectEvents {
+    change: SelectModelEvent;
+    clear: SelectModelEvent;
+    'mno-change': SelectModelEvent;
+    mnoChange: SelectModelEvent;
+    'mno-clear': SelectModelEvent;
+    mnoClear: SelectModelEvent;
+}

package/dist/src/components/select/select-utils.d.ts

@@ -0,0 +1,7 @@
+import { SelectColor, SelectSize, SelectValidationState, SelectVariant } from './select-types.js';
+export declare function validateSelectProps(props: {
+    size?: SelectSize;
+    color?: SelectColor;
+    variant?: SelectVariant;
+    validationState?: SelectValidationState;
+}): boolean;

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

@@ -0,0 +1,4 @@
+/// <reference path="../../../vue.d.ts" />
+export { MonoSidebar } from './mono-sidebar.js';
+export type { SidebarMode, SidebarLocation, SidebarDensity, SidebarColor, SidebarVariant, SidebarSource, SidebarCssClass, SidebarChangeEventDetail, SidebarChangeEvent, SidebarClickEventDetail, SidebarClickEvent, SidebarOpenEventDetail, SidebarOpenEvent, SidebarCloseEventDetail, SidebarCloseEvent, SidebarProps, SidebarEvents, } from './sidebar-types.js';
+export { SIDEBAR_AUTO_BREAKPOINT, isAutoTemporary, resolveMode, generateSidebarRootClasses, validateSidebarProps, } from './sidebar-utils.js';

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

@@ -0,0 +1,6 @@
+/// <reference path="../../../vue.d.ts" />
+export { MonoSidebarShadow } from './mono-sidebar.shadow.js';
+export { MonoSidebarCore } from './sidebar-core.js';
+export type { SidebarSlotName } from './sidebar-core.js';
+export type { SidebarMode, SidebarLocation, SidebarDensity, SidebarColor, SidebarVariant, SidebarSource, SidebarCssClass, SidebarChangeEventDetail, SidebarChangeEvent, SidebarClickEventDetail, SidebarClickEvent, SidebarOpenEventDetail, SidebarOpenEvent, SidebarCloseEventDetail, SidebarCloseEvent, SidebarProps, SidebarEvents, } from './sidebar-types.js';
+export { SIDEBAR_AUTO_BREAKPOINT, isAutoTemporary, resolveMode, generateSidebarRootClasses, validateSidebarProps, } from './sidebar-utils.js';

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

@@ -0,0 +1,34 @@
+import { LitElement, TemplateResult } from 'lit';
+declare const MonoSidebar_base: import('../../composables/hybird-prop').Constructor<import('./sidebar-core.js').MonoSidebarCoreInterface> & typeof LitElement;
+/**
+ * Light-DOM `mono-sidebar` (default build, `@mono-lit/helper/ui/sidebar`).
+ *
+ * Renders into the host (`createRenderRoot`→`this`, styled by the global
+ * `dist/ui/index.css`) with the light-DOM slot strategy: `slot="header"`/
+ * `"footer"`/`"body"` (or unslotted) children are captured in
+ * `connectedCallback`, the template renders empty `[data-mono-slot]` targets,
+ * and the captured nodes are re-appended in `updated()`. All render-mode-agnostic
+ * logic lives in `MonoSidebarCore`. The shadow build
+ * (`@mono-lit/helper/ui/shadow/sidebar`) shares the mixin but uses native `<slot>`.
+ * Both register `mono-sidebar`, so a document loads only one.
+ */
+export declare class MonoSidebar extends MonoSidebar_base {
+    static styles: import('lit').CSSResult[];
+    protected createRenderRoot(): HTMLElement;
+    private _slotsCaptured;
+    private _slotHeader;
+    private _slotBody;
+    private _slotFooter;
+    connectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    protected renderIcon(_name: 'chevron'): TemplateResult;
+    private _captureSlots;
+    private _placeSlots;
+    private _placeSlot;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mono-sidebar': MonoSidebar;
+    }
+}
+export {};

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

@@ -0,0 +1,27 @@
+import { LitElement, TemplateResult } from 'lit';
+import { SidebarSlotName } from './sidebar-core.js';
+declare const MonoSidebarShadow_base: import('../../composables/hybird-prop').Constructor<import('./sidebar-core.js').MonoSidebarCoreInterface> & typeof LitElement;
+/**
+ * Shadow-DOM `mono-sidebar` (SSR build, `@mono-lit/helper/ui/shadow/sidebar`).
+ *
+ * Real shadow root + `static styles` (the `:host`-adapted sheet), so
+ * `@lit-labs/ssr` serializes it to Declarative Shadow DOM. Slotting uses native
+ * `<slot>`; the chevron icon is inline SVG (the global `.mono-icon`/`i-mdi-*`
+ * UnoCSS icon can't reach a shadow root).
+ *
+ * Caveat: sidebar CSS that targets slotted `<mono-menu>` descendants (the
+ * rail-collapse-to-icons rules) cannot reach into slotted light-DOM content from
+ * a shadow root — those rules are inert here. The core covers that path instead
+ * by publishing `data-rail-collapsed` on the host, which `<mono-menu>` mirrors
+ * via MutationObserver (see `menu-core.ts` `_setupRailSync`).
+ *
+ * Shares all logic with the light build via `MonoSidebarCore`. Both register
+ * `mono-sidebar`, so a document loads only one build.
+ */
+export declare class MonoSidebarShadow extends MonoSidebarShadow_base {
+    static styles: import('lit').CSSResult[];
+    connectedCallback(): void;
+    protected renderSlot(name: SidebarSlotName): TemplateResult;
+    protected renderIcon(_name: 'chevron'): TemplateResult;
+}
+export {};

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

@@ -0,0 +1,51 @@
+import { LitElement, TemplateResult } from 'lit';
+import { SidebarMode, SidebarLocation, SidebarDensity, SidebarColor, SidebarVariant, SidebarSource, SidebarCssClass } from './sidebar-types.js';
+import { Constructor } from '../../composables/hybird-prop';
+/** Slot regions the sidebar lays out. `body` is the default (unnamed) region. */
+export type SidebarSlotName = 'header' | 'body' | 'footer';
+/** Public + shared-protected surface added by the core mixin. */
+export declare class MonoSidebarCoreInterface {
+    modelValue: boolean;
+    mode: SidebarMode;
+    location: SidebarLocation;
+    density: SidebarDensity;
+    color: SidebarColor;
+    variant: SidebarVariant;
+    width: number;
+    railWidth: number;
+    expandOnHover: boolean;
+    rail: boolean | null;
+    contained: boolean;
+    persistent: boolean;
+    closeOnEscape: boolean;
+    closeOnScrim: boolean;
+    lockScroll: boolean;
+    showScrim: boolean;
+    cssClass: SidebarCssClass;
+    cssClassName: string;
+    open(source?: SidebarSource, sourceEvent?: Event): void;
+    hide(source?: SidebarSource, sourceEvent?: Event): void;
+    close(source?: SidebarSource, sourceEvent?: Event): void;
+    toggle(source?: SidebarSource, sourceEvent?: Event): void;
+    expandRail(): void;
+    collapseRail(): void;
+    protected _setCssClass(value: unknown): void;
+    protected _cls(base: string, key: keyof SidebarCssClass): string;
+    protected renderSlot(name: SidebarSlotName): TemplateResult;
+    protected renderIcon(name: 'chevron'): TemplateResult;
+}
+/**
+ * `MonoSidebarCore` — all render-mode-agnostic logic for `mono-sidebar`:
+ * reactive props, hybrid aliases, mode resolution (auto→permanent/temporary via
+ * the breakpoint), layout-var side effects, scroll-lock/escape side effects,
+ * open/close state + events, and the chrome `render()`.
+ *
+ * SSR-safe: every `document`/`window` path is guarded by `isServer` (lit) — NOT
+ * `typeof document/window`, which is unreliable under @lit-labs/ssr (it defines
+ * both on the server).
+ *
+ * Leaves to each build: `createRenderRoot()`, the slot strategy, `renderSlot()`
+ * (light: empty + capture into `[data-mono-slot]`; shadow: native `<slot>`), and
+ * `renderIcon()` (light: `.mono-icon` UnoCSS icon; shadow: inline SVG).
+ */
+export declare const MonoSidebarCore: <T extends Constructor<LitElement>>(superClass: T) => Constructor<MonoSidebarCoreInterface> & T;

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

@@ -0,0 +1,119 @@
+/**
+ * Sidebar (navigation drawer) Component Type Definitions
+ */
+export type SidebarMode = 'permanent' | 'temporary' | 'rail' | 'auto';
+export type SidebarLocation = 'left' | 'right';
+export type SidebarDensity = 'compact' | 'comfortable' | 'default';
+/**
+ * A theme palette slot, `surface` for the unpainted default, or any CSS color —
+ * `#7c3aed`, `rgb(124 58 237)`, `hsl(258 90% 66%)`.
+ *
+ * A slot name follows the active `.theme-color-*` preset automatically; a literal is
+ * carried inline and its ink is derived from its own luminance. Note `teal` and
+ * `purple` are CSS keywords too — the slot list is matched first, so they always mean
+ * the theme colour.
+ *
+ * The `(string & {})` arm keeps the slot names in editor autocomplete.
+ */
+export type SidebarColorToken = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'teal' | 'purple' | 'neutral' | 'dark' | 'surface';
+export type SidebarColor = SidebarColorToken | (string & {}) | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'teal' | 'purple' | 'neutral' | 'dark' | 'surface';
+export type SidebarVariant = 'flat' | 'elevated' | 'outlined';
+export type SidebarSource = 'scrim' | 'escape' | 'rail-toggle' | 'rail-hover' | 'manual';
+export interface SidebarCssClass {
+    root?: string;
+    panel?: string;
+    scrim?: string;
+    rail?: string;
+    header?: string;
+    body?: string;
+    footer?: string;
+    railToggle?: string;
+}
+export type SidebarChangeEventDetail = {
+    modelValue: boolean;
+    currentValue: boolean;
+    oldValue: boolean;
+    value: boolean;
+    source: SidebarSource;
+    sourceEvent?: Event;
+};
+export type SidebarChangeEvent = CustomEvent<SidebarChangeEventDetail>;
+/**
+ * Back-compat alias. The sidebar's state-change event was previously named
+ * `mno-click`; it has been renamed to `mno-change` (plain `change`) to match the v-model
+ * convention used by other components and to avoid bubble-collisions with
+ * `<mono-menu>`'s per-item `click` event.
+ */
+export type SidebarClickEventDetail = SidebarChangeEventDetail;
+export type SidebarClickEvent = SidebarChangeEvent;
+/** Emitted on the false → true transition only. */
+export type SidebarOpenEventDetail = SidebarChangeEventDetail;
+export type SidebarOpenEvent = CustomEvent<SidebarOpenEventDetail>;
+/** Emitted on the true → false transition only. */
+export type SidebarCloseEventDetail = SidebarChangeEventDetail;
+export type SidebarCloseEvent = CustomEvent<SidebarCloseEventDetail>;
+export interface SidebarProps {
+    /** Controls whether the sidebar is open. */
+    modelValue?: boolean;
+    'model-value'?: boolean;
+    modelvalue?: boolean;
+    /** Display mode: permanent, temporary, rail, or auto. */
+    mode?: SidebarMode;
+    /** Side of the viewport the sidebar is anchored to. */
+    location?: SidebarLocation;
+    /** Spacing density of the sidebar contents. */
+    density?: SidebarDensity;
+    /** Color theme applied to the sidebar. */
+    color?: SidebarColor;
+    /** Visual style variant of the sidebar. */
+    variant?: SidebarVariant;
+    /** Expanded width of the sidebar in pixels. */
+    width?: number;
+    /** Collapsed rail width of the sidebar in pixels. */
+    railWidth?: number;
+    'rail-width'?: number;
+    /** Expand the rail on hover while collapsed. */
+    expandOnHover?: boolean;
+    'expand-on-hover'?: boolean;
+    /**
+     * External rail-state binding. Provide a boolean to take over the rail's
+     * expanded/collapsed state — clicking any external button you wire up can
+     * mutate the bound value to flip the sidebar. Setting this prop also
+     * **hides the default chevron toggle**, since you're controlling the state.
+     * Omit (the default `null`) to keep the built-in chevron toggle.
+     */
+    rail?: boolean | null;
+    /** Keep the sidebar within its parent rather than the viewport. */
+    contained?: boolean;
+    /** Prevent the sidebar from closing on scrim click or Escape. */
+    persistent?: boolean;
+    /** Close the sidebar when the Escape key is pressed. */
+    closeOnEscape?: boolean;
+    'close-on-escape'?: boolean;
+    /** Close the sidebar when the scrim is clicked. */
+    closeOnScrim?: boolean;
+    'close-on-scrim'?: boolean;
+    /** Lock page scroll while a temporary sidebar is open. */
+    lockScroll?: boolean;
+    'lock-scroll'?: boolean;
+    /** Show the dimming scrim behind a temporary sidebar. */
+    showScrim?: boolean;
+    'show-scrim'?: boolean;
+    /** Custom CSS classes applied to internal sidebar parts. */
+    cssClass?: SidebarCssClass;
+    cssclass?: SidebarCssClass;
+    'css-class'?: SidebarCssClass | string;
+    /** Root-level class name applied to the sidebar. */
+    cssClassName?: string;
+}
+export interface SidebarEvents {
+    change: SidebarChangeEvent;
+    open: SidebarOpenEvent;
+    close: SidebarCloseEvent;
+    'mno-change': SidebarChangeEvent;
+    mnoChange: SidebarChangeEvent;
+    'mno-open': SidebarOpenEvent;
+    mnoOpen: SidebarOpenEvent;
+    'mno-close': SidebarCloseEvent;
+    mnoClose: SidebarCloseEvent;
+}

package/dist/src/components/sidebar/sidebar-utils.d.ts

@@ -0,0 +1,55 @@
+import { SidebarMode, SidebarProps } from './sidebar-types.js';
+export declare const SIDEBAR_AUTO_BREAKPOINT = 768;
+/**
+ * `typeof window === 'undefined'` alone is NOT a safe server guard: a DOM shim
+ * can define `window` without `matchMedia` (the @lit-labs/ssr v3 shim happens
+ * to leave `window` undefined, but that is an implementation detail). Check
+ * lit's `isServer` first, then feature-detect `matchMedia`.
+ */
+export declare function isAutoTemporary(): boolean;
+/**
+ * Resolves the effective mode for `auto`. Other modes pass through.
+ */
+export declare function resolveMode(mode: SidebarMode): Exclude<SidebarMode, 'auto'>;
+export declare function generateSidebarRootClasses(props: {
+    mode: SidebarMode;
+    resolvedMode: Exclude<SidebarMode, 'auto'>;
+    location: string;
+    density: string;
+    color: string;
+    variant: string;
+    open: boolean;
+    expandOnHover: boolean;
+    contained: boolean;
+    persistent: boolean;
+    showScrim: boolean;
+    cssClassName?: string;
+    rootExtra?: string;
+}): string;
+export declare function validateSidebarProps(props: SidebarProps): string[];
+/**
+ * The Basecoat styling attributes for the sidebar ROOT, mirroring the props one
+ * for one. A prop at its DEFAULT emits nothing — `:not([mono-density])` is
+ * comfortable, `:not([mono-color])` is surface, `:not([mono-variant])` is
+ * elevated and `:not([mono-location])` is left — so the rendered DOM is also
+ * the shortest hand-written markup that paints the same (see sidebar.css).
+ *
+ * `mono-effective` is always written: it carries the mode AFTER `auto`
+ * resolves, and it is what every layout rule keys on. A literal `color`
+ * collapses to `custom`, with the colour itself arriving inline.
+ */
+export declare function sidebarRootAttrs(props: {
+    mode: string;
+    resolvedMode: string;
+    location: string;
+    density: string;
+    color: string;
+    variant: string;
+}): {
+    mode: string | null;
+    effective: string;
+    location: string | null;
+    density: string | null;
+    color: string | null;
+    variant: string | null;
+};

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

@@ -0,0 +1,4 @@
+/// <reference path="../../../vue.d.ts" />
+export { MonoSwitch } from './mono-switch.js';
+export type { SwitchSize, SwitchColor, SwitchProps, SwitchEvents } from './switch-types.js';
+export { validateSwitchProps, generateSwitchAttributes } from './switch-utils.js';

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

@@ -0,0 +1,5 @@
+/// <reference path="../../../vue.d.ts" />
+export { MonoSwitchShadow } from './mono-switch.shadow.js';
+export { MonoSwitchCore } from './switch-core.js';
+export type { SwitchSize, SwitchColor, SwitchProps, SwitchEvents, } from './switch-types.js';
+export { validateSwitchProps, generateSwitchAttributes, } from './switch-utils.js';

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

@@ -0,0 +1,31 @@
+import { LitElement } from 'lit';
+declare const MonoSwitch_base: import('../../composables/hybird-prop').Constructor<import('./switch-core.js').MonoSwitchCoreInterface> & typeof LitElement;
+/**
+ * Light-DOM `mono-switch` (default build, `@mono-lit/helper/ui/switch`).
+ *
+ * Renders into the host (`createRenderRoot`→`this`, styled by the global
+ * `dist/ui/index.css`) with the light-DOM slot strategy: `slot="label|
+ * description"` children are captured in `connectedCallback`, the template
+ * renders empty `[data-mono-slot]` targets (via the core's default
+ * `_renderLabelBlock`), and the captured nodes are re-placed in `updated()`. All
+ * render-mode-agnostic logic lives in `MonoSwitchCore`. The shadow build
+ * (`@mono-lit/helper/ui/shadow/switch`) shares the mixin but uses native `<slot>`.
+ * Both register `mono-switch`, so a document loads only one.
+ */
+export declare class MonoSwitch extends MonoSwitch_base {
+    static styles: import('lit').CSSResult[];
+    protected createRenderRoot(): HTMLElement;
+    private _slotsCaptured;
+    private _slotLabel;
+    private _slotDescription;
+    connectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private _captureSlots;
+    private _placeSlot;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mono-switch': MonoSwitch;
+    }
+}
+export {};

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

@@ -0,0 +1,36 @@
+import { LitElement, nothing, TemplateResult } from 'lit';
+declare const MonoSwitchShadow_base: import('../../composables/hybird-prop').Constructor<import('./switch-core.js').MonoSwitchCoreInterface> & typeof LitElement;
+/**
+ * Shadow-DOM `mono-switch` (the opt-in SSR build, `@mono-lit/helper/ui/shadow/switch`).
+ *
+ * Real shadow root + `static styles`, so `@lit-labs/ssr` serializes it to
+ * Declarative Shadow DOM and styles are scoped (`mono-switch`→`:host`). The
+ * track + thumb are pure CSS and the checked state is the `mono-switch-checked`
+ * wrapper class, so it server-renders from `this.checked` (no icons). The
+ * `label`/`description` slots carry the prop text as native fallback (shown
+ * server-side); presence is detected in `firstUpdated()` via `assignedNodes()`
+ * (DSD assigns at parse time → no `slotchange` after upgrade) + `@slotchange`
+ * for later changes. Interactivity needs the first client update to flush (so
+ * `@change` binds) — hence the defer-hydration poll. Shares all logic with the
+ * light build via `MonoSwitchCore`; both register `mono-switch`, so a document
+ * loads only one build.
+ */
+export declare class MonoSwitchShadow extends MonoSwitchShadow_base {
+    static styles: import('lit').CSSResult[];
+    connectedCallback(): void;
+    firstUpdated(changed: Map<string, unknown>): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private _slotFor;
+    private _slotHasContent;
+    private _onSlotChange;
+    /**
+     * The sublabel region answers to `slot="sublabel"` and to the older
+     * `slot="description"` (nested inside it), so its presence is the union.
+     */
+    private _sublabelHasContent;
+    private _setSlotState;
+    /** Reconcile the 2 slot-presence flags from their slots' assigned content. */
+    private _scanSlots;
+    protected _renderLabelBlock(): TemplateResult | typeof nothing;
+}
+export {};