@skdx/web-components-blocks 0.34.0 → 0.36.0

package/dist/sign-up-page/SignUpPage.d.ts

@@ -0,0 +1,133 @@
+import { LitElement, type TemplateResult } from 'lit';
+import { type SkdxSignInProvider } from '../sign-in-page/index.js';
+import '@skdx/web-components/alert';
+import '@skdx/web-components/button';
+import '@skdx/web-components/checkbox';
+import '@skdx/web-components/divider';
+import '@skdx/web-components/field';
+import '@skdx/web-components/form';
+import '@skdx/web-components/heading';
+import '@skdx/web-components/password-input';
+import '@skdx/web-components/text-field';
+/** What a `sign-up` event carries: the chosen provider, plus the values of the fields that rendered. */
+export interface SkdxSignUpDetail {
+    /** The `id` of the provider the user chose, or `'credentials'` for the form. */
+    providerId: string;
+    /** The name the form held; absent unless the name field rendered. */
+    name?: string;
+    /** The email the form held; absent for a provider button. */
+    email?: string;
+    /** The password the form held, already matched against the confirmation. */
+    password?: string;
+    /** Whether the terms checkbox was ticked; absent unless the terms field rendered. */
+    termsAccepted?: boolean;
+}
+/**
+ * Sign-up block: provider buttons, a credentials form with optional name,
+ * confirmation and terms fields, and a footer.
+ *
+ * Renders light DOM, so its parts are classes rather than shadow `::part()`
+ * targets: `.skdx-sign-up-page` on the host, then `__panel`, `__title`,
+ * `__error`, `__providers`, `__provider`, `__divider`, `__form`, `__field`,
+ * `__terms`, `__submit` and `__footer`.
+ *
+ * @example
+ * ```html
+ * <skdx-sign-up-page
+ *   id="sign-up"
+ *   confirm-password-label="Confirm password"
+ * >
+ *   <span slot="terms">I accept the terms.</span>
+ * </skdx-sign-up-page>
+ * <script>
+ *   document
+ *     .getElementById('sign-up')
+ *     .addEventListener('sign-up', (event) => console.log(event.detail));
+ * </script>
+ * ```
+ *
+ * @slot - Extra fields rendered inside the form, above the terms and the submit button.
+ * @slot terms - Terms copy and links used as the label of the required terms checkbox.
+ * @slot footer - Navigation below the form, such as a link back to the sign-in page.
+ * @fires sign-up - Fires with `{ providerId, name?, email?, password?, termsAccepted? }` when a provider button is activated or the form submits with matching, valid fields.
+ */
+export declare class SkdxSignUpPage 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 'Create account'
+     */
+    title: string;
+    /**
+     * Third-party providers, in render order, each rendering one button above the credentials form.
+     * @default undefined — no providers region and no divider render.
+     */
+    providers?: readonly SkdxSignInProvider[];
+    /**
+     * 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 every field stays editable.
+     * @default false
+     */
+    pending: boolean;
+    /**
+     * Label of the name field; supplying it is what makes that field render at all.
+     * @default undefined — no name field renders.
+     */
+    nameLabel?: string;
+    /**
+     * Label of the email field in the credentials form.
+     * @default 'Email'
+     */
+    emailLabel: string;
+    /**
+     * Label of the password field in the credentials form.
+     * @default 'Password'
+     */
+    passwordLabel: string;
+    /**
+     * Label of the confirmation field; supplying it is what turns password matching on.
+     * @default undefined — no confirmation field renders.
+     */
+    confirmPasswordLabel?: string;
+    /**
+     * Validation message pushed onto the confirmation field when the two passwords differ.
+     * @default 'Passwords do not match'
+     */
+    passwordMismatchMessage: string;
+    /**
+     * Text of the credentials form's submit button.
+     * @default 'Create account'
+     */
+    submitLabel: string;
+    /**
+     * Formats a provider button's text from its entry.
+     * @default defaultProviderLabel — reads "Sign in with Google".
+     */
+    getProviderLabel?: (provider: SkdxSignInProvider) => string;
+    /** Generated title id, published as the section's `aria-labelledby`. */
+    private readonly titleId;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Whether the consumer supplied content for `name` — still true once it has been moved in. */
+    private hasSlotted;
+    private region;
+    /** The span inside the terms field's label that the `terms` slot is moved into. */
+    private get termsLabel();
+    private get contentRegion();
+    private get hasContent();
+    protected updated(): void;
+    private readonly handleSubmit;
+    private readonly clearMismatch;
+    private signUpWithProvider;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-sign-up-page': SkdxSignUpPage;
+    }
+}

package/dist/sign-up-page/SignUpPage.js

@@ -0,0 +1,97 @@
+var h=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var r=(n,d,e,i)=>{for(var s=i>1?void 0:i?k(d,e):d,o=n.length-1,p;o>=0;o--)(p=n[o])&&(s=(i?p(d,e,s):p(s))||s);return i&&s&&h(d,e,s),s};import{html as l,LitElement as f,nothing as u}from"lit";import{property as a}from"lit/decorators.js";import{customElement as v}from"../internal/define.js";import{emit as c}from"../internal/events.js";import{hasUnslottedChild as _,placeSlotted as y}from"../internal/slots.js";import{defaultProviderLabel as L}from"../sign-in-page/index.js";import"@skdx/web-components/alert";import"@skdx/web-components/button";import"@skdx/web-components/checkbox";import"@skdx/web-components/divider";import"@skdx/web-components/field";import"@skdx/web-components/form";import"@skdx/web-components/heading";import"@skdx/web-components/password-input";import"@skdx/web-components/text-field";var g="data-skdx-sign-up-page-generated",$="data-skdx-sign-up-page-content",x="confirmPassword",E=0,t=class extends f{constructor(){super(...arguments);this.title="Create account";this.pending=!1;this.emailLabel="Email";this.passwordLabel="Password";this.passwordMismatchMessage="Passwords do not match";this.submitLabel="Create account";this.titleId=`skdx-sign-up-page-title-${++E}`;this.handleSubmit=e=>{let i=e.target?.closest("skdx-form");if(!i)return;e.preventDefault();let s=m(i,"password"),o=b(i,x);if(o&&o.value!==s){o.setCustomValidity(this.passwordMismatchMessage),o.reportValidity();return}let p={providerId:"credentials",email:m(i,"email"),password:s};this.nameLabel!==void 0&&(p.name=m(i,"name")),this.hasSlotted("terms")&&(p.termsAccepted=w(i)),c(this,"sign-up",p)};this.clearMismatch=e=>{e.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(e){return this.querySelector(`[slot="${e}"], [data-skdx-slot="${e}"]`)!==null}region(e){return this.querySelector(`.skdx-sign-up-page__${e}`)}get termsLabel(){return this.querySelector(".skdx-sign-up-page__terms skdx-field-label > span")}get contentRegion(){return this.querySelector(`[${$}]`)}get hasContent(){return _(this,g)||(this.contentRegion?.hasChildNodes()??!1)}updated(){y(this,g,{terms:this.termsLabel,footer:this.region("footer")},this.contentRegion),this.querySelector(".skdx-sign-up-page__terms skdx-checkbox")?.requestUpdate()}signUpWithProvider(e){c(this,"sign-up",{providerId:e})}render(){let e=this.providers??[],i=this.getProviderLabel??L;return l`
+      <div
+        class="skdx-sign-up-page__panel"
+        data-skdx-sign-up-page-generated
+      >
+        <skdx-heading
+          class="skdx-sign-up-page__title"
+          as="h1"
+          id=${this.titleId}
+          >${this.title}</skdx-heading
+        >
+        ${this.error?l`<skdx-alert
+                class="skdx-sign-up-page__error"
+                .status=${"danger"}
+                >${this.error}</skdx-alert
+              >`:u}
+        ${e.length?l`<div class="skdx-sign-up-page__providers">
+                  ${e.map(s=>l`<skdx-button
+                        class="skdx-sign-up-page__provider"
+                        type="button"
+                        data-provider=${s.id}
+                        @click=${()=>this.signUpWithProvider(s.id)}
+                        >${i(s)}</skdx-button
+                      >`)}
+                </div>
+                <skdx-divider class="skdx-sign-up-page__divider"></skdx-divider>`:u}
+        <skdx-form class="skdx-sign-up-page__form">
+          <form>
+            ${this.nameLabel===void 0?u:l`<skdx-field
+                    class="skdx-sign-up-page__field"
+                    label=${this.nameLabel}
+                    required
+                  >
+                    <skdx-text-field
+                      name="name"
+                      required
+                    >
+                      <skdx-text-field-input autocomplete="name"></skdx-text-field-input>
+                    </skdx-text-field>
+                  </skdx-field>`}
+            <skdx-field
+              class="skdx-sign-up-page__field"
+              label=${this.emailLabel}
+              required
+            >
+              <skdx-text-field
+                name="email"
+                type="email"
+                required
+              >
+                <skdx-text-field-input
+                  type="email"
+                  autocomplete="email"
+                ></skdx-text-field-input>
+              </skdx-text-field>
+            </skdx-field>
+            <skdx-field
+              class="skdx-sign-up-page__field"
+              label=${this.passwordLabel}
+              required
+            >
+              <skdx-password-input
+                name="password"
+                required
+              ></skdx-password-input>
+            </skdx-field>
+            ${this.confirmPasswordLabel===void 0?u:l`<skdx-field
+                    class="skdx-sign-up-page__field"
+                    label=${this.confirmPasswordLabel}
+                    required
+                  >
+                    <skdx-password-input
+                      name=${x}
+                      required
+                      @value-change=${this.clearMismatch}
+                    ></skdx-password-input>
+                  </skdx-field>`}
+            ${this.hasContent?l`<div data-skdx-sign-up-page-content></div>`:u}
+            ${this.hasSlotted("terms")?l`<skdx-field class="skdx-sign-up-page__terms">
+                    <skdx-checkbox
+                      name="terms"
+                      required
+                    ></skdx-checkbox>
+                    <skdx-field-label><span></span></skdx-field-label>
+                  </skdx-field>`:u}
+            <skdx-button
+              class="skdx-sign-up-page__submit"
+              type="submit"
+              ?loading=${this.pending}
+              ?disabled=${this.pending}
+              >${this.submitLabel}</skdx-button
+            >
+          </form>
+        </skdx-form>
+        ${this.hasSlotted("footer")?l`<div class="skdx-sign-up-page__footer"></div>`:u}
+      </div>
+    `}};r([a({type:String})],t.prototype,"title",2),r([a({attribute:!1})],t.prototype,"providers",2),r([a({type:String})],t.prototype,"error",2),r([a({type:Boolean})],t.prototype,"pending",2),r([a({type:String,attribute:"name-label"})],t.prototype,"nameLabel",2),r([a({type:String,attribute:"email-label"})],t.prototype,"emailLabel",2),r([a({type:String,attribute:"password-label"})],t.prototype,"passwordLabel",2),r([a({type:String,attribute:"confirm-password-label"})],t.prototype,"confirmPasswordLabel",2),r([a({type:String,attribute:"password-mismatch-message"})],t.prototype,"passwordMismatchMessage",2),r([a({type:String,attribute:"submit-label"})],t.prototype,"submitLabel",2),r([a({attribute:!1})],t.prototype,"getProviderLabel",2),t=r([v("skdx-sign-up-page","sign-up-page","root")],t);function b(n,d){return n.querySelector(`[name="${d}"]`)}function m(n,d){return b(n,d)?.value??""}function w(n){return n.querySelector('[name="terms"]')?.checked===!0}export{t as SkdxSignUpPage};

package/dist/sign-up-page/index.cjs

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

package/dist/sign-up-page/index.d.cts

@@ -0,0 +1 @@
+export { SkdxSignUpPage, type SkdxSignUpDetail } from './SignUpPage.cjs';

package/dist/sign-up-page/index.d.ts

@@ -0,0 +1 @@
+export { SkdxSignUpPage, type SkdxSignUpDetail } from './SignUpPage.js';

package/dist/sign-up-page/index.js

@@ -0,0 +1 @@
+import{SkdxSignUpPage as S}from"./SignUpPage.js";export{S as SkdxSignUpPage};

package/dist/stat-card/StatCard.cjs

@@ -0,0 +1,61 @@
+"use strict";var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var b=(a,e)=>{for(var s in e)o(a,s,{get:e[s],enumerable:!0})},k=(a,e,s,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of v(e))!x.call(a,i)&&i!==s&&o(a,i,{get:()=>e[i],enumerable:!(l=p(e,i))||l.enumerable});return a};var _=a=>k(o({},"__esModule",{value:!0}),a),d=(a,e,s,l)=>{for(var i=l>1?void 0:l?p(e,s):e,h=a.length-1,u;h>=0;h--)(u=a[h])&&(i=(l?u(e,s,i):u(i))||i);return l&&i&&o(e,s,i),i};var y={};b(y,{SkdxStatCard:()=>n});module.exports=_(y);var t=require("lit"),r=require("lit/decorators.js"),g=require("../internal/define.cjs"),m=require("../internal/slots.cjs"),T=require("@skdx/web-components/progress"),L=require("@skdx/web-components/skeleton"),M=require("@skdx/web-components/text"),R=require("@skdx/web-components/visually-hidden");var $="data-skdx-stat-card-generated",f=0;function c(a,e,s){s===void 0?a.removeAttribute(e):a.setAttribute(e,s)}var n=class extends t.LitElement{constructor(){super(...arguments);this.loading=!1;this.labelId=`skdx-stat-card-label-${++f}`}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute("role","group"),this.setAttribute("aria-labelledby",this.labelId),queueMicrotask(()=>this.requestUpdate())}region(s){return this.querySelector(`.skdx-stat-card__${s}`)}hasSlotted(s){return this.querySelector(`[slot="${s}"], [data-skdx-slot="${s}"]`)!==null}updated(){c(this,"data-trend",this.trend),c(this,"data-sentiment",this.sentiment),c(this,"data-state",this.loading?"loading":void 0),c(this,"aria-busy",this.loading?"true":void 0),(0,m.placeSlotted)(this,$,{value:this.querySelector(".skdx-stat-card__value skdx-text"),icon:this.region("icon"),"trend-icon":this.region("trend-icon"),visual:this.region("visual"),footer:this.region("footer"),actions:this.region("actions")},null)}trendRegion(){return t.html`<span
+      class="skdx-stat-card__trend"
+      data-trend=${this.trend??t.nothing}
+      data-sentiment=${this.sentiment??t.nothing}
+    >
+      ${this.hasSlotted("trend-icon")?t.html`<span
+              class="skdx-stat-card__trend-icon"
+              aria-hidden="true"
+            ></span>`:t.nothing}${this.changeLabel?t.html`<skdx-visually-hidden>${this.changeLabel}</skdx-visually-hidden>`:t.nothing}${this.change}
+    </span>`}render(){return t.html`
+      <div
+        class="skdx-stat-card__header"
+        data-skdx-stat-card-generated
+      >
+        ${this.hasSlotted("icon")?t.html`<span
+                class="skdx-stat-card__icon"
+                aria-hidden="true"
+              ></span>`:t.nothing}
+        <span
+          class="skdx-stat-card__label"
+          id=${this.labelId}
+          >${this.label??""}</span
+        >
+        ${this.hasSlotted("actions")?t.html`<div class="skdx-stat-card__actions"></div>`:t.nothing}
+      </div>
+      <div
+        class="skdx-stat-card__body"
+        data-skdx-stat-card-generated
+      >
+        <span class="skdx-stat-card__value">
+          ${this.loading?t.html`<skdx-skeleton .shape=${"line"}></skdx-skeleton>`:t.nothing}
+          <skdx-text
+            as="span"
+            .variant=${"numeric"}
+            ?hidden=${this.loading}
+          ></skdx-text>
+        </span>
+        ${this.change!==void 0&&!this.loading?this.trendRegion():t.nothing}
+      </div>
+      ${this.description?t.html`<skdx-text
+              class="skdx-stat-card__description"
+              as="p"
+              .tone=${"muted"}
+              data-skdx-stat-card-generated
+              >${this.description}</skdx-text
+            >`:t.nothing}
+      ${typeof this.progress=="number"?t.html`<skdx-progress
+              class="skdx-stat-card__progress"
+              .value=${this.progress}
+              aria-labelledby=${this.labelId}
+              data-skdx-stat-card-generated
+            ></skdx-progress>`:t.nothing}
+      ${this.hasSlotted("visual")?t.html`<div
+              class="skdx-stat-card__visual"
+              data-skdx-stat-card-generated
+            ></div>`:t.nothing}
+      ${this.hasSlotted("footer")?t.html`<div
+              class="skdx-stat-card__footer"
+              data-skdx-stat-card-generated
+            ></div>`:t.nothing}
+    `}};d([(0,r.property)({type:String})],n.prototype,"label",2),d([(0,r.property)({type:String})],n.prototype,"change",2),d([(0,r.property)({type:String})],n.prototype,"trend",2),d([(0,r.property)({type:String})],n.prototype,"sentiment",2),d([(0,r.property)({type:String,attribute:"change-label"})],n.prototype,"changeLabel",2),d([(0,r.property)({type:String})],n.prototype,"description",2),d([(0,r.property)({type:Number})],n.prototype,"progress",2),d([(0,r.property)({type:Boolean})],n.prototype,"loading",2),n=d([(0,g.customElement)("skdx-stat-card","stat-card","root")],n);0&&(module.exports={SkdxStatCard});

package/dist/stat-card/StatCard.d.cts

@@ -0,0 +1,90 @@
+import { LitElement, type TemplateResult } from 'lit';
+import '@skdx/web-components/progress';
+import '@skdx/web-components/skeleton';
+import '@skdx/web-components/text';
+import '@skdx/web-components/visually-hidden';
+/**
+ * KPI tile block: a label, a value, an optional trend with sentiment colour,
+ * a description, a derived progress bar and a visual region, all inside one
+ * `role="group"` named by its own label.
+ *
+ * Renders light DOM, so its parts are classes rather than shadow `::part()`
+ * targets: `.skdx-stat-card` on the host, then `__header`, `__icon`,
+ * `__label`, `__actions`, `__body`, `__value`, `__trend`, `__trend-icon`,
+ * `__description`, `__progress`, `__visual` and `__footer`. `data-trend`,
+ * `data-sentiment` and `data-state` sit on the host for the skin to read.
+ *
+ * @example
+ * ```html
+ * <skdx-stat-card
+ *   label="Revenue"
+ *   change="+12.4%"
+ *   trend="up"
+ *   sentiment="positive"
+ * >
+ *   <span slot="value">$12,400</span>
+ * </skdx-stat-card>
+ * ```
+ *
+ * @slot value - The metric's current reading, already formatted by the consumer.
+ * @slot icon - Decorative glyph rendered beside the label in the card header.
+ * @slot trend-icon - Decorative glyph rendered beside the change text in the trend region.
+ * @slot visual - A chart or sparkline region the card sizes for the consumer to draw into.
+ * @slot footer - Content rendered in a footer region below the card's other regions.
+ * @slot actions - Controls rendered at the end of the header, such as a menu button.
+ */
+export declare class SkdxStatCard extends LitElement {
+    /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    /** Name of the metric, rendered into the label that names the group through `aria-labelledby`. */
+    label: string;
+    /**
+     * Already-formatted delta text such as "+12.4%", rendered inside the trend region.
+     * @default undefined — no trend region renders.
+     */
+    change?: string | undefined;
+    /**
+     * Direction of the change only, written to `data-trend` on the host and the trend part.
+     * @default undefined — no direction is written.
+     */
+    trend?: 'up' | 'down' | 'neutral' | undefined;
+    /**
+     * Whether the change is good or bad, independent of `trend`, written to `data-sentiment`.
+     * @default undefined — the trend renders in the skin's neutral colour.
+     */
+    sentiment?: 'positive' | 'negative' | 'neutral' | undefined;
+    /**
+     * Visually hidden text read before the change, such as "Increased by".
+     * @default undefined — only the change text itself is announced.
+     */
+    changeLabel?: string | undefined;
+    /**
+     * Supporting text rendered below the value, in the skin's muted tone.
+     * @default undefined — no description region renders.
+     */
+    description?: string | undefined;
+    /**
+     * Percentage from 0 to 100, rendered into a derived Progress named by the label.
+     * @default undefined — no progress bar renders.
+     */
+    progress?: number | undefined;
+    /**
+     * Shows a skeleton in the value region and withholds the trend while true.
+     * @default false
+     */
+    loading: boolean;
+    /** Generated label id, published as the group's `aria-labelledby`. */
+    private readonly labelId;
+    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 trendRegion;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-stat-card': SkdxStatCard;
+    }
+}

package/dist/stat-card/StatCard.d.ts

@@ -0,0 +1,90 @@
+import { LitElement, type TemplateResult } from 'lit';
+import '@skdx/web-components/progress';
+import '@skdx/web-components/skeleton';
+import '@skdx/web-components/text';
+import '@skdx/web-components/visually-hidden';
+/**
+ * KPI tile block: a label, a value, an optional trend with sentiment colour,
+ * a description, a derived progress bar and a visual region, all inside one
+ * `role="group"` named by its own label.
+ *
+ * Renders light DOM, so its parts are classes rather than shadow `::part()`
+ * targets: `.skdx-stat-card` on the host, then `__header`, `__icon`,
+ * `__label`, `__actions`, `__body`, `__value`, `__trend`, `__trend-icon`,
+ * `__description`, `__progress`, `__visual` and `__footer`. `data-trend`,
+ * `data-sentiment` and `data-state` sit on the host for the skin to read.
+ *
+ * @example
+ * ```html
+ * <skdx-stat-card
+ *   label="Revenue"
+ *   change="+12.4%"
+ *   trend="up"
+ *   sentiment="positive"
+ * >
+ *   <span slot="value">$12,400</span>
+ * </skdx-stat-card>
+ * ```
+ *
+ * @slot value - The metric's current reading, already formatted by the consumer.
+ * @slot icon - Decorative glyph rendered beside the label in the card header.
+ * @slot trend-icon - Decorative glyph rendered beside the change text in the trend region.
+ * @slot visual - A chart or sparkline region the card sizes for the consumer to draw into.
+ * @slot footer - Content rendered in a footer region below the card's other regions.
+ * @slot actions - Controls rendered at the end of the header, such as a menu button.
+ */
+export declare class SkdxStatCard extends LitElement {
+    /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    /** Name of the metric, rendered into the label that names the group through `aria-labelledby`. */
+    label: string;
+    /**
+     * Already-formatted delta text such as "+12.4%", rendered inside the trend region.
+     * @default undefined — no trend region renders.
+     */
+    change?: string | undefined;
+    /**
+     * Direction of the change only, written to `data-trend` on the host and the trend part.
+     * @default undefined — no direction is written.
+     */
+    trend?: 'up' | 'down' | 'neutral' | undefined;
+    /**
+     * Whether the change is good or bad, independent of `trend`, written to `data-sentiment`.
+     * @default undefined — the trend renders in the skin's neutral colour.
+     */
+    sentiment?: 'positive' | 'negative' | 'neutral' | undefined;
+    /**
+     * Visually hidden text read before the change, such as "Increased by".
+     * @default undefined — only the change text itself is announced.
+     */
+    changeLabel?: string | undefined;
+    /**
+     * Supporting text rendered below the value, in the skin's muted tone.
+     * @default undefined — no description region renders.
+     */
+    description?: string | undefined;
+    /**
+     * Percentage from 0 to 100, rendered into a derived Progress named by the label.
+     * @default undefined — no progress bar renders.
+     */
+    progress?: number | undefined;
+    /**
+     * Shows a skeleton in the value region and withholds the trend while true.
+     * @default false
+     */
+    loading: boolean;
+    /** Generated label id, published as the group's `aria-labelledby`. */
+    private readonly labelId;
+    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 trendRegion;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-stat-card': SkdxStatCard;
+    }
+}

package/dist/stat-card/StatCard.js

@@ -0,0 +1,61 @@
+var p=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var i=(l,n,s,o)=>{for(var r=o>1?void 0:o?g(n,s):n,h=l.length-1,u;h>=0;h--)(u=l[h])&&(r=(o?u(n,s,r):u(r))||r);return o&&r&&p(n,s,r),r};import{html as a,LitElement as m,nothing as t}from"lit";import{property as d}from"lit/decorators.js";import{customElement as v}from"../internal/define.js";import{placeSlotted as x}from"../internal/slots.js";import"@skdx/web-components/progress";import"@skdx/web-components/skeleton";import"@skdx/web-components/text";import"@skdx/web-components/visually-hidden";var b="data-skdx-stat-card-generated",k=0;function c(l,n,s){s===void 0?l.removeAttribute(n):l.setAttribute(n,s)}var e=class extends m{constructor(){super(...arguments);this.loading=!1;this.labelId=`skdx-stat-card-label-${++k}`}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute("role","group"),this.setAttribute("aria-labelledby",this.labelId),queueMicrotask(()=>this.requestUpdate())}region(s){return this.querySelector(`.skdx-stat-card__${s}`)}hasSlotted(s){return this.querySelector(`[slot="${s}"], [data-skdx-slot="${s}"]`)!==null}updated(){c(this,"data-trend",this.trend),c(this,"data-sentiment",this.sentiment),c(this,"data-state",this.loading?"loading":void 0),c(this,"aria-busy",this.loading?"true":void 0),x(this,b,{value:this.querySelector(".skdx-stat-card__value skdx-text"),icon:this.region("icon"),"trend-icon":this.region("trend-icon"),visual:this.region("visual"),footer:this.region("footer"),actions:this.region("actions")},null)}trendRegion(){return a`<span
+      class="skdx-stat-card__trend"
+      data-trend=${this.trend??t}
+      data-sentiment=${this.sentiment??t}
+    >
+      ${this.hasSlotted("trend-icon")?a`<span
+              class="skdx-stat-card__trend-icon"
+              aria-hidden="true"
+            ></span>`:t}${this.changeLabel?a`<skdx-visually-hidden>${this.changeLabel}</skdx-visually-hidden>`:t}${this.change}
+    </span>`}render(){return a`
+      <div
+        class="skdx-stat-card__header"
+        data-skdx-stat-card-generated
+      >
+        ${this.hasSlotted("icon")?a`<span
+                class="skdx-stat-card__icon"
+                aria-hidden="true"
+              ></span>`:t}
+        <span
+          class="skdx-stat-card__label"
+          id=${this.labelId}
+          >${this.label??""}</span
+        >
+        ${this.hasSlotted("actions")?a`<div class="skdx-stat-card__actions"></div>`:t}
+      </div>
+      <div
+        class="skdx-stat-card__body"
+        data-skdx-stat-card-generated
+      >
+        <span class="skdx-stat-card__value">
+          ${this.loading?a`<skdx-skeleton .shape=${"line"}></skdx-skeleton>`:t}
+          <skdx-text
+            as="span"
+            .variant=${"numeric"}
+            ?hidden=${this.loading}
+          ></skdx-text>
+        </span>
+        ${this.change!==void 0&&!this.loading?this.trendRegion():t}
+      </div>
+      ${this.description?a`<skdx-text
+              class="skdx-stat-card__description"
+              as="p"
+              .tone=${"muted"}
+              data-skdx-stat-card-generated
+              >${this.description}</skdx-text
+            >`:t}
+      ${typeof this.progress=="number"?a`<skdx-progress
+              class="skdx-stat-card__progress"
+              .value=${this.progress}
+              aria-labelledby=${this.labelId}
+              data-skdx-stat-card-generated
+            ></skdx-progress>`:t}
+      ${this.hasSlotted("visual")?a`<div
+              class="skdx-stat-card__visual"
+              data-skdx-stat-card-generated
+            ></div>`:t}
+      ${this.hasSlotted("footer")?a`<div
+              class="skdx-stat-card__footer"
+              data-skdx-stat-card-generated
+            ></div>`:t}
+    `}};i([d({type:String})],e.prototype,"label",2),i([d({type:String})],e.prototype,"change",2),i([d({type:String})],e.prototype,"trend",2),i([d({type:String})],e.prototype,"sentiment",2),i([d({type:String,attribute:"change-label"})],e.prototype,"changeLabel",2),i([d({type:String})],e.prototype,"description",2),i([d({type:Number})],e.prototype,"progress",2),i([d({type:Boolean})],e.prototype,"loading",2),e=i([v("skdx-stat-card","stat-card","root")],e);export{e as SkdxStatCard};

package/dist/stat-card/index.cjs

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

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

@@ -0,0 +1 @@
+export { SkdxStatCard } from './StatCard.cjs';

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

@@ -0,0 +1 @@
+export { SkdxStatCard } from './StatCard.js';

package/dist/stat-card/index.js

@@ -0,0 +1 @@
+import{SkdxStatCard as a}from"./StatCard.js";export{a as SkdxStatCard};

package/dist/usage-card/UsageCard.cjs

@@ -0,0 +1,42 @@
+"use strict";var m=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var $=(r,t)=>{for(var e in t)m(r,e,{get:t[e],enumerable:!0})},_=(r,t,e,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of v(t))!x.call(r,i)&&i!==e&&m(r,i,{get:()=>t[i],enumerable:!(n=c(t,i))||n.enumerable});return r};var k=r=>_(m({},"__esModule",{value:!0}),r),d=(r,t,e,n)=>{for(var i=n>1?void 0:n?c(t,e):t,u=r.length-1,o;u>=0;u--)(o=r[u])&&(i=(n?o(t,e,i):o(i))||i);return n&&i&&m(t,e,i),i};var T={};$(T,{SkdxUsageCard:()=>a});module.exports=k(T);var s=require("lit"),l=require("lit/decorators.js"),h=require("../internal/define.cjs"),f=require("../internal/slots.cjs"),g=require("./usage.cjs"),R=require("@skdx/web-components/progress"),A=require("@skdx/web-components/text");var y="data-skdx-usage-card-generated",L=0;function p(r,t,e){e===void 0?r.removeAttribute(t):r.setAttribute(t,e)}var a=class extends s.LitElement{constructor(){super(...arguments);this.unlimitedLabel="Unlimited";this.labelId=`skdx-usage-card-label-${++L}`}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}"], [data-skdx-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=(0,g.usageMeter)(this.used??0,this.limit);return{limitText:`/ ${this.format(e.limit)}`,overLimit:e.overLimit,range:e.range}}updated(){p(this,"data-state",this.reading.overLimit?"over-limit":void 0),p(this,"data-status",this.status),(0,f.placeSlotted)(this,y,{actions:this.region("actions"),footer:this.region("footer")},null)}render(){let{limitText:e,range:n}=this.reading,i=this.format,u=this.unit?` ${this.unit}`:"";return s.html`
+      <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")?s.html`<div class="skdx-usage-card__actions"></div>`:s.nothing}
+      </div>
+      <div
+        class="skdx-usage-card__value"
+        data-skdx-usage-card-generated
+      >
+        <span class="skdx-usage-card__used">${i((0,g.normalizeUsage)(this.used??0))}</span>
+        ${e===void 0?s.nothing:s.html`<span class="skdx-usage-card__limit">${e}</span>`}
+        ${this.unit?s.html`<span class="skdx-usage-card__unit">${this.unit}</span>`:s.nothing}
+      </div>
+      ${n?s.html`<skdx-progress
+              class="skdx-usage-card__progress"
+              role="meter"
+              min="0"
+              .max=${n.max}
+              .value=${n.value}
+              aria-labelledby=${this.labelId}
+              .getValueLabel=${(o,E,b)=>`${i(o)} / ${i(b)}${u}`}
+              data-skdx-usage-card-generated
+            ></skdx-progress>`:s.nothing}
+      ${this.description?s.html`<skdx-text
+              class="skdx-usage-card__description"
+              as="p"
+              .tone=${"muted"}
+              data-skdx-usage-card-generated
+              >${this.description}</skdx-text
+            >`:s.nothing}
+      ${this.hasSlotted("footer")?s.html`<div
+              class="skdx-usage-card__footer"
+              data-skdx-usage-card-generated
+            ></div>`:s.nothing}
+    `}};d([(0,l.property)({type:String})],a.prototype,"label",2),d([(0,l.property)({type:Number})],a.prototype,"used",2),d([(0,l.property)({type:Number})],a.prototype,"limit",2),d([(0,l.property)({type:String})],a.prototype,"unit",2),d([(0,l.property)({attribute:!1})],a.prototype,"formatValue",2),d([(0,l.property)({type:String,attribute:"unlimited-label"})],a.prototype,"unlimitedLabel",2),d([(0,l.property)({type:String})],a.prototype,"description",2),d([(0,l.property)({type:String})],a.prototype,"status",2),a=d([(0,h.customElement)("skdx-usage-card","usage-card","root")],a);0&&(module.exports={SkdxUsageCard});