@skdx/web-components 0.27.0 → 0.28.0

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

@@ -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>;
 }

package/dist/floating-panel/FloatingPanelContent.js

@@ -1,5 +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`
+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{syncPartIdRef as f}from"../internal/aria-part.js";import{customElement as m}from"../internal/define.js";import{dispatchEscapeKeyDown as y,dispatchOutside as l,focusOutsideTarget as v}from"../internal/dismiss.js";import{hiddenHostStyles as x}from"../internal/styles.js";import{findFloatingPanel as E}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||y(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=v(t);!i||this.contains(i)||e.triggerEl?.contains(i)||l(this,"focus-outside",t)}}connectedCallback(){if(super.connectedCallback(),this.root??(this.root=E(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"),f(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 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};
+    `,x],n=d([m("skdx-floating-panel-content","floating-panel","content")],n);export{n as SkdxFloatingPanelContent};

package/dist/floating-panel/FloatingPanelHeader.cjs

@@ -1,4 +1,4 @@
-"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`
+"use strict";var s=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var y=(n,t)=>{for(var e in t)s(n,e,{get:t[e],enumerable:!0})},f=(n,t,e,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of c(t))!m.call(n,r)&&r!==e&&s(n,r,{get:()=>t[r],enumerable:!(i=h(t,r))||i.enumerable});return n};var b=n=>f(s({},"__esModule",{value:!0}),n),g=(n,t,e,i)=>{for(var r=i>1?void 0:i?h(t,e):t,d=n.length-1,l;d>=0;d--)(l=n[d])&&(r=(i?l(t,e,r):l(r))||r);return i&&r&&s(t,e,r),r};var E={};y(E,{SkdxFloatingPanelHeader:()=>o});module.exports=b(E);var a=require("lit"),p=require("../internal/define.cjs"),u=require("./FloatingPanel.cjs"),v=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,v.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,u.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),e.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"),e.draggable?this.setAttribute("aria-keyshortcuts","ArrowUp ArrowDown ArrowLeft ArrowRight"):this.removeAttribute("aria-keyshortcuts"),e.draggable?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. */

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

@@ -1,26 +1,10 @@
 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>`.
+ * Panel drag handle supporting keyboard (`ArrowKey` moves by `step`, Shift+arrow
+ * moves by 10× `step`, clamped to boundary; rtl mirrors). Keyboard movement
+ * announces position once on release. Must have `aria-label` and `role="group"`
+ * to name the arrow keys' function to screen readers.
+ * Exposes `data-dragging` and `data-disabled`. Must be inside `<skdx-floating-panel>`.
  *
  * @example
  * ```html
@@ -35,9 +19,8 @@ export declare class SkdxFloatingPanelHeader extends LitElement {
     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.
+     * Source of truth for active drag (not `hasPointerCapture`, which may not
+     * report reliably in all environments).
      */
     private dragOrigin;
     private nudged;

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

@@ -1,26 +1,10 @@
 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>`.
+ * Panel drag handle supporting keyboard (`ArrowKey` moves by `step`, Shift+arrow
+ * moves by 10× `step`, clamped to boundary; rtl mirrors). Keyboard movement
+ * announces position once on release. Must have `aria-label` and `role="group"`
+ * to name the arrow keys' function to screen readers.
+ * Exposes `data-dragging` and `data-disabled`. Must be inside `<skdx-floating-panel>`.
  *
  * @example
  * ```html
@@ -35,9 +19,8 @@ export declare class SkdxFloatingPanelHeader extends LitElement {
     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.
+     * Source of truth for active drag (not `hasPointerCapture`, which may not
+     * report reliably in all environments).
      */
     private dragOrigin;
     private nudged;

package/dist/floating-panel/FloatingPanelHeader.js

@@ -1,7 +1,7 @@
-var l=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var d=(o,n,e,t)=>{for(var i=t>1?void 0:t?h(n,e):n,a=o.length-1,s;a>=0;a--)(s=o[a])&&(i=(t?s(n,e,i):s(i))||i);return t&&i&&l(n,e,i),i};import{css as g,html as p,LitElement as v}from"lit";import{customElement as c}from"../internal/define.js";import{findFloatingPanel as u}from"./FloatingPanel.js";import{arrowDelta as m}from"./gesture.js";var r=class extends v{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 t=this.dragOrigin;!this.canDrag||!t||(this.root?.moveBy(e.clientX-t.x,e.clientY-t.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 t=m(e,this,this.root.step);t&&(e.preventDefault(),this.nudged=!0,this.root.moveBy(t.dx,t.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=u(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 p`<slot></slot>`}};r.styles=g`
+var l=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var d=(o,r,e,t)=>{for(var i=t>1?void 0:t?h(r,e):r,a=o.length-1,s;a>=0;a--)(s=o[a])&&(i=(t?s(r,e,i):s(i))||i);return t&&i&&l(r,e,i),i};import{css as g,html as p,LitElement as u}from"lit";import{customElement as v}from"../internal/define.js";import{findFloatingPanel as c}from"./FloatingPanel.js";import{arrowDelta as m}from"./gesture.js";var n=class extends u{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 t=this.dragOrigin;!this.canDrag||!t||(this.root?.moveBy(e.clientX-t.x,e.clientY-t.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 t=m(e,this,this.root.step);t&&(e.preventDefault(),this.nudged=!0,this.root.moveBy(t.dx,t.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=c(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),e.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"),e.draggable?this.setAttribute("aria-keyshortcuts","ArrowUp ArrowDown ArrowLeft ArrowRight"):this.removeAttribute("aria-keyshortcuts"),e.draggable?this.tabIndex=0:this.removeAttribute("tabindex"),this.style.cursor=this.canDrag?"move":"")}render(){return p`<slot></slot>`}};n.styles=g`
     :host {
       display: block;
       /* A touch drag must not also scroll the page under the panel. */
       touch-action: none;
     }
-  `,r=d([c("skdx-floating-panel-header","floating-panel","header")],r);export{r as SkdxFloatingPanelHeader};
+  `,n=d([v("skdx-floating-panel-header","floating-panel","header")],n);export{n as SkdxFloatingPanelHeader};

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

@@ -1,24 +1,16 @@
 import { SkdxPortal } from '../utils/portal.cjs';
 /**
  * `<skdx-floating-panel-portal>` — teleports `<skdx-floating-panel-content>` to
- * `document.body` (or a custom `container`), so a movable window is not
- * clipped by whatever `overflow` ancestor its trigger happens to live in, nor
- * trapped by an ancestor `transform` that would become the containing block
- * for its `position: fixed`.
+ * `document.body` (or a custom `container`), escaping `overflow` ancestors and
+ * containing blocks from ancestor `transform`s.
  *
- * Adds two things to `<skdx-portal>`: it refuses to mount outside
- * `<skdx-floating-panel>`, and it tags its portal host with
- * `data-skdx-floating-panel-portal`, so this family's portalled node is
- * distinguishable from any other's. Resolving the root back *through* the
- * portal is the base class's `portalOrigin` back-reference — the same one the
- * other seventeen `<skdx-*-portal>`s use; see {@link findFloatingPanel}.
+ * Refuses to mount outside `<skdx-floating-panel>` and tags its portal host with
+ * `data-skdx-floating-panel-portal` so this family's portalled node is
+ * distinguishable. Uses the base class's `portalOrigin` back-reference; see
+ * {@link findFloatingPanel}.
  *
- * Unlike React's `FloatingPanelPortal` this never unmounts on close: a Web
- * Components part hides itself with `hidden` instead (see
- * `<skdx-accordion-content>` for the package-wide reasoning), so `force-mount`
- * would be a no-op here and is deliberately not offered.
- *
- * Must be used inside `<skdx-floating-panel>`.
+ * Never unmounts on close: parts hide via `hidden` instead, so `force-mount`
+ * is a no-op and not offered. Must be used inside `<skdx-floating-panel>`.
  */
 export declare class SkdxFloatingPanelPortal extends SkdxPortal {
     connectedCallback(): void;

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

@@ -1,24 +1,16 @@
 import { SkdxPortal } from '../utils/portal.js';
 /**
  * `<skdx-floating-panel-portal>` — teleports `<skdx-floating-panel-content>` to
- * `document.body` (or a custom `container`), so a movable window is not
- * clipped by whatever `overflow` ancestor its trigger happens to live in, nor
- * trapped by an ancestor `transform` that would become the containing block
- * for its `position: fixed`.
+ * `document.body` (or a custom `container`), escaping `overflow` ancestors and
+ * containing blocks from ancestor `transform`s.
  *
- * Adds two things to `<skdx-portal>`: it refuses to mount outside
- * `<skdx-floating-panel>`, and it tags its portal host with
- * `data-skdx-floating-panel-portal`, so this family's portalled node is
- * distinguishable from any other's. Resolving the root back *through* the
- * portal is the base class's `portalOrigin` back-reference — the same one the
- * other seventeen `<skdx-*-portal>`s use; see {@link findFloatingPanel}.
+ * Refuses to mount outside `<skdx-floating-panel>` and tags its portal host with
+ * `data-skdx-floating-panel-portal` so this family's portalled node is
+ * distinguishable. Uses the base class's `portalOrigin` back-reference; see
+ * {@link findFloatingPanel}.
  *
- * Unlike React's `FloatingPanelPortal` this never unmounts on close: a Web
- * Components part hides itself with `hidden` instead (see
- * `<skdx-accordion-content>` for the package-wide reasoning), so `force-mount`
- * would be a no-op here and is deliberately not offered.
- *
- * Must be used inside `<skdx-floating-panel>`.
+ * Never unmounts on close: parts hide via `hidden` instead, so `force-mount`
+ * is a no-op and not offered. Must be used inside `<skdx-floating-panel>`.
  */
 export declare class SkdxFloatingPanelPortal extends SkdxPortal {
     connectedCallback(): void;

package/dist/floating-panel/FloatingPanelResizeTrigger.cjs

@@ -1,4 +1,4 @@
-"use strict";var h=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var z=(n,r)=>{for(var t in r)h(n,t,{get:r[t],enumerable:!0})},E=(n,r,t,e)=>{if(r&&typeof r=="object"||typeof r=="function")for(let i of y(r))!f.call(n,i)&&i!==t&&h(n,i,{get:()=>r[i],enumerable:!(e=p(r,i))||e.enumerable});return n};var w=n=>E(h({},"__esModule",{value:!0}),n),l=(n,r,t,e)=>{for(var i=e>1?void 0:e?p(r,t):r,a=n.length-1,d;a>=0;a--)(d=n[a])&&(i=(e?d(r,t,i):d(i))||i);return e&&i&&h(r,t,i),i};var x={};z(x,{SkdxFloatingPanelResizeTrigger:()=>o});module.exports=w(x);var s=require("lit"),v=require("lit/decorators.js"),m=require("../internal/define.cjs"),g=require("./FloatingPanel.cjs"),b=require("./gesture.cjs");var o=class extends s.LitElement{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this.syncHostState();this.dragOrigin=null;this.nudged=!1;this.handlePointerDown=t=>{this.canResize&&(this.setPointerCapture?.(t.pointerId),this.dragOrigin={x:t.clientX,y:t.clientY},this.root&&(this.root.resizing=!0))};this.handlePointerMove=t=>{let e=this.dragOrigin;!this.canResize||!e||!this.direction||(this.root?.resizeBy(this.direction,t.clientX-e.x,t.clientY-e.y),this.dragOrigin={x:t.clientX,y:t.clientY})};this.endResize=t=>{this.dragOrigin&&(this.releasePointerCapture?.(t.pointerId),this.dragOrigin=null,this.root&&(this.root.resizing=!1),this.root?.announceRelease("resize"))};this.handleKeyDown=t=>{if(!this.canResize||!this.root||!this.direction)return;let e=(0,b.arrowDelta)(t,this,this.root.step);e&&(t.preventDefault(),this.nudged=!0,this.root.resizeBy(this.direction,e.dx,e.dy))};this.handleKeyUp=()=>{this.nudged&&(this.nudged=!1,this.root?.announceRelease("resize"))}}get canResize(){return!!this.root&&!!this.direction&&this.root.resizable&&!this.root.disabled}connectedCallback(){if(super.connectedCallback(),this.root??(this.root=(0,g.findFloatingPanel)(this)),!this.root)throw new Error("<skdx-floating-panel-resize-trigger> 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.endResize),this.addEventListener("pointercancel",this.endResize),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.endResize),this.removeEventListener("pointercancel",this.endResize),this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("keyup",this.handleKeyUp),super.disconnectedCallback()}updated(t){t.has("direction")&&this.syncHostState()}syncHostState(){let t=this.root,e=this.direction;if(!t)return;if(this.setAttribute("role","separator"),this.toggleAttribute("data-resizing",t.resizing),this.toggleAttribute("data-disabled",t.disabled),t.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"),!e){this.removeAttribute("data-direction"),this.removeAttribute("aria-orientation"),this.removeAttribute("aria-valuenow"),this.removeAttribute("aria-valuemin"),this.removeAttribute("aria-valuemax"),this.removeAttribute("tabindex"),this.style.cursor="";return}this.setAttribute("data-direction",e);let i=e.includes("e")||e.includes("w"),a=i?t.size.width:t.size.height,d=i?t.minSize.width:t.minSize.height,u=i?t.maxSize.width:t.maxSize.height,c=e==="e"||e==="w"?"vertical":e==="n"||e==="s"?"horizontal":null;c?this.setAttribute("aria-orientation",c):this.removeAttribute("aria-orientation"),this.setAttribute("aria-valuenow",String(Math.round(a))),this.setAttribute("aria-valuemin",String(Math.round(d))),Number.isFinite(u)?this.setAttribute("aria-valuemax",String(Math.round(u))):this.removeAttribute("aria-valuemax"),this.canResize?this.tabIndex=0:this.removeAttribute("tabindex"),this.style.cursor=this.canResize?`${e}-resize`:""}render(){return s.html`<slot></slot>`}};o.styles=s.css`
+"use strict";var h=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var w=Object.prototype.hasOwnProperty;var A=(n,r)=>{for(var t in r)h(n,t,{get:r[t],enumerable:!0})},x=(n,r,t,e)=>{if(r&&typeof r=="object"||typeof r=="function")for(let i of z(r))!w.call(n,i)&&i!==t&&h(n,i,{get:()=>r[i],enumerable:!(e=p(r,i))||e.enumerable});return n};var E=n=>x(h({},"__esModule",{value:!0}),n),l=(n,r,t,e)=>{for(var i=e>1?void 0:e?p(r,t):r,d=n.length-1,s;d>=0;d--)(s=n[d])&&(i=(e?s(r,t,i):s(i))||i);return e&&i&&h(r,t,i),i};var L={};A(L,{SkdxFloatingPanelResizeTrigger:()=>o});module.exports=E(L);var a=require("lit"),v=require("lit/decorators.js"),m=require("../internal/define.cjs"),b=require("./FloatingPanel.cjs"),g=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=t=>{this.canResize&&(this.setPointerCapture?.(t.pointerId),this.dragOrigin={x:t.clientX,y:t.clientY},this.root&&(this.root.resizing=!0))};this.handlePointerMove=t=>{let e=this.dragOrigin;!this.canResize||!e||!this.direction||(this.root?.resizeBy(this.direction,t.clientX-e.x,t.clientY-e.y),this.dragOrigin={x:t.clientX,y:t.clientY})};this.endResize=t=>{this.dragOrigin&&(this.releasePointerCapture?.(t.pointerId),this.dragOrigin=null,this.root&&(this.root.resizing=!1),this.root?.announceRelease("resize"))};this.handleKeyDown=t=>{if(!this.canResize||!this.root||!this.direction)return;let e=(0,g.arrowDelta)(t,this,this.root.step);e&&(t.preventDefault(),this.nudged=!0,this.root.resizeBy(this.direction,e.dx,e.dy))};this.handleKeyUp=()=>{this.nudged&&(this.nudged=!1,this.root?.announceRelease("resize"))}}get canResize(){return!!this.root&&!!this.direction&&this.root.resizable&&!this.root.disabled}connectedCallback(){if(super.connectedCallback(),this.root??(this.root=(0,b.findFloatingPanel)(this)),!this.root)throw new Error("<skdx-floating-panel-resize-trigger> 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.endResize),this.addEventListener("pointercancel",this.endResize),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.endResize),this.removeEventListener("pointercancel",this.endResize),this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("keyup",this.handleKeyUp),super.disconnectedCallback()}updated(t){t.has("direction")&&this.syncHostState()}syncHostState(){let t=this.root,e=this.direction;if(!t)return;if(this.setAttribute("role","separator"),this.toggleAttribute("data-resizing",t.resizing),this.toggleAttribute("data-disabled",t.disabled),t.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"),!e){this.removeAttribute("data-direction"),this.removeAttribute("aria-orientation"),this.removeAttribute("aria-valuenow"),this.removeAttribute("aria-valuemin"),this.removeAttribute("aria-valuemax"),this.removeAttribute("tabindex"),this.style.cursor="";return}this.setAttribute("data-direction",e);let i=e.includes("e")||e.includes("w"),d=i?t.size.width:t.size.height,s=i?t.minSize.width:t.minSize.height,y=i?t.maxSize.width:t.maxSize.height,f=t.bounds?i?t.bounds.width-t.position.x:t.bounds.height-t.position.y:Number.POSITIVE_INFINITY,u=Math.max(s,Math.min(y,f)),c=e==="e"||e==="w"?"vertical":e==="n"||e==="s"?"horizontal":null;c?this.setAttribute("aria-orientation",c):this.removeAttribute("aria-orientation"),this.setAttribute("aria-valuenow",String(Math.round(d))),this.setAttribute("aria-valuemin",String(Math.round(s))),Number.isFinite(u)?this.setAttribute("aria-valuemax",String(Math.round(u))):this.removeAttribute("aria-valuemax"),t.resizable?this.setAttribute("aria-keyshortcuts","ArrowUp ArrowDown ArrowLeft ArrowRight"):this.removeAttribute("aria-keyshortcuts"),t.resizable?this.tabIndex=0:this.removeAttribute("tabindex"),this.style.cursor=this.canResize?`${e}-resize`:""}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. */

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

@@ -1,44 +1,22 @@
 import { LitElement } from 'lit';
 import { type FloatingPanelResizeDirection } from './FloatingPanel.cjs';
 /**
- * `<skdx-floating-panel-resize-trigger>` — one resize grip, for the edge or
- * corner named by `direction`. Render as many as you want handles: eight for a
- * full window, one `direction="se"` corner for the common case.
- *
- * Sets `role="separator"` on the host with
- * `aria-valuenow`/`aria-valuemin`/`aria-valuemax` describing the dimension
- * this grip controls (width for `e`/`w` and the corners, height for `n`/`s`),
- * plus `aria-orientation` on the four edges, `data-direction`, `data-resizing`
- * and `data-disabled`. `aria-valuemax` is omitted when `max-size` is infinite,
- * because there is no finite maximum to announce.
- *
- * **Keyboard-operable.** While focused, the arrow keys resize along this
- * grip's own direction — an `"e"` grip ignores the vertical arrows, a `"se"`
- * grip answers to all four — by the root's `step`, or ten times that with
- * Shift. Dragging a `w` or `n` grip moves the panel's origin as well as its
- * size, so the opposite edge stays put. Every result is clamped to `min-size`,
- * `max-size` and the boundary. The final size is announced politely once, on
- * release. Under `dir="rtl"` the horizontal arrows mirror.
- *
- * Give it an `aria-label` — a grip announced only as "separator" is not
- * operable by anyone who cannot see where it sits.
- *
- * Must be used inside `<skdx-floating-panel>`.
+ * Resize grip for `<skdx-floating-panel>` — `role="separator"` with
+ * `aria-valuenow` / `aria-valuemin` / `aria-valuemax` per direction.
+ * Keyboard-operable: arrow keys resize per `step`; Shift multiplies by 10.
+ * Corners move both edges; `w` / `n` move origin too. Under RTL, horizontal arrows mirror.
  *
  * @example
  * ```html
- * <skdx-floating-panel-resize-trigger
- *   direction="se"
- *   aria-label="Resize panel"
- * ></skdx-floating-panel-resize-trigger>
+ * <skdx-floating-panel-resize-trigger direction="se" aria-label="Resize panel">
+ * </skdx-floating-panel-resize-trigger>
  * ```
  */
 export declare class SkdxFloatingPanelResizeTrigger extends LitElement {
     static styles: import("lit").CSSResult;
     /**
-     * Which edge or corner this grip pulls. Corners move two edges at once.
-     * @default undefined — a grip that does not say what it resizes cannot
-     * resize anything, and stays inert and out of the tab order until it does.
+     * Which edge / corner this grip resizes. Inert until set.
+     * @default undefined
      */
     direction?: FloatingPanelResizeDirection;
     private root;

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

@@ -1,44 +1,22 @@
 import { LitElement } from 'lit';
 import { type FloatingPanelResizeDirection } from './FloatingPanel.js';
 /**
- * `<skdx-floating-panel-resize-trigger>` — one resize grip, for the edge or
- * corner named by `direction`. Render as many as you want handles: eight for a
- * full window, one `direction="se"` corner for the common case.
- *
- * Sets `role="separator"` on the host with
- * `aria-valuenow`/`aria-valuemin`/`aria-valuemax` describing the dimension
- * this grip controls (width for `e`/`w` and the corners, height for `n`/`s`),
- * plus `aria-orientation` on the four edges, `data-direction`, `data-resizing`
- * and `data-disabled`. `aria-valuemax` is omitted when `max-size` is infinite,
- * because there is no finite maximum to announce.
- *
- * **Keyboard-operable.** While focused, the arrow keys resize along this
- * grip's own direction — an `"e"` grip ignores the vertical arrows, a `"se"`
- * grip answers to all four — by the root's `step`, or ten times that with
- * Shift. Dragging a `w` or `n` grip moves the panel's origin as well as its
- * size, so the opposite edge stays put. Every result is clamped to `min-size`,
- * `max-size` and the boundary. The final size is announced politely once, on
- * release. Under `dir="rtl"` the horizontal arrows mirror.
- *
- * Give it an `aria-label` — a grip announced only as "separator" is not
- * operable by anyone who cannot see where it sits.
- *
- * Must be used inside `<skdx-floating-panel>`.
+ * Resize grip for `<skdx-floating-panel>` — `role="separator"` with
+ * `aria-valuenow` / `aria-valuemin` / `aria-valuemax` per direction.
+ * Keyboard-operable: arrow keys resize per `step`; Shift multiplies by 10.
+ * Corners move both edges; `w` / `n` move origin too. Under RTL, horizontal arrows mirror.
  *
  * @example
  * ```html
- * <skdx-floating-panel-resize-trigger
- *   direction="se"
- *   aria-label="Resize panel"
- * ></skdx-floating-panel-resize-trigger>
+ * <skdx-floating-panel-resize-trigger direction="se" aria-label="Resize panel">
+ * </skdx-floating-panel-resize-trigger>
  * ```
  */
 export declare class SkdxFloatingPanelResizeTrigger extends LitElement {
     static styles: import("lit").CSSResult;
     /**
-     * Which edge or corner this grip pulls. Corners move two edges at once.
-     * @default undefined — a grip that does not say what it resizes cannot
-     * resize anything, and stays inert and out of the tab order until it does.
+     * Which edge / corner this grip resizes. Inert until set.
+     * @default undefined
      */
     direction?: FloatingPanelResizeDirection;
     private root;

package/dist/floating-panel/FloatingPanelResizeTrigger.js

@@ -1,7 +1,7 @@
-var u=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var d=(a,n,t,e)=>{for(var i=e>1?void 0:e?c(n,t):n,o=a.length-1,s;o>=0;o--)(s=a[o])&&(i=(e?s(n,t,i):s(i))||i);return e&&i&&u(n,t,i),i};import{css as p,html as v,LitElement as m}from"lit";import{property as g}from"lit/decorators.js";import{customElement as b}from"../internal/define.js";import{findFloatingPanel as y}from"./FloatingPanel.js";import{arrowDelta as f}from"./gesture.js";var r=class extends m{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this.syncHostState();this.dragOrigin=null;this.nudged=!1;this.handlePointerDown=t=>{this.canResize&&(this.setPointerCapture?.(t.pointerId),this.dragOrigin={x:t.clientX,y:t.clientY},this.root&&(this.root.resizing=!0))};this.handlePointerMove=t=>{let e=this.dragOrigin;!this.canResize||!e||!this.direction||(this.root?.resizeBy(this.direction,t.clientX-e.x,t.clientY-e.y),this.dragOrigin={x:t.clientX,y:t.clientY})};this.endResize=t=>{this.dragOrigin&&(this.releasePointerCapture?.(t.pointerId),this.dragOrigin=null,this.root&&(this.root.resizing=!1),this.root?.announceRelease("resize"))};this.handleKeyDown=t=>{if(!this.canResize||!this.root||!this.direction)return;let e=f(t,this,this.root.step);e&&(t.preventDefault(),this.nudged=!0,this.root.resizeBy(this.direction,e.dx,e.dy))};this.handleKeyUp=()=>{this.nudged&&(this.nudged=!1,this.root?.announceRelease("resize"))}}get canResize(){return!!this.root&&!!this.direction&&this.root.resizable&&!this.root.disabled}connectedCallback(){if(super.connectedCallback(),this.root??(this.root=y(this)),!this.root)throw new Error("<skdx-floating-panel-resize-trigger> 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.endResize),this.addEventListener("pointercancel",this.endResize),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.endResize),this.removeEventListener("pointercancel",this.endResize),this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("keyup",this.handleKeyUp),super.disconnectedCallback()}updated(t){t.has("direction")&&this.syncHostState()}syncHostState(){let t=this.root,e=this.direction;if(!t)return;if(this.setAttribute("role","separator"),this.toggleAttribute("data-resizing",t.resizing),this.toggleAttribute("data-disabled",t.disabled),t.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"),!e){this.removeAttribute("data-direction"),this.removeAttribute("aria-orientation"),this.removeAttribute("aria-valuenow"),this.removeAttribute("aria-valuemin"),this.removeAttribute("aria-valuemax"),this.removeAttribute("tabindex"),this.style.cursor="";return}this.setAttribute("data-direction",e);let i=e.includes("e")||e.includes("w"),o=i?t.size.width:t.size.height,s=i?t.minSize.width:t.minSize.height,h=i?t.maxSize.width:t.maxSize.height,l=e==="e"||e==="w"?"vertical":e==="n"||e==="s"?"horizontal":null;l?this.setAttribute("aria-orientation",l):this.removeAttribute("aria-orientation"),this.setAttribute("aria-valuenow",String(Math.round(o))),this.setAttribute("aria-valuemin",String(Math.round(s))),Number.isFinite(h)?this.setAttribute("aria-valuemax",String(Math.round(h))):this.removeAttribute("aria-valuemax"),this.canResize?this.tabIndex=0:this.removeAttribute("tabindex"),this.style.cursor=this.canResize?`${e}-resize`:""}render(){return v`<slot></slot>`}};r.styles=p`
+var p=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var d=(a,o,t,e)=>{for(var i=e>1?void 0:e?v(o,t):o,s=a.length-1,r;s>=0;s--)(r=a[s])&&(i=(e?r(o,t,i):r(i))||i);return e&&i&&p(o,t,i),i};import{css as m,html as b,LitElement as g}from"lit";import{property as y}from"lit/decorators.js";import{customElement as f}from"../internal/define.js";import{findFloatingPanel as z}from"./FloatingPanel.js";import{arrowDelta as w}from"./gesture.js";var n=class extends g{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this.syncHostState();this.dragOrigin=null;this.nudged=!1;this.handlePointerDown=t=>{this.canResize&&(this.setPointerCapture?.(t.pointerId),this.dragOrigin={x:t.clientX,y:t.clientY},this.root&&(this.root.resizing=!0))};this.handlePointerMove=t=>{let e=this.dragOrigin;!this.canResize||!e||!this.direction||(this.root?.resizeBy(this.direction,t.clientX-e.x,t.clientY-e.y),this.dragOrigin={x:t.clientX,y:t.clientY})};this.endResize=t=>{this.dragOrigin&&(this.releasePointerCapture?.(t.pointerId),this.dragOrigin=null,this.root&&(this.root.resizing=!1),this.root?.announceRelease("resize"))};this.handleKeyDown=t=>{if(!this.canResize||!this.root||!this.direction)return;let e=w(t,this,this.root.step);e&&(t.preventDefault(),this.nudged=!0,this.root.resizeBy(this.direction,e.dx,e.dy))};this.handleKeyUp=()=>{this.nudged&&(this.nudged=!1,this.root?.announceRelease("resize"))}}get canResize(){return!!this.root&&!!this.direction&&this.root.resizable&&!this.root.disabled}connectedCallback(){if(super.connectedCallback(),this.root??(this.root=z(this)),!this.root)throw new Error("<skdx-floating-panel-resize-trigger> 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.endResize),this.addEventListener("pointercancel",this.endResize),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.endResize),this.removeEventListener("pointercancel",this.endResize),this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("keyup",this.handleKeyUp),super.disconnectedCallback()}updated(t){t.has("direction")&&this.syncHostState()}syncHostState(){let t=this.root,e=this.direction;if(!t)return;if(this.setAttribute("role","separator"),this.toggleAttribute("data-resizing",t.resizing),this.toggleAttribute("data-disabled",t.disabled),t.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"),!e){this.removeAttribute("data-direction"),this.removeAttribute("aria-orientation"),this.removeAttribute("aria-valuenow"),this.removeAttribute("aria-valuemin"),this.removeAttribute("aria-valuemax"),this.removeAttribute("tabindex"),this.style.cursor="";return}this.setAttribute("data-direction",e);let i=e.includes("e")||e.includes("w"),s=i?t.size.width:t.size.height,r=i?t.minSize.width:t.minSize.height,u=i?t.maxSize.width:t.maxSize.height,c=t.bounds?i?t.bounds.width-t.position.x:t.bounds.height-t.position.y:Number.POSITIVE_INFINITY,h=Math.max(r,Math.min(u,c)),l=e==="e"||e==="w"?"vertical":e==="n"||e==="s"?"horizontal":null;l?this.setAttribute("aria-orientation",l):this.removeAttribute("aria-orientation"),this.setAttribute("aria-valuenow",String(Math.round(s))),this.setAttribute("aria-valuemin",String(Math.round(r))),Number.isFinite(h)?this.setAttribute("aria-valuemax",String(Math.round(h))):this.removeAttribute("aria-valuemax"),t.resizable?this.setAttribute("aria-keyshortcuts","ArrowUp ArrowDown ArrowLeft ArrowRight"):this.removeAttribute("aria-keyshortcuts"),t.resizable?this.tabIndex=0:this.removeAttribute("tabindex"),this.style.cursor=this.canResize?`${e}-resize`:""}render(){return b`<slot></slot>`}};n.styles=m`
     :host {
       display: block;
       /* A touch drag must not also scroll the page under the panel. */
       touch-action: none;
     }
-  `,d([g({type:String})],r.prototype,"direction",2),r=d([b("skdx-floating-panel-resize-trigger","floating-panel","resize-trigger")],r);export{r as SkdxFloatingPanelResizeTrigger};
+  `,d([y({type:String})],n.prototype,"direction",2),n=d([f("skdx-floating-panel-resize-trigger","floating-panel","resize-trigger")],n);export{n as SkdxFloatingPanelResizeTrigger};

package/dist/floating-panel/FloatingPanelStageTrigger.cjs

@@ -1,16 +1,16 @@
-"use strict";var n=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var k=(a,t)=>{for(var o in t)n(a,o,{get:t[o],enumerable:!0})},y=(a,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of v(t))!m.call(a,e)&&e!==o&&n(a,e,{get:()=>t[e],enumerable:!(r=c(t,e))||r.enumerable});return a};var C=a=>y(n({},"__esModule",{value:!0}),a),h=(a,t,o,r)=>{for(var e=r>1?void 0:r?c(t,o):t,d=a.length-1,p;d>=0;d--)(p=a[d])&&(e=(r?p(t,o,e):p(e))||e);return r&&e&&n(t,o,e),e};var x={};k(x,{SkdxFloatingPanelStageTrigger:()=>i});module.exports=C(x);var s=require("lit"),g=require("lit/decorators.js"),u=require("../internal/aria-label.cjs"),b=require("../internal/define.cjs"),l=require("../internal/styles.cjs"),f=require("./FloatingPanel.cjs");var i=class extends s.LitElement{constructor(){super(...arguments);this.stage="default";this.root=null;this.label=null;this.onRootUpdate=()=>this.syncHostState();this.handleClick=()=>{!this.root||this.root.disabled||this.root.setStage(this.active?"default":this.stage)}}connectedCallback(){if(super.connectedCallback(),this.label??(this.label=(0,u.takeHostAriaLabel)(this)),this.root??(this.root=(0,f.findFloatingPanel)(this)),!this.root)throw new Error("<skdx-floating-panel-stage-trigger> must be used inside <skdx-floating-panel>.");this.root.addEventListener("skdx-floating-panel-internal-update",this.onRootUpdate),this.syncHostState()}disconnectedCallback(){this.root?.removeEventListener("skdx-floating-panel-internal-update",this.onRootUpdate),super.disconnectedCallback()}get active(){return this.root?.stage===this.stage}syncHostState(){let o=this.root;o&&(this.setAttribute("data-stage",o.stage),this.setAttribute("data-state",this.active?"on":"off"),this.toggleAttribute("data-disabled",o.disabled),this.requestUpdate())}render(){return s.html`
+"use strict";var n=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var k=(a,t)=>{for(var o in t)n(a,o,{get:t[o],enumerable:!0})},y=(a,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of v(t))!m.call(a,e)&&e!==o&&n(a,e,{get:()=>t[e],enumerable:!(r=c(t,e))||r.enumerable});return a};var C=a=>y(n({},"__esModule",{value:!0}),a),h=(a,t,o,r)=>{for(var e=r>1?void 0:r?c(t,o):t,d=a.length-1,p;d>=0;d--)(p=a[d])&&(e=(r?p(t,o,e):p(e))||e);return r&&e&&n(t,o,e),e};var x={};k(x,{SkdxFloatingPanelStageTrigger:()=>s});module.exports=C(x);var i=require("lit"),u=require("lit/decorators.js"),g=require("../internal/aria-label.cjs"),b=require("../internal/define.cjs"),l=require("../internal/styles.cjs"),f=require("./FloatingPanel.cjs");var s=class extends i.LitElement{constructor(){super(...arguments);this.stage="default";this.root=null;this.label=null;this.onRootUpdate=()=>this.syncHostState();this.handleClick=()=>{!this.root||this.root.disabled||this.root.setStage(this.active?"default":this.stage)}}connectedCallback(){if(super.connectedCallback(),this.label??(this.label=(0,g.takeHostAriaLabel)(this)),this.root??(this.root=(0,f.findFloatingPanel)(this)),!this.root)throw new Error("<skdx-floating-panel-stage-trigger> must be used inside <skdx-floating-panel>.");this.root.addEventListener("skdx-floating-panel-internal-update",this.onRootUpdate),this.syncHostState()}disconnectedCallback(){this.root?.removeEventListener("skdx-floating-panel-internal-update",this.onRootUpdate),super.disconnectedCallback()}get active(){return this.root?.stage===this.stage}syncHostState(){let o=this.root;o&&(this.setAttribute("data-stage",o.stage),this.setAttribute("data-state",this.active?"on":"off"),this.toggleAttribute("data-disabled",o.disabled),this.requestUpdate())}render(){return i.html`
       <button
         part="stage-trigger"
         type="button"
         aria-pressed=${this.active}
-        aria-label=${this.label??s.nothing}
-        ?disabled=${this.root?.disabled??!1}
+        aria-label=${this.label??i.nothing}
+        aria-disabled=${this.root?.disabled?"true":i.nothing}
         @click=${this.handleClick}
       >
         <slot></slot>
       </button>
-    `}};i.shadowRootOptions=l.delegatesFocusShadowRootOptions,i.styles=[l.resetNativeControl,s.css`
+    `}};s.shadowRootOptions=l.delegatesFocusShadowRootOptions,s.styles=[l.resetNativeControl,i.css`
       :host {
         display: inline-block;
       }
-    `,l.controlBoxOnHost],h([(0,g.property)({type:String})],i.prototype,"stage",2),i=h([(0,b.customElement)("skdx-floating-panel-stage-trigger","floating-panel","stage-trigger")],i);0&&(module.exports={SkdxFloatingPanelStageTrigger});
+    `,l.controlBoxOnHost],h([(0,u.property)({type:String})],s.prototype,"stage",2),s=h([(0,b.customElement)("skdx-floating-panel-stage-trigger","floating-panel","stage-trigger")],s);0&&(module.exports={SkdxFloatingPanelStageTrigger});

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

@@ -1,18 +1,8 @@
 import { LitElement } from 'lit';
 import { type FloatingPanelStage } from './FloatingPanel.cjs';
 /**
- * `<skdx-floating-panel-stage-trigger>` — button that switches the panel to the
- * `stage` it names, and back to `default` when the panel is already there.
- * That toggle is why minimize and restore are one button rather than two: it
- * reports the state it is in via `aria-pressed`, so a screen reader announces
- * "Minimize, pressed" rather than two buttons swapping places under the user.
- *
- * Exposes the panel's current stage as `data-stage` and its own active state
- * as `data-state` (`on`/`off`) on the host. Refuses to act while the panel is
- * `disabled` — a stage change rewrites the panel's geometry — and drops out of
- * the tab order with it.
- *
- * Must be used inside `<skdx-floating-panel>`.
+ * Button to switch panel stage; returns to default if already there. Reports state via
+ * aria-pressed, data-stage, and data-state. Disabled when panel is disabled.
  *
  * @example
  * ```html
@@ -20,9 +10,7 @@ import { type FloatingPanelStage } from './FloatingPanel.cjs';
  * <skdx-floating-panel-stage-trigger stage="maximized">Maximize</skdx-floating-panel-stage-trigger>
  * ```
  *
- * 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`).
+ * `aria-label` on host is moved to inner button (host has no role; prohibited use on host).
  *
  * @csspart stage-trigger - The native `<button>` element inside the shadow root.
  */

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

@@ -1,18 +1,8 @@
 import { LitElement } from 'lit';
 import { type FloatingPanelStage } from './FloatingPanel.js';
 /**
- * `<skdx-floating-panel-stage-trigger>` — button that switches the panel to the
- * `stage` it names, and back to `default` when the panel is already there.
- * That toggle is why minimize and restore are one button rather than two: it
- * reports the state it is in via `aria-pressed`, so a screen reader announces
- * "Minimize, pressed" rather than two buttons swapping places under the user.
- *
- * Exposes the panel's current stage as `data-stage` and its own active state
- * as `data-state` (`on`/`off`) on the host. Refuses to act while the panel is
- * `disabled` — a stage change rewrites the panel's geometry — and drops out of
- * the tab order with it.
- *
- * Must be used inside `<skdx-floating-panel>`.
+ * Button to switch panel stage; returns to default if already there. Reports state via
+ * aria-pressed, data-stage, and data-state. Disabled when panel is disabled.
  *
  * @example
  * ```html
@@ -20,9 +10,7 @@ import { type FloatingPanelStage } from './FloatingPanel.js';
  * <skdx-floating-panel-stage-trigger stage="maximized">Maximize</skdx-floating-panel-stage-trigger>
  * ```
  *
- * 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`).
+ * `aria-label` on host is moved to inner button (host has no role; prohibited use on host).
  *
  * @csspart stage-trigger - The native `<button>` element inside the shadow root.
  */

package/dist/floating-panel/FloatingPanelStageTrigger.js

@@ -1,15 +1,15 @@
-var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var n=(s,a,t,i)=>{for(var e=i>1?void 0:i?p(a,t):a,r=s.length-1,l;r>=0;r--)(l=s[r])&&(e=(i?l(a,t,e):l(e))||e);return i&&e&&d(a,t,e),e};import{css as h,html as c,LitElement as g,nothing as u}from"lit";import{property as b}from"lit/decorators.js";import{takeHostAriaLabel as f}from"../internal/aria-label.js";import{customElement as v}from"../internal/define.js";import{controlBoxOnHost as m,delegatesFocusShadowRootOptions as k,resetNativeControl as y}from"../internal/styles.js";import{findFloatingPanel as C}from"./FloatingPanel.js";var o=class extends g{constructor(){super(...arguments);this.stage="default";this.root=null;this.label=null;this.onRootUpdate=()=>this.syncHostState();this.handleClick=()=>{!this.root||this.root.disabled||this.root.setStage(this.active?"default":this.stage)}}connectedCallback(){if(super.connectedCallback(),this.label??(this.label=f(this)),this.root??(this.root=C(this)),!this.root)throw new Error("<skdx-floating-panel-stage-trigger> must be used inside <skdx-floating-panel>.");this.root.addEventListener("skdx-floating-panel-internal-update",this.onRootUpdate),this.syncHostState()}disconnectedCallback(){this.root?.removeEventListener("skdx-floating-panel-internal-update",this.onRootUpdate),super.disconnectedCallback()}get active(){return this.root?.stage===this.stage}syncHostState(){let t=this.root;t&&(this.setAttribute("data-stage",t.stage),this.setAttribute("data-state",this.active?"on":"off"),this.toggleAttribute("data-disabled",t.disabled),this.requestUpdate())}render(){return c`
+var p=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var n=(s,a,t,i)=>{for(var e=i>1?void 0:i?h(a,t):a,r=s.length-1,l;r>=0;r--)(l=s[r])&&(e=(i?l(a,t,e):l(e))||e);return i&&e&&p(a,t,e),e};import{css as c,html as u,LitElement as g,nothing as d}from"lit";import{property as b}from"lit/decorators.js";import{takeHostAriaLabel as f}from"../internal/aria-label.js";import{customElement as v}from"../internal/define.js";import{controlBoxOnHost as m,delegatesFocusShadowRootOptions as k,resetNativeControl as y}from"../internal/styles.js";import{findFloatingPanel as C}from"./FloatingPanel.js";var o=class extends g{constructor(){super(...arguments);this.stage="default";this.root=null;this.label=null;this.onRootUpdate=()=>this.syncHostState();this.handleClick=()=>{!this.root||this.root.disabled||this.root.setStage(this.active?"default":this.stage)}}connectedCallback(){if(super.connectedCallback(),this.label??(this.label=f(this)),this.root??(this.root=C(this)),!this.root)throw new Error("<skdx-floating-panel-stage-trigger> must be used inside <skdx-floating-panel>.");this.root.addEventListener("skdx-floating-panel-internal-update",this.onRootUpdate),this.syncHostState()}disconnectedCallback(){this.root?.removeEventListener("skdx-floating-panel-internal-update",this.onRootUpdate),super.disconnectedCallback()}get active(){return this.root?.stage===this.stage}syncHostState(){let t=this.root;t&&(this.setAttribute("data-stage",t.stage),this.setAttribute("data-state",this.active?"on":"off"),this.toggleAttribute("data-disabled",t.disabled),this.requestUpdate())}render(){return u`
       <button
         part="stage-trigger"
         type="button"
         aria-pressed=${this.active}
-        aria-label=${this.label??u}
-        ?disabled=${this.root?.disabled??!1}
+        aria-label=${this.label??d}
+        aria-disabled=${this.root?.disabled?"true":d}
         @click=${this.handleClick}
       >
         <slot></slot>
       </button>
-    `}};o.shadowRootOptions=k,o.styles=[y,h`
+    `}};o.shadowRootOptions=k,o.styles=[y,c`
       :host {
         display: inline-block;
       }