@neptune.fintech/web-ui 2.0.0 → 2.2.0

package/dist/components/feedback.js

@@ -0,0 +1,241 @@
+// © 2026 Neptune.Fintech (neptune.ly) · Neptune Odyssey Community License v1.0
+// Neptune Odyssey — communication & feedback
+// <npt-progress>, <npt-snackbar>, <npt-tooltip>, <npt-banner>.
+// 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-progress variant="linear|circular" value="60" [indeterminate]></npt-progress>
+ * Omit value (or set [indeterminate]) for the indeterminate state.
+ */
+export class NptProgress extends NptElement {
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.update();
+    }
+    styles() {
+        return css `
+      ${A11Y}
+      :host {
+        display: block;
+      }
+      .track {
+        block-size: 4px;
+        inline-size: 100%;
+        border-radius: var(--npt-corner-full, 999px);
+        background: var(--md-sys-color-surface-container-highest);
+        overflow: hidden;
+      }
+      .bar {
+        block-size: 100%;
+        background: var(--md-sys-color-primary);
+        border-radius: var(--npt-corner-full, 999px);
+        transition: inline-size var(--npt-dur-fast, 200ms) var(--npt-ease-standard, ease);
+      }
+      :host([indeterminate]) .bar,
+      :host(:not([value])) .bar {
+        inline-size: 40%;
+        animation: slide 1.4s var(--npt-ease-standard, ease) infinite;
+      }
+      @keyframes slide {
+        0% { transform: translateX(-120%); }
+        100% { transform: translateX(320%); }
+      }
+      .ring {
+        inline-size: 48px;
+        block-size: 48px;
+        transform: rotate(-90deg);
+      }
+      .ring circle {
+        fill: none;
+        stroke-width: 4;
+      }
+      .ring .bg {
+        stroke: var(--md-sys-color-surface-container-highest);
+      }
+      .ring .fg {
+        stroke: var(--md-sys-color-primary);
+        stroke-linecap: round;
+        transition: stroke-dashoffset var(--npt-dur-fast, 200ms) var(--npt-ease-standard, ease);
+      }
+      :host([indeterminate]) .ring {
+        animation: spin 1.2s linear infinite;
+      }
+      @keyframes spin {
+        to { transform: rotate(270deg); }
+      }
+    `;
+    }
+    render() {
+        const variant = this.getAttribute("variant") || "linear";
+        const indeterminate = this.hasAttribute("indeterminate") || !this.hasAttribute("value");
+        const value = Math.max(0, Math.min(100, Number(this.getAttribute("value") ?? 0)));
+        const label = esc(this.getAttribute("label")) || "progress";
+        const aria = indeterminate
+            ? html `role="progressbar" aria-label="${label}"`
+            : html `role="progressbar" aria-label="${label}" aria-valuenow="${value}" aria-valuemin="0" aria-valuemax="100"`;
+        if (variant === "circular") {
+            const r = 20;
+            const circ = 2 * Math.PI * r;
+            const offset = indeterminate ? circ * 0.7 : circ * (1 - value / 100);
+            return html `<svg class="ring" part="ring" viewBox="0 0 48 48" ${aria}>
+        <circle class="bg" cx="24" cy="24" r="${r}"></circle>
+        <circle class="fg" cx="24" cy="24" r="${r}"
+          stroke-dasharray="${circ}" stroke-dashoffset="${offset}"></circle>
+      </svg>`;
+        }
+        const width = indeterminate ? "40%" : `${value}%`;
+        return html `<div class="track" part="track" ${aria}>
+      <div class="bar" style="inline-size:${width}"></div>
+    </div>`;
+    }
+}
+NptProgress.observedAttributes = ["variant", "value", "indeterminate", "label"];
+/**
+ * <npt-snackbar message="Saved" [open]>…optional action slot…</npt-snackbar>
+ * Inverse-surface toast. Provide an action via the default slot.
+ */
+export class NptSnackbar extends NptElement {
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.update();
+    }
+    styles() {
+        return css `
+      ${A11Y}
+      :host {
+        display: none;
+      }
+      :host([open]) {
+        display: block;
+      }
+      .bar {
+        display: flex;
+        align-items: center;
+        gap: var(--npt-space-4, 16px);
+        min-height: 48px;
+        padding-inline: var(--npt-space-4, 16px);
+        padding-block: var(--npt-space-3, 12px);
+        border-radius: var(--npt-corner-xs, 8px);
+        background: var(--md-sys-color-inverse-surface);
+        color: var(--md-sys-color-inverse-on-surface);
+        box-shadow: var(--npt-elevation-3, 0 8px 20px rgba(0, 0, 0, 0.2));
+        font-family: var(--npt-font-text);
+        font-size: var(--npt-text-body, 14px);
+      }
+      .msg {
+        flex: 1 1 auto;
+      }
+      ::slotted(*) {
+        color: var(--md-sys-color-inverse-primary);
+      }
+    `;
+    }
+    render() {
+        const message = esc(this.getAttribute("message"));
+        return html `<div class="bar" part="bar" role="status" aria-live="polite">
+      <span class="msg">${message}</span>
+      <slot></slot>
+    </div>`;
+    }
+}
+NptSnackbar.observedAttributes = ["message", "open"];
+/**
+ * <npt-tooltip label="Copy"><npt-icon-button>⧉</npt-icon-button></npt-tooltip>
+ * Wraps a trigger; reveals the label on hover/focus.
+ */
+export class NptTooltip extends NptElement {
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.update();
+    }
+    styles() {
+        return css `
+      ${A11Y}
+      :host {
+        display: inline-flex;
+        position: relative;
+      }
+      .tip {
+        position: absolute;
+        inset-block-end: calc(100% + var(--npt-space-2, 8px));
+        inset-inline-start: 50%;
+        transform: translateX(-50%);
+        white-space: nowrap;
+        padding-inline: var(--npt-space-3, 12px);
+        padding-block: var(--npt-space-1, 4px);
+        border-radius: var(--npt-corner-xs, 8px);
+        background: var(--md-sys-color-inverse-surface);
+        color: var(--md-sys-color-inverse-on-surface);
+        font-family: var(--npt-font-text);
+        font-size: var(--npt-text-caption, 12px);
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity var(--npt-dur-fast, 200ms) var(--npt-ease-standard, ease);
+        z-index: var(--npt-z-toast, 80);
+      }
+      :host(:hover) .tip,
+      :host(:focus-within) .tip {
+        opacity: 1;
+      }
+    `;
+    }
+    render() {
+        const label = esc(this.getAttribute("label"));
+        return html `<slot></slot>
+      <span class="tip" part="tip" role="tooltip">${label}</span>`;
+    }
+}
+NptTooltip.observedAttributes = ["label"];
+/**
+ * <npt-banner text="Update available">…actions slot…</npt-banner>
+ * Surface-level inline message with an actions slot.
+ */
+export class NptBanner extends NptElement {
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.update();
+    }
+    styles() {
+        return css `
+      ${A11Y}
+      :host {
+        display: block;
+      }
+      .banner {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: var(--npt-space-4, 16px);
+        padding-inline: var(--npt-space-4, 16px);
+        padding-block: var(--npt-space-3, 12px);
+        background: var(--md-sys-color-surface-container);
+        color: var(--md-sys-color-on-surface);
+        border-bottom: 1px solid var(--md-sys-color-outline-variant);
+        font-family: var(--npt-font-text);
+        font-size: var(--npt-text-body, 14px);
+      }
+      .leading {
+        display: inline-flex;
+      }
+      .text {
+        flex: 1 1 200px;
+      }
+      .actions {
+        display: inline-flex;
+        gap: var(--npt-space-2, 8px);
+        margin-inline-start: auto;
+      }
+    `;
+    }
+    render() {
+        const text = esc(this.getAttribute("text"));
+        return html `<div class="banner" part="banner" role="status">
+      <span class="leading"><slot name="leading"></slot></span>
+      <span class="text">${text}</span>
+      <span class="actions"><slot></slot></span>
+    </div>`;
+    }
+}
+NptBanner.observedAttributes = ["text"];
+//# sourceMappingURL=feedback.js.map

package/dist/components/feedback.js.map

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

package/dist/components/inputs.d.ts

@@ -10,10 +10,17 @@ export declare class NptTextField extends NptElement {
     protected styles(): string;
     protected render(): string;
 }
-/** <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 declare class NptChip extends NptElement {
     static observedAttributes: string[];
     attributeChangedCallback(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private onClick;
     protected styles(): string;
     protected render(): string;
 }

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

@@ -1 +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"}
+{"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;;;;GAIG;AACH,qBAAa,OAAQ,SAAQ,UAAU;IACrC,MAAM,CAAC,kBAAkB,WAAuC;IAEhE,wBAAwB,IAAI,IAAI;IAIvB,iBAAiB,IAAI,IAAI;IAKlC,oBAAoB,IAAI,IAAI;IAI5B,OAAO,CAAC,OAAO,CAKb;IAEF,SAAS,CAAC,MAAM,IAAI,MAAM;IAqD1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAY3B;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"}

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"}