@skdx/web-components 0.27.0 → 0.28.0

package/dist/floating-panel/FloatingPanel.d.ts

@@ -1,171 +1,101 @@
 import { LitElement } from 'lit';
-/** The panel's top-left corner, in CSS pixels, measured from the top-left of its `boundary`. */
+import './FloatingPanelTrigger.js';
+/** Panel top-left corner position in CSS pixels. */
 export interface FloatingPanelPosition {
     x: number;
     y: number;
 }
-/** The panel's box, in CSS pixels. */
+/** Panel box dimensions in CSS pixels. */
 export interface FloatingPanelSize {
     width: number;
     height: number;
 }
-/**
- * The panel's window state. `default` uses the stored `position`/`size`;
- * `maximized` fills the boundary; `minimized` collapses to whatever height its
- * header needs. Only `default` is directly draggable/resizable in a way the
- * user will see, since the other two override the published geometry.
- */
+/** Panel window state: default (draggable), minimized (collapsed), or maximized (fills boundary). */
 export type FloatingPanelStage = 'default' | 'minimized' | 'maximized';
-/** Which edge or corner an `<skdx-floating-panel-resize-trigger>` pulls. */
+/** Which edge or corner a resize trigger pulls. */
 export type FloatingPanelResizeDirection = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw';
-/** What a release announcement is describing — the gesture handed to `getGestureAnnouncement`. */
+/** Gesture type for the release announcement callback. */
 export type FloatingPanelGesture = 'move' | 'resize';
-/** The panel's geometry at the moment a gesture ended, handed to `getGestureAnnouncement`. */
+/** Panel geometry at the moment a gesture ended. */
 export interface FloatingPanelGeometry {
-    /** Top-left corner, in CSS pixels, rounded. */
+    /** Top-left corner position in CSS pixels, rounded. */
     position: FloatingPanelPosition;
-    /** Width and height, in CSS pixels, rounded. */
+    /** Width and height in CSS pixels, rounded. */
     size: FloatingPanelSize;
 }
-/**
- * The default wording of the release announcement, exported so a
- * `getGestureAnnouncement` can defer to it for the gesture it does not want to
- * re-word. The numbers arrive already rounded.
- */
+/** Default wording for the release announcement with rounded numbers. */
 export declare function gestureAnnouncement(gesture: FloatingPanelGesture, { position, size }: FloatingPanelGeometry): string;
-/**
- * The `<skdx-floating-panel>` `el` belongs to — its nearest ancestor, or, once
- * the panel has been portalled out of the tree, the root the enclosing portal
- * was written inside.
- *
- * `<skdx-floating-panel-portal>` moves `<skdx-floating-panel-content>` into
- * `document.body`, which severs the `closest('skdx-floating-panel')` link every
- * other part relies on. {@link closestThroughPortal} restores it exactly as it
- * does for the other seventeen families: the portal *element* never moves, so
- * the walk resumes there and carries on up. This is a named wrapper rather
- * than a bare call so the parts read the same as before.
- *
- * @internal
- */
+/** @internal Find the `<skdx-floating-panel>` via closest or through portal boundary. */
 export declare function findFloatingPanel(el: Element): SkdxFloatingPanel | null;
 /**
- * `<skdx-floating-panel>` — the Web Components implementation of the shared
- * FloatingPanel contract (see `@skdx/shared`'s `floatingPanelContract`): a
- * draggable, resizable, **non-modal** window. Renders no visible box of its own
- * (`display: contents`) — it owns open state, position, size and stage and
- * hands them to `<skdx-floating-panel-trigger>` / `-portal` / `-content` /
- * `-header` / `-title` / `-close-trigger` / `-resize-trigger` /
- * `-stage-trigger`, which look it up with {@link findFloatingPanel} and
- * re-render on the `skdx-floating-panel-internal-update` event this element
- * dispatches on every change (custom elements have no DI, so the DOM tree
- * itself is the shared context).
+ * Draggable, resizable, non-modal window. Renders no box (`display: contents`),
+ * owns open/position/size/stage state handed to parts. Non-modal—no backdrop,
+ * focus trap, or scroll lock; page behind stays usable. Geometry published via
+ * `--skdx-floating-panel-x/y/width/height` CSS custom properties. Plain
+ * properties like input.checked; derives anatomy unless parts authored.
  *
- * Non-modal is not a default here, it is the point: there is no backdrop, no
- * focus trap, and no scroll lock, so the page behind the panel stays fully
- * usable while it is open. Focus still returns to the trigger on close, but
- * only when the closing panel would otherwise have stranded it.
- *
- * **Geometry is published, never painted.** The panel's box lands on
- * `--skdx-floating-panel-x` / `-y` / `-width` / `-height` on
- * `<skdx-floating-panel-content>`; where the element actually goes is one CSS
- * rule you write.
- *
- * `open`, `position`, `size` and `stage` are plain properties — like a native
- * `<input>`'s `checked`, there is no separate controlled/uncontrolled mode.
- * Each `default-*` seeds its property once on connect and the property is the
- * single source of truth thereafter; a consumer that wants "controlled"
- * behaviour listens for the matching `*-change` event and writes the property
- * back.
- *
- * @example
- * ```html
- * <skdx-floating-panel default-position='{"x":40,"y":40}'>
- *   <skdx-floating-panel-trigger>Open panel</skdx-floating-panel-trigger>
- *   <skdx-floating-panel-portal>
- *     <skdx-floating-panel-content>
- *       <skdx-floating-panel-header aria-label="Drag to move panel">
- *         <skdx-floating-panel-title>Inspector</skdx-floating-panel-title>
- *         <skdx-floating-panel-stage-trigger stage="minimized">Minimize</skdx-floating-panel-stage-trigger>
- *         <skdx-floating-panel-close-trigger>Close</skdx-floating-panel-close-trigger>
- *       </skdx-floating-panel-header>
- *       <p>Panel body.</p>
- *       <skdx-floating-panel-resize-trigger direction="se" aria-label="Resize panel"></skdx-floating-panel-resize-trigger>
- *     </skdx-floating-panel-content>
- *   </skdx-floating-panel-portal>
- * </skdx-floating-panel>
- * ```
- *
- * @fires open-change - Fired with the new open state whenever the panel opens or closes.
- * @fires position-change - Fired with the clamped `{ x, y }` on every drag frame and every arrow-key nudge — not once per gesture. Throttle it yourself if the work is expensive.
- * @fires size-change - Fired with the clamped `{ width, height }` on every resize frame and every arrow-key nudge.
- * @fires stage-change - Fired with the new stage whenever a stage trigger is pressed.
+ * @fires open-change - Fired when panel opens or closes.
+ * @fires open-change-complete - Fired with the new open state once the panel's open or close animation finishes.
+ * @fires position-change - Fired on every drag frame and arrow-key nudge.
+ * @fires size-change - Fired on every resize frame and arrow-key nudge.
+ * @fires position-commit - Fired once when drag gesture settles.
+ * @fires size-commit - Fired once when resize gesture settles.
+ * @fires stage-change - Fired when a stage trigger is pressed.
  */
 export declare class SkdxFloatingPanel extends LitElement {
     static styles: import("lit").CSSResult;
     /**
-     * Whether the panel is open. Listen for `open-change` to observe changes.
+     * Whether the panel is open; listen for `open-change` to observe changes.
      * @default false
      */
     open: boolean;
     /**
-     * Initial open state, for uncontrolled usage. Applied once, on connect, and
-     * only if `open` wasn't already set.
+     * Initial open state for uncontrolled usage.
      * @default false
      */
     defaultOpen: boolean;
     /**
-     * The panel's top-left corner in CSS pixels, measured from the boundary's
-     * top-left. Property-only — an attribute cannot carry an object. Listen for
-     * `position-change`.
+     * Panel's top-left corner in CSS pixels, measured from boundary's top-left.
      * @default { x: 0, y: 0 }
      */
     position: FloatingPanelPosition;
     /**
-     * Where the panel starts, for uncontrolled usage. A JSON object attribute
-     * (Lit's `Object` converter), e.g. `default-position='{"x":96,"y":96}'`.
-     * Applied once, on connect, and only if `position` wasn't already set.
+     * Panel's starting position for uncontrolled usage.
      * @default { x: 0, y: 0 } — the top-left corner of the boundary.
      */
     defaultPosition: FloatingPanelPosition;
     /**
-     * The panel's box in CSS pixels. Property-only. Listen for `size-change`.
+     * Panel's box in CSS pixels.
      * @default { width: 320, height: 240 }
      */
     size: FloatingPanelSize;
     /**
-     * The panel's starting box, for uncontrolled usage. A JSON object attribute,
-     * e.g. `default-size='{"width":320,"height":220}'`. Applied once, on connect.
+     * Panel's starting box for uncontrolled usage.
      * @default { width: 320, height: 240 }
      */
     defaultSize: FloatingPanelSize;
     /**
-     * Smallest box the panel can be resized to. Every resize is clamped to it,
-     * so a consumer never has to defend against a zero-height panel. A JSON
-     * object attribute, e.g. `min-size='{"width":220,"height":120}'`.
+     * Smallest box the panel can be resized to.
      * @default { width: 160, height: 120 }
      */
     minSize: FloatingPanelSize;
     /**
-     * Largest box the panel can be resized to. A JSON object attribute.
+     * Largest box the panel can be resized to.
      * @default { width: Infinity, height: Infinity } — only the boundary limits growth.
      */
     maxSize: FloatingPanelSize;
     /**
-     * Element the panel may not be dragged or resized out of. Position is
-     * measured from this element's top-left corner, so it must be the panel's
-     * containing block for the published geometry to line up. Property-only: an
-     * `Element` cannot come from an attribute string.
-     * @default null — the viewport constrains the panel instead.
+     * Element constraining panel drag and resize bounds.
+     * @default null — the viewport constrains instead
      */
     boundary: Element | null;
     /**
-     * The panel's window state. Listen for `stage-change`.
+     * The panel's current window state; listen for `stage-change` to observe changes.
      * @default 'default' — the panel uses its own position and size.
      */
     stage: FloatingPanelStage;
     /**
-     * The panel's starting window state, for uncontrolled usage. Applied once,
-     * on connect, and only if `stage` wasn't already set.
+     * Panel's starting window state for uncontrolled usage.
      * @default 'default'
      */
     defaultStage: FloatingPanelStage;
@@ -205,21 +135,94 @@ export declare class SkdxFloatingPanel extends LitElement {
      * @default undefined — the built-in English wording ("Panel moved to 40, 25").
      */
     getGestureAnnouncement?: (gesture: FloatingPanelGesture, detail: FloatingPanelGeometry) => string;
-    /** @internal Id `<skdx-floating-panel-content>` takes and the trigger's `aria-controls` points at. */
-    readonly contentId: string;
+    /**
+     * The panel's heading rendered as the Title inside Header. Omitting it withholds Content's `aria-labelledby`; use `aria-label` on this element instead.
+     * Shadows `HTMLElement.title` — harmless here since `:host` is `display: contents`.
+     * @default '' — no Title is derived.
+     */
+    title: string;
+    /**
+     * The window controls the derived Header renders — one StageTrigger per
+     * entry, in order. Property-only: an attribute cannot carry an array.
+     * @default [] — a panel that asked for no controls gets none.
+     */
+    stages: readonly {
+        /** The stage the button switches to; pressing it while the panel is already there restores `'default'`. */
+        stage: FloatingPanelStage;
+        /** Visible button text. Required rather than derived from `stage`, which would bake English into a headless library. */
+        label: string;
+    }[];
+    /**
+     * Whether the derived Header renders a close button. `false` withholds it,
+     * for a panel whose only exit is your own control or a programmatic close.
+     * Defaults to `true`, so `dismissible="false"` — the value, not the
+     * attribute's absence — is how you switch it off.
+     * @default true
+     */
+    dismissible: boolean;
+    /** @internal Id `<skdx-floating-panel-content>` takes and the trigger's `aria-controls` points at. Re-pointed by the anatomy at an `id` forwarded off this host. */
+    contentId: string;
     /** @internal Id `<skdx-floating-panel-title>` takes and Content's `aria-labelledby` points at. */
     readonly titleId: string;
     /** @internal The Trigger host, so dismissal treats the trigger as inside the layer and focus returns there. */
     triggerEl: HTMLElement | null;
     /** @internal The Content host, so the focus return can tell whether the closing panel stranded focus. */
     contentEl: HTMLElement | null;
+    /**
+     * @internal The Title host, registered by `<skdx-floating-panel-title>` on
+     * connect and cleared on disconnect.
+     *
+     * Registration rather than inference: the Title is usually nested inside a
+     * `<skdx-floating-panel-header>`, so Content's own `slotchange` never fires
+     * for it, and Content is portalled away in the general case. Its presence is
+     * what decides whether `aria-labelledby` may be emitted at all — pointing it
+     * at {@link titleId} when nothing claimed that id leaves the panel announcing
+     * as a bare "dialog".
+     */
+    titleEl: HTMLElement | null;
     /** @internal True for the duration of a header drag; surfaces as `data-dragging`. */
     dragging: boolean;
     /** @internal True for the duration of a grip resize; surfaces as `data-resizing`. */
     resizing: boolean;
     private hasUpdatedOnce;
+    /** Cancels a pending `open-change-complete` watch when the next change supersedes it. */
+    private teardownOpenChangeComplete?;
+    private boundsObserver;
+    private windowResizeListener;
+    /**
+     * @internal Latest measured boundary box; `null` until the first measurement.
+     * Read by `<skdx-floating-panel-resize-trigger>` to publish the *effective*
+     * ceiling as `aria-valuemax`.
+     */
+    bounds: FloatingPanelSize | null;
     connectedCallback(): void;
+    /** The `title`/`stages`/`dismissible`/`resizable` combination the generated anatomy was last built for. */
+    private _anatomyFilledFor?;
+    /**
+     * Draws the canonical anatomy into the light DOM. A rebuild replaces the
+     * portalled Content, so it is gated on a key of the inputs that change the
+     * anatomy's *shape*; Title and stage-label text refreshes in place instead.
+     */
+    private readonly fillAnatomy;
+    /**
+     * Two observers, because there are two kinds of boundary: a `ResizeObserver`
+     * on the element when one is given, and a `resize` listener on the window when
+     * one is not — `ResizeObserver` cannot observe the viewport. Either way the
+     * callback re-runs the *same* `getBounds()`, so the watched value and the
+     * gesture-time value can never disagree.
+     */
+    private watchBounds;
+    private unwatchBounds;
+    /**
+     * Re-clamps when the boundary changes underneath a panel that is not being
+     * touched. Without this the panel keeps whatever geometry the last gesture
+     * left it with, so shrinking the boundary strands it partly or wholly outside
+     * the box it is documented never to leave. Guarded on value, so an unchanged
+     * box writes nothing.
+     */
+    private applyBounds;
     protected updated(changed: Map<string, unknown>): void;
+    disconnectedCallback(): void;
     /**
      * Focus restoration, non-modal edition. There is no trap to hand focus back,
      * and stealing it unconditionally would yank the user out of whatever they
@@ -232,8 +235,15 @@ export declare class SkdxFloatingPanel extends LitElement {
     /** @internal Switches stage and dispatches `stage-change`. Refused while `disabled`. */
     setStage(next: FloatingPanelStage): void;
     /**
-     * The box the panel may not leave. Read at gesture time rather than on every
-     * update, so a resizing window or boundary needs no observer.
+     * The box the panel may not leave.
+     *
+     * Still read at gesture time, because that is the SSR-safe path: `moveBy` and
+     * `resizeBy` only ever run from an event handler, where `window` exists and
+     * the boundary has settled. What the gesture-time read cannot do is notice the
+     * boundary shrinking while nothing is happening — a rotated phone, a collapsed
+     * side panel, a window dragged narrower — so the same method is *also* called
+     * from the observers wired up on connect, which re-clamp the panel and publish
+     * the ceiling each resize grip announces as `aria-valuemax`.
      */
     private getBounds;
     private setPosition;

package/dist/floating-panel/FloatingPanel.js

@@ -1,5 +1,5 @@
-var E=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var i=(n,a,e,o)=>{for(var r=o>1?void 0:o?P(a,e):a,h=n.length-1,l;h>=0;h--)(l=n[h])&&(r=(o?l(a,e,r):l(r))||r);return o&&r&&E(a,e,r),r};import{css as S,html as F,LitElement as I}from"lit";import{property as s,state as z}from"lit/decorators.js";import{closestThroughPortal as O}from"../internal/closest.js";import{customElement as x}from"../internal/define.js";import{nextId as y}from"../internal/ids.js";import{optOutBoolean as v}from"../internal/positioning.js";import{announce as M}from"../utils/live-announcer.js";var w='a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';function T(n){(n.matches(w)?n:n.shadowRoot?.querySelector(w)??n).focus({preventScroll:!0})}function A(n,{position:a,size:e}){return n==="move"?`Panel moved to ${a.x}, ${a.y}`:`Panel resized to ${e.width} by ${e.height}`}var m=Object.freeze({x:0,y:0}),b=Object.freeze({width:320,height:240}),B=Object.freeze({width:160,height:120}),G=Object.freeze({width:Number.POSITIVE_INFINITY,height:Number.POSITIVE_INFINITY});function f(n,a,e){return Math.min(Math.max(n,a),e)}function c(n,a,e,o){return f(n,a,Math.max(a,Math.min(e,o)))}function H(n){return O(n,"skdx-floating-panel")}var t=class extends I{constructor(){super(...arguments);this.open=!1;this.defaultOpen=!1;this.position=m;this.defaultPosition=m;this.size=b;this.defaultSize=b;this.minSize=B;this.maxSize=G;this.boundary=null;this.stage="default";this.defaultStage="default";this.draggable=!0;this.resizable=!0;this.step=10;this.disabled=!1;this.contentId=y("skdx-floating-panel-content");this.titleId=y("skdx-floating-panel-title");this.triggerEl=null;this.contentEl=null;this.dragging=!1;this.resizing=!1;this.hasUpdatedOnce=!1}connectedCallback(){super.connectedCallback(),this.defaultOpen&&!this.hasAttribute("open")&&(this.open=!0),this.position===m&&(this.position=this.defaultPosition),this.size===b&&(this.size=this.defaultSize),this.hasAttribute("stage")||(this.stage=this.defaultStage)}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})),this.open||this.restoreFocus()),e.size>0&&this.dispatchEvent(new CustomEvent("skdx-floating-panel-internal-update"))}restoreFocus(){let e=document.activeElement;(!e||e===document.body||this.contentEl?.contains(e))&&this.triggerEl&&T(this.triggerEl)}setOpen(e){this.open!==e&&(this.open=e)}setStage(e){this.disabled||this.stage===e||(this.stage=e,this.dispatchEvent(new CustomEvent("stage-change",{detail:e,bubbles:!0,composed:!0})))}getBounds(){if(this.boundary){let e=this.boundary.getBoundingClientRect();return{width:e.width,height:e.height}}return{width:window.innerWidth,height:window.innerHeight}}setPosition(e){this.position=e,this.dispatchEvent(new CustomEvent("position-change",{detail:e,bubbles:!0,composed:!0}))}setSize(e){this.size=e,this.dispatchEvent(new CustomEvent("size-change",{detail:e,bubbles:!0,composed:!0}))}moveBy(e,o){if(this.disabled||!this.draggable)return;let r=this.getBounds(),h={x:f(this.position.x+e,0,Math.max(0,r.width-this.size.width)),y:f(this.position.y+o,0,Math.max(0,r.height-this.size.height))};(h.x!==this.position.x||h.y!==this.position.y)&&this.setPosition(h)}resizeBy(e,o,r){if(this.disabled||!this.resizable)return;let h=this.getBounds(),{x:l,y:g}=this.position,{width:u,height:d}=this.size;if(e.includes("e")&&(u=c(this.size.width+o,this.minSize.width,this.maxSize.width,h.width-l)),e.includes("w")){let p=l+u;u=c(this.size.width-o,this.minSize.width,this.maxSize.width,p),l=p-u}if(e.includes("s")&&(d=c(this.size.height+r,this.minSize.height,this.maxSize.height,h.height-g)),e.includes("n")){let p=g+d;d=c(this.size.height-r,this.minSize.height,this.maxSize.height,p),g=p-d}(u!==this.size.width||d!==this.size.height)&&this.setSize({width:u,height:d}),(l!==this.position.x||g!==this.position.y)&&this.setPosition({x:l,y:g})}announceRelease(e){let o={position:{x:Math.round(this.position.x),y:Math.round(this.position.y)},size:{width:Math.round(this.size.width),height:Math.round(this.size.height)}};M((this.getGestureAnnouncement??A)(e,o))}render(){return F`<slot></slot>`}};t.styles=S`
+var E=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var i=(a,r,e,n)=>{for(var s=n>1?void 0:n?P(r,e):r,h=a.length-1,l;h>=0;h--)(l=a[h])&&(s=(n?l(r,e,s):l(s))||s);return n&&s&&E(r,e,s),s};import{css as F,html as O,LitElement as S}from"lit";import{property as o,state as v}from"lit/decorators.js";import{hasGeneratedContent as M}from"../internal/authored.js";import{closestThroughPortal as C}from"../internal/closest.js";import{customElement as x}from"../internal/define.js";import{nextId as w}from"../internal/ids.js";import{notifyOpenChangeComplete as I}from"../internal/open-change-complete.js";import{optOutBoolean as b}from"../internal/positioning.js";import{announce as A}from"../utils/live-announcer.js";import{fillFloatingPanelAnatomy as L,FLOATING_PANEL_ANATOMY_GENERATED as B,refreshFloatingPanelAnatomy as T}from"./FloatingPanelAnatomy.js";import"./FloatingPanelTrigger.js";var y='a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';function R(a){(a.matches(y)?a:a.shadowRoot?.querySelector(y)??a).focus({preventScroll:!0})}function G(a,{position:r,size:e}){return a==="move"?`Panel moved to ${r.x}, ${r.y}`:`Panel resized to ${e.width} by ${e.height}`}var f=Object.freeze({x:0,y:0}),z=Object.freeze({width:320,height:240}),N=Object.freeze({width:160,height:120}),_=Object.freeze({width:Number.POSITIVE_INFINITY,height:Number.POSITIVE_INFINITY});function c(a,r,e){return Math.min(Math.max(a,r),e)}function g(a,r,e,n){return c(a,r,Math.max(r,Math.min(e,n)))}function K(a){return C(a,"skdx-floating-panel")}var t=class extends S{constructor(){super(...arguments);this.open=!1;this.defaultOpen=!1;this.position=f;this.defaultPosition=f;this.size=z;this.defaultSize=z;this.minSize=N;this.maxSize=_;this.boundary=null;this.stage="default";this.defaultStage="default";this.draggable=!0;this.resizable=!0;this.step=10;this.disabled=!1;this.title="";this.stages=[];this.dismissible=!0;this.contentId=w("skdx-floating-panel-content");this.titleId=w("skdx-floating-panel-title");this.triggerEl=null;this.contentEl=null;this.titleEl=null;this.dragging=!1;this.resizing=!1;this.hasUpdatedOnce=!1;this.boundsObserver=null;this.windowResizeListener=null;this.bounds=null;this.fillAnatomy=()=>{let e=`${!!this.title}|${this.stages.length}|${this.dismissible}|${this.resizable}`;e!==this._anatomyFilledFor||!M(this,B)?(this._anatomyFilledFor=e,L(this)):T(this)}}connectedCallback(){super.connectedCallback(),this.defaultOpen&&!this.hasAttribute("open")&&(this.open=!0),this.position===f&&(this.position=this.defaultPosition),this.size===z&&(this.size=this.defaultSize),this.hasAttribute("stage")||(this.stage=this.defaultStage),this.watchBounds();let e=this.querySelector("skdx-floating-panel-content")?.id;e&&(this.contentId=e),queueMicrotask(this.fillAnatomy)}watchBounds(){let e=()=>this.applyBounds(this.getBounds());if(e(),this.boundary&&typeof ResizeObserver<"u"){this.boundsObserver=new ResizeObserver(e),this.boundsObserver.observe(this.boundary);return}this.windowResizeListener=e,window.addEventListener("resize",e)}unwatchBounds(){this.boundsObserver?.disconnect(),this.boundsObserver=null,this.windowResizeListener&&window.removeEventListener("resize",this.windowResizeListener),this.windowResizeListener=null}applyBounds(e){this.bounds=e;let n=Math.min(this.size.width,Math.max(this.minSize.width,e.width)),s=Math.min(this.size.height,Math.max(this.minSize.height,e.height));(n!==this.size.width||s!==this.size.height)&&this.setSize({width:n,height:s});let h=c(this.position.x,0,Math.max(0,e.width-n)),l=c(this.position.y,0,Math.max(0,e.height-s));(h!==this.position.x||l!==this.position.y)&&this.setPosition({x:h,y:l}),this.dispatchEvent(new CustomEvent("skdx-floating-panel-internal-update"))}updated(e){this.fillAnatomy();let n=!this.hasUpdatedOnce;this.hasUpdatedOnce=!0,e.has("open")&&!n&&(this.dispatchEvent(new CustomEvent("open-change",{detail:this.open,bubbles:!0,composed:!0})),this.open||this.restoreFocus(),this.teardownOpenChangeComplete?.(),this.teardownOpenChangeComplete=I(()=>this.contentEl,this.open,s=>this.dispatchEvent(new CustomEvent("open-change-complete",{detail:s,bubbles:!0,composed:!0})))),e.has("boundary")&&!n&&(this.unwatchBounds(),this.watchBounds()),e.size>0&&this.dispatchEvent(new CustomEvent("skdx-floating-panel-internal-update"))}disconnectedCallback(){this.teardownOpenChangeComplete?.(),this.unwatchBounds(),super.disconnectedCallback()}restoreFocus(){let e=document.activeElement;(!e||e===document.body||this.contentEl?.contains(e))&&this.triggerEl&&R(this.triggerEl)}setOpen(e){this.open!==e&&(this.open=e)}setStage(e){this.disabled||this.stage===e||(this.stage=e,this.dispatchEvent(new CustomEvent("stage-change",{detail:e,bubbles:!0,composed:!0})))}getBounds(){if(this.boundary){let e=this.boundary.getBoundingClientRect();return{width:e.width,height:e.height}}return{width:window.innerWidth,height:window.innerHeight}}setPosition(e){this.position=e,this.dispatchEvent(new CustomEvent("position-change",{detail:e,bubbles:!0,composed:!0}))}setSize(e){this.size=e,this.dispatchEvent(new CustomEvent("size-change",{detail:e,bubbles:!0,composed:!0}))}moveBy(e,n){if(this.disabled||!this.draggable)return;let s=this.getBounds(),h={x:c(this.position.x+e,0,Math.max(0,s.width-this.size.width)),y:c(this.position.y+n,0,Math.max(0,s.height-this.size.height))};(h.x!==this.position.x||h.y!==this.position.y)&&this.setPosition(h)}resizeBy(e,n,s){if(this.disabled||!this.resizable)return;let h=this.getBounds(),{x:l,y:p}=this.position,{width:u,height:d}=this.size;if(e.includes("e")&&(u=g(this.size.width+n,this.minSize.width,this.maxSize.width,h.width-l)),e.includes("w")){let m=l+u;u=g(this.size.width-n,this.minSize.width,this.maxSize.width,m),l=m-u}if(e.includes("s")&&(d=g(this.size.height+s,this.minSize.height,this.maxSize.height,h.height-p)),e.includes("n")){let m=p+d;d=g(this.size.height-s,this.minSize.height,this.maxSize.height,m),p=m-d}(u!==this.size.width||d!==this.size.height)&&this.setSize({width:u,height:d}),(l!==this.position.x||p!==this.position.y)&&this.setPosition({x:l,y:p})}announceRelease(e){e==="resize"&&this.dispatchEvent(new CustomEvent("size-commit",{detail:this.size,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("position-commit",{detail:this.position,bubbles:!0,composed:!0}));let n={position:{x:Math.round(this.position.x),y:Math.round(this.position.y)},size:{width:Math.round(this.size.width),height:Math.round(this.size.height)}};A((this.getGestureAnnouncement??G)(e,n))}render(){return O`<slot @slotchange=${this.fillAnatomy}></slot>`}};t.styles=F`
     :host {
       display: contents;
     }
-  `,i([s({type:Boolean,reflect:!0})],t.prototype,"open",2),i([s({type:Boolean,attribute:"default-open"})],t.prototype,"defaultOpen",2),i([s({attribute:!1})],t.prototype,"position",2),i([s({type:Object,attribute:"default-position"})],t.prototype,"defaultPosition",2),i([s({attribute:!1})],t.prototype,"size",2),i([s({type:Object,attribute:"default-size"})],t.prototype,"defaultSize",2),i([s({type:Object,attribute:"min-size"})],t.prototype,"minSize",2),i([s({type:Object,attribute:"max-size"})],t.prototype,"maxSize",2),i([s({attribute:!1})],t.prototype,"boundary",2),i([s({type:String,reflect:!0})],t.prototype,"stage",2),i([s({type:String,attribute:"default-stage"})],t.prototype,"defaultStage",2),i([s({converter:v})],t.prototype,"draggable",2),i([s({converter:v})],t.prototype,"resizable",2),i([s({type:Number})],t.prototype,"step",2),i([s({type:Boolean,reflect:!0})],t.prototype,"disabled",2),i([s({attribute:!1})],t.prototype,"getGestureAnnouncement",2),i([z()],t.prototype,"dragging",2),i([z()],t.prototype,"resizing",2),t=i([x("skdx-floating-panel")],t);export{t as SkdxFloatingPanel,H as findFloatingPanel,A as gestureAnnouncement};
+  `,i([o({type:Boolean,reflect:!0})],t.prototype,"open",2),i([o({type:Boolean,attribute:"default-open"})],t.prototype,"defaultOpen",2),i([o({attribute:!1})],t.prototype,"position",2),i([o({type:Object,attribute:"default-position"})],t.prototype,"defaultPosition",2),i([o({attribute:!1})],t.prototype,"size",2),i([o({type:Object,attribute:"default-size"})],t.prototype,"defaultSize",2),i([o({type:Object,attribute:"min-size"})],t.prototype,"minSize",2),i([o({type:Object,attribute:"max-size"})],t.prototype,"maxSize",2),i([o({attribute:!1})],t.prototype,"boundary",2),i([o({type:String,reflect:!0})],t.prototype,"stage",2),i([o({type:String,attribute:"default-stage"})],t.prototype,"defaultStage",2),i([o({converter:b})],t.prototype,"draggable",2),i([o({converter:b})],t.prototype,"resizable",2),i([o({type:Number})],t.prototype,"step",2),i([o({type:Boolean,reflect:!0})],t.prototype,"disabled",2),i([o({attribute:!1})],t.prototype,"getGestureAnnouncement",2),i([o({type:String})],t.prototype,"title",2),i([o({attribute:!1})],t.prototype,"stages",2),i([o({converter:b})],t.prototype,"dismissible",2),i([v()],t.prototype,"dragging",2),i([v()],t.prototype,"resizing",2),t=i([x("skdx-floating-panel")],t);export{t as SkdxFloatingPanel,K as findFloatingPanel,G as gestureAnnouncement};

package/dist/floating-panel/FloatingPanelAnatomy.cjs

@@ -0,0 +1 @@
+"use strict";var p=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var k=(t,e)=>{for(var l in e)p(t,l,{get:e[l],enumerable:!0})},h=(t,e,l,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of A(e))!b.call(t,a)&&a!==l&&p(t,a,{get:()=>e[a],enumerable:!(o=x(e,a))||o.enumerable});return t};var E=t=>h(p({},"__esModule",{value:!0}),t);var N={};k(N,{FLOATING_PANEL_ANATOMY_GENERATED:()=>s,fillFloatingPanelAnatomy:()=>y,hasAuthoredFloatingPanelParts:()=>m,refreshFloatingPanelAnatomy:()=>C});module.exports=E(N);var g=require("../internal/derive.cjs"),u=require("../internal/host-attributes.cjs"),T=require("./FloatingPanelPortal.cjs"),v=require("./FloatingPanelContent.cjs"),w=require("./FloatingPanelHeader.cjs"),G=require("./FloatingPanelTitle.cjs"),_=require("./FloatingPanelStageTrigger.cjs"),q=require("./FloatingPanelCloseTrigger.cjs"),z=require("./FloatingPanelResizeTrigger.cjs"),M=require("../utils/visually-hidden.cjs"),s="data-skdx-floating-panel-generated",P=["skdx-floating-panel-trigger","skdx-floating-panel-portal","skdx-floating-panel-content","skdx-floating-panel-header","skdx-floating-panel-title","skdx-floating-panel-close-trigger","skdx-floating-panel-resize-trigger","skdx-floating-panel-stage-trigger"],d="http://www.w3.org/2000/svg";function S(){let t=document.createElementNS(d,"svg");t.setAttribute("viewBox","0 0 16 16"),t.setAttribute("width","1em"),t.setAttribute("height","1em"),t.setAttribute("fill","none"),t.setAttribute("aria-hidden","true"),t.setAttribute("focusable","false");let e=document.createElementNS(d,"path");return e.setAttribute("d","M4 4l8 8M12 4l-8 8"),e.setAttribute("stroke","currentColor"),e.setAttribute("stroke-width","1.5"),e.setAttribute("stroke-linecap","round"),t.append(e),t}function f(t){return t.querySelector(`:scope > skdx-floating-panel-portal[${s}]`)?.portalHost.querySelector("skdx-floating-panel-content")??null}function m(t){return P.some(e=>(0,g.hasAuthoredPart)(t,e,s))}function y(t){if(m(t))return;let e=f(t),o=Array.from(e?e.childNodes:t.childNodes).filter(n=>!(n.nodeType===Node.ELEMENT_NODE&&n.hasAttribute(s))),a=document.createElement("skdx-floating-panel-portal");a.setAttribute(s,"");let r=document.createElement("skdx-floating-panel-content");(0,u.forwardHostAttributesToContent)(t,r);let i=document.createElement("skdx-floating-panel-header");if(i.setAttribute(s,""),i.setAttribute("aria-label","Drag to move panel"),t.title){let n=document.createElement("skdx-floating-panel-title");n.textContent=t.title,i.append(n)}for(let n of t.stages){let c=document.createElement("skdx-floating-panel-stage-trigger");c.setAttribute("stage",n.stage),c.textContent=n.label,i.append(c)}if(t.dismissible){let n=document.createElement("skdx-floating-panel-close-trigger"),c=document.createElement("skdx-visually-hidden");c.textContent="Close",n.append(c,S()),i.append(n)}if(r.append(i,...o),t.resizable){let n=document.createElement("skdx-floating-panel-resize-trigger");n.setAttribute(s,""),n.setAttribute("direction","se"),n.setAttribute("aria-label","Resize panel"),r.append(n)}a.append(r),t.replaceChildren(a)}function C(t){let l=f(t)?.querySelector(`:scope > skdx-floating-panel-header[${s}]`);if(!l)return;let o=l.querySelector(":scope > skdx-floating-panel-title");o&&t.title&&o.textContent!==t.title&&(o.textContent=t.title);let a=l.querySelectorAll(":scope > skdx-floating-panel-stage-trigger");t.stages.forEach((r,i)=>{let n=a[i];n&&(n.setAttribute("stage",r.stage),n.textContent!==r.label&&(n.textContent=r.label))})}0&&(module.exports={FLOATING_PANEL_ANATOMY_GENERATED,fillFloatingPanelAnatomy,hasAuthoredFloatingPanelParts,refreshFloatingPanelAnatomy});

package/dist/floating-panel/FloatingPanelAnatomy.d.cts

@@ -0,0 +1,30 @@
+import type { SkdxFloatingPanel } from './FloatingPanel.cjs';
+import './FloatingPanelPortal.cjs';
+import './FloatingPanelContent.cjs';
+import './FloatingPanelHeader.cjs';
+import './FloatingPanelTitle.cjs';
+import './FloatingPanelStageTrigger.cjs';
+import './FloatingPanelCloseTrigger.cjs';
+import './FloatingPanelResizeTrigger.cjs';
+import '../utils/visually-hidden.cjs';
+/** @internal Marks an element this module generated — on the Portal, and on the Header and grip inside Content. */
+export declare const FLOATING_PANEL_ANATOMY_GENERATED = "data-skdx-floating-panel-generated";
+/** @internal Whether the consumer hand-composed any of this family's own parts as a direct child. */
+export declare function hasAuthoredFloatingPanelParts(root: Element): boolean;
+/**
+ * Builds a portalled Content with Header (Title, stage triggers gated on `stages`,
+ * close button gated on `dismissible`), body, and se resize grip gated on
+ * `resizable`. Non-modal: no Overlay, focus trap, or scroll lock.
+ * Body content from `root` children on build, from *previous* generated Content
+ * on rebuild. Host's `id`, `class`, `style`, `data-*`, `aria-*` move to Content;
+ * `aria-label` provides name when no `title`.
+ * @internal
+ */
+export declare function fillFloatingPanelAnatomy(root: SkdxFloatingPanel): void;
+/**
+ * Updates Title text and stage trigger labels in place without structural rebuild.
+ * `:scope >` targets direct child Header (Content renders shadow slot, never moves
+ * children). No-op if anatomy not generated.
+ * @internal
+ */
+export declare function refreshFloatingPanelAnatomy(root: SkdxFloatingPanel): void;

package/dist/floating-panel/FloatingPanelAnatomy.d.ts

@@ -0,0 +1,30 @@
+import type { SkdxFloatingPanel } from './FloatingPanel.js';
+import './FloatingPanelPortal.js';
+import './FloatingPanelContent.js';
+import './FloatingPanelHeader.js';
+import './FloatingPanelTitle.js';
+import './FloatingPanelStageTrigger.js';
+import './FloatingPanelCloseTrigger.js';
+import './FloatingPanelResizeTrigger.js';
+import '../utils/visually-hidden.js';
+/** @internal Marks an element this module generated — on the Portal, and on the Header and grip inside Content. */
+export declare const FLOATING_PANEL_ANATOMY_GENERATED = "data-skdx-floating-panel-generated";
+/** @internal Whether the consumer hand-composed any of this family's own parts as a direct child. */
+export declare function hasAuthoredFloatingPanelParts(root: Element): boolean;
+/**
+ * Builds a portalled Content with Header (Title, stage triggers gated on `stages`,
+ * close button gated on `dismissible`), body, and se resize grip gated on
+ * `resizable`. Non-modal: no Overlay, focus trap, or scroll lock.
+ * Body content from `root` children on build, from *previous* generated Content
+ * on rebuild. Host's `id`, `class`, `style`, `data-*`, `aria-*` move to Content;
+ * `aria-label` provides name when no `title`.
+ * @internal
+ */
+export declare function fillFloatingPanelAnatomy(root: SkdxFloatingPanel): void;
+/**
+ * Updates Title text and stage trigger labels in place without structural rebuild.
+ * `:scope >` targets direct child Header (Content renders shadow slot, never moves
+ * children). No-op if anatomy not generated.
+ * @internal
+ */
+export declare function refreshFloatingPanelAnatomy(root: SkdxFloatingPanel): void;

package/dist/floating-panel/FloatingPanelAnatomy.js

@@ -0,0 +1 @@
+import{hasAuthoredPart as g}from"../internal/derive.js";import{forwardHostAttributesToContent as u}from"../internal/host-attributes.js";import"./FloatingPanelPortal.js";import"./FloatingPanelContent.js";import"./FloatingPanelHeader.js";import"./FloatingPanelTitle.js";import"./FloatingPanelStageTrigger.js";import"./FloatingPanelCloseTrigger.js";import"./FloatingPanelResizeTrigger.js";import"../utils/visually-hidden.js";var o="data-skdx-floating-panel-generated",f=["skdx-floating-panel-trigger","skdx-floating-panel-portal","skdx-floating-panel-content","skdx-floating-panel-header","skdx-floating-panel-title","skdx-floating-panel-close-trigger","skdx-floating-panel-resize-trigger","skdx-floating-panel-stage-trigger"],p="http://www.w3.org/2000/svg";function m(){let t=document.createElementNS(p,"svg");t.setAttribute("viewBox","0 0 16 16"),t.setAttribute("width","1em"),t.setAttribute("height","1em"),t.setAttribute("fill","none"),t.setAttribute("aria-hidden","true"),t.setAttribute("focusable","false");let n=document.createElementNS(p,"path");return n.setAttribute("d","M4 4l8 8M12 4l-8 8"),n.setAttribute("stroke","currentColor"),n.setAttribute("stroke-width","1.5"),n.setAttribute("stroke-linecap","round"),t.append(n),t}function d(t){return t.querySelector(`:scope > skdx-floating-panel-portal[${o}]`)?.portalHost.querySelector("skdx-floating-panel-content")??null}function x(t){return f.some(n=>g(t,n,o))}function F(t){if(x(t))return;let n=d(t),i=Array.from(n?n.childNodes:t.childNodes).filter(e=>!(e.nodeType===Node.ELEMENT_NODE&&e.hasAttribute(o))),s=document.createElement("skdx-floating-panel-portal");s.setAttribute(o,"");let a=document.createElement("skdx-floating-panel-content");u(t,a);let l=document.createElement("skdx-floating-panel-header");if(l.setAttribute(o,""),l.setAttribute("aria-label","Drag to move panel"),t.title){let e=document.createElement("skdx-floating-panel-title");e.textContent=t.title,l.append(e)}for(let e of t.stages){let r=document.createElement("skdx-floating-panel-stage-trigger");r.setAttribute("stage",e.stage),r.textContent=e.label,l.append(r)}if(t.dismissible){let e=document.createElement("skdx-floating-panel-close-trigger"),r=document.createElement("skdx-visually-hidden");r.textContent="Close",e.append(r,m()),l.append(e)}if(a.append(l,...i),t.resizable){let e=document.createElement("skdx-floating-panel-resize-trigger");e.setAttribute(o,""),e.setAttribute("direction","se"),e.setAttribute("aria-label","Resize panel"),a.append(e)}s.append(a),t.replaceChildren(s)}function T(t){let c=d(t)?.querySelector(`:scope > skdx-floating-panel-header[${o}]`);if(!c)return;let i=c.querySelector(":scope > skdx-floating-panel-title");i&&t.title&&i.textContent!==t.title&&(i.textContent=t.title);let s=c.querySelectorAll(":scope > skdx-floating-panel-stage-trigger");t.stages.forEach((a,l)=>{let e=s[l];e&&(e.setAttribute("stage",a.stage),e.textContent!==a.label&&(e.textContent=a.label))})}export{o as FLOATING_PANEL_ANATOMY_GENERATED,F as fillFloatingPanelAnatomy,x as hasAuthoredFloatingPanelParts,T as refreshFloatingPanelAnatomy};

package/dist/floating-panel/FloatingPanelCloseTrigger.d.cts

@@ -1,17 +1,7 @@
 import { LitElement } from 'lit';
 /**
- * `<skdx-floating-panel-close-trigger>` — button that closes the panel,
- * returning focus to `<skdx-floating-panel-trigger>`. Usually lives in the
- * header next to the stage triggers, but works anywhere inside
- * `<skdx-floating-panel-content>`.
- *
- * Unaffected by `disabled`, which freezes the panel's *geometry* rather than
- * sealing it shut — an inert panel you cannot dismiss is a trap.
- *
- * An `aria-label` written on this tag is moved onto the inner `<button>`, where
- * the button role actually lives — left on the host it named nothing (the host
- * has no role at all, which is a prohibited use of `aria-label`).
- *
+ * `<skdx-floating-panel-close-trigger>` — closes the panel and returns focus to the trigger.
+ * Unaffected by `disabled` (which freezes geometry, not closure). `aria-label` moves from host to inner `<button>`.
  * Must be used inside `<skdx-floating-panel>`.
  *
  * @csspart close-trigger - The native `<button>` element inside the shadow root.

package/dist/floating-panel/FloatingPanelCloseTrigger.d.ts

@@ -1,17 +1,7 @@
 import { LitElement } from 'lit';
 /**
- * `<skdx-floating-panel-close-trigger>` — button that closes the panel,
- * returning focus to `<skdx-floating-panel-trigger>`. Usually lives in the
- * header next to the stage triggers, but works anywhere inside
- * `<skdx-floating-panel-content>`.
- *
- * Unaffected by `disabled`, which freezes the panel's *geometry* rather than
- * sealing it shut — an inert panel you cannot dismiss is a trap.
- *
- * An `aria-label` written on this tag is moved onto the inner `<button>`, where
- * the button role actually lives — left on the host it named nothing (the host
- * has no role at all, which is a prohibited use of `aria-label`).
- *
+ * `<skdx-floating-panel-close-trigger>` — closes the panel and returns focus to the trigger.
+ * Unaffected by `disabled` (which freezes geometry, not closure). `aria-label` moves from host to inner `<button>`.
  * Must be used inside `<skdx-floating-panel>`.
  *
  * @csspart close-trigger - The native `<button>` element inside the shadow root.

package/dist/floating-panel/FloatingPanelContent.cjs

@@ -1,5 +1,5 @@
-"use strict";var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var v=(n,o)=>{for(var t in o)d(n,t,{get:o[t],enumerable:!0})},x=(n,o,t,i)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of m(o))!y.call(n,e)&&e!==t&&d(n,e,{get:()=>o[e],enumerable:!(i=c(o,e))||i.enumerable});return n};var E=n=>x(d({},"__esModule",{value:!0}),n),p=(n,o,t,i)=>{for(var e=i>1?void 0:i?c(o,t):o,l=n.length-1,h;l>=0;l--)(h=n[l])&&(e=(i?h(o,t,e):h(e))||e);return i&&e&&d(o,t,e),e};var b={};v(b,{SkdxFloatingPanelContent:()=>r});module.exports=E(b);var a=require("lit"),u=require("../internal/define.cjs"),s=require("../internal/dismiss.cjs"),g=require("../internal/styles.cjs"),f=require("./FloatingPanel.cjs");var r=class extends a.LitElement{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this.syncHostState();this.handleDocumentKeyDown=t=>{t.key!=="Escape"||!this.root?.open||(0,s.dispatchEscapeKeyDown)(this,t)&&this.root.setOpen(!1)};this.handleOutsidePointerDown=t=>{let i=this.root;if(!i?.open)return;let e=t.target;e&&(this.contains(e)||i.triggerEl?.contains(e)||(0,s.dispatchOutside)(this,"pointer-down-outside",t)&&i.setOpen(!1))};this.handleOutsideFocus=t=>{let i=this.root;if(!i?.open)return;let e=(0,s.focusOutsideTarget)(t);!e||this.contains(e)||i.triggerEl?.contains(e)||(0,s.dispatchOutside)(this,"focus-outside",t)}}connectedCallback(){if(super.connectedCallback(),this.root??(this.root=(0,f.findFloatingPanel)(this)),!this.root)throw new Error("<skdx-floating-panel-content> must be used inside <skdx-floating-panel>.");this.root.contentEl=this,this.root.addEventListener("skdx-floating-panel-internal-update",this.onRootUpdate),document.addEventListener("keydown",this.handleDocumentKeyDown),document.addEventListener("pointerdown",this.handleOutsidePointerDown,!0),document.addEventListener("focusin",this.handleOutsideFocus,!0),this.syncHostState()}disconnectedCallback(){this.root?.removeEventListener("skdx-floating-panel-internal-update",this.onRootUpdate),this.root?.contentEl===this&&(this.root.contentEl=null),document.removeEventListener("keydown",this.handleDocumentKeyDown),document.removeEventListener("pointerdown",this.handleOutsidePointerDown,!0),document.removeEventListener("focusin",this.handleOutsideFocus,!0),super.disconnectedCallback()}syncHostState(){let t=this.root;if(!t)return;this.id=t.contentId,this.setAttribute("role","dialog"),this.setAttribute("aria-modal","false"),this.setAttribute("aria-labelledby",t.titleId),this.setAttribute("data-state",t.open?"open":"closed"),this.setAttribute("data-stage",t.stage),this.toggleAttribute("data-dragging",t.dragging),this.toggleAttribute("data-resizing",t.resizing),this.toggleAttribute("data-disabled",t.disabled);let i=t.stage==="maximized"?{x:"0px",y:"0px",width:"100%",height:"100%"}:{x:`${t.position.x}px`,y:`${t.position.y}px`,width:`${t.size.width}px`,height:t.stage==="minimized"?"auto":`${t.size.height}px`};this.style.setProperty("--skdx-floating-panel-x",i.x),this.style.setProperty("--skdx-floating-panel-y",i.y),this.style.setProperty("--skdx-floating-panel-width",i.width),this.style.setProperty("--skdx-floating-panel-height",i.height),this.hidden=!t.open}render(){return a.html`<slot></slot>`}};r.styles=[a.css`
+"use strict";var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var x=(n,o)=>{for(var t in o)d(n,t,{get:o[t],enumerable:!0})},E=(n,o,t,i)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of y(o))!v.call(n,e)&&e!==t&&d(n,e,{get:()=>o[e],enumerable:!(i=c(o,e))||i.enumerable});return n};var b=n=>E(d({},"__esModule",{value:!0}),n),p=(n,o,t,i)=>{for(var e=i>1?void 0:i?c(o,t):o,l=n.length-1,h;l>=0;l--)(h=n[l])&&(e=(i?h(o,t,e):h(e))||e);return i&&e&&d(o,t,e),e};var w={};x(w,{SkdxFloatingPanelContent:()=>r});module.exports=b(w);var a=require("lit"),u=require("../internal/aria-part.cjs"),g=require("../internal/define.cjs"),s=require("../internal/dismiss.cjs"),f=require("../internal/styles.cjs"),m=require("./FloatingPanel.cjs");var r=class extends a.LitElement{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this.syncHostState();this.handleDocumentKeyDown=t=>{t.key!=="Escape"||!this.root?.open||(0,s.dispatchEscapeKeyDown)(this,t)&&this.root.setOpen(!1)};this.handleOutsidePointerDown=t=>{let i=this.root;if(!i?.open)return;let e=t.target;e&&(this.contains(e)||i.triggerEl?.contains(e)||(0,s.dispatchOutside)(this,"pointer-down-outside",t)&&i.setOpen(!1))};this.handleOutsideFocus=t=>{let i=this.root;if(!i?.open)return;let e=(0,s.focusOutsideTarget)(t);!e||this.contains(e)||i.triggerEl?.contains(e)||(0,s.dispatchOutside)(this,"focus-outside",t)}}connectedCallback(){if(super.connectedCallback(),this.root??(this.root=(0,m.findFloatingPanel)(this)),!this.root)throw new Error("<skdx-floating-panel-content> must be used inside <skdx-floating-panel>.");this.root.contentEl=this,this.root.addEventListener("skdx-floating-panel-internal-update",this.onRootUpdate),document.addEventListener("keydown",this.handleDocumentKeyDown),document.addEventListener("pointerdown",this.handleOutsidePointerDown,!0),document.addEventListener("focusin",this.handleOutsideFocus,!0),this.syncHostState()}disconnectedCallback(){this.root?.removeEventListener("skdx-floating-panel-internal-update",this.onRootUpdate),this.root?.contentEl===this&&(this.root.contentEl=null),document.removeEventListener("keydown",this.handleDocumentKeyDown),document.removeEventListener("pointerdown",this.handleOutsidePointerDown,!0),document.removeEventListener("focusin",this.handleOutsideFocus,!0),super.disconnectedCallback()}syncHostState(){let t=this.root;if(!t)return;this.id?t.contentId=this.id:this.id=t.contentId,this.setAttribute("role","dialog"),this.setAttribute("aria-modal","false"),(0,u.syncPartIdRef)(this,"aria-labelledby",t.titleEl,"skdx-floating-panel-content","title"),this.setAttribute("data-state",t.open?"open":"closed"),this.setAttribute("data-stage",t.stage),this.toggleAttribute("data-dragging",t.dragging),this.toggleAttribute("data-resizing",t.resizing),this.toggleAttribute("data-disabled",t.disabled);let i=t.stage==="maximized"?{x:"0px",y:"0px",width:"100%",height:"100%"}:{x:`${t.position.x}px`,y:`${t.position.y}px`,width:`${t.size.width}px`,height:t.stage==="minimized"?"auto":`${t.size.height}px`};this.style.setProperty("--skdx-floating-panel-x",i.x),this.style.setProperty("--skdx-floating-panel-y",i.y),this.style.setProperty("--skdx-floating-panel-width",i.width),this.style.setProperty("--skdx-floating-panel-height",i.height),this.hidden=!t.open}render(){return a.html`<slot></slot>`}};r.styles=[a.css`
       :host {
         display: block;
       }
-    `,g.hiddenHostStyles],r=p([(0,u.customElement)("skdx-floating-panel-content","floating-panel","content")],r);0&&(module.exports={SkdxFloatingPanelContent});
+    `,f.hiddenHostStyles],r=p([(0,g.customElement)("skdx-floating-panel-content","floating-panel","content")],r);0&&(module.exports={SkdxFloatingPanelContent});

package/dist/floating-panel/FloatingPanelContent.d.cts

@@ -1,40 +1,12 @@
 import { LitElement } from 'lit';
 /**
- * `<skdx-floating-panel-content>` — the movable surface: `role="dialog"` with
- * **`aria-modal="false"`**, named by `<skdx-floating-panel-title>` through
- * `aria-labelledby`. It traps nothing, locks nothing, and covers nothing — the
- * page behind it keeps working, which is the whole reason to reach for a panel
- * instead of a dialog.
- *
- * Closes on Escape or on pointer-down outside itself and its trigger, each
- * announced first as `interact-outside` and then as the specific
- * `escape-key-down` / `pointer-down-outside`, so one `preventDefault()` vetoes
- * the dismissal either way. Focus moving outside is announced as
- * `focus-outside` but **never closes the panel**: a non-modal window that
- * vanished when you tabbed back to the page would be unusable.
- *
- * Publishes its geometry as `--skdx-floating-panel-x` / `-y` / `-width` /
- * `-height` so a consumer can position it entirely from CSS, and exposes
- * `data-state`, `data-stage`, `data-dragging`, `data-resizing` and
- * `data-disabled`. At `stage="maximized"` the published width and height
- * become `100%` rather than a measured pixel value — nothing has to observe
- * the boundary for the panel to fill it. At `stage="minimized"` the height
- * becomes `auto`, collapsing the panel to whatever its header needs.
- *
- * `role`, `aria-modal`, `aria-labelledby`, `id` and every `data-*` live on this
- * **host** element rather than inside shadow DOM, because an IDREF can't cross
- * a shadow boundary: the slotted `<skdx-floating-panel-title>` shares this
- * element's light-DOM scope, and the trigger's `aria-controls` has to be able
- * to point here. Hides itself with `hidden` while closed rather than
- * unmounting, so `force-mount` would be a no-op and is not offered.
- *
- * Must be used inside `<skdx-floating-panel>` (directly, or inside its
- * `<skdx-floating-panel-portal>`).
- *
- * @fires escape-key-down - Escape was pressed while open (detail: the KeyboardEvent). Preventable.
- * @fires pointer-down-outside - A pointer-down landed outside this content and the trigger while open (detail: the PointerEvent). Preventable.
- * @fires focus-outside - Focus moved outside this content and the trigger while open (detail: the original focusin). Reported only — a non-modal panel does not close on it.
- * @fires interact-outside - Either kind of outside interaction, fired immediately before the specific event so one handler can veto both. Preventable.
+ * Movable surface; `role="dialog"` with `aria-modal="false"`, named by `<skdx-floating-panel-title>` via `aria-labelledby`.
+ * Non-modal (page behind keeps working). Closes on Escape / pointer-down-outside (both preventable); focus-outside reported only (never closes).
+ * Geometry as `--skdx-floating-panel-*` CSS vars; exposes `data-state` / `data-stage` / `data-dragging` / `data-resizing` / `data-disabled`.
+ * @fires escape-key-down - Fires on Escape while open; preventDefault() keeps the panel open.
+ * @fires pointer-down-outside - Fires on pointer-down outside the panel and trigger; preventDefault() keeps it open.
+ * @fires focus-outside - Reported only; non-modal does not close.
+ * @fires interact-outside - Either kind, fired before specific event; preventable.
  */
 export declare class SkdxFloatingPanelContent extends LitElement {
     static styles: import("lit").CSSResult[];
@@ -43,15 +15,9 @@ export declare class SkdxFloatingPanelContent extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     private syncHostState;
-    /** Escape is listened for on the document, so it works wherever focus is — the panel traps none of it. */
     private readonly handleDocumentKeyDown;
     private readonly handleOutsidePointerDown;
-    /**
-     * Reported only. Closing a non-modal panel because focus went back to the
-     * page would make it impossible to use the page and the panel together,
-     * which is the entire point of the pattern — so the veto is meaningless here
-     * and the return value is deliberately dropped.
-     */
+    /** Reported only (non-modal never closes on focus-outside). */
     private readonly handleOutsideFocus;
     render(): import("lit").TemplateResult<1>;
 }