@skdx/web-components-blocks 0.1.0 → 0.35.0

package/dist/stat-card/StatCard.js

@@ -0,0 +1,61 @@
+var p=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var i=(l,n,a,o)=>{for(var r=o>1?void 0:o?g(n,a):n,h=l.length-1,u;h>=0;h--)(u=l[h])&&(r=(o?u(n,a,r):u(r))||r);return o&&r&&p(n,a,r),r};import{html as s,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,a){a===void 0?l.removeAttribute(n):l.setAttribute(n,a)}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(a){return this.querySelector(`.skdx-stat-card__${a}`)}hasSlotted(a){return this.querySelector(`[slot="${a}"]`)!==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 s`<span
+      class="skdx-stat-card__trend"
+      data-trend=${this.trend??t}
+      data-sentiment=${this.sentiment??t}
+    >
+      ${this.hasSlotted("trend-icon")?s`<span
+              class="skdx-stat-card__trend-icon"
+              aria-hidden="true"
+            ></span>`:t}${this.changeLabel?s`<skdx-visually-hidden>${this.changeLabel}</skdx-visually-hidden>`:t}${this.change}
+    </span>`}render(){return s`
+      <div
+        class="skdx-stat-card__header"
+        data-skdx-stat-card-generated
+      >
+        ${this.hasSlotted("icon")?s`<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")?s`<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?s`<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?s`<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"?s`<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")?s`<div
+              class="skdx-stat-card__visual"
+              data-skdx-stat-card-generated
+            ></div>`:t}
+      ${this.hasSlotted("footer")?s`<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}"]`)!==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});

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

@@ -0,0 +1,81 @@
+import { LitElement, type TemplateResult } from 'lit';
+import '@skdx/web-components/progress';
+import '@skdx/web-components/text';
+/**
+ * Quota tile block: a label, the amount used against a limit, a derived meter
+ * and a status colour, all inside one `role="group"` named by its own label.
+ * Handles a finite, zero, unlimited or unknown limit without division errors,
+ * and derives over-limit from the numbers rather than a status property.
+ *
+ * Renders light DOM, so its parts are classes rather than shadow `::part()`
+ * targets: `.skdx-usage-card` on the host, then `__header`, `__label`,
+ * `__actions`, `__value`, `__used`, `__limit`, `__unit`, `__progress`,
+ * `__description` and `__footer`. `data-state` and `data-status` sit on the
+ * host for the skin to read.
+ *
+ * @example
+ * ```html
+ * <skdx-usage-card
+ *   label="Storage"
+ *   used="42"
+ *   limit="50"
+ *   unit="GB"
+ * ></skdx-usage-card>
+ * ```
+ *
+ * @slot actions - Controls rendered at the end of the header, such as a manage-plan link.
+ * @slot footer - Content rendered in a footer region below the card, such as renewal metadata.
+ */
+export declare class SkdxUsageCard extends LitElement {
+    /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    /** Name of the quota, rendered into the label that names the group through `aria-labelledby`. */
+    label: string;
+    /** The current amount consumed, formatted by `formatValue` for the value region and the meter. */
+    used: number;
+    /**
+     * The finite cap `used` is measured against; `null` renders `unlimitedLabel` instead of a number.
+     * @default undefined — the limit is unknown, so no limit text or meter renders.
+     */
+    limit?: number | null | undefined;
+    /**
+     * Unit label rendered after the limit text, such as "GB" or "seats".
+     * @default undefined — no unit region renders.
+     */
+    unit?: string | undefined;
+    /**
+     * Formats `used` and `limit` for the consumer's own locale and precision.
+     * @default String — the raw number is rendered as-is.
+     */
+    formatValue?: ((value: number) => string) | undefined;
+    /**
+     * Text rendered in place of a limit number when `limit` is `null`.
+     * @default 'Unlimited'
+     */
+    unlimitedLabel: string;
+    /**
+     * Supporting copy rendered below the meter, in the skin's muted tone.
+     * @default undefined — no description region renders.
+     */
+    description?: string | undefined;
+    /**
+     * Colour role written to `data-status`, tinting the meter fill and the used amount.
+     * @default undefined — the skin's own default colour.
+     */
+    status?: 'info' | 'success' | 'warning' | 'danger' | (string & {}) | undefined;
+    /** 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;
+    private get format();
+    private get reading();
+    protected updated(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-usage-card': SkdxUsageCard;
+    }
+}

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

@@ -0,0 +1,81 @@
+import { LitElement, type TemplateResult } from 'lit';
+import '@skdx/web-components/progress';
+import '@skdx/web-components/text';
+/**
+ * Quota tile block: a label, the amount used against a limit, a derived meter
+ * and a status colour, all inside one `role="group"` named by its own label.
+ * Handles a finite, zero, unlimited or unknown limit without division errors,
+ * and derives over-limit from the numbers rather than a status property.
+ *
+ * Renders light DOM, so its parts are classes rather than shadow `::part()`
+ * targets: `.skdx-usage-card` on the host, then `__header`, `__label`,
+ * `__actions`, `__value`, `__used`, `__limit`, `__unit`, `__progress`,
+ * `__description` and `__footer`. `data-state` and `data-status` sit on the
+ * host for the skin to read.
+ *
+ * @example
+ * ```html
+ * <skdx-usage-card
+ *   label="Storage"
+ *   used="42"
+ *   limit="50"
+ *   unit="GB"
+ * ></skdx-usage-card>
+ * ```
+ *
+ * @slot actions - Controls rendered at the end of the header, such as a manage-plan link.
+ * @slot footer - Content rendered in a footer region below the card, such as renewal metadata.
+ */
+export declare class SkdxUsageCard extends LitElement {
+    /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    /** Name of the quota, rendered into the label that names the group through `aria-labelledby`. */
+    label: string;
+    /** The current amount consumed, formatted by `formatValue` for the value region and the meter. */
+    used: number;
+    /**
+     * The finite cap `used` is measured against; `null` renders `unlimitedLabel` instead of a number.
+     * @default undefined — the limit is unknown, so no limit text or meter renders.
+     */
+    limit?: number | null | undefined;
+    /**
+     * Unit label rendered after the limit text, such as "GB" or "seats".
+     * @default undefined — no unit region renders.
+     */
+    unit?: string | undefined;
+    /**
+     * Formats `used` and `limit` for the consumer's own locale and precision.
+     * @default String — the raw number is rendered as-is.
+     */
+    formatValue?: ((value: number) => string) | undefined;
+    /**
+     * Text rendered in place of a limit number when `limit` is `null`.
+     * @default 'Unlimited'
+     */
+    unlimitedLabel: string;
+    /**
+     * Supporting copy rendered below the meter, in the skin's muted tone.
+     * @default undefined — no description region renders.
+     */
+    description?: string | undefined;
+    /**
+     * Colour role written to `data-status`, tinting the meter fill and the used amount.
+     * @default undefined — the skin's own default colour.
+     */
+    status?: 'info' | 'success' | 'warning' | 'danger' | (string & {}) | undefined;
+    /** 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;
+    private get format();
+    private get reading();
+    protected updated(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-usage-card': SkdxUsageCard;
+    }
+}

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';