@neptune.fintech/web-ui 2.0.0 → 2.2.0

package/dist/components/layout.js

@@ -0,0 +1,359 @@
+// © 2026 Neptune.Fintech (neptune.ly) · Neptune Odyssey Community License v1.0
+// Neptune Odyssey — containers & layout
+// <npt-list>, <npt-list-item>, <npt-divider>, <npt-tabs>, <npt-tab>,
+// <npt-accordion>, <npt-accordion-item>, <npt-avatar>.
+// Custom-property driven only; logical layout → mirrors in RTL.
+import { NptElement, css, html, A11Y } from "./base.js";
+const esc = (v) => (v ?? "").replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+/** <npt-list> with <npt-list-item> children. */
+export class NptList extends NptElement {
+    styles() {
+        return css `
+      :host {
+        display: block;
+      }
+      .list {
+        display: block;
+        background: var(--md-sys-color-surface);
+        color: var(--md-sys-color-on-surface);
+      }
+    `;
+    }
+    render() {
+        return html `<div class="list" part="list" role="list"><slot></slot></div>`;
+    }
+}
+/**
+ * <npt-list-item [interactive] headline="Title" supporting="Sub">
+ *   <span slot="leading">●</span><span slot="trailing">→</span>
+ * </npt-list-item>
+ */
+export class NptListItem extends NptElement {
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.update();
+    }
+    styles() {
+        return css `
+      ${A11Y}
+      :host {
+        display: block;
+      }
+      .item {
+        inline-size: 100%;
+        display: flex;
+        align-items: center;
+        gap: var(--npt-space-4, 16px);
+        min-height: 56px;
+        padding-inline: var(--npt-space-4, 16px);
+        padding-block: var(--npt-space-2, 8px);
+        border: none;
+        background: transparent;
+        color: inherit;
+        text-align: start;
+        font-family: var(--npt-font-text);
+        box-sizing: border-box;
+      }
+      :host([interactive]) .item {
+        cursor: pointer;
+        transition: background-color var(--npt-dur-fast, 200ms) var(--npt-ease-standard, ease);
+      }
+      :host([interactive]) .item:hover {
+        background: var(--md-sys-color-surface-container-high);
+      }
+      .body {
+        flex: 1 1 auto;
+        min-inline-size: 0;
+      }
+      .headline {
+        font-size: var(--npt-text-body-lg, 16px);
+        color: var(--md-sys-color-on-surface);
+        margin: 0;
+      }
+      .supporting {
+        font-size: var(--npt-text-body, 14px);
+        color: var(--md-sys-color-on-surface-variant);
+        margin: 2px 0 0;
+      }
+    `;
+    }
+    render() {
+        const headline = esc(this.getAttribute("headline"));
+        const supporting = esc(this.getAttribute("supporting"));
+        const interactive = this.hasAttribute("interactive");
+        const tag = interactive ? "button" : "div";
+        const attrs = interactive ? html `role="listitem" type="button"` : html `role="listitem"`;
+        return html `<${tag} class="item" part="item" ${attrs}>
+      <slot name="leading"></slot>
+      <div class="body">
+        ${headline ? html `<p class="headline">${headline}</p>` : ""}
+        ${supporting ? html `<p class="supporting">${supporting}</p>` : ""}
+        <slot></slot>
+      </div>
+      <slot name="trailing"></slot>
+    </${tag}>`;
+    }
+}
+NptListItem.observedAttributes = ["interactive", "headline", "supporting"];
+/** <npt-divider [inset]></npt-divider> */
+export class NptDivider extends NptElement {
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.update();
+    }
+    styles() {
+        return css `
+      :host {
+        display: block;
+      }
+      .rule {
+        border: none;
+        block-size: 1px;
+        background: var(--md-sys-color-outline-variant);
+        margin-block: 0;
+      }
+      :host([inset]) .rule {
+        margin-inline-start: var(--npt-space-4, 16px);
+        margin-inline-end: var(--npt-space-4, 16px);
+      }
+    `;
+    }
+    render() {
+        return html `<hr class="rule" part="divider" role="separator" />`;
+    }
+}
+NptDivider.observedAttributes = ["inset"];
+/**
+ * <npt-tabs> with <npt-tab> children.
+ * Click selects a tab (sets [active]); a sliding indicator follows.
+ */
+export class NptTabs extends NptElement {
+    constructor() {
+        super(...arguments);
+        this.onClick = (e) => {
+            const tab = e.target?.closest("npt-tab");
+            if (!tab)
+                return;
+            for (const t of this.querySelectorAll("npt-tab"))
+                t.toggleAttribute("active", t === tab);
+            this.dispatchEvent(new CustomEvent("change", { bubbles: true }));
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener("click", this.onClick);
+    }
+    disconnectedCallback() {
+        this.removeEventListener("click", this.onClick);
+    }
+    styles() {
+        return css `
+      ${A11Y}
+      :host {
+        display: block;
+      }
+      .row {
+        display: flex;
+        gap: var(--npt-space-2, 8px);
+        border-bottom: 1px solid var(--md-sys-color-outline-variant);
+      }
+    `;
+    }
+    render() {
+        return html `<div class="row" part="tabs" role="tablist"><slot></slot></div>`;
+    }
+}
+/** <npt-tab [active]>Overview</npt-tab> */
+export class NptTab extends NptElement {
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.update();
+    }
+    styles() {
+        return css `
+      ${A11Y}
+      :host {
+        display: inline-flex;
+      }
+      .tab {
+        position: relative;
+        min-height: 48px;
+        display: inline-flex;
+        align-items: center;
+        gap: var(--npt-space-2, 8px);
+        padding-inline: var(--npt-space-4, 16px);
+        border: none;
+        background: transparent;
+        color: var(--md-sys-color-on-surface-variant);
+        cursor: pointer;
+        font-family: var(--npt-font-text);
+        font-size: var(--npt-text-label, 14px);
+        font-weight: 600;
+      }
+      .tab::after {
+        content: "";
+        position: absolute;
+        inset-block-end: 0;
+        inset-inline: var(--npt-space-2, 8px);
+        block-size: 3px;
+        border-start-start-radius: var(--npt-corner-full, 999px);
+        border-start-end-radius: var(--npt-corner-full, 999px);
+        background: transparent;
+        transition: background-color var(--npt-dur-fast, 200ms) var(--npt-ease-standard, ease);
+      }
+      :host([active]) .tab {
+        color: var(--md-sys-color-primary);
+      }
+      :host([active]) .tab::after {
+        background: var(--md-sys-color-primary);
+      }
+    `;
+    }
+    render() {
+        const active = this.hasAttribute("active");
+        return html `<button class="tab" part="tab" role="tab" aria-selected="${active}">
+      <slot></slot>
+    </button>`;
+    }
+}
+NptTab.observedAttributes = ["active"];
+/** <npt-accordion> with <npt-accordion-item> children. */
+export class NptAccordion extends NptElement {
+    styles() {
+        return css `
+      :host {
+        display: block;
+      }
+    `;
+    }
+    render() {
+        return html `<div part="accordion"><slot></slot></div>`;
+    }
+}
+/**
+ * <npt-accordion-item [open] summary="Section">…detail…</npt-accordion-item>
+ * Native <details>/<summary> semantics under the hood.
+ */
+export class NptAccordionItem extends NptElement {
+    constructor() {
+        super(...arguments);
+        this.onToggle = (e) => {
+            const open = e.target.open;
+            this.toggleAttribute("open", open);
+        };
+    }
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.update();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.root.addEventListener("toggle", this.onToggle, true);
+    }
+    disconnectedCallback() {
+        this.root.removeEventListener("toggle", this.onToggle, true);
+    }
+    styles() {
+        return css `
+      ${A11Y}
+      :host {
+        display: block;
+        border-bottom: 1px solid var(--md-sys-color-outline-variant);
+      }
+      details {
+        color: var(--md-sys-color-on-surface);
+      }
+      summary {
+        list-style: none;
+        min-height: 56px;
+        display: flex;
+        align-items: center;
+        gap: var(--npt-space-3, 12px);
+        padding-inline: var(--npt-space-4, 16px);
+        cursor: pointer;
+        font-family: var(--npt-font-text);
+        font-size: var(--npt-text-body-lg, 16px);
+        font-weight: 600;
+      }
+      summary::-webkit-details-marker {
+        display: none;
+      }
+      .chevron {
+        margin-inline-start: auto;
+        transition: transform var(--npt-dur-fast, 200ms) var(--npt-ease-standard, ease);
+      }
+      details[open] .chevron {
+        transform: rotate(180deg);
+      }
+      .detail {
+        padding-inline: var(--npt-space-4, 16px);
+        padding-block-end: var(--npt-space-4, 16px);
+        font-family: var(--npt-font-text);
+        font-size: var(--npt-text-body, 14px);
+        color: var(--md-sys-color-on-surface-variant);
+      }
+    `;
+    }
+    render() {
+        const summary = esc(this.getAttribute("summary"));
+        const open = this.hasAttribute("open") ? "open" : "";
+        return html `<details part="item" ${open}>
+      <summary part="summary">${summary}<span class="chevron" aria-hidden="true">⌄</span></summary>
+      <div class="detail" part="detail"><slot></slot></div>
+    </details>`;
+    }
+}
+NptAccordionItem.observedAttributes = ["open", "summary"];
+/** <npt-avatar src="" initials="MK" size="sm|md|lg" label="Mona"></npt-avatar> */
+export class NptAvatar extends NptElement {
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.update();
+    }
+    styles() {
+        return css `
+      :host {
+        display: inline-block;
+      }
+      .avatar {
+        inline-size: 40px;
+        block-size: 40px;
+        border-radius: var(--npt-corner-full, 999px);
+        overflow: hidden;
+        display: grid;
+        place-items: center;
+        background: var(--md-sys-color-primary-container);
+        color: var(--md-sys-color-on-primary-container);
+        font-family: var(--npt-font-display);
+        font-weight: 600;
+        font-size: var(--npt-text-label, 14px);
+      }
+      :host([size="sm"]) .avatar {
+        inline-size: 28px;
+        block-size: 28px;
+        font-size: var(--npt-text-caption, 12px);
+      }
+      :host([size="lg"]) .avatar {
+        inline-size: 64px;
+        block-size: 64px;
+        font-size: var(--npt-text-title, 18px);
+      }
+      img {
+        inline-size: 100%;
+        block-size: 100%;
+        object-fit: cover;
+      }
+    `;
+    }
+    render() {
+        const src = esc(this.getAttribute("src"));
+        const initials = esc(this.getAttribute("initials"));
+        const label = esc(this.getAttribute("label")) || initials;
+        const inner = src
+            ? html `<img src="${src}" alt="${label}" />`
+            : html `<span aria-hidden="true">${initials}</span>`;
+        return html `<span class="avatar" part="avatar" role="img" aria-label="${label}">${inner}</span>`;
+    }
+}
+NptAvatar.observedAttributes = ["src", "initials", "size", "label"];
+//# sourceMappingURL=layout.js.map

package/dist/components/layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../src/components/layout.ts"],"names":[],"mappings":"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"}

package/dist/components/money-inputs.d.ts

@@ -0,0 +1,105 @@
+import { NptElement } from "./base.js";
+/**
+ * <npt-amount-input currency="LYD" value="" placeholder="0.00"></npt-amount-input>
+ * Large amount entry with a currency affix. Big tabular figures. Numeric input
+ * mode; dispatches `input` (bubbling) with the sanitized value on every change.
+ */
+export declare class NptAmountInput extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    get value(): string;
+    set value(v: string);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private onInput;
+    protected styles(): string;
+    protected render(): string;
+}
+/**
+ * <npt-currency-field label="Amount" value="" currency="LYD"
+ *   helper="Available 12,480.50" [error="msg"]></npt-currency-field>
+ * Labelled outlined money field. Tabular figures; trailing currency code.
+ */
+export declare class NptCurrencyField extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    get value(): string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private onInput;
+    protected styles(): string;
+    protected render(): string;
+}
+/**
+ * <npt-iban-field label="IBAN" value="" country="LY"></npt-iban-field>
+ * Formats the IBAN into groups of four as you type and reflects valid/invalid
+ * state (ISO 7064 mod-97). Dispatches `input` and `change` with `{ value, valid }`.
+ */
+export declare class NptIbanField extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    /** Raw IBAN with no spaces. */
+    get value(): string;
+    get valid(): boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private setState;
+    private onInput;
+    private onBlur;
+    protected update(): void;
+    protected styles(): string;
+    protected render(): string;
+}
+/**
+ * <npt-otp-input length="6" value="" [masked]></npt-otp-input>
+ * N separate single-character boxes with auto-advance, backspace-rewind, and
+ * paste-fill. Dispatches `input` on every change and `complete` (with
+ * `{ value }`) once every box is filled.
+ */
+export declare class NptOtpInput extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    protected get inputType(): string;
+    protected get isMasked(): boolean;
+    protected get count(): number;
+    protected get defaultLength(): number;
+    get value(): string;
+    set value(v: string);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private boxes;
+    private emit;
+    private onFocus;
+    private onInput;
+    private onKey;
+    private onPaste;
+    protected styles(): string;
+    protected render(): string;
+}
+/**
+ * <npt-pin-input length="4"></npt-pin-input>
+ * Like the OTP input, but always masked with dots. Defaults to 4 boxes.
+ */
+export declare class NptPinInput extends NptOtpInput {
+    static observedAttributes: string[];
+    protected get defaultLength(): number;
+    protected get isMasked(): boolean;
+}
+/**
+ * <npt-amount-keypad value=""></npt-amount-keypad>
+ * Numeric keypad (0–9, ., backspace). Dispatches `key` (with the pressed key)
+ * on each press and `value` (with the running string) after applying it.
+ */
+export declare class NptAmountKeypad extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    get value(): string;
+    set value(v: string);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private apply;
+    private onClick;
+    protected styles(): string;
+    protected render(): string;
+}
+//# sourceMappingURL=money-inputs.d.ts.map

package/dist/components/money-inputs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"money-inputs.d.ts","sourceRoot":"","sources":["../../src/components/money-inputs.ts"],"names":[],"mappings":"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"}