@skdx/web-components 0.26.0

package/dist/dialog/DialogDescription.d.ts

@@ -0,0 +1,17 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-dialog-description>` — renders a `<p>` in shadow DOM. The parent
+ * `<skdx-dialog-content>` assigns this element's light-DOM `id` (if it
+ * doesn't already have one) and points its own `aria-describedby` at it.
+ *
+ * @csspart description - The `<p>` element inside the shadow root.
+ */
+export declare class SkdxDialogDescription extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-dialog-description': SkdxDialogDescription;
+    }
+}

package/dist/dialog/DialogDescription.js

@@ -0,0 +1,5 @@
+var m=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var i=(o,r,l,s)=>{for(var e=s>1?void 0:s?p(r,l):r,d=o.length-1,a;d>=0;d--)(a=o[d])&&(e=(s?a(r,l,e):a(e))||e);return s&&e&&m(r,l,e),e};import{css as c,html as n,LitElement as f}from"lit";import{customElement as E}from"../internal/define.js";var t=class extends f{render(){return n`<p part="description"><slot></slot></p>`}};t.styles=c`
+    :host {
+      display: block;
+    }
+  `,t=i([E("skdx-dialog-description","dialog","description")],t);export{t as SkdxDialogDescription};

package/dist/dialog/DialogOverlay.cjs

@@ -0,0 +1,15 @@
+"use strict";var l=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var b=(o,e)=>{for(var s in e)l(o,s,{get:e[s],enumerable:!0})},m=(o,e,s,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of u(e))!g.call(o,t)&&t!==s&&l(o,t,{get:()=>e[t],enumerable:!(i=c(e,t))||i.enumerable});return o};var y=o=>m(l({},"__esModule",{value:!0}),o),h=(o,e,s,i)=>{for(var t=i>1?void 0:i?c(e,s):e,n=o.length-1,d;n>=0;n--)(d=o[n])&&(t=(i?d(e,s,t):d(t))||t);return i&&t&&l(e,s,t),t};var k={};b(k,{SkdxDialogOverlay:()=>r});module.exports=y(k);var a=require("lit"),p=require("../internal/closest.cjs"),v=require("../internal/define.cjs");var r=class extends a.LitElement{constructor(){super(...arguments);this.dialogEl=null;this.observer=new MutationObserver(()=>this.syncHostState())}connectedCallback(){if(super.connectedCallback(),this.dialogEl=(0,p.closestThroughPortal)(this,"skdx-dialog"),!this.dialogEl)throw new Error("<skdx-dialog-overlay> must be used inside <skdx-dialog>.");this.observer.observe(this.dialogEl,{attributeFilter:["open"]}),this.syncHostState()}disconnectedCallback(){this.observer.disconnect(),super.disconnectedCallback()}syncHostState(){let s=this.dialogEl?.open??!1;this.setAttribute("data-state",s?"open":"closed"),this.hidden=!s}render(){return a.html`<slot></slot>`}};r.styles=a.css`
+    :host {
+      display: block;
+      /* Parity with React's DialogOverlay. Inert here — the dialog and its
+         backdrop sit in the top layer above this host, and this host is inert
+         while the dialog is modal — but it keeps the rendered style identical
+         across ports and survives an ancestor that sets pointer-events: none.
+         A :host rule, which the spec ranks below any outer-document rule
+         targeting the host, so a consumer can still override it. */
+      pointer-events: auto;
+    }
+    :host([hidden]) {
+      display: none;
+    }
+  `,r=h([(0,v.customElement)("skdx-dialog-overlay","dialog","overlay")],r);0&&(module.exports={SkdxDialogOverlay});

package/dist/dialog/DialogOverlay.d.cts

@@ -0,0 +1,63 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-dialog-overlay>` — the scrim rendered behind `<skdx-dialog-content>`,
+ * typically styled to dim the page. Modelled on `<skdx-drawer-overlay>`, which
+ * is its closest sibling in this package.
+ *
+ * Why it exists when the content is a native `<dialog>`
+ * ----------------------------------------------------
+ * `<skdx-dialog-content>` keeps `showModal()`, so the UA still paints a
+ * `::backdrop` and still gives the dialog the top layer, `inert` on the rest of
+ * the page, and the native focus trap. None of that changes. What the
+ * `::backdrop` cannot do is carry a class: `.skdx-dialog__overlay` is a part
+ * React, Vue, Svelte and Angular all expose, and this package was the only one
+ * where it did not exist, so a consumer's `.skdx-dialog__overlay { … }` matched
+ * four frameworks out of five. Making the anatomy uniform is the whole point of
+ * this element.
+ *
+ * The two scrims do not stack, because there is only one: `@skdx/skins` sets
+ * the native `::backdrop` to `transparent` for every framework's dialog
+ * (`skins/src/components/_overlay.css`). React renders its content as a plain
+ * `<div>` and has no `::backdrop` at all, so the overlay part is the reference's
+ * only scrim and now the only one here too.
+ *
+ * This element paints but does not interact: `showModal()` puts the `<dialog>`
+ * and its backdrop in the top layer, above this host, and marks everything
+ * outside the dialog `inert`. Outside-click dismissal therefore stays where it
+ * already was, on the `<dialog>` itself (`<skdx-dialog-content>`'s
+ * `handleBackdropClick`). Nothing about dismissal moves here.
+ *
+ * `data-state` and `hidden` are set on this **host** element rather than inside
+ * shadow DOM, so a consumer's own stylesheet can position and animate it
+ * without piercing a shadow boundary. Must be used inside `<skdx-dialog>`.
+ *
+ * No `force-mount`: like every other part in this package the element never
+ * unmounts, it hides via `hidden` — so there is nothing to force and nothing to
+ * keep alive for an exit animation. Same reasoning as `<skdx-dialog-portal>`'s,
+ * and the same choice Angular's `SkdxDialogOverlayComponent` makes.
+ *
+ * @example
+ * ```html
+ * <skdx-dialog>
+ *   <skdx-dialog-trigger>Open</skdx-dialog-trigger>
+ *   <skdx-dialog-portal>
+ *     <skdx-dialog-overlay></skdx-dialog-overlay>
+ *     <skdx-dialog-content>…</skdx-dialog-content>
+ *   </skdx-dialog-portal>
+ * </skdx-dialog>
+ * ```
+ */
+export declare class SkdxDialogOverlay extends LitElement {
+    static styles: import("lit").CSSResult;
+    private dialogEl;
+    private readonly observer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private syncHostState;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-dialog-overlay': SkdxDialogOverlay;
+    }
+}

package/dist/dialog/DialogOverlay.d.ts

@@ -0,0 +1,63 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-dialog-overlay>` — the scrim rendered behind `<skdx-dialog-content>`,
+ * typically styled to dim the page. Modelled on `<skdx-drawer-overlay>`, which
+ * is its closest sibling in this package.
+ *
+ * Why it exists when the content is a native `<dialog>`
+ * ----------------------------------------------------
+ * `<skdx-dialog-content>` keeps `showModal()`, so the UA still paints a
+ * `::backdrop` and still gives the dialog the top layer, `inert` on the rest of
+ * the page, and the native focus trap. None of that changes. What the
+ * `::backdrop` cannot do is carry a class: `.skdx-dialog__overlay` is a part
+ * React, Vue, Svelte and Angular all expose, and this package was the only one
+ * where it did not exist, so a consumer's `.skdx-dialog__overlay { … }` matched
+ * four frameworks out of five. Making the anatomy uniform is the whole point of
+ * this element.
+ *
+ * The two scrims do not stack, because there is only one: `@skdx/skins` sets
+ * the native `::backdrop` to `transparent` for every framework's dialog
+ * (`skins/src/components/_overlay.css`). React renders its content as a plain
+ * `<div>` and has no `::backdrop` at all, so the overlay part is the reference's
+ * only scrim and now the only one here too.
+ *
+ * This element paints but does not interact: `showModal()` puts the `<dialog>`
+ * and its backdrop in the top layer, above this host, and marks everything
+ * outside the dialog `inert`. Outside-click dismissal therefore stays where it
+ * already was, on the `<dialog>` itself (`<skdx-dialog-content>`'s
+ * `handleBackdropClick`). Nothing about dismissal moves here.
+ *
+ * `data-state` and `hidden` are set on this **host** element rather than inside
+ * shadow DOM, so a consumer's own stylesheet can position and animate it
+ * without piercing a shadow boundary. Must be used inside `<skdx-dialog>`.
+ *
+ * No `force-mount`: like every other part in this package the element never
+ * unmounts, it hides via `hidden` — so there is nothing to force and nothing to
+ * keep alive for an exit animation. Same reasoning as `<skdx-dialog-portal>`'s,
+ * and the same choice Angular's `SkdxDialogOverlayComponent` makes.
+ *
+ * @example
+ * ```html
+ * <skdx-dialog>
+ *   <skdx-dialog-trigger>Open</skdx-dialog-trigger>
+ *   <skdx-dialog-portal>
+ *     <skdx-dialog-overlay></skdx-dialog-overlay>
+ *     <skdx-dialog-content>…</skdx-dialog-content>
+ *   </skdx-dialog-portal>
+ * </skdx-dialog>
+ * ```
+ */
+export declare class SkdxDialogOverlay extends LitElement {
+    static styles: import("lit").CSSResult;
+    private dialogEl;
+    private readonly observer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private syncHostState;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-dialog-overlay': SkdxDialogOverlay;
+    }
+}

package/dist/dialog/DialogOverlay.js

@@ -0,0 +1,15 @@
+var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var n=(r,o,t,i)=>{for(var e=i>1?void 0:i?c(o,t):o,a=r.length-1,l;a>=0;a--)(l=r[a])&&(e=(i?l(o,t,e):l(e))||e);return i&&e&&d(o,t,e),e};import{css as h,html as p,LitElement as v}from"lit";import{closestThroughPortal as u}from"../internal/closest.js";import{customElement as g}from"../internal/define.js";var s=class extends v{constructor(){super(...arguments);this.dialogEl=null;this.observer=new MutationObserver(()=>this.syncHostState())}connectedCallback(){if(super.connectedCallback(),this.dialogEl=u(this,"skdx-dialog"),!this.dialogEl)throw new Error("<skdx-dialog-overlay> must be used inside <skdx-dialog>.");this.observer.observe(this.dialogEl,{attributeFilter:["open"]}),this.syncHostState()}disconnectedCallback(){this.observer.disconnect(),super.disconnectedCallback()}syncHostState(){let t=this.dialogEl?.open??!1;this.setAttribute("data-state",t?"open":"closed"),this.hidden=!t}render(){return p`<slot></slot>`}};s.styles=h`
+    :host {
+      display: block;
+      /* Parity with React's DialogOverlay. Inert here — the dialog and its
+         backdrop sit in the top layer above this host, and this host is inert
+         while the dialog is modal — but it keeps the rendered style identical
+         across ports and survives an ancestor that sets pointer-events: none.
+         A :host rule, which the spec ranks below any outer-document rule
+         targeting the host, so a consumer can still override it. */
+      pointer-events: auto;
+    }
+    :host([hidden]) {
+      display: none;
+    }
+  `,s=n([g("skdx-dialog-overlay","dialog","overlay")],s);export{s as SkdxDialogOverlay};

package/dist/dialog/DialogPortal.cjs

@@ -0,0 +1 @@
+"use strict";var l=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var i=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var g=(a,e)=>{for(var m in e)l(a,m,{get:e[m],enumerable:!0})},E=(a,e,m,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of i(e))!x.call(a,t)&&t!==m&&l(a,t,{get:()=>e[t],enumerable:!(o=d(e,t))||o.enumerable});return a};var M=a=>E(l({},"__esModule",{value:!0}),a),c=(a,e,m,o)=>{for(var t=o>1?void 0:o?d(e,m):e,p=a.length-1,s;p>=0;p--)(s=a[p])&&(t=(o?s(e,m,t):s(t))||t);return o&&t&&l(e,m,t),t};var T={};g(T,{SkdxDialogPortal:()=>r});module.exports=M(T);var n=require("../internal/define.cjs"),f=require("../utils/portal.cjs");var r=class extends f.SkdxPortal{};r=c([(0,n.customElement)("skdx-dialog-portal")],r);0&&(module.exports={SkdxDialogPortal});

package/dist/dialog/DialogPortal.d.cts

@@ -0,0 +1,33 @@
+import { SkdxPortal } from '../utils/portal.cjs';
+/**
+ * `<skdx-dialog-portal>` — teleports `<skdx-dialog-content>` to
+ * `document.body` (or a custom `container`), so the dialog escapes any
+ * clipping or `overflow` ancestor of the trigger that opened it.
+ *
+ * The **host element stays where you wrote it** and the *children* are the
+ * things that move, into a `<div data-skdx-portal>` — so removing the family
+ * root removes the portalled content with it, and the parts inside still
+ * resolve that root through `closestThroughPortal()`.
+ *
+ * Adds nothing to `<skdx-portal>` but its tag name. Unlike React's
+ * `DialogPortal` it takes no `force-mount` and does not unmount on close: the
+ * parts here never unmount, they hide via `hidden`, so there is nothing to
+ * force and nothing to keep alive for an exit animation.
+ *
+ * @example
+ * ```html
+ * <skdx-dialog>
+ *   <skdx-dialog-trigger>Open</skdx-dialog-trigger>
+ *   <skdx-dialog-portal>
+ *     <skdx-dialog-content>…</skdx-dialog-content>
+ *   </skdx-dialog-portal>
+ * </skdx-dialog>
+ * ```
+ */
+export declare class SkdxDialogPortal extends SkdxPortal {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-dialog-portal': SkdxDialogPortal;
+    }
+}

package/dist/dialog/DialogPortal.d.ts

@@ -0,0 +1,33 @@
+import { SkdxPortal } from '../utils/portal.js';
+/**
+ * `<skdx-dialog-portal>` — teleports `<skdx-dialog-content>` to
+ * `document.body` (or a custom `container`), so the dialog escapes any
+ * clipping or `overflow` ancestor of the trigger that opened it.
+ *
+ * The **host element stays where you wrote it** and the *children* are the
+ * things that move, into a `<div data-skdx-portal>` — so removing the family
+ * root removes the portalled content with it, and the parts inside still
+ * resolve that root through `closestThroughPortal()`.
+ *
+ * Adds nothing to `<skdx-portal>` but its tag name. Unlike React's
+ * `DialogPortal` it takes no `force-mount` and does not unmount on close: the
+ * parts here never unmount, they hide via `hidden`, so there is nothing to
+ * force and nothing to keep alive for an exit animation.
+ *
+ * @example
+ * ```html
+ * <skdx-dialog>
+ *   <skdx-dialog-trigger>Open</skdx-dialog-trigger>
+ *   <skdx-dialog-portal>
+ *     <skdx-dialog-content>…</skdx-dialog-content>
+ *   </skdx-dialog-portal>
+ * </skdx-dialog>
+ * ```
+ */
+export declare class SkdxDialogPortal extends SkdxPortal {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-dialog-portal': SkdxDialogPortal;
+    }
+}

package/dist/dialog/DialogPortal.js

@@ -0,0 +1 @@
+var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var s=(o,t,r,a)=>{for(var e=a>1?void 0:a?c(t,r):t,l=o.length-1,p;l>=0;l--)(p=o[l])&&(e=(a?p(t,r,e):p(e))||e);return a&&e&&d(t,r,e),e};import{customElement as n}from"../internal/define.js";import{SkdxPortal as f}from"../utils/portal.js";var m=class extends f{};m=s([n("skdx-dialog-portal")],m);export{m as SkdxDialogPortal};

package/dist/dialog/DialogTitle.cjs

@@ -0,0 +1,5 @@
+"use strict";var m=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var E=(r,t)=>{for(var s in t)m(r,s,{get:t[s],enumerable:!0})},b=(r,t,s,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of h(t))!f.call(r,e)&&e!==s&&m(r,e,{get:()=>t[e],enumerable:!(l=c(t,e))||l.enumerable});return r};var g=r=>b(m({},"__esModule",{value:!0}),r),n=(r,t,s,l)=>{for(var e=l>1?void 0:l?c(t,s):t,i=r.length-1,d;i>=0;i--)(d=r[i])&&(e=(l?d(t,s,e):d(e))||e);return l&&e&&m(t,s,e),e};var u={};E(u,{SkdxDialogTitle:()=>o});module.exports=g(u);var a=require("lit"),p=require("../internal/define.cjs");var o=class extends a.LitElement{render(){return a.html`<h2 part="title"><slot></slot></h2>`}};o.styles=a.css`
+    :host {
+      display: block;
+    }
+  `,o=n([(0,p.customElement)("skdx-dialog-title","dialog","title")],o);0&&(module.exports={SkdxDialogTitle});

package/dist/dialog/DialogTitle.d.cts

@@ -0,0 +1,17 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-dialog-title>` — renders an `<h2>` in shadow DOM. The parent
+ * `<skdx-dialog-content>` assigns this element's light-DOM `id` (if it
+ * doesn't already have one) and points its own `aria-labelledby` at it.
+ *
+ * @csspart title - The `<h2>` element inside the shadow root.
+ */
+export declare class SkdxDialogTitle extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-dialog-title': SkdxDialogTitle;
+    }
+}

package/dist/dialog/DialogTitle.d.ts

@@ -0,0 +1,17 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-dialog-title>` — renders an `<h2>` in shadow DOM. The parent
+ * `<skdx-dialog-content>` assigns this element's light-DOM `id` (if it
+ * doesn't already have one) and points its own `aria-labelledby` at it.
+ *
+ * @csspart title - The `<h2>` element inside the shadow root.
+ */
+export declare class SkdxDialogTitle extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-dialog-title': SkdxDialogTitle;
+    }
+}

package/dist/dialog/DialogTitle.js

@@ -0,0 +1,5 @@
+var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var i=(l,r,o,s)=>{for(var t=s>1?void 0:s?c(r,o):r,a=l.length-1,m;a>=0;a--)(m=l[a])&&(t=(s?m(r,o,t):m(t))||t);return s&&t&&d(r,o,t),t};import{css as n,html as p,LitElement as h}from"lit";import{customElement as f}from"../internal/define.js";var e=class extends h{render(){return p`<h2 part="title"><slot></slot></h2>`}};e.styles=n`
+    :host {
+      display: block;
+    }
+  `,e=i([f("skdx-dialog-title","dialog","title")],e);export{e as SkdxDialogTitle};

package/dist/dialog/DialogTrigger.cjs

@@ -0,0 +1,17 @@
+"use strict";var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var v=(o,e)=>{for(var i in e)d(o,i,{get:e[i],enumerable:!0})},m=(o,e,i,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of u(e))!b.call(o,t)&&t!==i&&d(o,t,{get:()=>e[t],enumerable:!(s=p(e,t))||s.enumerable});return o};var k=o=>m(d({},"__esModule",{value:!0}),o),h=(o,e,i,s)=>{for(var t=s>1?void 0:s?p(e,i):e,n=o.length-1,c;n>=0;n--)(c=o[n])&&(t=(s?c(e,i,t):c(t))||t);return s&&t&&d(e,i,t),t};var E={};v(E,{SkdxDialogTrigger:()=>r});module.exports=k(E);var l=require("lit"),g=require("../internal/define.cjs"),a=require("../internal/styles.cjs");var r=class extends l.LitElement{constructor(){super(...arguments);this.dialogEl=null;this.observer=new MutationObserver(()=>this.requestUpdate());this.handleClick=()=>this.dialogEl?.setOpen(!0)}connectedCallback(){if(super.connectedCallback(),this.dialogEl=this.closest("skdx-dialog"),!this.dialogEl)throw new Error("<skdx-dialog-trigger> must be used inside <skdx-dialog>.");this.observer.observe(this.dialogEl,{attributeFilter:["open"]})}disconnectedCallback(){this.observer.disconnect(),super.disconnectedCallback()}render(){let i=this.dialogEl?.open??!1;return l.html`
+      <button
+        part="trigger"
+        type="button"
+        aria-haspopup="dialog"
+        aria-expanded=${i}
+        aria-controls=${this.dialogEl?.contentId??l.nothing}
+        data-state=${i?"open":"closed"}
+        @click=${this.handleClick}
+      >
+        <slot></slot>
+      </button>
+    `}};r.shadowRootOptions=a.delegatesFocusShadowRootOptions,r.styles=[a.resetNativeControl,l.css`
+      :host {
+        display: inline-block;
+      }
+    `,a.controlBoxOnHost],r=h([(0,g.customElement)("skdx-dialog-trigger","dialog","trigger")],r);0&&(module.exports={SkdxDialogTrigger});

package/dist/dialog/DialogTrigger.d.cts

@@ -0,0 +1,23 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-dialog-trigger>` — button that opens the dialog when clicked. Sets
+ * `aria-haspopup="dialog"`, `aria-expanded`, `aria-controls`, and
+ * `data-state`. Must be used inside `<skdx-dialog>`.
+ *
+ * @csspart trigger - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxDialogTrigger extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    private dialogEl;
+    private readonly observer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleClick;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-dialog-trigger': SkdxDialogTrigger;
+    }
+}

package/dist/dialog/DialogTrigger.d.ts

@@ -0,0 +1,23 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-dialog-trigger>` — button that opens the dialog when clicked. Sets
+ * `aria-haspopup="dialog"`, `aria-expanded`, `aria-controls`, and
+ * `data-state`. Must be used inside `<skdx-dialog>`.
+ *
+ * @csspart trigger - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxDialogTrigger extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    private dialogEl;
+    private readonly observer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleClick;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-dialog-trigger': SkdxDialogTrigger;
+    }
+}

package/dist/dialog/DialogTrigger.js

@@ -0,0 +1,17 @@
+var n=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var d=(s,i,t,l)=>{for(var e=l>1?void 0:l?c(i,t):i,r=s.length-1,a;r>=0;r--)(a=s[r])&&(e=(l?a(i,t,e):a(e))||e);return l&&e&&n(i,t,e),e};import{css as p,html as h,LitElement as g,nothing as u}from"lit";import{customElement as b}from"../internal/define.js";import{controlBoxOnHost as v,delegatesFocusShadowRootOptions as m,resetNativeControl as k}from"../internal/styles.js";var o=class extends g{constructor(){super(...arguments);this.dialogEl=null;this.observer=new MutationObserver(()=>this.requestUpdate());this.handleClick=()=>this.dialogEl?.setOpen(!0)}connectedCallback(){if(super.connectedCallback(),this.dialogEl=this.closest("skdx-dialog"),!this.dialogEl)throw new Error("<skdx-dialog-trigger> must be used inside <skdx-dialog>.");this.observer.observe(this.dialogEl,{attributeFilter:["open"]})}disconnectedCallback(){this.observer.disconnect(),super.disconnectedCallback()}render(){let t=this.dialogEl?.open??!1;return h`
+      <button
+        part="trigger"
+        type="button"
+        aria-haspopup="dialog"
+        aria-expanded=${t}
+        aria-controls=${this.dialogEl?.contentId??u}
+        data-state=${t?"open":"closed"}
+        @click=${this.handleClick}
+      >
+        <slot></slot>
+      </button>
+    `}};o.shadowRootOptions=m,o.styles=[k,p`
+      :host {
+        display: inline-block;
+      }
+    `,v],o=d([b("skdx-dialog-trigger","dialog","trigger")],o);export{o as SkdxDialogTrigger};

package/dist/dialog/index.cjs

@@ -0,0 +1 @@
+"use strict";var t=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var n=Object.prototype.hasOwnProperty;var s=(r,o)=>{for(var e in o)t(r,e,{get:o[e],enumerable:!0})},C=(r,o,e,i)=>{if(o&&typeof o=="object"||typeof o=="function")for(let x of S(o))!n.call(r,x)&&x!==e&&t(r,x,{get:()=>o[x],enumerable:!(i=m(o,x))||i.enumerable});return r};var T=r=>C(t({},"__esModule",{value:!0}),r);var c={};s(c,{SkdxDialog:()=>l.SkdxDialog,SkdxDialogClose:()=>k.SkdxDialogClose,SkdxDialogContent:()=>D.SkdxDialogContent,SkdxDialogDescription:()=>f.SkdxDialogDescription,SkdxDialogOverlay:()=>p.SkdxDialogOverlay,SkdxDialogPortal:()=>g.SkdxDialogPortal,SkdxDialogTitle:()=>d.SkdxDialogTitle,SkdxDialogTrigger:()=>a.SkdxDialogTrigger});module.exports=T(c);var l=require("./Dialog.cjs"),a=require("./DialogTrigger.cjs"),g=require("./DialogPortal.cjs"),p=require("./DialogOverlay.cjs"),D=require("./DialogContent.cjs"),d=require("./DialogTitle.cjs"),f=require("./DialogDescription.cjs"),k=require("./DialogClose.cjs");0&&(module.exports={SkdxDialog,SkdxDialogClose,SkdxDialogContent,SkdxDialogDescription,SkdxDialogOverlay,SkdxDialogPortal,SkdxDialogTitle,SkdxDialogTrigger});

package/dist/dialog/index.d.cts

@@ -0,0 +1,8 @@
+export { SkdxDialog } from './Dialog.cjs';
+export { SkdxDialogTrigger } from './DialogTrigger.cjs';
+export { SkdxDialogPortal } from './DialogPortal.cjs';
+export { SkdxDialogOverlay } from './DialogOverlay.cjs';
+export { SkdxDialogContent } from './DialogContent.cjs';
+export { SkdxDialogTitle } from './DialogTitle.cjs';
+export { SkdxDialogDescription } from './DialogDescription.cjs';
+export { SkdxDialogClose } from './DialogClose.cjs';

package/dist/dialog/index.d.ts

@@ -0,0 +1,8 @@
+export { SkdxDialog } from './Dialog.js';
+export { SkdxDialogTrigger } from './DialogTrigger.js';
+export { SkdxDialogPortal } from './DialogPortal.js';
+export { SkdxDialogOverlay } from './DialogOverlay.js';
+export { SkdxDialogContent } from './DialogContent.js';
+export { SkdxDialogTitle } from './DialogTitle.js';
+export { SkdxDialogDescription } from './DialogDescription.js';
+export { SkdxDialogClose } from './DialogClose.js';

package/dist/dialog/index.js

@@ -0,0 +1 @@
+import{SkdxDialog as x}from"./Dialog.js";import{SkdxDialogTrigger as t}from"./DialogTrigger.js";import{SkdxDialogPortal as l}from"./DialogPortal.js";import{SkdxDialogOverlay as g}from"./DialogOverlay.js";import{SkdxDialogContent as D}from"./DialogContent.js";import{SkdxDialogTitle as f}from"./DialogTitle.js";import{SkdxDialogDescription as m}from"./DialogDescription.js";import{SkdxDialogClose as n}from"./DialogClose.js";export{x as SkdxDialog,n as SkdxDialogClose,D as SkdxDialogContent,m as SkdxDialogDescription,g as SkdxDialogOverlay,l as SkdxDialogPortal,f as SkdxDialogTitle,t as SkdxDialogTrigger};

package/dist/drawer/Drawer.cjs

@@ -0,0 +1,5 @@
+"use strict";var l=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var b=(n,e)=>{for(var o in e)l(n,o,{get:e[o],enumerable:!0})},y=(n,e,o,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of C(e))!g.call(n,t)&&t!==o&&l(n,t,{get:()=>e[t],enumerable:!(r=h(e,t))||r.enumerable});return n};var O=n=>y(l({},"__esModule",{value:!0}),n),d=(n,e,o,r)=>{for(var t=r>1?void 0:r?h(e,o):e,c=n.length-1,m;c>=0;c--)(m=n[c])&&(t=(r?m(e,o,t):m(t))||t);return r&&t&&l(e,o,t),t};var w={};b(w,{SkdxDrawer:()=>a});module.exports=O(w);var s=require("lit"),p=require("lit/decorators.js"),u=require("../internal/define.cjs"),i=require("../internal/ids.cjs"),f=require("../internal/open-change-complete.cjs"),v=require("../internal/positioning.cjs");var a=class extends s.LitElement{constructor(){super(...arguments);this.open=!1;this.placement="end";this.modal=!0;this.contentId=(0,i.nextId)("skdx-drawer-content");this.titleId=(0,i.nextId)("skdx-drawer-title");this.descriptionId=(0,i.nextId)("skdx-drawer-description");this.triggerEl=null;this.hasUpdatedOnce=!1}disconnectedCallback(){this.teardownOpenChangeComplete?.(),super.disconnectedCallback()}updated(o){let r=!this.hasUpdatedOnce;this.hasUpdatedOnce=!0,o.has("open")&&!r&&(this.teardownOpenChangeComplete?.(),this.teardownOpenChangeComplete=(0,f.notifyOpenChangeComplete)(()=>this.querySelector("skdx-drawer-content"),this.open,t=>this.dispatchEvent(new CustomEvent("open-change-complete",{detail:t,bubbles:!0,composed:!0}))))}setOpen(o){this.open!==o&&(this.open=o,this.dispatchEvent(new CustomEvent("open-change",{detail:o,bubbles:!0,composed:!0})))}render(){return s.html`<slot></slot>`}};a.styles=s.css`
+    :host {
+      display: contents;
+    }
+  `,d([(0,p.property)({type:Boolean,reflect:!0})],a.prototype,"open",2),d([(0,p.property)({type:String,reflect:!0})],a.prototype,"placement",2),d([(0,p.property)({converter:v.optOutBoolean,reflect:!0})],a.prototype,"modal",2),a=d([(0,u.customElement)("skdx-drawer")],a);0&&(module.exports={SkdxDrawer});

package/dist/drawer/Drawer.d.cts

@@ -0,0 +1,86 @@
+import { LitElement } from 'lit';
+/**
+ * Which viewport edge the drawer is anchored to, expressed **logically**:
+ * `start`/`end` follow the writing direction (start is the left edge under
+ * `dir="ltr"` and the right edge under `dir="rtl"`), `top`/`bottom` are
+ * physical. `bottom` is the bottom-sheet case.
+ */
+export type SkdxDrawerPlacement = 'start' | 'end' | 'top' | 'bottom';
+/**
+ * `<skdx-drawer>` — the Web Components implementation of the shared Drawer
+ * contract (see `@skdx/shared`'s `drawerContract`): a panel anchored to one
+ * edge of the viewport. Renders no visible box of its own (`display: contents`)
+ * — it owns `open`/`placement`/`modal` state and exposes it to descendant
+ * `<skdx-drawer-trigger>` / `<skdx-drawer-overlay>` / `<skdx-drawer-content>` /
+ * `<skdx-drawer-close>`, which look it up via `closest('skdx-drawer')` (custom
+ * elements have no DI, so the DOM tree itself is the shared context).
+ *
+ * Unlike `<skdx-dialog-content>`, `<skdx-drawer-content>` does **not** render a
+ * native `<dialog>` in its shadow root — see `drawerContract` for why. The
+ * practical consequence here is that `open-auto-focus`/`close-auto-focus` are
+ * a true veto rather than announce-then-reconcile, and `<skdx-drawer-overlay>`
+ * is a real, styleable element instead of a `::backdrop`.
+ *
+ * `open`/`modal`/`placement` are plain reflected properties — like a native
+ * `<input>`'s `checked`, there is no separate controlled/uncontrolled mode:
+ * the property is the single source of truth, and a consumer that wants
+ * "controlled" behavior just listens for `open-change` and writes the property
+ * back.
+ *
+ * @example
+ * ```html
+ * <skdx-drawer placement="start">
+ *   <skdx-drawer-trigger>Menu</skdx-drawer-trigger>
+ *   <skdx-drawer-overlay></skdx-drawer-overlay>
+ *   <skdx-drawer-content>
+ *     <skdx-drawer-title>Navigation</skdx-drawer-title>
+ *     <skdx-drawer-description>Jump to a section.</skdx-drawer-description>
+ *     <skdx-drawer-close>Close</skdx-drawer-close>
+ *   </skdx-drawer-content>
+ * </skdx-drawer>
+ * ```
+ *
+ * @fires open-change - Fired with the new open state whenever it changes, controlled or not.
+ * @fires open-change-complete - Fired with the new open state once `<skdx-drawer-content>`'s enter or exit animation has finished — immediately, when it declares no animation. Not cancelable: the change has already happened.
+ */
+export declare class SkdxDrawer extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Open state. Listen for `open-change` to observe or override changes. */
+    open: boolean;
+    /**
+     * Which viewport edge the drawer slides in from, expressed logically so it
+     * mirrors under `dir="rtl"`. Surfaces verbatim as `data-placement` on
+     * `<skdx-drawer-content>`.
+     * @default 'end'
+     */
+    placement: SkdxDrawerPlacement;
+    /**
+     * Whether the drawer traps focus and locks body scroll. `false` leaves the
+     * page interactive but keeps Escape and outside-interaction dismissal.
+     * @default true
+     */
+    modal: boolean;
+    readonly contentId: string;
+    readonly titleId: string;
+    readonly descriptionId: string;
+    /** The Trigger's inner button, so dismissal treats the trigger as inside the layer. */
+    triggerEl: HTMLElement | null;
+    private hasUpdatedOnce;
+    private teardownOpenChangeComplete?;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    /**
+     * Sets `open` and dispatches a bubbling, composed `open-change` event with
+     * the new value as `detail`. Setting the state it is already in is a no-op —
+     * nothing is dispatched, matching React's `useControllableState`
+     * (`packages/react/src/utils/useControllableState.ts:60`) and the contract
+     * stated at `carousel/Carousel.ts:247-251`.
+     */
+    setOpen(next: boolean): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-drawer': SkdxDrawer;
+    }
+}

package/dist/drawer/Drawer.d.ts

@@ -0,0 +1,86 @@
+import { LitElement } from 'lit';
+/**
+ * Which viewport edge the drawer is anchored to, expressed **logically**:
+ * `start`/`end` follow the writing direction (start is the left edge under
+ * `dir="ltr"` and the right edge under `dir="rtl"`), `top`/`bottom` are
+ * physical. `bottom` is the bottom-sheet case.
+ */
+export type SkdxDrawerPlacement = 'start' | 'end' | 'top' | 'bottom';
+/**
+ * `<skdx-drawer>` — the Web Components implementation of the shared Drawer
+ * contract (see `@skdx/shared`'s `drawerContract`): a panel anchored to one
+ * edge of the viewport. Renders no visible box of its own (`display: contents`)
+ * — it owns `open`/`placement`/`modal` state and exposes it to descendant
+ * `<skdx-drawer-trigger>` / `<skdx-drawer-overlay>` / `<skdx-drawer-content>` /
+ * `<skdx-drawer-close>`, which look it up via `closest('skdx-drawer')` (custom
+ * elements have no DI, so the DOM tree itself is the shared context).
+ *
+ * Unlike `<skdx-dialog-content>`, `<skdx-drawer-content>` does **not** render a
+ * native `<dialog>` in its shadow root — see `drawerContract` for why. The
+ * practical consequence here is that `open-auto-focus`/`close-auto-focus` are
+ * a true veto rather than announce-then-reconcile, and `<skdx-drawer-overlay>`
+ * is a real, styleable element instead of a `::backdrop`.
+ *
+ * `open`/`modal`/`placement` are plain reflected properties — like a native
+ * `<input>`'s `checked`, there is no separate controlled/uncontrolled mode:
+ * the property is the single source of truth, and a consumer that wants
+ * "controlled" behavior just listens for `open-change` and writes the property
+ * back.
+ *
+ * @example
+ * ```html
+ * <skdx-drawer placement="start">
+ *   <skdx-drawer-trigger>Menu</skdx-drawer-trigger>
+ *   <skdx-drawer-overlay></skdx-drawer-overlay>
+ *   <skdx-drawer-content>
+ *     <skdx-drawer-title>Navigation</skdx-drawer-title>
+ *     <skdx-drawer-description>Jump to a section.</skdx-drawer-description>
+ *     <skdx-drawer-close>Close</skdx-drawer-close>
+ *   </skdx-drawer-content>
+ * </skdx-drawer>
+ * ```
+ *
+ * @fires open-change - Fired with the new open state whenever it changes, controlled or not.
+ * @fires open-change-complete - Fired with the new open state once `<skdx-drawer-content>`'s enter or exit animation has finished — immediately, when it declares no animation. Not cancelable: the change has already happened.
+ */
+export declare class SkdxDrawer extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Open state. Listen for `open-change` to observe or override changes. */
+    open: boolean;
+    /**
+     * Which viewport edge the drawer slides in from, expressed logically so it
+     * mirrors under `dir="rtl"`. Surfaces verbatim as `data-placement` on
+     * `<skdx-drawer-content>`.
+     * @default 'end'
+     */
+    placement: SkdxDrawerPlacement;
+    /**
+     * Whether the drawer traps focus and locks body scroll. `false` leaves the
+     * page interactive but keeps Escape and outside-interaction dismissal.
+     * @default true
+     */
+    modal: boolean;
+    readonly contentId: string;
+    readonly titleId: string;
+    readonly descriptionId: string;
+    /** The Trigger's inner button, so dismissal treats the trigger as inside the layer. */
+    triggerEl: HTMLElement | null;
+    private hasUpdatedOnce;
+    private teardownOpenChangeComplete?;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    /**
+     * Sets `open` and dispatches a bubbling, composed `open-change` event with
+     * the new value as `detail`. Setting the state it is already in is a no-op —
+     * nothing is dispatched, matching React's `useControllableState`
+     * (`packages/react/src/utils/useControllableState.ts:60`) and the contract
+     * stated at `carousel/Carousel.ts:247-251`.
+     */
+    setOpen(next: boolean): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-drawer': SkdxDrawer;
+    }
+}

package/dist/drawer/Drawer.js

@@ -0,0 +1,5 @@
+var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var a=(s,r,e,n)=>{for(var t=n>1?void 0:n?m(r,e):r,d=s.length-1,l;d>=0;d--)(l=s[d])&&(t=(n?l(r,e,t):l(t))||t);return n&&t&&c(r,e,t),t};import{css as h,html as u,LitElement as f}from"lit";import{property as p}from"lit/decorators.js";import{customElement as v}from"../internal/define.js";import{nextId as i}from"../internal/ids.js";import{notifyOpenChangeComplete as C}from"../internal/open-change-complete.js";import{optOutBoolean as g}from"../internal/positioning.js";var o=class extends f{constructor(){super(...arguments);this.open=!1;this.placement="end";this.modal=!0;this.contentId=i("skdx-drawer-content");this.titleId=i("skdx-drawer-title");this.descriptionId=i("skdx-drawer-description");this.triggerEl=null;this.hasUpdatedOnce=!1}disconnectedCallback(){this.teardownOpenChangeComplete?.(),super.disconnectedCallback()}updated(e){let n=!this.hasUpdatedOnce;this.hasUpdatedOnce=!0,e.has("open")&&!n&&(this.teardownOpenChangeComplete?.(),this.teardownOpenChangeComplete=C(()=>this.querySelector("skdx-drawer-content"),this.open,t=>this.dispatchEvent(new CustomEvent("open-change-complete",{detail:t,bubbles:!0,composed:!0}))))}setOpen(e){this.open!==e&&(this.open=e,this.dispatchEvent(new CustomEvent("open-change",{detail:e,bubbles:!0,composed:!0})))}render(){return u`<slot></slot>`}};o.styles=h`
+    :host {
+      display: contents;
+    }
+  `,a([p({type:Boolean,reflect:!0})],o.prototype,"open",2),a([p({type:String,reflect:!0})],o.prototype,"placement",2),a([p({converter:g,reflect:!0})],o.prototype,"modal",2),o=a([v("skdx-drawer")],o);export{o as SkdxDrawer};