@skdx/web-components-blocks 0.34.0 → 0.35.0

package/dist/notification-center/NotificationCenter.d.ts

@@ -0,0 +1,147 @@
+import { LitElement, type TemplateResult } from 'lit';
+import '@skdx/web-components/button';
+import '@skdx/web-components/heading';
+import '@skdx/web-components/skeleton';
+import '@skdx/web-components/time';
+import '../empty-state/index.js';
+/** One entry of a `<skdx-notification-center>` list — a single notification. */
+export interface SkdxNotificationCenterItem {
+    /** Identifier carried back in every event detail, naming which notification was acted on. */
+    id: string;
+    /** Headline text rendered as the notification's title. */
+    title: string;
+    /** Supporting copy rendered below the title. @default undefined — no description renders for this item. */
+    description?: string;
+    /** Instant the notification occurred, rendered into a derived Time. @default undefined — no timestamp renders for this item. */
+    timestamp?: Date | string;
+    /** Whether the notification has been read, driving `data-read` and the toggle label. @default false */
+    read?: boolean;
+}
+/** What a `select` event carries: the notification whose body was activated. */
+export interface SkdxNotificationCenterSelectDetail {
+    /** The notification the user activated. */
+    item: SkdxNotificationCenterItem;
+}
+/** What a `read-change` event carries: the notification and the read state it is moving to. */
+export interface SkdxNotificationCenterReadChangeDetail {
+    /** The notification whose toggle was activated. */
+    item: SkdxNotificationCenterItem;
+    /** The read state the notification is moving to, the opposite of the one it holds. */
+    read: boolean;
+}
+/**
+ * Notification list block: read/unread state, timestamps, a leading visual and
+ * per-item and mark-all-read actions, rendered as panel content for a Popover,
+ * Drawer, Dialog or page — the block owns no overlay of its own.
+ *
+ * Renders light DOM, so its parts are classes rather than shadow `::part()`
+ * targets: `.skdx-notification-center` on the host, then `__header`,
+ * `__title`, `__actions`, `__mark-all-read`, `__loading`, `__empty`, `__list`,
+ * `__item`, `__leading`, `__body`, `__item-title`, `__description`, `__time`,
+ * `__item-actions` and `__read-toggle`. `data-read` sits on an item that has
+ * been read.
+ *
+ * @example
+ * ```html
+ * <skdx-notification-center id="inbox"></skdx-notification-center>
+ * <script>
+ *   const inbox = document.getElementById('inbox');
+ *   inbox.notifications = [{ id: 'a', title: 'Build finished' }];
+ *   inbox.addEventListener('select', (event) => open(event.detail.item));
+ * </script>
+ * ```
+ *
+ * @slot actions - Header controls rendered beside the mark-all-read button.
+ * @fires select - Fires with `{ item }` when a notification body is activated; the body is a button only while a `select` listener is bound on this element.
+ * @fires read-change - Fires with `{ item, read }` when a per-item toggle is activated; no toggle renders until a `read-change` listener is bound on this element.
+ * @fires mark-all-read - Fires when the mark-all-read button is activated; no such button renders until a `mark-all-read` listener is bound on this element.
+ */
+export declare class SkdxNotificationCenter extends LitElement {
+    /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    /** The notifications to list, in render order, each with an id, a title and read state. */
+    notifications: readonly SkdxNotificationCenterItem[];
+    /**
+     * Heading text, rendered into a derived Heading that names the section.
+     * @default 'Notifications'
+     */
+    title: string;
+    /**
+     * Outline level of the derived title heading, lowered or raised to fit the surrounding outline.
+     * @default 2
+     */
+    headingLevel: 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Text of the mark-all-read button, which renders only while the event is listened for.
+     * @default 'Mark all as read'
+     */
+    markAllReadLabel: string;
+    /**
+     * Text of a per-item toggle while its notification is unread.
+     * @default 'Mark as read'
+     */
+    markReadLabel: string;
+    /**
+     * Text of a per-item toggle while its notification is read.
+     * @default 'Mark as unread'
+     */
+    markUnreadLabel: string;
+    /**
+     * Heading text of the derived EmptyState shown when there is nothing to list.
+     * @default 'No notifications'
+     */
+    emptyTitle: string;
+    /**
+     * Supporting copy of the derived EmptyState shown when there is nothing to list.
+     * @default undefined — the empty state renders its heading alone.
+     */
+    emptyDescription?: string | undefined;
+    /**
+     * Swaps the list for a skeleton placeholder region while the notifications load.
+     * @default false
+     */
+    loading: boolean;
+    /**
+     * Reference instant every item timestamp measures its relative label from.
+     * @default undefined — each Time reads the instant once at render.
+     */
+    now?: Date | number | undefined;
+    /**
+     * Renders a decorative avatar or icon beside one notification, always `aria-hidden`.
+     * @default undefined — no leading region renders.
+     */
+    renderLeading?: ((item: SkdxNotificationCenterItem) => unknown) | undefined;
+    /**
+     * Renders extra controls beside one notification's read/unread toggle.
+     * @default undefined — no extra per-item controls render.
+     */
+    renderActions?: ((item: SkdxNotificationCenterItem) => unknown) | undefined;
+    /** Generated title id, published as the section's `aria-labelledby`. */
+    private readonly titleId;
+    /** How many listeners each gated event holds, so the anatomy it drives renders only while one is bound. */
+    private readonly gated;
+    /** @internal Standard DOM registration, counted so a listener-gated region knows it has one. */
+    addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, event: HTMLElementEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+    /** @internal Standard DOM removal, counted so a listener-gated region knows it lost one. */
+    removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, event: HTMLElementEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    private countListener;
+    /** Whether the consumer is listening for `type` on this element, which is what renders its control. */
+    private handles;
+    connectedCallback(): void;
+    private region;
+    /** Whether the consumer supplied anything for `name` — still true once it has been moved in. */
+    private hasSlotted;
+    protected updated(): void;
+    private readonly markAllRead;
+    private itemBody;
+    private notificationRow;
+    private content;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-notification-center': SkdxNotificationCenter;
+    }
+}

package/dist/notification-center/NotificationCenter.js

@@ -0,0 +1,74 @@
+var u=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var a=(c,d,e,i)=>{for(var t=i>1?void 0:i?v(d,e):d,l=c.length-1,m;l>=0;l--)(m=c[l])&&(t=(i?m(d,e,t):m(t))||t);return i&&t&&u(d,e,t),t};import{html as n,LitElement as h,nothing as o}from"lit";import{property as s}from"lit/decorators.js";import{customElement as k}from"../internal/define.js";import{emit as p}from"../internal/events.js";import{placeSlotted as g}from"../internal/slots.js";import"@skdx/web-components/button";import"@skdx/web-components/heading";import"@skdx/web-components/skeleton";import"@skdx/web-components/time";import"../empty-state/index.js";var b="data-skdx-notification-center-generated",f=["select","read-change","mark-all-read"],L=[0,1,2],x=0,r=class extends h{constructor(){super(...arguments);this.title="Notifications";this.headingLevel=2;this.markAllReadLabel="Mark all as read";this.markReadLabel="Mark as read";this.markUnreadLabel="Mark as unread";this.emptyTitle="No notifications";this.loading=!1;this.titleId=`skdx-notification-center-title-${++x}`;this.gated=new Map;this.markAllRead=()=>{p(this,"mark-all-read")}}createRenderRoot(){return this}addEventListener(e,i,t){super.addEventListener(e,i,t),this.countListener(e,1)}removeEventListener(e,i,t){super.removeEventListener(e,i,t),this.countListener(e,-1)}countListener(e,i){f.includes(e)&&(this.gated.set(e,Math.max(0,(this.gated.get(e)??0)+i)),this.requestUpdate())}handles(e){return(this.gated.get(e)??0)>0}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.setAttribute("aria-labelledby",this.titleId),queueMicrotask(()=>this.requestUpdate())}region(e){return this.querySelector(`.skdx-notification-center__${e}`)}hasSlotted(e){return this.querySelector(`[slot="${e}"]`)!==null}updated(){this.setAttribute("aria-busy",String(this.loading)),g(this,b,{actions:this.region("actions")},null)}itemBody(e){return n`<span class="skdx-notification-center__item-title">${e.title}</span> ${e.description?n`<span class="skdx-notification-center__description">${e.description}</span>`:o}
+      ${e.timestamp===void 0?o:n`<skdx-time
+              class="skdx-notification-center__time"
+              relative
+              .value=${e.timestamp}
+              .now=${this.now}
+            ></skdx-time>`}`}notificationRow(e){let i=this.handles("select"),t=this.handles("read-change");return n`<li
+      class="skdx-notification-center__item"
+      ?data-read=${e.read===!0}
+    >
+      ${this.renderLeading?n`<div
+              class="skdx-notification-center__leading"
+              aria-hidden="true"
+            >
+              ${this.renderLeading(e)}
+            </div>`:o}
+      ${i?n`<button
+              class="skdx-notification-center__body"
+              type="button"
+              @click=${()=>{p(this,"select",{item:e})}}
+            >
+              ${this.itemBody(e)}
+            </button>`:n`<div class="skdx-notification-center__body">${this.itemBody(e)}</div>`}
+      ${t||this.renderActions?n`<div class="skdx-notification-center__item-actions">
+              ${this.renderActions?.(e)}
+              ${t?n`<skdx-button
+                      class="skdx-notification-center__read-toggle"
+                      .size=${"sm"}
+                      .variant=${"ghost"}
+                      @click=${()=>{p(this,"read-change",{item:e,read:e.read!==!0})}}
+                      >${e.read===!0?this.markUnreadLabel:this.markReadLabel}</skdx-button
+                    >`:o}
+            </div>`:o}
+    </li>`}content(e){return this.loading?n`<div
+        class="skdx-notification-center__loading"
+        aria-hidden="true"
+        data-skdx-notification-center-generated
+      >
+        ${L.map(()=>n`<skdx-skeleton .shape=${"line"}></skdx-skeleton>`)}
+      </div>`:e.length===0?n`<skdx-empty-state
+        class="skdx-notification-center__empty"
+        data-skdx-notification-center-generated
+        .title=${this.emptyTitle}
+        .description=${this.emptyDescription}
+        .size=${"sm"}
+      ></skdx-empty-state>`:n`<ul
+      class="skdx-notification-center__list"
+      data-skdx-notification-center-generated
+    >
+      ${e.map(i=>this.notificationRow(i))}
+    </ul>`}render(){let e=this.notifications??[],i=e.filter(l=>l.read!==!0).length,t=this.handles("mark-all-read");return n`
+      <div
+        class="skdx-notification-center__header"
+        data-skdx-notification-center-generated
+      >
+        <skdx-heading
+          class="skdx-notification-center__title"
+          as=${`h${this.headingLevel}`}
+          id=${this.titleId}
+          >${this.title}</skdx-heading
+        >
+        ${this.hasSlotted("actions")||t?n`<div class="skdx-notification-center__actions">
+                ${t?n`<skdx-button
+                        class="skdx-notification-center__mark-all-read"
+                        .size=${"sm"}
+                        .variant=${"ghost"}
+                        ?disabled=${i===0}
+                        @click=${this.markAllRead}
+                        >${this.markAllReadLabel}</skdx-button
+                      >`:o}
+              </div>`:o}
+      </div>
+      ${this.content(e)}
+    `}};a([s({attribute:!1})],r.prototype,"notifications",2),a([s({type:String})],r.prototype,"title",2),a([s({type:Number,attribute:"heading-level"})],r.prototype,"headingLevel",2),a([s({type:String,attribute:"mark-all-read-label"})],r.prototype,"markAllReadLabel",2),a([s({type:String,attribute:"mark-read-label"})],r.prototype,"markReadLabel",2),a([s({type:String,attribute:"mark-unread-label"})],r.prototype,"markUnreadLabel",2),a([s({type:String,attribute:"empty-title"})],r.prototype,"emptyTitle",2),a([s({type:String,attribute:"empty-description"})],r.prototype,"emptyDescription",2),a([s({type:Boolean})],r.prototype,"loading",2),a([s({attribute:!1})],r.prototype,"now",2),a([s({attribute:!1})],r.prototype,"renderLeading",2),a([s({attribute:!1})],r.prototype,"renderActions",2),r=a([k("skdx-notification-center","notification-center","root")],r);export{r as SkdxNotificationCenter};

package/dist/notification-center/index.cjs

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

package/dist/notification-center/index.d.cts

@@ -0,0 +1 @@
+export { SkdxNotificationCenter, type SkdxNotificationCenterItem, type SkdxNotificationCenterReadChangeDetail, type SkdxNotificationCenterSelectDetail, } from './NotificationCenter.cjs';

package/dist/notification-center/index.d.ts

@@ -0,0 +1 @@
+export { SkdxNotificationCenter, type SkdxNotificationCenterItem, type SkdxNotificationCenterReadChangeDetail, type SkdxNotificationCenterSelectDetail, } from './NotificationCenter.js';

package/dist/notification-center/index.js

@@ -0,0 +1 @@
+import{SkdxNotificationCenter as i}from"./NotificationCenter.js";export{i as SkdxNotificationCenter};

package/dist/onboarding-checklist/OnboardingChecklist.cjs

@@ -0,0 +1,55 @@
+"use strict";var p=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var x=(n,i)=>{for(var e in i)p(n,e,{get:i[e],enumerable:!0})},$=(n,i,e,s)=>{if(i&&typeof i=="object"||typeof i=="function")for(let a of u(i))!k.call(n,a)&&a!==e&&p(n,a,{get:()=>i[a],enumerable:!(s=b(i,a))||s.enumerable});return n};var _=n=>$(p({},"__esModule",{value:!0}),n),o=(n,i,e,s)=>{for(var a=s>1?void 0:s?b(i,e):i,r=n.length-1,c;r>=0;r--)(c=n[r])&&(a=(s?c(i,e,a):c(a))||a);return s&&a&&p(i,e,a),a};var L={};x(L,{SkdxOnboardingChecklist:()=>l});module.exports=_(L);var t=require("lit"),d=require("lit/decorators.js"),m=require("../internal/define.cjs"),g=require("../internal/events.cjs"),I=require("@skdx/web-components/button"),T=require("@skdx/web-components/heading"),R=require("@skdx/web-components/progress"),E=require("@skdx/web-components/text"),M=require("@skdx/web-components/visually-hidden");function v(n,i){return`${n}/${i}`}var y=0,l=class extends t.LitElement{constructor(){super(...arguments);this.headingLevel=2;this.completeLabel="Completed";this.optionalLabel="Optional";this.titleId=`skdx-onboarding-checklist-title-${++y}`}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.setAttribute("aria-labelledby",this.titleId)}renderItem(e){let s=e.state??"pending";return t.html`<li
+      class="skdx-onboarding-checklist__item"
+      data-state=${s}
+      aria-current=${s==="active"?"step":t.nothing}
+    >
+      <span
+        class="skdx-onboarding-checklist__indicator"
+        aria-hidden="true"
+      ></span>
+      <div class="skdx-onboarding-checklist__body">
+        <span class="skdx-onboarding-checklist__item-title"
+          >${e.label}${s==="complete"?t.html`<skdx-visually-hidden> ${this.completeLabel}</skdx-visually-hidden>`:t.nothing}</span
+        >
+        ${e.optional?t.html`<span class="skdx-onboarding-checklist__optional">${this.optionalLabel}</span>`:t.nothing}
+        ${e.description?t.html`<skdx-text
+                class="skdx-onboarding-checklist__item-description"
+                as="p"
+                .tone=${"muted"}
+                >${e.description}</skdx-text
+              >`:t.nothing}
+      </div>
+      ${e.actionLabel&&s!=="complete"?t.html`<skdx-button
+              class="skdx-onboarding-checklist__action"
+              .size=${"sm"}
+              .variant=${s==="active"?"primary":"secondary"}
+              ?disabled=${s==="disabled"}
+              @click=${()=>{(0,g.emit)(this,"action",e)}}
+              >${e.actionLabel}</skdx-button
+            >`:t.nothing}
+    </li>`}render(){let e=this.items??[],s=e.filter(r=>(r.state??"pending")==="complete").length,a=this.getProgressLabel??v;return t.html`
+      <div class="skdx-onboarding-checklist__header">
+        <skdx-heading
+          class="skdx-onboarding-checklist__title"
+          as=${`h${this.headingLevel}`}
+          id=${this.titleId}
+          >${this.title??""}</skdx-heading
+        >
+        ${this.description?t.html`<skdx-text
+                class="skdx-onboarding-checklist__description"
+                as="p"
+                .tone=${"muted"}
+                >${this.description}</skdx-text
+              >`:t.nothing}
+        ${e.length?t.html`<skdx-progress
+                class="skdx-onboarding-checklist__progress"
+                .value=${s}
+                .max=${e.length}
+                aria-labelledby=${this.titleId}
+                .getValueLabel=${(r,c,h)=>a(r,h)}
+              ></skdx-progress>`:t.nothing}
+      </div>
+      <ol class="skdx-onboarding-checklist__list">
+        ${e.map(r=>this.renderItem(r))}
+      </ol>
+    `}};o([(0,d.property)({type:String})],l.prototype,"title",2),o([(0,d.property)({type:String})],l.prototype,"description",2),o([(0,d.property)({type:Number,attribute:"heading-level"})],l.prototype,"headingLevel",2),o([(0,d.property)({attribute:!1})],l.prototype,"items",2),o([(0,d.property)({attribute:!1})],l.prototype,"getProgressLabel",2),o([(0,d.property)({type:String,attribute:"complete-label"})],l.prototype,"completeLabel",2),o([(0,d.property)({type:String,attribute:"optional-label"})],l.prototype,"optionalLabel",2),l=o([(0,m.customElement)("skdx-onboarding-checklist","onboarding-checklist","root")],l);0&&(module.exports={SkdxOnboardingChecklist});

package/dist/onboarding-checklist/OnboardingChecklist.d.cts

@@ -0,0 +1,89 @@
+import { LitElement, type TemplateResult } from 'lit';
+import '@skdx/web-components/button';
+import '@skdx/web-components/heading';
+import '@skdx/web-components/progress';
+import '@skdx/web-components/text';
+import '@skdx/web-components/visually-hidden';
+/** Completion state of one `<skdx-onboarding-checklist>` item, mirrored to `data-state`. */
+export type SkdxOnboardingChecklistItemState = 'pending' | 'active' | 'complete' | 'disabled';
+/** One task of a `<skdx-onboarding-checklist>` — a single setup, launch or configuration step. */
+export interface SkdxOnboardingChecklistItem {
+    /** Stable identifier carried back in the `action` event's detail. */
+    id: string;
+    /** Text naming the task, rendered as the item's title. */
+    label: string;
+    /** Supporting copy rendered below the label, explaining the task. @default undefined — no item description renders. */
+    description?: string;
+    /** Completion state, mirrored to `data-state` and driving the indicator glyph. @default 'pending' */
+    state?: SkdxOnboardingChecklistItemState;
+    /** Marks the task as skippable, rendering the optional label beside its title. @default false */
+    optional?: boolean;
+    /** Text of the item's action button, which renders only alongside a non-complete state. @default undefined — no action button renders. */
+    actionLabel?: string;
+}
+/**
+ * Progress checklist block: a header naming the checklist with an overall
+ * Progress meter, above an ordered list of tasks each carrying its own
+ * completion state and an optional action.
+ *
+ * Renders light DOM, so its parts are classes rather than shadow `::part()`
+ * targets: `.skdx-onboarding-checklist` on the host, then `__header`,
+ * `__title`, `__description`, `__progress`, `__list`, `__item`, `__indicator`,
+ * `__body`, `__item-title`, `__optional`, `__item-description` and `__action`.
+ * `data-state` sits on each item for the skin to read.
+ *
+ * @example
+ * ```html
+ * <skdx-onboarding-checklist id="setup" title="Get started"></skdx-onboarding-checklist>
+ * <script>
+ *   const list = document.getElementById('setup');
+ *   list.items = [{ id: 'invite', label: 'Invite a teammate', actionLabel: 'Invite' }];
+ *   list.addEventListener('action', (event) => console.log(event.detail.id));
+ * </script>
+ * ```
+ *
+ * @fires action - Fires when an item's action button is activated, carrying the full item that was acted on.
+ */
+export declare class SkdxOnboardingChecklist extends LitElement {
+    /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    /** Heading text naming the checklist, rendered into a derived Heading that names the section. */
+    title: string;
+    /**
+     * Supporting copy rendered below the title, explaining what the checklist covers.
+     * @default undefined — no description region renders.
+     */
+    description?: string | undefined;
+    /**
+     * Outline level of the derived title heading, lowered or raised to fit the surrounding outline.
+     * @default 2
+     */
+    headingLevel: 1 | 2 | 3 | 4 | 5 | 6;
+    /** The tasks to complete, in render order, each with its own state, optional flag and action label. */
+    items: readonly SkdxOnboardingChecklistItem[];
+    /**
+     * Formats the overall progress meter's readout from the completed and total item counts.
+     * @default defaultGetProgressLabel — reads "1/3".
+     */
+    getProgressLabel?: (complete: number, total: number) => string;
+    /**
+     * Visually hidden text appended after a completed item's title, announcing its completion.
+     * @default 'Completed'
+     */
+    completeLabel: string;
+    /**
+     * Text rendered beside an optional item's title.
+     * @default 'Optional'
+     */
+    optionalLabel: string;
+    /** Generated title id, published as the section's `aria-labelledby`. */
+    private readonly titleId;
+    connectedCallback(): void;
+    private renderItem;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-onboarding-checklist': SkdxOnboardingChecklist;
+    }
+}

package/dist/onboarding-checklist/OnboardingChecklist.d.ts

@@ -0,0 +1,89 @@
+import { LitElement, type TemplateResult } from 'lit';
+import '@skdx/web-components/button';
+import '@skdx/web-components/heading';
+import '@skdx/web-components/progress';
+import '@skdx/web-components/text';
+import '@skdx/web-components/visually-hidden';
+/** Completion state of one `<skdx-onboarding-checklist>` item, mirrored to `data-state`. */
+export type SkdxOnboardingChecklistItemState = 'pending' | 'active' | 'complete' | 'disabled';
+/** One task of a `<skdx-onboarding-checklist>` — a single setup, launch or configuration step. */
+export interface SkdxOnboardingChecklistItem {
+    /** Stable identifier carried back in the `action` event's detail. */
+    id: string;
+    /** Text naming the task, rendered as the item's title. */
+    label: string;
+    /** Supporting copy rendered below the label, explaining the task. @default undefined — no item description renders. */
+    description?: string;
+    /** Completion state, mirrored to `data-state` and driving the indicator glyph. @default 'pending' */
+    state?: SkdxOnboardingChecklistItemState;
+    /** Marks the task as skippable, rendering the optional label beside its title. @default false */
+    optional?: boolean;
+    /** Text of the item's action button, which renders only alongside a non-complete state. @default undefined — no action button renders. */
+    actionLabel?: string;
+}
+/**
+ * Progress checklist block: a header naming the checklist with an overall
+ * Progress meter, above an ordered list of tasks each carrying its own
+ * completion state and an optional action.
+ *
+ * Renders light DOM, so its parts are classes rather than shadow `::part()`
+ * targets: `.skdx-onboarding-checklist` on the host, then `__header`,
+ * `__title`, `__description`, `__progress`, `__list`, `__item`, `__indicator`,
+ * `__body`, `__item-title`, `__optional`, `__item-description` and `__action`.
+ * `data-state` sits on each item for the skin to read.
+ *
+ * @example
+ * ```html
+ * <skdx-onboarding-checklist id="setup" title="Get started"></skdx-onboarding-checklist>
+ * <script>
+ *   const list = document.getElementById('setup');
+ *   list.items = [{ id: 'invite', label: 'Invite a teammate', actionLabel: 'Invite' }];
+ *   list.addEventListener('action', (event) => console.log(event.detail.id));
+ * </script>
+ * ```
+ *
+ * @fires action - Fires when an item's action button is activated, carrying the full item that was acted on.
+ */
+export declare class SkdxOnboardingChecklist extends LitElement {
+    /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    /** Heading text naming the checklist, rendered into a derived Heading that names the section. */
+    title: string;
+    /**
+     * Supporting copy rendered below the title, explaining what the checklist covers.
+     * @default undefined — no description region renders.
+     */
+    description?: string | undefined;
+    /**
+     * Outline level of the derived title heading, lowered or raised to fit the surrounding outline.
+     * @default 2
+     */
+    headingLevel: 1 | 2 | 3 | 4 | 5 | 6;
+    /** The tasks to complete, in render order, each with its own state, optional flag and action label. */
+    items: readonly SkdxOnboardingChecklistItem[];
+    /**
+     * Formats the overall progress meter's readout from the completed and total item counts.
+     * @default defaultGetProgressLabel — reads "1/3".
+     */
+    getProgressLabel?: (complete: number, total: number) => string;
+    /**
+     * Visually hidden text appended after a completed item's title, announcing its completion.
+     * @default 'Completed'
+     */
+    completeLabel: string;
+    /**
+     * Text rendered beside an optional item's title.
+     * @default 'Optional'
+     */
+    optionalLabel: string;
+    /** Generated title id, published as the section's `aria-labelledby`. */
+    private readonly titleId;
+    connectedCallback(): void;
+    private renderItem;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-onboarding-checklist': SkdxOnboardingChecklist;
+    }
+}

package/dist/onboarding-checklist/OnboardingChecklist.js

@@ -0,0 +1,55 @@
+var m=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var n=(c,r,e,t)=>{for(var s=t>1?void 0:t?g(r,e):r,a=c.length-1,p;a>=0;a--)(p=c[a])&&(s=(t?p(r,e,s):p(s))||s);return t&&s&&m(r,e,s),s};import{html as l,LitElement as h,nothing as o}from"lit";import{property as d}from"lit/decorators.js";import{customElement as u}from"../internal/define.js";import{emit as k}from"../internal/events.js";import"@skdx/web-components/button";import"@skdx/web-components/heading";import"@skdx/web-components/progress";import"@skdx/web-components/text";import"@skdx/web-components/visually-hidden";function x(c,r){return`${c}/${r}`}var $=0,i=class extends h{constructor(){super(...arguments);this.headingLevel=2;this.completeLabel="Completed";this.optionalLabel="Optional";this.titleId=`skdx-onboarding-checklist-title-${++$}`}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.setAttribute("aria-labelledby",this.titleId)}renderItem(e){let t=e.state??"pending";return l`<li
+      class="skdx-onboarding-checklist__item"
+      data-state=${t}
+      aria-current=${t==="active"?"step":o}
+    >
+      <span
+        class="skdx-onboarding-checklist__indicator"
+        aria-hidden="true"
+      ></span>
+      <div class="skdx-onboarding-checklist__body">
+        <span class="skdx-onboarding-checklist__item-title"
+          >${e.label}${t==="complete"?l`<skdx-visually-hidden> ${this.completeLabel}</skdx-visually-hidden>`:o}</span
+        >
+        ${e.optional?l`<span class="skdx-onboarding-checklist__optional">${this.optionalLabel}</span>`:o}
+        ${e.description?l`<skdx-text
+                class="skdx-onboarding-checklist__item-description"
+                as="p"
+                .tone=${"muted"}
+                >${e.description}</skdx-text
+              >`:o}
+      </div>
+      ${e.actionLabel&&t!=="complete"?l`<skdx-button
+              class="skdx-onboarding-checklist__action"
+              .size=${"sm"}
+              .variant=${t==="active"?"primary":"secondary"}
+              ?disabled=${t==="disabled"}
+              @click=${()=>{k(this,"action",e)}}
+              >${e.actionLabel}</skdx-button
+            >`:o}
+    </li>`}render(){let e=this.items??[],t=e.filter(a=>(a.state??"pending")==="complete").length,s=this.getProgressLabel??x;return l`
+      <div class="skdx-onboarding-checklist__header">
+        <skdx-heading
+          class="skdx-onboarding-checklist__title"
+          as=${`h${this.headingLevel}`}
+          id=${this.titleId}
+          >${this.title??""}</skdx-heading
+        >
+        ${this.description?l`<skdx-text
+                class="skdx-onboarding-checklist__description"
+                as="p"
+                .tone=${"muted"}
+                >${this.description}</skdx-text
+              >`:o}
+        ${e.length?l`<skdx-progress
+                class="skdx-onboarding-checklist__progress"
+                .value=${t}
+                .max=${e.length}
+                aria-labelledby=${this.titleId}
+                .getValueLabel=${(a,p,b)=>s(a,b)}
+              ></skdx-progress>`:o}
+      </div>
+      <ol class="skdx-onboarding-checklist__list">
+        ${e.map(a=>this.renderItem(a))}
+      </ol>
+    `}};n([d({type:String})],i.prototype,"title",2),n([d({type:String})],i.prototype,"description",2),n([d({type:Number,attribute:"heading-level"})],i.prototype,"headingLevel",2),n([d({attribute:!1})],i.prototype,"items",2),n([d({attribute:!1})],i.prototype,"getProgressLabel",2),n([d({type:String,attribute:"complete-label"})],i.prototype,"completeLabel",2),n([d({type:String,attribute:"optional-label"})],i.prototype,"optionalLabel",2),i=n([u("skdx-onboarding-checklist","onboarding-checklist","root")],i);export{i as SkdxOnboardingChecklist};

package/dist/onboarding-checklist/index.cjs

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

package/dist/onboarding-checklist/index.d.cts

@@ -0,0 +1 @@
+export { SkdxOnboardingChecklist, type SkdxOnboardingChecklistItem, type SkdxOnboardingChecklistItemState, } from './OnboardingChecklist.cjs';

package/dist/onboarding-checklist/index.d.ts

@@ -0,0 +1 @@
+export { SkdxOnboardingChecklist, type SkdxOnboardingChecklistItem, type SkdxOnboardingChecklistItemState, } from './OnboardingChecklist.js';

package/dist/onboarding-checklist/index.js

@@ -0,0 +1 @@
+import{SkdxOnboardingChecklist as d}from"./OnboardingChecklist.js";export{d as SkdxOnboardingChecklist};

package/dist/reset-password-page/ResetPasswordPage.cjs

@@ -0,0 +1,59 @@
+"use strict";var p=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var w=Object.prototype.hasOwnProperty;var v=(i,e)=>{for(var t in e)p(i,t,{get:e[t],enumerable:!0})},y=(i,e,t,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of x(e))!w.call(i,r)&&r!==t&&p(i,r,{get:()=>e[r],enumerable:!(o=u(e,r))||o.enumerable});return i};var $=i=>y(p({},"__esModule",{value:!0}),i),d=(i,e,t,o)=>{for(var r=o>1?void 0:o?u(e,t):e,l=i.length-1,m;l>=0;l--)(m=i[l])&&(r=(o?m(e,t,r):m(r))||r);return o&&r&&p(e,t,r),r};var C={};v(C,{SkdxResetPasswordPage:()=>a});module.exports=$(C);var s=require("lit"),n=require("lit/decorators.js"),f=require("../internal/define.cjs"),k=require("../internal/events.cjs"),c=require("../internal/slots.cjs"),M=require("@skdx/web-components/alert"),q=require("@skdx/web-components/button"),S=require("@skdx/web-components/field"),T=require("@skdx/web-components/form"),V=require("@skdx/web-components/heading"),N=require("@skdx/web-components/password-input");var h="data-skdx-reset-password-page-generated",_="data-skdx-reset-password-page-content",g="confirmPassword",E=0,a=class extends s.LitElement{constructor(){super(...arguments);this.title="Choose a new password";this.pending=!1;this.passwordLabel="New password";this.passwordMismatchMessage="Passwords do not match";this.submitLabel="Update password";this.titleId=`skdx-reset-password-page-title-${++E}`;this.handleSubmit=t=>{let o=t.target?.closest("skdx-form");if(!o)return;t.preventDefault();let r=b(o,"password")?.value??"",l=b(o,g);if(l&&l.value!==r){l.setCustomValidity(this.passwordMismatchMessage),l.reportValidity();return}(0,k.emit)(this,"reset-password",{password:r})};this.clearMismatch=t=>{t.target.setCustomValidity("")}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.setAttribute("aria-labelledby",this.titleId),this.addEventListener("submit",this.handleSubmit),queueMicrotask(()=>this.requestUpdate())}disconnectedCallback(){this.removeEventListener("submit",this.handleSubmit),super.disconnectedCallback()}hasSlotted(t){return this.querySelector(`[slot="${t}"]`)!==null}region(t){return this.querySelector(`.skdx-reset-password-page__${t}`)}get contentRegion(){return this.querySelector(`[${_}]`)}get hasContent(){return(0,c.hasUnslottedChild)(this,h)||(this.contentRegion?.hasChildNodes()??!1)}updated(){(0,c.placeSlotted)(this,h,{requirements:this.region("requirements"),footer:this.region("footer")},this.contentRegion)}render(){return s.html`
+      <div
+        class="skdx-reset-password-page__panel"
+        data-skdx-reset-password-page-generated
+      >
+        <skdx-heading
+          class="skdx-reset-password-page__title"
+          as="h1"
+          id=${this.titleId}
+          >${this.title}</skdx-heading
+        >
+        ${this.error?s.html`<skdx-alert
+                class="skdx-reset-password-page__error"
+                .status=${"danger"}
+                >${this.error}</skdx-alert
+              >`:s.nothing}
+        ${this.success?s.html`<skdx-alert
+                class="skdx-reset-password-page__success"
+                .status=${"success"}
+                >${this.success}</skdx-alert
+              >`:s.html`<skdx-form class="skdx-reset-password-page__form">
+                <form>
+                  <skdx-field
+                    class="skdx-reset-password-page__field"
+                    label=${this.passwordLabel}
+                    required
+                  >
+                    <skdx-password-input
+                      name="password"
+                      required
+                    ></skdx-password-input>
+                    ${this.hasSlotted("requirements")?s.html`<skdx-field-description
+                            class="skdx-reset-password-page__requirements"
+                          ></skdx-field-description>`:s.nothing}
+                  </skdx-field>
+                  ${this.confirmPasswordLabel===void 0?s.nothing:s.html`<skdx-field
+                          class="skdx-reset-password-page__field"
+                          label=${this.confirmPasswordLabel}
+                          required
+                        >
+                          <skdx-password-input
+                            name=${g}
+                            required
+                            @value-change=${this.clearMismatch}
+                          ></skdx-password-input>
+                        </skdx-field>`}
+                  ${this.hasContent?s.html`<div data-skdx-reset-password-page-content></div>`:s.nothing}
+                  <skdx-button
+                    class="skdx-reset-password-page__submit"
+                    type="submit"
+                    ?loading=${this.pending}
+                    ?disabled=${this.pending}
+                    >${this.submitLabel}</skdx-button
+                  >
+                </form>
+              </skdx-form>`}
+        ${this.hasSlotted("footer")?s.html`<div class="skdx-reset-password-page__footer"></div>`:s.nothing}
+      </div>
+    `}};d([(0,n.property)({type:String})],a.prototype,"title",2),d([(0,n.property)({type:String})],a.prototype,"error",2),d([(0,n.property)({type:String})],a.prototype,"success",2),d([(0,n.property)({type:Boolean})],a.prototype,"pending",2),d([(0,n.property)({type:String,attribute:"password-label"})],a.prototype,"passwordLabel",2),d([(0,n.property)({type:String,attribute:"confirm-password-label"})],a.prototype,"confirmPasswordLabel",2),d([(0,n.property)({type:String,attribute:"password-mismatch-message"})],a.prototype,"passwordMismatchMessage",2),d([(0,n.property)({type:String,attribute:"submit-label"})],a.prototype,"submitLabel",2),a=d([(0,f.customElement)("skdx-reset-password-page","reset-password-page","root")],a);function b(i,e){return i.querySelector(`[name="${e}"]`)}0&&(module.exports={SkdxResetPasswordPage});