@duyluonganduin/acl-web-components 0.0.44 → 0.0.48

package/dist/react.d.ts

@@ -57,6 +57,76 @@ declare class AnduinButton extends LitElement {
     render(): TemplateResult<1>;
 }
 
+/**
+ * A single-month calendar grid with month/year pickers and full keyboard
+ * navigation.
+ *
+ * Used on its own for day selection, and composed by `anduin-date-range` — the
+ * range picker drives `range-start` / `range-end` to paint the range across two
+ * calendars.
+ *
+ * All date attributes take an ISO date string (`YYYY-MM-DD`). `value` doubles as
+ * the selected day and the month the calendar opens on.
+ *
+ * @example
+ * <anduin-calendar value="2026-07-15" min-date="2026-01-01"></anduin-calendar>
+ */
+declare class AnduinCalendar extends LitElement {
+    static styles: CSSResult;
+    /** Selected day, ISO `YYYY-MM-DD`. Also the month the calendar opens on. */
+    value: string;
+    /** Earliest selectable day, ISO `YYYY-MM-DD`. */
+    minDate: string;
+    /** Latest selectable day, ISO `YYYY-MM-DD`. */
+    maxDate: string;
+    /** First day of a painted range, ISO `YYYY-MM-DD`. Set by `anduin-date-range`. */
+    rangeStart: string;
+    /** Last day of a painted range, ISO `YYYY-MM-DD`. Set by `anduin-date-range`. */
+    rangeEnd: string;
+    /**
+     * Suppress the single-day selected marker so only the range markers express
+     * selection. Set by `anduin-date-range` on its panels, where `value` is just
+     * the month anchor and highlighting it would read as a stray selected day.
+     */
+    rangeMode: boolean;
+    /** Displayed month, 0-based. Tracks `value` until the user navigates. */
+    private _viewMonth;
+    private _viewYear;
+    /** Roving-tabindex target for keyboard navigation, ISO `YYYY-MM-DD`. */
+    private _focus;
+    private _openSelect;
+    /** Set once `value` has seeded the view, so later edits don't yank the month
+     *  back while the user is browsing. */
+    private _viewSeeded;
+    /** Set when a keyboard action moved focus, so we refocus after re-render. */
+    private _pendingFocus;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(changed: Map<PropertyKey, unknown>): void;
+    updated(): void;
+    private _onOutsideClick;
+    private get _min();
+    private get _max();
+    private _isDisabled;
+    /** Clamp into [min, max] so keyboard navigation can't escape the range. */
+    private _clamp;
+    private _shiftMonth;
+    /** Move the roving focus, pulling the displayed month along with it. */
+    private _moveFocus;
+    private _onGridKeyDown;
+    private _pick;
+    private _emitHover;
+    /** The day that owns `tabindex="0"` when nothing has been focused yet. */
+    private _defaultFocusDate;
+    /** Years offered in the year picker — bounded by min/max when set, otherwise
+     *  a ±10-year window around the displayed year. */
+    private get _yearOptions();
+    private _selectMonth;
+    private _selectYear;
+    private _renderSelect;
+    render(): TemplateResult<1>;
+}
+
 declare class AnduinCallout extends LitElement {
     static styles: CSSResult;
     variant: string;
@@ -76,6 +146,238 @@ declare class AnduinCheckbox extends LitElement {
     render(): TemplateResult<1>;
 }
 
+/**
+ * A formatted date input. Displays a pattern such as `MM/dd/yyyy` and lets users
+ * type digits into each segment; clicking a segment highlights it, and focus
+ * auto-advances once a segment is filled.
+ *
+ * Typing is committed per segment: when no valid completion remains (typing `5`
+ * into a month, since `50`–`59` all exceed `12`) the digit is zero-padded and
+ * focus moves on. Arrow keys step a segment's value, wrapping at its bounds.
+ *
+ * `anduin-date-input:change` fires once every segment is filled; `event.detail`
+ * is the formatted string.
+ *
+ * @example
+ * <anduin-date-input format="MM/dd/yyyy" value="03/15/2026"></anduin-date-input>
+ */
+declare class AnduinDateInput extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: CSSResult;
+    /** Pattern to display and type into, e.g. `MM/dd/yyyy`, `yyyy-MM-dd`, `dd.MM.yyyy`. */
+    format: string;
+    /** Current value, formatted to match `format`. Empty until every segment is filled. */
+    value: string;
+    size: DateInputSize;
+    disabled: boolean;
+    readonly: boolean;
+    /** `valid` | `invalid` | `warning` | `loading`. */
+    status: string;
+    startIcon: string;
+    /** Earliest allowed date, ISO `YYYY-MM-DD`. Completed dates below it are clamped up. */
+    minDate: string;
+    /** Latest allowed date, ISO `YYYY-MM-DD`. Completed dates above it are clamped down. */
+    maxDate: string;
+    /** Matches `anduin-field-label`'s `for` so clicking the label focuses this input. */
+    inputid: string;
+    /** Committed digits per segment, index-aligned with `_segments`. */
+    private _digits;
+    /** Index of the segment being typed into. */
+    private _active;
+    /** Digits typed into the active segment but not yet committed. */
+    private _buffer;
+    private _inputEl;
+    /** Selection we want after the next render, so re-renders don't drop the highlight. */
+    private _pendingSelection;
+    private _tokens;
+    private _segments;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _onFieldLabelClick;
+    willUpdate(changed: Map<PropertyKey, unknown>): void;
+    updated(): void;
+    /** Parse an incoming formatted string by reading each segment's slice. */
+    private _adoptValue;
+    /** The rendered string: committed digits, the in-progress buffer, or placeholders. */
+    private _display;
+    /** The formatted value, or `''` while any segment is still empty. */
+    private _composeValue;
+    private _setDigits;
+    private _indexOfType;
+    /**
+     * Clamp a completed date into [minDate, maxDate]. Only applies when the format
+     * carries a full date — a partial format like `MM/dd` has no year to compare.
+     */
+    private _clampToBounds;
+    private _focusSegment;
+    /** Which segment contains (or is nearest to) a caret offset. */
+    private _segmentAt;
+    /**
+     * Snap the caret to whole-segment selection. Handled synchronously: by `mouseup`
+     * the browser has already placed the caret, and deferring (rAF/timeout) would
+     * leave a bare caret visible for a frame — or never run at all in a background
+     * tab, where rAF is throttled.
+     */
+    private _onSelectionIntent;
+    /** Write digits into a segment, clamped to its valid range and zero-padded. */
+    private _writeSegment;
+    /** Commit any half-typed digits so they aren't stranded on blur or navigation. */
+    private _flushBuffer;
+    private _commitBuffer;
+    private _typeDigit;
+    private _step;
+    private _clearSegment;
+    private _onKeyDown;
+    render(): TemplateResult<1>;
+}
+
+/**
+ * A formatted date input paired with a calendar popover.
+ *
+ * Clicking the input opens the calendar; typing a date into the input moves the
+ * calendar to match; picking a day closes the popover and fills the input.
+ * `disabled` and `readonly` both prevent the popover from opening.
+ *
+ * Slot content into `actions` to add buttons below the calendar — the consumer
+ * owns that container's layout entirely.
+ *
+ * @example
+ * <anduin-date-picker format="MM/dd/yyyy" value="03/15/2026"></anduin-date-picker>
+ */
+declare class AnduinDatePicker extends LitElement {
+    static styles: CSSResult;
+    /** Pattern for the input, e.g. `MM/dd/yyyy`. `value` must match it. */
+    format: string;
+    /** Current value, formatted to match `format`. */
+    value: string;
+    size: DateInputSize;
+    disabled: boolean;
+    readonly: boolean;
+    /** `valid` | `invalid` | `warning` | `loading`. */
+    status: string;
+    startIcon: string;
+    /** Earliest selectable date, ISO `YYYY-MM-DD`. */
+    minDate: string;
+    /** Latest selectable date, ISO `YYYY-MM-DD`. */
+    maxDate: string;
+    /** Where the calendar opens relative to the input. */
+    placement: DatePickerPlacement;
+    /** Matches `anduin-field-label`'s `for` so clicking the label focuses the input. */
+    inputid: string;
+    /** Mirrors the popover's own state — the popover owns opening and closing. */
+    private _open;
+    private _inputEl;
+    private _popoverEl;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _onPopoverOpenChange;
+    private _closePopover;
+    /** The current value as a `Date`, or `null` while it is incomplete. */
+    private get _date();
+    /** ISO form of the value, for driving the calendar. */
+    private get _isoValue();
+    private _emit;
+    /** Typing a complete date in the input moves the calendar to match. */
+    private _onInputChange;
+    /** Picking a day fills the input and dismisses the popover. */
+    private _onCalendarChange;
+    private _onKeyDown;
+    /**
+     * Swallow the trigger click when the field is locked, so it never reaches the
+     * popover's own toggle handler.
+     */
+    private _onTriggerClick;
+    render(): TemplateResult<1>;
+}
+
+/**
+ * Two side-by-side calendars for picking a date range.
+ *
+ * Selection is a two-click flow: the first click sets the start and clears any
+ * previous end, the second sets the end (swapping if it falls before the start).
+ * A third click begins a new selection. `anduin-date-range:change` fires only
+ * once a range is complete, and `start-date` / `end-date` reflect the last
+ * complete range.
+ *
+ * Use `anduin-date-range-default` for the standard side-by-side layout, or place
+ * `anduin-date-range-start` and `anduin-date-range-end` yourself for full
+ * control over what sits between them.
+ *
+ * @example
+ * <anduin-date-range start-date="2026-07-10" end-date="2026-07-20">
+ *   <anduin-date-range-default></anduin-date-range-default>
+ * </anduin-date-range>
+ */
+declare class AnduinDateRange extends LitElement {
+    static styles: CSSResult;
+    /** First day of the selected range, ISO `YYYY-MM-DD`. */
+    startDate: string;
+    /** Last day of the selected range, ISO `YYYY-MM-DD`. */
+    endDate: string;
+    /** Earliest selectable day, ISO `YYYY-MM-DD`. Forwarded to both calendars. */
+    minDate: string;
+    /** Latest selectable day, ISO `YYYY-MM-DD`. Forwarded to both calendars. */
+    maxDate: string;
+    /** First click of an in-progress selection, ISO `YYYY-MM-DD`. */
+    private _anchor;
+    /** Hovered day while a selection is in progress, for the range preview. */
+    private _hover;
+    private _panels;
+    /** Last `value` we pushed per panel. Mirrors Lit's "only write on change" so a
+     *  calendar the user has navigated isn't yanked back to our derived month. */
+    private _pushedValue;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(): void;
+    /** Called by each panel once it has rendered its calendar. */
+    registerPanel(role: DateRangePanelRole, panel: AnduinDateRangePanel): void;
+    unregisterPanel(panel: AnduinDateRangePanel): void;
+    /** Push the derived range state down onto each registered panel's calendar. */
+    private _sync;
+    /** Which month each panel opens on: the start date on the left, the month
+     *  after it on the right. Falls back to today when there's no range yet. */
+    private _panelValue;
+    /** The range the calendars should paint — the live preview while selecting,
+     *  otherwise the committed range. */
+    private _displayedRange;
+    private _sorted;
+    private _onCalendarChange;
+    private _onCalendarHover;
+    render(): TemplateResult<1>;
+}
+
+/** The standard side-by-side layout: start calendar, 16px gap, end calendar. */
+declare class AnduinDateRangeDefault extends LitElement {
+    static styles: CSSResult;
+    render(): TemplateResult<1>;
+}
+
+/** The right-hand calendar of a date range. */
+declare class AnduinDateRangeEnd extends AnduinDateRangePanel {
+    protected readonly panelRole: "end";
+}
+
+/**
+ * Base class for the two calendar panels. Renders one `anduin-calendar` and
+ * registers with the enclosing `anduin-date-range`, which then drives it.
+ */
+declare abstract class AnduinDateRangePanel extends LitElement {
+    static styles: CSSResult;
+    protected abstract readonly panelRole: DateRangePanelRole;
+    private _host;
+    /** The calendar this panel owns. Read by `anduin-date-range`. */
+    get calendar(): AnduinCalendar | null;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    private _findRangeHost;
+    render(): TemplateResult<1>;
+}
+
+/** The left-hand calendar of a date range. */
+declare class AnduinDateRangeStart extends AnduinDateRangePanel {
+    protected readonly panelRole: "start";
+}
+
 declare class AnduinDivider extends LitElement {
     static styles: CSSResult;
     direction: string;
@@ -507,6 +809,136 @@ declare class AnduinResizablePanelGroup extends LitElement {
     render(): TemplateResult<1>;
 }
 
+/**
+ * anduin-sidebar — a vertical navigation region for an application's primary
+ * sections. It organises navigable entries into labelled groups, highlights the
+ * active entry, and supports both button-style and link-style items.
+ *
+ * Compose a sidebar from these building blocks:
+ *   - anduin-sidebar               the navigation container
+ *   - anduin-sidebar-header/footer sticky top / bottom regions (optional divider)
+ *   - anduin-sidebar-content       scrolling region that owns the sidebar's padding
+ *   - anduin-sidebar-group         a section pairing a label with a menu
+ *   - anduin-sidebar-group-label   the heading for a group
+ *   - anduin-sidebar-menu          a vertical list of items
+ *   - anduin-sidebar-menu-item     a single navigable entry
+ *   - anduin-sidebar-action        a control shown on the right of a label/item
+ *   - anduin-sidebar-badge         a count/status badge shown on the right
+ *   - anduin-sidebar-separator     a divider between sections
+ *
+ * @example
+ * <anduin-sidebar aria-label="Fund navigation">
+ *   <anduin-sidebar-content>
+ *     <anduin-sidebar-group>
+ *       <anduin-sidebar-group-label>Fund administration</anduin-sidebar-group-label>
+ *       <anduin-sidebar-menu>
+ *         <anduin-sidebar-menu-item start-icon="dashboard" selected>Overview</anduin-sidebar-menu-item>
+ *         <anduin-sidebar-menu-item start-icon="userInvestor">Investors</anduin-sidebar-menu-item>
+ *       </anduin-sidebar-menu>
+ *     </anduin-sidebar-group>
+ *   </anduin-sidebar-content>
+ * </anduin-sidebar>
+ */
+declare class AnduinSidebar extends LitElement {
+    static styles: CSSResult;
+    connectedCallback(): void;
+    render(): TemplateResult<1>;
+}
+
+/**
+ * A small action control shown on the right of a group label or menu item.
+ * Prop-less container: slot in any control (typically an anduin-button). It is
+ * pushed to the right of the row, and activating it never triggers the menu
+ * item's own click or navigation.
+ */
+declare class AnduinSidebarAction extends LitElement {
+    static styles: CSSResult;
+    connectedCallback(): void;
+    render(): TemplateResult<1>;
+}
+
+/**
+ * A count or status badge shown on the right of a group label or menu item.
+ * Hosts a standard anduin-badge-count (or anduin-badge). Unlike an action, a
+ * badge is informational: clicking it does not swallow the item's click.
+ */
+declare class AnduinSidebarBadge extends LitElement {
+    static styles: CSSResult;
+    connectedCallback(): void;
+    render(): TemplateResult<1>;
+}
+
+/**
+ * The container that holds the groups. It owns the sidebar's padding and, when
+ * the sidebar has a bounded height, scrolls between an optional header/footer.
+ */
+declare class AnduinSidebarContent extends LitElement {
+    static styles: CSSResult;
+    render(): TemplateResult<1>;
+}
+
+/** A sticky region pinned to the bottom of the sidebar, below the scrolling content. */
+declare class AnduinSidebarFooter extends LitElement {
+    static styles: CSSResult;
+    /** Draw a separating border toward the content. */
+    divider: boolean;
+    render(): TemplateResult<1>;
+}
+
+/** A section that pairs a group label with a menu of related entries. */
+declare class AnduinSidebarGroup extends LitElement {
+    static styles: CSSResult;
+    render(): TemplateResult<1>;
+}
+
+/** The heading for a group. Accepts a slotted badge or action on the right. */
+declare class AnduinSidebarGroupLabel extends LitElement {
+    static styles: CSSResult;
+    render(): TemplateResult<1>;
+}
+
+/** A sticky region pinned to the top of the sidebar, above the scrolling content. */
+declare class AnduinSidebarHeader extends LitElement {
+    static styles: CSSResult;
+    /** Draw a separating border toward the content. */
+    divider: boolean;
+    render(): TemplateResult<1>;
+}
+
+/** A vertical list of menu items. */
+declare class AnduinSidebarMenu extends LitElement {
+    static styles: CSSResult;
+    render(): TemplateResult<1>;
+}
+
+/**
+ * A single navigable entry. Renders a native <button> by default, or an <a>
+ * when `href` is set. Accepts a leading icon (`start-icon`), a slotted
+ * `anduin-sidebar-badge`, and a slotted `anduin-sidebar-action`.
+ */
+declare class AnduinSidebarMenuItem extends LitElement {
+    static styles: CSSResult;
+    /** anduin-icon name shown before the label. */
+    startIcon: string;
+    /** Highlights the entry as the active one. Bind to your route/selection state. */
+    selected: boolean;
+    /** Mute the entry and prevent interaction. */
+    disabled: boolean;
+    /** Renders an <a> instead of a <button> when provided. */
+    href: string;
+    /** Open the link in a new tab (target="_blank" with rel="noreferrer noopener"). */
+    openNewTab: boolean;
+    private onClick;
+    render(): TemplateResult<1>;
+}
+
+/** A divider between unrelated sections. */
+declare class AnduinSidebarSeparator extends LitElement {
+    static styles: CSSResult;
+    connectedCallback(): void;
+    render(): TemplateResult<1>;
+}
+
 declare class AnduinSkeleton extends LitElement {
     static styles: CSSResult;
     effect: string;
@@ -858,6 +1290,13 @@ declare type ButtonSize = 'tiny' | 'extraSmall' | 'small' | 'medium' | 'large' |
 
 declare type ButtonVariant = 'gray0' | 'gray9' | 'primary' | 'danger' | 'success' | 'warning' | 'purple';
 
+export declare const Calendar: ReactWebComponent<AnduinCalendar, {
+onValueChange: string;
+}>;
+
+/** Fired when a day is picked. `event.detail` is the ISO date string (`YYYY-MM-DD`). */
+export declare const CALENDAR_CHANGE = "anduin-calendar:change";
+
 export declare const Callout: ReactWebComponent<AnduinCallout, {}>;
 
 export declare const Checkbox: ReactWebComponent<AnduinCheckbox, {
@@ -866,6 +1305,42 @@ onChange: string;
 
 export declare const CHECKBOX_CHANGE = "anduin-checkbox:change";
 
+/** Fired when every segment is filled. `event.detail` is the formatted date string. */
+export declare const DATE_INPUT_CHANGE = "anduin-date-input:change";
+
+/** Fired when a date is completed by typing or picked from the calendar. `event.detail` is the formatted string. */
+export declare const DATE_PICKER_CHANGE = "anduin-date-picker:change";
+
+/**
+ * Fired when the user completes a range selection (both ends picked).
+ * `event.detail` is `{ startDate, endDate }`, both ISO `YYYY-MM-DD`.
+ */
+export declare const DATE_RANGE_CHANGE = "anduin-date-range:change";
+
+export declare const DateInput: ReactWebComponent<AnduinDateInput, {
+onValueChange: string;
+}>;
+
+declare type DateInputSize = 'small' | 'default' | 'large';
+
+export declare const DatePicker: ReactWebComponent<AnduinDatePicker, {
+onValueChange: string;
+}>;
+
+declare type DatePickerPlacement = 'bottom-start' | 'bottom-end' | 'bottom' | 'top-start' | 'top-end' | 'top';
+
+export declare const DateRange: ReactWebComponent<AnduinDateRange, {
+onChange: string;
+}>;
+
+export declare const DateRangeDefault: ReactWebComponent<AnduinDateRangeDefault, {}>;
+
+export declare const DateRangeEnd: ReactWebComponent<AnduinDateRangeEnd, {}>;
+
+declare type DateRangePanelRole = 'start' | 'end';
+
+export declare const DateRangeStart: ReactWebComponent<AnduinDateRangeStart, {}>;
+
 export declare const Divider: ReactWebComponent<AnduinDivider, {}>;
 
 export declare const Dot: ReactWebComponent<AnduinDot, {}>;
@@ -978,7 +1453,12 @@ export declare const PaginationFirstPage: ReactWebComponent<AnduinPaginationFirs
 
 export declare const PaginationLastPage: ReactWebComponent<AnduinPaginationLastPage, {}>;
 
-export declare const Popover: ReactWebComponent<AnduinPopover, {}>;
+export declare const Popover: ReactWebComponent<AnduinPopover, {
+onOpenChange: string;
+}>;
+
+/** Fired whenever `open` changes, including self-initiated toggles and outside clicks. `event.detail` is the new state. */
+export declare const POPOVER_OPEN_CHANGE = "anduin-popover:open-change";
 
 export declare const PopoverClose: ReactWebComponent<AnduinPopoverClose, {}>;
 
@@ -1011,6 +1491,42 @@ export declare const RESIZE_EVENT = "anduin-resizable:resize";
 
 declare type ResizeOrientation = 'horizontal' | 'vertical';
 
+export declare const Sidebar: ReactWebComponent<AnduinSidebar, {}>;
+
+/**
+ * Fired when a (non-disabled) sidebar menu item is activated by click or
+ * keyboard. `detail` is the activated `anduin-sidebar-menu-item` element.
+ *
+ * Menu items are native buttons (or links when `href` is set), so a native
+ * `click` also bubbles — this event exists as a convenience so consumers can
+ * bind a single `onSelect` handler (and it maps to the React wrapper's
+ * `onSelect` prop). Activating a control slotted into an `anduin-sidebar-action`
+ * never triggers it, because the action sits outside the item's button/link.
+ */
+export declare const SIDEBAR_SELECT = "anduin-sidebar:select";
+
+export declare const SidebarAction: ReactWebComponent<AnduinSidebarAction, {}>;
+
+export declare const SidebarBadge: ReactWebComponent<AnduinSidebarBadge, {}>;
+
+export declare const SidebarContent: ReactWebComponent<AnduinSidebarContent, {}>;
+
+export declare const SidebarFooter: ReactWebComponent<AnduinSidebarFooter, {}>;
+
+export declare const SidebarGroup: ReactWebComponent<AnduinSidebarGroup, {}>;
+
+export declare const SidebarGroupLabel: ReactWebComponent<AnduinSidebarGroupLabel, {}>;
+
+export declare const SidebarHeader: ReactWebComponent<AnduinSidebarHeader, {}>;
+
+export declare const SidebarMenu: ReactWebComponent<AnduinSidebarMenu, {}>;
+
+export declare const SidebarMenuItem: ReactWebComponent<AnduinSidebarMenuItem, {
+onSelect: string;
+}>;
+
+export declare const SidebarSeparator: ReactWebComponent<AnduinSidebarSeparator, {}>;
+
 export declare const Skeleton: ReactWebComponent<AnduinSkeleton, {}>;
 
 export declare const SparkleSpinner: ReactWebComponent<AnduinSparkleSpinner, {}>;