@aparte/core 0.15.1 → 0.16.1

package/dist/components/sidebar/aparte-sidebar.d.ts

@@ -0,0 +1,186 @@
+/** Detail of `aparte-sidebar-toggle`: the state just entered. */
+export interface AparteSidebarToggleDetail {
+    collapsed: boolean;
+    /** True while the sidebar is a drawer — the window is under the breakpoint. */
+    drawer: boolean;
+}
+/**
+ * The column beside the chat — conversations, a new-chat button, a search field, an
+ * account row — as an element, because it has behaviour: it collapses, it becomes a
+ * drawer on a narrow window, and its search field filters the conversation list.
+ *
+ * What it does NOT own is its content. Children are yours, in the order you want them:
+ * a `.aparte-sidebar__header`, a `.aparte-sidebar__search`, a `.aparte-sidebar__body`
+ * holding the `<aparte-conversation-list>`, a `.aparte-sidebar__footer`. The
+ * stylesheet lays those out and draws nothing you did not put there — the recipe
+ * (`.aparte-sidebar`, in `styles/shell/sidebar.css`) is the look, this element is
+ * the three behaviours.
+ *
+ * **Collapse.** `collapsed` is an attribute, reflected, so the host can set it, read
+ * it and persist it. Any element carrying `data-aparte-sidebar-toggle` anywhere on
+ * the page toggles the nearest sidebar (or the one whose id the attribute names), so
+ * a hamburger in the header needs no script. `aparte-sidebar-toggle` fires on every
+ * change, whoever caused it.
+ *
+ * **Drawer.** Under 48rem of window the sidebar leaves the flow and slides over the
+ * page (`data-drawer`, set by the element from a media query); open, it draws a
+ * scrim, moves the focus to its first focusable child, closes on Escape from anywhere
+ * on the page or on a click outside, and hands the focus back to the control that
+ * opened it. Nothing here is a portal: the drawer is the same element in the same
+ * place, positioned fixed, which is all a sidebar needs and what a dialog would not
+ * get away with. Collapsed — folded as a column or slid off as a drawer — it carries
+ * `inert` and `aria-hidden`, so nothing invisible keeps a tab stop.
+ *
+ * **Search.** An input carrying `data-aparte-sidebar-search` filters the conversation
+ * list below it by title as the user types — rows that do not match are hidden, and a
+ * date group with nothing left hides with them. Client-side, on the titles the list
+ * already has: an index over message bodies is the storage adapter's business.
+ *
+ * @element aparte-sidebar
+ *
+ * @attr {boolean} collapsed - Hidden (in the flow) or closed (as a drawer). Reflected; set it to start closed.
+ * @attr {string} breakpoint - The window width under which the sidebar becomes a drawer: a length (default `48rem`), or `none` for a column that never does.
+ * @attr {boolean} data-drawer - Reflected BY the element while the window is under 48rem. Read-only.
+ *
+ * @fires {CustomEvent<AparteSidebarToggleDetail>} aparte-sidebar-toggle - The sidebar opened or closed, by a toggle, by Escape, by a click on the scrim or by `collapsed` being set. Bubbles.
+ *
+ * @cssprop [--aparte-sidebar-width=260px] - Width of the column, and of the drawer.
+ * @cssprop [--aparte-sidebar-bg=var(--aparte-surface-2)] - Its ground.
+ *
+ * @example
+ * <!-- The sidebar alone, as a column: its header, a search field that filters the list,
+ *      the list, a footer. The shell it sits in — header, chat — is the app-shell guide's.
+ *      breakpoint="none" keeps it a column at any width; without it, under 48rem of
+ *      window it becomes a drawer behind a [data-aparte-sidebar-toggle] control. -->
+ * <aparte-sidebar breakpoint="none" style="height: 22rem">
+ *   <div class="aparte-sidebar__header">
+ *     <span class="aparte-sidebar__brand">aparté</span>
+ *     <button class="aparte-btn aparte-btn--icon aparte-btn--sm" type="button" aria-label="New chat">
+ *       <aparte-icon name="edit"></aparte-icon>
+ *     </button>
+ *   </div>
+ *   <div class="aparte-sidebar__search aparte-field-group">
+ *     <input class="aparte-field aparte-field--sm" type="search" placeholder="Search conversations" data-aparte-sidebar-search>
+ *   </div>
+ *   <div class="aparte-sidebar__body">
+ *     <aparte-conversation-list active-id="c1"></aparte-conversation-list>
+ *   </div>
+ *   <div class="aparte-sidebar__footer">
+ *     <span class="aparte-avatar aparte-avatar--sm">P</span> Paul
+ *   </div>
+ * </aparte-sidebar>
+ * <script>
+ *   const day = 864e5;
+ *   document.querySelector('aparte-conversation-list').conversations = [
+ *     { id: 'c1', title: 'Deploy checklist', updatedAt: Date.now() },
+ *     { id: 'c2', title: 'Rename the segment types', updatedAt: Date.now() - day },
+ *     { id: 'c3', title: 'Tokens, not selectors', updatedAt: Date.now() - 4 * day },
+ *     { id: 'c4', title: 'The first release', updatedAt: Date.now() - 60 * day },
+ *   ];
+ * </script>
+ */
+export declare class AparteSidebar extends HTMLElement {
+    static get observedAttributes(): string[];
+    private _media;
+    private _scrim;
+    /** The control that last opened the drawer, to hand the focus back to. */
+    private _opener;
+    private _lastCollapsed;
+    /**
+     * `connectedCallback` has run and the element knows what its markup asked for.
+     *
+     * Not `isConnected`: during an UPGRADE the element is already in the document, so
+     * `attributeChangedCallback` fires for every authored attribute — connected, and
+     * before `connectedCallback` — which is the ordinary case for a server-rendered
+     * `<aparte-sidebar collapsed>` upgraded when the module loads. Announcing there
+     * tells the host its sidebar just closed when all that happened is that the markup
+     * was read, and says `drawer: false` because the media query has not run yet.
+     */
+    private _ready;
+    /**
+     * The host (or the markup) asked for the column to be folded, so widening the
+     * window must not unfold it. Only a collapse taken OUTSIDE the drawer state counts:
+     * dismissing an overlay says nothing about what a wide window should show.
+     */
+    private _closedByHost;
+    /**
+     * `_closedByHost` has been taken from the markup once. A re-parent runs
+     * `connectedCallback` again, and by then `collapsed` may be the BREAKPOINT's own
+     * write — a drawer closes itself on the way in — so reading it back a second time
+     * records the element's own doing as the host's word and the column never reopens.
+     * Like `_initialCaptured` on `<aparte-split>`, it must survive the move.
+     */
+    private _hostIntentSeeded;
+    /** Raised around `_applyDrawer`'s own writes, so the breakpoint is never read as a host's intent. */
+    private _auto;
+    /**
+     * The element wrote `inert`/`aria-hidden` and may take them back. A host that inerts
+     * the sidebar behind its own modal wrote them itself, and `_syncHidden` runs on every
+     * breakpoint re-evaluation: without this it would un-inert the page behind the overlay.
+     * Same convention as `_relabel`, which leaves a host-authored `aria-label` alone.
+     */
+    private _ownHidden;
+    /** Whether the sidebar is collapsed (hidden in the flow, or closed as a drawer). */
+    get collapsed(): boolean;
+    set collapsed(value: boolean);
+    /** True while the window is under the breakpoint and the sidebar is a drawer. */
+    get drawer(): boolean;
+    connectedCallback(): void;
+    /**
+     * The drawer's media query, from the `breakpoint` attribute: a length (`48rem`, the
+     * default, or `640px`), or `none` for a column that never becomes a drawer — which
+     * a narrow host that has room for it wants, and a documentation frame needs.
+     */
+    private _watchBreakpoint;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    /** Open the sidebar. `opener` is the control to hand the focus back to when it closes. */
+    open(opener?: HTMLElement): void;
+    close(): void;
+    toggle(opener?: HTMLElement): void;
+    private _onMediaChange;
+    /**
+     * Entering the drawer state closes the sidebar: a narrow window that opens on an
+     * overlay covering the chat is the wrong first screen. Leaving it reopens, since
+     * a wide window has room for the column — unless the host had collapsed it before.
+     */
+    private _applyDrawer;
+    /**
+     * A collapsed sidebar is invisible — folded to nothing in the flow, slid off the
+     * screen as a drawer — so it must not keep its tab stops or its place in the
+     * accessibility tree. `inert` covers focus and the pointer, `aria-hidden` covers
+     * the readers that predate it; a browser without `inert` still gets the second.
+     *
+     * It removes only what it wrote. Both are standard global attributes a host sets
+     * itself — inerting the sidebar behind its own modal is the ordinary pattern — and
+     * this runs on every breakpoint re-evaluation, so clearing them unconditionally lets
+     * an unrelated resize re-expose the page under an overlay. Same convention as
+     * `_relabel`, which leaves a host-authored `aria-label` alone.
+     *
+     * Neither is declared `@attr`, and `data-drawer` is not the precedent: a `@attr` on a
+     * STANDARD name displaces the wrappers' own prop for it — React's JSX props are
+     * `Omit<HTMLAttributes, keyof T>`, so declaring `inert` here would retype
+     * `<aparte-sidebar inert={busy}>` out of existence. The class docblock says it in prose.
+     */
+    private _syncHidden;
+    /**
+     * The drawer covers the page, so the focus has to follow it in — otherwise the next
+     * Tab walks the transcript under the overlay. The host owns the children, so this
+     * takes the first thing that can hold focus and leaves the rest alone; a drawer with
+     * nothing focusable in it keeps the focus where it was, which is the honest outcome.
+     */
+    private _focusFirst;
+    private _syncScrim;
+    private _onKeydown;
+    /** A `[data-aparte-sidebar-toggle]` anywhere toggles this sidebar — no script in the host. */
+    private _onDocumentClick;
+    private _onInput;
+    /**
+     * Hide the conversation rows whose title does not contain `query`, and the date
+     * groups left empty. Case- and accent-insensitive. An empty query shows everything.
+     */
+    filter(query: string): void;
+    private _onConfigChange;
+    private _relabel;
+}
+//# sourceMappingURL=aparte-sidebar.d.ts.map

package/dist/components/sidebar/aparte-sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"aparte-sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/aparte-sidebar.ts"],"names":[],"mappings":"AAEA,iEAAiE;AACjE,MAAM,WAAW,yBAAyB;IACtC,SAAS,EAAE,OAAO,CAAC;IACnB,+EAA+E;IAC/E,MAAM,EAAE,OAAO,CAAC;CACnB;AAKD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0EG;AACH,qBAAa,aAAc,SAAQ,WAAW;IAC1C,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,OAAO,CAAC,MAAM,CAA+B;IAC7C,OAAO,CAAC,MAAM,CAA4B;IAC1C,0EAA0E;IAC1E,OAAO,CAAC,OAAO,CAA4B;IAC3C,OAAO,CAAC,cAAc,CAAwB;IAE9C;;;;;;;;;OASG;IACH,OAAO,CAAC,MAAM,CAAS;IAEvB;;;;OAIG;IACH,OAAO,CAAC,aAAa,CAAS;IAE9B;;;;;;OAMG;IACH,OAAO,CAAC,iBAAiB,CAAS;IAElC,qGAAqG;IACrG,OAAO,CAAC,KAAK,CAAS;IAEtB;;;;;OAKG;IACH,OAAO,CAAC,UAAU,CAAS;IAE3B,oFAAoF;IACpF,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED,IAAI,SAAS,CAAC,KAAK,EAAE,OAAO,EAE3B;IAED,iFAAiF;IACjF,IAAI,MAAM,IAAI,OAAO,CAEpB;IAED,iBAAiB,IAAI,IAAI;IAyBzB;;;;OAIG;IACH,OAAO,CAAC,gBAAgB;IAexB,oBAAoB,IAAI,IAAI;IAU5B,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IA8B5C,0FAA0F;IAC1F,IAAI,CAAC,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI;IAKhC,KAAK,IAAI,IAAI;IAIb,MAAM,CAAC,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI;IAOlC,OAAO,CAAC,cAAc,CAAkE;IAExF;;;;OAIG;IACH,OAAO,CAAC,YAAY;IAcpB;;;;;;;;;;;;;;;;OAgBG;IACH,OAAO,CAAC,WAAW;IAYnB;;;;;OAKG;IACH,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,UAAU;IAclB,OAAO,CAAC,UAAU,CAKhB;IAEF,8FAA8F;IAC9F,OAAO,CAAC,gBAAgB,CAUtB;IAIF,OAAO,CAAC,QAAQ,CAId;IAEF;;;OAGG;IACH,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAe3B,OAAO,CAAC,eAAe,CAA+B;IAEtD,OAAO,CAAC,QAAQ;CAMnB"}

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

@@ -0,0 +1,3 @@
+export { AparteSidebar } from './aparte-sidebar.js';
+export type { AparteSidebarToggleDetail } from './aparte-sidebar.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,YAAY,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/components/split/aparte-split.d.ts

@@ -0,0 +1,354 @@
+/** Detail of `aparte-split-resize`: the position that settled, and what settled it. */
+export interface AparteSplitResizeDetail {
+    /** The achieved size of the primary pane, as a percentage of the container. */
+    position: number;
+    /** The primary pane is folded to its minimum. */
+    collapsed: boolean;
+    /** The split is under its breakpoint and showing one pane. */
+    stacked: boolean;
+    /** Which pane is shown while stacked. */
+    pane: 'start' | 'end';
+    /** The container's axis, as the `orientation` attribute names it. */
+    orientation: 'horizontal' | 'vertical';
+    /** What moved it: a drag, a key, or the host setting the property. */
+    source: 'pointer' | 'keyboard' | 'api';
+}
+/**
+ * Two panes and a draggable seam — a chat beside a preview, an editor, an artifact card.
+ *
+ * The grid is the mechanism: `--aparte-split-position` is the primary pane's size and
+ * the min/max are CSS clamp bounds, so the browser clamps and nothing here parses a
+ * unit. The element adds only what CSS cannot do — the drag, the arrow keys, the ARIA
+ * of an APG window splitter, and one pane at a time under a breakpoint. Without the
+ * element the `.aparte-split` recipe is still a split; it just does not move.
+ *
+ * It stores nothing: `position` in, one `aparte-split-resize` out on commit. The
+ * attribute is written on COMMIT only — a release, a key up, a double-click, a property
+ * set — and the live value during a drag travels on the custom property, so a
+ * framework's reconciler is not in the drag loop. Persist from the event; restore by
+ * setting `position`.
+ *
+ * A pane CONTAINS a chat; a chat never contains a split.
+ *
+ * `aria-orientation` on the handle is the INVERSE of this element's `orientation`: the
+ * attribute names the SEPARATOR's own axis, which is what the APG means by "Left Arrow
+ * moves a vertical splitter" and what ARIA 1.2 means by the attribute. Do not "fix" it —
+ * consumers style against it.
+ *
+ * Shift + an arrow is ±10%. That is an ecosystem convention, not the APG, which
+ * specifies the single step alone.
+ *
+ * @element aparte-split
+ *
+ * @attr {number} position - The primary pane's size, as a percentage of the container. Reflected on commit, never per drag frame.
+ * @attr {string} orientation - `horizontal` (panes side by side, the default) or `vertical` (stacked). Names the CONTAINER's axis.
+ * @attr {string} primary - `start` (default) or `end`: which pane `position` sizes.
+ * @attr {boolean} collapsed - The primary pane folded to its minimum. Enter on the seam toggles it; a second Enter restores the size it had.
+ * @attr {string} breakpoint - Below this width the split shows one pane at a time. A length (default `48rem`), or `none` to never stack.
+ * @attr {string} pane - `start` (default) or `end`: which pane is shown while stacked.
+ * @attr {boolean} disabled - No drag, no keys, no tab stop; the seam stays drawn.
+ * @attr {string} label - The seam's accessible name. Defaults to the locale's `splitHandleLabel`.
+ * @attr {boolean} data-stacked - Written BY the element while one pane is shown. Read-only; style against it.
+ *
+ * @fires {CustomEvent<AparteSplitResizeDetail>} aparte-split-resize - The position settled: after a drag, a key, a double-click or a property set. Never during a drag — persist from here.
+ *
+ * @cssprop [--aparte-split-position=38%] - The primary pane's size.
+ * @cssprop [--aparte-split-min=20rem] - Floor of the primary pane. Any length or percentage.
+ * @cssprop [--aparte-split-max=60%] - Ceiling of the primary pane.
+ * @cssprop [--aparte-split-handle-size=4px] - The visible seam.
+ * @cssprop [--aparte-split-hit-area=12px] - The invisible grab zone around it. Grows to the touch target on a coarse pointer.
+ *
+ * @example
+ * <!-- The chat in one pane, your own in the other. Drag the seam, or tab to it and use
+ *      the arrows; double-click resets it. `--aparte-split-min` is a CSS length, so the
+ *      chat cannot be dragged narrower than 16rem whatever the percentage says. Under
+ *      48rem of window the split shows one pane, and the buttons switch it. -->
+ * <div class="aparte-app-header">
+ *   <button class="aparte-btn aparte-btn--sm aparte-btn--surface" type="button" data-aparte-split-pane="start">Chat</button>
+ *   <button class="aparte-btn aparte-btn--sm aparte-btn--surface" type="button" data-aparte-split-pane="end">Preview</button>
+ * </div>
+ * <aparte-split position="38" style="height: 22rem; --aparte-split-min: 16rem">
+ *   <aparte-chat>
+ *     <aparte-chat-viewport></aparte-chat-viewport>
+ *     <aparte-composer>
+ *       <div class="aparte-composer-shell">
+ *         <div class="aparte-composer-row">
+ *           <aparte-composer-input></aparte-composer-input>
+ *           <aparte-composer-send></aparte-composer-send>
+ *         </div>
+ *       </div>
+ *     </aparte-composer>
+ *   </aparte-chat>
+ *   <section class="aparte-split__pane">
+ *     <iframe title="Preview" style="inline-size: 100%; block-size: 100%; border: 0" srcdoc="<h1>Your pane</h1>"></iframe>
+ *   </section>
+ * </aparte-split>
+ * <script>
+ *   document.querySelector('aparte-split').addEventListener('aparte-split-resize', (e) => {
+ *     localStorage.setItem('split', String(e.detail.position));
+ *   });
+ * </script>
+ */
+export declare class AparteSplit extends HTMLElement {
+    static get observedAttributes(): string[];
+    private _handle;
+    private _scrim;
+    private _media;
+    private _observer;
+    /** The pending `_measureBounds()` from a resize, batched to one per frame. */
+    private _measureRafId;
+    /** The host size the last resize tick measured, so an unchanged one does nothing. */
+    private _observedPx;
+    /** Ids for the panes `aria-controls` names — a counter, the way the primitives do it. */
+    private static _paneIdSeq;
+    /** The live position. The attribute holds it only after a commit. */
+    private _position;
+    /** What `reset()` — and a double-click on the seam — goes back to. */
+    private _initialPosition;
+    /**
+     * `_initialPosition` has been taken from the markup once. A re-parent runs
+     * `connectedCallback` again, and by then the attribute holds the LAST COMMIT, not
+     * what the author wrote: capturing a second time makes a framework re-render, a tab
+     * switch or a drag-and-drop of the panel redefine what "reset" means.
+     */
+    private _initialCaptured;
+    /** The size the primary pane had before it was collapsed, for the second Enter. */
+    private _preCollapsePosition;
+    /** Committed values, so a reflection of our own does not read as a host's change. */
+    private _lastPosition;
+    private _lastCollapsed;
+    private _lastPane;
+    /** What an attribute-driven commit blames. Raised around a key that changes state. */
+    private _source;
+    /**
+     * `connectedCallback` has run and the element knows what its markup asked for.
+     *
+     * Not `isConnected`: during an UPGRADE the element is already in the document, so
+     * `attributeChangedCallback` fires for every authored attribute — connected, and
+     * before `connectedCallback` — which is the ordinary case for a server-rendered
+     * `<aparte-split position="38">` upgraded when the module loads. Committing there
+     * measures a layout the element has not set up yet (no `data-stacked`, so on a
+     * phone the probe reads the stacked pane and writes `position="84"`), reflects that
+     * over the authored number, and sends it to whatever the host persists.
+     */
+    private _ready;
+    private _dragging;
+    private _captured;
+    /** The gesture actually moved the seam. A press that did not commits nothing. */
+    private _moved;
+    private _pointerId;
+    private _dragStartPercent;
+    private _dragOriginPx;
+    private _dragContainerPx;
+    /** A key is down and has moved the seam; its keyup is the commit. */
+    private _keying;
+    /** The primary pane's size, as a percentage of the container. Setting it commits. */
+    get position(): number;
+    set position(value: number);
+    /** The container's axis: `horizontal` (side by side) or `vertical` (stacked). */
+    get orientation(): 'horizontal' | 'vertical';
+    set orientation(value: 'horizontal' | 'vertical');
+    /** Which pane `position` sizes. */
+    get primary(): 'start' | 'end';
+    set primary(value: 'start' | 'end');
+    /** The primary pane is folded to its minimum. */
+    get collapsed(): boolean;
+    set collapsed(value: boolean);
+    /** Which pane is shown while the split is stacked. */
+    get pane(): 'start' | 'end';
+    set pane(value: 'start' | 'end');
+    /** No drag, no keys, no tab stop. The seam stays drawn. */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    /**
+     * True while the split is showing one pane. Read-only.
+     *
+     * Both routes into that state count. `data-stacked` is the one this element writes
+     * from its own breakpoint; `.aparte-split--only-start` / `--only-end` are the CSS
+     * route a host takes when it owns its breakpoints and sets `breakpoint="none"`. The
+     * sheet gives the two byte-identical rules, so the element has to read them the same
+     * way — every guard downstream keys on this getter, and a split stacked by the class
+     * alone would measure a one-track grid and commit `position="100"`.
+     */
+    get stacked(): boolean;
+    /** Fold the primary pane to its minimum, remembering the size it had. */
+    collapse(): void;
+    /** Unfold it, back to the size it had before it collapsed. */
+    expand(): void;
+    toggleCollapse(): void;
+    /** Show one pane, which only has a visible effect while the split is stacked. */
+    showPane(which: 'start' | 'end'): void;
+    /**
+     * Back to the position the split was FIRST connected with — a re-parent restores
+     * that, it does not redefine it. What a double-click on the seam does.
+     */
+    reset(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    /**
+     * The seam. An author-written `.aparte-split__handle` is ADOPTED — a second one
+     * would be a second tab stop drawn over the first — otherwise one is inserted
+     * between the first two children, which is where a two-pane grid needs it.
+     *
+     * An adopted one is MOVED there if the author put it elsewhere. The sheet is
+     * positional — three tracks with the seam in the middle, and the stacked rules hide
+     * `:nth-child(1)` / `:nth-child(3)` — so a handle written first would take the
+     * primary pane's track and make stacking hide the wrong child.
+     */
+    private _ensureHandle;
+    /** The panes: every element child that is not the seam. */
+    private _panes;
+    private _primaryPane;
+    /**
+     * The APG's window splitter, plus the two states that take it out of the tab order.
+     *
+     * `aria-orientation` is the INVERSE of `orientation`: the attribute names the
+     * separator's own axis, so a split whose panes sit side by side has a VERTICAL
+     * separator between them.
+     */
+    private _stampHandle;
+    private _measure;
+    /**
+     * What the pane ACTUALLY got, which is not what was asked for: the CSS clamp between
+     * `--aparte-split-min` and `--aparte-split-max` has the last word, and announcing the
+     * requested value instead is how a splitter comes to tell a screen reader 5% while
+     * the pane sits at 22%. Without layout (jsdom, `display: none`, before first paint)
+     * the request is all there is, so it stands.
+     *
+     * While STACKED there is nothing to read: one pane is `display: none` and the other
+     * spans the single track, so the ratio is 0 or 100 whatever the seam was set to.
+     * Measuring it there is how tapping "Preview" on a phone used to write `position="0"`
+     * into the attribute, the event and the host's storage.
+     */
+    private _achievedPercent;
+    /**
+     * The range the seam can actually reach, written onto the separator: park the pane
+     * at 0% and read it, park it at 100% and read it, put the position back. Two forced
+     * layouts in one synchronous task, so nothing paints in between.
+     *
+     * It also reconciles `aria-valuenow`, because the two have to be one story: the
+     * requested percentage can sit outside the clamped range the probe just announced —
+     * with a `--aparte-split-min` of `20rem`, `position="38"` on a 700px container asks
+     * for 38 and gets ~46 — and a separator whose value is below its own minimum is the
+     * unclamped-announcement bug this probe exists to prevent, just at rest. `_position`
+     * is left alone: it is the REQUESTED value, and `reset()` means it.
+     *
+     * Gated on `!_dragging`: a ResizeObserver tick mid-gesture would move the pane to
+     * both ends under the pointer. Gated on `!stacked` for the reason
+     * `_achievedPercent()` is: a pane that spans everything measures the same at 0% and
+     * at 100%, which would announce a range of one number.
+     */
+    private _measureBounds;
+    /**
+     * Re-measure when the container's size changes — and only then. The probe writes the
+     * host's `style` three times, and the reflection is commit-only precisely because a
+     * `MutationObserver({ attributes: true })` (the docs' preview frame has one) reposts
+     * a frame height per mutation, which resizes the split, which re-ticks this observer.
+     * So: ignore a tick that did not move the size, and batch the rest to one per frame.
+     */
+    private _watchSize;
+    private _setLive;
+    /**
+     * The commit: reflect, announce, dispatch — once. Everything downstream reads the
+     * ACHIEVED size, so the attribute, `aria-valuenow` and the detail are one number.
+     *
+     * There is no per-frame event on purpose. A bubbling, composed CustomEvent per
+     * pointermove is a reconciler in the drag loop, and no pane in this repo re-lays
+     * itself out in JS — they resize in CSS. The trigger for adding
+     * `aparte-split-resizing` is a consumer whose pane needs a JS measurement mid-drag.
+     */
+    private _commit;
+    /** The computed direction, never `document.dir`: a host can flip one subtree. */
+    private _rtl;
+    private _onPointerDown;
+    /**
+     * Only the pointer that started the gesture. On a hybrid device a hovering pen or a
+     * stray touch delivers a `pointermove` with `buttons === 0`, which would otherwise
+     * fall into the release branch below and end someone else's mouse drag.
+     */
+    private _isOurPointer;
+    private _onPointerMove;
+    private _onPointerUp;
+    private _onPointerCancel;
+    private _endDrag;
+    private _releasePointer;
+    /**
+     * The drag overlay: a fixed, transparent child of the HANDLE, alive for one gesture.
+     * Topmost, so it swallows an iframe pane's hit-testing — the case this exists for —
+     * and paints the drag cursor across the page. A child of the handle rather than of
+     * the body so `click`, and therefore `dblclick`, still dispatches at the handle.
+     */
+    private _addScrim;
+    /**
+     * Take the overlay off.
+     *
+     * `retire` is the press that never moved — the one a click, and then a double-click,
+     * is built from. Its release happened ON the scrim (nothing captured the pointer
+     * yet), and WebKit works out what a click hit by walking the pointerup target's LIVE
+     * ancestors: take the node out here and that chain is rooted nowhere, so no `click`
+     * fires at all, no `dblclick` follows, and the seam never resets. Chromium and Gecko
+     * resolve the target before dispatch and do not care.
+     *
+     * So a retired scrim goes INERT immediately — `pointer-events: none`, which is what
+     * actually matters, since a full-page overlay left hit-testable is a page dead to the
+     * pointer — and leaves the document a moment later. Not on the next task: a first
+     * measurement removed it there and it still raced the click under a loaded machine
+     * (the trace is in `e2e/tests/layout.spec.ts`). The reference is dropped either way,
+     * so the next press builds its own; an inert one on its way out costs nothing.
+     *
+     * Teardown never retires: `disconnectedCallback` takes the live one out at once.
+     */
+    private _removeScrim;
+    private _onDoubleClick;
+    private _onKeydown;
+    /**
+     * The keyup commits, not the keydown: a held arrow repeats, and one release should
+     * write one attribute and send one event, not thirty.
+     */
+    private _onKeyup;
+    /**
+     * The other end of a key step. If focus leaves the seam while the key is still down —
+     * alt-tab, a click into a pane, a host moving focus — the keyup never arrives, and
+     * the pane would stay where the keydown put it while the attribute and
+     * `aria-valuenow` kept the old number for good. What is rendered is what commits.
+     */
+    private _onFocusOut;
+    /**
+     * The stacking query, from the `breakpoint` attribute: a length (`48rem`, the
+     * default, or `640px`), or `none` for a split that stays two panes at any width —
+     * which a documentation frame needs and a host with its own breakpoint wants.
+     */
+    private _watchBreakpoint;
+    private _onMediaChange;
+    /**
+     * Entering the stacked state shows the START pane: the chat, never a preview of
+     * nothing — the same judgement that makes the sidebar's drawer enter closed. Unless
+     * the markup already named one, which is an answer to the same question and a better
+     * one. Leaving it restores both panes, and with them the seam and its tab stop.
+     *
+     * `was` is the ATTRIBUTE, not the `stacked` getter: the getter also counts
+     * `.aparte-split--only-*`, the CSS route a host takes when it owns its breakpoints
+     * and sets `breakpoint="none"`. Read through the getter, that mount looks like a
+     * split leaving a stacked state it never entered — and the `pane` the author wrote
+     * is deleted on the way in.
+     */
+    private _applyStacked;
+    /**
+     * A `[data-aparte-split-pane]` anywhere on the page switches a split's pane, so a
+     * two-button toggle in a header needs no script.
+     *
+     * The value is `start` or `end` — the pane to show. Any other non-empty value names
+     * a split's `id` and TOGGLES that one; empty toggles the nearest split, else the
+     * first on the page. Same shape as `[data-aparte-sidebar-toggle]`.
+     */
+    private _onDocumentClick;
+    private _onConfigChange;
+    /**
+     * The seam's accessible name. A host that wrote its own `aria-label` — or an
+     * `aria-labelledby` pointing at a heading — keeps it: `data-own-label` marks the
+     * one we set, so a language switch replaces ours and never theirs.
+     */
+    private _relabel;
+}
+//# sourceMappingURL=aparte-split.d.ts.map

package/dist/components/split/aparte-split.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"aparte-split.d.ts","sourceRoot":"","sources":["../../../src/components/split/aparte-split.ts"],"names":[],"mappings":"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"}

package/dist/components/split/geometry.d.ts

@@ -0,0 +1,65 @@
+/**
+ * The split's arithmetic, with no DOM in it.
+ *
+ * Separate from the element on purpose: a pointer drag is the path jsdom exercises
+ * worst — it has no layout, no `PointerEvent` and no pointer capture — so the numbers
+ * are proven here, in plain functions a test can call, and the element is left with
+ * the listeners and the attributes.
+ *
+ * Nothing here parses a CSS unit. `--aparte-split-min` and `--aparte-split-max` are
+ * clamp bounds in the grid template, so the browser clamps the pane and this module
+ * only ever moves a percentage between 0 and 100.
+ */
+/** One step of a drag: where it started, how far the pointer went, and along which axis. */
+export interface SplitStep {
+    /** The primary pane's size when the gesture began, as a percentage of the container. */
+    startPercent: number;
+    /** How far the pointer has travelled since, in CSS pixels, along the split's axis. */
+    deltaPx: number;
+    /** The container's size along that same axis. */
+    containerPx: number;
+    /** The computed reading direction is right-to-left. Ignored on the vertical axis. */
+    rtl: boolean;
+    /** The split's orientation is `vertical` — the panes are stacked, the axis is the block one. */
+    vertical: boolean;
+    /**
+     * `primary="end"`: the sized track is the LAST one, so the seam's distance from the
+     * container's start is `100% - handle - position` and a bigger number moves the seam
+     * TOWARD the start. Without this the seam runs away from the pointer.
+     */
+    primaryEnd?: boolean;
+}
+/**
+ * The primary pane's new size, as a percentage of the container, clamped to 0..100.
+ *
+ * A right-to-left drag moves the other way: in `rtl` the start pane is on the right, so
+ * a pointer travelling in +x makes it smaller. The block axis never inverts — `rtl` is a
+ * writing direction, not a gravity — so it is ignored when `vertical`.
+ *
+ * `primaryEnd` inverts it too, and for a different reason: the pane being sized is the
+ * one the pointer moves AWAY from. The two inversions compose — an `rtl` split whose
+ * primary is the end pane reads like a plain one again — so they are XORed, not summed.
+ *
+ * A container of zero (measured before layout, or while display:none) yields the
+ * starting value rather than `Infinity`: the caller gets a number it can write back.
+ */
+export declare function nextPosition(step: SplitStep): number;
+/**
+ * How far a key moves the seam, in percentage points — or `null` for a key that is not
+ * ours, so the handler can leave the page's own scrolling alone.
+ *
+ * Shift is ×10. That is an ecosystem convention (Shoelace's `×10`, Zag's delta of 10),
+ * NOT the APG, which specifies only the single step: it is here because a 1% step across
+ * a 1600px window is 16px and nobody arrows a pane across a screen one percent at a time.
+ *
+ * Home and End are the extremes as ±100: the clamp in `nextPosition` — and then the CSS
+ * clamp in the grid — decide where that actually lands, so a `--aparte-split-min` of
+ * `20rem` means Home stops at 20rem without this function knowing what a rem is.
+ *
+ * `primaryEnd` mirrors the ARROWS only, for the same reason `nextPosition` mirrors the
+ * pointer: an arrow names a direction the SEAM travels in. Home and End name the primary
+ * pane's own extremes — its minimum is its minimum whichever end it sits at — so they are
+ * left alone.
+ */
+export declare function keyDelta(key: string, shift: boolean, rtl: boolean, vertical: boolean, primaryEnd?: boolean): number | null;
+//# sourceMappingURL=geometry.d.ts.map

package/dist/components/split/geometry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"geometry.d.ts","sourceRoot":"","sources":["../../../src/components/split/geometry.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,4FAA4F;AAC5F,MAAM,WAAW,SAAS;IACtB,wFAAwF;IACxF,YAAY,EAAE,MAAM,CAAC;IACrB,sFAAsF;IACtF,OAAO,EAAE,MAAM,CAAC;IAChB,iDAAiD;IACjD,WAAW,EAAE,MAAM,CAAC;IACpB,qFAAqF;IACrF,GAAG,EAAE,OAAO,CAAC;IACb,gGAAgG;IAChG,QAAQ,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAQD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,SAAS,GAAG,MAAM,CAOpD;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,QAAQ,CACpB,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,OAAO,EACd,GAAG,EAAE,OAAO,EACZ,QAAQ,EAAE,OAAO,EACjB,UAAU,UAAQ,GACnB,MAAM,GAAG,IAAI,CAYf"}

package/dist/components/split/index.d.ts

@@ -0,0 +1,3 @@
+export { AparteSplit } from './aparte-split.js';
+export type { AparteSplitResizeDetail } from './aparte-split.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/split/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/split/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,YAAY,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAC"}