@neptune.fintech/web-ui 2.0.0 → 2.1.0

package/dist/components/inputs.js

@@ -81,12 +81,32 @@ export class NptTextField extends NptElement {
     }
 }
 NptTextField.observedAttributes = ["label", "value", "placeholder", "error", "type"];
-/** <npt-chip [selected]>Label</npt-chip> */
+/**
+ * <npt-chip variant="assist|filter|input|suggestion" [selected]>Label</npt-chip>
+ * `filter` shows a leading ✓ when [selected]; `input` shows a removable ✕ that
+ * dispatches a `remove` event. Defaults to the assist/filter treatment.
+ */
 export class NptChip extends NptElement {
+    constructor() {
+        super(...arguments);
+        this.onClick = (e) => {
+            if (e.target?.closest(".remove")) {
+                e.stopPropagation();
+                this.dispatchEvent(new CustomEvent("remove", { bubbles: true }));
+            }
+        };
+    }
     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}
@@ -99,6 +119,7 @@ export class NptChip extends NptElement {
         min-height: 32px;
         display: inline-flex;
         align-items: center;
+        gap: var(--npt-space-2, 8px);
         padding-inline: var(--npt-space-4, 16px);
         border-radius: var(--npt-corner-sm, 12px);
         border: 1px solid var(--md-sys-color-outline);
@@ -106,19 +127,52 @@ export class NptChip extends NptElement {
         color: var(--md-sys-color-on-surface-variant);
         cursor: pointer;
       }
+      :host([disabled]) .chip {
+        cursor: not-allowed;
+        opacity: 0.38;
+      }
       :host([selected]) .chip {
         background: var(--md-sys-color-secondary-container);
         color: var(--md-sys-color-on-secondary-container);
         border-color: transparent;
       }
+      .check {
+        display: none;
+        font-size: var(--npt-text-body, 14px);
+      }
+      :host([variant="filter"][selected]) .check {
+        display: inline;
+      }
+      .remove {
+        display: none;
+        border: none;
+        background: transparent;
+        color: inherit;
+        cursor: pointer;
+        font-size: var(--npt-text-body-lg, 16px);
+        line-height: 1;
+        padding: 0;
+        margin-inline-end: calc(-1 * var(--npt-space-1, 4px));
+      }
+      :host([variant="input"]) .remove {
+        display: inline-flex;
+      }
     `;
     }
     render() {
         const selected = this.hasAttribute("selected");
-        return html `<button class="chip" part="chip" role="option" aria-selected="${selected}"><slot></slot></button>`;
+        const variant = this.getAttribute("variant") || "filter";
+        const disabled = this.hasAttribute("disabled") ? "disabled" : "";
+        const role = variant === "filter" ? "option" : "button";
+        const ariaSel = variant === "filter" ? html `aria-selected="${selected}"` : "";
+        return html `<button class="chip" part="chip" role="${role}" ${ariaSel} ${disabled}>
+      <span class="check" aria-hidden="true">✓</span>
+      <slot></slot>
+      <span class="remove" role="button" aria-label="Remove" tabindex="0">✕</span>
+    </button>`;
     }
 }
-NptChip.observedAttributes = ["selected"];
+NptChip.observedAttributes = ["selected", "variant", "disabled"];
 /** <npt-badge tone="primary|success|error|neutral">3</npt-badge> */
 export class NptBadge extends NptElement {
     attributeChangedCallback() {

package/dist/components/inputs.js.map

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

package/dist/components/layout.d.ts

@@ -0,0 +1,68 @@
+import { NptElement } from "./base.js";
+/** <npt-list> with <npt-list-item> children. */
+export declare class NptList extends NptElement {
+    protected styles(): string;
+    protected render(): string;
+}
+/**
+ * <npt-list-item [interactive] headline="Title" supporting="Sub">
+ *   <span slot="leading">●</span><span slot="trailing">→</span>
+ * </npt-list-item>
+ */
+export declare class NptListItem extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    protected styles(): string;
+    protected render(): string;
+}
+/** <npt-divider [inset]></npt-divider> */
+export declare class NptDivider extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    protected styles(): string;
+    protected render(): string;
+}
+/**
+ * <npt-tabs> with <npt-tab> children.
+ * Click selects a tab (sets [active]); a sliding indicator follows.
+ */
+export declare class NptTabs extends NptElement {
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private onClick;
+    protected styles(): string;
+    protected render(): string;
+}
+/** <npt-tab [active]>Overview</npt-tab> */
+export declare class NptTab extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    protected styles(): string;
+    protected render(): string;
+}
+/** <npt-accordion> with <npt-accordion-item> children. */
+export declare class NptAccordion extends NptElement {
+    protected styles(): string;
+    protected render(): string;
+}
+/**
+ * <npt-accordion-item [open] summary="Section">…detail…</npt-accordion-item>
+ * Native <details>/<summary> semantics under the hood.
+ */
+export declare class NptAccordionItem extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private onToggle;
+    protected styles(): string;
+    protected render(): string;
+}
+/** <npt-avatar src="" initials="MK" size="sm|md|lg" label="Mona"></npt-avatar> */
+export declare class NptAvatar extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    protected styles(): string;
+    protected render(): string;
+}
+//# sourceMappingURL=layout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../src/components/layout.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,UAAU,EAAmB,MAAM,WAAW,CAAC;AAKxD,gDAAgD;AAChD,qBAAa,OAAQ,SAAQ,UAAU;IACrC,SAAS,CAAC,MAAM,IAAI,MAAM;IAa1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAG3B;AAED;;;;GAIG;AACH,qBAAa,WAAY,SAAQ,UAAU;IACzC,MAAM,CAAC,kBAAkB,WAA6C;IAEtE,wBAAwB,IAAI,IAAI;IAIhC,SAAS,CAAC,MAAM,IAAI,MAAM;IA6C1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAgB3B;AAED,0CAA0C;AAC1C,qBAAa,UAAW,SAAQ,UAAU;IACxC,MAAM,CAAC,kBAAkB,WAAa;IAEtC,wBAAwB,IAAI,IAAI;IAIhC,SAAS,CAAC,MAAM,IAAI,MAAM;IAkB1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAG3B;AAED;;;GAGG;AACH,qBAAa,OAAQ,SAAQ,UAAU;IAC5B,iBAAiB,IAAI,IAAI;IAKlC,oBAAoB,IAAI,IAAI;IAI5B,OAAO,CAAC,OAAO,CAKb;IAEF,SAAS,CAAC,MAAM,IAAI,MAAM;IAc1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAG3B;AAED,2CAA2C;AAC3C,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,kBAAkB,WAAc;IAEvC,wBAAwB,IAAI,IAAI;IAIhC,SAAS,CAAC,MAAM,IAAI,MAAM;IAyC1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAM3B;AAED,0DAA0D;AAC1D,qBAAa,YAAa,SAAQ,UAAU;IAC1C,SAAS,CAAC,MAAM,IAAI,MAAM;IAQ1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAG3B;AAED;;;GAGG;AACH,qBAAa,gBAAiB,SAAQ,UAAU;IAC9C,MAAM,CAAC,kBAAkB,WAAuB;IAEhD,wBAAwB,IAAI,IAAI;IAIvB,iBAAiB,IAAI,IAAI;IAKlC,oBAAoB,IAAI,IAAI;IAI5B,OAAO,CAAC,QAAQ,CAGd;IAEF,SAAS,CAAC,MAAM,IAAI,MAAM;IA0C1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAQ3B;AAED,kFAAkF;AAClF,qBAAa,SAAU,SAAQ,UAAU;IACvC,MAAM,CAAC,kBAAkB,WAAwC;IAEjE,wBAAwB,IAAI,IAAI;IAIhC,SAAS,CAAC,MAAM,IAAI,MAAM;IAoC1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAS3B"}

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/nav-rail.d.ts

@@ -0,0 +1,22 @@
+import { NptElement } from "./base.js";
+/**
+ * <npt-nav-rail> with <npt-nav-item> children — the desktop/tablet side rail.
+ * Vertical sibling of <npt-nav-bar>; reuses the same items.
+ */
+export declare class NptNavRail extends NptElement {
+    protected styles(): string;
+    protected render(): string;
+}
+/**
+ * <npt-top-app-bar title="Accounts" variant="small|center|medium|large">
+ *   …leading/trailing slots…
+ * </npt-top-app-bar>
+ * M3 top app bar. `medium`/`large` stack a larger headline below the action row.
+ */
+export declare class NptTopAppBar extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    protected styles(): string;
+    protected render(): string;
+}
+//# sourceMappingURL=nav-rail.d.ts.map

package/dist/components/nav-rail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-rail.d.ts","sourceRoot":"","sources":["../../src/components/nav-rail.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAa,MAAM,WAAW,CAAC;AAKlD;;;GAGG;AACH,qBAAa,UAAW,SAAQ,UAAU;IACxC,SAAS,CAAC,MAAM,IAAI,MAAM;IAyB1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAM3B;AAED;;;;;GAKG;AACH,qBAAa,YAAa,SAAQ,UAAU;IAC1C,MAAM,CAAC,kBAAkB,WAAwB;IAEjD,wBAAwB,IAAI,IAAI;IAIhC,SAAS,CAAC,MAAM,IAAI,MAAM;IAsD1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAW3B"}