@skdx/web-components 0.28.0 → 0.29.0

package/dist/popover/PopoverProvider.cjs

@@ -0,0 +1,5 @@
+"use strict";var o=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var T=Object.prototype.hasOwnProperty;var b=(a,e)=>{for(var l in e)o(a,l,{get:e[l],enumerable:!0})},D=(a,e,l,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of d(e))!T.call(a,t)&&t!==l&&o(a,t,{get:()=>e[t],enumerable:!(s=y(e,t))||s.enumerable});return a};var h=a=>D(o({},"__esModule",{value:!0}),a),r=(a,e,l,s)=>{for(var t=s>1?void 0:s?y(e,l):e,m=a.length-1,u;m>=0;m--)(u=a[m])&&(t=(s?u(e,l,t):u(t))||t);return s&&t&&o(e,l,t),t};var f={};b(f,{SkdxPopoverProvider:()=>i});module.exports=h(f);var n=require("lit"),p=require("lit/decorators.js"),c=require("../internal/define.cjs");var i=class extends n.LitElement{constructor(){super(...arguments);this.delayDuration=700;this.skipDelayDuration=300;this.closeDelay=0;this.disableHoverableContent=!1;this.isOpenDelayed=!0}disconnectedCallback(){clearTimeout(this.skipDelayTimer),super.disconnectedCallback()}onPanelOpen(){clearTimeout(this.skipDelayTimer),this.isOpenDelayed=!1}onPanelClose(){clearTimeout(this.skipDelayTimer),this.skipDelayTimer=setTimeout(()=>{this.isOpenDelayed=!0},this.skipDelayDuration)}render(){return n.html`<slot></slot>`}};i.styles=n.css`
+    :host {
+      display: contents;
+    }
+  `,r([(0,p.property)({type:Number,attribute:"delay-duration"})],i.prototype,"delayDuration",2),r([(0,p.property)({type:Number,attribute:"skip-delay-duration"})],i.prototype,"skipDelayDuration",2),r([(0,p.property)({type:Number,attribute:"close-delay"})],i.prototype,"closeDelay",2),r([(0,p.property)({type:Boolean,attribute:"disable-hoverable-content"})],i.prototype,"disableHoverableContent",2),i=r([(0,c.customElement)("skdx-popover-provider")],i);0&&(module.exports={SkdxPopoverProvider});

package/dist/popover/PopoverProvider.d.cts

@@ -0,0 +1,68 @@
+import { LitElement, type TemplateResult } from 'lit';
+/**
+ * Optional ancestor coordinating hover-delay timing across every descendant
+ * `<skdx-popover>` with `role="tooltip"`. After one closes, siblings open
+ * instantly for `skip-delay-duration` milliseconds, matching how the platform
+ * behaves when the pointer sweeps a row of controls. Renders no element of its
+ * own, and a descendant's own delay props win over it.
+ *
+ * @example
+ * ```html
+ * <skdx-popover-provider delay-duration="500">
+ *   <skdx-popover role="tooltip" open-on="hover">
+ *     <button slot="trigger">A</button>
+ *     Tooltip A
+ *   </skdx-popover>
+ *   <skdx-popover role="tooltip" open-on="hover">
+ *     <button slot="trigger">B</button>
+ *     Tooltip B
+ *   </skdx-popover>
+ * </skdx-popover-provider>
+ * ```
+ */
+export declare class SkdxPopoverProvider extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Delay in milliseconds before a descendant bubble opens on hover. Each
+     * descendant can override it with its own `open-delay`.
+     * @default 700
+     */
+    delayDuration: number;
+    /**
+     * Window in milliseconds after a descendant closes during which sibling
+     * bubbles open instantly, so sweeping the pointer along a row of triggers
+     * does not re-pay the open delay each time.
+     * @default 300
+     */
+    skipDelayDuration: number;
+    /**
+     * Delay in milliseconds before a descendant bubble closes once the pointer
+     * has left its trigger. A hoverable bubble applies the 150ms floor, so this
+     * can only lengthen the window.
+     * @default 0
+     */
+    closeDelay: number;
+    /**
+     * Whether descendant bubbles ignore the pointer entirely, so moving off the
+     * trigger closes them. Each descendant can override it.
+     * @default false
+     */
+    disableHoverableContent: boolean;
+    /**
+     * @internal Whether the next descendant still owes its open delay; decides
+     * between the `delayed-open` and `instant-open` `data-state`.
+     */
+    isOpenDelayed: boolean;
+    private skipDelayTimer?;
+    disconnectedCallback(): void;
+    /** @internal Called by a descendant popover as it opens. */
+    onPanelOpen(): void;
+    /** @internal Called by a descendant popover as it closes; reopens the skip-delay window. */
+    onPanelClose(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-popover-provider': SkdxPopoverProvider;
+    }
+}

package/dist/popover/PopoverProvider.d.ts

@@ -0,0 +1,68 @@
+import { LitElement, type TemplateResult } from 'lit';
+/**
+ * Optional ancestor coordinating hover-delay timing across every descendant
+ * `<skdx-popover>` with `role="tooltip"`. After one closes, siblings open
+ * instantly for `skip-delay-duration` milliseconds, matching how the platform
+ * behaves when the pointer sweeps a row of controls. Renders no element of its
+ * own, and a descendant's own delay props win over it.
+ *
+ * @example
+ * ```html
+ * <skdx-popover-provider delay-duration="500">
+ *   <skdx-popover role="tooltip" open-on="hover">
+ *     <button slot="trigger">A</button>
+ *     Tooltip A
+ *   </skdx-popover>
+ *   <skdx-popover role="tooltip" open-on="hover">
+ *     <button slot="trigger">B</button>
+ *     Tooltip B
+ *   </skdx-popover>
+ * </skdx-popover-provider>
+ * ```
+ */
+export declare class SkdxPopoverProvider extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Delay in milliseconds before a descendant bubble opens on hover. Each
+     * descendant can override it with its own `open-delay`.
+     * @default 700
+     */
+    delayDuration: number;
+    /**
+     * Window in milliseconds after a descendant closes during which sibling
+     * bubbles open instantly, so sweeping the pointer along a row of triggers
+     * does not re-pay the open delay each time.
+     * @default 300
+     */
+    skipDelayDuration: number;
+    /**
+     * Delay in milliseconds before a descendant bubble closes once the pointer
+     * has left its trigger. A hoverable bubble applies the 150ms floor, so this
+     * can only lengthen the window.
+     * @default 0
+     */
+    closeDelay: number;
+    /**
+     * Whether descendant bubbles ignore the pointer entirely, so moving off the
+     * trigger closes them. Each descendant can override it.
+     * @default false
+     */
+    disableHoverableContent: boolean;
+    /**
+     * @internal Whether the next descendant still owes its open delay; decides
+     * between the `delayed-open` and `instant-open` `data-state`.
+     */
+    isOpenDelayed: boolean;
+    private skipDelayTimer?;
+    disconnectedCallback(): void;
+    /** @internal Called by a descendant popover as it opens. */
+    onPanelOpen(): void;
+    /** @internal Called by a descendant popover as it closes; reopens the skip-delay window. */
+    onPanelClose(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-popover-provider': SkdxPopoverProvider;
+    }
+}

package/dist/popover/PopoverProvider.js

@@ -0,0 +1,5 @@
+var m=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var a=(r,i,n,l)=>{for(var t=l>1?void 0:l?u(i,n):i,p=r.length-1,o;p>=0;p--)(o=r[p])&&(t=(l?o(i,n,t):o(t))||t);return l&&t&&m(i,n,t),t};import{css as y,html as c,LitElement as d}from"lit";import{property as s}from"lit/decorators.js";import{customElement as T}from"../internal/define.js";var e=class extends d{constructor(){super(...arguments);this.delayDuration=700;this.skipDelayDuration=300;this.closeDelay=0;this.disableHoverableContent=!1;this.isOpenDelayed=!0}disconnectedCallback(){clearTimeout(this.skipDelayTimer),super.disconnectedCallback()}onPanelOpen(){clearTimeout(this.skipDelayTimer),this.isOpenDelayed=!1}onPanelClose(){clearTimeout(this.skipDelayTimer),this.skipDelayTimer=setTimeout(()=>{this.isOpenDelayed=!0},this.skipDelayDuration)}render(){return c`<slot></slot>`}};e.styles=y`
+    :host {
+      display: contents;
+    }
+  `,a([s({type:Number,attribute:"delay-duration"})],e.prototype,"delayDuration",2),a([s({type:Number,attribute:"skip-delay-duration"})],e.prototype,"skipDelayDuration",2),a([s({type:Number,attribute:"close-delay"})],e.prototype,"closeDelay",2),a([s({type:Boolean,attribute:"disable-hoverable-content"})],e.prototype,"disableHoverableContent",2),e=a([T("skdx-popover-provider")],e);export{e as SkdxPopoverProvider};

package/dist/popover/PopoverRoot.cjs

@@ -1,5 +1,5 @@
-"use strict";var p=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var C=Object.prototype.hasOwnProperty;var g=(e,o)=>{for(var t in o)p(e,t,{get:o[t],enumerable:!0})},y=(e,o,t,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of b(o))!C.call(e,n)&&n!==t&&p(e,n,{get:()=>o[n],enumerable:!(r=u(o,n))||r.enumerable});return e};var E=e=>y(p({},"__esModule",{value:!0}),e),l=(e,o,t,r)=>{for(var n=r>1?void 0:r?u(o,t):o,d=e.length-1,c;d>=0;d--)(c=e[d])&&(n=(r?c(o,t,n):c(n))||n);return r&&n&&p(o,t,n),n};var M={};g(M,{SkdxPopoverRoot:()=>i});module.exports=E(M);var s=require("lit"),a=require("lit/decorators.js"),h=require("../internal/define.cjs"),f=require("../internal/ids.cjs"),m=require("../internal/open-change-complete.cjs"),v=require("../internal/styles.cjs"),k=require("./PopoverPortal.cjs");var O={fromAttribute(e){return e===null?!1:e==="trap-focus"?"trap-focus":e===""||e==="true"},toAttribute(e){return e==="trap-focus"?"trap-focus":e?"":null}},i=class extends s.LitElement{constructor(){super(...arguments);this.open=!1;this.defaultOpen=!1;this.modal=!1;this.contentId=(0,f.nextId)("skdx-popover-content");this.triggerEl=null;this.anchorEl=null;this.repositionFn=null;this.hasUpdatedOnce=!1}connectedCallback(){super.connectedCallback(),this.defaultOpen&&!this.hasAttribute("open")&&(this.open=!0);let t=this.querySelector("skdx-popover-content")?.id;t&&(this.contentId=t)}disconnectedCallback(){this.teardownOpenChangeComplete?.(),super.disconnectedCallback()}updated(t){let r=!this.hasUpdatedOnce;this.hasUpdatedOnce=!0,t.has("open")&&!r&&this.dispatchEvent(new CustomEvent("open-change",{detail:this.open,bubbles:!0,composed:!0})),t.size>0&&this.dispatchEvent(new CustomEvent("skdx-popover-internal-update")),t.has("open")&&!r&&(this.teardownOpenChangeComplete?.(),this.teardownOpenChangeComplete=(0,m.notifyOpenChangeComplete)(()=>this.querySelector("skdx-popover-content"),this.open,n=>this.dispatchEvent(new CustomEvent("open-change-complete",{detail:n,bubbles:!0,composed:!0}))))}setOpen(t){this.open!==t&&(this.open=t)}focusTrigger(){this.triggerEl?.focus()}reposition(){this.repositionFn?.()}render(){return s.html`<slot></slot>`}};i.styles=[v.hiddenHostStyles,s.css`
+"use strict";var p=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var T=Object.prototype.hasOwnProperty;var C=(t,i)=>{for(var e in i)p(t,e,{get:i[e],enumerable:!0})},g=(t,i,e,o)=>{if(i&&typeof i=="object"||typeof i=="function")for(let r of O(i))!T.call(t,r)&&r!==e&&p(t,r,{get:()=>i[r],enumerable:!(o=u(i,r))||o.enumerable});return t};var D=t=>g(p({},"__esModule",{value:!0}),t),l=(t,i,e,o)=>{for(var r=o>1?void 0:o?u(i,e):i,d=t.length-1,h;d>=0;d--)(h=t[d])&&(r=(o?h(i,e,r):h(r))||r);return o&&r&&p(i,e,r),r};var A={};C(A,{SkdxPopoverRoot:()=>s});module.exports=D(A);var a=require("lit"),n=require("lit/decorators.js"),m=require("../internal/define.cjs"),v=require("../internal/ids.cjs"),f=require("../internal/open-change-complete.cjs"),y=require("../internal/styles.cjs"),P=require("./PopoverPortal.cjs"),k=require("./PopoverProvider.cjs"),c=require("../internal/events.cjs"),b=require("./family.cjs");var E=150,_=700,M=300,w={fromAttribute:t=>t==="modal"||t==="trap-focus"?t:"none",toAttribute:t=>t==="none"?null:t},s=class extends a.LitElement{constructor(){super(...arguments);this.open=!1;this.defaultOpen=!1;this.openOn="click";this._role="dialog";this.disabled=!1;this._modal="none";this.contentId=(0,v.nextId)("skdx-popover-content");this.triggerEl=null;this.anchorEl=null;this.repositionFn=null;this.provider=null;this.wasOpenDelayed=!0;this.silentClose=!1;this.hasUpdatedOnce=!1}get role(){return this._role}set role(e){if(e===null)return;let o=this._role;this._role=e==="tooltip"?"tooltip":"dialog",this.removeAttribute("role"),this.requestUpdate("role",o)}get modal(){return this.role==="tooltip"?"none":this._modal}set modal(e){let o=this._modal;this._modal=e,this.requestUpdate("modal",o)}get hoverableContentDisabled(){return this.disableHoverableContent??this.provider?.disableHoverableContent??!1}get dataState(){return this.open?this.role!=="tooltip"?"open":this.wasOpenDelayed?"delayed-open":"instant-open":"closed"}connectedCallback(){super.connectedCallback(),this.provider=this.closest("skdx-popover-provider"),this.defaultOpen&&!this.hasAttribute("open")&&(this.open=!0);let e=this.querySelector("skdx-popover-content")?.id;e&&(this.contentId=e)}disconnectedCallback(){this.clearTimers(),this.teardownOpenChangeComplete?.(),super.disconnectedCallback()}willUpdate(e){e.has("disabled")&&this.disabled&&this.open&&(this.silentClose=!0,this.clearTimers(),this.open=!1)}updated(e){let o=!this.hasUpdatedOnce;this.hasUpdatedOnce=!0,e.has("open")&&!o&&!this.silentClose&&(0,c.emit)(this,"open-change",this.open),this.silentClose=!1,e.size>0&&b.POPOVER_FAMILY.notify(this),e.has("open")&&!o&&(this.teardownOpenChangeComplete?.(),this.teardownOpenChangeComplete=(0,f.notifyOpenChangeComplete)(()=>this.querySelector("skdx-popover-content"),this.open,r=>(0,c.emit)(this,"open-change-complete",r)))}clearTimers(){clearTimeout(this.openTimer),clearTimeout(this.closeTimer)}setOpen(e){this.disabled&&e||this.open!==e&&(this.open=e,e?this.provider?.onPanelOpen():this.provider?.onPanelClose())}openNow(){this.disabled||(this.clearTimers(),this.wasOpenDelayed=!1,this.setOpen(!0))}openDelayed(){if(this.disabled)return;this.clearTimers();let e=this.openDelay??(this.role==="tooltip"?this.provider?.delayDuration:void 0)??_;if(this.role==="tooltip"&&this.provider&&!this.provider.isOpenDelayed){this.wasOpenDelayed=!1,this.setOpen(!0);return}this.openTimer=setTimeout(()=>{this.wasOpenDelayed=!0,this.setOpen(!0)},e)}close(){this.clearTimers(),this.setOpen(!1)}closeDelayed(){this.clearTimers();let e=this.closeDelay??(this.role==="tooltip"?this.provider?.closeDelay??0:M),o=this.hoverableContentDisabled?e:Math.max(e,E);if(o<=0){this.setOpen(!1);return}this.closeTimer=setTimeout(()=>this.setOpen(!1),o)}cancelClose(){this.clearTimers()}focusTrigger(){this.triggerEl?.focus()}reposition(){this.repositionFn?.()}render(){return a.html`<slot></slot>`}};s.styles=[y.hiddenHostStyles,a.css`
       :host {
         display: contents;
       }
-    `],l([(0,a.property)({type:Boolean,reflect:!0})],i.prototype,"open",2),l([(0,a.property)({type:Boolean,attribute:"default-open"})],i.prototype,"defaultOpen",2),l([(0,a.property)({converter:O,reflect:!0})],i.prototype,"modal",2),i=l([(0,h.customElement)("skdx-popover-root")],i);0&&(module.exports={SkdxPopoverRoot});
+    `],l([(0,n.property)({type:Boolean,reflect:!0})],s.prototype,"open",2),l([(0,n.property)({type:Boolean,attribute:"default-open"})],s.prototype,"defaultOpen",2),l([(0,n.property)({type:String,attribute:"open-on"})],s.prototype,"openOn",2),l([(0,n.property)({attribute:"role",type:String,noAccessor:!0})],s.prototype,"role",1),l([(0,n.property)({type:Number,attribute:"open-delay"})],s.prototype,"openDelay",2),l([(0,n.property)({type:Number,attribute:"close-delay"})],s.prototype,"closeDelay",2),l([(0,n.property)({type:Boolean,attribute:"disable-hoverable-content"})],s.prototype,"disableHoverableContent",2),l([(0,n.property)({type:Boolean,reflect:!0})],s.prototype,"disabled",2),l([(0,n.property)({converter:w,reflect:!0,noAccessor:!0})],s.prototype,"modal",1),s=l([(0,m.customElement)("skdx-popover-root")],s);0&&(module.exports={SkdxPopoverRoot});

package/dist/popover/PopoverRoot.d.cts

@@ -1,20 +1,16 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 import './PopoverPortal.cjs';
+import './PopoverProvider.cjs';
+/** The three points on Popover's modality axis: `'none'`, `'trap-focus'`, or `'modal'`. */
+export type PopoverModality = 'none' | 'modal' | 'trap-focus';
+/** What the panel is: an operable `'dialog'`, or an inert `'tooltip'` bubble. */
+export type SkdxPopoverRole = 'dialog' | 'tooltip';
+/** Which gesture reveals the panel: a trigger click, or the pointer resting on it. */
+export type SkdxPopoverOpenOn = 'click' | 'hover';
 /**
- * The three points on Popover's modality axis — see `popoverContract`'s
- * `modal` prop. `'trap-focus'` is one of three things the word carries here,
- * distinct from what `modal` means on Dialog, AlertDialog and Drawer.
- */
-export type PopoverModality = boolean | 'trap-focus';
-/**
- * Popover's state primitive: owns `open`/`modal`, renders children verbatim
- * through `<slot>`. Descendants find it via `closest('skdx-popover, skdx-popover-root')`
- * and re-render on `skdx-popover-internal-update` events—the shared-state pattern
- * Web Components need since there's no built-in context.
- *
- * Non-modal by default; content floats against trigger via `positionFloating()`
- * with no portal. For manual composition, use this via
- * `@skdx/web-components/primitives/popover`; `<skdx-popover>` is the derived recipe.
+ * Popover's state primitive: owns `open`, the modality axis, and the hover
+ * timing that reveals a panel on pointer enter, rendering children verbatim
+ * through `<slot>`. Non-modal by default.
  *
  * @example
  * ```html
@@ -38,67 +34,117 @@ export declare class SkdxPopoverRoot extends LitElement {
      */
     open: boolean;
     /**
-     * Initial open state, for uncontrolled usage. Applied once, on connect,
-     * and only if `open` wasn't already set.
+     * Initial open state, for uncontrolled usage; applied once, on connect, only if `open` wasn't already set.
      * @default false
      */
     defaultOpen: boolean;
     /**
-     * How much of the page the open popover takes over. Three points, because
-     * modality is three independent things: `false` (the default) contains
-     * nothing; `'trap-focus'` cycles Tab inside the panel and marks the rest of
-     * the document `inert`, leaving page scroll alone; `true` adds the
-     * body-scroll lock on top, which is what `modal` means on `<skdx-dialog>`,
-     * `<skdx-alert-dialog>` and `<skdx-drawer>`.
-     * Any value but `false` requires an `<skdx-popover-close>` inside the panel.
-     *
-     * A custom converter rather than `{ type: Boolean }`: Lit's boolean converter
-     * reads *attribute presence*, so `modal="trap-focus"` would arrive as `true`
-     * — the one mistake this widening exists to make impossible. The bare
-     * attribute and `"true"` map to `true`, `"trap-focus"` to itself, everything
-     * else to `false`; and the value reflects back as the empty attribute, the
-     * literal `trap-focus`, or nothing at all.
+     * Which gesture reveals the panel. `'click'` toggles it from the Trigger and
+     * keeps it open until dismissed. `'hover'` opens it on pointer enter after
+     * `open-delay` and closes it after `close-delay` once the pointer has left
+     * both Trigger and Content.
+     * @default 'click'
+     */
+    openOn: SkdxPopoverOpenOn;
+    /**
+     * What the panel is. `'dialog'` is an operable panel that can be named, hold
+     * controls and take focus. `'tooltip'` is an inert bubble the Trigger points
+     * `aria-describedby` at while open: it moves no focus, holds nothing
+     * tabbable, and forces `modal` to `'none'`.
+     * @default 'dialog'
+     */
+    get role(): SkdxPopoverRole;
+    set role(next: SkdxPopoverRole | null);
+    private _role;
+    /**
+     * Delay in milliseconds before a hover popover opens on pointer enter. Under
+     * `role="tooltip"` an ancestor `<skdx-popover-provider>`'s `delay-duration`
+     * applies instead unless this is set.
+     * @default 700
+     */
+    openDelay?: number;
+    /**
+     * Delay in milliseconds before a hover popover closes once the pointer has
+     * left both Trigger and Content. A hoverable panel applies a 150ms floor, so
+     * this value can only lengthen the crossing window. Under `role="tooltip"` an
+     * ancestor Provider's `close-delay` applies instead unless this is set, and
+     * 0 with no Provider.
+     * @default 300
+     */
+    closeDelay?: number;
+    /**
+     * Whether the pointer moving from Trigger onto Content closes the panel
+     * instead of keeping it open. Overrides an ancestor Provider.
      * @default false
      */
-    modal: PopoverModality;
-    /** @internal Rewritten to a recipe host's own `id` when one is forwarded onto the derived Content — see `host-attributes.ts`. */
-    contentId: string;
-    /** @internal Set by `<skdx-popover-trigger>` once its native button mounts. */
-    triggerEl: HTMLElement | null;
+    disableHoverableContent?: boolean;
     /**
-     * @internal Set by `<skdx-popover-anchor>` while it is connected, and
-     * cleared when it disconnects. `<skdx-popover-content>` positions against
-     * this when present, else falls back to {@link triggerEl} — see that
-     * element's TSDoc.
+     * Whether the panel is suppressed. While true it never opens: the pointer
+     * entering Trigger does nothing, `aria-describedby` is never set,
+     * `data-state` stays `closed` and `open-change` never fires.
+     * @default false
      */
-    anchorEl: HTMLElement | null;
+    disabled: boolean;
     /**
-     * @internal Published by `<skdx-popover-content>` while it is positioning and
-     * cleared when it stops, so {@link SkdxPopoverRoot.reposition} needs no lookup.
+     * How much of the page the open popover takes over: `'none'` contains nothing, `'trap-focus'` traps Tab and marks the rest of the document inert, `'modal'` also locks page scroll. Forced to `'none'` under `role="tooltip"`.
+     * @default 'none'
      */
+    get modal(): PopoverModality;
+    set modal(next: PopoverModality);
+    private _modal;
+    /** @internal Rewritten to a recipe host's own `id` when one is forwarded onto the derived Content. */
+    contentId: string;
+    /** @internal Set by `<skdx-popover-trigger>` once its native button mounts. */
+    triggerEl: HTMLElement | null;
+    /** @internal Set by `<skdx-popover-anchor>` while connected; `<skdx-popover-content>` positions against this, falling back to {@link triggerEl}. */
+    anchorEl: HTMLElement | null;
+    /** @internal Published by `<skdx-popover-content>` while positioning and cleared when it stops. */
     repositionFn: (() => void) | null;
+    /** @internal The ancestor `<skdx-popover-provider>`, if there is one; resolved on connect. */
+    private provider;
+    /** Which of the two open `data-state` values a bubble wears, recorded when it actually opens. */
+    private wasOpenDelayed;
+    /** Set when `disabled` turns true on an open panel, so the forced close skips `open-change`. */
+    private silentClose;
+    private openTimer?;
+    private closeTimer?;
     private hasUpdatedOnce;
     private teardownOpenChangeComplete?;
+    /**
+     * @internal The resolved `disable-hoverable-content`: this panel's own value,
+     * else an ancestor Provider's, else `false`.
+     */
+    get hoverableContentDisabled(): boolean;
+    /** @internal The `data-state` the Trigger and Content publish. */
+    get dataState(): 'closed' | 'open' | 'delayed-open' | 'instant-open';
     connectedCallback(): void;
     disconnectedCallback(): void;
+    protected willUpdate(changed: Map<string, unknown>): void;
     protected updated(changed: Map<string, unknown>): void;
+    private clearTimers;
     /** @internal */
     setOpen(next: boolean): void;
-    /** @internal */
-    focusTrigger(): void;
+    /** @internal Opens immediately — a focus, or the pointer reaching hoverable content. */
+    openNow(): void;
     /**
-     * Recomputes the open panel's position immediately. The floating layer
-     * already re-runs on scroll, on resize and on an observed size change of
-     * either element; what it cannot see is the anchor *moving* for a reason the
-     * DOM never reports — a CSS transform finishing, a virtual list re-flowing
-     * its rows, a parent repositioned without changing size.
-     *
-     * A no-op while the popover is closed or the panel has not positioned yet:
-     * there is nothing to place, and a method a consumer has to guard would be
-     * worse than one that does nothing.
+     * @internal Opens after the resolved open delay, or at once while an ancestor
+     * Provider's skip-delay window is still open.
      */
+    openDelayed(): void;
+    /** @internal Closes immediately, cancelling any pending timer. */
+    close(): void;
+    /**
+     * @internal Closes after the resolved close delay, leaving the pointer time
+     * to cross onto a hoverable panel.
+     */
+    closeDelayed(): void;
+    /** @internal Cancels a pending close, e.g. when the pointer enters the content. */
+    cancelClose(): void;
+    /** @internal */
+    focusTrigger(): void;
+    /** Recomputes the open panel's position immediately; a no-op while closed or not yet positioned. */
     reposition(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/popover/PopoverRoot.d.ts

@@ -1,20 +1,16 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 import './PopoverPortal.js';
+import './PopoverProvider.js';
+/** The three points on Popover's modality axis: `'none'`, `'trap-focus'`, or `'modal'`. */
+export type PopoverModality = 'none' | 'modal' | 'trap-focus';
+/** What the panel is: an operable `'dialog'`, or an inert `'tooltip'` bubble. */
+export type SkdxPopoverRole = 'dialog' | 'tooltip';
+/** Which gesture reveals the panel: a trigger click, or the pointer resting on it. */
+export type SkdxPopoverOpenOn = 'click' | 'hover';
 /**
- * The three points on Popover's modality axis — see `popoverContract`'s
- * `modal` prop. `'trap-focus'` is one of three things the word carries here,
- * distinct from what `modal` means on Dialog, AlertDialog and Drawer.
- */
-export type PopoverModality = boolean | 'trap-focus';
-/**
- * Popover's state primitive: owns `open`/`modal`, renders children verbatim
- * through `<slot>`. Descendants find it via `closest('skdx-popover, skdx-popover-root')`
- * and re-render on `skdx-popover-internal-update` events—the shared-state pattern
- * Web Components need since there's no built-in context.
- *
- * Non-modal by default; content floats against trigger via `positionFloating()`
- * with no portal. For manual composition, use this via
- * `@skdx/web-components/primitives/popover`; `<skdx-popover>` is the derived recipe.
+ * Popover's state primitive: owns `open`, the modality axis, and the hover
+ * timing that reveals a panel on pointer enter, rendering children verbatim
+ * through `<slot>`. Non-modal by default.
  *
  * @example
  * ```html
@@ -38,67 +34,117 @@ export declare class SkdxPopoverRoot extends LitElement {
      */
     open: boolean;
     /**
-     * Initial open state, for uncontrolled usage. Applied once, on connect,
-     * and only if `open` wasn't already set.
+     * Initial open state, for uncontrolled usage; applied once, on connect, only if `open` wasn't already set.
      * @default false
      */
     defaultOpen: boolean;
     /**
-     * How much of the page the open popover takes over. Three points, because
-     * modality is three independent things: `false` (the default) contains
-     * nothing; `'trap-focus'` cycles Tab inside the panel and marks the rest of
-     * the document `inert`, leaving page scroll alone; `true` adds the
-     * body-scroll lock on top, which is what `modal` means on `<skdx-dialog>`,
-     * `<skdx-alert-dialog>` and `<skdx-drawer>`.
-     * Any value but `false` requires an `<skdx-popover-close>` inside the panel.
-     *
-     * A custom converter rather than `{ type: Boolean }`: Lit's boolean converter
-     * reads *attribute presence*, so `modal="trap-focus"` would arrive as `true`
-     * — the one mistake this widening exists to make impossible. The bare
-     * attribute and `"true"` map to `true`, `"trap-focus"` to itself, everything
-     * else to `false`; and the value reflects back as the empty attribute, the
-     * literal `trap-focus`, or nothing at all.
+     * Which gesture reveals the panel. `'click'` toggles it from the Trigger and
+     * keeps it open until dismissed. `'hover'` opens it on pointer enter after
+     * `open-delay` and closes it after `close-delay` once the pointer has left
+     * both Trigger and Content.
+     * @default 'click'
+     */
+    openOn: SkdxPopoverOpenOn;
+    /**
+     * What the panel is. `'dialog'` is an operable panel that can be named, hold
+     * controls and take focus. `'tooltip'` is an inert bubble the Trigger points
+     * `aria-describedby` at while open: it moves no focus, holds nothing
+     * tabbable, and forces `modal` to `'none'`.
+     * @default 'dialog'
+     */
+    get role(): SkdxPopoverRole;
+    set role(next: SkdxPopoverRole | null);
+    private _role;
+    /**
+     * Delay in milliseconds before a hover popover opens on pointer enter. Under
+     * `role="tooltip"` an ancestor `<skdx-popover-provider>`'s `delay-duration`
+     * applies instead unless this is set.
+     * @default 700
+     */
+    openDelay?: number;
+    /**
+     * Delay in milliseconds before a hover popover closes once the pointer has
+     * left both Trigger and Content. A hoverable panel applies a 150ms floor, so
+     * this value can only lengthen the crossing window. Under `role="tooltip"` an
+     * ancestor Provider's `close-delay` applies instead unless this is set, and
+     * 0 with no Provider.
+     * @default 300
+     */
+    closeDelay?: number;
+    /**
+     * Whether the pointer moving from Trigger onto Content closes the panel
+     * instead of keeping it open. Overrides an ancestor Provider.
      * @default false
      */
-    modal: PopoverModality;
-    /** @internal Rewritten to a recipe host's own `id` when one is forwarded onto the derived Content — see `host-attributes.ts`. */
-    contentId: string;
-    /** @internal Set by `<skdx-popover-trigger>` once its native button mounts. */
-    triggerEl: HTMLElement | null;
+    disableHoverableContent?: boolean;
     /**
-     * @internal Set by `<skdx-popover-anchor>` while it is connected, and
-     * cleared when it disconnects. `<skdx-popover-content>` positions against
-     * this when present, else falls back to {@link triggerEl} — see that
-     * element's TSDoc.
+     * Whether the panel is suppressed. While true it never opens: the pointer
+     * entering Trigger does nothing, `aria-describedby` is never set,
+     * `data-state` stays `closed` and `open-change` never fires.
+     * @default false
      */
-    anchorEl: HTMLElement | null;
+    disabled: boolean;
     /**
-     * @internal Published by `<skdx-popover-content>` while it is positioning and
-     * cleared when it stops, so {@link SkdxPopoverRoot.reposition} needs no lookup.
+     * How much of the page the open popover takes over: `'none'` contains nothing, `'trap-focus'` traps Tab and marks the rest of the document inert, `'modal'` also locks page scroll. Forced to `'none'` under `role="tooltip"`.
+     * @default 'none'
      */
+    get modal(): PopoverModality;
+    set modal(next: PopoverModality);
+    private _modal;
+    /** @internal Rewritten to a recipe host's own `id` when one is forwarded onto the derived Content. */
+    contentId: string;
+    /** @internal Set by `<skdx-popover-trigger>` once its native button mounts. */
+    triggerEl: HTMLElement | null;
+    /** @internal Set by `<skdx-popover-anchor>` while connected; `<skdx-popover-content>` positions against this, falling back to {@link triggerEl}. */
+    anchorEl: HTMLElement | null;
+    /** @internal Published by `<skdx-popover-content>` while positioning and cleared when it stops. */
     repositionFn: (() => void) | null;
+    /** @internal The ancestor `<skdx-popover-provider>`, if there is one; resolved on connect. */
+    private provider;
+    /** Which of the two open `data-state` values a bubble wears, recorded when it actually opens. */
+    private wasOpenDelayed;
+    /** Set when `disabled` turns true on an open panel, so the forced close skips `open-change`. */
+    private silentClose;
+    private openTimer?;
+    private closeTimer?;
     private hasUpdatedOnce;
     private teardownOpenChangeComplete?;
+    /**
+     * @internal The resolved `disable-hoverable-content`: this panel's own value,
+     * else an ancestor Provider's, else `false`.
+     */
+    get hoverableContentDisabled(): boolean;
+    /** @internal The `data-state` the Trigger and Content publish. */
+    get dataState(): 'closed' | 'open' | 'delayed-open' | 'instant-open';
     connectedCallback(): void;
     disconnectedCallback(): void;
+    protected willUpdate(changed: Map<string, unknown>): void;
     protected updated(changed: Map<string, unknown>): void;
+    private clearTimers;
     /** @internal */
     setOpen(next: boolean): void;
-    /** @internal */
-    focusTrigger(): void;
+    /** @internal Opens immediately — a focus, or the pointer reaching hoverable content. */
+    openNow(): void;
     /**
-     * Recomputes the open panel's position immediately. The floating layer
-     * already re-runs on scroll, on resize and on an observed size change of
-     * either element; what it cannot see is the anchor *moving* for a reason the
-     * DOM never reports — a CSS transform finishing, a virtual list re-flowing
-     * its rows, a parent repositioned without changing size.
-     *
-     * A no-op while the popover is closed or the panel has not positioned yet:
-     * there is nothing to place, and a method a consumer has to guard would be
-     * worse than one that does nothing.
+     * @internal Opens after the resolved open delay, or at once while an ancestor
+     * Provider's skip-delay window is still open.
      */
+    openDelayed(): void;
+    /** @internal Closes immediately, cancelling any pending timer. */
+    close(): void;
+    /**
+     * @internal Closes after the resolved close delay, leaving the pointer time
+     * to cross onto a hoverable panel.
+     */
+    closeDelayed(): void;
+    /** @internal Cancels a pending close, e.g. when the pointer enters the content. */
+    cancelClose(): void;
+    /** @internal */
+    focusTrigger(): void;
+    /** Recomputes the open panel's position immediately; a no-op while closed or not yet positioned. */
     reposition(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/popover/PopoverRoot.js

@@ -1,5 +1,5 @@
-var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var s=(t,i,e,r)=>{for(var o=r>1?void 0:r?c(i,e):i,l=t.length-1,p;l>=0;l--)(p=t[l])&&(o=(r?p(i,e,o):p(o))||o);return r&&o&&d(i,e,o),o};import{css as u,html as h,LitElement as f}from"lit";import{property as a}from"lit/decorators.js";import{customElement as m}from"../internal/define.js";import{nextId as v}from"../internal/ids.js";import{notifyOpenChangeComplete as b}from"../internal/open-change-complete.js";import{hiddenHostStyles as C}from"../internal/styles.js";import"./PopoverPortal.js";var g={fromAttribute(t){return t===null?!1:t==="trap-focus"?"trap-focus":t===""||t==="true"},toAttribute(t){return t==="trap-focus"?"trap-focus":t?"":null}},n=class extends f{constructor(){super(...arguments);this.open=!1;this.defaultOpen=!1;this.modal=!1;this.contentId=v("skdx-popover-content");this.triggerEl=null;this.anchorEl=null;this.repositionFn=null;this.hasUpdatedOnce=!1}connectedCallback(){super.connectedCallback(),this.defaultOpen&&!this.hasAttribute("open")&&(this.open=!0);let e=this.querySelector("skdx-popover-content")?.id;e&&(this.contentId=e)}disconnectedCallback(){this.teardownOpenChangeComplete?.(),super.disconnectedCallback()}updated(e){let r=!this.hasUpdatedOnce;this.hasUpdatedOnce=!0,e.has("open")&&!r&&this.dispatchEvent(new CustomEvent("open-change",{detail:this.open,bubbles:!0,composed:!0})),e.size>0&&this.dispatchEvent(new CustomEvent("skdx-popover-internal-update")),e.has("open")&&!r&&(this.teardownOpenChangeComplete?.(),this.teardownOpenChangeComplete=b(()=>this.querySelector("skdx-popover-content"),this.open,o=>this.dispatchEvent(new CustomEvent("open-change-complete",{detail:o,bubbles:!0,composed:!0}))))}setOpen(e){this.open!==e&&(this.open=e)}focusTrigger(){this.triggerEl?.focus()}reposition(){this.repositionFn?.()}render(){return h`<slot></slot>`}};n.styles=[C,u`
+var h=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var i=(r,n,e,t)=>{for(var s=t>1?void 0:t?c(n,e):n,a=r.length-1,p;a>=0;a--)(p=r[a])&&(s=(t?p(n,e,s):p(s))||s);return t&&s&&h(n,e,s),s};import{css as u,html as m,LitElement as v}from"lit";import{property as l}from"lit/decorators.js";import{customElement as f}from"../internal/define.js";import{nextId as y}from"../internal/ids.js";import{notifyOpenChangeComplete as b}from"../internal/open-change-complete.js";import{hiddenHostStyles as O}from"../internal/styles.js";import"./PopoverPortal.js";import"./PopoverProvider.js";import{emit as d}from"../internal/events.js";import{POPOVER_FAMILY as T}from"./family.js";var C=150,g=700,D=300,E={fromAttribute:r=>r==="modal"||r==="trap-focus"?r:"none",toAttribute:r=>r==="none"?null:r},o=class extends v{constructor(){super(...arguments);this.open=!1;this.defaultOpen=!1;this.openOn="click";this._role="dialog";this.disabled=!1;this._modal="none";this.contentId=y("skdx-popover-content");this.triggerEl=null;this.anchorEl=null;this.repositionFn=null;this.provider=null;this.wasOpenDelayed=!0;this.silentClose=!1;this.hasUpdatedOnce=!1}get role(){return this._role}set role(e){if(e===null)return;let t=this._role;this._role=e==="tooltip"?"tooltip":"dialog",this.removeAttribute("role"),this.requestUpdate("role",t)}get modal(){return this.role==="tooltip"?"none":this._modal}set modal(e){let t=this._modal;this._modal=e,this.requestUpdate("modal",t)}get hoverableContentDisabled(){return this.disableHoverableContent??this.provider?.disableHoverableContent??!1}get dataState(){return this.open?this.role!=="tooltip"?"open":this.wasOpenDelayed?"delayed-open":"instant-open":"closed"}connectedCallback(){super.connectedCallback(),this.provider=this.closest("skdx-popover-provider"),this.defaultOpen&&!this.hasAttribute("open")&&(this.open=!0);let e=this.querySelector("skdx-popover-content")?.id;e&&(this.contentId=e)}disconnectedCallback(){this.clearTimers(),this.teardownOpenChangeComplete?.(),super.disconnectedCallback()}willUpdate(e){e.has("disabled")&&this.disabled&&this.open&&(this.silentClose=!0,this.clearTimers(),this.open=!1)}updated(e){let t=!this.hasUpdatedOnce;this.hasUpdatedOnce=!0,e.has("open")&&!t&&!this.silentClose&&d(this,"open-change",this.open),this.silentClose=!1,e.size>0&&T.notify(this),e.has("open")&&!t&&(this.teardownOpenChangeComplete?.(),this.teardownOpenChangeComplete=b(()=>this.querySelector("skdx-popover-content"),this.open,s=>d(this,"open-change-complete",s)))}clearTimers(){clearTimeout(this.openTimer),clearTimeout(this.closeTimer)}setOpen(e){this.disabled&&e||this.open!==e&&(this.open=e,e?this.provider?.onPanelOpen():this.provider?.onPanelClose())}openNow(){this.disabled||(this.clearTimers(),this.wasOpenDelayed=!1,this.setOpen(!0))}openDelayed(){if(this.disabled)return;this.clearTimers();let e=this.openDelay??(this.role==="tooltip"?this.provider?.delayDuration:void 0)??g;if(this.role==="tooltip"&&this.provider&&!this.provider.isOpenDelayed){this.wasOpenDelayed=!1,this.setOpen(!0);return}this.openTimer=setTimeout(()=>{this.wasOpenDelayed=!0,this.setOpen(!0)},e)}close(){this.clearTimers(),this.setOpen(!1)}closeDelayed(){this.clearTimers();let e=this.closeDelay??(this.role==="tooltip"?this.provider?.closeDelay??0:D),t=this.hoverableContentDisabled?e:Math.max(e,C);if(t<=0){this.setOpen(!1);return}this.closeTimer=setTimeout(()=>this.setOpen(!1),t)}cancelClose(){this.clearTimers()}focusTrigger(){this.triggerEl?.focus()}reposition(){this.repositionFn?.()}render(){return m`<slot></slot>`}};o.styles=[O,u`
       :host {
         display: contents;
       }
-    `],s([a({type:Boolean,reflect:!0})],n.prototype,"open",2),s([a({type:Boolean,attribute:"default-open"})],n.prototype,"defaultOpen",2),s([a({converter:g,reflect:!0})],n.prototype,"modal",2),n=s([m("skdx-popover-root")],n);export{n as SkdxPopoverRoot};
+    `],i([l({type:Boolean,reflect:!0})],o.prototype,"open",2),i([l({type:Boolean,attribute:"default-open"})],o.prototype,"defaultOpen",2),i([l({type:String,attribute:"open-on"})],o.prototype,"openOn",2),i([l({attribute:"role",type:String,noAccessor:!0})],o.prototype,"role",1),i([l({type:Number,attribute:"open-delay"})],o.prototype,"openDelay",2),i([l({type:Number,attribute:"close-delay"})],o.prototype,"closeDelay",2),i([l({type:Boolean,attribute:"disable-hoverable-content"})],o.prototype,"disableHoverableContent",2),i([l({type:Boolean,reflect:!0})],o.prototype,"disabled",2),i([l({converter:E,reflect:!0,noAccessor:!0})],o.prototype,"modal",1),o=i([f("skdx-popover-root")],o);export{o as SkdxPopoverRoot};

package/dist/popover/PopoverTitle.cjs

@@ -1,4 +1,4 @@
-"use strict";var m=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var E=(r,t)=>{for(var s in t)m(r,s,{get:t[s],enumerable:!0})},b=(r,t,s,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of h(t))!f.call(r,e)&&e!==s&&m(r,e,{get:()=>t[e],enumerable:!(l=c(t,e))||l.enumerable});return r};var g=r=>b(m({},"__esModule",{value:!0}),r),n=(r,t,s,l)=>{for(var e=l>1?void 0:l?c(t,s):t,i=r.length-1,p;i>=0;i--)(p=r[i])&&(e=(l?p(t,s,e):p(e))||e);return l&&e&&m(t,s,e),e};var u={};E(u,{SkdxPopoverTitle:()=>o});module.exports=g(u);var a=require("lit"),d=require("../internal/define.cjs");var o=class extends a.LitElement{render(){return a.html`<h2 part="title"><slot></slot></h2>`}};o.styles=a.css`
+"use strict";var m=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var f=(l,e)=>{for(var s in e)m(l,s,{get:e[s],enumerable:!0})},y=(l,e,s,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of h(e))!u.call(l,t)&&t!==s&&m(l,t,{get:()=>e[t],enumerable:!(r=c(e,t))||r.enumerable});return l};var E=l=>y(m({},"__esModule",{value:!0}),l),n=(l,e,s,r)=>{for(var t=r>1?void 0:r?c(e,s):e,p=l.length-1,i;p>=0;p--)(i=l[p])&&(t=(r?i(e,s,t):i(t))||t);return r&&t&&m(e,s,t),t};var b={};f(b,{SkdxPopoverTitle:()=>o});module.exports=E(b);var a=require("lit"),d=require("../internal/define.cjs");var o=class extends a.LitElement{render(){return a.html`<h2 part="title"><slot></slot></h2>`}};o.styles=a.css`
     :host {
       display: block;
     }

package/dist/popover/PopoverTitle.d.cts

@@ -1,10 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
  * Popover's accessible name: an `<h2>` that wires `aria-labelledby` to Content.
- * Dialogs announce as bare "dialog" without a name, so rendering Title fixes
- * naming by construction. Alternative: explicit `aria-label` on Content.
- *
- * ID lands on host, not shadow `<h2>`, because IDREFs never cross boundaries.
  *
  * @example
  * ```html
@@ -18,7 +14,7 @@ import { LitElement } from 'lit';
  */
 export declare class SkdxPopoverTitle extends LitElement {
     static styles: import("lit").CSSResult;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {