@mono-lit/helper 0.0.0-stage → 0.0.2

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

@@ -0,0 +1,131 @@
+import { VisibilityProps } from '../../composables/visibility';
+export type TextareaSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export type TextareaColor = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'teal' | 'purple' | 'neutral' | 'dark';
+export type TextareaVariant = 'outlined' | 'filled' | 'underlined';
+export type TextareaValidationState = 'default' | 'valid' | 'invalid' | 'warning';
+export interface TextareaCssClass {
+    root?: string;
+    label?: string;
+    required?: string;
+    field?: string;
+    footer?: string;
+    messageWrap?: string;
+    message?: string;
+    counter?: string;
+}
+export type TextareaModelEventDetail = {
+    modelValue: string;
+    currentValue: string;
+    oldValue: string;
+    value: string;
+    name?: string;
+    sourceEvent?: Event;
+};
+export type TextareaModelEvent = CustomEvent<TextareaModelEventDetail>;
+export interface TextareaProps extends VisibilityProps {
+    /** Two-way bound text value of the textarea. */
+    modelValue?: string;
+    'model-value'?: string;
+    modelvalue?: string;
+    /** Text value (kept in sync with modelValue). */
+    value?: string;
+    /** Form field name for the underlying textarea. */
+    name?: string;
+    /** Placeholder text shown when empty. */
+    placeholder?: string;
+    /** Text label shown above the textarea. */
+    label?: string;
+    /** Helper text shown below the textarea. */
+    helperText?: string;
+    'helper-text'?: string;
+    helpertext?: string;
+    /** Validation state controlling field styling. */
+    validationState?: TextareaValidationState;
+    'validation-state'?: TextareaValidationState;
+    validationstate?: TextareaValidationState;
+    /** Message shown for the current validation state. */
+    validationMessage?: string;
+    'validation-message'?: string;
+    validationmessage?: string;
+    /** Error message that forces the invalid state. */
+    errorMessage?: string;
+    'error-message'?: string;
+    errormessage?: string;
+    /** Success message that forces the valid state. */
+    successMessage?: string;
+    'success-message'?: string;
+    successmessage?: string;
+    /** Size of the textarea. */
+    size?: TextareaSize;
+    /** Color theme of the textarea. */
+    color?: TextareaColor;
+    /** Visual style of the textarea. */
+    variant?: TextareaVariant;
+    /** Disables interaction with the textarea. */
+    disabled?: boolean;
+    /** Makes the textarea read-only. */
+    readonly?: boolean;
+    /** Marks the field as required. */
+    required?: boolean;
+    /** Focuses the textarea on first render. */
+    autofocus?: boolean;
+    /** Automatically grows the height to fit content. */
+    autoResize?: boolean;
+    'auto-resize'?: boolean;
+    autoresize?: boolean;
+    /** Initial number of visible text rows. */
+    rows?: number;
+    /** Minimum number of rows when auto-resizing. */
+    minRows?: number;
+    'min-rows'?: number;
+    minrows?: number;
+    /** Maximum number of rows when auto-resizing. */
+    maxRows?: number;
+    'max-rows'?: number;
+    maxrows?: number;
+    /** Minimum allowed character length. */
+    minLength?: number;
+    'min-length'?: number;
+    minlength?: number;
+    /** Maximum allowed character length. */
+    maxLength?: number;
+    'max-length'?: number;
+    maxlength?: number;
+    /** Shows a character counter below the field. */
+    showCounter?: boolean;
+    'show-counter'?: boolean;
+    showcounter?: boolean;
+    /** Accessible label for screen readers. */
+    ariaLabelText?: string;
+    ariaLabel?: string;
+    'aria-label'?: string;
+    'aria-label-text'?: string;
+    arialabel?: string;
+    arialabeltext?: string;
+    /**
+     * Explicit sizing. Each accepts a CSS length string (`"320px"`, `"80%"`) or a
+     * number (interpreted as px). Use `width="100%"` for a full-width field.
+     */
+    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 for styling internal elements. */
+    cssClass?: TextareaCssClass;
+    cssclass?: TextareaCssClass;
+    'css-class'?: TextareaCssClass | string;
+}
+export interface TextareaEvents {
+    input: TextareaModelEvent;
+    change: TextareaModelEvent;
+    'mno-input': TextareaModelEvent;
+    mnoInput: TextareaModelEvent;
+    'mno-change': TextareaModelEvent;
+    mnoChange: TextareaModelEvent;
+}

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

@@ -0,0 +1,7 @@
+import { TextareaColor, TextareaSize, TextareaValidationState, TextareaVariant } from './textarea-types.js';
+export declare function validateTextareaProps(props: {
+    size?: TextareaSize;
+    color?: TextareaColor;
+    variant?: TextareaVariant;
+    validationState?: TextareaValidationState;
+}): boolean;

package/dist/src/components/tooltip/control-tooltip.d.ts

@@ -0,0 +1,36 @@
+import { MonoTooltipController, MonoTooltipOptions, MonoTooltipTarget } from './tooltip-types';
+/**
+ * A REAL document. `typeof document` is not enough on the server: Lit's SSR DOM shim (loaded by
+ * VitePress / Nuxt SSR through @mono-lit/helper's server entries) defines a global `document` stub with no
+ * `addEventListener`, so a `typeof` guard passed and `createMonoTooltip()` in an app's setup threw
+ * "document.addEventListener is not a function" during server render.
+ */
+export declare function hasLiveDocument(): boolean;
+/** Prefix of the declarative anchor attributes (`mono-tooltip-content`, …). */
+export declare const ANCHOR_ATTR_PREFIX = "mono-tooltip-";
+/**
+ * Attach a tooltip to every element `target` names — now or later.
+ *
+ * ```ts
+ * // <script setup> — the elements need not exist yet
+ * const tip = controlMonoTooltip('.save-btn', { content: 'Save changes', placement: 'bottom' })
+ * onBeforeUnmount(() => tip.destroy())
+ * ```
+ *
+ * `target` is a CSS selector, an element, a list of elements, or a Vue ref /
+ * getter of any of those. Light `<mono-*>` elements, shadow `<mono-shadow-*>`
+ * hosts and elements inside open shadow roots all match.
+ *
+ * Needs the optional peers `@floating-ui/dom` + `@floating-ui/core`, loaded on
+ * the first show. Options set with `createMonoTooltip` override these.
+ */
+export declare function controlMonoTooltip(target: MonoTooltipTarget, options?: MonoTooltipOptions): MonoTooltipController;
+/**
+ * @internal — a controller with a per-anchor options layer. Used by the
+ * declarative `mono-tooltip-*` attributes (`tooltip-declarative.ts`).
+ */
+export declare function createTooltipController(target: MonoTooltipTarget, options: MonoTooltipOptions, anchorOptions: (anchor: Element) => MonoTooltipOptions): MonoTooltipController;
+/** Alias, matching the `monoX` / `controlMonoX` pairs of the other controllers. */
+export declare const monoTooltip: typeof controlMonoTooltip;
+/** @internal — close and forget every live controller. Public as `destroyAllMonoTooltips`. */
+export declare function destroyAllTooltipControllers(): void;

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

@@ -0,0 +1,6 @@
+/// <reference path="../../../vue.d.ts" />
+export { controlMonoTooltip, monoTooltip } from './control-tooltip';
+export { createMonoTooltip, resetMonoTooltip, destroyAllMonoTooltips, readTooltipAttributes, TOOLTIP_ATTRIBUTE_SELECTOR, } from './tooltip-declarative';
+export { getMonoTooltipGlobal, resolveTooltipOptions, DEFAULT_TOOLTIP_OPTIONS } from './tooltip-config';
+export { loadFloatingUi } from './tooltip-loader';
+export type { MonoTooltipOptions, MonoTooltipGlobalOptions, MonoTooltipGlobal, MonoTooltipController, MonoTooltipTarget, MonoTooltipTargetValue, MonoTooltipContent, MonoTooltipPlacement, MonoTooltipTrigger, MonoTooltipVariant, MonoTooltipColor, MonoTooltipSize, } from './tooltip-types';

package/dist/src/components/tooltip/tooltip-config.d.ts

@@ -0,0 +1,27 @@
+import { MonoTooltipGlobalOptions, MonoTooltipOptions } from './tooltip-types';
+export declare const DEFAULT_TOOLTIP_OPTIONS: {
+    allowHTML: false;
+    placement: "top";
+    offset: number;
+    padding: number;
+    flip: true;
+    shift: true;
+    arrow: true;
+    trigger: ("focus" | "hover")[];
+    delay: [number, number];
+    interactive: false;
+    variant: "inverted";
+    size: "md";
+    disabled: false;
+    hideOnClick: true;
+};
+export type ResolvedTooltipOptions = MonoTooltipOptions & typeof DEFAULT_TOOLTIP_OPTIONS;
+/** @internal — written by `createMonoTooltip` / `resetMonoTooltip`. */
+export declare function setMonoTooltipGlobal(options: MonoTooltipGlobalOptions | null): void;
+/** The current global options, or `null` when none were set. */
+export declare function getMonoTooltipGlobal(): Readonly<MonoTooltipGlobalOptions> | null;
+/**
+ * `DEFAULTS ← local ← global ← anchor`, key by key; `undefined` never
+ * overwrites. `anchor` is the options read off the element's own attributes.
+ */
+export declare function resolveTooltipOptions(local?: MonoTooltipOptions | null, anchor?: MonoTooltipOptions | null): ResolvedTooltipOptions;

package/dist/src/components/tooltip/tooltip-declarative.d.ts

@@ -0,0 +1,41 @@
+import { MonoTooltipGlobal, MonoTooltipGlobalOptions, MonoTooltipOptions } from './tooltip-types';
+/** The two text attributes — `message` is an alias of `content`. */
+export declare const TOOLTIP_ATTRIBUTE_SELECTOR = "[mono-tooltip-content], [mono-tooltip-message]";
+/**
+ * Per-element options, from `mono-tooltip-<option>` attributes:
+ *
+ * | attribute | option |
+ * | --- | --- |
+ * | `mono-tooltip-content` / `-message` | `content` (text) |
+ * | `mono-tooltip-placement` / `-variant` / `-color` / `-size` | same name |
+ * | `mono-tooltip-trigger` | `"hover focus"`, `"click"`, … |
+ * | `mono-tooltip-delay` | `"300"` or `"300 100"` |
+ * | `mono-tooltip-offset` / `-padding` | numbers |
+ * | `mono-tooltip-max-width` / `-class` | strings |
+ * | `mono-tooltip-arrow` / `-flip` / `-shift` / `-interactive` / `-html` / `-disabled` / `-hide-on-click` | booleans — present = on, `"false"` = off |
+ */
+export declare function readTooltipAttributes(el: Element): MonoTooltipOptions;
+/**
+ * Set the app-wide tooltip options AND switch on the `mono-tooltip-*` attributes.
+ * Call once — usually in `main.ts`:
+ *
+ * ```ts
+ * app.use(createMonoTooltip({ delay: [300, 0] }))
+ * // or simply
+ * createMonoTooltip()
+ * ```
+ *
+ * The options WIN over the ones passed to `controlMonoTooltip`; an element's own
+ * `mono-tooltip-*` attributes win over them. A later call replaces the previous
+ * global options wholesale. `attributes: false` keeps the options but turns the
+ * declarative attributes off.
+ */
+export declare function createMonoTooltip(options?: MonoTooltipGlobalOptions): MonoTooltipGlobal;
+/**
+ * Close and forget every live tooltip controller — the attribute one included
+ * (a later `createMonoTooltip()` turns the attributes back on). For tests and a
+ * full app teardown; the global options are kept.
+ */
+export declare function destroyAllMonoTooltips(): void;
+/** Drop the global options and turn the attributes off (tests, runtime reconfiguration). */
+export declare function resetMonoTooltip(): void;

package/dist/src/components/tooltip/tooltip-loader.d.ts

@@ -0,0 +1 @@
+export declare function loadFloatingUi(): Promise<typeof import('@floating-ui/dom')>;

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

@@ -0,0 +1,110 @@
+import { MaybeReactive } from '../../composables/reactive';
+type Side = 'top' | 'right' | 'bottom' | 'left';
+export type MonoTooltipPlacement = Side | `${Side}-start` | `${Side}-end`;
+/** What opens the tooltip. `manual` = only `show()` / `hide()` do. */
+export type MonoTooltipTrigger = 'hover' | 'focus' | 'click' | 'manual';
+/** `inverted` = Basecoat's dark-on-light chip (default); `popover` = the dropdown surface. */
+export type MonoTooltipVariant = 'inverted' | 'popover';
+export type MonoTooltipColor = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'teal' | 'purple' | 'neutral' | 'dark';
+export type MonoTooltipSize = 'sm' | 'md' | 'lg';
+/**
+ * The tooltip body. A function is called with the ANCHOR on every show, so one
+ * `controlMonoTooltip('.row-action', …)` can say something different per row.
+ * Returning `null` / `''` skips the show.
+ */
+export type MonoTooltipContent = string | Node | ((anchor: Element) => string | Node | null | undefined);
+/** Anything that names the elements to decorate. */
+export type MonoTooltipTargetValue = string | Element | null | undefined | ArrayLike<Element> | Iterable<Element>;
+/**
+ * A CSS selector (`'.save'`, `'#id'`, `'[data-tip]'`, `'mono-button'`), an element,
+ * a list of elements, or a Vue `ref` / getter of any of those — re-read on every
+ * pointer / focus event, so a ref that is still `null` in `<script setup>` just
+ * starts matching once the element mounts.
+ */
+export type MonoTooltipTarget = MaybeReactive<MonoTooltipTargetValue>;
+export interface MonoTooltipOptions {
+    /**
+     * The text (or node) to show. When omitted the anchor supplies it:
+     * `mono-tooltip-content` → `mono-tooltip-message` → `title` → `aria-label`.
+     */
+    content?: MonoTooltipContent;
+    /** Treat string content as HTML. Default `false` (set as text). */
+    allowHTML?: boolean;
+    /** Preferred side (+ alignment). Default `'top'`. Flipped when there is no room. */
+    placement?: MonoTooltipPlacement;
+    /** Gap between the anchor and the tooltip, px. Default `6`. */
+    offset?: number;
+    /** Viewport padding kept by flip/shift, px. Default `8`. */
+    padding?: number;
+    /** Flip to the opposite side when the preferred one overflows. Default `true`. */
+    flip?: boolean;
+    /** Slide along the anchor to stay inside the viewport. Default `true`. */
+    shift?: boolean;
+    /** Draw the pointer arrow. Default `true`. */
+    arrow?: boolean;
+    /** What opens it. Default `['hover', 'focus']`. */
+    trigger?: MonoTooltipTrigger | MonoTooltipTrigger[];
+    /** Open / close delay in ms — one number for both, or `[show, hide]`. Default `[100, 0]`. */
+    delay?: number | [number, number];
+    /** Keep it open while the pointer is over the tooltip itself (links, buttons inside). Default `false`. */
+    interactive?: boolean;
+    /** CSS `max-width` of the bubble. Default: `--mono-tooltip-max-width`, else `20rem`. */
+    maxWidth?: string;
+    variant?: MonoTooltipVariant;
+    /** Paint the bubble in a palette colour instead of the variant's surface. */
+    color?: MonoTooltipColor;
+    size?: MonoTooltipSize;
+    /** Extra class(es) on the floating element. */
+    class?: string;
+    /** Where the floating element is appended. Default `document.body`. */
+    appendTo?: Element | (() => Element | null);
+    /** Stop opening (an open one closes). Default `false`. */
+    disabled?: boolean;
+    /** Close a hover/focus tooltip when its anchor is clicked. Default `true`. */
+    hideOnClick?: boolean;
+    /** Before it opens — return `false` to cancel. */
+    onShow?: (anchor: Element, tooltip: HTMLElement) => void | boolean;
+    /** Before it closes — return `false` to keep it. */
+    onHide?: (anchor: Element, tooltip: HTMLElement) => void | boolean;
+}
+/**
+ * What `createMonoTooltip` / Nuxt's `mono.helper.tooltip` take: every tooltip
+ * option (applied app-wide) plus the addon switches below. The Nuxt config
+ * additionally has to be JSON — no functions, no nodes.
+ */
+export interface MonoTooltipGlobalOptions extends MonoTooltipOptions {
+    /**
+     * Turn on the declarative attributes — any element (plain HTML, light or
+     * shadow `<mono-*>`) with `mono-tooltip-content="…"` (or `mono-tooltip-message`)
+     * gets a tooltip, no `controlMonoTooltip` call needed. Default `true`.
+     */
+    attributes?: boolean;
+}
+/** What `controlMonoTooltip(...)` returns. */
+export interface MonoTooltipController {
+    /** Open on `anchor` (default: the first element the target currently resolves to). */
+    show(anchor?: Element): Promise<void>;
+    hide(): void;
+    toggle(anchor?: Element): Promise<void>;
+    /** Merge into this controller's own options (global options still win). */
+    update(options: Partial<MonoTooltipOptions>): void;
+    /** Replace the content; an open tooltip re-renders in place. */
+    setContent(content: MonoTooltipContent | undefined): void;
+    enable(): void;
+    disable(): void;
+    /** True while the tooltip is on screen. */
+    readonly isOpen: boolean;
+    /** The element it is currently open on, else `null`. */
+    readonly anchor: Element | null;
+    /** The floating element while open, else `null`. */
+    readonly tooltip: HTMLElement | null;
+    /** Close it and stop listening. Call from `onBeforeUnmount`. */
+    destroy(): void;
+}
+/** What `createMonoTooltip(...)` returns — also a Vue plugin (`app.use(...)`). */
+export interface MonoTooltipGlobal {
+    readonly options: Readonly<MonoTooltipGlobalOptions>;
+    /** Vue plugin hook — a no-op; the options are already applied by the call. */
+    install(app?: unknown): void;
+}
+export {};

package/dist/src/composables/breakpoints.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Shared viewport breakpoints — Tailwind's values, so `auto-fullscreen="lg"` in a
+ * mono component and `lg:` in the consumer's utility classes agree on where the
+ * boundary is.
+ *
+ * The library already hard-codes `@media (max-width: 640px)` in `button.css`,
+ * `card.css` and `nav.css`; those stay as they are. This module exists because
+ * `autoFullscreen` needs the same five tokens in two components plus the matching
+ * JS check, and three copies of a magic number is where it stops being fine.
+ *
+ * `sidebar-utils.ts` keeps its own `SIDEBAR_AUTO_BREAKPOINT = 768` deliberately —
+ * re-pointing it here would silently change the sidebar's auto-temporary threshold.
+ */
+export declare const MONO_BREAKPOINTS: {
+    readonly sm: 640;
+    readonly md: 768;
+    readonly lg: 1024;
+    readonly xl: 1280;
+    readonly '2xl': 1536;
+};
+export type MonoBreakpoint = keyof typeof MONO_BREAKPOINTS;
+/**
+ * `autoFullscreen`'s value: `false` off, `true` = the default `sm`, or a token to
+ * move the boundary. "lg" means **lg and below** — i.e. everything Tailwind's `lg:`
+ * prefix does NOT match.
+ */
+export type MonoAutoFullscreen = boolean | MonoBreakpoint;
+/**
+ * Normalise the prop to the breakpoint it should act at, or `null` when off.
+ *
+ * An unrecognised token falls back to `sm` rather than switching the feature off:
+ * the author clearly asked for auto-fullscreen, and silently ignoring them is the
+ * worse failure. Warns once in dev.
+ */
+export declare function resolveAutoFullscreen(value: MonoAutoFullscreen | string | undefined | null): MonoBreakpoint | null;
+/**
+ * Lit converter for the `auto-fullscreen` attribute.
+ *
+ * Modelled on `booleanStringConverter` (composables/hybird-prop.ts), including its
+ * non-string guard: nuxt-ssr-lit forwards the raw PROPERTY value into
+ * `fromAttribute`, so a real boolean can arrive here instead of a string.
+ */
+export declare const autoFullscreenConverter: {
+    fromAttribute(value: unknown): MonoAutoFullscreen;
+    toAttribute(value: MonoAutoFullscreen): string | null;
+};
+/**
+ * Is the viewport currently at or below `bp`?
+ *
+ * Guard order copied from `sidebar-utils.ts`: `typeof window === 'undefined'` alone
+ * is NOT a safe server check, because a DOM shim can define `window` without
+ * `matchMedia`. Check lit's `isServer` first, then feature-detect.
+ *
+ * Deliberately point-in-time with no listener — the only callers are pointer
+ * handlers (the modal's header drag, the drawer's resize start), so there is
+ * nothing to re-render from and nothing to leak. Every VISUAL decision is made by
+ * the `@media` blocks in modal.css / drawer.css, which have no SSR surface at all.
+ */
+export declare function isBelowBreakpoint(bp: MonoBreakpoint): boolean;

package/dist/src/composables/chip-limits.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Selection limits and display caps shared by `<mono-tag-input>` and
+ * `<mono-dropdown-table>`.
+ *
+ * Two independent pairs:
+ *
+ * - `max` / `min` — how many chips the USER can have selected. A pick past `max`
+ *   is rejected (nothing is disabled — the row stays clickable, the pick simply
+ *   does not land); a removal under `min` is rejected the same way, chips at the
+ *   floor lose their ✕ and the field's clear button hides.
+ * - `maxVisible` / `minVisible` — how many chips are DRAWN. Past `maxVisible` the
+ *   rest collapse into a "+N more" chip whose panel lists them, in `flex` and
+ *   `inline` alike. `minVisible` is the collapse floor: while the total is at or
+ *   under it every chip is drawn, however small `maxVisible` is — so a field is
+ *   never collapsed for the sake of one or two chips.
+ *
+ * Each key can be set on the element (`max`, `max-visible`, …) or on the `chip`
+ * object, camel or kebab (`chip.maxVisible`, `chip['max-visible']`). The chip key
+ * PINS, the element prop is the fallback — the rule `chip.color` / `chip.variant`
+ * already follow.
+ */
+export type ChipLimitKey = 'max' | 'min' | 'maxVisible' | 'minVisible';
+/** The limit keys the `chip` object accepts, in both spellings. */
+export interface ChipLimitProps {
+    /** Most chips the user can select (unset = unlimited). Pins the element's `max`. */
+    max?: number;
+    /** Fewest chips the user can leave (unset = 0). Pins the element's `min`. */
+    min?: number;
+    /** Chips drawn before "+N more" (unset = all). Pins the element's `max-visible`. */
+    maxVisible?: number;
+    'max-visible'?: number;
+    /** Never collapse while the total is at or under this. Pins `min-visible`. */
+    minVisible?: number;
+    'min-visible'?: number;
+}
+/** A non-negative integer, or undefined for anything that is not one (`''`, null, NaN, -1). */
+export declare function limitNumber(value: unknown): number | undefined;
+/**
+ * Resolve one limit: the `chip` object's key (camel, then kebab) pins, the
+ * element's own prop is the fallback. Sanitised through {@link limitNumber}.
+ */
+export declare function resolveChipLimit(chip: ChipLimitProps | null | undefined, key: ChipLimitKey, elementValue: unknown): number | undefined;
+/**
+ * How many chips to draw before the rest collapse into "+N more" — `Infinity`
+ * when there is no cap, when the cap is `0` (uncapped, like before), or while
+ * the total sits at or under the collapse floor.
+ */
+export declare function visibleChipCap(total: number, maxVisible: number | undefined, minVisible: number | undefined): number;

package/dist/src/composables/chip-strip.d.ts

@@ -0,0 +1,93 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+export interface ChipStripOptions {
+    /** The scrolling strip, or `null` when the host is not rendering one. */
+    strip: () => HTMLElement | null;
+    /**
+     * Whether inline behaviour is active. False means the host renders no strip,
+     * so the controller stays completely inert — no observer, no queries, no
+     * layout reads. This is what keeps `flex` mode free.
+     */
+    enabled: () => boolean;
+}
+export declare class ChipStripController implements ReactiveController {
+    private readonly host;
+    private readonly opts;
+    private _canScrollStart;
+    private _canScrollEnd;
+    private _observer;
+    /** The element the observer is attached to, so a re-render can re-target it. */
+    private _observed;
+    constructor(host: ReactiveControllerHost, opts: ChipStripOptions);
+    /** True once the strip is scrolled away from its start — render `‹`. */
+    get canScrollStart(): boolean;
+    /** True while content remains past the right edge — render `›`. */
+    get canScrollEnd(): boolean;
+    /** True when either button should show — i.e. the chips overflow the strip. */
+    get overflowing(): boolean;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /**
+     * Only re-target the observer — deliberately does NOT measure. Measuring here
+     * would force a layout on every render of every host, and its `requestUpdate`
+     * would schedule an update from inside `updated()`. `invalidate()` and the
+     * ResizeObserver cover the cases that can actually change the answer.
+     */
+    hostUpdated(): void;
+    /**
+     * Re-measure because the CONTENT changed — a chip added, removed or relabelled.
+     * The host calls this from `updated()` when such state actually changed, which
+     * is far rarer than "every update".
+     */
+    invalidate(): void;
+    /**
+     * Recompute both flags from the live geometry and re-render only when one
+     * actually flipped.
+     */
+    sync(): void;
+    /**
+     * Scroll one "page" toward `dir`, aligned to a chip boundary so a chip is
+     * never left half-cut at the leading edge.
+     *
+     * Forward: the first chip whose right edge passes the visible right edge
+     * becomes the new leftmost chip. Backward: the chip that would end at the
+     * current left edge becomes the new leftmost chip. If no chip qualifies
+     * (one chip wider than the strip), fall back to a plain viewport-width step
+     * so the button is never a no-op.
+     */
+    page(dir: -1 | 1): void;
+    /** Pin the strip to its end — used after a chip is added, to reveal it. */
+    scrollToEnd(): void;
+    /**
+     * Move the strip and republish from the CLAMPED TARGET rather than by reading
+     * `scrollLeft` back.
+     *
+     * Scrolling is instant (no `scroll-behavior: smooth`), so the read would agree
+     * — but not reading avoids a second forced layout, and more importantly the
+     * strip's scroll events are expensive well beyond this controller: the shared
+     * popup controller listens for `scroll` on `window` in the CAPTURE phase, so
+     * every scroll event the strip emits repositions any open dropdown, forcing a
+     * layout and a `getComputedStyle` ancestor walk. One event per click is the
+     * budget; a smooth animation's ~30 was what made the page crawl.
+     */
+    private _scrollTo;
+    /**
+     * Store the flags and re-render only on a real change.
+     *
+     * The request is deferred a microtask: `invalidate()` / `scrollToEnd()` are
+     * called from the host's `updated()` (a chip landed, a preset value arrived),
+     * and a synchronous `requestUpdate()` there is Lit's change-in-update warning
+     * on every such edge. The flags are already stored, so the deferred render
+     * reads the same answer — it just doesn't get scheduled from inside the
+     * render that asked for it.
+     */
+    private _publish;
+    /**
+     * Observe the strip so the buttons re-evaluate when the FIELD is resized —
+     * a window resize changes `clientWidth` without any render or scroll event.
+     *
+     * Only the strip is observed, not the chips: a chip add/remove always comes
+     * with a host render, and the host calls `invalidate()` for those.
+     */
+    private _attach;
+    private _teardown;
+}