@skdx/web-components 0.26.0

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

@@ -0,0 +1,262 @@
+import { LitElement } from 'lit';
+/** The panel's top-left corner, in CSS pixels, measured from the top-left of its `boundary`. */
+export interface FloatingPanelPosition {
+    x: number;
+    y: number;
+}
+/** The panel's box, 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.
+ */
+export type FloatingPanelStage = 'default' | 'minimized' | 'maximized';
+/** Which edge or corner an `<skdx-floating-panel-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`. */
+export type FloatingPanelGesture = 'move' | 'resize';
+/** The panel's geometry at the moment a gesture ended, handed to `getGestureAnnouncement`. */
+export interface FloatingPanelGeometry {
+    /** Top-left corner, in CSS pixels, rounded. */
+    position: FloatingPanelPosition;
+    /** 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.
+ */
+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
+ */
+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).
+ *
+ * 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.
+ */
+export declare class SkdxFloatingPanel extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * 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.
+     * @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`.
+     * @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.
+     * @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`.
+     * @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.
+     * @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}'`.
+     * @default { width: 160, height: 120 }
+     */
+    minSize: FloatingPanelSize;
+    /**
+     * Largest box the panel can be resized to. A JSON object attribute.
+     * @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.
+     */
+    boundary: Element | null;
+    /**
+     * The panel's window state. Listen for `stage-change`.
+     * @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.
+     * @default 'default'
+     */
+    defaultStage: FloatingPanelStage;
+    /**
+     * Whether the header can move the panel. `false` drops the header's `move`
+     * cursor and leaves it out of the tab order. Defaults to `true`, so
+     * `draggable="false"` — the value, not the attribute's absence — is how you
+     * switch it off.
+     * @default true
+     */
+    draggable: boolean;
+    /**
+     * Whether resize grips do anything. `false` makes every
+     * `<skdx-floating-panel-resize-trigger>` inert and non-focusable, so a
+     * fixed-size panel can still render its grips for visual symmetry.
+     * @default true
+     */
+    resizable: boolean;
+    /**
+     * How far one arrow key moves or resizes the panel, in pixels. Shift+arrow
+     * uses ten times this.
+     * @default 10
+     */
+    step: number;
+    /**
+     * Freezes the panel's geometry: drag, resize, and stage changes are all
+     * refused and their triggers leave the tab order. Opening and closing still
+     * work — a disabled panel is inert, not unreachable.
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Words the polite live-region message announced once per drag or resize, on
+     * release. The numbers are already rounded to whole CSS pixels. Return `''`
+     * to announce nothing. Property only — it is a function, so it cannot come
+     * from an attribute.
+     * @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;
+    /** @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 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;
+    connectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): 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
+     * clicked to dismiss the panel — so only focus the closing panel itself
+     * stranded (still inside it, or already dropped to `<body>`) is reclaimed.
+     */
+    private restoreFocus;
+    /** @internal Sets `open`; `open-change` follows from `updated()`. */
+    setOpen(next: boolean): void;
+    /** @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.
+     */
+    private getBounds;
+    private setPosition;
+    private setSize;
+    /** @internal Moves the panel by a pixel delta, clamped to the boundary. Refused while disabled or not draggable. */
+    moveBy(dx: number, dy: number): void;
+    /**
+     * @internal Resizes from one edge or corner by a pixel delta, clamped to
+     * `minSize`, `maxSize` and the boundary. Refused while disabled or not
+     * resizable. The axis the grip does not own is discarded, so an `"e"` grip
+     * simply does nothing on a vertical delta.
+     */
+    resizeBy(direction: FloatingPanelResizeDirection, dx: number, dy: number): void;
+    /**
+     * @internal Announces where a gesture landed. Called once per gesture, on
+     * release — announcing every frame would bury the result under a hundred
+     * stale ones. `announce` debounces on top of that.
+     */
+    announceRelease(gesture: FloatingPanelGesture): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-floating-panel': SkdxFloatingPanel;
+    }
+}

package/dist/floating-panel/FloatingPanel.js

@@ -0,0 +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`
+    :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};

package/dist/floating-panel/FloatingPanelCloseTrigger.cjs

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

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

@@ -0,0 +1,32 @@
+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`).
+ *
+ * Must be used inside `<skdx-floating-panel>`.
+ *
+ * @csspart close-trigger - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxFloatingPanelCloseTrigger extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    private root;
+    private label;
+    connectedCallback(): void;
+    private readonly handleClick;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-floating-panel-close-trigger': SkdxFloatingPanelCloseTrigger;
+    }
+}

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

@@ -0,0 +1,32 @@
+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`).
+ *
+ * Must be used inside `<skdx-floating-panel>`.
+ *
+ * @csspart close-trigger - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxFloatingPanelCloseTrigger extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    private root;
+    private label;
+    connectedCallback(): void;
+    private readonly handleClick;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-floating-panel-close-trigger': SkdxFloatingPanelCloseTrigger;
+    }
+}

package/dist/floating-panel/FloatingPanelCloseTrigger.js

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

package/dist/floating-panel/FloatingPanelContent.cjs

@@ -0,0 +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`
+      :host {
+        display: block;
+      }
+    `,g.hiddenHostStyles],r=p([(0,u.customElement)("skdx-floating-panel-content","floating-panel","content")],r);0&&(module.exports={SkdxFloatingPanelContent});

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

@@ -0,0 +1,62 @@
+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.
+ */
+export declare class SkdxFloatingPanelContent extends LitElement {
+    static styles: import("lit").CSSResult[];
+    private root;
+    private readonly onRootUpdate;
+    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.
+     */
+    private readonly handleOutsideFocus;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-floating-panel-content': SkdxFloatingPanelContent;
+    }
+}

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

@@ -0,0 +1,62 @@
+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.
+ */
+export declare class SkdxFloatingPanelContent extends LitElement {
+    static styles: import("lit").CSSResult[];
+    private root;
+    private readonly onRootUpdate;
+    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.
+     */
+    private readonly handleOutsideFocus;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-floating-panel-content': SkdxFloatingPanelContent;
+    }
+}

package/dist/floating-panel/FloatingPanelContent.js

@@ -0,0 +1,5 @@
+var h=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var d=(s,o,t,e)=>{for(var i=e>1?void 0:e?c(o,t):o,r=s.length-1,a;r>=0;r--)(a=s[r])&&(i=(e?a(o,t,i):a(i))||i);return e&&i&&h(o,t,i),i};import{css as p,html as u,LitElement as g}from"lit";import{customElement as f}from"../internal/define.js";import{dispatchEscapeKeyDown as m,dispatchOutside as l,focusOutsideTarget as y}from"../internal/dismiss.js";import{hiddenHostStyles as v}from"../internal/styles.js";import{findFloatingPanel as x}from"./FloatingPanel.js";var n=class extends g{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this.syncHostState();this.handleDocumentKeyDown=t=>{t.key!=="Escape"||!this.root?.open||m(this,t)&&this.root.setOpen(!1)};this.handleOutsidePointerDown=t=>{let e=this.root;if(!e?.open)return;let i=t.target;i&&(this.contains(i)||e.triggerEl?.contains(i)||l(this,"pointer-down-outside",t)&&e.setOpen(!1))};this.handleOutsideFocus=t=>{let e=this.root;if(!e?.open)return;let i=y(t);!i||this.contains(i)||e.triggerEl?.contains(i)||l(this,"focus-outside",t)}}connectedCallback(){if(super.connectedCallback(),this.root??(this.root=x(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 e=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",e.x),this.style.setProperty("--skdx-floating-panel-y",e.y),this.style.setProperty("--skdx-floating-panel-width",e.width),this.style.setProperty("--skdx-floating-panel-height",e.height),this.hidden=!t.open}render(){return u`<slot></slot>`}};n.styles=[p`
+      :host {
+        display: block;
+      }
+    `,v],n=d([f("skdx-floating-panel-content","floating-panel","content")],n);export{n as SkdxFloatingPanelContent};

package/dist/floating-panel/FloatingPanelHeader.cjs

@@ -0,0 +1,7 @@
+"use strict";var s=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var y=(r,t)=>{for(var e in t)s(r,e,{get:t[e],enumerable:!0})},f=(r,t,e,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of u(t))!m.call(r,n)&&n!==e&&s(r,n,{get:()=>t[n],enumerable:!(i=h(t,n))||i.enumerable});return r};var E=r=>f(s({},"__esModule",{value:!0}),r),g=(r,t,e,i)=>{for(var n=i>1?void 0:i?h(t,e):t,d=r.length-1,l;d>=0;d--)(l=r[d])&&(n=(i?l(t,e,n):l(n))||n);return i&&n&&s(t,e,n),n};var b={};y(b,{SkdxFloatingPanelHeader:()=>o});module.exports=E(b);var a=require("lit"),p=require("../internal/define.cjs"),v=require("./FloatingPanel.cjs"),c=require("./gesture.cjs");var o=class extends a.LitElement{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this.syncHostState();this.dragOrigin=null;this.nudged=!1;this.handlePointerDown=e=>{this.canDrag&&(this.setPointerCapture?.(e.pointerId),this.dragOrigin={x:e.clientX,y:e.clientY},this.root&&(this.root.dragging=!0))};this.handlePointerMove=e=>{let i=this.dragOrigin;!this.canDrag||!i||(this.root?.moveBy(e.clientX-i.x,e.clientY-i.y),this.dragOrigin={x:e.clientX,y:e.clientY})};this.endDrag=e=>{this.dragOrigin&&(this.releasePointerCapture?.(e.pointerId),this.dragOrigin=null,this.root&&(this.root.dragging=!1),this.root?.announceRelease("move"))};this.handleKeyDown=e=>{if(!this.canDrag||!this.root)return;let i=(0,c.arrowDelta)(e,this,this.root.step);i&&(e.preventDefault(),this.nudged=!0,this.root.moveBy(i.dx,i.dy))};this.handleKeyUp=()=>{this.nudged&&(this.nudged=!1,this.root?.announceRelease("move"))}}get canDrag(){return!!this.root&&this.root.draggable&&!this.root.disabled}connectedCallback(){if(super.connectedCallback(),this.root??(this.root=(0,v.findFloatingPanel)(this)),!this.root)throw new Error("<skdx-floating-panel-header> must be used inside <skdx-floating-panel>.");this.root.addEventListener("skdx-floating-panel-internal-update",this.onRootUpdate),this.addEventListener("pointerdown",this.handlePointerDown),this.addEventListener("pointermove",this.handlePointerMove),this.addEventListener("pointerup",this.endDrag),this.addEventListener("pointercancel",this.endDrag),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("keyup",this.handleKeyUp),this.syncHostState()}disconnectedCallback(){this.root?.removeEventListener("skdx-floating-panel-internal-update",this.onRootUpdate),this.removeEventListener("pointerdown",this.handlePointerDown),this.removeEventListener("pointermove",this.handlePointerMove),this.removeEventListener("pointerup",this.endDrag),this.removeEventListener("pointercancel",this.endDrag),this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("keyup",this.handleKeyUp),super.disconnectedCallback()}syncHostState(){let e=this.root;e&&(this.setAttribute("role","group"),this.toggleAttribute("data-dragging",e.dragging),this.toggleAttribute("data-disabled",e.disabled),this.canDrag?this.tabIndex=0:this.removeAttribute("tabindex"),this.style.cursor=this.canDrag?"move":"")}render(){return a.html`<slot></slot>`}};o.styles=a.css`
+    :host {
+      display: block;
+      /* A touch drag must not also scroll the page under the panel. */
+      touch-action: none;
+    }
+  `,o=g([(0,p.customElement)("skdx-floating-panel-header","floating-panel","header")],o);0&&(module.exports={SkdxFloatingPanelHeader});

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

@@ -0,0 +1,60 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-floating-panel-header>` — the panel's drag handle: the bar you grab to
+ * move the window, and the natural home for `<skdx-floating-panel-title>` and
+ * the close/stage buttons.
+ *
+ * **Keyboard-operable, not mouse-only.** While focused, the arrow keys move
+ * the panel by the root's `step` and Shift+arrow by ten times that, clamped to
+ * the boundary exactly as a drag would be. The final position is announced
+ * politely once, on release — never per frame. Under `dir="rtl"` the
+ * horizontal arrows mirror.
+ *
+ * It becomes focusable (`tabindex="0"`) whenever dragging is actually
+ * available, so give it an `aria-label` — a focusable bar with no name tells a
+ * screen-reader user nothing about what the arrow keys will do. The host
+ * carries `role="group"` so that name is allowed to land on it: a bare custom
+ * element has no role at all, and `aria-label` on a roleless element is a
+ * prohibited use that names nothing (axe's `aria-prohibited-attr`). Unlike the
+ * close and stage triggers, the label cannot be forwarded into the shadow root
+ * here — this host *is* the focus target and the arrow-key handler.
+ *
+ * Exposes `data-dragging` while a gesture is in flight and `data-disabled`
+ * while the root is disabled. Must be used inside `<skdx-floating-panel>`.
+ *
+ * @example
+ * ```html
+ * <skdx-floating-panel-header aria-label="Drag to move panel">
+ *   <skdx-floating-panel-title>Inspector</skdx-floating-panel-title>
+ *   <skdx-floating-panel-close-trigger>Close</skdx-floating-panel-close-trigger>
+ * </skdx-floating-panel-header>
+ * ```
+ */
+export declare class SkdxFloatingPanelHeader extends LitElement {
+    static styles: import("lit").CSSResult;
+    private root;
+    private readonly onRootUpdate;
+    /**
+     * The pointer position the last move was measured from, and the record that
+     * a drag is in progress. This — not `hasPointerCapture` — is the source of
+     * truth, because some environments cannot report capture reliably.
+     */
+    private dragOrigin;
+    private nudged;
+    private get canDrag();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private syncHostState;
+    private readonly handlePointerDown;
+    private readonly handlePointerMove;
+    private readonly endDrag;
+    private readonly handleKeyDown;
+    /** One announcement per gesture, not per keypress: the user hears where they landed, not every step. */
+    private readonly handleKeyUp;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-floating-panel-header': SkdxFloatingPanelHeader;
+    }
+}