@neptune.fintech/web-ui 2.0.0 → 2.2.0

package/dist/components/cards.js

@@ -0,0 +1,498 @@
+// © 2026 Neptune.Fintech (neptune.ly) · Neptune Odyssey Community License v1.0
+// Neptune Odyssey — payment-card components
+// <npt-card-art>, <npt-card-row>, <npt-add-card>, <npt-card-controls>.
+// Custom-property driven only; logical layout → mirrors in RTL. Money tabular.
+import { NptElement, css, html, A11Y, define } from "./base.js";
+const esc = (v) => (v ?? "").replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+/**
+ * <npt-card-art holder="A. KELLER" last4="4821" expiry="08/29" scheme="VISA"
+ *   variant="virtual|physical|frozen"><span slot="brand">◈</span></npt-card-art>
+ * Payment-card visual on the brand gradient. `scheme` is a plain label; provide a
+ * brand mark via the `brand` slot (top-trailing). [frozen] dims and shows a frozen
+ * affordance. Card number digits use tabular figures.
+ */
+export class NptCardArt extends NptElement {
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.update();
+    }
+    styles() {
+        return css `
+      ${A11Y}
+      :host {
+        display: block;
+      }
+      .card {
+        position: relative;
+        box-sizing: border-box;
+        aspect-ratio: 1.586;
+        inline-size: 100%;
+        padding: var(--npt-space-6, 24px);
+        border-radius: var(--npt-corner-lg, 24px);
+        background: linear-gradient(135deg, var(--md-sys-color-primary), var(--md-sys-color-tertiary));
+        color: var(--md-sys-color-on-primary);
+        box-shadow: var(--npt-elevation-2, 0 2px 6px rgba(0, 0, 0, 0.18));
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        overflow: hidden;
+        transition: filter var(--npt-dur-fast, 200ms) var(--npt-ease-standard, ease);
+      }
+      :host([variant="virtual"]) .card {
+        background: linear-gradient(
+          135deg,
+          var(--md-sys-color-tertiary),
+          var(--md-sys-color-primary)
+        );
+      }
+      .top {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: var(--npt-space-4, 16px);
+      }
+      .scheme {
+        font-family: var(--npt-font-display);
+        font-size: var(--npt-text-label, 14px);
+        font-weight: 700;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        opacity: 0.92;
+      }
+      .brand {
+        display: inline-flex;
+        align-items: center;
+        font-size: var(--npt-text-title, 18px);
+        line-height: 1;
+      }
+      .number {
+        font-family: var(--npt-font-num);
+        font-feature-settings: "tnum" 1;
+        font-variant-numeric: tabular-nums;
+        font-size: var(--npt-text-title, 18px);
+        letter-spacing: 0.18em;
+        margin: 0;
+      }
+      .dots {
+        opacity: 0.7;
+        margin-inline-end: var(--npt-space-2, 8px);
+      }
+      .bottom {
+        display: flex;
+        align-items: flex-end;
+        justify-content: space-between;
+        gap: var(--npt-space-4, 16px);
+      }
+      .holder {
+        font-family: var(--npt-font-text);
+        font-size: var(--npt-text-label, 14px);
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+        margin: 0;
+        min-inline-size: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .meta {
+        font-family: var(--npt-font-text);
+        font-size: var(--npt-text-caption, 12px);
+        opacity: 0.85;
+        margin: 0 0 var(--npt-space-1, 4px);
+      }
+      .expiry {
+        font-family: var(--npt-font-num);
+        font-variant-numeric: tabular-nums;
+        font-size: var(--npt-text-label, 14px);
+        text-align: end;
+        margin: 0;
+      }
+      .frost {
+        position: absolute;
+        inset: 0;
+        display: none;
+        align-items: center;
+        justify-content: center;
+        gap: var(--npt-space-2, 8px);
+        background: var(--md-sys-color-scrim);
+        opacity: 0.42;
+        font-family: var(--npt-font-text);
+        font-size: var(--npt-text-label, 14px);
+        color: var(--md-sys-color-on-primary);
+        pointer-events: none;
+      }
+      :host([variant="frozen"]) .card {
+        filter: grayscale(0.65) brightness(0.9);
+      }
+      :host([variant="frozen"]) .frost {
+        display: flex;
+      }
+    `;
+    }
+    render() {
+        const holder = esc(this.getAttribute("holder"));
+        const last4 = esc(this.getAttribute("last4"));
+        const expiry = esc(this.getAttribute("expiry"));
+        const scheme = esc(this.getAttribute("scheme"));
+        const frozen = this.getAttribute("variant") === "frozen";
+        const label = `${scheme} card ending ${last4}${frozen ? ", frozen" : ""}`;
+        return html `<div class="card" part="card" role="group" aria-label="${label}">
+      <div class="top">
+        <span class="scheme">${scheme}</span>
+        <span class="brand"><slot name="brand"></slot></span>
+      </div>
+      <p class="number">
+        <span class="dots" aria-hidden="true">•••• •••• ••••</span>${last4}
+      </p>
+      <div class="bottom">
+        <p class="holder">${holder}</p>
+        <div>
+          <p class="meta">Expires</p>
+          <p class="expiry">${expiry}</p>
+        </div>
+      </div>
+      <div class="frost" aria-hidden="true"><span aria-hidden="true">❄</span> Frozen</div>
+    </div>`;
+    }
+}
+NptCardArt.observedAttributes = ["holder", "last4", "expiry", "scheme", "variant"];
+/**
+ * <npt-card-row label="Salary card" last4="4821" scheme="VISA" [interactive]>
+ *   <span slot="brand">◈</span></npt-card-row>
+ * Saved-card list item. Leading `brand` slot, trailing chevron. [interactive] makes
+ * the whole row a button (role/tabindex/hover) that emits a bubbling `select` event.
+ */
+export class NptCardRow extends NptElement {
+    constructor() {
+        super(...arguments);
+        this.onClick = () => this.activate();
+        this.onKey = (e) => {
+            if (!this.hasAttribute("interactive"))
+                return;
+            if (e.key === " " || e.key === "Enter") {
+                e.preventDefault();
+                this.activate();
+            }
+        };
+    }
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.update();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener("click", this.onClick);
+        this.addEventListener("keydown", this.onKey);
+    }
+    disconnectedCallback() {
+        this.removeEventListener("click", this.onClick);
+        this.removeEventListener("keydown", this.onKey);
+    }
+    activate() {
+        if (!this.hasAttribute("interactive"))
+            return;
+        this.dispatchEvent(new CustomEvent("select", { bubbles: true }));
+    }
+    styles() {
+        return css `
+      ${A11Y}
+      :host {
+        display: block;
+      }
+      .row {
+        display: flex;
+        align-items: center;
+        gap: var(--npt-space-4, 16px);
+        min-height: 56px;
+        padding-block: var(--npt-space-3, 12px);
+        padding-inline: var(--npt-space-2, 8px);
+        border-bottom: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: var(--npt-corner-sm, 12px);
+        color: var(--md-sys-color-on-surface);
+        transition: background-color var(--npt-dur-fast, 200ms) var(--npt-ease-standard, ease);
+      }
+      :host([interactive]) {
+        cursor: pointer;
+      }
+      :host([interactive]) .row:hover {
+        background: var(--md-sys-color-surface-container);
+      }
+      .brand {
+        inline-size: 40px;
+        block-size: 40px;
+        flex: 0 0 auto;
+        border-radius: var(--npt-corner-xs, 8px);
+        background: var(--md-sys-color-secondary-container);
+        color: var(--md-sys-color-on-secondary-container);
+        display: grid;
+        place-items: center;
+        font-family: var(--npt-font-display);
+        font-weight: 700;
+      }
+      .body {
+        flex: 1 1 auto;
+        min-inline-size: 0;
+      }
+      .label {
+        font-family: var(--npt-font-text);
+        font-size: var(--npt-text-body-lg, 16px);
+        margin: 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .sub {
+        font-family: var(--npt-font-num);
+        font-variant-numeric: tabular-nums;
+        font-size: var(--npt-text-body, 14px);
+        color: var(--md-sys-color-on-surface-variant);
+        margin: 2px 0 0;
+        display: flex;
+        align-items: center;
+        gap: var(--npt-space-2, 8px);
+      }
+      .scheme {
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+        font-family: var(--npt-font-text);
+      }
+      .chevron {
+        flex: 0 0 auto;
+        color: var(--md-sys-color-on-surface-variant);
+        font-size: var(--npt-text-title, 18px);
+        line-height: 1;
+        display: none;
+      }
+      :host([interactive]) .chevron {
+        display: inline;
+      }
+    `;
+    }
+    render() {
+        const label = esc(this.getAttribute("label"));
+        const last4 = esc(this.getAttribute("last4"));
+        const scheme = esc(this.getAttribute("scheme"));
+        const initial = scheme.trim().charAt(0).toUpperCase() || label.trim().charAt(0).toUpperCase() || "•";
+        const interactive = this.hasAttribute("interactive");
+        const rowAttrs = interactive ? html `role="button" tabindex="0"` : html `role="group"`;
+        return html `<div class="row" part="row" ${rowAttrs} aria-label="${label} ${scheme} ending ${last4}">
+      <span class="brand" aria-hidden="true"><slot name="brand">${initial}</slot></span>
+      <div class="body">
+        <p class="label">${label}</p>
+        <p class="sub">
+          ${scheme ? html `<span class="scheme">${scheme}</span>` : ""}
+          <span>•••• ${last4}</span>
+        </p>
+      </div>
+      <span class="chevron" aria-hidden="true">›</span>
+    </div>`;
+    }
+}
+NptCardRow.observedAttributes = ["label", "last4", "scheme", "interactive"];
+/**
+ * <npt-add-card>Add a new card</npt-add-card>
+ * Dashed call-to-action tile with a leading +. Behaves as a button (role/tabindex)
+ * and emits a bubbling `add` event on click / Enter / Space.
+ */
+export class NptAddCard extends NptElement {
+    constructor() {
+        super(...arguments);
+        this.onClick = () => this.activate();
+        this.onKey = (e) => {
+            if (e.key === " " || e.key === "Enter") {
+                e.preventDefault();
+                this.activate();
+            }
+        };
+    }
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.update();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener("click", this.onClick);
+        this.addEventListener("keydown", this.onKey);
+    }
+    disconnectedCallback() {
+        this.removeEventListener("click", this.onClick);
+        this.removeEventListener("keydown", this.onKey);
+    }
+    activate() {
+        if (this.hasAttribute("disabled"))
+            return;
+        this.dispatchEvent(new CustomEvent("add", { bubbles: true }));
+    }
+    styles() {
+        return css `
+      ${A11Y}
+      :host {
+        display: block;
+        cursor: pointer;
+      }
+      :host([disabled]) {
+        cursor: not-allowed;
+        opacity: 0.38;
+      }
+      .tile {
+        box-sizing: border-box;
+        inline-size: 100%;
+        min-height: 88px;
+        display: flex;
+        align-items: center;
+        gap: var(--npt-space-4, 16px);
+        padding-inline: var(--npt-space-5, 20px);
+        padding-block: var(--npt-space-4, 16px);
+        border: 2px dashed var(--md-sys-color-outline);
+        border-radius: var(--npt-corner-lg, 24px);
+        background: transparent;
+        color: var(--md-sys-color-on-surface-variant);
+        transition: border-color var(--npt-dur-fast, 200ms) var(--npt-ease-standard, ease),
+          background-color var(--npt-dur-fast, 200ms) var(--npt-ease-standard, ease),
+          color var(--npt-dur-fast, 200ms) var(--npt-ease-standard, ease);
+      }
+      :host(:not([disabled])) .tile:hover {
+        border-color: var(--md-sys-color-primary);
+        background: var(--md-sys-color-primary-container);
+        color: var(--md-sys-color-on-primary-container);
+      }
+      .plus {
+        inline-size: 44px;
+        block-size: 44px;
+        flex: 0 0 auto;
+        border-radius: var(--npt-corner-full, 999px);
+        background: var(--md-sys-color-secondary-container);
+        color: var(--md-sys-color-on-secondary-container);
+        display: grid;
+        place-items: center;
+        font-family: var(--npt-font-display);
+        font-size: var(--npt-text-title, 18px);
+        font-weight: 700;
+        line-height: 1;
+      }
+      .label {
+        font-family: var(--npt-font-text);
+        font-size: var(--npt-text-body-lg, 16px);
+      }
+    `;
+    }
+    render() {
+        const disabled = this.hasAttribute("disabled");
+        const tabindex = disabled ? "-1" : "0";
+        return html `<div
+      class="tile"
+      part="tile"
+      role="button"
+      tabindex="${tabindex}"
+      aria-disabled="${disabled}"
+    >
+      <span class="plus" aria-hidden="true">+</span>
+      <span class="label"><slot>Add card</slot></span>
+    </div>`;
+    }
+}
+NptAddCard.observedAttributes = ["disabled"];
+/**
+ * <npt-card-controls [frozen]></npt-card-controls>
+ * Row of toggle actions (Freeze, Limits, Details, PIN). Each press dispatches a
+ * bubbling `control` event whose detail is { action }. [frozen] flips the first
+ * action's label/affordance to Unfreeze.
+ */
+export class NptCardControls extends NptElement {
+    constructor() {
+        super(...arguments);
+        this.onClick = (e) => {
+            const btn = e.target?.closest("[data-action]");
+            if (!btn)
+                return;
+            const action = btn.dataset["action"];
+            if (!action)
+                return;
+            this.dispatchEvent(new CustomEvent("control", { bubbles: true, detail: { action } }));
+        };
+    }
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.update();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.root.addEventListener("click", this.onClick);
+    }
+    disconnectedCallback() {
+        this.root.removeEventListener("click", this.onClick);
+    }
+    styles() {
+        return css `
+      ${A11Y}
+      :host {
+        display: block;
+      }
+      .bar {
+        display: flex;
+        gap: var(--npt-space-2, 8px);
+      }
+      button {
+        flex: 1 1 0;
+        min-inline-size: 0;
+        min-height: 64px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: var(--npt-space-1, 4px);
+        padding-block: var(--npt-space-3, 12px);
+        padding-inline: var(--npt-space-2, 8px);
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: var(--npt-corner-md, 16px);
+        background: var(--md-sys-color-surface-container-low);
+        color: var(--md-sys-color-on-surface);
+        font-family: var(--npt-font-text);
+        font-size: var(--npt-text-label, 14px);
+        cursor: pointer;
+        transition: background-color var(--npt-dur-fast, 200ms) var(--npt-ease-standard, ease),
+          color var(--npt-dur-fast, 200ms) var(--npt-ease-standard, ease);
+      }
+      button:hover {
+        background: var(--md-sys-color-surface-container-high);
+      }
+      .glyph {
+        font-size: var(--npt-text-title, 18px);
+        line-height: 1;
+      }
+      button[data-action="freeze"][aria-pressed="true"] {
+        background: var(--md-sys-color-primary-container);
+        color: var(--md-sys-color-on-primary-container);
+        border-color: transparent;
+      }
+    `;
+    }
+    render() {
+        const frozen = this.hasAttribute("frozen");
+        const buttons = NptCardControls.ACTIONS.map((a) => {
+            const isFreeze = a.action === "freeze";
+            const label = isFreeze && frozen ? "Unfreeze" : a.label;
+            const pressed = isFreeze ? html `aria-pressed="${frozen}"` : "";
+            return html `<button
+        type="button"
+        part="control"
+        data-action="${esc(a.action)}"
+        aria-label="${esc(label)}"
+        ${pressed}
+      >
+        <span class="glyph" aria-hidden="true">${a.glyph}</span>
+        <span>${esc(label)}</span>
+      </button>`;
+        }).join("");
+        return html `<div class="bar" part="bar" role="group" aria-label="Card controls">${buttons}</div>`;
+    }
+}
+NptCardControls.observedAttributes = ["frozen"];
+NptCardControls.ACTIONS = [
+    { action: "freeze", label: "Freeze", glyph: "❄" },
+    { action: "limits", label: "Limits", glyph: "⚖" },
+    { action: "details", label: "Details", glyph: "≣" },
+    { action: "pin", label: "PIN", glyph: "⊞" },
+];
+void define;
+//# sourceMappingURL=cards.js.map

package/dist/components/cards.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cards.js","sourceRoot":"","sources":["../../src/components/cards.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,4CAA4C;AAC5C,uEAAuE;AACvE,+EAA+E;AAC/E,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAEhE,MAAM,GAAG,GAAG,CAAC,CAAgB,EAAU,EAAE,CACvC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAE,CAAC,CAAC;AAEvG;;;;;;GAMG;AACH,MAAM,OAAO,UAAW,SAAQ,UAAU;IAGxC,wBAAwB;QACtB,IAAI,IAAI,CAAC,WAAW;YAAE,IAAI,CAAC,MAAM,EAAE,CAAC;IACtC,CAAC;IAES,MAAM;QACd,OAAO,GAAG,CAAA;QACN,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6GP,CAAC;IACJ,CAAC;IAES,MAAM;QACd,MAAM,MAAM,GAAG,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC;QAChD,MAAM,KAAK,GAAG,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;QAC9C,MAAM,MAAM,GAAG,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC;QAChD,MAAM,MAAM,GAAG,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC;QAChD,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,KAAK,QAAQ,CAAC;QACzD,MAAM,KAAK,GAAG,GAAG,MAAM,gBAAgB,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;QAC1E,OAAO,IAAI,CAAA,0DAA0D,KAAK;;+BAE/C,MAAM;;;;qEAIgC,KAAK;;;4BAG9C,MAAM;;;8BAGJ,MAAM;;;;WAIzB,CAAC;IACV,CAAC;;AAhJM,6BAAkB,GAAG,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC;AAmJjF;;;;;GAKG;AACH,MAAM,OAAO,UAAW,SAAQ,UAAU;IAA1C;;QAuBU,YAAO,GAAG,GAAS,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;QACtC,UAAK,GAAG,CAAC,CAAgB,EAAQ,EAAE;YACzC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC;gBAAE,OAAO;YAC9C,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;gBACvC,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,CAAC;QACH,CAAC,CAAC;IAiGJ,CAAC;IA5HC,wBAAwB;QACtB,IAAI,IAAI,CAAC,WAAW;YAAE,IAAI,CAAC,MAAM,EAAE,CAAC;IACtC,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAC7C,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/C,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAChD,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAClD,CAAC;IAEO,QAAQ;QACd,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC;YAAE,OAAO;QAC9C,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IACnE,CAAC;IAWS,MAAM;QACd,OAAO,GAAG,CAAA;QACN,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuEP,CAAC;IACJ,CAAC;IAES,MAAM;QACd,MAAM,KAAK,GAAG,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;QAC9C,MAAM,KAAK,GAAG,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;QAC9C,MAAM,MAAM,GAAG,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC;QAChD,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,IAAI,GAAG,CAAC;QACrG,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;QACrD,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,CAAC,IAAI,CAAA,4BAA4B,CAAC,CAAC,CAAC,IAAI,CAAA,cAAc,CAAC;QACrF,OAAO,IAAI,CAAA,+BAA+B,QAAQ,gBAAgB,KAAK,IAAI,MAAM,WAAW,KAAK;kEACnC,OAAO;;2BAE9C,KAAK;;YAEpB,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,wBAAwB,MAAM,SAAS,CAAC,CAAC,CAAC,EAAE;uBAC9C,KAAK;;;;WAIjB,CAAC;IACV,CAAC;;AA7HM,6BAAkB,GAAG,CAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,aAAa,CAAC,AAA9C,CAA+C;AAgI1E;;;;GAIG;AACH,MAAM,OAAO,UAAW,SAAQ,UAAU;IAA1C;;QAuBU,YAAO,GAAG,GAAS,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;QACtC,UAAK,GAAG,CAAC,CAAgB,EAAQ,EAAE;YACzC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;gBACvC,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,CAAC;QACH,CAAC,CAAC;IAsEJ,CAAC;IAhGC,wBAAwB;QACtB,IAAI,IAAI,CAAC,WAAW;YAAE,IAAI,CAAC,MAAM,EAAE,CAAC;IACtC,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAC7C,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/C,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAChD,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAClD,CAAC;IAEO,QAAQ;QACd,IAAI,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC;YAAE,OAAO;QAC1C,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IAChE,CAAC;IAUS,MAAM;QACd,OAAO,GAAG,CAAA;QACN,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiDP,CAAC;IACJ,CAAC;IAES,MAAM;QACd,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;QAC/C,MAAM,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC;QACvC,OAAO,IAAI,CAAA;;;;kBAIG,QAAQ;uBACH,QAAQ;;;;WAIpB,CAAC;IACV,CAAC;;AAjGM,6BAAkB,GAAG,CAAC,UAAU,CAAC,AAAf,CAAgB;AAoG3C;;;;;GAKG;AACH,MAAM,OAAO,eAAgB,SAAQ,UAAU;IAA/C;;QAuBU,YAAO,GAAG,CAAC,CAAQ,EAAQ,EAAE;YACnC,MAAM,GAAG,GAAI,CAAC,CAAC,MAAsB,EAAE,OAAO,CAAc,eAAe,CAAC,CAAC;YAC7E,IAAI,CAAC,GAAG;gBAAE,OAAO;YACjB,MAAM,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;YACrC,IAAI,CAAC,MAAM;gBAAE,OAAO;YACpB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,SAAS,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,CAAC;QACxF,CAAC,CAAC;IAmEJ,CAAC;IAtFC,wBAAwB;QACtB,IAAI,IAAI,CAAC,WAAW;YAAE,IAAI,CAAC,MAAM,EAAE,CAAC;IACtC,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IACpD,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IACvD,CAAC;IAUS,MAAM;QACd,OAAO,GAAG,CAAA;QACN,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyCP,CAAC;IACJ,CAAC;IAES,MAAM;QACd,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;QAC3C,MAAM,OAAO,GAAG,eAAe,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;YAChD,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,KAAK,QAAQ,CAAC;YACvC,MAAM,KAAK,GAAG,QAAQ,IAAI,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;YACxD,MAAM,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,iBAAiB,MAAM,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;YAC/D,OAAO,IAAI,CAAA;;;uBAGM,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC;sBACd,GAAG,CAAC,KAAK,CAAC;UACtB,OAAO;;iDAEgC,CAAC,CAAC,KAAK;gBACxC,GAAG,CAAC,KAAK,CAAC;gBACV,CAAC;QACb,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACZ,OAAO,IAAI,CAAA,uEAAuE,OAAO,QAAQ,CAAC;IACpG,CAAC;;AA9FM,kCAAkB,GAAG,CAAC,QAAQ,CAAC,AAAb,CAAc;AAEf,uBAAO,GAAoE;IACjG,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,EAAE;IACjD,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,EAAE;IACjD,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,EAAE;IACnD,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE;CAC5C,AAL8B,CAK7B;AA0FJ,KAAK,MAAM,CAAC"}

package/dist/components/containers.d.ts

@@ -0,0 +1,54 @@
+import { NptElement } from "./base.js";
+/**
+ * <npt-dialog [open] headline="Confirm">
+ *   …content… <span slot="actions">…</span>
+ * </npt-dialog>
+ * Scrim + centred surface. ESC and backdrop close; focus-trap-lite.
+ */
+export declare class NptDialog extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(name: string): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Close the overlay and emit a `close` event. */
+    close(): void;
+    private focusFirst;
+    private onClick;
+    private onKey;
+    protected styles(): string;
+    protected render(): string;
+}
+/**
+ * <npt-bottom-sheet [open]>…content…</npt-bottom-sheet>
+ * Bottom-anchored sheet with a drag affordance + scrim. Backdrop/ESC close.
+ */
+export declare class NptBottomSheet extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Close the sheet and emit a `close` event. */
+    close(): void;
+    private onClick;
+    private onKey;
+    protected styles(): string;
+    protected render(): string;
+}
+/**
+ * <npt-menu [open]> with <npt-menu-item> children.
+ * Anchored popover. Place inside a positioned ancestor for anchoring.
+ */
+export declare class NptMenu extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    protected styles(): string;
+    protected render(): string;
+}
+/** <npt-menu-item [disabled]>Settings</npt-menu-item> */
+export declare class NptMenuItem extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    protected styles(): string;
+    protected render(): string;
+}
+//# sourceMappingURL=containers.d.ts.map

package/dist/components/containers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"containers.d.ts","sourceRoot":"","sources":["../../src/components/containers.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAmB,MAAM,WAAW,CAAC;AAKxD;;;;;GAKG;AACH,qBAAa,SAAU,SAAQ,UAAU;IACvC,MAAM,CAAC,kBAAkB,WAAwB;IAEjD,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAKnC,iBAAiB,IAAI,IAAI;IAMlC,oBAAoB,IAAI,IAAI;IAK5B,kDAAkD;IAClD,KAAK,IAAI,IAAI;IAKb,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,OAAO,CAGb;IAEF,OAAO,CAAC,KAAK,CAoBX;IAEF,SAAS,CAAC,MAAM,IAAI,MAAM;IAiD1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAU3B;AAED;;;GAGG;AACH,qBAAa,cAAe,SAAQ,UAAU;IAC5C,MAAM,CAAC,kBAAkB,WAAY;IAErC,wBAAwB,IAAI,IAAI;IAIvB,iBAAiB,IAAI,IAAI;IAMlC,oBAAoB,IAAI,IAAI;IAK5B,gDAAgD;IAChD,KAAK,IAAI,IAAI;IAKb,OAAO,CAAC,OAAO,CAGb;IAEF,OAAO,CAAC,KAAK,CAKX;IAEF,SAAS,CAAC,MAAM,IAAI,MAAM;IAwC1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAQ3B;AAED;;;GAGG;AACH,qBAAa,OAAQ,SAAQ,UAAU;IACrC,MAAM,CAAC,kBAAkB,WAAY;IAErC,wBAAwB,IAAI,IAAI;IAIhC,SAAS,CAAC,MAAM,IAAI,MAAM;IAwB1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAG3B;AAED,yDAAyD;AACzD,qBAAa,WAAY,SAAQ,UAAU;IACzC,MAAM,CAAC,kBAAkB,WAAgB;IAEzC,wBAAwB,IAAI,IAAI;IAIhC,SAAS,CAAC,MAAM,IAAI,MAAM;IAgC1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAM3B"}