@reliability-design/web 1.4.3 → 1.4.4

package/dist/index.d.mts

@@ -213,6 +213,8 @@ declare class RelAutocomplete extends LitElement {
     private onPageScroll;
     private openPanel;
     private closePanel;
+    private showNativePopover;
+    private hideNativePopover;
     private updatePosition;
     /** Re-evaluates whether the panel should be showing for the current state. */
     private syncPanel;
@@ -443,6 +445,9 @@ declare class RelCardMedia extends LitElement {
 
 type CheckboxState = "default" | "error" | "disabled";
 type CheckboxStatus = "unchecked" | "checked" | "indeterminate";
+type CheckboxSize = "small" | "medium";
+type CheckboxDensity = "compact" | "comfortable";
+type CheckboxAlignment = "leading" | "trailing";
 declare class RelCheckbox extends LitElement {
     label: string;
     /** rel-icon name rendered between the checkbox and the label (label prefix icon). */
@@ -451,11 +456,26 @@ declare class RelCheckbox extends LitElement {
     state: CheckboxState;
     status: CheckboxStatus;
     value: string;
+    /** Control scale (Figma Size). `"medium"` (default) = 18px box with body-lg
+     *  label; `"small"` = 14px box with body-md label. */
+    size: CheckboxSize;
+    /** Supporting-text layout (Figma Density). `"compact"` (default) puts the
+     *  supporting text on its own line under the row, indented past the box;
+     *  `"comfortable"` stacks label + supporting text beside the box. */
+    density: CheckboxDensity;
+    /** Box position (Figma Alignment). `"leading"` (default) renders the box
+     *  before the label; `"trailing"` pushes it to the far edge of the row.
+     *  Trailing has no compact layout in the spec, so it always renders with
+     *  comfortable density. */
+    alignment: CheckboxAlignment;
     get checked(): boolean;
     set checked(val: boolean);
     private _onChange;
     private _onTouched;
     static styles: lit.CSSResult;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    /** Trailing has no compact layout in the spec — trailing wins. */
+    private get effectiveDensity();
     private toggle;
     registerOnChange(fn: (value: boolean) => void): void;
     registerOnTouched(fn: () => void): void;
@@ -563,10 +583,16 @@ declare class RelRangePicker extends LitElement {
     private isSelectingRange;
     private hoverDate;
     private triggerButton?;
+    private popoverEl?;
+    private backdropEl?;
     static styles: lit.CSSResult;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    updated(): void;
+    updated(changed: Map<string, unknown>): void;
+    private showTopLayer;
+    private hideTopLayer;
+    private onReposition;
+    private updatePopoverPosition;
     private handleClickOutside;
     private handleGlobalKeydown;
     private toggleOpen;
@@ -1212,6 +1238,9 @@ declare class RelPagination extends LitElement {
     private get activePage();
     private get computedTotalPages();
     private generatePageNumbers;
+    /** Abbreviate large page numbers (368178 → "368k") so buttons stay compact.
+        Exact below 10,000; floored to k up to 1M; then M with one decimal. */
+    private formatPageLabel;
     private handlePageChange;
     private renderChevronLeft;
     private renderChevronRight;
@@ -1474,6 +1503,8 @@ declare class RelSelect extends LitElement {
     private emitChange;
     private openListbox;
     private closeListbox;
+    private showNativePopover;
+    private hideNativePopover;
     private updatePosition;
     private selectSingleOption;
     private toggleMultiOption;
@@ -1809,4 +1840,238 @@ declare class RelTooltip extends LitElement {
     render(): lit_html.TemplateResult<1>;
 }
 
-export { type AutocompleteFilter, type AutocompleteItem, type AutocompleteSearchFn, type BreadcrumbItem, type ButtonTone, type ButtonVariant, type ChipBorder, type ChipSize, type ChipTone, type ChipVariant, type DrawerCloseReason, type DrawerSide, type FieldLabelStyle, type LabelPlacement, type MenuItem, type MenuType, type ModalSide, type Orientation, type OtpType, type ProgressMode, type RadioOption, RelAccordion, RelAlert, RelAutocomplete, RelAvatar, RelBadge, RelBreadcrumbs, RelButton, RelCalendar, RelCard, RelCardMedia, RelCarousel, RelCheckbox, RelChip, RelContainer, RelDatePicker, RelDivider, RelDrawer, RelDrawerFooter, RelKbd, RelKbdGroup, RelLayout, RelMenu, RelMenuItem, RelMenubar, RelMenubarMenu, RelModal, RelNavbar, RelOtp, RelPagination, RelPopover, RelPopoverContent, RelProgress, RelRadio, RelRangePicker, RelResizableGroup, RelResizableHandle, RelResizablePanel, RelSegmentedButton, RelSelect, RelSkeleton, RelSlider, RelSnackbar, RelStepper, RelSwitch, RelTab, RelTabItem, RelTextfield, RelTimePicker, RelToast, RelTooltip, RelTopbar, RelTopbarActions, RelTopbarBrand, RelTopbarDropdown, RelTopbarDropdownItem, RelTopbarItem, RelTopbarMobilePanel, RelTopbarProfile, RelTopbarUtilities, type SegmentAlign, type SegmentOption, type SegmentSize, type SelectBorder, type SelectLabelStyle, type SelectOption, type SelectOptionObject, type SelectSize, type SelectState, type SkeletonAnimation, type SkeletonShape, type SliderType, type SnackbarLines, type SnackbarType, type Step, type StepStatus, type StepperSize, type StepperType, type TabItem, type TextAlign, type TextFieldSize, type TextFieldState, type TextFieldVariant, type ToastType, type TooltipPosition, type TooltipType, type TopbarForceLayout, type TopbarProfileType, type TopbarRewardTier, type TopbarVariant, type TrackStyle };
+/** Per-file lifecycle state. Mirrors the Figma "Upload File Row" variants 1:1. */
+type UploadStatus = "ready" | "uploading" | "success" | "error";
+/**
+ * Aggregate state, derived from `files` — never set directly. Drives the list
+ * heading, the alert, and the footer button in `<rel-upload-actions>`, and
+ * corresponds to the Figma "Upload Modal" variants.
+ */
+type UploadPhase = "empty" | "selected" | "uploading" | "delayed" | "failed";
+interface UploadFile {
+    /** Stable identity for keyed rendering and remove/retry targeting. */
+    id: string;
+    name: string;
+    /** Size in bytes. */
+    size: number;
+    status: UploadStatus;
+    /** 0–100, present while uploading and after success. */
+    progress?: number;
+    /** Bytes transferred so far. */
+    loaded?: number;
+    /** Human-readable failure reason, e.g. "file exceeds the 10 MB limit". */
+    error?: string;
+    /** The underlying File. Absent when the app supplies `files` itself. */
+    file?: File;
+}
+interface UploadRejection {
+    name: string;
+    reason: "format" | "size";
+    message: string;
+}
+interface UploaderContext {
+    /** The entry being uploaded. */
+    file: UploadFile;
+    /** Aborted when `cancel()` is called. */
+    signal: AbortSignal;
+    /** Report bytes transferred. `total` defaults to the file size. */
+    onProgress: (loaded: number, total?: number) => void;
+}
+/** Supply this to let `<rel-upload>` drive the whole lifecycle itself. */
+type Uploader = (file: File, ctx: UploaderContext) => Promise<void>;
+/** Snapshot handed to `<rel-upload-actions>` on every `rel-state` event. */
+interface UploadState {
+    phase: UploadPhase;
+    total: number;
+    failed: number;
+    canUpload: boolean;
+    primaryLabel: string;
+}
+/**
+ * `<rel-upload>` — dropzone plus per-file upload list.
+ *
+ * Two modes, chosen by whether `uploader` is set:
+ *
+ * - **Controlled** (default): the component picks and validates files, then
+ *   emits intents (`rel-upload`, `rel-retry`, `rel-cancel`, `rel-remove`). The
+ *   app performs the transfer and writes progress back onto `files`.
+ * - **Self-driving**: with an `uploader` function the component runs the whole
+ *   batch itself — concurrency, progress, the delay warning, abort and retry.
+ *
+ * The Cancel / Upload buttons are NOT rendered here. They live in
+ * `<rel-upload-actions>` so they can sit in `<rel-modal>`'s footer slot and
+ * stay pinned while this body scrolls.
+ *
+ * Emits (bubbling + composed):
+ *   - `rel-files-added`  — `{ added: UploadFile[], rejected: UploadRejection[] }`
+ *   - `rel-invalid`      — `{ rejected: UploadRejection[] }`
+ *   - `rel-change`       — selection changed; `{ files: UploadFile[] }`
+ *   - `rel-remove`       — row removed; `{ id, file }`
+ *   - `rel-upload`       — Upload pressed; `{ files: UploadFile[] }`
+ *   - `rel-retry`        — Retry pressed; `{ files: UploadFile[] }`
+ *   - `rel-cancel`       — Cancel pressed
+ *   - `rel-progress`     — `{ id, progress, loaded, total }`
+ *   - `rel-file-complete`— `{ id, file }`
+ *   - `rel-file-error`   — `{ id, file, error }`
+ *   - `rel-complete`     — batch settled; `{ succeeded, failed }`
+ *   - `rel-state`        — derived snapshot changed; `detail: UploadState`
+ *
+ * @element rel-upload
+ */
+declare class RelUpload extends LitElement {
+    /** Comma-separated accept list, e.g. ".pdf,.png,.jpg" or "image/*". */
+    accept: string;
+    /** Max size per file as a human string ("10MB", "500kb"). Empty → no limit. */
+    maxSize: string;
+    /** Allow more than one file. */
+    multiple: boolean;
+    /** Disables the whole control. */
+    disabled: boolean;
+    /** Overrides the derived "PDF, PNG or JPG - up to 10 MB per file" hint. */
+    hint: string;
+    /** Dropzone headline. */
+    dropzoneTitle: string;
+    /** Browse button label. */
+    browseLabel: string;
+    /**
+     * The file list. Set it to drive the component in controlled mode; the
+     * component also maintains it itself as files are added and removed.
+     */
+    files: UploadFile[];
+    /** Supply to run uploads internally. See {@link Uploader}. */
+    uploader?: Uploader;
+    /** Max files transferred at once in self-driving mode. */
+    concurrency: number;
+    /** ms of continuous uploading before the "taking longer than usual" alert. */
+    delayThreshold: number;
+    private dragOver;
+    private delayed;
+    private inputEl;
+    private aborter?;
+    private delayTimer?;
+    private lastSignature;
+    static styles: lit.CSSResult;
+    /**
+     * Aggregate state. Read-only; corresponds to the Figma modal variants.
+     *
+     * `failed` means there is nothing left to send AND something errored — while
+     * any row is still `ready` the primary action is Upload, not Retry.
+     */
+    get phase(): UploadPhase;
+    /** Files still eligible to be sent. */
+    private get pending();
+    private get failedFiles();
+    /**
+     * Failed rows worth sending again. A file rejected by `accept`/`max-size`
+     * will fail validation every time, so retrying it is pointless — re-check
+     * rather than re-queueing it blindly.
+     */
+    private get retryable();
+    get canUpload(): boolean;
+    /** Footer button label — "Upload", "Upload 3 files" or "Retry upload". */
+    get primaryLabel(): string;
+    /** The snapshot `<rel-upload-actions>` renders from. */
+    get state(): UploadState;
+    private get listHeading();
+    private get hintText();
+    private get acceptDisplay();
+    private get alertContent();
+    private parseMaxBytes;
+    private matchesAccept;
+    static fmtSize(bytes: number): string;
+    private static ext;
+    /**
+     * Validate and append. Invalid files are kept as `error` rows rather than
+     * dropped — that is how the Figma Failure state surfaces them.
+     */
+    private ingest;
+    private patch;
+    private startDelayTimer;
+    private stopDelayTimer;
+    private runBatch;
+    /** Start (or resume) the batch. Emits `rel-upload`; runs it when `uploader` is set. */
+    upload(): void;
+    /** Re-queue every retryable failed row and send again. */
+    retry(): void;
+    /** Abort anything in flight and emit `rel-cancel`. Does not clear the list. */
+    cancel(): void;
+    /** Remove one row by id. */
+    removeFile(id: string): void;
+    /** Clear everything and abort in-flight transfers. */
+    reset(): void;
+    private emit;
+    /**
+     * Emit `rel-state` only when the derived snapshot actually changes, so
+     * progress ticks don't spam `<rel-upload-actions>`.
+     */
+    private notify;
+    private openPicker;
+    private onInputChange;
+    private onDragOver;
+    private onDragLeave;
+    private onDrop;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(): void;
+    private rowMeta;
+    private renderRow;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "rel-upload": RelUpload;
+    }
+}
+
+/**
+ * `<rel-upload-actions>` — the Cancel / Upload footer for `<rel-upload>`.
+ *
+ * Lives outside `<rel-upload>` so it can sit in `<rel-modal>`'s footer slot and
+ * stay pinned while the upload body scrolls. It mirrors the sibling
+ * `<rel-upload>`'s derived state, so the button label follows the design:
+ * "Upload" → "Upload 3 files" → spinner → "Retry upload".
+ *
+ * ```html
+ * <rel-modal open side="center" title="Upload documents">
+ *   <rel-upload multiple .uploader=${fn}></rel-upload>
+ *   <rel-upload-actions slot="footer"></rel-upload-actions>
+ * </rel-modal>
+ * ```
+ *
+ * The target is found automatically among its siblings. Use `for` to point at a
+ * specific `<rel-upload>` by id when a container holds more than one.
+ *
+ * @element rel-upload-actions
+ */
+declare class RelUploadActions extends LitElement {
+    /** Id of the `<rel-upload>` to control. Omit to auto-discover a sibling. */
+    for: string;
+    /** Cancel button label. */
+    cancelLabel: string;
+    /** Hides Cancel for flows that only ever move forward. */
+    noCancel: boolean;
+    private snapshot;
+    private target;
+    static styles: lit.CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    /**
+     * Listen on our own root rather than `document`: a shared root means no
+     * shadow boundary sits between us and the sibling `<rel-upload>`, so
+     * `event.target` is never retargeted away from it.
+     */
+    private get root();
+    private resolveTarget;
+    private onState;
+    private onCancel;
+    private onPrimary;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "rel-upload-actions": RelUploadActions;
+    }
+}
+
+export { type AutocompleteFilter, type AutocompleteItem, type AutocompleteSearchFn, type BreadcrumbItem, type ButtonTone, type ButtonVariant, type ChipBorder, type ChipSize, type ChipTone, type ChipVariant, type DrawerCloseReason, type DrawerSide, type FieldLabelStyle, type LabelPlacement, type MenuItem, type MenuType, type ModalSide, type Orientation, type OtpType, type ProgressMode, type RadioOption, RelAccordion, RelAlert, RelAutocomplete, RelAvatar, RelBadge, RelBreadcrumbs, RelButton, RelCalendar, RelCard, RelCardMedia, RelCarousel, RelCheckbox, RelChip, RelContainer, RelDatePicker, RelDivider, RelDrawer, RelDrawerFooter, RelKbd, RelKbdGroup, RelLayout, RelMenu, RelMenuItem, RelMenubar, RelMenubarMenu, RelModal, RelNavbar, RelOtp, RelPagination, RelPopover, RelPopoverContent, RelProgress, RelRadio, RelRangePicker, RelResizableGroup, RelResizableHandle, RelResizablePanel, RelSegmentedButton, RelSelect, RelSkeleton, RelSlider, RelSnackbar, RelStepper, RelSwitch, RelTab, RelTabItem, RelTextfield, RelTimePicker, RelToast, RelTooltip, RelTopbar, RelTopbarActions, RelTopbarBrand, RelTopbarDropdown, RelTopbarDropdownItem, RelTopbarItem, RelTopbarMobilePanel, RelTopbarProfile, RelTopbarUtilities, RelUpload, RelUploadActions, type SegmentAlign, type SegmentOption, type SegmentSize, type SelectBorder, type SelectLabelStyle, type SelectOption, type SelectOptionObject, type SelectSize, type SelectState, type SkeletonAnimation, type SkeletonShape, type SliderType, type SnackbarLines, type SnackbarType, type Step, type StepStatus, type StepperSize, type StepperType, type TabItem, type TextAlign, type TextFieldSize, type TextFieldState, type TextFieldVariant, type ToastType, type TooltipPosition, type TooltipType, type TopbarForceLayout, type TopbarProfileType, type TopbarRewardTier, type TopbarVariant, type TrackStyle, type UploadFile, type UploadPhase, type UploadRejection, type UploadState, type UploadStatus, type Uploader, type UploaderContext };

package/dist/index.d.ts

@@ -213,6 +213,8 @@ declare class RelAutocomplete extends LitElement {
     private onPageScroll;
     private openPanel;
     private closePanel;
+    private showNativePopover;
+    private hideNativePopover;
     private updatePosition;
     /** Re-evaluates whether the panel should be showing for the current state. */
     private syncPanel;
@@ -443,6 +445,9 @@ declare class RelCardMedia extends LitElement {
 
 type CheckboxState = "default" | "error" | "disabled";
 type CheckboxStatus = "unchecked" | "checked" | "indeterminate";
+type CheckboxSize = "small" | "medium";
+type CheckboxDensity = "compact" | "comfortable";
+type CheckboxAlignment = "leading" | "trailing";
 declare class RelCheckbox extends LitElement {
     label: string;
     /** rel-icon name rendered between the checkbox and the label (label prefix icon). */
@@ -451,11 +456,26 @@ declare class RelCheckbox extends LitElement {
     state: CheckboxState;
     status: CheckboxStatus;
     value: string;
+    /** Control scale (Figma Size). `"medium"` (default) = 18px box with body-lg
+     *  label; `"small"` = 14px box with body-md label. */
+    size: CheckboxSize;
+    /** Supporting-text layout (Figma Density). `"compact"` (default) puts the
+     *  supporting text on its own line under the row, indented past the box;
+     *  `"comfortable"` stacks label + supporting text beside the box. */
+    density: CheckboxDensity;
+    /** Box position (Figma Alignment). `"leading"` (default) renders the box
+     *  before the label; `"trailing"` pushes it to the far edge of the row.
+     *  Trailing has no compact layout in the spec, so it always renders with
+     *  comfortable density. */
+    alignment: CheckboxAlignment;
     get checked(): boolean;
     set checked(val: boolean);
     private _onChange;
     private _onTouched;
     static styles: lit.CSSResult;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    /** Trailing has no compact layout in the spec — trailing wins. */
+    private get effectiveDensity();
     private toggle;
     registerOnChange(fn: (value: boolean) => void): void;
     registerOnTouched(fn: () => void): void;
@@ -563,10 +583,16 @@ declare class RelRangePicker extends LitElement {
     private isSelectingRange;
     private hoverDate;
     private triggerButton?;
+    private popoverEl?;
+    private backdropEl?;
     static styles: lit.CSSResult;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    updated(): void;
+    updated(changed: Map<string, unknown>): void;
+    private showTopLayer;
+    private hideTopLayer;
+    private onReposition;
+    private updatePopoverPosition;
     private handleClickOutside;
     private handleGlobalKeydown;
     private toggleOpen;
@@ -1212,6 +1238,9 @@ declare class RelPagination extends LitElement {
     private get activePage();
     private get computedTotalPages();
     private generatePageNumbers;
+    /** Abbreviate large page numbers (368178 → "368k") so buttons stay compact.
+        Exact below 10,000; floored to k up to 1M; then M with one decimal. */
+    private formatPageLabel;
     private handlePageChange;
     private renderChevronLeft;
     private renderChevronRight;
@@ -1474,6 +1503,8 @@ declare class RelSelect extends LitElement {
     private emitChange;
     private openListbox;
     private closeListbox;
+    private showNativePopover;
+    private hideNativePopover;
     private updatePosition;
     private selectSingleOption;
     private toggleMultiOption;
@@ -1809,4 +1840,238 @@ declare class RelTooltip extends LitElement {
     render(): lit_html.TemplateResult<1>;
 }
 
-export { type AutocompleteFilter, type AutocompleteItem, type AutocompleteSearchFn, type BreadcrumbItem, type ButtonTone, type ButtonVariant, type ChipBorder, type ChipSize, type ChipTone, type ChipVariant, type DrawerCloseReason, type DrawerSide, type FieldLabelStyle, type LabelPlacement, type MenuItem, type MenuType, type ModalSide, type Orientation, type OtpType, type ProgressMode, type RadioOption, RelAccordion, RelAlert, RelAutocomplete, RelAvatar, RelBadge, RelBreadcrumbs, RelButton, RelCalendar, RelCard, RelCardMedia, RelCarousel, RelCheckbox, RelChip, RelContainer, RelDatePicker, RelDivider, RelDrawer, RelDrawerFooter, RelKbd, RelKbdGroup, RelLayout, RelMenu, RelMenuItem, RelMenubar, RelMenubarMenu, RelModal, RelNavbar, RelOtp, RelPagination, RelPopover, RelPopoverContent, RelProgress, RelRadio, RelRangePicker, RelResizableGroup, RelResizableHandle, RelResizablePanel, RelSegmentedButton, RelSelect, RelSkeleton, RelSlider, RelSnackbar, RelStepper, RelSwitch, RelTab, RelTabItem, RelTextfield, RelTimePicker, RelToast, RelTooltip, RelTopbar, RelTopbarActions, RelTopbarBrand, RelTopbarDropdown, RelTopbarDropdownItem, RelTopbarItem, RelTopbarMobilePanel, RelTopbarProfile, RelTopbarUtilities, type SegmentAlign, type SegmentOption, type SegmentSize, type SelectBorder, type SelectLabelStyle, type SelectOption, type SelectOptionObject, type SelectSize, type SelectState, type SkeletonAnimation, type SkeletonShape, type SliderType, type SnackbarLines, type SnackbarType, type Step, type StepStatus, type StepperSize, type StepperType, type TabItem, type TextAlign, type TextFieldSize, type TextFieldState, type TextFieldVariant, type ToastType, type TooltipPosition, type TooltipType, type TopbarForceLayout, type TopbarProfileType, type TopbarRewardTier, type TopbarVariant, type TrackStyle };
+/** Per-file lifecycle state. Mirrors the Figma "Upload File Row" variants 1:1. */
+type UploadStatus = "ready" | "uploading" | "success" | "error";
+/**
+ * Aggregate state, derived from `files` — never set directly. Drives the list
+ * heading, the alert, and the footer button in `<rel-upload-actions>`, and
+ * corresponds to the Figma "Upload Modal" variants.
+ */
+type UploadPhase = "empty" | "selected" | "uploading" | "delayed" | "failed";
+interface UploadFile {
+    /** Stable identity for keyed rendering and remove/retry targeting. */
+    id: string;
+    name: string;
+    /** Size in bytes. */
+    size: number;
+    status: UploadStatus;
+    /** 0–100, present while uploading and after success. */
+    progress?: number;
+    /** Bytes transferred so far. */
+    loaded?: number;
+    /** Human-readable failure reason, e.g. "file exceeds the 10 MB limit". */
+    error?: string;
+    /** The underlying File. Absent when the app supplies `files` itself. */
+    file?: File;
+}
+interface UploadRejection {
+    name: string;
+    reason: "format" | "size";
+    message: string;
+}
+interface UploaderContext {
+    /** The entry being uploaded. */
+    file: UploadFile;
+    /** Aborted when `cancel()` is called. */
+    signal: AbortSignal;
+    /** Report bytes transferred. `total` defaults to the file size. */
+    onProgress: (loaded: number, total?: number) => void;
+}
+/** Supply this to let `<rel-upload>` drive the whole lifecycle itself. */
+type Uploader = (file: File, ctx: UploaderContext) => Promise<void>;
+/** Snapshot handed to `<rel-upload-actions>` on every `rel-state` event. */
+interface UploadState {
+    phase: UploadPhase;
+    total: number;
+    failed: number;
+    canUpload: boolean;
+    primaryLabel: string;
+}
+/**
+ * `<rel-upload>` — dropzone plus per-file upload list.
+ *
+ * Two modes, chosen by whether `uploader` is set:
+ *
+ * - **Controlled** (default): the component picks and validates files, then
+ *   emits intents (`rel-upload`, `rel-retry`, `rel-cancel`, `rel-remove`). The
+ *   app performs the transfer and writes progress back onto `files`.
+ * - **Self-driving**: with an `uploader` function the component runs the whole
+ *   batch itself — concurrency, progress, the delay warning, abort and retry.
+ *
+ * The Cancel / Upload buttons are NOT rendered here. They live in
+ * `<rel-upload-actions>` so they can sit in `<rel-modal>`'s footer slot and
+ * stay pinned while this body scrolls.
+ *
+ * Emits (bubbling + composed):
+ *   - `rel-files-added`  — `{ added: UploadFile[], rejected: UploadRejection[] }`
+ *   - `rel-invalid`      — `{ rejected: UploadRejection[] }`
+ *   - `rel-change`       — selection changed; `{ files: UploadFile[] }`
+ *   - `rel-remove`       — row removed; `{ id, file }`
+ *   - `rel-upload`       — Upload pressed; `{ files: UploadFile[] }`
+ *   - `rel-retry`        — Retry pressed; `{ files: UploadFile[] }`
+ *   - `rel-cancel`       — Cancel pressed
+ *   - `rel-progress`     — `{ id, progress, loaded, total }`
+ *   - `rel-file-complete`— `{ id, file }`
+ *   - `rel-file-error`   — `{ id, file, error }`
+ *   - `rel-complete`     — batch settled; `{ succeeded, failed }`
+ *   - `rel-state`        — derived snapshot changed; `detail: UploadState`
+ *
+ * @element rel-upload
+ */
+declare class RelUpload extends LitElement {
+    /** Comma-separated accept list, e.g. ".pdf,.png,.jpg" or "image/*". */
+    accept: string;
+    /** Max size per file as a human string ("10MB", "500kb"). Empty → no limit. */
+    maxSize: string;
+    /** Allow more than one file. */
+    multiple: boolean;
+    /** Disables the whole control. */
+    disabled: boolean;
+    /** Overrides the derived "PDF, PNG or JPG - up to 10 MB per file" hint. */
+    hint: string;
+    /** Dropzone headline. */
+    dropzoneTitle: string;
+    /** Browse button label. */
+    browseLabel: string;
+    /**
+     * The file list. Set it to drive the component in controlled mode; the
+     * component also maintains it itself as files are added and removed.
+     */
+    files: UploadFile[];
+    /** Supply to run uploads internally. See {@link Uploader}. */
+    uploader?: Uploader;
+    /** Max files transferred at once in self-driving mode. */
+    concurrency: number;
+    /** ms of continuous uploading before the "taking longer than usual" alert. */
+    delayThreshold: number;
+    private dragOver;
+    private delayed;
+    private inputEl;
+    private aborter?;
+    private delayTimer?;
+    private lastSignature;
+    static styles: lit.CSSResult;
+    /**
+     * Aggregate state. Read-only; corresponds to the Figma modal variants.
+     *
+     * `failed` means there is nothing left to send AND something errored — while
+     * any row is still `ready` the primary action is Upload, not Retry.
+     */
+    get phase(): UploadPhase;
+    /** Files still eligible to be sent. */
+    private get pending();
+    private get failedFiles();
+    /**
+     * Failed rows worth sending again. A file rejected by `accept`/`max-size`
+     * will fail validation every time, so retrying it is pointless — re-check
+     * rather than re-queueing it blindly.
+     */
+    private get retryable();
+    get canUpload(): boolean;
+    /** Footer button label — "Upload", "Upload 3 files" or "Retry upload". */
+    get primaryLabel(): string;
+    /** The snapshot `<rel-upload-actions>` renders from. */
+    get state(): UploadState;
+    private get listHeading();
+    private get hintText();
+    private get acceptDisplay();
+    private get alertContent();
+    private parseMaxBytes;
+    private matchesAccept;
+    static fmtSize(bytes: number): string;
+    private static ext;
+    /**
+     * Validate and append. Invalid files are kept as `error` rows rather than
+     * dropped — that is how the Figma Failure state surfaces them.
+     */
+    private ingest;
+    private patch;
+    private startDelayTimer;
+    private stopDelayTimer;
+    private runBatch;
+    /** Start (or resume) the batch. Emits `rel-upload`; runs it when `uploader` is set. */
+    upload(): void;
+    /** Re-queue every retryable failed row and send again. */
+    retry(): void;
+    /** Abort anything in flight and emit `rel-cancel`. Does not clear the list. */
+    cancel(): void;
+    /** Remove one row by id. */
+    removeFile(id: string): void;
+    /** Clear everything and abort in-flight transfers. */
+    reset(): void;
+    private emit;
+    /**
+     * Emit `rel-state` only when the derived snapshot actually changes, so
+     * progress ticks don't spam `<rel-upload-actions>`.
+     */
+    private notify;
+    private openPicker;
+    private onInputChange;
+    private onDragOver;
+    private onDragLeave;
+    private onDrop;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(): void;
+    private rowMeta;
+    private renderRow;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "rel-upload": RelUpload;
+    }
+}
+
+/**
+ * `<rel-upload-actions>` — the Cancel / Upload footer for `<rel-upload>`.
+ *
+ * Lives outside `<rel-upload>` so it can sit in `<rel-modal>`'s footer slot and
+ * stay pinned while the upload body scrolls. It mirrors the sibling
+ * `<rel-upload>`'s derived state, so the button label follows the design:
+ * "Upload" → "Upload 3 files" → spinner → "Retry upload".
+ *
+ * ```html
+ * <rel-modal open side="center" title="Upload documents">
+ *   <rel-upload multiple .uploader=${fn}></rel-upload>
+ *   <rel-upload-actions slot="footer"></rel-upload-actions>
+ * </rel-modal>
+ * ```
+ *
+ * The target is found automatically among its siblings. Use `for` to point at a
+ * specific `<rel-upload>` by id when a container holds more than one.
+ *
+ * @element rel-upload-actions
+ */
+declare class RelUploadActions extends LitElement {
+    /** Id of the `<rel-upload>` to control. Omit to auto-discover a sibling. */
+    for: string;
+    /** Cancel button label. */
+    cancelLabel: string;
+    /** Hides Cancel for flows that only ever move forward. */
+    noCancel: boolean;
+    private snapshot;
+    private target;
+    static styles: lit.CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    /**
+     * Listen on our own root rather than `document`: a shared root means no
+     * shadow boundary sits between us and the sibling `<rel-upload>`, so
+     * `event.target` is never retargeted away from it.
+     */
+    private get root();
+    private resolveTarget;
+    private onState;
+    private onCancel;
+    private onPrimary;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "rel-upload-actions": RelUploadActions;
+    }
+}
+
+export { type AutocompleteFilter, type AutocompleteItem, type AutocompleteSearchFn, type BreadcrumbItem, type ButtonTone, type ButtonVariant, type ChipBorder, type ChipSize, type ChipTone, type ChipVariant, type DrawerCloseReason, type DrawerSide, type FieldLabelStyle, type LabelPlacement, type MenuItem, type MenuType, type ModalSide, type Orientation, type OtpType, type ProgressMode, type RadioOption, RelAccordion, RelAlert, RelAutocomplete, RelAvatar, RelBadge, RelBreadcrumbs, RelButton, RelCalendar, RelCard, RelCardMedia, RelCarousel, RelCheckbox, RelChip, RelContainer, RelDatePicker, RelDivider, RelDrawer, RelDrawerFooter, RelKbd, RelKbdGroup, RelLayout, RelMenu, RelMenuItem, RelMenubar, RelMenubarMenu, RelModal, RelNavbar, RelOtp, RelPagination, RelPopover, RelPopoverContent, RelProgress, RelRadio, RelRangePicker, RelResizableGroup, RelResizableHandle, RelResizablePanel, RelSegmentedButton, RelSelect, RelSkeleton, RelSlider, RelSnackbar, RelStepper, RelSwitch, RelTab, RelTabItem, RelTextfield, RelTimePicker, RelToast, RelTooltip, RelTopbar, RelTopbarActions, RelTopbarBrand, RelTopbarDropdown, RelTopbarDropdownItem, RelTopbarItem, RelTopbarMobilePanel, RelTopbarProfile, RelTopbarUtilities, RelUpload, RelUploadActions, type SegmentAlign, type SegmentOption, type SegmentSize, type SelectBorder, type SelectLabelStyle, type SelectOption, type SelectOptionObject, type SelectSize, type SelectState, type SkeletonAnimation, type SkeletonShape, type SliderType, type SnackbarLines, type SnackbarType, type Step, type StepStatus, type StepperSize, type StepperType, type TabItem, type TextAlign, type TextFieldSize, type TextFieldState, type TextFieldVariant, type ToastType, type TooltipPosition, type TooltipType, type TopbarForceLayout, type TopbarProfileType, type TopbarRewardTier, type TopbarVariant, type TrackStyle, type UploadFile, type UploadPhase, type UploadRejection, type UploadState, type UploadStatus, type Uploader, type UploaderContext };