@sekiui/elements 0.1.3 → 0.1.5

package/dist/collection/utils/label-association.js

@@ -0,0 +1,199 @@
+/**
+ * Label association for `seki-label` and `seki-field-label`.
+ *
+ * ## Why this exists
+ *
+ * Both labels render their text inside a shadow root. A native `<label for>`
+ * resolves its `for` id inside the tree the `<label>` lives in, so a `<label>`
+ * in our shadow root can never reach a control in the page's light DOM: clicks
+ * did nothing and the control had no accessible name (#329).
+ *
+ * The host element (`<seki-label>`) *does* live in the consumer's tree, so the
+ * wiring is done from the host in script, resolving the id against
+ * `host.getRootNode()` (the label's own root, which is where an author expects
+ * `for` to point, also when the label sits inside another component's shadow
+ * root together with its control).
+ *
+ * ## Behaviour
+ *
+ * - **Activation**: a click on the label forwards to the target the way a native
+ *   label would. Toggles (checkbox, switch, radio) are clicked, text-like
+ *   controls are focused. A click that originated on the control itself (the
+ *   wrapping form `<seki-label><seki-checkbox/> Text</seki-label>`) is ignored so
+ *   the control never toggles twice.
+ * - **Accessible name**: a shadow-DOM control hides its real focusable element
+ *   (`<button role="checkbox">`, `<input>`, ...) inside its own shadow root, and
+ *   an `aria-labelledby` id reference cannot cross a shadow boundary, so
+ *   pointing the host at the label would not name the inner element. SekiUI
+ *   controls all forward their `aria-label` attribute to that inner element, so
+ *   for them the label text is passed through as `aria-label`. For native
+ *   elements the reference does resolve, so we use `aria-labelledby` and the
+ *   name tracks the label's live content.
+ *   Anything the author set explicitly (`aria-label`, `aria-labelledby`) is
+ *   never overwritten; we only manage values we wrote ourselves, tracked with a
+ *   marker attribute so they can be updated and cleaned up.
+ *   `ElementInternals.ariaLabelledByElements` is deliberately not used: it is
+ *   unavailable in Firefox and older Safari, and cannot reach the inner element
+ *   of a shadow-DOM control either.
+ */
+/* global Document */
+const MANAGED_ATTR = 'data-seki-label-managed';
+/** SekiUI form controls that render their focusable element in a shadow root. */
+const SEKI_CONTROLS = [
+    'seki-input',
+    'seki-textarea',
+    'seki-checkbox',
+    'seki-switch',
+    'seki-select',
+    'seki-slider',
+    'seki-radio-group',
+    'seki-input-otp',
+    'seki-date-picker',
+    'seki-combobox',
+].join(',');
+const NATIVE_CONTROLS = 'input:not([type="hidden"]), select, textarea, button';
+let uid = 0;
+function focusInside(target) {
+    var _a, _b, _c;
+    const inner = (_a = target.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex="0"]');
+    (_c = (_b = (inner !== null && inner !== void 0 ? inner : target)).focus) === null || _c === void 0 ? void 0 : _c.call(_b);
+}
+export class LabelBinding {
+    constructor(host, getFor) {
+        this.host = host;
+        this.getFor = getFor;
+        this.target = null;
+    }
+    /** Resolve the control this label is for, in the label's own root. */
+    resolveTarget() {
+        var _a, _b, _c;
+        const id = this.getFor();
+        if (id) {
+            const root = this.host.getRootNode();
+            return (_b = (_a = root.getElementById) === null || _a === void 0 ? void 0 : _a.call(root, id)) !== null && _b !== void 0 ? _b : null;
+        }
+        const controls = `${SEKI_CONTROLS}, ${NATIVE_CONTROLS}`;
+        // Implicit association: <seki-label><seki-checkbox></seki-checkbox> Text</seki-label>
+        const nested = this.host.querySelector(controls);
+        if (nested)
+            return nested;
+        // Inside <seki-field>, a label without `for` names the field's control.
+        if (this.host.getAttribute('slot') === 'label') {
+            const field = this.host.closest('seki-field');
+            return (_c = field === null || field === void 0 ? void 0 : field.querySelector(`:scope > :not([slot]):is(${controls})`)) !== null && _c !== void 0 ? _c : null;
+        }
+        return null;
+    }
+    /** Label text, without the text of a control nested inside the label. */
+    labelText(skip) {
+        const parts = [];
+        const walk = (node) => {
+            var _a;
+            if (node === skip)
+                return;
+            if (node.nodeType === Node.TEXT_NODE)
+                parts.push((_a = node.textContent) !== null && _a !== void 0 ? _a : '');
+            else
+                node.childNodes.forEach(walk);
+        };
+        this.host.childNodes.forEach(walk);
+        return parts.join(' ').replace(/\s+/g, ' ').trim();
+    }
+    /** (Re)apply the accessible name. Call on load, `for` change and slot change. */
+    sync() {
+        const next = this.resolveTarget();
+        if (next !== this.target) {
+            this.release();
+            this.target = next;
+        }
+        const target = this.target;
+        if (!target)
+            return;
+        const managed = target.getAttribute(MANAGED_ATTR);
+        const authored = (name) => target.hasAttribute(name) && managed !== name;
+        if (target.tagName.includes('-')) {
+            if (authored('aria-label'))
+                return;
+            const text = this.labelText(this.host.contains(target) ? target : null);
+            if (text) {
+                target.setAttribute('aria-label', text);
+                target.setAttribute(MANAGED_ATTR, 'aria-label');
+            }
+            return;
+        }
+        if (authored('aria-labelledby') || authored('aria-label'))
+            return;
+        if (!this.host.id)
+            this.host.id = `seki-label-${++uid}`;
+        target.setAttribute('aria-labelledby', this.host.id);
+        target.setAttribute(MANAGED_ATTR, 'aria-labelledby');
+    }
+    /** Remove anything this binding wrote on the current target. */
+    release() {
+        const target = this.target;
+        const managed = target === null || target === void 0 ? void 0 : target.getAttribute(MANAGED_ATTR);
+        if (target && managed) {
+            target.removeAttribute(managed);
+            target.removeAttribute(MANAGED_ATTR);
+        }
+        this.target = null;
+    }
+    /** Re-sync when the control is added after the label (async rendering). */
+    observe() {
+        if (this.observer || typeof MutationObserver === 'undefined')
+            return;
+        this.observer = new MutationObserver(() => {
+            if (this.resolveTarget() !== this.target)
+                this.sync();
+        });
+        this.observer.observe(this.host.getRootNode(), { childList: true, subtree: true });
+    }
+    disconnect() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.observer = undefined;
+        this.release();
+    }
+    /** Forward a click on the label to its control, as a native label would. */
+    handleClick(event) {
+        var _a, _b;
+        if (event.defaultPrevented)
+            return;
+        const target = this.resolveTarget();
+        if (!target)
+            return;
+        const path = event.composedPath();
+        // The click came from the control itself: it already handled it.
+        if (path.includes(target))
+            return;
+        // Don't hijack clicks on other interactive content placed inside the label.
+        for (const node of path) {
+            if (node === this.host)
+                break;
+            if (node instanceof HTMLElement && node.matches('a[href], button, input, select, textarea'))
+                return;
+        }
+        if (target.hasAttribute('disabled') || target.getAttribute('aria-disabled') === 'true')
+            return;
+        const toggle = (_a = target.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('[role="checkbox"], [role="switch"]');
+        if (toggle) {
+            toggle.focus();
+            toggle.click();
+            return;
+        }
+        if (target instanceof HTMLInputElement &&
+            ['checkbox', 'radio', 'button', 'submit', 'reset'].includes(target.type)) {
+            target.focus();
+            target.click();
+            return;
+        }
+        if (target instanceof HTMLButtonElement) {
+            target.click();
+            return;
+        }
+        if (target.shadowRoot)
+            focusInside(target);
+        else
+            (_b = target.focus) === null || _b === void 0 ? void 0 : _b.call(target);
+    }
+}

package/dist/collection/utils/overlay.js

@@ -0,0 +1,304 @@
+/**
+ * Overlay layer stack, modal focus handling and body scroll lock, shared by
+ * every component that floats above the page and closes on Escape.
+ *
+ * ## Why this exists (#332)
+ *
+ * Each overlay used to listen for Escape on `window` by itself. All of those
+ * listeners run for the same key press, so a popover inside a dialog closed
+ * together with the dialog, and `stopPropagation()` in one handler did not stop
+ * the others. Sheet and drawer also rendered `aria-modal="true"` without any
+ * of the modal behaviour dialog had (focus moved in, Tab trapped, focus
+ * restored, page scroll locked).
+ *
+ * ## Model (matches Radix DismissableLayer / FocusScope)
+ *
+ * - Every open overlay is an {@link OverlayLayer} on one document-wide stack,
+ *   in the order the layers opened.
+ * - One pair of `window` keydown listeners handles Escape: the layer that was
+ *   on top when the key went down gets the key, nothing below it does. If an
+ *   element-level handler inside that layer already closed it (a combobox input
+ *   closing its list, a submenu calling `stopPropagation()`), the key is spent
+ *   and no other layer closes.
+ * - The topmost *modal* layer traps Tab inside its container. Modal layers
+ *   also move focus in when they open, return it to the element that had it
+ *   when they close, and lock body scroll. The lock is reference-counted, so a
+ *   dialog closing inside an open sheet leaves the page locked.
+ */
+import { focusFirst, getFocusableElements, trapFocus } from "./dialog/focus-trap";
+import { getDeepActiveElement } from "./menu-navigation";
+// ---------------------------------------------------------------------------
+// Body scroll lock (reference-counted so stacked modals don't unlock early).
+// ---------------------------------------------------------------------------
+let scrollLockCount = 0;
+let savedOverflow = '';
+let savedPaddingRight = '';
+/**
+ * Lock body scroll. Safe to nest: the lock is applied on the first call and
+ * the original inline styles come back on the matching last unlock.
+ */
+export function lockBodyScroll() {
+    if (scrollLockCount === 0) {
+        savedOverflow = document.body.style.overflow;
+        savedPaddingRight = document.body.style.paddingRight;
+        const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+        document.body.style.overflow = 'hidden';
+        if (scrollbarWidth > 0) {
+            document.body.style.paddingRight = `${scrollbarWidth}px`;
+        }
+    }
+    scrollLockCount++;
+}
+/** Release one lock taken with lockBodyScroll(). */
+export function unlockBodyScroll() {
+    if (scrollLockCount === 0)
+        return;
+    scrollLockCount--;
+    if (scrollLockCount === 0) {
+        document.body.style.overflow = savedOverflow;
+        document.body.style.paddingRight = savedPaddingRight;
+    }
+}
+// ---------------------------------------------------------------------------
+// Layer stack
+// ---------------------------------------------------------------------------
+/**
+ * Whether `node` is inside `ancestor` in the flat tree: follows slot
+ * assignment (content projected into a panel's `<slot>`) and shadow hosts.
+ */
+function flatTreeContains(ancestor, node) {
+    var _a, _b, _c;
+    let current = node;
+    while (current) {
+        if (current === ancestor)
+            return true;
+        current =
+            (_c = (_b = (_a = current.assignedSlot) !== null && _a !== void 0 ? _a : current.parentNode) !== null && _b !== void 0 ? _b : current.host) !== null && _c !== void 0 ? _c : null;
+    }
+    return false;
+}
+const stack = [];
+/** The layer that was on top when an Escape keydown started dispatching. */
+const escapeTarget = new WeakMap();
+function topLayer() {
+    return stack.length > 0 ? stack[stack.length - 1] : null;
+}
+function onKeydownCapture(event) {
+    if (event.key === 'Escape') {
+        escapeTarget.set(event, topLayer());
+    }
+}
+function onKeydownBubble(event) {
+    if (event.key === 'Escape') {
+        // Prefer the layer recorded before any element-level handler ran. If that
+        // layer has closed since, an inner handler consumed the key.
+        const layer = escapeTarget.has(event) ? escapeTarget.get(event) : topLayer();
+        if (layer && layer.isActive) {
+            layer.handleEscape(event);
+        }
+        return;
+    }
+    if (event.key === 'Tab') {
+        for (let i = stack.length - 1; i >= 0; i--) {
+            if (stack[i].isModal) {
+                stack[i].handleTab(event);
+                return;
+            }
+        }
+    }
+}
+/** Listen only while at least one layer is open. */
+function syncListeners() {
+    if (typeof window === 'undefined')
+        return;
+    if (stack.length > 0) {
+        // Adding the same listener twice is a no-op.
+        window.addEventListener('keydown', onKeydownCapture, true);
+        window.addEventListener('keydown', onKeydownBubble);
+    }
+    else {
+        window.removeEventListener('keydown', onKeydownCapture, true);
+        window.removeEventListener('keydown', onKeydownBubble);
+    }
+}
+/**
+ * One overlay's place on the layer stack.
+ *
+ *   private layer = new OverlayLayer({ onEscape: () => this.close() });
+ *   componentDidRender() { this.layer.setActive(this._isOpen); }
+ *   disconnectedCallback() { this.layer.setActive(false); }
+ *
+ * Modal content parts call `setActive()` from the code path that sees the
+ * open state change (so focus is captured before anything moves it) and
+ * `didRender()` from componentDidRender, which moves focus in once the
+ * container exists.
+ */
+export class OverlayLayer {
+    constructor(options = {}) {
+        this.options = options;
+        this.active = false;
+        this.modalActive = false;
+        this.returnFocusTo = null;
+        this.focusPending = false;
+    }
+    get isActive() {
+        return this.active;
+    }
+    /** Whether this layer is open and modal (traps focus, locks scroll). */
+    get isModal() {
+        return this.active && this.modalActive;
+    }
+    /** Activate or deactivate; idempotent, so it can be called on every render. */
+    setActive(active) {
+        if (active)
+            this.activate();
+        else
+            this.deactivate();
+    }
+    activate() {
+        if (this.active)
+            return;
+        this.active = true;
+        stack.push(this);
+        if (stack.length === 1)
+            syncListeners();
+        const modal = this.options.modal;
+        this.modalActive = typeof modal === 'function' ? modal() : !!modal;
+        if (this.modalActive) {
+            lockBodyScroll();
+            this.returnFocusTo = getDeepActiveElement();
+            this.focusPending = true;
+            // The container may already be rendered (e.g. re-activation after a DOM
+            // move); otherwise didRender() picks this up.
+            this.didRender();
+        }
+    }
+    deactivate() {
+        if (!this.active)
+            return;
+        this.active = false;
+        const index = stack.indexOf(this);
+        if (index !== -1)
+            stack.splice(index, 1);
+        if (stack.length === 0)
+            syncListeners();
+        if (this.modalActive) {
+            this.modalActive = false;
+            this.focusPending = false;
+            unlockBodyScroll();
+            this.restoreFocus();
+        }
+    }
+    /** Move focus into a modal layer once its container has rendered. */
+    didRender() {
+        var _a, _b;
+        if (!this.focusPending || !((_b = (_a = this.options).container) === null || _b === void 0 ? void 0 : _b.call(_a)))
+            return;
+        this.focusPending = false;
+        const run = () => {
+            var _a, _b, _c;
+            const container = (_b = (_a = this.options).container) === null || _b === void 0 ? void 0 : _b.call(_a);
+            if (!this.active || !container)
+                return;
+            // Something inside (e.g. an autofocus control) already has focus.
+            if (flatTreeContains(container, getDeepActiveElement()))
+                return;
+            if (getFocusableElements(container).length > 0) {
+                focusFirst(container);
+            }
+            else {
+                (_c = container.focus) === null || _c === void 0 ? void 0 : _c.call(container);
+            }
+        };
+        if (typeof requestAnimationFrame === 'function')
+            requestAnimationFrame(run);
+        else
+            run();
+    }
+    handleEscape(event) {
+        var _a, _b;
+        (_b = (_a = this.options).onEscape) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+    }
+    handleTab(event) {
+        var _a, _b;
+        const container = (_b = (_a = this.options).container) === null || _b === void 0 ? void 0 : _b.call(_a);
+        if (container)
+            trapFocus(container, event);
+    }
+    restoreFocus() {
+        var _a, _b;
+        const target = this.returnFocusTo;
+        this.returnFocusTo = null;
+        if (!target || !target.isConnected)
+            return;
+        // Leave focus alone if it already moved somewhere outside this layer on
+        // purpose; return it when it is inside the closing layer or was dropped.
+        const active = getDeepActiveElement();
+        const container = (_b = (_a = this.options).container) === null || _b === void 0 ? void 0 : _b.call(_a);
+        const dropped = !active || active === document.body;
+        if (dropped || (container && flatTreeContains(container, active))) {
+            target.focus();
+        }
+    }
+}
+// ---------------------------------------------------------------------------
+// Accessible name / description for dialog-like content parts (#357)
+// ---------------------------------------------------------------------------
+const CONTENT_PARTS = 'seki-dialog-content, seki-alert-dialog-content, seki-sheet-content, seki-drawer-content';
+const TITLE_PARTS = 'seki-dialog-title, seki-sheet-title';
+const DESCRIPTION_PARTS = 'seki-dialog-description, seki-sheet-description';
+function textOf(el) {
+    var _a;
+    return ((_a = el === null || el === void 0 ? void 0 : el.textContent) !== null && _a !== void 0 ? _a : '').replace(/\s+/g, ' ').trim();
+}
+/**
+ * Title and description text for a dialog-like content part.
+ *
+ * The `role="dialog"` element lives in the content part's shadow root, while
+ * the title and description are separate custom elements in the light DOM. An
+ * `aria-labelledby` id reference cannot cross that shadow boundary, so the
+ * dialog had no accessible name or description. ARIA element reflection
+ * (`ariaLabelledByElements`) can reach outward, but test tooling and older
+ * engines don't follow it, so the content part mirrors the text into hidden
+ * elements in its own shadow root and references those instead (the approach
+ * `label-association.ts` takes for labels). A MutationObserver keeps the copy
+ * in sync while the content is open.
+ *
+ * Only the title/description that belong to this content part count, not
+ * those of an overlay nested inside it.
+ */
+export class DialogLabelSource {
+    constructor(onChange) {
+        this.onChange = onChange;
+        this.host = null;
+    }
+    find(selector) {
+        const host = this.host;
+        if (!host)
+            return null;
+        for (const el of Array.from(host.querySelectorAll(selector))) {
+            if (el.closest(CONTENT_PARTS) === host)
+                return el;
+        }
+        return null;
+    }
+    sync() {
+        this.onChange(textOf(this.find(TITLE_PARTS)), textOf(this.find(DESCRIPTION_PARTS)));
+    }
+    /** Start tracking the content part `host` (call when it opens). */
+    observe(host) {
+        if (this.host !== host)
+            this.disconnect();
+        this.host = host;
+        this.sync();
+        if (this.observer || typeof MutationObserver === 'undefined')
+            return;
+        this.observer = new MutationObserver(() => this.sync());
+        this.observer.observe(host, { childList: true, subtree: true, characterData: true });
+    }
+    disconnect() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.observer = undefined;
+    }
+}

package/dist/collection/utils/select/select-context.js

@@ -18,6 +18,8 @@ export const defaultSelectContext = {
     ariaLabel: undefined,
     ariaLabelledby: undefined,
     ariaDescribedby: undefined,
+    ariaDescription: undefined,
+    ariaInvalid: undefined,
     onValueChange: () => { },
     onOpenChange: () => { },
     onOptionFocus: () => { },

package/dist/components/index.js

@@ -1,8 +1,9 @@
 import { g as globalScripts } from './p-jMliCqbB.js';
 export { a as getAssetPath, r as render, s as setAssetPath, b as setNonce, c as setPlatformOptions } from './p-jMliCqbB.js';
-export { S as SekiSwitch } from './p-Dh9pvFzL.js';
-export { S as SekiLabel } from './p-B7jKUvZz.js';
-export { a as SekiSonner, S as SekiSonnerElement } from './p-D4LyQFQp.js';
+export { S as SekiSwitch } from './p-CM1qYW9i.js';
+export { S as SekiLabel } from './p-C3WFySZp.js';
+export { a as SekiSonner, S as SekiSonnerElement } from './p-DQcofZe0.js';
+export { t as toast } from './p-BNAT-Ecg.js';
 
 /**
  * Keyboard Service

package/dist/components/p-B4SOpX_A.js

@@ -0,0 +1,155 @@
+/**
+ * Context Bridge Utility
+ *
+ * Generalizes the "parent publishes state onto its host element + child
+ * subscribes via closest()" pattern used by compound components (select,
+ * toggle-group, combobox, dialog, popover, ...).
+ *
+ * Parent (provider) contract:
+ *   - call publishContext() from componentWillLoad(), so the context exists
+ *     before any child renders for the first time, and
+ *   - call it again on every state change, including changes that arrive as a
+ *     @Prop assignment (@Watch) rather than through a @Method or user input.
+ *
+ * Child (consumer) contract — use a ContextConsumer:
+ *   - call connect(this.el) from connectedCallback() (runs before the first
+ *     render, and again after the element is moved to a new parent), and
+ *   - call disconnect() from disconnectedCallback().
+ *   connect() invokes the callback once immediately, so a child that
+ *   upgrades after its parent already published still starts from the current
+ *   state; a child that upgrades before its parent (one-module-per-tag
+ *   loading, #314) hears the parent's first publish from componentWillLoad().
+ *
+ * subscribeToContextChange() is the older listener-only form (no immediate
+ * read, light-DOM closest() only); prefer ContextConsumer for new code.
+ *
+ * Extracted after the same bug (child freezes at mount-time state because
+ * nothing told it the parent changed) was independently fixed three times
+ * for select (#244/#253), toggle-group (#255/#257), and combobox (#258/#259).
+ */
+/**
+ * One event name shared by every compound-component family. Stencil's
+ * @Event() emits with { bubbles: true, composed: true } by default, so a
+ * nested compound (e.g. a toggle-group rendered inside a select) can cause an
+ * inner parent's event to bubble past an outer parent's own children. This is
+ * harmless today only because subscribeToContextChange()'s callback takes no
+ * payload and every handler re-reads its own closest() parent's live context
+ * rather than trusting event.detail — do not add a payload to this event or
+ * that bubbling becomes a real cross-family bug.
+ */
+const SEKI_CONTEXT_CHANGE_EVENT = 'sekiContextChange';
+/**
+ * Parent-side: publish a fresh context object onto the host element and
+ * notify subscribed children. Must assign a plain property, not a class
+ * accessor of the same name — in the dist-custom-elements build the class
+ * IS the host element, so an accessor collision throws (#254).
+ */
+function publishContext(el, propertyName, context, emitter) {
+    el[propertyName] = context;
+    emitter.emit();
+}
+/**
+ * Child-side: find the nearest ancestor matching parentSelector and listen
+ * for context-change notifications. onChange is called with no payload by
+ * design — children re-read the live context property via closest() rather
+ * than trusting a stale event.detail snapshot. No-ops safely (null parent,
+ * no-op unsubscribe) if no matching parent is found.
+ */
+function subscribeToContextChange(el, parentSelector, onChange) {
+    const parent = el.closest(parentSelector);
+    if (parent) {
+        parent.addEventListener(SEKI_CONTEXT_CHANGE_EVENT, onChange);
+    }
+    return {
+        parent,
+        unsubscribe: () => parent === null || parent === void 0 ? void 0 : parent.removeEventListener(SEKI_CONTEXT_CHANGE_EVENT, onChange),
+    };
+}
+/**
+ * Nearest ancestor matching `selector`, continuing past shadow roots: when the
+ * element's own tree has no match, the search resumes from the shadow host.
+ * This lets a part rendered inside another component's shadow tree still find
+ * the provider that wraps that component.
+ */
+function findContextProvider(el, selector) {
+    var _a;
+    let node = el;
+    while (node) {
+        const match = node.closest(selector);
+        if (match)
+            return match;
+        const root = node.getRootNode();
+        // A shadow root is a document fragment with a host (no global ShadowRoot
+        // reference, so this also runs under mock-doc / hydrate).
+        node = root.nodeType === 11 ? ((_a = root.host) !== null && _a !== void 0 ? _a : null) : null;
+    }
+    return null;
+}
+/**
+ * Child-side: tracks one provider (see findContextProvider) for a part.
+ *
+ *   private dialog = new ContextConsumer<DialogContext>('seki-dialog', '_dialogContext', () => this.sync());
+ *   connectedCallback() { this.dialog.connect(this.el); }
+ *   disconnectedCallback() { this.dialog.disconnect(); }
+ *
+ * connect() finds the provider, starts listening for its context-change
+ * notifications and calls `onChange` once right away, so the part starts from
+ * whatever is already published. `parent` and `context` are already set when
+ * that first call happens. Calling connect() from connectedCallback runs it
+ * before the first render and again after the part is moved to another
+ * provider.
+ *
+ * `onChange` gets no event payload by design (see SEKI_CONTEXT_CHANGE_EVENT):
+ * it reads the live `context`. Notifications bubbling up from a nested
+ * provider are ignored; only events dispatched by this part's own provider
+ * host (or retargeted to it from that host's shadow tree) count.
+ *
+ * Works whether or not the provider element has been upgraded yet: the
+ * listener sits on the element itself, so the provider's first
+ * publishContext() from componentWillLoad() reaches it.
+ */
+class ContextConsumer {
+    constructor(parentSelector, propertyName, onChange) {
+        this.parentSelector = parentSelector;
+        this.propertyName = propertyName;
+        this.onChange = onChange;
+        this.provider = null;
+        this.handleEvent = (event) => {
+            if (event.target === this.provider) {
+                this.onChange(this.context);
+            }
+        };
+    }
+    /** The provider element found by the last connect(), or null. */
+    get parent() {
+        return this.provider;
+    }
+    /** The provider's current context, or null when there is none yet. */
+    get context() {
+        return readContext(this.provider, this.propertyName);
+    }
+    connect(host) {
+        var _a;
+        this.disconnect();
+        this.provider = findContextProvider(host, this.parentSelector);
+        (_a = this.provider) === null || _a === void 0 ? void 0 : _a.addEventListener(SEKI_CONTEXT_CHANGE_EVENT, this.handleEvent);
+        this.onChange(this.context);
+    }
+    disconnect() {
+        var _a;
+        (_a = this.provider) === null || _a === void 0 ? void 0 : _a.removeEventListener(SEKI_CONTEXT_CHANGE_EVENT, this.handleEvent);
+        this.provider = null;
+    }
+}
+/**
+ * Read a context object a provider published with publishContext(). Returns
+ * null when there is no provider or it has not published yet.
+ */
+function readContext(parent, propertyName) {
+    var _a;
+    if (!parent)
+        return null;
+    return ((_a = parent[propertyName]) !== null && _a !== void 0 ? _a : null);
+}
+
+export { ContextConsumer as C, publishContext as p, subscribeToContextChange as s };