@neptune.fintech/web-ui 1.0.0

package/LICENSE

@@ -0,0 +1,104 @@
+Neptune Odyssey Community License
+Version 1.0
+
+Copyright (c) 2026 Neptune.Fintech. All rights reserved.
+
+This is a source-available license. It is NOT an OSI-approved open-source license.
+"Neptune Odyssey" and "Neptune.Fintech" are names and marks of the Licensor; this
+license does not grant rights to use them except as required for attribution.
+
+------------------------------------------------------------------------------
+1. DEFINITIONS
+------------------------------------------------------------------------------
+"Software" means the Neptune Odyssey design system and all materials in this
+repository: design tokens, configuration files, documentation, reference
+implementations, and generated libraries (Flutter, web, and any other target).
+
+"Licensor" means Neptune.Fintech.
+
+"You" means the individual or legal entity exercising rights under this license,
+together with all entities that control, are controlled by, or are under common
+control with that entity.
+
+"Qualifying User" means You, if You are either:
+  (a) using the Software for a Non-Commercial Purpose; or
+  (b) an individual or entity whose total gross revenue (across all controlled
+      entities) in the most recently completed 12-month period was less than
+      twenty-five thousand United States dollars (USD $25,000), or the equivalent
+      in any other currency.
+
+"Non-Commercial Purpose" means use that is not primarily intended for or directed
+toward commercial advantage or monetary compensation — including personal
+projects, evaluation, research, teaching, and use by registered non-profit or
+charitable organizations.
+
+------------------------------------------------------------------------------
+2. GRANT OF RIGHTS (for Qualifying Users)
+------------------------------------------------------------------------------
+Subject to the terms below, the Licensor grants each Qualifying User a worldwide,
+royalty-free, non-exclusive, non-transferable license to use, copy, modify,
+create derivative works of, and distribute the Software, including in Your own
+applications and products, for as long as You remain a Qualifying User.
+
+------------------------------------------------------------------------------
+3. COMMERCIAL USE ABOVE THE THRESHOLD
+------------------------------------------------------------------------------
+If You do not meet the definition of a Qualifying User — for example, if Your
+gross revenue equals or exceeds USD $25,000 in the most recently completed
+12-month period and Your use is not a Non-Commercial Purpose — You must obtain a
+separate commercial license from the Licensor before using the Software in
+production. Contact: licensing@neptune.fintech.
+
+A Qualifying User who later crosses the revenue threshold has a 60-day grace
+period from the end of the 12-month period in which the threshold was crossed to
+obtain a commercial license or cease production use.
+
+------------------------------------------------------------------------------
+4. CONDITIONS
+------------------------------------------------------------------------------
+(a) Attribution. You must retain, in source and in any distributed copies of the
+    Software or substantial portions of it, this license, the copyright notice,
+    and a notice stating the Software is "Neptune Odyssey by Neptune.Fintech."
+(b) No misrepresentation. You may not remove or alter notices, or represent the
+    Software (or a derivative) as Your own original design system.
+(c) No trademark use. This license grants no rights in the Licensor's names,
+    logos, or brand names beyond the attribution required above.
+(d) The brands, names, and visual identities of example tenants in this
+    repository (e.g. "Andalus Bank", "Nuran", "First Gulf Libyan") are reference
+    illustrations only and convey no rights.
+
+------------------------------------------------------------------------------
+5. TERMINATION
+------------------------------------------------------------------------------
+This license terminates automatically if You breach it and do not cure the breach
+within 30 days of becoming aware of it, or if You use the Software in production
+while not a Qualifying User and without a commercial license. Upon termination
+You must cease use and distribution, except that copies You distributed to
+downstream Qualifying Users in compliance with this license remain licensed.
+
+------------------------------------------------------------------------------
+6. DISCLAIMER OF WARRANTY
+------------------------------------------------------------------------------
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE, AND NON-INFRINGEMENT.
+
+------------------------------------------------------------------------------
+7. LIMITATION OF LIABILITY
+------------------------------------------------------------------------------
+IN NO EVENT SHALL THE LICENSOR BE LIABLE FOR ANY CLAIM, DAMAGES, OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT, OR OTHERWISE, ARISING FROM,
+OUT OF, OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+------------------------------------------------------------------------------
+8. SUMMARY (non-binding, for convenience)
+------------------------------------------------------------------------------
+• Free to use, modify and ship — including commercially — IF your use is
+  non-commercial OR your organization makes under USD $25,000/year.
+• Make USD $25,000/year or more from commercial use? Get a commercial license:
+  licensing@neptune.fintech.
+• Keep the attribution. Don't pass it off as your own. Don't use our marks.
+
+This summary does not modify the terms above. For anything load-bearing, consult
+your own legal counsel — the Licensor provides this text without legal advice.

package/README.md

@@ -0,0 +1,62 @@
+# @neptune.fintech/web-ui
+
+Framework-agnostic **web kit** for [Neptune Odyssey](https://neptune.ly) — the white-label
+banking design system by **Neptune.Fintech**. Standards-based custom elements, themed
+entirely through **CSS variables** (zero runtime CSS-in-JS), with the one-call `applyTheme`
+surface. Works with plain HTML, and is the layer the Svelte and Vue packages wrap.
+
+> Source-available under the **Neptune Odyssey Community License v1.0** — free for
+> non-commercial use and orgs under USD $25k/yr. See `LICENSE`.
+
+## Install
+
+```sh
+pnpm add @neptune.fintech/web-ui @neptune.fintech/tokens
+```
+
+ESM-only, tree-shakeable, SSR-safe. Importing modules never touches the DOM; element
+registration and theming run only when you call them.
+
+## Use
+
+```ts
+import "@neptune.fintech/web-ui/styles.css"; // ships themes.css + system.css
+import { applyTheme, registerAll } from "@neptune.fintech/web-ui";
+
+registerAll();                                       // define the custom elements
+applyTheme(document.documentElement, "andalus", { mode: "system", dir: "auto" });
+```
+
+```html
+<npt-app-bar title="Accounts"></npt-app-bar>
+<npt-balance-card hero label="Available balance" amount="12,480.50" currency="LYD"
+  account="•••• 4821"></npt-balance-card>
+<npt-transaction-row title="Coffee" subtitle="Today · Card" amount="-4.50" currency="LYD">
+</npt-transaction-row>
+<npt-button variant="filled">New transfer</npt-button>
+```
+
+## Three ways to theme — one surface
+
+```ts
+applyTheme(root, "neptune");                                  // 1 · reference brand id
+applyTheme(root, "NO1-AYB4AKKeeABWDBIaIiw4B_YBAAABAQEBAQAAyA"); // 2 · brandprint string
+applyTheme(root, { primary: {L,C,H}, tertiary: {…}, corners: {…}, … }); // 3 · config
+```
+
+For the four reference brands, re-skinning is **pure CSS** — `applyTheme` only sets
+`data-theme`/`data-mode`/`dir`; the shipped `styles.css` holds every variable, so swapping
+a brand is zero JavaScript. Custom configs and brandprints resolve through
+`@neptune.fintech/tokens` and write the resolved variables onto the element.
+
+## Components
+
+`npt-button` · `npt-card` (incl. `glass`) · `npt-balance-card` · `npt-transaction-row` ·
+`npt-text-field` · `npt-chip` · `npt-badge` · `npt-app-bar` · `npt-nav-bar` / `npt-nav-item`.
+
+Every component reads **only** `var(--md-sys-color-*)` / `var(--npt-*)` — no literal color,
+radius, or font anywhere (principle P2). Layout is logical (`*-inline-*`) so it mirrors in
+RTL for free. Focus rings are visible; reduced-motion is honoured; targets are ≥ 48px.
+
+---
+© 2026 Neptune.Fintech. The bundled example brands are reference illustrations only.

package/dist/components/base.d.ts

@@ -0,0 +1,18 @@
+export declare abstract class NptElement extends HTMLElement {
+    /** Component CSS — custom-property driven only. Implemented per component. */
+    protected abstract styles(): string;
+    /** Shadow markup. Implemented per component. */
+    protected abstract render(): string;
+    protected root: ShadowRoot;
+    constructor();
+    connectedCallback(): void;
+    protected update(): void;
+}
+/** Identity tag for editor CSS highlighting; returns the string unchanged. */
+export declare const css: (strings: TemplateStringsArray, ...values: unknown[]) => string;
+export declare const html: (strings: TemplateStringsArray, ...values: unknown[]) => string;
+/** Register a custom element only in a browser, idempotently. SSR-safe. */
+export declare function define(tag: string, ctor: CustomElementConstructor): void;
+/** Shared focus-visible ring + reduced-motion guard, reused by components. */
+export declare const A11Y: string;
+//# sourceMappingURL=base.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../src/components/base.ts"],"names":[],"mappings":"AAWA,8BAAsB,UAAW,SAAQ,WAAW;IAClD,8EAA8E;IAC9E,SAAS,CAAC,QAAQ,CAAC,MAAM,IAAI,MAAM;IACnC,gDAAgD;IAChD,SAAS,CAAC,QAAQ,CAAC,MAAM,IAAI,MAAM;IAEnC,SAAS,CAAC,IAAI,EAAE,UAAU,CAAC;;IAO3B,iBAAiB,IAAI,IAAI;IAIzB,SAAS,CAAC,MAAM,IAAI,IAAI;CAWzB;AAED,8EAA8E;AAC9E,eAAO,MAAM,GAAG,GAAI,SAAS,oBAAoB,EAAE,GAAG,QAAQ,OAAO,EAAE,KAAG,MACiB,CAAC;AAE5F,eAAO,MAAM,IAAI,YAHY,oBAAoB,aAAa,OAAO,EAAE,KAAG,MAGnD,CAAC;AAExB,2EAA2E;AAC3E,wBAAgB,MAAM,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,wBAAwB,GAAG,IAAI,CAGxE;AAED,8EAA8E;AAC9E,eAAO,MAAM,IAAI,QAehB,CAAC"}

package/dist/components/base.js

@@ -0,0 +1,57 @@
+// Neptune Odyssey — custom-element base · © 2026 Neptune.Fintech (neptune.ly)
+//
+// Standards-based custom elements. Styles live in a Shadow DOM stylesheet that
+// reads ONLY CSS custom properties (--md-sys-color-*, --npt-*) — and custom
+// properties inherit THROUGH the shadow boundary, so a component is encapsulated
+// yet fully themed by whatever data-theme/data-mode is on an ancestor. No literal
+// colors/radii/fonts; no runtime CSS-in-JS beyond a single cached stylesheet per
+// component class. SSR-safe: nothing touches the DOM at import time.
+const sheetCache = new WeakMap();
+export class NptElement extends HTMLElement {
+    constructor() {
+        super();
+        this.root = this.attachShadow({ mode: "open" });
+    }
+    connectedCallback() {
+        this.update();
+    }
+    update() {
+        const ctor = this.constructor;
+        let sheet = sheetCache.get(ctor);
+        if (!sheet) {
+            sheet = new CSSStyleSheet();
+            sheet.replaceSync(this.styles());
+            sheetCache.set(ctor, sheet);
+        }
+        this.root.adoptedStyleSheets = [sheet];
+        this.root.innerHTML = this.render();
+    }
+}
+/** Identity tag for editor CSS highlighting; returns the string unchanged. */
+export const css = (strings, ...values) => strings.reduce((acc, s, i) => acc + s + (i < values.length ? String(values[i]) : ""), "");
+export const html = css;
+/** Register a custom element only in a browser, idempotently. SSR-safe. */
+export function define(tag, ctor) {
+    if (typeof customElements === "undefined")
+        return;
+    if (!customElements.get(tag))
+        customElements.define(tag, ctor);
+}
+/** Shared focus-visible ring + reduced-motion guard, reused by components. */
+export const A11Y = css `
+  :host {
+    --_focus: var(--npt-focus-ring, 2px solid var(--md-sys-color-primary));
+  }
+  :host(:focus-visible),
+  *:focus-visible {
+    outline: var(--_focus);
+    outline-offset: 2px;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    * {
+      transition: none !important;
+      animation: none !important;
+    }
+  }
+`;
+//# sourceMappingURL=base.js.map

package/dist/components/base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.js","sourceRoot":"","sources":["../../src/components/base.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,EAAE;AACF,+EAA+E;AAC/E,4EAA4E;AAC5E,iFAAiF;AACjF,kFAAkF;AAClF,iFAAiF;AACjF,qEAAqE;AAErE,MAAM,UAAU,GAAG,IAAI,OAAO,EAAoC,CAAC;AAEnE,MAAM,OAAgB,UAAW,SAAQ,WAAW;IAQlD;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;IAClD,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAES,MAAM;QACd,MAAM,IAAI,GAAG,IAAI,CAAC,WAAgC,CAAC;QACnD,IAAI,KAAK,GAAG,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QACjC,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,KAAK,GAAG,IAAI,aAAa,EAAE,CAAC;YAC5B,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;YACjC,UAAU,CAAC,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QAC9B,CAAC;QACD,IAAI,CAAC,IAAI,CAAC,kBAAkB,GAAG,CAAC,KAAK,CAAC,CAAC;QACvC,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;IACtC,CAAC;CACF;AAED,8EAA8E;AAC9E,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,OAA6B,EAAE,GAAG,MAAiB,EAAU,EAAE,CACjF,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;AAE5F,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,CAAC;AAExB,2EAA2E;AAC3E,MAAM,UAAU,MAAM,CAAC,GAAW,EAAE,IAA8B;IAChE,IAAI,OAAO,cAAc,KAAK,WAAW;QAAE,OAAO;IAClD,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,GAAG,CAAC;QAAE,cAAc,CAAC,MAAM,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;AACjE,CAAC;AAED,8EAA8E;AAC9E,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;CAetB,CAAC"}

package/dist/components/button.d.ts

@@ -0,0 +1,12 @@
+import { NptElement } from "./base.js";
+/**
+ * <npt-button variant="filled|tonal|outlined|text" [disabled]>Label</npt-button>
+ * M3 Expressive button. Pill shape, brand-tinted, 48dp min target.
+ */
+export declare class NptButton extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    protected styles(): string;
+    protected render(): string;
+}
+//# sourceMappingURL=button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAmB,MAAM,WAAW,CAAC;AAExD;;;GAGG;AACH,qBAAa,SAAU,SAAQ,UAAU;IACvC,MAAM,CAAC,kBAAkB,WAA2B;IAEpD,wBAAwB,IAAI,IAAI;IAIhC,SAAS,CAAC,MAAM,IAAI,MAAM;IAqD1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAI3B"}

package/dist/components/button.js

@@ -0,0 +1,70 @@
+// Neptune Odyssey — <npt-button> · © 2026 Neptune.Fintech (neptune.ly)
+import { NptElement, css, html, A11Y } from "./base.js";
+/**
+ * <npt-button variant="filled|tonal|outlined|text" [disabled]>Label</npt-button>
+ * M3 Expressive button. Pill shape, brand-tinted, 48dp min target.
+ */
+export class NptButton extends NptElement {
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.update();
+    }
+    styles() {
+        return css `
+      ${A11Y}
+      :host {
+        display: inline-block;
+      }
+      button {
+        font-family: var(--npt-font-text);
+        font-size: var(--npt-text-label, 14px);
+        font-weight: 600;
+        letter-spacing: 0.01em;
+        min-height: 48px;
+        padding-inline: var(--npt-space-6, 24px);
+        border: none;
+        border-radius: var(--npt-corner-full, 999px);
+        cursor: pointer;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--npt-space-2, 8px);
+        transition: background-color var(--npt-dur-fast, 200ms) var(--npt-ease-standard, ease),
+          box-shadow var(--npt-dur-fast, 200ms) var(--npt-ease-standard, ease);
+      }
+      button:disabled {
+        cursor: not-allowed;
+        opacity: 0.38;
+      }
+      :host([variant="filled"]) button,
+      :host(:not([variant])) button {
+        background: var(--md-sys-color-primary);
+        color: var(--md-sys-color-on-primary);
+      }
+      :host([variant="filled"]) button:hover:not(:disabled),
+      :host(:not([variant])) button:hover:not(:disabled) {
+        box-shadow: var(--npt-elevation-1, 0 1px 3px rgba(0, 0, 0, 0.2));
+      }
+      :host([variant="tonal"]) button {
+        background: var(--md-sys-color-secondary-container);
+        color: var(--md-sys-color-on-secondary-container);
+      }
+      :host([variant="outlined"]) button {
+        background: transparent;
+        color: var(--md-sys-color-primary);
+        border: 1px solid var(--md-sys-color-outline);
+      }
+      :host([variant="text"]) button {
+        background: transparent;
+        color: var(--md-sys-color-primary);
+        padding-inline: var(--npt-space-3, 12px);
+      }
+    `;
+    }
+    render() {
+        const disabled = this.hasAttribute("disabled") ? "disabled" : "";
+        return html `<button part="button" ${disabled}><slot></slot></button>`;
+    }
+}
+NptButton.observedAttributes = ["variant", "disabled"];
+//# sourceMappingURL=button.js.map

package/dist/components/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/components/button.ts"],"names":[],"mappings":"AAAA,uEAAuE;AACvE,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAExD;;;GAGG;AACH,MAAM,OAAO,SAAU,SAAQ,UAAU;IAGvC,wBAAwB;QACtB,IAAI,IAAI,CAAC,WAAW;YAAE,IAAI,CAAC,MAAM,EAAE,CAAC;IACtC,CAAC;IAES,MAAM;QACd,OAAO,GAAG,CAAA;QACN,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgDP,CAAC;IACJ,CAAC;IAES,MAAM;QACd,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;QACjE,OAAO,IAAI,CAAA,yBAAyB,QAAQ,yBAAyB,CAAC;IACxE,CAAC;;AA9DM,4BAAkB,GAAG,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC"}

package/dist/components/card.d.ts

@@ -0,0 +1,13 @@
+import { NptElement } from "./base.js";
+/**
+ * <npt-card variant="standard|elevated|tonal|glass"> … </npt-card>
+ * Brand-shaped surface. `glass` is the optional translucent material — use only
+ * on approved surfaces (nav, hero, auth, modals), never on tables/forms (docs/06 §3).
+ */
+export declare class NptCard extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    protected styles(): string;
+    protected render(): string;
+}
+//# sourceMappingURL=card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/components/card.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAa,MAAM,WAAW,CAAC;AAElD;;;;GAIG;AACH,qBAAa,OAAQ,SAAQ,UAAU;IACrC,MAAM,CAAC,kBAAkB,WAAe;IAExC,wBAAwB,IAAI,IAAI;IAIhC,SAAS,CAAC,MAAM,IAAI,MAAM;IA6B1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAG3B"}

package/dist/components/card.js

@@ -0,0 +1,46 @@
+// Neptune Odyssey — <npt-card> · © 2026 Neptune.Fintech (neptune.ly)
+import { NptElement, css, html } from "./base.js";
+/**
+ * <npt-card variant="standard|elevated|tonal|glass"> … </npt-card>
+ * Brand-shaped surface. `glass` is the optional translucent material — use only
+ * on approved surfaces (nav, hero, auth, modals), never on tables/forms (docs/06 §3).
+ */
+export class NptCard extends NptElement {
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.update();
+    }
+    styles() {
+        return css `
+      :host {
+        display: block;
+      }
+      .card {
+        border-radius: var(--npt-corner-lg, 24px);
+        padding: var(--npt-space-6, 24px);
+        background: var(--md-sys-color-surface-container-low);
+        color: var(--md-sys-color-on-surface);
+        box-sizing: border-box;
+      }
+      :host([variant="elevated"]) .card {
+        background: var(--md-sys-color-surface-container);
+        box-shadow: var(--npt-elevation-2, 0 2px 6px rgba(0, 0, 0, 0.18));
+      }
+      :host([variant="tonal"]) .card {
+        background: var(--md-sys-color-secondary-container);
+        color: var(--md-sys-color-on-secondary-container);
+      }
+      :host([variant="glass"]) .card {
+        background: var(--npt-glass-tint, color-mix(in oklab, var(--md-sys-color-surface) 70%, transparent));
+        backdrop-filter: blur(var(--npt-glass-blur, 18px));
+        -webkit-backdrop-filter: blur(var(--npt-glass-blur, 18px));
+        border: 1px solid var(--md-sys-color-outline-variant);
+      }
+    `;
+    }
+    render() {
+        return html `<div class="card" part="card"><slot></slot></div>`;
+    }
+}
+NptCard.observedAttributes = ["variant"];
+//# sourceMappingURL=card.js.map

package/dist/components/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../src/components/card.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAElD;;;;GAIG;AACH,MAAM,OAAO,OAAQ,SAAQ,UAAU;IAGrC,wBAAwB;QACtB,IAAI,IAAI,CAAC,WAAW;YAAE,IAAI,CAAC,MAAM,EAAE,CAAC;IACtC,CAAC;IAES,MAAM;QACd,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;KAyBT,CAAC;IACJ,CAAC;IAES,MAAM;QACd,OAAO,IAAI,CAAA,mDAAmD,CAAC;IACjE,CAAC;;AArCM,0BAAkB,GAAG,CAAC,SAAS,CAAC,CAAC"}

package/dist/components/financial.d.ts

@@ -0,0 +1,23 @@
+import { NptElement } from "./base.js";
+/**
+ * <npt-balance-card label="Available balance" amount="12,480.50" currency="LYD"
+ *   account="•••• 4821" [hero]></npt-balance-card>
+ * The dashboard balance hero. `hero` enables the brand gradient surface.
+ */
+export declare class NptBalanceCard extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    protected styles(): string;
+    protected render(): string;
+}
+/**
+ * <npt-transaction-row title="Coffee" subtitle="Today · Card" amount="-4.50"
+ *   currency="LYD" [credit]></npt-transaction-row>
+ */
+export declare class NptTransactionRow extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    protected styles(): string;
+    protected render(): string;
+}
+//# sourceMappingURL=financial.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"financial.d.ts","sourceRoot":"","sources":["../../src/components/financial.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAa,MAAM,WAAW,CAAC;AAKlD;;;;GAIG;AACH,qBAAa,cAAe,SAAQ,UAAU;IAC5C,MAAM,CAAC,kBAAkB,WAAsD;IAE/E,wBAAwB,IAAI,IAAI;IAIhC,SAAS,CAAC,MAAM,IAAI,MAAM;IAiD1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAa3B;AAED;;;GAGG;AACH,qBAAa,iBAAkB,SAAQ,UAAU;IAC/C,MAAM,CAAC,kBAAkB,WAAyD;IAElF,wBAAwB,IAAI,IAAI;IAIhC,SAAS,CAAC,MAAM,IAAI,MAAM;IA2D1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAiB3B"}

package/dist/components/financial.js

@@ -0,0 +1,164 @@
+// Neptune Odyssey — financial components · © 2026 Neptune.Fintech (neptune.ly)
+// <npt-balance-card>, <npt-transaction-row>. Money uses tabular figures.
+import { NptElement, css, html } from "./base.js";
+const escape = (v) => (v ?? "").replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+/**
+ * <npt-balance-card label="Available balance" amount="12,480.50" currency="LYD"
+ *   account="•••• 4821" [hero]></npt-balance-card>
+ * The dashboard balance hero. `hero` enables the brand gradient surface.
+ */
+export class NptBalanceCard extends NptElement {
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.update();
+    }
+    styles() {
+        return css `
+      :host {
+        display: block;
+      }
+      .hero {
+        border-radius: var(--npt-corner-xl, 32px);
+        padding: var(--npt-space-6, 24px);
+        background: var(--md-sys-color-surface-container);
+        color: var(--md-sys-color-on-surface);
+        box-sizing: border-box;
+      }
+      :host([hero]) .hero {
+        background: linear-gradient(135deg, var(--md-sys-color-primary), var(--md-sys-color-tertiary));
+        color: var(--md-sys-color-on-primary);
+      }
+      .label {
+        font-family: var(--npt-font-text);
+        font-size: var(--npt-text-label, 14px);
+        opacity: 0.86;
+        margin: 0 0 var(--npt-space-2, 8px);
+      }
+      .amount {
+        font-family: var(--npt-font-num);
+        font-feature-settings: "tnum" 1;
+        font-variant-numeric: tabular-nums;
+        font-size: var(--npt-text-display-md, 45px);
+        line-height: var(--npt-leading-display-md, 52px);
+        font-weight: var(--npt-display-weight, 700);
+        letter-spacing: var(--npt-display-tracking, -0.02em);
+        margin: 0;
+        display: flex;
+        align-items: baseline;
+        gap: var(--npt-space-2, 8px);
+      }
+      .currency {
+        font-size: var(--npt-text-title, 18px);
+        opacity: 0.85;
+      }
+      .account {
+        font-family: var(--npt-font-num);
+        font-variant-numeric: tabular-nums;
+        font-size: var(--npt-text-body, 14px);
+        opacity: 0.78;
+        margin: var(--npt-space-3, 12px) 0 0;
+      }
+    `;
+    }
+    render() {
+        const label = escape(this.getAttribute("label"));
+        const amount = escape(this.getAttribute("amount"));
+        const currency = escape(this.getAttribute("currency"));
+        const account = escape(this.getAttribute("account"));
+        return html `
+      <div class="hero" part="hero" role="group" aria-label="${label} ${amount} ${currency}">
+        <p class="label">${label}</p>
+        <p class="amount"><span class="currency">${currency}</span>${amount}</p>
+        ${account ? html `<p class="account">${account}</p>` : ""}
+      </div>
+    `;
+    }
+}
+NptBalanceCard.observedAttributes = ["label", "amount", "currency", "account", "hero"];
+/**
+ * <npt-transaction-row title="Coffee" subtitle="Today · Card" amount="-4.50"
+ *   currency="LYD" [credit]></npt-transaction-row>
+ */
+export class NptTransactionRow extends NptElement {
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.update();
+    }
+    styles() {
+        return css `
+      :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);
+      }
+      .icon {
+        inline-size: 40px;
+        block-size: 40px;
+        border-radius: var(--npt-corner-md, 16px);
+        background: var(--md-sys-color-secondary-container);
+        color: var(--md-sys-color-on-secondary-container);
+        display: grid;
+        place-items: center;
+        flex: 0 0 auto;
+        font-family: var(--npt-font-display);
+        font-weight: 700;
+      }
+      .body {
+        flex: 1 1 auto;
+        min-inline-size: 0;
+      }
+      .title {
+        font-family: var(--npt-font-text);
+        font-size: var(--npt-text-body-lg, 16px);
+        color: var(--md-sys-color-on-surface);
+        margin: 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .subtitle {
+        font-family: var(--npt-font-text);
+        font-size: var(--npt-text-body, 14px);
+        color: var(--md-sys-color-on-surface-variant);
+        margin: 2px 0 0;
+      }
+      .amount {
+        font-family: var(--npt-font-num);
+        font-variant-numeric: tabular-nums;
+        font-size: var(--npt-text-body-lg, 16px);
+        font-weight: 600;
+        color: var(--md-sys-color-on-surface);
+        white-space: nowrap;
+      }
+      :host([credit]) .amount {
+        color: var(--md-sys-color-success);
+      }
+    `;
+    }
+    render() {
+        const title = escape(this.getAttribute("title"));
+        const subtitle = escape(this.getAttribute("subtitle"));
+        const amount = escape(this.getAttribute("amount"));
+        const currency = escape(this.getAttribute("currency"));
+        const initial = title.trim().charAt(0).toUpperCase() || "•";
+        return html `
+      <div class="row" part="row">
+        <div class="icon" aria-hidden="true">${initial}</div>
+        <div class="body">
+          <p class="title">${title}</p>
+          ${subtitle ? html `<p class="subtitle">${subtitle}</p>` : ""}
+        </div>
+        <div class="amount">${amount} ${currency}</div>
+      </div>
+    `;
+    }
+}
+NptTransactionRow.observedAttributes = ["title", "subtitle", "amount", "currency", "credit"];
+//# sourceMappingURL=financial.js.map

package/dist/components/financial.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"financial.js","sourceRoot":"","sources":["../../src/components/financial.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,yEAAyE;AACzE,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,GAAG,CAAC,CAAgB,EAAU,EAAE,CAC1C,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;;;;GAIG;AACH,MAAM,OAAO,cAAe,SAAQ,UAAU;IAG5C,wBAAwB;QACtB,IAAI,IAAI,CAAC,WAAW;YAAE,IAAI,CAAC,MAAM,EAAE,CAAC;IACtC,CAAC;IAES,MAAM;QACd,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6CT,CAAC;IACJ,CAAC;IAES,MAAM;QACd,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;QACjD,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC;QACnD,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC;QACvD,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC;QACrD,OAAO,IAAI,CAAA;+DACgD,KAAK,IAAI,MAAM,IAAI,QAAQ;2BAC/D,KAAK;mDACmB,QAAQ,UAAU,MAAM;UACjE,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA,sBAAsB,OAAO,MAAM,CAAC,CAAC,CAAC,EAAE;;KAE3D,CAAC;IACJ,CAAC;;AAnEM,iCAAkB,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC;AAsEjF;;;GAGG;AACH,MAAM,OAAO,iBAAkB,SAAQ,UAAU;IAG/C,wBAAwB;QACtB,IAAI,IAAI,CAAC,WAAW;YAAE,IAAI,CAAC,MAAM,EAAE,CAAC;IACtC,CAAC;IAES,MAAM;QACd,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuDT,CAAC;IACJ,CAAC;IAES,MAAM;QACd,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;QACjD,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC;QACvD,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC;QACnD,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC;QACvD,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,IAAI,GAAG,CAAC;QAC5D,OAAO,IAAI,CAAA;;+CAEgC,OAAO;;6BAEzB,KAAK;YACtB,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,uBAAuB,QAAQ,MAAM,CAAC,CAAC,CAAC,EAAE;;8BAEvC,MAAM,IAAI,QAAQ;;KAE3C,CAAC;IACJ,CAAC;;AAjFM,oCAAkB,GAAG,CAAC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC"}

package/dist/components/inputs.d.ts

@@ -0,0 +1,27 @@
+import { NptElement } from "./base.js";
+/**
+ * <npt-text-field label="IBAN" value="" placeholder="LY.." [error="msg"]></npt-text-field>
+ * Outlined M3 field. Logical padding → mirrors in RTL.
+ */
+export declare class NptTextField extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    get value(): string;
+    protected styles(): string;
+    protected render(): string;
+}
+/** <npt-chip [selected]>Label</npt-chip> */
+export declare class NptChip extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    protected styles(): string;
+    protected render(): string;
+}
+/** <npt-badge tone="primary|success|error|neutral">3</npt-badge> */
+export declare class NptBadge extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    protected styles(): string;
+    protected render(): string;
+}
+//# sourceMappingURL=inputs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"inputs.d.ts","sourceRoot":"","sources":["../../src/components/inputs.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAmB,MAAM,WAAW,CAAC;AAKxD;;;GAGG;AACH,qBAAa,YAAa,SAAQ,UAAU;IAC1C,MAAM,CAAC,kBAAkB,WAAsD;IAE/E,wBAAwB,IAAI,IAAI;IAIhC,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,SAAS,CAAC,MAAM,IAAI,MAAM;IAgD1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAkB3B;AAED,4CAA4C;AAC5C,qBAAa,OAAQ,SAAQ,UAAU;IACrC,MAAM,CAAC,kBAAkB,WAAgB;IAEzC,wBAAwB,IAAI,IAAI;IAIhC,SAAS,CAAC,MAAM,IAAI,MAAM;IA2B1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAI3B;AAED,oEAAoE;AACpE,qBAAa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,kBAAkB,WAAY;IAErC,wBAAwB,IAAI,IAAI;IAIhC,SAAS,CAAC,MAAM,IAAI,MAAM;IAmC1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAG3B"}