@skdx/web-components-blocks 0.34.0 → 0.35.0

package/dist/usage-card/UsageCard.js

@@ -0,0 +1,42 @@
+var p=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var s=(l,r,e,a)=>{for(var i=a>1?void 0:a?h(r,e):r,o=l.length-1,m;o>=0;o--)(m=l[o])&&(i=(a?m(r,e,i):m(i))||i);return a&&i&&p(r,e,i),i};import{html as d,LitElement as f,nothing as u}from"lit";import{property as n}from"lit/decorators.js";import{customElement as b}from"../internal/define.js";import{placeSlotted as v}from"../internal/slots.js";import{normalizeUsage as x,usageMeter as $}from"./usage.js";import"@skdx/web-components/progress";import"@skdx/web-components/text";var _="data-skdx-usage-card-generated",k=0;function g(l,r,e){e===void 0?l.removeAttribute(r):l.setAttribute(r,e)}var t=class extends f{constructor(){super(...arguments);this.unlimitedLabel="Unlimited";this.labelId=`skdx-usage-card-label-${++k}`}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute("role","group"),this.setAttribute("aria-labelledby",this.labelId),queueMicrotask(()=>this.requestUpdate())}region(e){return this.querySelector(`.skdx-usage-card__${e}`)}hasSlotted(e){return this.querySelector(`[slot="${e}"]`)!==null}get format(){return this.formatValue??String}get reading(){if(this.limit===null)return{limitText:this.unlimitedLabel,overLimit:!1,range:null};if(this.limit===void 0)return{limitText:void 0,overLimit:!1,range:null};let e=$(this.used??0,this.limit);return{limitText:`/ ${this.format(e.limit)}`,overLimit:e.overLimit,range:e.range}}updated(){g(this,"data-state",this.reading.overLimit?"over-limit":void 0),g(this,"data-status",this.status),v(this,_,{actions:this.region("actions"),footer:this.region("footer")},null)}render(){let{limitText:e,range:a}=this.reading,i=this.format,o=this.unit?` ${this.unit}`:"";return d`
+      <div
+        class="skdx-usage-card__header"
+        data-skdx-usage-card-generated
+      >
+        <span
+          class="skdx-usage-card__label"
+          id=${this.labelId}
+          >${this.label??""}</span
+        >
+        ${this.hasSlotted("actions")?d`<div class="skdx-usage-card__actions"></div>`:u}
+      </div>
+      <div
+        class="skdx-usage-card__value"
+        data-skdx-usage-card-generated
+      >
+        <span class="skdx-usage-card__used">${i(x(this.used??0))}</span>
+        ${e===void 0?u:d`<span class="skdx-usage-card__limit">${e}</span>`}
+        ${this.unit?d`<span class="skdx-usage-card__unit">${this.unit}</span>`:u}
+      </div>
+      ${a?d`<skdx-progress
+              class="skdx-usage-card__progress"
+              role="meter"
+              min="0"
+              .max=${a.max}
+              .value=${a.value}
+              aria-labelledby=${this.labelId}
+              .getValueLabel=${(m,y,c)=>`${i(m)} / ${i(c)}${o}`}
+              data-skdx-usage-card-generated
+            ></skdx-progress>`:u}
+      ${this.description?d`<skdx-text
+              class="skdx-usage-card__description"
+              as="p"
+              .tone=${"muted"}
+              data-skdx-usage-card-generated
+              >${this.description}</skdx-text
+            >`:u}
+      ${this.hasSlotted("footer")?d`<div
+              class="skdx-usage-card__footer"
+              data-skdx-usage-card-generated
+            ></div>`:u}
+    `}};s([n({type:String})],t.prototype,"label",2),s([n({type:Number})],t.prototype,"used",2),s([n({type:Number})],t.prototype,"limit",2),s([n({type:String})],t.prototype,"unit",2),s([n({attribute:!1})],t.prototype,"formatValue",2),s([n({type:String,attribute:"unlimited-label"})],t.prototype,"unlimitedLabel",2),s([n({type:String})],t.prototype,"description",2),s([n({type:String})],t.prototype,"status",2),t=s([b("skdx-usage-card","usage-card","root")],t);export{t as SkdxUsageCard};

package/dist/usage-card/index.cjs

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

package/dist/usage-card/index.d.cts

@@ -0,0 +1 @@
+export { SkdxUsageCard } from './UsageCard.cjs';

package/dist/usage-card/index.d.ts

@@ -0,0 +1 @@
+export { SkdxUsageCard } from './UsageCard.js';

package/dist/usage-card/index.js

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

package/dist/usage-card/usage.cjs

@@ -0,0 +1 @@
+"use strict";var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var o=Object.getOwnPropertyNames;var s=Object.prototype.hasOwnProperty;var l=(e,r)=>{for(var n in r)i(e,n,{get:r[n],enumerable:!0})},g=(e,r,n,t)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of o(r))!s.call(e,a)&&a!==n&&i(e,a,{get:()=>r[a],enumerable:!(t=u(r,a))||t.enumerable});return e};var b=e=>g(i({},"__esModule",{value:!0}),e);var x={};l(x,{normalizeUsage:()=>m,usageMeter:()=>f});module.exports=b(x);function m(e){return Number.isNaN(e)?0:Math.max(e,0)}function f(e,r){let n=m(e),t=m(r);return t===0?{limit:t,overLimit:n>0,range:null}:{limit:t,overLimit:n>t,range:{max:t,value:Math.min(n,t)}}}0&&(module.exports={normalizeUsage,usageMeter});

package/dist/usage-card/usage.d.cts

@@ -0,0 +1,18 @@
+/** @internal Clamps a raw amount into a safe non-negative number: `NaN` becomes `0`, a negative clamps to `0`. */
+export declare function normalizeUsage(value: number): number;
+/** @internal The `[0, max]` range a finite, positive limit renders as a meter. */
+export interface UsageMeterRange {
+    max: number;
+    value: number;
+}
+/** @internal What a finite limit resolves to: its normalized value, whether usage exceeds it, and the meter range to render. */
+export interface UsageMeterResult {
+    limit: number;
+    overLimit: boolean;
+    range: UsageMeterRange | null;
+}
+/**
+ * @internal Derives the meter range and over-limit flag for a finite limit.
+ * A zero limit renders no meter but counts as over-limit as soon as anything is used.
+ */
+export declare function usageMeter(used: number, limit: number): UsageMeterResult;

package/dist/usage-card/usage.d.ts

@@ -0,0 +1,18 @@
+/** @internal Clamps a raw amount into a safe non-negative number: `NaN` becomes `0`, a negative clamps to `0`. */
+export declare function normalizeUsage(value: number): number;
+/** @internal The `[0, max]` range a finite, positive limit renders as a meter. */
+export interface UsageMeterRange {
+    max: number;
+    value: number;
+}
+/** @internal What a finite limit resolves to: its normalized value, whether usage exceeds it, and the meter range to render. */
+export interface UsageMeterResult {
+    limit: number;
+    overLimit: boolean;
+    range: UsageMeterRange | null;
+}
+/**
+ * @internal Derives the meter range and over-limit flag for a finite limit.
+ * A zero limit renders no meter but counts as over-limit as soon as anything is used.
+ */
+export declare function usageMeter(used: number, limit: number): UsageMeterResult;

package/dist/usage-card/usage.js

@@ -0,0 +1 @@
+function n(r){return Number.isNaN(r)?0:Math.max(r,0)}function i(r,a){let t=n(r),e=n(a);return e===0?{limit:e,overLimit:t>0,range:null}:{limit:e,overLimit:t>e,range:{max:e,value:Math.min(t,e)}}}export{n as normalizeUsage,i as usageMeter};

package/dist/user-menu/UserMenu.cjs

@@ -0,0 +1,30 @@
+"use strict";var m=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var k=(t,e)=>{for(var a in e)m(t,a,{get:e[a],enumerable:!0})},f=(t,e,a,d)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of h(e))!v.call(t,r)&&r!==a&&m(t,r,{get:()=>e[r],enumerable:!(d=p(e,r))||d.enumerable});return t};var x=t=>f(m({},"__esModule",{value:!0}),t),i=(t,e,a,d)=>{for(var r=d>1?void 0:d?p(e,a):e,u=t.length-1,l;u>=0;u--)(l=t[u])&&(r=(d?l(e,a,r):l(r))||r);return d&&r&&m(e,a,r),r};var T={};k(T,{SkdxUserMenu:()=>s});module.exports=x(T);var n=require("lit"),o=require("lit/decorators.js"),c=require("../internal/define.cjs"),g=require("../internal/slots.cjs"),y=require("@skdx/web-components/avatar"),E=require("@skdx/web-components/primitives/menu");var _="data-skdx-user-menu-generated",b={fromAttribute:t=>t!=="false"},s=class extends n.LitElement{constructor(){super(...arguments);this.defaultOpen=!1;this.side="bottom";this.align="end"}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),queueMicrotask(()=>this.requestUpdate())}get hasTrigger(){return this.querySelector('[slot="trigger"]')!==null}updated(){this.variant&&!this.hasTrigger?this.setAttribute("data-variant",this.variant):this.removeAttribute("data-variant");let a=this.querySelector("skdx-menu-trigger");(0,g.placeSlotted)(this,_,{trigger:a,status:a},this.querySelector("skdx-menu-content"))}derivedTrigger(){return n.html`<skdx-avatar
+        class="skdx-user-menu__avatar"
+        src=${this.avatarSrc??n.nothing}
+        name=${this.name??n.nothing}
+        decorative
+        .size=${"sm"}
+      ></skdx-avatar>
+      <span class="skdx-user-menu__identity">
+        <span class="skdx-user-menu__name">${this.name??""}</span>
+        ${this.description?n.html`<span class="skdx-user-menu__description">${this.description}</span>`:n.nothing}
+      </span>`}render(){return n.html`
+      <skdx-menu-root
+        data-skdx-user-menu-generated
+        .open=${this.open}
+        ?default-open=${this.defaultOpen}
+      >
+        <skdx-menu-trigger>${this.hasTrigger?n.nothing:this.derivedTrigger()}</skdx-menu-trigger>
+        <skdx-menu-content
+          class="skdx-user-menu__content"
+          side=${this.side}
+          align=${this.align}
+        >
+          <skdx-menu-label class="skdx-user-menu__header">
+            <span class="skdx-user-menu__name">${this.name??""}</span>
+            ${this.description?n.html`<span class="skdx-user-menu__description">${this.description}</span>`:n.nothing}
+          </skdx-menu-label>
+          <skdx-menu-separator></skdx-menu-separator>
+        </skdx-menu-content>
+      </skdx-menu-root>
+    `}};i([(0,o.property)({type:String})],s.prototype,"name",2),i([(0,o.property)({type:String})],s.prototype,"description",2),i([(0,o.property)({type:String,attribute:"avatar-src"})],s.prototype,"avatarSrc",2),i([(0,o.property)({type:String})],s.prototype,"variant",2),i([(0,o.property)({converter:b})],s.prototype,"open",2),i([(0,o.property)({type:Boolean,attribute:"default-open"})],s.prototype,"defaultOpen",2),i([(0,o.property)({type:String})],s.prototype,"side",2),i([(0,o.property)({type:String})],s.prototype,"align",2),s=i([(0,c.customElement)("skdx-user-menu","user-menu","root")],s);0&&(module.exports={SkdxUserMenu});

package/dist/user-menu/UserMenu.d.cts

@@ -0,0 +1,84 @@
+import { LitElement, type TemplateResult } from 'lit';
+import '@skdx/web-components/avatar';
+import '@skdx/web-components/primitives/menu';
+/**
+ * The signed-in user's menu: a derived trigger showing an avatar, name and
+ * description that opens a panel repeating the identity above the
+ * application's own entries.
+ *
+ * Renders light DOM, so its parts are classes rather than shadow `::part()`
+ * targets: `.skdx-user-menu` on the host, then `__avatar`, `__identity`,
+ * `__name`, `__description`, `__content` and `__header`. `data-variant` sits on
+ * the host while the derived trigger renders.
+ *
+ * @example
+ * ```html
+ * <skdx-user-menu name="Ada Lovelace" description="ada@example.com" avatar-src="/ada.png">
+ *   <skdx-menu-item>Profile</skdx-menu-item>
+ *   <skdx-menu-item>Sign out</skdx-menu-item>
+ * </skdx-user-menu>
+ * ```
+ *
+ * @slot - The application's own menu entries, rendered below the repeated identity header.
+ * @slot trigger - Content that replaces the derived avatar-and-identity trigger entirely.
+ * @slot status - An extra indicator rendered after the identity in the trigger.
+ * @fires open-change - Fires with the new open state whenever the trigger opens or closes the menu.
+ * @fires open-change-complete - Fires with the new open state once the panel's enter or exit animation has settled.
+ * @fires escape-key-down - Fires when Escape is pressed while the menu is open; `preventDefault()` keeps it open.
+ * @fires pointer-down-outside - Fires on a pointer-down outside the panel while open; `preventDefault()` keeps it open.
+ * @fires focus-outside - Fires when focus moves outside the panel while open; `preventDefault()` keeps it open.
+ * @fires interact-outside - Fires for either kind of outside interaction, just before the specific event.
+ * @fires close-auto-focus - Fires before focus returns to the trigger on close; `preventDefault()` suppresses that return.
+ */
+export declare class SkdxUserMenu extends LitElement {
+    /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    /** The signed-in user's name, rendered in the trigger and repeated in the menu header. */
+    name: string;
+    /**
+     * Secondary text such as an email or role, rendered below the name in the trigger and the header.
+     * @default undefined — no description renders in either place.
+     */
+    description?: string | undefined;
+    /**
+     * Source of the identity image, passed straight through to the derived Avatar.
+     * @default undefined — the Avatar renders its initials fallback.
+     */
+    avatarSrc?: string | undefined;
+    /**
+     * Visual rung written to `data-variant`; `'compact'` visually hides the identity text while keeping it as the accessible name.
+     * @default undefined — the identity text stays visible.
+     */
+    variant?: 'compact' | (string & {}) | undefined;
+    /**
+     * Whether the menu is open, for controlled usage paired with `open-change`.
+     * @default undefined — uncontrolled, following `defaultOpen`.
+     */
+    open?: boolean | undefined;
+    /**
+     * Whether the menu starts open, for uncontrolled usage.
+     * @default false
+     */
+    defaultOpen: boolean;
+    /**
+     * Which side of the trigger the menu panel opens on.
+     * @default 'bottom'
+     */
+    side: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * Alignment of the menu panel relative to the side it opens on.
+     * @default 'end'
+     */
+    align: 'start' | 'center' | 'end';
+    connectedCallback(): void;
+    /** Whether the consumer supplied their own trigger — still true once it has been moved in. */
+    private get hasTrigger();
+    protected updated(): void;
+    private derivedTrigger;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-user-menu': SkdxUserMenu;
+    }
+}

package/dist/user-menu/UserMenu.d.ts

@@ -0,0 +1,84 @@
+import { LitElement, type TemplateResult } from 'lit';
+import '@skdx/web-components/avatar';
+import '@skdx/web-components/primitives/menu';
+/**
+ * The signed-in user's menu: a derived trigger showing an avatar, name and
+ * description that opens a panel repeating the identity above the
+ * application's own entries.
+ *
+ * Renders light DOM, so its parts are classes rather than shadow `::part()`
+ * targets: `.skdx-user-menu` on the host, then `__avatar`, `__identity`,
+ * `__name`, `__description`, `__content` and `__header`. `data-variant` sits on
+ * the host while the derived trigger renders.
+ *
+ * @example
+ * ```html
+ * <skdx-user-menu name="Ada Lovelace" description="ada@example.com" avatar-src="/ada.png">
+ *   <skdx-menu-item>Profile</skdx-menu-item>
+ *   <skdx-menu-item>Sign out</skdx-menu-item>
+ * </skdx-user-menu>
+ * ```
+ *
+ * @slot - The application's own menu entries, rendered below the repeated identity header.
+ * @slot trigger - Content that replaces the derived avatar-and-identity trigger entirely.
+ * @slot status - An extra indicator rendered after the identity in the trigger.
+ * @fires open-change - Fires with the new open state whenever the trigger opens or closes the menu.
+ * @fires open-change-complete - Fires with the new open state once the panel's enter or exit animation has settled.
+ * @fires escape-key-down - Fires when Escape is pressed while the menu is open; `preventDefault()` keeps it open.
+ * @fires pointer-down-outside - Fires on a pointer-down outside the panel while open; `preventDefault()` keeps it open.
+ * @fires focus-outside - Fires when focus moves outside the panel while open; `preventDefault()` keeps it open.
+ * @fires interact-outside - Fires for either kind of outside interaction, just before the specific event.
+ * @fires close-auto-focus - Fires before focus returns to the trigger on close; `preventDefault()` suppresses that return.
+ */
+export declare class SkdxUserMenu extends LitElement {
+    /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    /** The signed-in user's name, rendered in the trigger and repeated in the menu header. */
+    name: string;
+    /**
+     * Secondary text such as an email or role, rendered below the name in the trigger and the header.
+     * @default undefined — no description renders in either place.
+     */
+    description?: string | undefined;
+    /**
+     * Source of the identity image, passed straight through to the derived Avatar.
+     * @default undefined — the Avatar renders its initials fallback.
+     */
+    avatarSrc?: string | undefined;
+    /**
+     * Visual rung written to `data-variant`; `'compact'` visually hides the identity text while keeping it as the accessible name.
+     * @default undefined — the identity text stays visible.
+     */
+    variant?: 'compact' | (string & {}) | undefined;
+    /**
+     * Whether the menu is open, for controlled usage paired with `open-change`.
+     * @default undefined — uncontrolled, following `defaultOpen`.
+     */
+    open?: boolean | undefined;
+    /**
+     * Whether the menu starts open, for uncontrolled usage.
+     * @default false
+     */
+    defaultOpen: boolean;
+    /**
+     * Which side of the trigger the menu panel opens on.
+     * @default 'bottom'
+     */
+    side: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * Alignment of the menu panel relative to the side it opens on.
+     * @default 'end'
+     */
+    align: 'start' | 'center' | 'end';
+    connectedCallback(): void;
+    /** Whether the consumer supplied their own trigger — still true once it has been moved in. */
+    private get hasTrigger();
+    protected updated(): void;
+    private derivedTrigger;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-user-menu': SkdxUserMenu;
+    }
+}

package/dist/user-menu/UserMenu.js

@@ -0,0 +1,30 @@
+var p=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var t=(a,i,n,d)=>{for(var s=d>1?void 0:d?c(i,n):i,u=a.length-1,l;u>=0;u--)(l=a[u])&&(s=(d?l(i,n,s):l(s))||s);return d&&s&&p(i,n,s),s};import{html as m,LitElement as g,nothing as o}from"lit";import{property as r}from"lit/decorators.js";import{customElement as h}from"../internal/define.js";import{placeSlotted as v}from"../internal/slots.js";import"@skdx/web-components/avatar";import"@skdx/web-components/primitives/menu";var k="data-skdx-user-menu-generated",f={fromAttribute:a=>a!=="false"},e=class extends g{constructor(){super(...arguments);this.defaultOpen=!1;this.side="bottom";this.align="end"}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),queueMicrotask(()=>this.requestUpdate())}get hasTrigger(){return this.querySelector('[slot="trigger"]')!==null}updated(){this.variant&&!this.hasTrigger?this.setAttribute("data-variant",this.variant):this.removeAttribute("data-variant");let n=this.querySelector("skdx-menu-trigger");v(this,k,{trigger:n,status:n},this.querySelector("skdx-menu-content"))}derivedTrigger(){return m`<skdx-avatar
+        class="skdx-user-menu__avatar"
+        src=${this.avatarSrc??o}
+        name=${this.name??o}
+        decorative
+        .size=${"sm"}
+      ></skdx-avatar>
+      <span class="skdx-user-menu__identity">
+        <span class="skdx-user-menu__name">${this.name??""}</span>
+        ${this.description?m`<span class="skdx-user-menu__description">${this.description}</span>`:o}
+      </span>`}render(){return m`
+      <skdx-menu-root
+        data-skdx-user-menu-generated
+        .open=${this.open}
+        ?default-open=${this.defaultOpen}
+      >
+        <skdx-menu-trigger>${this.hasTrigger?o:this.derivedTrigger()}</skdx-menu-trigger>
+        <skdx-menu-content
+          class="skdx-user-menu__content"
+          side=${this.side}
+          align=${this.align}
+        >
+          <skdx-menu-label class="skdx-user-menu__header">
+            <span class="skdx-user-menu__name">${this.name??""}</span>
+            ${this.description?m`<span class="skdx-user-menu__description">${this.description}</span>`:o}
+          </skdx-menu-label>
+          <skdx-menu-separator></skdx-menu-separator>
+        </skdx-menu-content>
+      </skdx-menu-root>
+    `}};t([r({type:String})],e.prototype,"name",2),t([r({type:String})],e.prototype,"description",2),t([r({type:String,attribute:"avatar-src"})],e.prototype,"avatarSrc",2),t([r({type:String})],e.prototype,"variant",2),t([r({converter:f})],e.prototype,"open",2),t([r({type:Boolean,attribute:"default-open"})],e.prototype,"defaultOpen",2),t([r({type:String})],e.prototype,"side",2),t([r({type:String})],e.prototype,"align",2),e=t([h("skdx-user-menu","user-menu","root")],e);export{e as SkdxUserMenu};

package/dist/user-menu/index.cjs

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

package/dist/user-menu/index.d.cts

@@ -0,0 +1 @@
+export { SkdxUserMenu } from './UserMenu.cjs';

package/dist/user-menu/index.d.ts

@@ -0,0 +1 @@
+export { SkdxUserMenu } from './UserMenu.js';

package/dist/user-menu/index.js

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

package/dist/verification-page/VerificationPage.cjs

@@ -0,0 +1,63 @@
+"use strict";var l=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var f=(d,s)=>{for(var e in s)l(d,e,{get:s[e],enumerable:!0})},L=(d,s,e,r)=>{if(s&&typeof s=="object"||typeof s=="function")for(let t of b(s))!E.call(d,t)&&t!==e&&l(d,t,{get:()=>s[t],enumerable:!(r=h(s,t))||r.enumerable});return d};var k=d=>L(l({},"__esModule",{value:!0}),d),a=(d,s,e,r)=>{for(var t=r>1?void 0:r?h(s,e):s,u=d.length-1,c;u>=0;u--)(c=d[u])&&(t=(r?c(s,e,t):c(t))||t);return r&&t&&l(s,e,t),t};var _={};f(_,{SkdxVerificationPage:()=>i});module.exports=k(_);var n=require("lit"),o=require("lit/decorators.js"),m=require("../internal/define.cjs"),p=require("../internal/events.cjs"),v=require("../internal/slots.cjs"),T=require("@skdx/web-components/alert"),H=require("@skdx/web-components/button"),C=require("@skdx/web-components/field"),O=require("@skdx/web-components/form"),V=require("@skdx/web-components/heading"),D=require("@skdx/web-components/pin-input"),S=require("@skdx/web-components/text");var g="data-skdx-verification-page-generated",x="data-skdx-verification-page-content",y=["resend"],$=0,i=class extends n.LitElement{constructor(){super(...arguments);this.title="Enter your verification code";this.pending=!1;this.codeLabel="Verification code";this.length=6;this.defaultValue="";this.submitLabel="Verify";this.resendLabel="Resend code";this.resendDisabled=!1;this.titleId=`skdx-verification-page-title-${++$}`;this.gated=new Map;this.handleValueChange=e=>{e.stopPropagation(),this.setValue(e.detail,"keyboard")};this.handleSubmit=e=>{e.target?.closest("skdx-form")&&(e.preventDefault(),(0,p.emit)(this,"verify",{code:this.currentValue}))};this.resend=()=>{(0,p.emit)(this,"resend")}}createRenderRoot(){return this}addEventListener(e,r,t){super.addEventListener(e,r,t),this.countListener(e,1)}removeEventListener(e,r,t){super.removeEventListener(e,r,t),this.countListener(e,-1)}countListener(e,r){y.includes(e)&&(this.gated.set(e,Math.max(0,(this.gated.get(e)??0)+r)),this.requestUpdate())}handles(e){return(this.gated.get(e)??0)>0}get currentValue(){return this.value??this.uncontrolledValue??this.defaultValue}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(e){return this.querySelector(`[slot="${e}"]`)!==null}region(e){return this.querySelector(`.skdx-verification-page__${e}`)}get contentRegion(){return this.querySelector(`[${x}]`)}get hasContent(){return(0,v.hasUnslottedChild)(this,g)||(this.contentRegion?.hasChildNodes()??!1)}updated(){let e=this.querySelector(".skdx-verification-page__code");e&&(e.value=this.currentValue),(0,v.placeSlotted)(this,g,{footer:this.region("footer")},this.contentRegion)}setValue(e,r){let t=this.currentValue;this.uncontrolledValue=e,this.requestUpdate(),(0,p.emit)(this,"value-change",{value:e,previousValue:t,reason:r})}render(){return n.html`
+      <div
+        class="skdx-verification-page__panel"
+        data-skdx-verification-page-generated
+      >
+        <skdx-heading
+          class="skdx-verification-page__title"
+          as="h1"
+          id=${this.titleId}
+          >${this.title}</skdx-heading
+        >
+        ${this.error?n.html`<skdx-alert
+                class="skdx-verification-page__error"
+                .status=${"danger"}
+                >${this.error}</skdx-alert
+              >`:n.nothing}
+        ${this.description?n.html`<skdx-text
+                class="skdx-verification-page__description"
+                as="p"
+                .tone=${"muted"}
+                >${this.description}</skdx-text
+              >`:n.nothing}
+        <skdx-form class="skdx-verification-page__form">
+          <form>
+            <skdx-field
+              class="skdx-verification-page__field"
+              label=${this.codeLabel}
+            >
+              <skdx-pin-input
+                class="skdx-verification-page__code"
+                aria-label=${this.codeLabel}
+                name="code"
+                required
+                length=${this.length}
+                .value=${this.currentValue}
+                @value-change=${this.handleValueChange}
+              ></skdx-pin-input>
+            </skdx-field>
+            ${this.hasContent?n.html`<div data-skdx-verification-page-content></div>`:n.nothing}
+            <skdx-button
+              class="skdx-verification-page__submit"
+              type="submit"
+              ?loading=${this.pending}
+              ?disabled=${this.pending}
+              >${this.submitLabel}</skdx-button
+            >
+          </form>
+        </skdx-form>
+        ${this.handles("resend")?n.html`<div class="skdx-verification-page__resend">
+                <skdx-button
+                  type="button"
+                  .variant=${"ghost"}
+                  ?disabled=${this.resendDisabled}
+                  @click=${this.resend}
+                  >${this.resendLabel}</skdx-button
+                >
+                ${this.resendHint?n.html`<span class="skdx-verification-page__resend-hint"
+                        >${this.resendHint}</span
+                      >`:n.nothing}
+              </div>`:n.nothing}
+        ${this.hasSlotted("footer")?n.html`<div class="skdx-verification-page__footer"></div>`:n.nothing}
+      </div>
+    `}};a([(0,o.property)({type:String})],i.prototype,"title",2),a([(0,o.property)({type:String})],i.prototype,"description",2),a([(0,o.property)({type:String})],i.prototype,"error",2),a([(0,o.property)({type:Boolean})],i.prototype,"pending",2),a([(0,o.property)({type:String,attribute:"code-label"})],i.prototype,"codeLabel",2),a([(0,o.property)({type:Number})],i.prototype,"length",2),a([(0,o.property)({type:String})],i.prototype,"value",2),a([(0,o.property)({type:String,attribute:"default-value"})],i.prototype,"defaultValue",2),a([(0,o.property)({type:String,attribute:"submit-label"})],i.prototype,"submitLabel",2),a([(0,o.property)({type:String,attribute:"resend-label"})],i.prototype,"resendLabel",2),a([(0,o.property)({type:Boolean,attribute:"resend-disabled"})],i.prototype,"resendDisabled",2),a([(0,o.property)({type:String,attribute:"resend-hint"})],i.prototype,"resendHint",2),i=a([(0,m.customElement)("skdx-verification-page","verification-page","root")],i);0&&(module.exports={SkdxVerificationPage});

package/dist/verification-page/VerificationPage.d.cts

@@ -0,0 +1,149 @@
+import { LitElement, type TemplateResult } from 'lit';
+import '@skdx/web-components/alert';
+import '@skdx/web-components/button';
+import '@skdx/web-components/field';
+import '@skdx/web-components/form';
+import '@skdx/web-components/heading';
+import '@skdx/web-components/pin-input';
+import '@skdx/web-components/text';
+/** What a `verify` event carries: the complete code the form held. */
+export interface SkdxVerificationDetail {
+    /** The full code, exactly `length` characters long. */
+    code: string;
+}
+/** What a `value-change` event carries: the new code, the one it replaced, and what drove the edit. */
+export interface SkdxVerificationValueChangeDetail {
+    /** The code as it stands after the edit. */
+    value: string;
+    /** The code held immediately before, or `null` when nothing was. */
+    previousValue: string | null;
+    /** What drove the change: a key press, a pointer, or the application. */
+    reason: 'keyboard' | 'pointer' | 'programmatic';
+}
+/**
+ * Verification block: a pin input for a one-time code, a submit button and a
+ * resend control whose cooldown the consumer owns.
+ *
+ * Renders light DOM, so its parts are classes rather than shadow `::part()`
+ * targets: `.skdx-verification-page` on the host, then `__panel`, `__title`,
+ * `__description`, `__error`, `__form`, `__field`, `__code`, `__submit`,
+ * `__resend`, `__resend-hint` and `__footer`.
+ *
+ * @example
+ * ```html
+ * <skdx-verification-page
+ *   id="verify"
+ *   description="We sent a code to ada@example.com."
+ * ></skdx-verification-page>
+ * <script>
+ *   const page = document.getElementById('verify');
+ *   page.addEventListener('verify', (event) => console.log(event.detail.code));
+ *   page.addEventListener('resend', () => send());
+ * </script>
+ * ```
+ *
+ * @slot - Extra fields rendered inside the form, above the submit button.
+ * @slot footer - Navigation below the resend region, such as a link back to the sign-in page.
+ * @fires verify - Fires with `{ code }` when the form submits with a code of exactly the declared length.
+ * @fires resend - Fires when the resend button is activated; listening for it is what renders the resend region.
+ * @fires value-change - Fires with `{ value, previousValue, reason }` whenever any code box changes.
+ */
+export declare class SkdxVerificationPage extends LitElement {
+    /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    /**
+     * Heading text, rendered into a derived `<h1>` that names the section.
+     * @default 'Enter your verification code'
+     */
+    title: string;
+    /**
+     * Supporting copy rendered below the title, naming where the code was sent.
+     * @default undefined — no description region renders.
+     */
+    description?: string;
+    /**
+     * Message rendered into a derived error Alert above the form. The block never clears it.
+     * @default undefined — no error region renders.
+     */
+    error?: string;
+    /**
+     * Marks the request in flight, making the submit button busy while the code boxes stay editable.
+     * @default false
+     */
+    pending: boolean;
+    /**
+     * Field label and accessible name of the derived pin input holding the code.
+     * @default 'Verification code'
+     */
+    codeLabel: string;
+    /**
+     * How many character boxes the code is entered into, and how long a complete code is.
+     * @default 6
+     */
+    length: number;
+    /**
+     * Current code, for controlled usage paired with `value-change`.
+     * @default undefined — uncontrolled, seeded from `defaultValue`.
+     */
+    value?: string;
+    /**
+     * Initial code for uncontrolled usage, seeding the boxes on first render.
+     * @default '' — the boxes start empty.
+     */
+    defaultValue: string;
+    /**
+     * Text of the form's submit button.
+     * @default 'Verify'
+     */
+    submitLabel: string;
+    /**
+     * Text of the resend button, which renders only alongside a resend listener.
+     * @default 'Resend code'
+     */
+    resendLabel: string;
+    /**
+     * Makes the resend button unusable, for a consumer running its own cooldown.
+     * @default false
+     */
+    resendDisabled: boolean;
+    /**
+     * Note rendered beside the resend button, such as how long the cooldown has left.
+     * @default undefined — no hint renders; the block runs no timer of its own.
+     */
+    resendHint?: string;
+    /** Generated title id, published as the section's `aria-labelledby`. */
+    private readonly titleId;
+    /** What the boxes last held; outranked by `value` whenever the consumer controls the code. */
+    private uncontrolledValue?;
+    /** 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;
+    /** The code right now, controlled or not. */
+    private get currentValue();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Whether the consumer supplied content for `name` — still true once it has been moved in. */
+    private hasSlotted;
+    private region;
+    private get contentRegion();
+    private get hasContent();
+    protected updated(): void;
+    private setValue;
+    private readonly handleValueChange;
+    private readonly handleSubmit;
+    private readonly resend;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-verification-page': SkdxVerificationPage;
+    }
+}