@neptune.fintech/web-ui 2.1.0 → 2.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/dist/components/cards.d.ts +64 -0
  2. package/dist/components/cards.d.ts.map +1 -0
  3. package/dist/components/cards.js +508 -0
  4. package/dist/components/cards.js.map +1 -0
  5. package/dist/components/corporate.d.ts +84 -0
  6. package/dist/components/corporate.d.ts.map +1 -0
  7. package/dist/components/corporate.js +782 -0
  8. package/dist/components/corporate.js.map +1 -0
  9. package/dist/components/data-viz.d.ts +69 -0
  10. package/dist/components/data-viz.d.ts.map +1 -0
  11. package/dist/components/data-viz.js +526 -0
  12. package/dist/components/data-viz.js.map +1 -0
  13. package/dist/components/feedback-status.d.ts +80 -0
  14. package/dist/components/feedback-status.d.ts.map +1 -0
  15. package/dist/components/feedback-status.js +537 -0
  16. package/dist/components/feedback-status.js.map +1 -0
  17. package/dist/components/money-inputs.d.ts +105 -0
  18. package/dist/components/money-inputs.d.ts.map +1 -0
  19. package/dist/components/money-inputs.js +766 -0
  20. package/dist/components/money-inputs.js.map +1 -0
  21. package/dist/components/money-movement.d.ts +79 -0
  22. package/dist/components/money-movement.d.ts.map +1 -0
  23. package/dist/components/money-movement.js +740 -0
  24. package/dist/components/money-movement.js.map +1 -0
  25. package/dist/components/premium.d.ts +38 -0
  26. package/dist/components/premium.d.ts.map +1 -0
  27. package/dist/components/premium.js +275 -0
  28. package/dist/components/premium.js.map +1 -0
  29. package/dist/components/shell-layout.d.ts +103 -0
  30. package/dist/components/shell-layout.d.ts.map +1 -0
  31. package/dist/components/shell-layout.js +582 -0
  32. package/dist/components/shell-layout.js.map +1 -0
  33. package/dist/components/wallet-pay.d.ts +85 -0
  34. package/dist/components/wallet-pay.d.ts.map +1 -0
  35. package/dist/components/wallet-pay.js +633 -0
  36. package/dist/components/wallet-pay.js.map +1 -0
  37. package/dist/index.d.ts +10 -1
  38. package/dist/index.d.ts.map +1 -1
  39. package/dist/index.js +10 -1
  40. package/dist/index.js.map +1 -1
  41. package/dist/register.d.ts.map +1 -1
  42. package/dist/register.js +70 -0
  43. package/dist/register.js.map +1 -1
  44. package/package.json +1 -1
@@ -0,0 +1,80 @@
1
+ import { NptElement } from "./base.js";
2
+ /**
3
+ * <npt-skeleton variant="text|circle|rect" width="200px" height="16px" [lines="3"]>
4
+ * Shimmer placeholder. `text` repeats `lines` bars; reduced-motion → static.
5
+ */
6
+ export declare class NptSkeleton extends NptElement {
7
+ static observedAttributes: string[];
8
+ attributeChangedCallback(): void;
9
+ protected styles(): string;
10
+ protected render(): string;
11
+ }
12
+ /**
13
+ * <npt-empty-state title="No transactions" body="…">
14
+ * <span slot="icon">📭</span><div slot="actions">…</div>
15
+ * </npt-empty-state>
16
+ * Centred placeholder for empty collections.
17
+ */
18
+ export declare class NptEmptyState extends NptElement {
19
+ static observedAttributes: string[];
20
+ attributeChangedCallback(): void;
21
+ protected styles(): string;
22
+ protected render(): string;
23
+ }
24
+ /**
25
+ * <npt-alert tone="info|success|warning|error" title="Heads up" [dismissible]>
26
+ * …message…
27
+ * </npt-alert>
28
+ * Inline tonal banner; [dismissible] shows a close button that emits `dismiss`.
29
+ */
30
+ export declare class NptAlert extends NptElement {
31
+ static observedAttributes: string[];
32
+ attributeChangedCallback(): void;
33
+ connectedCallback(): void;
34
+ disconnectedCallback(): void;
35
+ private onClick;
36
+ /** Hide the alert and emit a `dismiss` event. */
37
+ dismiss(): void;
38
+ protected styles(): string;
39
+ protected render(): string;
40
+ }
41
+ /**
42
+ * <npt-status-chip status="success|pending|failed|info|neutral">Settled</npt-status-chip>
43
+ * Status pill with a coloured dot + tonal background; label via default slot.
44
+ */
45
+ export declare class NptStatusChip extends NptElement {
46
+ static observedAttributes: string[];
47
+ attributeChangedCallback(): void;
48
+ protected styles(): string;
49
+ protected render(): string;
50
+ }
51
+ /**
52
+ * <npt-toast [open] message="Saved" tone="info|success|warning|error" timeout="4000">
53
+ * <span slot="action">…</span>
54
+ * </npt-toast>
55
+ * Fixed bottom toast; auto-hides after `timeout` ms (0 disables). Emits `close`.
56
+ */
57
+ export declare class NptToast extends NptElement {
58
+ static observedAttributes: string[];
59
+ private timer;
60
+ attributeChangedCallback(name: string): void;
61
+ connectedCallback(): void;
62
+ disconnectedCallback(): void;
63
+ private clearTimer;
64
+ private arm;
65
+ private onClick;
66
+ /** Hide the toast and emit a `close` event. */
67
+ close(): void;
68
+ protected styles(): string;
69
+ protected render(): string;
70
+ }
71
+ /**
72
+ * <npt-toast-host></npt-toast-host>
73
+ * Stacking container for toasts; place <npt-toast> elements in the default slot
74
+ * (or append them imperatively). Fixed to the bottom; newest sits at the end.
75
+ */
76
+ export declare class NptToastHost extends NptElement {
77
+ protected styles(): string;
78
+ protected render(): string;
79
+ }
80
+ //# sourceMappingURL=feedback-status.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"feedback-status.d.ts","sourceRoot":"","sources":["../../src/components/feedback-status.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,UAAU,EAAmB,MAAM,WAAW,CAAC;AAKxD;;;GAGG;AACH,qBAAa,WAAY,SAAQ,UAAU;IACzC,MAAM,CAAC,kBAAkB,WAA2C;IAEpE,wBAAwB,IAAI,IAAI;IAIhC,SAAS,CAAC,MAAM,IAAI,MAAM;IA+C1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAe3B;AAED;;;;;GAKG;AACH,qBAAa,aAAc,SAAQ,UAAU;IAC3C,MAAM,CAAC,kBAAkB,WAAqB;IAE9C,wBAAwB,IAAI,IAAI;IAIhC,SAAS,CAAC,MAAM,IAAI,MAAM;IAsD1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAU3B;AAED;;;;;GAKG;AACH,qBAAa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,kBAAkB,WAAoC;IAE7D,wBAAwB,IAAI,IAAI;IAIvB,iBAAiB,IAAI,IAAI;IAKlC,oBAAoB,IAAI,IAAI;IAI5B,OAAO,CAAC,OAAO,CAGb;IAEF,iDAAiD;IACjD,OAAO,IAAI,IAAI;IAKf,SAAS,CAAC,MAAM,IAAI,MAAM;IAqF1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAiB3B;AAED;;;GAGG;AACH,qBAAa,aAAc,SAAQ,UAAU;IAC3C,MAAM,CAAC,kBAAkB,WAAc;IAEvC,wBAAwB,IAAI,IAAI;IAIhC,SAAS,CAAC,MAAM,IAAI,MAAM;IAwD1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAO3B;AAED;;;;;GAKG;AACH,qBAAa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,kBAAkB,WAA0C;IAEnE,OAAO,CAAC,KAAK,CAA4C;IAEzD,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAQnC,iBAAiB,IAAI,IAAI;IAMlC,oBAAoB,IAAI,IAAI;IAK5B,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,GAAG;IAMX,OAAO,CAAC,OAAO,CAGb;IAEF,+CAA+C;IAC/C,KAAK,IAAI,IAAI;IAMb,SAAS,CAAC,MAAM,IAAI,MAAM;IAqF1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAQ3B;AAED;;;;GAIG;AACH,qBAAa,YAAa,SAAQ,UAAU;IAC1C,SAAS,CAAC,MAAM,IAAI,MAAM;IAqB1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAG3B"}
@@ -0,0 +1,537 @@
1
+ // © 2026 Neptune.Fintech (neptune.ly) · Neptune Odyssey Community License v1.0
2
+ // Neptune Odyssey — feedback & status
3
+ // <npt-skeleton>, <npt-empty-state>, <npt-alert>, <npt-status-chip>,
4
+ // <npt-toast> + <npt-toast-host>.
5
+ // Custom-property driven only; logical layout → mirrors in RTL.
6
+ import { NptElement, css, html, A11Y } from "./base.js";
7
+ const esc = (v) => (v ?? "").replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
8
+ /**
9
+ * <npt-skeleton variant="text|circle|rect" width="200px" height="16px" [lines="3"]>
10
+ * Shimmer placeholder. `text` repeats `lines` bars; reduced-motion → static.
11
+ */
12
+ export class NptSkeleton extends NptElement {
13
+ attributeChangedCallback() {
14
+ if (this.isConnected)
15
+ this.update();
16
+ }
17
+ styles() {
18
+ return css `
19
+ ${A11Y}
20
+ :host {
21
+ display: block;
22
+ }
23
+ .stack {
24
+ display: flex;
25
+ flex-direction: column;
26
+ gap: var(--npt-space-2, 8px);
27
+ }
28
+ .bone {
29
+ background: var(--md-sys-color-surface-container-highest);
30
+ background-image: linear-gradient(
31
+ 90deg,
32
+ transparent 0%,
33
+ color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent) 50%,
34
+ transparent 100%
35
+ );
36
+ background-size: 200% 100%;
37
+ background-repeat: no-repeat;
38
+ animation: shimmer 1.6s var(--npt-ease-standard, ease) infinite;
39
+ border-radius: var(--npt-corner-sm, 12px);
40
+ inline-size: 100%;
41
+ block-size: 1em;
42
+ }
43
+ :host([variant="text"]) .bone {
44
+ block-size: 0.8em;
45
+ border-radius: var(--npt-corner-xs, 8px);
46
+ }
47
+ :host([variant="text"]) .bone:last-child:not(:only-child) {
48
+ inline-size: 60%;
49
+ }
50
+ :host([variant="circle"]) .bone {
51
+ border-radius: var(--npt-corner-full, 999px);
52
+ aspect-ratio: 1;
53
+ }
54
+ :host([variant="rect"]) .bone {
55
+ border-radius: var(--npt-corner-md, 16px);
56
+ }
57
+ @keyframes shimmer {
58
+ 0% { background-position: 200% 0; }
59
+ 100% { background-position: -200% 0; }
60
+ }
61
+ `;
62
+ }
63
+ render() {
64
+ const variant = this.getAttribute("variant") || "rect";
65
+ const width = esc(this.getAttribute("width"));
66
+ const height = esc(this.getAttribute("height"));
67
+ const lines = Math.max(1, Number(this.getAttribute("lines") ?? 1) || 1);
68
+ const sizeStyle = `${width ? `inline-size:${width};` : ""}${height ? `block-size:${height};` : ""}`;
69
+ const count = variant === "text" ? lines : 1;
70
+ const bones = Array.from({ length: count }, () => html `<div class="bone" part="bone" style="${sizeStyle}"></div>`).join("");
71
+ return html `<div class="stack" part="stack" role="status" aria-busy="true" aria-live="polite" aria-label="Loading">
72
+ ${bones}
73
+ </div>`;
74
+ }
75
+ }
76
+ NptSkeleton.observedAttributes = ["variant", "width", "height", "lines"];
77
+ /**
78
+ * <npt-empty-state title="No transactions" body="…">
79
+ * <span slot="icon">📭</span><div slot="actions">…</div>
80
+ * </npt-empty-state>
81
+ * Centred placeholder for empty collections.
82
+ */
83
+ export class NptEmptyState extends NptElement {
84
+ attributeChangedCallback() {
85
+ if (this.isConnected)
86
+ this.update();
87
+ }
88
+ styles() {
89
+ return css `
90
+ ${A11Y}
91
+ :host {
92
+ display: block;
93
+ }
94
+ .wrap {
95
+ display: flex;
96
+ flex-direction: column;
97
+ align-items: center;
98
+ text-align: center;
99
+ gap: var(--npt-space-4, 16px);
100
+ padding-block: var(--npt-space-8, 48px);
101
+ padding-inline: var(--npt-space-6, 24px);
102
+ color: var(--md-sys-color-on-surface);
103
+ }
104
+ .icon {
105
+ display: grid;
106
+ place-items: center;
107
+ inline-size: 64px;
108
+ block-size: 64px;
109
+ border-radius: var(--npt-corner-full, 999px);
110
+ background: var(--md-sys-color-surface-container-high);
111
+ color: var(--md-sys-color-on-surface-variant);
112
+ font-size: var(--npt-text-headline, 28px);
113
+ }
114
+ .icon:empty {
115
+ display: none;
116
+ }
117
+ .title {
118
+ font-family: var(--npt-font-display);
119
+ font-size: var(--npt-text-title-lg, 22px);
120
+ line-height: var(--npt-leading-title-lg, 28px);
121
+ font-weight: var(--npt-display-weight, 700);
122
+ margin: 0;
123
+ }
124
+ .body {
125
+ font-family: var(--npt-font-text);
126
+ font-size: var(--npt-text-body, 14px);
127
+ line-height: var(--npt-leading-body, 20px);
128
+ color: var(--md-sys-color-on-surface-variant);
129
+ margin: 0;
130
+ max-inline-size: 40ch;
131
+ }
132
+ .actions {
133
+ display: inline-flex;
134
+ flex-wrap: wrap;
135
+ justify-content: center;
136
+ gap: var(--npt-space-2, 8px);
137
+ margin-block-start: var(--npt-space-2, 8px);
138
+ }
139
+ `;
140
+ }
141
+ render() {
142
+ const title = esc(this.getAttribute("title"));
143
+ const body = esc(this.getAttribute("body"));
144
+ return html `<div class="wrap" part="wrap" role="group">
145
+ <div class="icon" part="icon"><slot name="icon"></slot></div>
146
+ ${title ? html `<h2 class="title" part="title">${title}</h2>` : ""}
147
+ ${body ? html `<p class="body" part="body">${body}</p>` : ""}
148
+ <div class="actions" part="actions"><slot name="actions"></slot></div>
149
+ </div>`;
150
+ }
151
+ }
152
+ NptEmptyState.observedAttributes = ["title", "body"];
153
+ /**
154
+ * <npt-alert tone="info|success|warning|error" title="Heads up" [dismissible]>
155
+ * …message…
156
+ * </npt-alert>
157
+ * Inline tonal banner; [dismissible] shows a close button that emits `dismiss`.
158
+ */
159
+ export class NptAlert extends NptElement {
160
+ constructor() {
161
+ super(...arguments);
162
+ this.onClick = (e) => {
163
+ const t = e.target;
164
+ if (t.closest("[data-dismiss]"))
165
+ this.dismiss();
166
+ };
167
+ }
168
+ attributeChangedCallback() {
169
+ if (this.isConnected)
170
+ this.update();
171
+ }
172
+ connectedCallback() {
173
+ super.connectedCallback();
174
+ this.root.addEventListener("click", this.onClick);
175
+ }
176
+ disconnectedCallback() {
177
+ this.root.removeEventListener("click", this.onClick);
178
+ }
179
+ /** Hide the alert and emit a `dismiss` event. */
180
+ dismiss() {
181
+ this.setAttribute("hidden", "");
182
+ this.dispatchEvent(new CustomEvent("dismiss", { bubbles: true }));
183
+ }
184
+ styles() {
185
+ return css `
186
+ ${A11Y}
187
+ :host {
188
+ display: block;
189
+ --_bg: var(--md-sys-color-secondary-container);
190
+ --_fg: var(--md-sys-color-on-secondary-container);
191
+ --_accent: var(--md-sys-color-secondary);
192
+ }
193
+ :host([hidden]) {
194
+ display: none;
195
+ }
196
+ :host([tone="success"]) {
197
+ --_bg: var(--md-sys-color-success-container);
198
+ --_fg: var(--md-sys-color-on-success-container);
199
+ --_accent: var(--md-sys-color-success);
200
+ }
201
+ :host([tone="warning"]) {
202
+ --_bg: var(--md-sys-color-tertiary-container);
203
+ --_fg: var(--md-sys-color-on-tertiary-container);
204
+ --_accent: var(--md-sys-color-tertiary);
205
+ }
206
+ :host([tone="error"]) {
207
+ --_bg: var(--md-sys-color-error-container);
208
+ --_fg: var(--md-sys-color-on-error-container);
209
+ --_accent: var(--md-sys-color-error);
210
+ }
211
+ .alert {
212
+ display: flex;
213
+ align-items: flex-start;
214
+ gap: var(--npt-space-3, 12px);
215
+ padding-inline: var(--npt-space-4, 16px);
216
+ padding-block: var(--npt-space-3, 12px);
217
+ border-radius: var(--npt-corner-md, 16px);
218
+ border-inline-start: 4px solid var(--_accent);
219
+ background: var(--_bg);
220
+ color: var(--_fg);
221
+ font-family: var(--npt-font-text);
222
+ font-size: var(--npt-text-body, 14px);
223
+ line-height: var(--npt-leading-body, 20px);
224
+ box-sizing: border-box;
225
+ }
226
+ .dot {
227
+ flex: 0 0 auto;
228
+ inline-size: 8px;
229
+ block-size: 8px;
230
+ margin-block-start: 6px;
231
+ border-radius: var(--npt-corner-full, 999px);
232
+ background: var(--_accent);
233
+ }
234
+ .body {
235
+ flex: 1 1 auto;
236
+ min-inline-size: 0;
237
+ }
238
+ .title {
239
+ font-size: var(--npt-text-label, 14px);
240
+ font-weight: 600;
241
+ margin: 0 0 var(--npt-space-1, 4px);
242
+ }
243
+ .msg {
244
+ display: block;
245
+ }
246
+ .close {
247
+ flex: 0 0 auto;
248
+ display: grid;
249
+ place-items: center;
250
+ inline-size: 44px;
251
+ block-size: 44px;
252
+ margin-block: -6px;
253
+ margin-inline-end: calc(-1 * var(--npt-space-2, 8px));
254
+ padding: 0;
255
+ border: none;
256
+ background: transparent;
257
+ color: inherit;
258
+ border-radius: var(--npt-corner-full, 999px);
259
+ cursor: pointer;
260
+ font-size: var(--npt-text-title, 18px);
261
+ line-height: 1;
262
+ }
263
+ .close:hover {
264
+ background: color-mix(in oklab, currentColor 12%, transparent);
265
+ }
266
+ `;
267
+ }
268
+ render() {
269
+ const tone = this.getAttribute("tone") || "info";
270
+ const title = esc(this.getAttribute("title"));
271
+ const dismissible = this.hasAttribute("dismissible");
272
+ const role = tone === "error" || tone === "warning" ? "alert" : "status";
273
+ const live = tone === "error" || tone === "warning" ? "assertive" : "polite";
274
+ return html `<div class="alert" part="alert" role="${role}" aria-live="${live}">
275
+ <span class="dot" part="dot" aria-hidden="true"></span>
276
+ <div class="body">
277
+ ${title ? html `<p class="title" part="title">${title}</p>` : ""}
278
+ <span class="msg"><slot></slot></span>
279
+ </div>
280
+ ${dismissible
281
+ ? html `<button class="close" part="close" type="button" data-dismiss aria-label="Dismiss">✕</button>`
282
+ : ""}
283
+ </div>`;
284
+ }
285
+ }
286
+ NptAlert.observedAttributes = ["tone", "title", "dismissible"];
287
+ /**
288
+ * <npt-status-chip status="success|pending|failed|info|neutral">Settled</npt-status-chip>
289
+ * Status pill with a coloured dot + tonal background; label via default slot.
290
+ */
291
+ export class NptStatusChip extends NptElement {
292
+ attributeChangedCallback() {
293
+ if (this.isConnected)
294
+ this.update();
295
+ }
296
+ styles() {
297
+ return css `
298
+ ${A11Y}
299
+ :host {
300
+ display: inline-flex;
301
+ --_bg: var(--md-sys-color-surface-container-highest);
302
+ --_fg: var(--md-sys-color-on-surface-variant);
303
+ --_dot: var(--md-sys-color-on-surface-variant);
304
+ }
305
+ :host([status="success"]) {
306
+ --_bg: var(--md-sys-color-success-container);
307
+ --_fg: var(--md-sys-color-on-success-container);
308
+ --_dot: var(--md-sys-color-success);
309
+ }
310
+ :host([status="pending"]) {
311
+ --_bg: var(--md-sys-color-tertiary-container);
312
+ --_fg: var(--md-sys-color-on-tertiary-container);
313
+ --_dot: var(--md-sys-color-tertiary);
314
+ }
315
+ :host([status="failed"]) {
316
+ --_bg: var(--md-sys-color-error-container);
317
+ --_fg: var(--md-sys-color-on-error-container);
318
+ --_dot: var(--md-sys-color-error);
319
+ }
320
+ :host([status="info"]) {
321
+ --_bg: var(--md-sys-color-secondary-container);
322
+ --_fg: var(--md-sys-color-on-secondary-container);
323
+ --_dot: var(--md-sys-color-secondary);
324
+ }
325
+ .chip {
326
+ display: inline-flex;
327
+ align-items: center;
328
+ gap: var(--npt-space-2, 8px);
329
+ min-block-size: 28px;
330
+ padding-inline: var(--npt-space-3, 12px);
331
+ padding-block: var(--npt-space-1, 4px);
332
+ border-radius: var(--npt-corner-full, 999px);
333
+ background: var(--_bg);
334
+ color: var(--_fg);
335
+ font-family: var(--npt-font-text);
336
+ font-size: var(--npt-text-label, 14px);
337
+ font-weight: 500;
338
+ line-height: 1;
339
+ box-sizing: border-box;
340
+ white-space: nowrap;
341
+ }
342
+ .dot {
343
+ flex: 0 0 auto;
344
+ inline-size: 8px;
345
+ block-size: 8px;
346
+ border-radius: var(--npt-corner-full, 999px);
347
+ background: var(--_dot);
348
+ }
349
+ `;
350
+ }
351
+ render() {
352
+ const status = this.getAttribute("status") || "neutral";
353
+ return html `<span class="chip" part="chip" role="status" aria-label="${esc(status)}">
354
+ <span class="dot" part="dot" aria-hidden="true"></span>
355
+ <slot></slot>
356
+ </span>`;
357
+ }
358
+ }
359
+ NptStatusChip.observedAttributes = ["status"];
360
+ /**
361
+ * <npt-toast [open] message="Saved" tone="info|success|warning|error" timeout="4000">
362
+ * <span slot="action">…</span>
363
+ * </npt-toast>
364
+ * Fixed bottom toast; auto-hides after `timeout` ms (0 disables). Emits `close`.
365
+ */
366
+ export class NptToast extends NptElement {
367
+ constructor() {
368
+ super(...arguments);
369
+ this.onClick = (e) => {
370
+ const t = e.target;
371
+ if (t.closest("[data-close]"))
372
+ this.close();
373
+ };
374
+ }
375
+ attributeChangedCallback(name) {
376
+ if (this.isConnected)
377
+ this.update();
378
+ if (name === "open") {
379
+ if (this.hasAttribute("open"))
380
+ this.arm();
381
+ else
382
+ this.clearTimer();
383
+ }
384
+ }
385
+ connectedCallback() {
386
+ super.connectedCallback();
387
+ this.root.addEventListener("click", this.onClick);
388
+ if (this.hasAttribute("open"))
389
+ this.arm();
390
+ }
391
+ disconnectedCallback() {
392
+ this.root.removeEventListener("click", this.onClick);
393
+ this.clearTimer();
394
+ }
395
+ clearTimer() {
396
+ if (this.timer !== undefined) {
397
+ clearTimeout(this.timer);
398
+ this.timer = undefined;
399
+ }
400
+ }
401
+ arm() {
402
+ this.clearTimer();
403
+ const timeout = Number(this.getAttribute("timeout") ?? 4000);
404
+ if (timeout > 0)
405
+ this.timer = setTimeout(() => this.close(), timeout);
406
+ }
407
+ /** Hide the toast and emit a `close` event. */
408
+ close() {
409
+ this.clearTimer();
410
+ this.removeAttribute("open");
411
+ this.dispatchEvent(new CustomEvent("close", { bubbles: true }));
412
+ }
413
+ styles() {
414
+ return css `
415
+ ${A11Y}
416
+ :host {
417
+ display: none;
418
+ --_bg: var(--md-sys-color-inverse-surface);
419
+ --_fg: var(--md-sys-color-inverse-on-surface);
420
+ --_accent: var(--md-sys-color-inverse-primary);
421
+ }
422
+ :host([open]) {
423
+ display: block;
424
+ }
425
+ :host([tone="success"]) {
426
+ --_bg: var(--md-sys-color-success-container);
427
+ --_fg: var(--md-sys-color-on-success-container);
428
+ --_accent: var(--md-sys-color-success);
429
+ }
430
+ :host([tone="warning"]) {
431
+ --_bg: var(--md-sys-color-tertiary-container);
432
+ --_fg: var(--md-sys-color-on-tertiary-container);
433
+ --_accent: var(--md-sys-color-tertiary);
434
+ }
435
+ :host([tone="error"]) {
436
+ --_bg: var(--md-sys-color-error-container);
437
+ --_fg: var(--md-sys-color-on-error-container);
438
+ --_accent: var(--md-sys-color-error);
439
+ }
440
+ .toast {
441
+ position: fixed;
442
+ inset-block-end: var(--npt-space-6, 24px);
443
+ inset-inline: var(--npt-space-4, 16px);
444
+ margin-inline: auto;
445
+ inline-size: max-content;
446
+ max-inline-size: min(560px, calc(100% - 2 * var(--npt-space-4, 16px)));
447
+ z-index: var(--npt-z-toast, 80);
448
+ display: flex;
449
+ align-items: center;
450
+ gap: var(--npt-space-4, 16px);
451
+ min-block-size: 48px;
452
+ padding-inline: var(--npt-space-4, 16px);
453
+ padding-block: var(--npt-space-3, 12px);
454
+ border-radius: var(--npt-corner-sm, 12px);
455
+ background: var(--_bg);
456
+ color: var(--_fg);
457
+ box-shadow: var(--npt-elevation-3, 0 8px 20px rgba(0, 0, 0, 0.2));
458
+ font-family: var(--npt-font-text);
459
+ font-size: var(--npt-text-body, 14px);
460
+ line-height: var(--npt-leading-body, 20px);
461
+ box-sizing: border-box;
462
+ animation: rise var(--npt-dur-fast, 200ms) var(--npt-ease-spring, ease);
463
+ }
464
+ .msg {
465
+ flex: 1 1 auto;
466
+ min-inline-size: 0;
467
+ }
468
+ ::slotted(*) {
469
+ color: var(--_accent);
470
+ }
471
+ .close {
472
+ flex: 0 0 auto;
473
+ display: grid;
474
+ place-items: center;
475
+ inline-size: 44px;
476
+ block-size: 44px;
477
+ margin-block: -8px;
478
+ margin-inline-end: calc(-1 * var(--npt-space-2, 8px));
479
+ padding: 0;
480
+ border: none;
481
+ background: transparent;
482
+ color: inherit;
483
+ border-radius: var(--npt-corner-full, 999px);
484
+ cursor: pointer;
485
+ font-size: var(--npt-text-title, 18px);
486
+ line-height: 1;
487
+ }
488
+ .close:hover {
489
+ background: color-mix(in oklab, currentColor 12%, transparent);
490
+ }
491
+ @keyframes rise {
492
+ from { transform: translateY(var(--npt-space-4, 16px)); opacity: 0; }
493
+ to { transform: translateY(0); opacity: 1; }
494
+ }
495
+ `;
496
+ }
497
+ render() {
498
+ const message = esc(this.getAttribute("message"));
499
+ return html `<div class="toast" part="toast" role="status" aria-live="polite">
500
+ <span class="msg">${message}</span>
501
+ <slot name="action"></slot>
502
+ <button class="close" part="close" type="button" data-close aria-label="Close">✕</button>
503
+ </div>`;
504
+ }
505
+ }
506
+ NptToast.observedAttributes = ["open", "message", "tone", "timeout"];
507
+ /**
508
+ * <npt-toast-host></npt-toast-host>
509
+ * Stacking container for toasts; place <npt-toast> elements in the default slot
510
+ * (or append them imperatively). Fixed to the bottom; newest sits at the end.
511
+ */
512
+ export class NptToastHost extends NptElement {
513
+ styles() {
514
+ return css `
515
+ ${A11Y}
516
+ :host {
517
+ position: fixed;
518
+ inset-block-end: var(--npt-space-6, 24px);
519
+ inset-inline: 0;
520
+ z-index: var(--npt-z-toast, 80);
521
+ display: flex;
522
+ flex-direction: column;
523
+ align-items: center;
524
+ gap: var(--npt-space-3, 12px);
525
+ padding-inline: var(--npt-space-4, 16px);
526
+ pointer-events: none;
527
+ }
528
+ ::slotted(*) {
529
+ pointer-events: auto;
530
+ }
531
+ `;
532
+ }
533
+ render() {
534
+ return html `<slot></slot>`;
535
+ }
536
+ }
537
+ //# sourceMappingURL=feedback-status.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"feedback-status.js","sourceRoot":"","sources":["../../src/components/feedback-status.ts"],"names":[],"mappings":"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"}