@skdx/web-components 0.27.0 → 0.29.0

package/dist/pin-input/slots.js

@@ -0,0 +1 @@
+function i(n,r){return Array.from({length:r},(o,t)=>n[t]??"")}function e(n){return n.join("")}export{e as joinPinSlots,i as toPinSlots};

package/dist/popover/Popover.cjs

@@ -1,5 +1 @@
-"use strict";var p=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var g=(o,e)=>{for(var t in e)p(o,t,{get:e[t],enumerable:!0})},E=(o,e,t,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of C(e))!b.call(o,n)&&n!==t&&p(o,n,{get:()=>e[n],enumerable:!(s=h(e,n))||s.enumerable});return o};var O=o=>E(p({},"__esModule",{value:!0}),o),a=(o,e,t,s)=>{for(var n=s>1?void 0:s?h(e,t):e,d=o.length-1,c;d>=0;d--)(c=o[d])&&(n=(s?c(e,t,n):c(n))||n);return s&&n&&p(e,t,n),n};var y={};g(y,{SkdxPopover:()=>i});module.exports=O(y);var r=require("lit"),l=require("lit/decorators.js"),m=require("../internal/define.cjs"),u=require("../internal/ids.cjs"),f=require("../internal/open-change-complete.cjs"),v=require("../internal/styles.cjs");var i=class extends r.LitElement{constructor(){super(...arguments);this.open=!1;this.defaultOpen=!1;this.modal=!1;this.contentId=(0,u.nextId)("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(t){let s=!this.hasUpdatedOnce;this.hasUpdatedOnce=!0,t.has("open")&&!s&&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")&&!s&&(this.teardownOpenChangeComplete?.(),this.teardownOpenChangeComplete=(0,f.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()}render(){return r.html`<slot></slot>`}};i.styles=[v.hiddenHostStyles,r.css`
-      :host {
-        display: contents;
-      }
-    `],a([(0,l.property)({type:Boolean,reflect:!0})],i.prototype,"open",2),a([(0,l.property)({type:Boolean,attribute:"default-open"})],i.prototype,"defaultOpen",2),a([(0,l.property)({type:Boolean,reflect:!0})],i.prototype,"modal",2),i=a([(0,m.customElement)("skdx-popover")],i);0&&(module.exports={SkdxPopover});
+"use strict";var p=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var v=(r,t)=>{for(var e in t)p(r,e,{get:t[e],enumerable:!0})},w=(r,t,e,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of A(t))!u.call(r,o)&&o!==e&&p(r,o,{get:()=>t[o],enumerable:!(l=h(t,o))||l.enumerable});return r};var R=r=>w(p({},"__esModule",{value:!0}),r),n=(r,t,e,l)=>{for(var o=l>1?void 0:l?h(t,e):t,m=r.length-1,d;m>=0;m--)(d=r[m])&&(o=(l?d(t,e,o):d(o))||o);return l&&o&&p(t,e,o),o};var $={};v($,{SkdxPopover:()=>i});module.exports=R($);var y=require("lit"),s=require("lit/decorators.js"),f=require("../internal/authored.cjs"),c=require("../internal/define.cjs"),a=require("./PopoverAnatomy.cjs"),g=require("./PopoverRoot.cjs");var i=class extends g.SkdxPopoverRoot{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}|${this.role}|${this.openOn}|${this.href??""}`;e!==this._anatomyFilledFor||!(0,f.hasGeneratedContent)(this,a.POPOVER_ANATOMY_GENERATED)?(this._anatomyFilledFor=e,(0,a.fillPopoverAnatomy)(this)):(0,a.refreshPopoverAnatomy)(this)}}connectedCallback(){super.connectedCallback(),queueMicrotask(this.fillAnatomy)}updated(e){this.fillAnatomy(),super.updated(e)}render(){return y.html`<slot @slotchange=${this.fillAnatomy}></slot>`}};n([(0,s.property)({type:String})],i.prototype,"title",2),n([(0,s.property)({type:String})],i.prototype,"description",2),n([(0,s.property)({type:String})],i.prototype,"side",2),n([(0,s.property)({type:String})],i.prototype,"align",2),n([(0,s.property)({type:Boolean,attribute:"show-arrow"})],i.prototype,"showArrow",2),n([(0,s.property)({type:String})],i.prototype,"href",2),i=n([(0,c.customElement)("skdx-popover")],i);0&&(module.exports={SkdxPopover});

package/dist/popover/Popover.d.cts

@@ -1,64 +1,62 @@
-import { LitElement } from 'lit';
+import { type TemplateResult } from 'lit';
+import type { Align, Side } from '../internal/positioning.cjs';
+import { SkdxPopoverRoot } from './PopoverRoot.cjs';
+export type { PopoverModality, SkdxPopoverOpenOn, SkdxPopoverRole } from './PopoverRoot.cjs';
 /**
- * `<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 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).
+ * Popover recipe element that derives a trigger from `slot="trigger"` children and builds a panel with optional title, description, arrow, and close button.
  *
  * @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 the native `HTMLElement.title` tooltip attribute, harmlessly since the host renders no box.
+     * @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; the floating layer may shift it to stay 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;
+    /**
+     * Destination for the derived `<skdx-popover-trigger>`'s anchor. A hover
+     * panel opens on pointer enter and on nothing else, so this link is the route
+     * keyboard and touch users have to the same information.
+     * @default undefined — the trigger renders a `<button>`.
+     */
+    href?: string;
+    /** The combination of inputs 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, gated on a key of the inputs that change its shape. */
+    private readonly fillAnatomy;
     protected updated(changed: Map<string, unknown>): void;
-    /** @internal */
-    setOpen(next: boolean): void;
-    /** @internal */
-    focusTrigger(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/popover/Popover.d.ts

@@ -1,64 +1,62 @@
-import { LitElement } from 'lit';
+import { type TemplateResult } from 'lit';
+import type { Align, Side } from '../internal/positioning.js';
+import { SkdxPopoverRoot } from './PopoverRoot.js';
+export type { PopoverModality, SkdxPopoverOpenOn, SkdxPopoverRole } 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 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).
+ * Popover recipe element that derives a trigger from `slot="trigger"` children and builds a panel with optional title, description, arrow, and close button.
  *
  * @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 the native `HTMLElement.title` tooltip attribute, harmlessly since the host renders no box.
+     * @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; the floating layer may shift it to stay 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;
+    /**
+     * Destination for the derived `<skdx-popover-trigger>`'s anchor. A hover
+     * panel opens on pointer enter and on nothing else, so this link is the route
+     * keyboard and touch users have to the same information.
+     * @default undefined — the trigger renders a `<button>`.
+     */
+    href?: string;
+    /** The combination of inputs 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, gated on a key of the inputs that change its shape. */
+    private readonly fillAnatomy;
     protected updated(changed: Map<string, unknown>): void;
-    /** @internal */
-    setOpen(next: boolean): void;
-    /** @internal */
-    focusTrigger(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

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 o=(s,n,e,l)=>{for(var r=l>1?void 0:l?d(n,e):n,a=s.length-1,p;a>=0;a--)(p=s[a])&&(r=(l?p(n,e,r):p(r))||r);return l&&r&&m(n,e,r),r};import{html as h}from"lit";import{property as i}from"lit/decorators.js";import{hasGeneratedContent as y}from"../internal/authored.js";import{customElement as f}from"../internal/define.js";import{fillPopoverAnatomy as c,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}|${this.role}|${this.openOn}|${this.href??""}`;e!==this._anatomyFilledFor||!y(this,g)?(this._anatomyFilledFor=e,c(this)):A(this)}}connectedCallback(){super.connectedCallback(),queueMicrotask(this.fillAnatomy)}updated(e){this.fillAnatomy(),super.updated(e)}render(){return h`<slot @slotchange=${this.fillAnatomy}></slot>`}};o([i({type:String})],t.prototype,"title",2),o([i({type:String})],t.prototype,"description",2),o([i({type:String})],t.prototype,"side",2),o([i({type:String})],t.prototype,"align",2),o([i({type:Boolean,attribute:"show-arrow"})],t.prototype,"showArrow",2),o([i({type:String})],t.prototype,"href",2),t=o([f("skdx-popover")],t);export{t as SkdxPopover};

package/dist/popover/PopoverAnatomy.cjs

@@ -0,0 +1 @@
+"use strict";var c=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var N=(e,t)=>{for(var n in t)c(e,n,{get:t[n],enumerable:!0})},f=(e,t,n,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of m(t))!v.call(e,i)&&i!==n&&c(e,i,{get:()=>t[i],enumerable:!(o=a(t,i))||o.enumerable});return e};var x=e=>f(c({},"__esModule",{value:!0}),e);var y={};N(y,{POPOVER_ANATOMY_GENERATED:()=>p,fillPopoverAnatomy:()=>b,refreshPopoverAnatomy:()=>S});module.exports=x(y);var u=require("../internal/host-attributes.cjs"),w=require("./PopoverAnchor.cjs"),C=require("./PopoverTrigger.cjs"),T=require("./PopoverContent.cjs"),G=require("./PopoverTitle.cjs"),_=require("./PopoverDescription.cjs"),O=require("./PopoverArrow.cjs"),q=require("./PopoverClose.cjs"),p="data-skdx-popover-generated",E=new Set(["skdx-popover-title","skdx-popover-description","skdx-popover-arrow","skdx-popover-close"]),l="http://www.w3.org/2000/svg";function g(){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 t=document.createElementNS(l,"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 A(e){return e.nodeType!==Node.ELEMENT_NODE||!E.has(e.tagName.toLowerCase())}function h(e,t){return{triggerNodes:e?Array.from(e.childNodes):[],bodyNodes:t?Array.from(t.childNodes).filter(A):[]}}function k(e){let t=[],n=[];for(let o of Array.from(e.childNodes))o.nodeType===Node.ELEMENT_NODE&&o.getAttribute("slot")==="trigger"?(o.removeAttribute("slot"),t.push(o)):n.push(o);return{triggerNodes:t,bodyNodes:n}}function b(e){let t=e.querySelector(`:scope > skdx-popover-trigger[${p}]`),n=e.querySelector(`:scope > skdx-popover-content[${p}]`),{triggerNodes:o,bodyNodes:i}=t||n?h(t,n):k(e),d=[];if(o.length>0){let r=document.createElement("skdx-popover-trigger");r.setAttribute(p,""),e.href!==void 0&&(r.href=e.href),r.append(...o),d.push(r)}let s=document.createElement("skdx-popover-content");if(s.setAttribute(p,""),(0,u.forwardHostAttributes)(e,s),s.side=e.side,s.align=e.align,e.title){let r=document.createElement("skdx-popover-title");r.textContent=e.title,s.append(r)}if(e.description){let r=document.createElement("skdx-popover-description");r.textContent=e.description,s.append(r)}if(s.append(...i),e.showArrow&&s.append(document.createElement("skdx-popover-arrow")),e.role!=="tooltip"&&e.openOn!=="hover"){let r=document.createElement("skdx-popover-close");r.setAttribute("aria-label","Close"),r.append(g()),s.append(r)}d.push(s),e.replaceChildren(...d)}function S(e){let t=e.querySelector(`:scope > skdx-popover-content[${p}]`);if(!t)return;t.side=e.side,t.align=e.align;let n=t.querySelector(":scope > skdx-popover-title");n&&e.title&&(n.textContent=e.title);let o=t.querySelector(":scope > skdx-popover-description");o&&e.description&&(o.textContent=e.description)}0&&(module.exports={POPOVER_ANATOMY_GENERATED,fillPopoverAnatomy,refreshPopoverAnatomy});

package/dist/popover/PopoverAnatomy.d.cts

@@ -0,0 +1,14 @@
+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";
+/** @internal Builds canonical anatomy: trigger, content panel with optional title/description/arrow, and an always-generated close button. */
+export declare function fillPopoverAnatomy(root: SkdxPopover): void;
+/** @internal Refreshes the generated Title/Description text and the Content's `side`/`align` in place. */
+export declare function refreshPopoverAnatomy(root: SkdxPopover): void;

package/dist/popover/PopoverAnatomy.d.ts

@@ -0,0 +1,14 @@
+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";
+/** @internal Builds canonical anatomy: trigger, content panel with optional title/description/arrow, and an always-generated close button. */
+export declare function fillPopoverAnatomy(root: SkdxPopover): void;
+/** @internal Refreshes the generated Title/Description text and the Content's `side`/`align` in place. */
+export declare function refreshPopoverAnatomy(root: SkdxPopover): void;

package/dist/popover/PopoverAnatomy.js

@@ -0,0 +1 @@
+import{forwardHostAttributes as l}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 i="data-skdx-popover-generated",u=new Set(["skdx-popover-title","skdx-popover-description","skdx-popover-arrow","skdx-popover-close"]),d="http://www.w3.org/2000/svg";function a(){let e=document.createElementNS(d,"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(d,"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 m(e){return e.nodeType!==Node.ELEMENT_NODE||!u.has(e.tagName.toLowerCase())}function v(e,t){return{triggerNodes:e?Array.from(e.childNodes):[],bodyNodes:t?Array.from(t.childNodes).filter(m):[]}}function N(e){let t=[],s=[];for(let r of Array.from(e.childNodes))r.nodeType===Node.ELEMENT_NODE&&r.getAttribute("slot")==="trigger"?(r.removeAttribute("slot"),t.push(r)):s.push(r);return{triggerNodes:t,bodyNodes:s}}function S(e){let t=e.querySelector(`:scope > skdx-popover-trigger[${i}]`),s=e.querySelector(`:scope > skdx-popover-content[${i}]`),{triggerNodes:r,bodyNodes:c}=t||s?v(t,s):N(e),p=[];if(r.length>0){let o=document.createElement("skdx-popover-trigger");o.setAttribute(i,""),e.href!==void 0&&(o.href=e.href),o.append(...r),p.push(o)}let n=document.createElement("skdx-popover-content");if(n.setAttribute(i,""),l(e,n),n.side=e.side,n.align=e.align,e.title){let o=document.createElement("skdx-popover-title");o.textContent=e.title,n.append(o)}if(e.description){let o=document.createElement("skdx-popover-description");o.textContent=e.description,n.append(o)}if(n.append(...c),e.showArrow&&n.append(document.createElement("skdx-popover-arrow")),e.role!=="tooltip"&&e.openOn!=="hover"){let o=document.createElement("skdx-popover-close");o.setAttribute("aria-label","Close"),o.append(a()),n.append(o)}p.push(n),e.replaceChildren(...p)}function y(e){let t=e.querySelector(`:scope > skdx-popover-content[${i}]`);if(!t)return;t.side=e.side,t.align=e.align;let s=t.querySelector(":scope > skdx-popover-title");s&&e.title&&(s.textContent=e.title);let r=t.querySelector(":scope > skdx-popover-description");r&&e.description&&(r.textContent=e.description)}export{i as POPOVER_ANATOMY_GENERATED,S as fillPopoverAnatomy,y as refreshPopoverAnatomy};

package/dist/popover/PopoverAnchor.cjs

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

package/dist/popover/PopoverAnchor.d.cts

@@ -0,0 +1,27 @@
+import { LitElement, type TemplateResult } from 'lit';
+/**
+ * Optional alternative positioning reference; `<skdx-popover-content>` floats against this instead of `<skdx-popover-trigger>`.
+ *
+ * @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(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-popover-anchor': SkdxPopoverAnchor;
+    }
+}

package/dist/popover/PopoverAnchor.d.ts

@@ -0,0 +1,27 @@
+import { LitElement, type TemplateResult } from 'lit';
+/**
+ * Optional alternative positioning reference; `<skdx-popover-content>` floats against this instead of `<skdx-popover-trigger>`.
+ *
+ * @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(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-popover-anchor': SkdxPopoverAnchor;
+    }
+}

package/dist/popover/PopoverAnchor.js

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

package/dist/popover/PopoverArrow.d.cts

@@ -1,9 +1,6 @@
 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-positioning from the content's placement.
  *
  * @example
  * ```html

package/dist/popover/PopoverArrow.d.ts

@@ -1,9 +1,6 @@
 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-positioning 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 m=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var R=Object.prototype.hasOwnProperty;var k=(e,t)=>{for(var l in t)n(e,l,{get:t[l],enumerable:!0})},g=(e,t,l,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of f(t))!R.call(e,o)&&o!==l&&n(e,o,{get:()=>t[o],enumerable:!(s=m(t,o))||s.enumerable});return e};var y=e=>g(n({},"__esModule",{value:!0}),e),d=(e,t,l,s)=>{for(var o=s>1?void 0:s?m(t,l):t,p=e.length-1,c;p>=0;p--)(c=e[p])&&(o=(s?c(t,l,o):c(o))||o);return s&&o&&n(t,l,o),o};var O={};k(O,{SkdxPopoverClose:()=>i});module.exports=y(O);var r=require("lit"),h=require("../internal/aria-label.cjs"),u=require("../internal/closest.cjs"),b=require("../internal/define.cjs"),a=require("../internal/styles.cjs"),v=require("./family.cjs");var i=class extends r.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,u.closestThroughPortal)(this,v.POPOVER_FAMILY.selector)}render(){return r.html`
+      <button
+        part="close"
+        type="button"
+        aria-label=${this.label??r.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,r.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=d([(0,b.customElement)("skdx-popover-close","popover","close")],i);0&&(module.exports={SkdxPopoverClose});

package/dist/popover/PopoverClose.d.cts

@@ -1,16 +1,17 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * `<skdx-popover-close>` — button that closes the closest ancestor
- * `<skdx-popover>` when clicked. Renders inside `<skdx-popover-content>`
- * anywhere you like.
+ * Button that closes the closest ancestor `<skdx-popover>` when clicked; give it an `aria-label` when its content is a glyph.
+ *
+ * @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>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/popover/PopoverClose.d.ts

@@ -1,16 +1,17 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * `<skdx-popover-close>` — button that closes the closest ancestor
- * `<skdx-popover>` when clicked. Renders inside `<skdx-popover-content>`
- * anywhere you like.
+ * Button that closes the closest ancestor `<skdx-popover>` when clicked; give it an `aria-label` when its content is a glyph.
+ *
+ * @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>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

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=(r,e,s,l)=>{for(var t=l>1?void 0:l?c(e,s):e,i=r.length-1,a;i>=0;i--)(a=r[i])&&(t=(l?a(e,s,t):a(t))||t);return l&&t&&p(e,s,t),t};import{css as m,html as d,LitElement as h,nothing as u}from"lit";import{takeHostAriaLabel as b}from"../internal/aria-label.js";import{closestThroughPortal as v}from"../internal/closest.js";import{customElement as f}from"../internal/define.js";import{controlBoxOnHost as R,delegatesFocusShadowRootOptions as k,resetNativeControl as g}from"../internal/styles.js";import{POPOVER_FAMILY as y}from"./family.js";var o=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=v(this,y.selector)}render(){return d`
+      <button
+        part="close"
+        type="button"
+        aria-label=${this.label??u}
+        @click=${this.handleClick}
+      >
         <slot></slot>
       </button>
-    `}};t.shadowRootOptions=f,t.styles=[k,d`
+    `}};o.shadowRootOptions=k,o.styles=[g,m`
       :host {
         display: inline-block;
       }
-    `,b],t=a([u("skdx-popover-close","popover","close")],t);export{t as SkdxPopoverClose};
+    `,R],o=n([f("skdx-popover-close","popover","close")],o);export{o 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 u=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var T=Object.prototype.hasOwnProperty;var D=(n,s)=>{for(var t in s)u(n,t,{get:s[t],enumerable:!0})},A=(n,s,t,e)=>{if(s&&typeof s=="object"||typeof s=="function")for(let o of k(s))!T.call(n,o)&&o!==t&&u(n,o,{get:()=>s[o],enumerable:!(e=E(s,o))||e.enumerable});return n};var M=n=>A(u({},"__esModule",{value:!0}),n),a=(n,s,t,e)=>{for(var o=e>1?void 0:e?E(s,t):s,d=n.length-1,y;d>=0;d--)(y=n[d])&&(o=(e?y(s,t,o):y(o))||o);return e&&o&&u(s,t,o),o};var R={};D(R,{SkdxPopoverContent:()=>r});module.exports=M(R);var h=require("lit"),l=require("lit/decorators.js"),m=require("../internal/aria-part.cjs"),p=require("../internal/body-scroll-lock.cjs"),P=require("../internal/closest.cjs"),O=require("../internal/define.cjs"),w=require("../internal/dev-mode.cjs"),i=require("../internal/dismiss.cjs"),f=require("../internal/focus-targets.cjs"),g=require("../internal/outsideInert.cjs"),c=require("../internal/positioning.cjs"),F=require("../internal/styles.cjs"),b=require("../internal/tabbable.cjs"),v=require("./family.cjs");function L(n){return Array.from(n.querySelectorAll("*")).filter(s=>s.matches(b.TABBABLE_SELECTOR)||!!s.shadowRoot?.querySelector(b.TABBABLE_SELECTOR))}var r=class extends h.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.layer={insideElements:()=>[this,this.root?.triggerEl]};this.wasOpen=!1;this.previouslyFocused=null;this.handlePointerEnter=t=>{!this.hoverable||t.pointerType==="touch"||this.root?.cancelClose()};this.handlePointerLeave=t=>{!this.hoverable||t.pointerType==="touch"||this.root?.closeDelayed()};this.handleOutsidePointerDown=t=>{if(!this.root?.open)return;let e=t.target;this.contains(e)||(0,i.triggerContains)(this.root.triggerEl,e)||(0,i.dispatchOutside)(this,"pointer-down-outside",t)&&this.root.setOpen(!1)};this.handleOutsideFocus=t=>{if(!this.root?.open)return;let e=(0,i.focusOutsideTarget)(t);!e||this.contains(e)||(0,i.triggerContains)(this.root.triggerEl,e)||(0,i.dispatchOutside)(this,"focus-outside",t)&&this.root.setOpen(!1)};this.handleEscape=t=>{(0,i.dispatchEscapeKeyDown)(this,t)&&this.root?.setOpen(!1)};this.handleKeyDown=t=>{this.root?.open&&((0,i.handleEscapeKeyDown)(t,this.layer,this.handleEscape)||t.key==="Tab"&&(this.root?.modal??"none")!=="none"&&this.contains(document.activeElement)&&this.trapFocus(t))};this.handleSlotChange=()=>this.syncAriaParts()}get hoverMode(){return this.root?.openOn==="hover"}get hoverable(){return this.hoverMode&&this.root?.hoverableContentDisabled===!1}get isTooltip(){return this.root?.role==="tooltip"}connectedCallback(){super.connectedCallback(),this.root=(0,P.closestThroughPortal)(this,v.POPOVER_FAMILY.selector),this.setAttribute("role",this.isTooltip?"tooltip":"dialog"),this.root?.addEventListener(v.POPOVER_FAMILY.event,this.onRootUpdate),this.addEventListener("pointerenter",this.handlePointerEnter),this.addEventListener("pointerleave",this.handlePointerLeave),document.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(v.POPOVER_FAMILY.event,this.onRootUpdate),this.removeEventListener("pointerenter",this.handlePointerEnter),this.removeEventListener("pointerleave",this.handlePointerLeave),document.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("pointerdown",this.handleOutsidePointerDown),document.removeEventListener("focusin",this.handleOutsideFocus),this.cleanupPosition?.(),(0,g.setOutsideInert)(this,!1),this.releaseLayer?.(),this.releaseLayer=void 0,this.scrollLocked&&(this.scrollLocked=!1,(0,p.unlockBodyScroll)()),super.disconnectedCallback()}firstUpdated(){this.root?.open&&this.activate()}syncHostState(){let t=this.root?.open??!1;this.setAttribute("role",this.isTooltip?"tooltip":"dialog"),this.setAttribute("data-state",this.root?.dataState??"closed"),this.syncHoverability(),(!t||!this.hasAttribute("data-side"))&&(this.setAttribute("data-side",this.side??"bottom"),this.setAttribute("data-align",this.align??"center")),this.syncAriaParts(),this.syncModalLocks(t),this.applyOpenState(t),this.requestUpdate()}syncHoverability(){let t=this.hoverable;this.toggleAttribute("data-hoverable",t),this.hoverMode?this.style.pointerEvents=t?"auto":"none":this.style.removeProperty("pointer-events")}syncModalLocks(t){let e=(this.root?.modal??"none")!=="none";(0,g.setOutsideInert)(this,t&&e);let o=t&&this.root?.modal==="modal";o&&!this.scrollLocked?(this.scrollLocked=!0,(0,p.lockBodyScroll)()):!o&&this.scrollLocked&&(this.scrollLocked=!1,(0,p.unlockBodyScroll)())}applyOpenState(t){this.hidden=!t,t&&!this.releaseLayer?this.releaseLayer=(0,i.pushDismissLayer)(this.layer):!t&&this.releaseLayer&&(this.releaseLayer(),this.releaseLayer=void 0),t!==this.wasOpen&&(this.wasOpen=t,t?this.previouslyFocused=document.activeElement:!this.isTooltip&&!this.hoverMode&&(0,f.returnFocus)(this.finalFocus,"Popover",this.root?.triggerEl??this.previouslyFocused,(0,i.autoFocusRelay)(this))),t?this.activate():this.deactivate()}syncAriaParts(){(0,m.syncPartIdRef)(this,"aria-labelledby",this.querySelector("skdx-popover-title"),"skdx-popover-content","title"),(0,m.syncPartIdRef)(this,"aria-describedby",this.querySelector("skdx-popover-description"),"skdx-popover-content","description")}updated(t){!this.cleanupPosition||!(0,c.placementChanged)(t)||(this.deactivate(),this.position())}activate(){if(this.cleanupPosition)return;this.position();let t=this.root;!this.cleanupPosition||!t||t.modal==="none"||(this.warnWhenTrappingWithoutClose(),requestAnimationFrame(()=>(0,i.focusOnOpen)(()=>{if(!(0,i.dispatchAutoFocus)(this,"open-auto-focus"))return;let e=this.initialFocus?(0,f.initialFocusTarget)(this,this.initialFocus,"Popover"):L(this)[0]??this;e===this&&(this.tabIndex=-1),e.focus()})))}position(){let t=this.root,e=t?.anchorEl??t?.triggerEl;this.cleanupPosition||!t||!e||(this.cleanupPosition=(0,c.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)}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 "none".')}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=L(this);if(e.length===0){t.preventDefault();return}let o=e[0],d=e[e.length-1];t.shiftKey&&(document.activeElement===o||document.activeElement===this)?(t.preventDefault(),d.focus()):!t.shiftKey&&document.activeElement===d&&(t.preventDefault(),o.focus())}render(){return h.html`<slot @slotchange=${this.handleSlotChange}></slot>`}};r.styles=[F.hiddenHostStyles,h.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,reflect:!0})],r.prototype,"side",2),a([(0,l.property)({type:String,reflect:!0})],r.prototype,"align",2),a([(0,l.property)({type:Number,reflect:!0,attribute:"side-offset"})],r.prototype,"sideOffset",2),a([(0,l.property)({type:Number,reflect:!0,attribute:"align-offset"})],r.prototype,"alignOffset",2),a([(0,l.property)({converter:c.optOutBoolean,attribute:"avoid-collisions"})],r.prototype,"avoidCollisions",2),a([(0,l.property)({type:Number,attribute:"collision-padding"})],r.prototype,"collisionPadding",2),a([(0,l.property)({attribute:!1})],r.prototype,"collisionBoundary",2),a([(0,l.property)({type:Number,attribute:"arrow-padding"})],r.prototype,"arrowPadding",2),a([(0,l.property)({type:Boolean,attribute:"hide-when-detached"})],r.prototype,"hideWhenDetached",2),a([(0,l.property)({type:String,attribute:"initial-focus"})],r.prototype,"initialFocus",2),a([(0,l.property)({type:String,attribute:"final-focus"})],r.prototype,"finalFocus",2),r=a([(0,O.customElement)("skdx-popover-content","popover","content")],r);0&&(module.exports={SkdxPopoverContent});