@skdx/web-components-blocks 0.34.0 → 0.36.0

package/dist/comment/Comment.d.cts

@@ -0,0 +1,66 @@
+import { LitElement, type TemplateResult } from 'lit';
+import '@skdx/web-components/time';
+/**
+ * One collaboration comment: author, avatar, timestamp, edited indicator,
+ * arbitrary content, attachments and actions such as reply, edit and react.
+ *
+ * Renders light DOM, so its parts are classes rather than shadow `::part()`
+ * targets: `.skdx-comment` on the host, then `__avatar`, `__main`, `__header`,
+ * `__author`, `__metadata`, `__time`, `__edited`, `__content`, `__attachments`
+ * and `__actions`.
+ *
+ * @example
+ * ```html
+ * <skdx-comment
+ *   author="Priya Shah"
+ *   timestamp="2026-08-10T09:00:00Z"
+ * >
+ *   <skdx-avatar slot="avatar" name="Priya Shah"></skdx-avatar>
+ *   Looks good to me.
+ *   <skdx-button slot="actions">Reply</skdx-button>
+ * </skdx-comment>
+ * ```
+ *
+ * @slot - The comment content, the consumer-supplied body text or markup.
+ * @slot avatar - Decorative avatar rendered beside the author, always `aria-hidden`.
+ * @slot metadata - Badges or supplementary text rendered beside the author.
+ * @slot attachments - Files or links attached to the comment, below the content.
+ * @slot actions - Controls such as reply, edit and react, below the attachments.
+ */
+export declare class SkdxComment extends LitElement {
+    /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    /** Name of the person or system that wrote the comment, rendered as visible text. */
+    author: string;
+    /**
+     * Instant the comment was posted, rendered through a composed Time.
+     * @default undefined — no time region renders.
+     */
+    timestamp?: Date | string | undefined;
+    /**
+     * Reference instant `timestamp` renders relative to, forwarded to Time.
+     * @default undefined — read once at render, since this block starts no timer.
+     */
+    now?: Date | number | undefined;
+    /**
+     * Marks the comment as edited since it was first posted.
+     * @default false
+     */
+    edited: boolean;
+    /**
+     * Text of the edited indicator, shown only when `edited` is set.
+     * @default 'Edited'
+     */
+    editedLabel: string;
+    connectedCallback(): void;
+    private region;
+    /** Whether the consumer supplied anything for `name` — still true once it has been moved in. */
+    private hasSlotted;
+    protected updated(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-comment': SkdxComment;
+    }
+}

package/dist/comment/Comment.d.ts

@@ -0,0 +1,66 @@
+import { LitElement, type TemplateResult } from 'lit';
+import '@skdx/web-components/time';
+/**
+ * One collaboration comment: author, avatar, timestamp, edited indicator,
+ * arbitrary content, attachments and actions such as reply, edit and react.
+ *
+ * Renders light DOM, so its parts are classes rather than shadow `::part()`
+ * targets: `.skdx-comment` on the host, then `__avatar`, `__main`, `__header`,
+ * `__author`, `__metadata`, `__time`, `__edited`, `__content`, `__attachments`
+ * and `__actions`.
+ *
+ * @example
+ * ```html
+ * <skdx-comment
+ *   author="Priya Shah"
+ *   timestamp="2026-08-10T09:00:00Z"
+ * >
+ *   <skdx-avatar slot="avatar" name="Priya Shah"></skdx-avatar>
+ *   Looks good to me.
+ *   <skdx-button slot="actions">Reply</skdx-button>
+ * </skdx-comment>
+ * ```
+ *
+ * @slot - The comment content, the consumer-supplied body text or markup.
+ * @slot avatar - Decorative avatar rendered beside the author, always `aria-hidden`.
+ * @slot metadata - Badges or supplementary text rendered beside the author.
+ * @slot attachments - Files or links attached to the comment, below the content.
+ * @slot actions - Controls such as reply, edit and react, below the attachments.
+ */
+export declare class SkdxComment extends LitElement {
+    /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    /** Name of the person or system that wrote the comment, rendered as visible text. */
+    author: string;
+    /**
+     * Instant the comment was posted, rendered through a composed Time.
+     * @default undefined — no time region renders.
+     */
+    timestamp?: Date | string | undefined;
+    /**
+     * Reference instant `timestamp` renders relative to, forwarded to Time.
+     * @default undefined — read once at render, since this block starts no timer.
+     */
+    now?: Date | number | undefined;
+    /**
+     * Marks the comment as edited since it was first posted.
+     * @default false
+     */
+    edited: boolean;
+    /**
+     * Text of the edited indicator, shown only when `edited` is set.
+     * @default 'Edited'
+     */
+    editedLabel: string;
+    connectedCallback(): void;
+    private region;
+    /** Whether the consumer supplied anything for `name` — still true once it has been moved in. */
+    private hasSlotted;
+    protected updated(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-comment': SkdxComment;
+    }
+}

package/dist/comment/Comment.js

@@ -0,0 +1,26 @@
+var h=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var s=(m,d,e,o)=>{for(var a=o>1?void 0:o?p(d,e):d,c=m.length-1,l;c>=0;c--)(l=m[c])&&(a=(o?l(d,e,a):l(a))||a);return o&&a&&h(d,e,a),a};import{html as i,LitElement as u,nothing as n}from"lit";import{property as r}from"lit/decorators.js";import{customElement as v}from"../internal/define.js";import{placeSlotted as _}from"../internal/slots.js";import"@skdx/web-components/time";var g="data-skdx-comment-generated",t=class extends u{constructor(){super(...arguments);this.edited=!1;this.editedLabel="Edited"}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute("role","article"),queueMicrotask(()=>this.requestUpdate())}region(e){return this.querySelector(`.skdx-comment__${e}`)}hasSlotted(e){return this.querySelector(`[slot="${e}"], [data-skdx-slot="${e}"]`)!==null}updated(){_(this,g,{avatar:this.region("avatar"),metadata:this.region("metadata"),attachments:this.region("attachments"),actions:this.region("actions")},this.region("content"))}render(){return i`
+      ${this.hasSlotted("avatar")?i`<div
+              class="skdx-comment__avatar"
+              aria-hidden="true"
+              data-skdx-comment-generated
+            ></div>`:n}
+      <div
+        class="skdx-comment__main"
+        data-skdx-comment-generated
+      >
+        <div class="skdx-comment__header">
+          <span class="skdx-comment__author">${this.author??""}</span>
+          ${this.hasSlotted("metadata")?i`<span class="skdx-comment__metadata"></span>`:n}
+          ${this.timestamp===void 0?n:i`<skdx-time
+                  class="skdx-comment__time"
+                  relative
+                  .value=${this.timestamp}
+                  .now=${this.now}
+                ></skdx-time>`}
+          ${this.edited?i`<span class="skdx-comment__edited">${this.editedLabel}</span>`:n}
+        </div>
+        <div class="skdx-comment__content"></div>
+        ${this.hasSlotted("attachments")?i`<div class="skdx-comment__attachments"></div>`:n}
+        ${this.hasSlotted("actions")?i`<div class="skdx-comment__actions"></div>`:n}
+      </div>
+    `}};s([r({type:String})],t.prototype,"author",2),s([r({type:String})],t.prototype,"timestamp",2),s([r({attribute:!1})],t.prototype,"now",2),s([r({type:Boolean})],t.prototype,"edited",2),s([r({type:String,attribute:"edited-label"})],t.prototype,"editedLabel",2),t=s([v("skdx-comment","comment","root")],t);export{t as SkdxComment};

package/dist/comment/index.cjs

@@ -0,0 +1 @@
+"use strict";var t=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var n=Object.prototype.hasOwnProperty;var p=(o,m)=>{for(var r in m)t(o,r,{get:m[r],enumerable:!0})},C=(o,m,r,x)=>{if(m&&typeof m=="object"||typeof m=="function")for(let e of k(m))!n.call(o,e)&&e!==r&&t(o,e,{get:()=>m[e],enumerable:!(x=f(m,e))||x.enumerable});return o};var S=o=>C(t({},"__esModule",{value:!0}),o);var a={};p(a,{SkdxComment:()=>d.SkdxComment});module.exports=S(a);var d=require("./Comment.cjs");0&&(module.exports={SkdxComment});

package/dist/comment/index.d.cts

@@ -0,0 +1 @@
+export { SkdxComment } from './Comment.cjs';

package/dist/comment/index.d.ts

@@ -0,0 +1 @@
+export { SkdxComment } from './Comment.js';

package/dist/comment/index.js

@@ -0,0 +1 @@
+import{SkdxComment as e}from"./Comment.js";export{e as SkdxComment};

package/dist/comment-thread/CommentThread.cjs

@@ -0,0 +1,27 @@
+"use strict";var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var E=(t,o)=>{for(var e in o)i(t,e,{get:o[e],enumerable:!0})},k=(t,o,e,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of b(o))!v.call(t,s)&&s!==e&&i(t,s,{get:()=>o[s],enumerable:!(a=m(o,s))||a.enumerable});return t};var f=t=>k(i({},"__esModule",{value:!0}),t),l=(t,o,e,a)=>{for(var s=a>1?void 0:a?m(o,e):o,p=t.length-1,c;p>=0;p--)(c=t[p])&&(s=(a?c(o,e,s):c(s))||s);return a&&s&&i(o,e,s),s};var L={};E(L,{SkdxCommentThread:()=>d});module.exports=f(L);var n=require("lit"),r=require("lit/decorators.js"),u=require("../internal/define.cjs"),g=require("../internal/events.cjs"),x=require("../internal/slots.cjs"),y=require("@skdx/web-components/collapsible"),M=require("@skdx/web-components/primitives/collapsible");var R="data-skdx-comment-thread-generated",h={fromAttribute:t=>t!=="false"};function _(t){t.stopPropagation()}var d=class extends n.LitElement{constructor(){super(...arguments);this.defaultExpanded=!0;this.handleOpenChange=e=>{e.stopPropagation();let a=e.detail;this.uncontrolledExpanded=a,this.requestUpdate(),(0,g.emit)(this,"expanded-change",{expanded:a})}}createRenderRoot(){return this}get isExpanded(){return this.expanded??this.uncontrolledExpanded??this.defaultExpanded}connectedCallback(){super.connectedCallback(),queueMicrotask(()=>this.requestUpdate())}region(e){return this.querySelector(`.skdx-comment-thread__${e}`)}hasSlotted(e){return this.querySelector(`[slot="${e}"], [data-skdx-slot="${e}"]`)!==null}updated(){let e=this.isExpanded;this.setAttribute("data-state",e?"expanded":"collapsed");let a=this.querySelector(":scope > skdx-collapsible");a&&(a.open=e),(0,x.placeSlotted)(this,R,{replies:this.region("replies"),"load-more":this.region("load-more"),composer:this.region("composer")},this.region("comment"))}repliesRegion(){if(!this.showRepliesLabel)return n.html`<div
+        class="skdx-comment-thread__replies"
+        data-skdx-comment-thread-generated
+      ></div>`;let e=this.isExpanded?this.hideRepliesLabel??this.showRepliesLabel:this.showRepliesLabel;return n.html`<skdx-collapsible
+      data-skdx-comment-thread-generated
+      @open-change=${this.handleOpenChange}
+      @open-change-complete=${_}
+    >
+      <skdx-collapsible-trigger class="skdx-comment-thread__toggle"
+        ><span>${e}</span></skdx-collapsible-trigger
+      >
+      <skdx-collapsible-content class="skdx-comment-thread__replies"></skdx-collapsible-content>
+    </skdx-collapsible>`}render(){return n.html`
+      <div
+        class="skdx-comment-thread__comment"
+        data-skdx-comment-thread-generated
+      ></div>
+      ${this.hasSlotted("replies")?this.repliesRegion():n.nothing}
+      ${this.hasSlotted("load-more")?n.html`<div
+              class="skdx-comment-thread__load-more"
+              data-skdx-comment-thread-generated
+            ></div>`:n.nothing}
+      ${this.hasSlotted("composer")?n.html`<div
+              class="skdx-comment-thread__composer"
+              data-skdx-comment-thread-generated
+            ></div>`:n.nothing}
+    `}};l([(0,r.property)({converter:h})],d.prototype,"expanded",2),l([(0,r.property)({converter:h,attribute:"default-expanded"})],d.prototype,"defaultExpanded",2),l([(0,r.property)({type:String,attribute:"show-replies-label"})],d.prototype,"showRepliesLabel",2),l([(0,r.property)({type:String,attribute:"hide-replies-label"})],d.prototype,"hideRepliesLabel",2),d=l([(0,u.customElement)("skdx-comment-thread","comment-thread","root")],d);0&&(module.exports={SkdxCommentThread});

package/dist/comment-thread/CommentThread.d.cts

@@ -0,0 +1,67 @@
+import { LitElement, type TemplateResult } from 'lit';
+import '@skdx/web-components/collapsible';
+import '@skdx/web-components/primitives/collapsible';
+/**
+ * A root comment with its replies, indented one level, collapsible with the
+ * consumer's own labels, plus regions for a load-more control and a composer.
+ *
+ * Renders light DOM, so its parts are classes rather than shadow `::part()`
+ * targets: `.skdx-comment-thread` on the host, then `__comment`, `__toggle`,
+ * `__replies`, `__load-more` and `__composer`. `data-state` on the host reads
+ * `expanded` or `collapsed`.
+ *
+ * @example
+ * ```html
+ * <skdx-comment-thread show-replies-label="Show 1 reply" hide-replies-label="Hide replies">
+ *   <skdx-comment author="Priya Shah">Looks good to me.</skdx-comment>
+ *   <skdx-comment slot="replies" author="Alex">Agreed.</skdx-comment>
+ * </skdx-comment-thread>
+ * ```
+ *
+ * @slot - The root comment this thread replies to.
+ * @slot replies - The reply comments, indented one level below the root comment.
+ * @slot load-more - Control that requests more replies, below the replies region.
+ * @slot composer - Reply composer rendered at the end of the thread.
+ * @fires expanded-change - Fires with the new expanded state whenever the replies toggle is activated.
+ */
+export declare class SkdxCommentThread extends LitElement {
+    /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    /**
+     * Whether the replies are shown, for controlled usage paired with `expanded-change`.
+     * @default undefined — uncontrolled, following `defaultExpanded`.
+     */
+    expanded?: boolean | undefined;
+    /**
+     * Whether the replies start shown, used only while uncontrolled.
+     * @default true
+     */
+    defaultExpanded: boolean;
+    /**
+     * Text of the toggle button while the replies are hidden; a toggle only renders when this is given.
+     * @default undefined — no toggle renders and the replies are always shown.
+     */
+    showRepliesLabel?: string | undefined;
+    /**
+     * Text of the toggle button while the replies are shown.
+     * @default undefined — falls back to the value of `showRepliesLabel`.
+     */
+    hideRepliesLabel?: string | undefined;
+    /** What the toggle last chose; outranked by `expanded` whenever the consumer controls the state. */
+    private uncontrolledExpanded?;
+    /** Whether the replies are shown right now, controlled or not. */
+    private get isExpanded();
+    connectedCallback(): void;
+    private region;
+    /** Whether the consumer supplied anything for `name` — still true once it has been moved in. */
+    private hasSlotted;
+    private readonly handleOpenChange;
+    protected updated(): void;
+    private repliesRegion;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-comment-thread': SkdxCommentThread;
+    }
+}

package/dist/comment-thread/CommentThread.d.ts

@@ -0,0 +1,67 @@
+import { LitElement, type TemplateResult } from 'lit';
+import '@skdx/web-components/collapsible';
+import '@skdx/web-components/primitives/collapsible';
+/**
+ * A root comment with its replies, indented one level, collapsible with the
+ * consumer's own labels, plus regions for a load-more control and a composer.
+ *
+ * Renders light DOM, so its parts are classes rather than shadow `::part()`
+ * targets: `.skdx-comment-thread` on the host, then `__comment`, `__toggle`,
+ * `__replies`, `__load-more` and `__composer`. `data-state` on the host reads
+ * `expanded` or `collapsed`.
+ *
+ * @example
+ * ```html
+ * <skdx-comment-thread show-replies-label="Show 1 reply" hide-replies-label="Hide replies">
+ *   <skdx-comment author="Priya Shah">Looks good to me.</skdx-comment>
+ *   <skdx-comment slot="replies" author="Alex">Agreed.</skdx-comment>
+ * </skdx-comment-thread>
+ * ```
+ *
+ * @slot - The root comment this thread replies to.
+ * @slot replies - The reply comments, indented one level below the root comment.
+ * @slot load-more - Control that requests more replies, below the replies region.
+ * @slot composer - Reply composer rendered at the end of the thread.
+ * @fires expanded-change - Fires with the new expanded state whenever the replies toggle is activated.
+ */
+export declare class SkdxCommentThread extends LitElement {
+    /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    /**
+     * Whether the replies are shown, for controlled usage paired with `expanded-change`.
+     * @default undefined — uncontrolled, following `defaultExpanded`.
+     */
+    expanded?: boolean | undefined;
+    /**
+     * Whether the replies start shown, used only while uncontrolled.
+     * @default true
+     */
+    defaultExpanded: boolean;
+    /**
+     * Text of the toggle button while the replies are hidden; a toggle only renders when this is given.
+     * @default undefined — no toggle renders and the replies are always shown.
+     */
+    showRepliesLabel?: string | undefined;
+    /**
+     * Text of the toggle button while the replies are shown.
+     * @default undefined — falls back to the value of `showRepliesLabel`.
+     */
+    hideRepliesLabel?: string | undefined;
+    /** What the toggle last chose; outranked by `expanded` whenever the consumer controls the state. */
+    private uncontrolledExpanded?;
+    /** Whether the replies are shown right now, controlled or not. */
+    private get isExpanded();
+    connectedCallback(): void;
+    private region;
+    /** Whether the consumer supplied anything for `name` — still true once it has been moved in. */
+    private hasSlotted;
+    private readonly handleOpenChange;
+    protected updated(): void;
+    private repliesRegion;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-comment-thread': SkdxCommentThread;
+    }
+}

package/dist/comment-thread/CommentThread.js

@@ -0,0 +1,27 @@
+var h=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var n=(a,d,e,t)=>{for(var s=t>1?void 0:t?u(d,e):d,i=a.length-1,p;i>=0;i--)(p=a[i])&&(s=(t?p(d,e,s):p(s))||s);return t&&s&&h(d,e,s),s};import{html as l,LitElement as g,nothing as c}from"lit";import{property as r}from"lit/decorators.js";import{customElement as x}from"../internal/define.js";import{emit as b}from"../internal/events.js";import{placeSlotted as v}from"../internal/slots.js";import"@skdx/web-components/collapsible";import"@skdx/web-components/primitives/collapsible";var E="data-skdx-comment-thread-generated",m={fromAttribute:a=>a!=="false"};function k(a){a.stopPropagation()}var o=class extends g{constructor(){super(...arguments);this.defaultExpanded=!0;this.handleOpenChange=e=>{e.stopPropagation();let t=e.detail;this.uncontrolledExpanded=t,this.requestUpdate(),b(this,"expanded-change",{expanded:t})}}createRenderRoot(){return this}get isExpanded(){return this.expanded??this.uncontrolledExpanded??this.defaultExpanded}connectedCallback(){super.connectedCallback(),queueMicrotask(()=>this.requestUpdate())}region(e){return this.querySelector(`.skdx-comment-thread__${e}`)}hasSlotted(e){return this.querySelector(`[slot="${e}"], [data-skdx-slot="${e}"]`)!==null}updated(){let e=this.isExpanded;this.setAttribute("data-state",e?"expanded":"collapsed");let t=this.querySelector(":scope > skdx-collapsible");t&&(t.open=e),v(this,E,{replies:this.region("replies"),"load-more":this.region("load-more"),composer:this.region("composer")},this.region("comment"))}repliesRegion(){if(!this.showRepliesLabel)return l`<div
+        class="skdx-comment-thread__replies"
+        data-skdx-comment-thread-generated
+      ></div>`;let e=this.isExpanded?this.hideRepliesLabel??this.showRepliesLabel:this.showRepliesLabel;return l`<skdx-collapsible
+      data-skdx-comment-thread-generated
+      @open-change=${this.handleOpenChange}
+      @open-change-complete=${k}
+    >
+      <skdx-collapsible-trigger class="skdx-comment-thread__toggle"
+        ><span>${e}</span></skdx-collapsible-trigger
+      >
+      <skdx-collapsible-content class="skdx-comment-thread__replies"></skdx-collapsible-content>
+    </skdx-collapsible>`}render(){return l`
+      <div
+        class="skdx-comment-thread__comment"
+        data-skdx-comment-thread-generated
+      ></div>
+      ${this.hasSlotted("replies")?this.repliesRegion():c}
+      ${this.hasSlotted("load-more")?l`<div
+              class="skdx-comment-thread__load-more"
+              data-skdx-comment-thread-generated
+            ></div>`:c}
+      ${this.hasSlotted("composer")?l`<div
+              class="skdx-comment-thread__composer"
+              data-skdx-comment-thread-generated
+            ></div>`:c}
+    `}};n([r({converter:m})],o.prototype,"expanded",2),n([r({converter:m,attribute:"default-expanded"})],o.prototype,"defaultExpanded",2),n([r({type:String,attribute:"show-replies-label"})],o.prototype,"showRepliesLabel",2),n([r({type:String,attribute:"hide-replies-label"})],o.prototype,"hideRepliesLabel",2),o=n([x("skdx-comment-thread","comment-thread","root")],o);export{o as SkdxCommentThread};

package/dist/comment-thread/index.cjs

@@ -0,0 +1 @@
+"use strict";var d=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var k=(m,e)=>{for(var r in e)d(m,r,{get:e[r],enumerable:!0})},n=(m,e,r,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of f(e))!h.call(m,o)&&o!==r&&d(m,o,{get:()=>e[o],enumerable:!(t=a(e,o))||t.enumerable});return m};var p=m=>n(d({},"__esModule",{value:!0}),m);var C={};k(C,{SkdxCommentThread:()=>x.SkdxCommentThread});module.exports=p(C);var x=require("./CommentThread.cjs");0&&(module.exports={SkdxCommentThread});

package/dist/comment-thread/index.d.cts

@@ -0,0 +1 @@
+export { SkdxCommentThread } from './CommentThread.cjs';

package/dist/comment-thread/index.d.ts

@@ -0,0 +1 @@
+export { SkdxCommentThread } from './CommentThread.js';

package/dist/comment-thread/index.js

@@ -0,0 +1 @@
+import{SkdxCommentThread as o}from"./CommentThread.js";export{o as SkdxCommentThread};

package/dist/confirm-dialog/ConfirmDialog.cjs

@@ -0,0 +1,38 @@
+"use strict";var n=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var y=(i,e)=>{for(var r in e)n(i,r,{get:e[r],enumerable:!0})},k=(i,e,r,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let d of f(e))!b.call(i,d)&&d!==r&&n(i,d,{get:()=>e[d],enumerable:!(l=u(e,d))||l.enumerable});return i};var v=i=>k(n({},"__esModule",{value:!0}),i),s=(i,e,r,l)=>{for(var d=l>1?void 0:l?u(e,r):e,g=i.length-1,p;g>=0;g--)(p=i[g])&&(d=(l?p(e,r,d):p(d))||d);return l&&d&&n(e,r,d),d};var $={};y($,{SkdxConfirmDialog:()=>t});module.exports=v($);var o=require("lit"),a=require("lit/decorators.js"),m=require("../internal/define.cjs"),c=require("../internal/slots.cjs"),T=require("@skdx/web-components/primitives/dialog");var h="data-skdx-confirm-dialog-generated",x={fromAttribute:i=>i!=="false"},t=class extends o.LitElement{constructor(){super(...arguments);this.defaultOpen=!1;this.confirmLabel="Confirm";this.cancelLabel="Cancel";this.destructive=!1;this.pending=!1;this.disabled=!1}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),queueMicrotask(()=>this.requestUpdate())}region(r){return this.querySelector(`.skdx-confirm-dialog__${r}`)}get hasTrigger(){return this.querySelector('[slot="trigger"], [data-skdx-slot="trigger"]')!==null}get hasBody(){return(0,c.hasUnslottedChild)(this,h)||(this.region("body")?.hasChildNodes()??!1)}updated(){(0,c.placeSlotted)(this,h,{trigger:this.querySelector("skdx-dialog-trigger")},this.region("body"))}render(){return o.html`
+      <skdx-dialog-root
+        role="alertdialog"
+        data-skdx-confirm-dialog-generated
+        .open=${this.open}
+        ?default-open=${this.defaultOpen}
+        dismiss=${this.pending?"none":"escape"}
+      >
+        ${this.hasTrigger?o.html`<skdx-dialog-trigger></skdx-dialog-trigger>`:o.nothing}
+        <skdx-dialog-overlay></skdx-dialog-overlay>
+        <skdx-dialog-content
+          .size=${this.size}
+          .status=${this.destructive?"danger":void 0}
+        >
+          <skdx-dialog-title class="skdx-confirm-dialog__title"
+            >${this.title??""}</skdx-dialog-title
+          >
+          ${this.description?o.html`<skdx-dialog-description class="skdx-confirm-dialog__description"
+                  >${this.description}</skdx-dialog-description
+                >`:o.nothing}
+          ${this.hasBody?o.html`<div class="skdx-confirm-dialog__body"></div>`:o.nothing}
+          <div class="skdx-confirm-dialog__footer">
+            <skdx-dialog-cancel
+              class="skdx-confirm-dialog__cancel"
+              ?disabled=${this.pending}
+              >${this.cancelLabel}</skdx-dialog-cancel
+            >
+            <skdx-dialog-action
+              class="skdx-confirm-dialog__confirm"
+              data-status=${this.destructive?"danger":o.nothing}
+              ?data-loading=${this.pending}
+              ?disabled=${this.pending||this.disabled}
+              >${this.confirmLabel}</skdx-dialog-action
+            >
+          </div>
+        </skdx-dialog-content>
+      </skdx-dialog-root>
+    `}};s([(0,a.property)({converter:x})],t.prototype,"open",2),s([(0,a.property)({type:Boolean,attribute:"default-open"})],t.prototype,"defaultOpen",2),s([(0,a.property)({type:String})],t.prototype,"title",2),s([(0,a.property)({type:String})],t.prototype,"description",2),s([(0,a.property)({type:String,attribute:"confirm-label"})],t.prototype,"confirmLabel",2),s([(0,a.property)({type:String,attribute:"cancel-label"})],t.prototype,"cancelLabel",2),s([(0,a.property)({type:Boolean})],t.prototype,"destructive",2),s([(0,a.property)({type:Boolean})],t.prototype,"pending",2),s([(0,a.property)({type:Boolean})],t.prototype,"disabled",2),s([(0,a.property)({type:String})],t.prototype,"size",2),t=s([(0,m.customElement)("skdx-confirm-dialog","confirm-dialog","root")],t);0&&(module.exports={SkdxConfirmDialog});

package/dist/confirm-dialog/ConfirmDialog.d.cts

@@ -0,0 +1,101 @@
+import { LitElement, type TemplateResult } from 'lit';
+import '@skdx/web-components/primitives/dialog';
+/**
+ * Confirmation dialog block for a destructive, irreversible or sensitive
+ * action, composing the core dialog primitives as an alert dialog with an
+ * externally controlled pending state that disables both buttons and blocks
+ * dismissal while the confirmed request is in flight.
+ *
+ * A synchronous confirmation with no pending state is served by the core
+ * `<skdx-dialog role="alertdialog">` recipe alone.
+ *
+ * Renders light DOM, so its parts are classes rather than shadow `::part()`
+ * targets: `.skdx-confirm-dialog` on the host, then `__title`,
+ * `__description`, `__body`, `__footer`, `__cancel` and `__confirm`.
+ *
+ * @example
+ * ```html
+ * <skdx-confirm-dialog
+ *   title="Delete this project?"
+ *   description="This cannot be undone."
+ *   destructive
+ * >
+ *   <span slot="trigger">Delete project</span>
+ * </skdx-confirm-dialog>
+ * ```
+ *
+ * @slot - Extra content rendered between the description and the footer buttons.
+ * @slot trigger - Content of the button that opens the dialog; no trigger renders without it.
+ * @fires open-change - Fires with the new open state whenever the dialog opens or closes, controlled or not.
+ * @fires open-change-complete - Fires with the new open state once the panel's enter or exit animation has settled.
+ * @fires confirm - Fires with the click when the confirm button is activated, before the dialog closes; `preventDefault()` holds the panel open.
+ * @fires cancel - Fires with the click when the cancel button is activated, before the dialog closes; `preventDefault()` keeps the panel open.
+ * @fires escape-key-down - Fires when Escape is pressed while the panel is open; `preventDefault()` keeps it open.
+ * @fires pointer-down-outside - Fires on a pointer-down outside the panel while open; an alert dialog never closes on one.
+ * @fires focus-outside - Fires when focus moves outside the panel while open; an alert dialog never closes on one.
+ * @fires interact-outside - Fires for either kind of outside interaction, just before the specific event.
+ * @fires open-auto-focus - Fires before focus moves into the panel on open; `preventDefault()` leaves focus where it is.
+ * @fires close-auto-focus - Fires before focus returns to the trigger on close; `preventDefault()` suppresses that return.
+ */
+export declare class SkdxConfirmDialog extends LitElement {
+    /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    /**
+     * Whether the dialog is open, for controlled usage; pair it with `open-change`.
+     * @default undefined — uncontrolled, following `defaultOpen`.
+     */
+    open?: boolean | undefined;
+    /**
+     * Whether the dialog starts open, for uncontrolled usage.
+     * @default false
+     */
+    defaultOpen: boolean;
+    /** Heading text rendered into the panel's title, naming and labelling the dialog. */
+    title: string;
+    /**
+     * Supporting sentence rendered into the panel's description, read alongside the title.
+     * @default undefined — no description region renders.
+     */
+    description?: string | undefined;
+    /**
+     * Text of the button that carries out the confirmed action.
+     * @default 'Confirm'
+     */
+    confirmLabel: string;
+    /**
+     * Text of the button that abandons the action.
+     * @default 'Cancel'
+     */
+    cancelLabel: string;
+    /**
+     * Colours the confirm button and the panel danger, for an irreversible or destructive action.
+     * @default false
+     */
+    destructive: boolean;
+    /**
+     * Marks the confirmed request as in flight: disables both buttons, marks the confirm button loading, and blocks Escape dismissal until it clears.
+     * @default false
+     */
+    pending: boolean;
+    /**
+     * Disables the confirm button on its own, independent of `pending` — for example until a typed confirmation matches.
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Panel width rung the skin reads, fed to the underlying dialog panel.
+     * @default undefined — the skin's own default width.
+     */
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
+    connectedCallback(): void;
+    private region;
+    private get hasTrigger();
+    private get hasBody();
+    protected updated(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-confirm-dialog': SkdxConfirmDialog;
+    }
+}

package/dist/confirm-dialog/ConfirmDialog.d.ts

@@ -0,0 +1,101 @@
+import { LitElement, type TemplateResult } from 'lit';
+import '@skdx/web-components/primitives/dialog';
+/**
+ * Confirmation dialog block for a destructive, irreversible or sensitive
+ * action, composing the core dialog primitives as an alert dialog with an
+ * externally controlled pending state that disables both buttons and blocks
+ * dismissal while the confirmed request is in flight.
+ *
+ * A synchronous confirmation with no pending state is served by the core
+ * `<skdx-dialog role="alertdialog">` recipe alone.
+ *
+ * Renders light DOM, so its parts are classes rather than shadow `::part()`
+ * targets: `.skdx-confirm-dialog` on the host, then `__title`,
+ * `__description`, `__body`, `__footer`, `__cancel` and `__confirm`.
+ *
+ * @example
+ * ```html
+ * <skdx-confirm-dialog
+ *   title="Delete this project?"
+ *   description="This cannot be undone."
+ *   destructive
+ * >
+ *   <span slot="trigger">Delete project</span>
+ * </skdx-confirm-dialog>
+ * ```
+ *
+ * @slot - Extra content rendered between the description and the footer buttons.
+ * @slot trigger - Content of the button that opens the dialog; no trigger renders without it.
+ * @fires open-change - Fires with the new open state whenever the dialog opens or closes, controlled or not.
+ * @fires open-change-complete - Fires with the new open state once the panel's enter or exit animation has settled.
+ * @fires confirm - Fires with the click when the confirm button is activated, before the dialog closes; `preventDefault()` holds the panel open.
+ * @fires cancel - Fires with the click when the cancel button is activated, before the dialog closes; `preventDefault()` keeps the panel open.
+ * @fires escape-key-down - Fires when Escape is pressed while the panel is open; `preventDefault()` keeps it open.
+ * @fires pointer-down-outside - Fires on a pointer-down outside the panel while open; an alert dialog never closes on one.
+ * @fires focus-outside - Fires when focus moves outside the panel while open; an alert dialog never closes on one.
+ * @fires interact-outside - Fires for either kind of outside interaction, just before the specific event.
+ * @fires open-auto-focus - Fires before focus moves into the panel on open; `preventDefault()` leaves focus where it is.
+ * @fires close-auto-focus - Fires before focus returns to the trigger on close; `preventDefault()` suppresses that return.
+ */
+export declare class SkdxConfirmDialog extends LitElement {
+    /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    /**
+     * Whether the dialog is open, for controlled usage; pair it with `open-change`.
+     * @default undefined — uncontrolled, following `defaultOpen`.
+     */
+    open?: boolean | undefined;
+    /**
+     * Whether the dialog starts open, for uncontrolled usage.
+     * @default false
+     */
+    defaultOpen: boolean;
+    /** Heading text rendered into the panel's title, naming and labelling the dialog. */
+    title: string;
+    /**
+     * Supporting sentence rendered into the panel's description, read alongside the title.
+     * @default undefined — no description region renders.
+     */
+    description?: string | undefined;
+    /**
+     * Text of the button that carries out the confirmed action.
+     * @default 'Confirm'
+     */
+    confirmLabel: string;
+    /**
+     * Text of the button that abandons the action.
+     * @default 'Cancel'
+     */
+    cancelLabel: string;
+    /**
+     * Colours the confirm button and the panel danger, for an irreversible or destructive action.
+     * @default false
+     */
+    destructive: boolean;
+    /**
+     * Marks the confirmed request as in flight: disables both buttons, marks the confirm button loading, and blocks Escape dismissal until it clears.
+     * @default false
+     */
+    pending: boolean;
+    /**
+     * Disables the confirm button on its own, independent of `pending` — for example until a typed confirmation matches.
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Panel width rung the skin reads, fed to the underlying dialog panel.
+     * @default undefined — the skin's own default width.
+     */
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
+    connectedCallback(): void;
+    private region;
+    private get hasTrigger();
+    private get hasBody();
+    protected updated(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-confirm-dialog': SkdxConfirmDialog;
+    }
+}