@skdx/web-components 0.26.0 → 0.28.0

package/dist/popover/Popover.d.ts

@@ -1,63 +1,72 @@
-import { LitElement } from 'lit';
+import type { Align, Side } from '../internal/positioning.js';
+import { SkdxPopoverRoot } from './PopoverRoot.js';
+export type { PopoverModality } from './PopoverRoot.js';
 /**
- * `<skdx-popover>` — the Web Components implementation of the shared Popover
- * contract (see `@skdx/shared`'s `popoverContract`). Owns the open state
- * and hands it down to `<skdx-popover-trigger>` / `<skdx-popover-content>` /
- * `<skdx-popover-close>`, which look it up via `closest('skdx-popover')` and
- * re-render on the `skdx-popover-internal-update` event this element
- * dispatches whenever `open`/`modal` change — the same shared-state pattern
- * `<skdx-select>` uses, since Web Components have no built-in context
- * mechanism.
+ * Renders canonical Popover anatomy: derives trigger from `slot="trigger"`
+ * children, creates panel with title/description and remaining children,
+ * optional arrow, and close button. Children are always panel body, never parts.
  *
- * Renders only a `<slot>`. Non-modal by default; `<skdx-popover-content>`
- * floats against the trigger via `positionFloating()` and needs no portal
- * (`strategy: 'fixed'` isn't clipped by `overflow` ancestors).
+ * For hand composition, use `<skdx-popover-root>` from
+ * `@skdx/web-components/primitives/popover`.
  *
  * @example
  * ```html
- * <skdx-popover>
- *   <skdx-popover-trigger>Share</skdx-popover-trigger>
- *   <skdx-popover-content>
- *     <p>Share this page with your team.</p>
- *     <skdx-popover-close>Close</skdx-popover-close>
- *   </skdx-popover-content>
+ * <skdx-popover title="Share this page">
+ *   <button slot="trigger">Share</button>
+ *   Anyone with the link can view it.
  * </skdx-popover>
  * ```
  *
  * @fires open-change - Fired with the new open state whenever it changes, controlled or not.
  * @fires open-change-complete - Fired with the new open state after `<skdx-popover-content>`'s enter or exit animation has finished — as soon as the content has settled, when it declares no animation at all. Not cancelable: the change has already happened.
  */
-export declare class SkdxPopover extends LitElement {
-    static styles: import("lit").CSSResult[];
+export declare class SkdxPopover extends SkdxPopoverRoot {
     /**
-     * Whether the popover is currently open. Listen for `open-change` to observe or override changes.
-     * @default false
+     * Title for the derived anatomy's `<skdx-popover-title>`.
+     *
+     * Shadows `HTMLElement.title`, the native global attribute that shows a
+     * browser tooltip on hover — harmless here because `:host` is `display:
+     * contents` and therefore generates no box of its own for the browser to
+     * hover. An empty string, like the native property's own default, counts
+     * as "no title".
+     * @default '' — no title is derived.
      */
-    open: boolean;
+    title: string;
     /**
-     * Initial open state, for uncontrolled usage. Applied once, on connect,
-     * and only if `open` wasn't already set.
-     * @default false
+     * Description for the derived anatomy's `<skdx-popover-description>`.
+     * @default undefined — no description is derived.
+     */
+    description?: string;
+    /**
+     * Preferred edge of the trigger the derived `<skdx-popover-content>` places
+     * the panel against.
+     * @default 'bottom'
      */
-    defaultOpen: boolean;
+    side: Side;
     /**
-     * Whether `<skdx-popover-content>` traps focus while open. Non-modal (the
-     * default) lets the rest of the page stay interactive.
+     * Preferred alignment of the panel along the `side` edge — `'start'`,
+     * `'center'` or `'end'`. A preference, not a guarantee: the floating layer
+     * shifts the panel along that edge to keep it in the viewport.
+     * @default 'center'
+     */
+    align: Align;
+    /**
+     * Whether the derived `<skdx-popover-content>` includes a
+     * `<skdx-popover-arrow>` pointing back at the trigger.
      * @default false
      */
-    modal: boolean;
-    readonly contentId: string;
-    /** @internal Set by `<skdx-popover-trigger>` once its native button mounts. */
-    triggerEl: HTMLElement | null;
-    private hasUpdatedOnce;
-    private teardownOpenChangeComplete?;
+    showArrow: boolean;
+    /** The title/description/showArrow combination the generated anatomy was last built for; `''` while nothing has been generated. */
+    private _anatomyFilledFor;
     connectedCallback(): void;
-    disconnectedCallback(): void;
+    /**
+     * Draws the canonical anatomy into the light DOM. Rebuilding tears down the
+     * panel's positioning state, so it is gated on a key of the inputs that
+     * actually change the anatomy's *shape*; `title`/`description`/`side`/`align`
+     * changes refresh in place instead.
+     */
+    private readonly fillAnatomy;
     protected updated(changed: Map<string, unknown>): void;
-    /** @internal */
-    setOpen(next: boolean): void;
-    /** @internal */
-    focusTrigger(): void;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

package/dist/popover/Popover.js

@@ -1,5 +1 @@
-var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var i=(r,s,e,o)=>{for(var t=o>1?void 0:o?c(s,e):s,a=r.length-1,p;a>=0;a--)(p=r[a])&&(t=(o?p(s,e,t):p(t))||t);return o&&t&&d(s,e,t),t};import{css as h,html as m,LitElement as u}from"lit";import{property as l}from"lit/decorators.js";import{customElement as f}from"../internal/define.js";import{nextId as v}from"../internal/ids.js";import{notifyOpenChangeComplete as C}from"../internal/open-change-complete.js";import{hiddenHostStyles as b}from"../internal/styles.js";var n=class extends u{constructor(){super(...arguments);this.open=!1;this.defaultOpen=!1;this.modal=!1;this.contentId=v("skdx-popover-content");this.triggerEl=null;this.hasUpdatedOnce=!1}connectedCallback(){super.connectedCallback(),this.defaultOpen&&!this.hasAttribute("open")&&(this.open=!0)}disconnectedCallback(){this.teardownOpenChangeComplete?.(),super.disconnectedCallback()}updated(e){let o=!this.hasUpdatedOnce;this.hasUpdatedOnce=!0,e.has("open")&&!o&&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")&&!o&&(this.teardownOpenChangeComplete?.(),this.teardownOpenChangeComplete=C(()=>this.querySelector("skdx-popover-content"),this.open,t=>this.dispatchEvent(new CustomEvent("open-change-complete",{detail:t,bubbles:!0,composed:!0}))))}setOpen(e){this.open!==e&&(this.open=e)}focusTrigger(){this.triggerEl?.focus()}render(){return m`<slot></slot>`}};n.styles=[b,h`
-      :host {
-        display: contents;
-      }
-    `],i([l({type:Boolean,reflect:!0})],n.prototype,"open",2),i([l({type:Boolean,attribute:"default-open"})],n.prototype,"defaultOpen",2),i([l({type:Boolean,reflect:!0})],n.prototype,"modal",2),n=i([f("skdx-popover")],n);export{n as SkdxPopover};
+var m=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var r=(a,i,e,l)=>{for(var o=l>1?void 0:l?d(i,e):i,s=a.length-1,p;s>=0;s--)(p=a[s])&&(o=(l?p(i,e,o):p(o))||o);return l&&o&&m(i,e,o),o};import{html as y}from"lit";import{property as n}from"lit/decorators.js";import{hasGeneratedContent as h}from"../internal/authored.js";import{customElement as c}from"../internal/define.js";import{fillPopoverAnatomy as f,POPOVER_ANATOMY_GENERATED as g,refreshPopoverAnatomy as A}from"./PopoverAnatomy.js";import{SkdxPopoverRoot as u}from"./PopoverRoot.js";var t=class extends u{constructor(){super(...arguments);this.title="";this.side="bottom";this.align="center";this.showArrow=!1;this._anatomyFilledFor="";this.fillAnatomy=()=>{let e=`${!!this.title}|${!!this.description}|${this.showArrow}`;e!==this._anatomyFilledFor||!h(this,g)?(this._anatomyFilledFor=e,f(this)):A(this)}}connectedCallback(){super.connectedCallback(),queueMicrotask(this.fillAnatomy)}updated(e){this.fillAnatomy(),super.updated(e)}render(){return y`<slot @slotchange=${this.fillAnatomy}></slot>`}};r([n({type:String})],t.prototype,"title",2),r([n({type:String})],t.prototype,"description",2),r([n({type:String})],t.prototype,"side",2),r([n({type:String})],t.prototype,"align",2),r([n({type:Boolean,attribute:"show-arrow"})],t.prototype,"showArrow",2),t=r([c("skdx-popover")],t);export{t as SkdxPopover};

package/dist/popover/PopoverAnatomy.cjs

@@ -0,0 +1 @@
+"use strict";var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var E=(e,t)=>{for(var r in t)l(e,r,{get:t[r],enumerable:!0})},A=(e,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of v(t))!x.call(e,s)&&s!==r&&l(e,s,{get:()=>t[s],enumerable:!(n=m(t,s))||n.enumerable});return e};var f=e=>A(l({},"__esModule",{value:!0}),e);var b={};E(b,{POPOVER_ANATOMY_GENERATED:()=>i,fillPopoverAnatomy:()=>N,refreshPopoverAnatomy:()=>h});module.exports=f(b);var u=require("../internal/host-attributes.cjs"),y=require("./PopoverAnchor.cjs"),C=require("./PopoverTrigger.cjs"),w=require("./PopoverContent.cjs"),P=require("./PopoverTitle.cjs"),T=require("./PopoverDescription.cjs"),_=require("./PopoverArrow.cjs"),G=require("./PopoverClose.cjs"),i="data-skdx-popover-generated",g=new Set(["skdx-popover-title","skdx-popover-description","skdx-popover-arrow","skdx-popover-close"]),a="http://www.w3.org/2000/svg";function k(){let e=document.createElementNS(a,"svg");e.setAttribute("viewBox","0 0 16 16"),e.setAttribute("width","1em"),e.setAttribute("height","1em"),e.setAttribute("fill","none"),e.setAttribute("aria-hidden","true"),e.setAttribute("focusable","false");let t=document.createElementNS(a,"path");return t.setAttribute("d","M4 4l8 8M12 4l-8 8"),t.setAttribute("stroke","currentColor"),t.setAttribute("stroke-width","1.5"),t.setAttribute("stroke-linecap","round"),e.append(t),e}function N(e){let t=e.querySelector(`:scope > skdx-popover-trigger[${i}]`),r=e.querySelector(`:scope > skdx-popover-content[${i}]`),n,s;if(t||r)n=t?Array.from(t.childNodes):[],s=r?Array.from(r.childNodes).filter(o=>o.nodeType!==Node.ELEMENT_NODE||!g.has(o.tagName.toLowerCase())):[];else{n=[],s=[];for(let o of Array.from(e.childNodes))o.nodeType===Node.ELEMENT_NODE&&o.getAttribute("slot")==="trigger"?(o.removeAttribute("slot"),n.push(o)):s.push(o)}let d=[];if(n.length>0){let o=document.createElement("skdx-popover-trigger");o.setAttribute(i,""),o.append(...n),d.push(o)}let p=document.createElement("skdx-popover-content");if(p.setAttribute(i,""),(0,u.forwardHostAttributesToContent)(e,p),p.side=e.side,p.align=e.align,e.title){let o=document.createElement("skdx-popover-title");o.textContent=e.title,p.append(o)}if(e.description){let o=document.createElement("skdx-popover-description");o.textContent=e.description,p.append(o)}p.append(...s),e.showArrow&&p.append(document.createElement("skdx-popover-arrow"));let c=document.createElement("skdx-popover-close");c.setAttribute("aria-label","Close"),c.append(k()),p.append(c),d.push(p),e.replaceChildren(...d)}function h(e){let t=e.querySelector(`:scope > skdx-popover-content[${i}]`);if(!t)return;t.side=e.side,t.align=e.align;let r=t.querySelector(":scope > skdx-popover-title");r&&e.title&&(r.textContent=e.title);let n=t.querySelector(":scope > skdx-popover-description");n&&e.description&&(n.textContent=e.description)}0&&(module.exports={POPOVER_ANATOMY_GENERATED,fillPopoverAnatomy,refreshPopoverAnatomy});

package/dist/popover/PopoverAnatomy.d.cts

@@ -0,0 +1,31 @@
+import type { SkdxPopover } from './Popover.cjs';
+import './PopoverAnchor.cjs';
+import './PopoverTrigger.cjs';
+import './PopoverContent.cjs';
+import './PopoverTitle.cjs';
+import './PopoverDescription.cjs';
+import './PopoverArrow.cjs';
+import './PopoverClose.cjs';
+/** @internal Marks a direct child of `<skdx-popover>` this module generated. */
+export declare const POPOVER_ANATOMY_GENERATED = "data-skdx-popover-generated";
+/**
+ * Builds canonical anatomy: derives trigger from `slot="trigger"` children,
+ * creates content panel with optional title/description and remaining children
+ * as body, optional arrow, and always-generated close button—all as light-DOM
+ * children of root.
+ *
+ * Close is always generated; this prevents PopoverContent's dev warning about
+ * focus-trapping panels without one. Trigger/body read from root's direct
+ * children on first build, from previous generated parts on rebuild.
+ * Host id/class/style/data-* / aria-* forward to content panel.
+ * @internal
+ */
+export declare function fillPopoverAnatomy(root: SkdxPopover): void;
+/**
+ * Refreshes the generated Title/Description text and the Content's
+ * `side`/`align` in place — the parts of the anatomy that can change without
+ * a structural rebuild. A no-op when the anatomy has not been (or is no
+ * longer) generated.
+ * @internal
+ */
+export declare function refreshPopoverAnatomy(root: SkdxPopover): void;

package/dist/popover/PopoverAnatomy.d.ts

@@ -0,0 +1,31 @@
+import type { SkdxPopover } from './Popover.js';
+import './PopoverAnchor.js';
+import './PopoverTrigger.js';
+import './PopoverContent.js';
+import './PopoverTitle.js';
+import './PopoverDescription.js';
+import './PopoverArrow.js';
+import './PopoverClose.js';
+/** @internal Marks a direct child of `<skdx-popover>` this module generated. */
+export declare const POPOVER_ANATOMY_GENERATED = "data-skdx-popover-generated";
+/**
+ * Builds canonical anatomy: derives trigger from `slot="trigger"` children,
+ * creates content panel with optional title/description and remaining children
+ * as body, optional arrow, and always-generated close button—all as light-DOM
+ * children of root.
+ *
+ * Close is always generated; this prevents PopoverContent's dev warning about
+ * focus-trapping panels without one. Trigger/body read from root's direct
+ * children on first build, from previous generated parts on rebuild.
+ * Host id/class/style/data-* / aria-* forward to content panel.
+ * @internal
+ */
+export declare function fillPopoverAnatomy(root: SkdxPopover): void;
+/**
+ * Refreshes the generated Title/Description text and the Content's
+ * `side`/`align` in place — the parts of the anatomy that can change without
+ * a structural rebuild. A no-op when the anatomy has not been (or is no
+ * longer) generated.
+ * @internal
+ */
+export declare function refreshPopoverAnatomy(root: SkdxPopover): void;

package/dist/popover/PopoverAnatomy.js

@@ -0,0 +1 @@
+import{forwardHostAttributesToContent as a}from"../internal/host-attributes.js";import"./PopoverAnchor.js";import"./PopoverTrigger.js";import"./PopoverContent.js";import"./PopoverTitle.js";import"./PopoverDescription.js";import"./PopoverArrow.js";import"./PopoverClose.js";var p="data-skdx-popover-generated",u=new Set(["skdx-popover-title","skdx-popover-description","skdx-popover-arrow","skdx-popover-close"]),l="http://www.w3.org/2000/svg";function m(){let e=document.createElementNS(l,"svg");e.setAttribute("viewBox","0 0 16 16"),e.setAttribute("width","1em"),e.setAttribute("height","1em"),e.setAttribute("fill","none"),e.setAttribute("aria-hidden","true"),e.setAttribute("focusable","false");let o=document.createElementNS(l,"path");return o.setAttribute("d","M4 4l8 8M12 4l-8 8"),o.setAttribute("stroke","currentColor"),o.setAttribute("stroke-width","1.5"),o.setAttribute("stroke-linecap","round"),e.append(o),e}function h(e){let o=e.querySelector(`:scope > skdx-popover-trigger[${p}]`),s=e.querySelector(`:scope > skdx-popover-content[${p}]`),n,i;if(o||s)n=o?Array.from(o.childNodes):[],i=s?Array.from(s.childNodes).filter(t=>t.nodeType!==Node.ELEMENT_NODE||!u.has(t.tagName.toLowerCase())):[];else{n=[],i=[];for(let t of Array.from(e.childNodes))t.nodeType===Node.ELEMENT_NODE&&t.getAttribute("slot")==="trigger"?(t.removeAttribute("slot"),n.push(t)):i.push(t)}let d=[];if(n.length>0){let t=document.createElement("skdx-popover-trigger");t.setAttribute(p,""),t.append(...n),d.push(t)}let r=document.createElement("skdx-popover-content");if(r.setAttribute(p,""),a(e,r),r.side=e.side,r.align=e.align,e.title){let t=document.createElement("skdx-popover-title");t.textContent=e.title,r.append(t)}if(e.description){let t=document.createElement("skdx-popover-description");t.textContent=e.description,r.append(t)}r.append(...i),e.showArrow&&r.append(document.createElement("skdx-popover-arrow"));let c=document.createElement("skdx-popover-close");c.setAttribute("aria-label","Close"),c.append(m()),r.append(c),d.push(r),e.replaceChildren(...d)}function b(e){let o=e.querySelector(`:scope > skdx-popover-content[${p}]`);if(!o)return;o.side=e.side,o.align=e.align;let s=o.querySelector(":scope > skdx-popover-title");s&&e.title&&(s.textContent=e.title);let n=o.querySelector(":scope > skdx-popover-description");n&&e.description&&(n.textContent=e.description)}export{p as POPOVER_ANATOMY_GENERATED,h as fillPopoverAnatomy,b as refreshPopoverAnatomy};

package/dist/popover/PopoverAnchor.cjs

@@ -0,0 +1,5 @@
+"use strict";var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var k=(t,o)=>{for(var r in o)d(t,r,{get:o[r],enumerable:!0})},u=(t,o,r,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of v(o))!m.call(t,e)&&e!==r&&d(t,e,{get:()=>o[e],enumerable:!(s=c(o,e))||s.enumerable});return t};var x=t=>u(d({},"__esModule",{value:!0}),t),h=(t,o,r,s)=>{for(var e=s>1?void 0:s?c(o,r):o,a=t.length-1,p;a>=0;a--)(p=t[a])&&(e=(s?p(o,r,e):p(e))||e);return s&&e&&d(o,r,e),e};var f={};k(f,{SkdxPopoverAnchor:()=>i});module.exports=x(f);var l=require("lit"),n=require("../internal/define.cjs");var i=class extends l.LitElement{constructor(){super(...arguments);this.root=null}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-popover, skdx-popover-root"),!this.root)throw new Error("<skdx-popover-anchor> must be used inside <skdx-popover>.");(0,n.whenUpgraded)(this.root,()=>{this.root&&(this.root.anchorEl=this)})}disconnectedCallback(){this.root?.anchorEl===this&&(this.root.anchorEl=null),super.disconnectedCallback()}render(){return l.html`<slot></slot>`}};i.styles=l.css`
+    :host {
+      display: contents;
+    }
+  `,i=h([(0,n.customElement)("skdx-popover-anchor")],i);0&&(module.exports={SkdxPopoverAnchor});

package/dist/popover/PopoverAnchor.d.cts

@@ -0,0 +1,29 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-popover-anchor>` — optional alternative positioning reference.
+ * `<skdx-popover-content>` floats against this element instead of `<skdx-popover-trigger>`.
+ * Structural only; renders just a `<slot>`. Must be used inside `<skdx-popover>`.
+ *
+ * @example
+ * ```html
+ * <skdx-popover>
+ *   <skdx-popover-anchor>
+ *     <div id="target">…</div>
+ *   </skdx-popover-anchor>
+ *   <skdx-popover-trigger>Open</skdx-popover-trigger>
+ *   <skdx-popover-content>…</skdx-popover-content>
+ * </skdx-popover>
+ * ```
+ */
+export declare class SkdxPopoverAnchor extends LitElement {
+    static styles: import("lit").CSSResult;
+    private root;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-popover-anchor': SkdxPopoverAnchor;
+    }
+}

package/dist/popover/PopoverAnchor.d.ts

@@ -0,0 +1,29 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-popover-anchor>` — optional alternative positioning reference.
+ * `<skdx-popover-content>` floats against this element instead of `<skdx-popover-trigger>`.
+ * Structural only; renders just a `<slot>`. Must be used inside `<skdx-popover>`.
+ *
+ * @example
+ * ```html
+ * <skdx-popover>
+ *   <skdx-popover-anchor>
+ *     <div id="target">…</div>
+ *   </skdx-popover-anchor>
+ *   <skdx-popover-trigger>Open</skdx-popover-trigger>
+ *   <skdx-popover-content>…</skdx-popover-content>
+ * </skdx-popover>
+ * ```
+ */
+export declare class SkdxPopoverAnchor extends LitElement {
+    static styles: import("lit").CSSResult;
+    private root;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-popover-anchor': SkdxPopoverAnchor;
+    }
+}

package/dist/popover/PopoverAnchor.js

@@ -0,0 +1,5 @@
+var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var n=(s,e,i,r)=>{for(var o=r>1?void 0:r?p(e,i):e,l=s.length-1,d;l>=0;l--)(d=s[l])&&(o=(r?d(e,i,o):d(o))||o);return r&&o&&a(e,i,o),o};import{css as c,html as h,LitElement as v}from"lit";import{customElement as m,whenUpgraded as k}from"../internal/define.js";var t=class extends v{constructor(){super(...arguments);this.root=null}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-popover, skdx-popover-root"),!this.root)throw new Error("<skdx-popover-anchor> must be used inside <skdx-popover>.");k(this.root,()=>{this.root&&(this.root.anchorEl=this)})}disconnectedCallback(){this.root?.anchorEl===this&&(this.root.anchorEl=null),super.disconnectedCallback()}render(){return h`<slot></slot>`}};t.styles=c`
+    :host {
+      display: contents;
+    }
+  `,t=n([m("skdx-popover-anchor")],t);export{t as SkdxPopoverAnchor};

package/dist/popover/PopoverArrow.d.cts

@@ -1,9 +1,7 @@
 import { SkdxOverlayArrow } from '../internal/overlay-arrow.cjs';
 /**
- * `<skdx-popover-arrow>` — optional pointer from `<skdx-popover-content>` back
- * at the trigger. Render it inside `<skdx-popover-content>`; it self-positions
- * from the resolved placement (see `data-side` on the content) and so takes
- * no positioning attributes of its own.
+ * An optional pointer from `<skdx-popover-content>` back to the trigger.
+ * Self-positions from the content's placement.
  *
  * @example
  * ```html

package/dist/popover/PopoverArrow.d.ts

@@ -1,9 +1,7 @@
 import { SkdxOverlayArrow } from '../internal/overlay-arrow.js';
 /**
- * `<skdx-popover-arrow>` — optional pointer from `<skdx-popover-content>` back
- * at the trigger. Render it inside `<skdx-popover-content>`; it self-positions
- * from the resolved placement (see `data-side` on the content) and so takes
- * no positioning attributes of its own.
+ * An optional pointer from `<skdx-popover-content>` back to the trigger.
+ * Self-positions from the content's placement.
  *
  * @example
  * ```html

package/dist/popover/PopoverClose.cjs

@@ -1,9 +1,14 @@
-"use strict";var a=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var f=(e,o)=>{for(var r in o)a(e,r,{get:o[r],enumerable:!0})},k=(e,o,r,l)=>{if(o&&typeof o=="object"||typeof o=="function")for(let t of u(o))!b.call(e,t)&&t!==r&&a(e,t,{get:()=>o[t],enumerable:!(l=d(o,t))||l.enumerable});return e};var y=e=>k(a({},"__esModule",{value:!0}),e),m=(e,o,r,l)=>{for(var t=l>1?void 0:l?d(o,r):o,c=e.length-1,p;c>=0;c--)(p=e[c])&&(t=(l?p(o,r,t):p(t))||t);return l&&t&&a(o,r,t),t};var g={};f(g,{SkdxPopoverClose:()=>s});module.exports=y(g);var i=require("lit"),h=require("../internal/closest.cjs"),v=require("../internal/define.cjs"),n=require("../internal/styles.cjs");var s=class extends i.LitElement{constructor(){super(...arguments);this.root=null;this.handleClick=()=>this.root?.setOpen(!1)}connectedCallback(){super.connectedCallback(),this.root=(0,h.closestThroughPortal)(this,"skdx-popover")}render(){return i.html`
-      <button part="close" type="button" @click=${this.handleClick}>
+"use strict";var n=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var f=(e,o)=>{for(var r in o)n(e,r,{get:o[r],enumerable:!0})},g=(e,o,r,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let t of u(o))!k.call(e,t)&&t!==r&&n(e,t,{get:()=>o[t],enumerable:!(s=d(o,t))||s.enumerable});return e};var x=e=>g(n({},"__esModule",{value:!0}),e),m=(e,o,r,s)=>{for(var t=s>1?void 0:s?d(o,r):o,p=e.length-1,c;p>=0;p--)(c=e[p])&&(t=(s?c(o,r,t):c(t))||t);return s&&t&&n(o,r,t),t};var R={};f(R,{SkdxPopoverClose:()=>i});module.exports=x(R);var l=require("lit"),h=require("../internal/aria-label.cjs"),v=require("../internal/closest.cjs"),b=require("../internal/define.cjs"),a=require("../internal/styles.cjs");var i=class extends l.LitElement{constructor(){super(...arguments);this.root=null;this.label=null;this.handleClick=()=>this.root?.setOpen(!1)}connectedCallback(){super.connectedCallback(),this.label??(this.label=(0,h.takeHostAriaLabel)(this)),this.root=(0,v.closestThroughPortal)(this,"skdx-popover, skdx-popover-root")}render(){return l.html`
+      <button
+        part="close"
+        type="button"
+        aria-label=${this.label??l.nothing}
+        @click=${this.handleClick}
+      >
         <slot></slot>
       </button>
-    `}};s.shadowRootOptions=n.delegatesFocusShadowRootOptions,s.styles=[n.resetNativeControl,i.css`
+    `}};i.shadowRootOptions=a.delegatesFocusShadowRootOptions,i.styles=[a.resetNativeControl,l.css`
       :host {
         display: inline-block;
       }
-    `,n.controlBoxOnHost],s=m([(0,v.customElement)("skdx-popover-close","popover","close")],s);0&&(module.exports={SkdxPopoverClose});
+    `,a.controlBoxOnHost],i=m([(0,b.customElement)("skdx-popover-close","popover","close")],i);0&&(module.exports={SkdxPopoverClose});

package/dist/popover/PopoverClose.d.cts

@@ -3,11 +3,17 @@ import { LitElement } from 'lit';
  * `<skdx-popover-close>` — button that closes the closest ancestor
  * `<skdx-popover>` when clicked. Renders inside `<skdx-popover-content>`
  * anywhere you like.
+ *
+ * Give it an `aria-label` when its content is a glyph — it moves to the
+ * inner `<button>`.
+ *
+ * @csspart close - The native `<button>` element inside the shadow root.
  */
 export declare class SkdxPopoverClose extends LitElement {
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
     private root;
+    private label;
     connectedCallback(): void;
     private readonly handleClick;
     render(): import("lit").TemplateResult<1>;

package/dist/popover/PopoverClose.d.ts

@@ -3,11 +3,17 @@ import { LitElement } from 'lit';
  * `<skdx-popover-close>` — button that closes the closest ancestor
  * `<skdx-popover>` when clicked. Renders inside `<skdx-popover-content>`
  * anywhere you like.
+ *
+ * Give it an `aria-label` when its content is a glyph — it moves to the
+ * inner `<button>`.
+ *
+ * @csspart close - The native `<button>` element inside the shadow root.
  */
 export declare class SkdxPopoverClose extends LitElement {
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
     private root;
+    private label;
     connectedCallback(): void;
     private readonly handleClick;
     render(): import("lit").TemplateResult<1>;

package/dist/popover/PopoverClose.js

@@ -1,9 +1,14 @@
-var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var a=(l,e,s,r)=>{for(var o=r>1?void 0:r?p(e,s):e,i=l.length-1,n;i>=0;i--)(n=l[i])&&(o=(r?n(e,s,o):n(o))||o);return r&&o&&c(e,s,o),o};import{css as d,html as m,LitElement as h}from"lit";import{closestThroughPortal as v}from"../internal/closest.js";import{customElement as u}from"../internal/define.js";import{controlBoxOnHost as b,delegatesFocusShadowRootOptions as f,resetNativeControl as k}from"../internal/styles.js";var t=class extends h{constructor(){super(...arguments);this.root=null;this.handleClick=()=>this.root?.setOpen(!1)}connectedCallback(){super.connectedCallback(),this.root=v(this,"skdx-popover")}render(){return m`
-      <button part="close" type="button" @click=${this.handleClick}>
+var p=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var n=(l,e,s,r)=>{for(var o=r>1?void 0:r?c(e,s):e,i=l.length-1,a;i>=0;i--)(a=l[i])&&(o=(r?a(e,s,o):a(o))||o);return r&&o&&p(e,s,o),o};import{css as d,html as m,LitElement as h,nothing as v}from"lit";import{takeHostAriaLabel as b}from"../internal/aria-label.js";import{closestThroughPortal as u}from"../internal/closest.js";import{customElement as k}from"../internal/define.js";import{controlBoxOnHost as f,delegatesFocusShadowRootOptions as g,resetNativeControl as x}from"../internal/styles.js";var t=class extends h{constructor(){super(...arguments);this.root=null;this.label=null;this.handleClick=()=>this.root?.setOpen(!1)}connectedCallback(){super.connectedCallback(),this.label??(this.label=b(this)),this.root=u(this,"skdx-popover, skdx-popover-root")}render(){return m`
+      <button
+        part="close"
+        type="button"
+        aria-label=${this.label??v}
+        @click=${this.handleClick}
+      >
         <slot></slot>
       </button>
-    `}};t.shadowRootOptions=f,t.styles=[k,d`
+    `}};t.shadowRootOptions=g,t.styles=[x,d`
       :host {
         display: inline-block;
       }
-    `,b],t=a([u("skdx-popover-close","popover","close")],t);export{t as SkdxPopoverClose};
+    `,f],t=n([k("skdx-popover-close","popover","close")],t);export{t as SkdxPopoverClose};

package/dist/popover/PopoverContent.cjs

@@ -1,5 +1,5 @@
-"use strict";var u=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var O=Object.prototype.hasOwnProperty;var w=(n,e)=>{for(var t in e)u(n,t,{get:e[t],enumerable:!0})},L=(n,e,t,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of E(e))!O.call(n,o)&&o!==t&&u(n,o,{get:()=>e[o],enumerable:!(i=f(e,o))||i.enumerable});return n};var P=n=>L(u({},"__esModule",{value:!0}),n),a=(n,e,t,i)=>{for(var o=i>1?void 0:i?f(e,t):e,l=n.length-1,p;l>=0;l--)(p=n[l])&&(o=(i?p(e,t,o):p(o))||o);return i&&o&&u(e,t,o),o};var F={};w(F,{SkdxPopoverContent:()=>r});module.exports=P(F);var c=require("lit"),d=require("lit/decorators.js"),g=require("../internal/closest.cjs"),y=require("../internal/define.cjs"),s=require("../internal/dismiss.cjs"),h=require("../internal/positioning.cjs"),b=require("../internal/styles.cjs");var m='a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';function v(n){return Array.from(n.querySelectorAll("*")).filter(e=>e.matches(m)||!!e.shadowRoot?.querySelector(m))}var r=class extends c.LitElement{constructor(){super(...arguments);this.side="bottom";this.align="center";this.sideOffset=4;this.alignOffset=0;this.avoidCollisions=!0;this.collisionPadding=8;this.root=null;this.onRootUpdate=()=>this.syncHostState();this.handleOutsidePointerDown=t=>{if(!this.root?.open)return;let i=t.target;this.contains(i)||(0,s.triggerContains)(this.root.triggerEl,i)||(0,s.dispatchOutside)(this,"pointer-down-outside",t)&&this.root.setOpen(!1)};this.handleOutsideFocus=t=>{if(!this.root?.open)return;let i=(0,s.focusOutsideTarget)(t);!i||this.contains(i)||(0,s.triggerContains)(this.root.triggerEl,i)||(0,s.dispatchOutside)(this,"focus-outside",t)&&this.root.setOpen(!1)};this.handleKeyDown=t=>{if(t.key==="Escape"){t.preventDefault(),(0,s.dispatchEscapeKeyDown)(this,t)&&(this.root?.setOpen(!1),(0,s.dispatchAutoFocus)(this,"close-auto-focus")&&this.root?.focusTrigger());return}t.key==="Tab"&&this.root?.modal&&this.trapFocus(t)}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","dialog"),this.tabIndex=-1,this.root=(0,g.closestThroughPortal)(this,"skdx-popover"),this.root?.addEventListener("skdx-popover-internal-update",this.onRootUpdate),this.addEventListener("keydown",this.handleKeyDown),document.addEventListener("pointerdown",this.handleOutsidePointerDown),document.addEventListener("focusin",this.handleOutsideFocus),this.root&&(this.id=this.root.contentId),this.syncHostState()}disconnectedCallback(){this.root?.removeEventListener("skdx-popover-internal-update",this.onRootUpdate),document.removeEventListener("pointerdown",this.handleOutsidePointerDown),document.removeEventListener("focusin",this.handleOutsideFocus),this.cleanupPosition?.(),super.disconnectedCallback()}firstUpdated(){this.root?.open&&this.activate()}syncHostState(){let t=this.root?.open??!1;this.setAttribute("data-state",t?"open":"closed"),this.setAttribute("data-side",this.side??"bottom"),this.setAttribute("data-align",this.align??"center"),this.hidden=!t,t?this.activate():this.deactivate(),this.requestUpdate()}activate(){this.cleanupPosition||!this.root?.triggerEl||(this.cleanupPosition=(0,h.positionFloating)(this.root.triggerEl,this,{side:this.side,align:this.align,sideOffset:this.sideOffset,alignOffset:this.alignOffset,avoidCollisions:this.avoidCollisions,collisionPadding:this.collisionPadding,collisionBoundary:this.collisionBoundary,component:"popover",arrow:()=>this.querySelector("skdx-popover-arrow")}),this.root.modal&&requestAnimationFrame(()=>(0,s.focusOnOpen)(()=>{if(!(0,s.dispatchAutoFocus)(this,"open-auto-focus"))return;(v(this)[0]??this).focus()})))}deactivate(){this.cleanupPosition?.(),this.cleanupPosition=void 0}trapFocus(t){let i=v(this);if(i.length===0)return;let o=i[0],l=i[i.length-1];t.shiftKey&&document.activeElement===o?(t.preventDefault(),l.focus()):!t.shiftKey&&document.activeElement===l&&(t.preventDefault(),o.focus())}render(){return c.html`<slot></slot>`}};r.styles=[b.hiddenHostStyles,c.css`
+"use strict";var p=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var L=Object.prototype.hasOwnProperty;var A=(n,i)=>{for(var t in i)p(n,t,{get:i[t],enumerable:!0})},D=(n,i,t,e)=>{if(i&&typeof i=="object"||typeof i=="function")for(let o of F(i))!L.call(n,o)&&o!==t&&p(n,o,{get:()=>i[o],enumerable:!(e=b(i,o))||e.enumerable});return n};var T=n=>D(p({},"__esModule",{value:!0}),n),a=(n,i,t,e)=>{for(var o=e>1?void 0:e?b(i,t):i,d=n.length-1,m;d>=0;d--)(m=n[d])&&(o=(e?m(i,t,o):m(o))||o);return e&&o&&p(i,t,o),o};var B={};A(B,{SkdxPopoverContent:()=>s});module.exports=T(B);var c=require("lit"),l=require("lit/decorators.js"),v=require("../internal/aria-part.cjs"),h=require("../internal/body-scroll-lock.cjs"),O=require("../internal/closest.cjs"),k=require("../internal/define.cjs"),r=require("../internal/dismiss.cjs"),u=require("../internal/focus-targets.cjs"),y=require("../internal/outsideInert.cjs"),f=require("../internal/positioning.cjs"),P=require("../internal/styles.cjs"),g=require("../internal/tabbable.cjs"),w=require("../utils/is-dev-mode.cjs");function E(n){return Array.from(n.querySelectorAll("*")).filter(i=>i.matches(g.TABBABLE_SELECTOR)||!!i.shadowRoot?.querySelector(g.TABBABLE_SELECTOR))}var s=class extends c.LitElement{constructor(){super(...arguments);this.side="bottom";this.align="center";this.sideOffset=4;this.alignOffset=0;this.avoidCollisions=!0;this.collisionPadding=8;this.arrowPadding=8;this.hideWhenDetached=!1;this.root=null;this.onRootUpdate=()=>this.syncHostState();this.scrollLocked=!1;this.handleOutsidePointerDown=t=>{if(!this.root?.open)return;let e=t.target;this.contains(e)||(0,r.triggerContains)(this.root.triggerEl,e)||(0,r.dispatchOutside)(this,"pointer-down-outside",t)&&this.root.setOpen(!1)};this.handleOutsideFocus=t=>{if(!this.root?.open)return;let e=(0,r.focusOutsideTarget)(t);!e||this.contains(e)||(0,r.triggerContains)(this.root.triggerEl,e)||(0,r.dispatchOutside)(this,"focus-outside",t)&&this.root.setOpen(!1)};this.handleKeyDown=t=>{if(t.key==="Escape"){t.preventDefault(),(0,r.dispatchEscapeKeyDown)(this,t)&&(this.root?.setOpen(!1),(0,r.dispatchAutoFocus)(this,"close-auto-focus")&&!(0,u.applyFinalFocus)(this.finalFocus,"Popover")&&this.root?.focusTrigger());return}t.key==="Tab"&&(this.root?.modal??!1)!==!1&&this.trapFocus(t)};this.handleSlotChange=()=>this.syncAriaParts()}connectedCallback(){super.connectedCallback(),this.setAttribute("role","dialog"),this.tabIndex=-1,this.root=(0,O.closestThroughPortal)(this,"skdx-popover, skdx-popover-root"),this.root?.addEventListener("skdx-popover-internal-update",this.onRootUpdate),this.addEventListener("keydown",this.handleKeyDown),document.addEventListener("pointerdown",this.handleOutsidePointerDown),document.addEventListener("focusin",this.handleOutsideFocus),this.root&&(this.id?this.root.contentId=this.id:this.id=this.root.contentId),this.syncHostState()}disconnectedCallback(){this.root?.removeEventListener("skdx-popover-internal-update",this.onRootUpdate),document.removeEventListener("pointerdown",this.handleOutsidePointerDown),document.removeEventListener("focusin",this.handleOutsideFocus),this.cleanupPosition?.(),(0,y.setOutsideInert)(this,!1),this.scrollLocked&&(this.scrollLocked=!1,(0,h.unlockBodyScroll)()),super.disconnectedCallback()}firstUpdated(){this.root?.open&&this.activate()}syncHostState(){let t=this.root?.open??!1;this.setAttribute("data-state",t?"open":"closed"),this.setAttribute("data-side",this.side??"bottom"),this.setAttribute("data-align",this.align??"center"),this.syncAriaParts();let e=(this.root?.modal??!1)!==!1;(0,y.setOutsideInert)(this,t&&e);let o=t&&this.root?.modal===!0;o&&!this.scrollLocked?(this.scrollLocked=!0,(0,h.lockBodyScroll)()):!o&&this.scrollLocked&&(this.scrollLocked=!1,(0,h.unlockBodyScroll)()),this.hidden=!t,t?this.activate():this.deactivate(),this.requestUpdate()}syncAriaParts(){(0,v.syncPartIdRef)(this,"aria-labelledby",this.querySelector("skdx-popover-title"),"skdx-popover-content","title"),(0,v.syncPartIdRef)(this,"aria-describedby",this.querySelector("skdx-popover-description"),"skdx-popover-content","description")}activate(){let t=this.root,e=t?.anchorEl??t?.triggerEl;this.cleanupPosition||!t||!e||(this.cleanupPosition=(0,f.positionFloating)(e,this,{side:this.side,align:this.align,sideOffset:this.sideOffset,alignOffset:this.alignOffset,avoidCollisions:this.avoidCollisions,collisionPadding:this.collisionPadding,collisionBoundary:this.collisionBoundary,component:"popover",arrowPadding:this.arrowPadding,hideWhenDetached:this.hideWhenDetached,arrow:()=>this.querySelector("skdx-popover-arrow")}),t.repositionFn=this.cleanupPosition.update,t.modal!==!1&&(this.warnWhenTrappingWithoutClose(),requestAnimationFrame(()=>(0,r.focusOnOpen)(()=>{if(!(0,r.dispatchAutoFocus)(this,"open-auto-focus"))return;(this.initialFocus?(0,u.initialFocusTarget)(this,this.initialFocus,"Popover"):E(this)[0]??this).focus()}))))}warnWhenTrappingWithoutClose(){this.querySelector(".skdx-popover__close, skdx-popover-close")||(0,w.isDevMode)()&&console.warn("[skdx] Popover: `modal` contains focus inside <skdx-popover-content>, but no <skdx-popover-close> was rendered inside it. A user who cannot press Escape \u2014 a touch screen-reader user has no Escape key \u2014 has no way out of the panel. Render a <skdx-popover-close>, or set `modal` to false.")}deactivate(){this.cleanupPosition?.(),this.root&&this.cleanupPosition&&this.root.repositionFn===this.cleanupPosition.update&&(this.root.repositionFn=null),this.cleanupPosition=void 0}trapFocus(t){let e=E(this);if(e.length===0)return;let o=e[0],d=e[e.length-1];t.shiftKey&&document.activeElement===o?(t.preventDefault(),d.focus()):!t.shiftKey&&document.activeElement===d&&(t.preventDefault(),o.focus())}render(){return c.html`<slot @slotchange=${this.handleSlotChange}></slot>`}};s.styles=[P.hiddenHostStyles,c.css`
       :host {
         display: block;
       }
-    `],a([(0,d.property)({type:String})],r.prototype,"side",2),a([(0,d.property)({type:String})],r.prototype,"align",2),a([(0,d.property)({type:Number,attribute:"side-offset"})],r.prototype,"sideOffset",2),a([(0,d.property)({type:Number,attribute:"align-offset"})],r.prototype,"alignOffset",2),a([(0,d.property)({converter:h.optOutBoolean,attribute:"avoid-collisions"})],r.prototype,"avoidCollisions",2),a([(0,d.property)({type:Number,attribute:"collision-padding"})],r.prototype,"collisionPadding",2),a([(0,d.property)({attribute:!1})],r.prototype,"collisionBoundary",2),r=a([(0,y.customElement)("skdx-popover-content","popover","content")],r);0&&(module.exports={SkdxPopoverContent});
+    `],a([(0,l.property)({type:String})],s.prototype,"side",2),a([(0,l.property)({type:String})],s.prototype,"align",2),a([(0,l.property)({type:Number,attribute:"side-offset"})],s.prototype,"sideOffset",2),a([(0,l.property)({type:Number,attribute:"align-offset"})],s.prototype,"alignOffset",2),a([(0,l.property)({converter:f.optOutBoolean,attribute:"avoid-collisions"})],s.prototype,"avoidCollisions",2),a([(0,l.property)({type:Number,attribute:"collision-padding"})],s.prototype,"collisionPadding",2),a([(0,l.property)({attribute:!1})],s.prototype,"collisionBoundary",2),a([(0,l.property)({type:Number,attribute:"arrow-padding"})],s.prototype,"arrowPadding",2),a([(0,l.property)({type:Boolean,attribute:"hide-when-detached"})],s.prototype,"hideWhenDetached",2),a([(0,l.property)({type:String,attribute:"initial-focus"})],s.prototype,"initialFocus",2),a([(0,l.property)({type:String,attribute:"final-focus"})],s.prototype,"finalFocus",2),s=a([(0,k.customElement)("skdx-popover-content","popover","content")],s);0&&(module.exports={SkdxPopoverContent});

package/dist/popover/PopoverContent.d.cts

@@ -1,29 +1,21 @@
 import { LitElement } from 'lit';
 import { type PositionOptions } from '../internal/positioning.cjs';
 /**
- * `<skdx-popover-content>` — the popover's floating panel for the closest
- * ancestor `<skdx-popover>`, positioned relative to the trigger via
- * `@floating-ui/dom` (`strategy: 'fixed'`, so no portal is needed — unlike
- * React's `PopoverPortal`, this content renders in normal document flow).
- * `role`, `id`, and `data-state` are set directly on this host element (not
- * inside shadow DOM) so `aria-controls` on the trigger can target this
- * element's id and arbitrary light-DOM content can be slotted in.
+ * Floating panel positioned via `@floating-ui/dom` (`strategy: 'fixed'`, no
+ * portal) against trigger or anchor. Sets `role`, `id`, `data-state` on host
+ * for `aria-controls` targeting.
  *
- * Closes on Escape or on an outside interaction — pointer-down outside, or
- * focus moving outside — each announced first as `interact-outside` and then
- * as the specific event, so one `preventDefault()` vetoes either path.
- * Escape returns focus to the trigger, announced as `close-auto-focus`.
- * Traps Tab/Shift+Tab within its own focusable descendants while the
- * ancestor popover is `modal`, and announces the initial focus move it makes
- * on open as `open-auto-focus`.
+ * Must be named: `<skdx-popover-title>` wires `aria-labelledby`,
+ * `<skdx-popover-description>` wires `aria-describedby` (only while mounted);
+ * otherwise set `aria-label`.
  *
- * `data-side`/`data-align` start out as the *configured* `side`/`align` and
- * are rewritten by `positioning.ts`'s `positionFloating` with floating-ui's
- * resolved (post-flip/shift) placement on every reposition, as React's
- * `PopperContent` does. The same layer writes the measurement custom
- * properties `--skdx-popover-available-width` / `-available-height` /
- * `-trigger-width` / `-transform-origin` onto this element, so the panel can
- * be sized and animated from CSS without measuring anything by hand.
+ * Closes on Escape or outside interaction, each announced first as
+ * `interact-outside` then specific event so one `preventDefault()` vetoes both.
+ * Traps Tab/Shift+Tab within focusable descendants while `modal`, marking
+ * outside elements `inert`—for screen-reader users, not just keyboard ones.
+ *
+ * `data-side`/`data-align` update on reposition; `hide-when-detached` hides
+ * when anchor scrolls out of view.
  *
  * @fires escape-key-down - Escape was pressed while open. Preventable.
  * @fires pointer-down-outside - A pointer-down landed outside this content while open. Preventable.
@@ -44,41 +36,76 @@ export declare class SkdxPopoverContent extends LitElement {
     alignOffset: number;
     /** Flip/shift to stay within the viewport instead of overflowing it. */
     avoidCollisions: boolean;
+    /** Minimum pixel distance from the collision boundary; the attribute takes one number, the per-side `{ top, right, bottom, left }` form is property-only. */
+    collisionPadding: NonNullable<PositionOptions['collisionPadding']>;
+    /** Element(s) collisions are measured against instead of this panel's clipping ancestors — keeps it inside a scroll container, say. Property-only. */
+    collisionBoundary?: PositionOptions['collisionBoundary'];
     /**
-     * Minimum pixel distance to keep from the collision boundary when avoiding
-     * collisions. The `collision-padding` attribute sets a single number for
-     * every side; the per-side `{ top, right, bottom, left }` form is
-     * property-only, since an attribute cannot carry an object.
+     * Clearance in pixels between the arrow and each end of the panel's edge,
+     * so the arrow cannot ride over a rounded corner.
+     * @default 8
      */
-    collisionPadding: NonNullable<PositionOptions['collisionPadding']>;
+    arrowPadding: number;
     /**
-     * Element (or elements) collisions are measured against instead of this
-     * panel's clipping ancestors — keeps it inside a scroll container or one
-     * pane of a split layout rather than the whole viewport. Property-only: an
-     * `Element` cannot come from an attribute string.
+     * Hides the panel while its anchor is scrolled fully out of view inside a
+     * clipping ancestor, without unmounting it — unmounting would tear down the
+     * focus trap and move focus unasked.
+     * @default false
      */
-    collisionBoundary?: PositionOptions['collisionBoundary'];
+    hideWhenDetached: boolean;
+    /**
+     * CSS selector for the element to focus when the popover opens; live only
+     * while `modal` contains focus, and only when `open-auto-focus` was not
+     * vetoed. Falls back to the first focusable element.
+     * @default undefined — the panel's first focusable element, then the panel itself.
+     */
+    initialFocus?: string;
+    /**
+     * CSS selector for the element to focus when the popover closes, resolved
+     * at document level. Live in every modality, unlike `initialFocus`; applies
+     * only when `close-auto-focus` was not vetoed.
+     * @default undefined — the trigger, or whatever was focused before opening.
+     */
+    finalFocus?: string;
     private root;
     private readonly onRootUpdate;
     private cleanupPosition?;
+    /** Whether this panel currently holds a body-scroll lock, so it releases exactly one. */
+    private scrollLocked;
     connectedCallback(): void;
     disconnectedCallback(): void;
     /**
-     * The trigger registers the element to anchor against in its own
-     * `firstUpdated()`, which has not run yet when this panel's
-     * `connectedCallback` does — so a panel that mounts already open finds no
-     * anchor and, with no open-state change to follow, never positions itself at
-     * all. This is the first tick where the anchor exists; `activate()` is
-     * guarded, so an already-positioned panel is untouched.
+     * The trigger registers its anchor in its own `firstUpdated()`, which
+     * hasn't run yet when this panel's `connectedCallback` does — so a panel
+     * that mounts already open would never position itself without this.
+     * `activate()` is guarded, so an already-positioned panel is untouched.
      */
     protected firstUpdated(): void;
     private syncHostState;
+    /**
+     * Points `aria-labelledby`/`aria-describedby` at the Title/Description parts,
+     * only while they are rendered — a dangling IDREF is worse than none, since
+     * the platform stops there instead of falling through to `aria-label`.
+     */
+    private syncAriaParts;
     private activate;
+    /**
+     * Warns when a focus-containing popover renders without a
+     * `<skdx-popover-close>` inside it.
+     *
+     * A trap with no in-panel exit strands a user who cannot press Escape (a
+     * touch screen-reader user has none, and the trigger is now behind `inert`).
+     * Checked against the DOM rather than the root, since Close is a light-DOM
+     * descendant; mirrors `useRequireCloseWhenTrapping` in the React package.
+     */
+    private warnWhenTrappingWithoutClose;
     private deactivate;
     private readonly handleOutsidePointerDown;
     private readonly handleOutsideFocus;
     private trapFocus;
     private readonly handleKeyDown;
+    /** A Title or Description appearing or disappearing changes what the panel is named by. */
+    private readonly handleSlotChange;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {