@neptune.fintech/web-ui 2.0.0 → 2.2.0

package/README.md

@@ -51,8 +51,30 @@ a brand is zero JavaScript. Custom configs and brandprints resolve through
 
 ## 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`.
+A standards-based **Material 3** kit. Every element is themed only by CSS variables.
+
+**Core & financial:** `npt-button` (filled / elevated / tonal / outlined / text) ·
+`npt-card` (incl. `glass`) · `npt-balance-card` · `npt-transaction-row` · `npt-text-field` ·
+`npt-badge`.
+
+**Buttons & actions:** `npt-icon-button` (standard / filled / tonal / outlined, `[selected]`) ·
+`npt-fab` (`sm`/`md`/`lg`, `[extended]`) · `npt-segmented-button` + `npt-segmented-option`.
+
+**Selection controls:** `npt-checkbox` (`[indeterminate]`) · `npt-radio` (name/value group) ·
+`npt-switch` · `npt-slider` (output bubble).
+
+**Chips:** `npt-chip` with `variant="assist|filter|input|suggestion"` (filter check, input ✕).
+
+**Communication & feedback:** `npt-progress` (linear / circular, `[indeterminate]`) ·
+`npt-snackbar` · `npt-tooltip` · `npt-banner`.
+
+**Containers & layout:** `npt-dialog` (scrim, ESC / backdrop close, focus-trap) ·
+`npt-bottom-sheet` · `npt-list` + `npt-list-item` · `npt-divider` (`[inset]`) ·
+`npt-tabs` + `npt-tab` · `npt-accordion` + `npt-accordion-item` · `npt-avatar` ·
+`npt-menu` + `npt-menu-item`.
+
+**Navigation:** `npt-app-bar` · `npt-top-app-bar` (`small`/`center`/`medium`/`large`) ·
+`npt-nav-bar` · `npt-nav-rail` · `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

package/dist/components/actions.d.ts

@@ -0,0 +1,43 @@
+import { NptElement } from "./base.js";
+/**
+ * <npt-icon-button variant="standard|filled|tonal|outlined" [selected] [disabled]
+ *   label="Favourite">★</npt-icon-button>
+ * 48dp circular target. `selected` toggles the active treatment.
+ */
+export declare class NptIconButton extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    protected styles(): string;
+    protected render(): string;
+}
+/**
+ * <npt-fab size="sm|md|lg" [extended] label="Compose" [disabled]>＋</npt-fab>
+ * Primary-container floating action. `extended` reveals the text label.
+ */
+export declare class NptFab extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    protected styles(): string;
+    protected render(): string;
+}
+/**
+ * <npt-segmented-button [multi]> with <npt-segmented-option> children.
+ * Connected single- or multi-select group. Single-select is the default.
+ */
+export declare class NptSegmentedButton extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private onClick;
+    protected styles(): string;
+    protected render(): string;
+}
+/** <npt-segmented-option value="day" [selected] [disabled]>Day</npt-segmented-option> */
+export declare class NptSegmentedOption extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    protected styles(): string;
+    protected render(): string;
+}
+//# sourceMappingURL=actions.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../../src/components/actions.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAmB,MAAM,WAAW,CAAC;AAKxD;;;;GAIG;AACH,qBAAa,aAAc,SAAQ,UAAU;IAC3C,MAAM,CAAC,kBAAkB,WAAgD;IAEzE,wBAAwB,IAAI,IAAI;IAIhC,SAAS,CAAC,MAAM,IAAI,MAAM;IA0D1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAW3B;AAED;;;GAGG;AACH,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,kBAAkB,WAA6C;IAEtE,wBAAwB,IAAI,IAAI;IAIhC,SAAS,CAAC,MAAM,IAAI,MAAM;IAwD1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAQ3B;AAED;;;GAGG;AACH,qBAAa,kBAAmB,SAAQ,UAAU;IAChD,MAAM,CAAC,kBAAkB,WAAa;IAEtC,wBAAwB,IAAI,IAAI;IAIvB,iBAAiB,IAAI,IAAI;IAKlC,oBAAoB,IAAI,IAAI;IAI5B,OAAO,CAAC,OAAO,CAWb;IAEF,SAAS,CAAC,MAAM,IAAI,MAAM;IAe1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAM3B;AAED,yFAAyF;AACzF,qBAAa,kBAAmB,SAAQ,UAAU;IAChD,MAAM,CAAC,kBAAkB,WAAqC;IAE9D,wBAAwB,IAAI,IAAI;IAIhC,SAAS,CAAC,MAAM,IAAI,MAAM;IA0C1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAc3B"}

package/dist/components/actions.js

@@ -0,0 +1,279 @@
+// © 2026 Neptune.Fintech (neptune.ly) · Neptune Odyssey Community License v1.0
+// Neptune Odyssey — action components
+// <npt-icon-button>, <npt-fab>, <npt-segmented-button> + <npt-segmented-option>.
+// Logical layout → mirrors in RTL. Custom-property driven only.
+import { NptElement, css, html, A11Y } from "./base.js";
+const esc = (v) => (v ?? "").replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+/**
+ * <npt-icon-button variant="standard|filled|tonal|outlined" [selected] [disabled]
+ *   label="Favourite">★</npt-icon-button>
+ * 48dp circular target. `selected` toggles the active treatment.
+ */
+export class NptIconButton extends NptElement {
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.update();
+    }
+    styles() {
+        return css `
+      ${A11Y}
+      :host {
+        display: inline-block;
+      }
+      button {
+        inline-size: 48px;
+        block-size: 48px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border: none;
+        border-radius: var(--npt-corner-full, 999px);
+        cursor: pointer;
+        background: transparent;
+        color: var(--md-sys-color-on-surface-variant);
+        font-family: var(--npt-font-text);
+        font-size: var(--npt-text-title, 18px);
+        transition: background-color var(--npt-dur-fast, 200ms) var(--npt-ease-standard, ease),
+          color var(--npt-dur-fast, 200ms) var(--npt-ease-standard, ease);
+      }
+      button:disabled {
+        cursor: not-allowed;
+        opacity: 0.38;
+      }
+      :host([variant="filled"]) button {
+        background: var(--md-sys-color-surface-container-highest);
+        color: var(--md-sys-color-primary);
+      }
+      :host([variant="filled"][selected]) button {
+        background: var(--md-sys-color-primary);
+        color: var(--md-sys-color-on-primary);
+      }
+      :host([variant="tonal"]) button {
+        background: var(--md-sys-color-secondary-container);
+        color: var(--md-sys-color-on-secondary-container);
+      }
+      :host([variant="tonal"][selected]) button {
+        background: var(--md-sys-color-secondary);
+        color: var(--md-sys-color-on-secondary);
+      }
+      :host([variant="outlined"]) button {
+        border: 1px solid var(--md-sys-color-outline);
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      :host([variant="outlined"][selected]) button {
+        background: var(--md-sys-color-inverse-surface);
+        color: var(--md-sys-color-inverse-on-surface);
+        border-color: transparent;
+      }
+      :host(:not([variant])[selected]) button,
+      :host([variant="standard"][selected]) button {
+        color: var(--md-sys-color-primary);
+      }
+    `;
+    }
+    render() {
+        const disabled = this.hasAttribute("disabled") ? "disabled" : "";
+        const pressed = this.hasAttribute("selected") ? "true" : "false";
+        const label = esc(this.getAttribute("label"));
+        return html `<button
+      part="button"
+      ${disabled}
+      aria-pressed="${pressed}"
+      aria-label="${label}"
+    ><slot></slot></button>`;
+    }
+}
+NptIconButton.observedAttributes = ["variant", "selected", "disabled", "label"];
+/**
+ * <npt-fab size="sm|md|lg" [extended] label="Compose" [disabled]>＋</npt-fab>
+ * Primary-container floating action. `extended` reveals the text label.
+ */
+export class NptFab extends NptElement {
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.update();
+    }
+    styles() {
+        return css `
+      ${A11Y}
+      :host {
+        display: inline-block;
+      }
+      button {
+        min-inline-size: 56px;
+        min-block-size: 56px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--npt-space-3, 12px);
+        border: none;
+        border-radius: var(--npt-corner-lg, 24px);
+        cursor: pointer;
+        padding-inline: var(--npt-space-4, 16px);
+        background: var(--md-sys-color-primary-container);
+        color: var(--md-sys-color-on-primary-container);
+        font-family: var(--npt-font-text);
+        font-size: var(--npt-text-label, 14px);
+        font-weight: 600;
+        box-shadow: var(--npt-elevation-3, 0 8px 20px rgba(0, 0, 0, 0.2));
+        transition: box-shadow var(--npt-dur-fast, 200ms) var(--npt-ease-standard, ease);
+      }
+      button:disabled {
+        cursor: not-allowed;
+        opacity: 0.38;
+      }
+      :host([size="sm"]) button {
+        min-inline-size: 40px;
+        min-block-size: 40px;
+        border-radius: var(--npt-corner-md, 16px);
+      }
+      :host([size="lg"]) button {
+        min-inline-size: 96px;
+        min-block-size: 96px;
+        border-radius: var(--npt-corner-xl, 32px);
+        font-size: var(--npt-text-title, 18px);
+      }
+      .icon {
+        display: inline-flex;
+        font-size: var(--npt-text-title, 18px);
+      }
+      .label {
+        display: none;
+      }
+      :host([extended]) .label {
+        display: inline;
+      }
+      :host([extended]) button {
+        padding-inline: var(--npt-space-5, 20px);
+      }
+    `;
+    }
+    render() {
+        const disabled = this.hasAttribute("disabled") ? "disabled" : "";
+        const label = esc(this.getAttribute("label"));
+        return html `<button part="button" ${disabled} aria-label="${label}">
+      <span class="icon"><slot></slot></span>
+      ${label ? html `<span class="label">${label}</span>` : ""}
+    </button>`;
+    }
+}
+NptFab.observedAttributes = ["size", "extended", "label", "disabled"];
+/**
+ * <npt-segmented-button [multi]> with <npt-segmented-option> children.
+ * Connected single- or multi-select group. Single-select is the default.
+ */
+export class NptSegmentedButton extends NptElement {
+    constructor() {
+        super(...arguments);
+        this.onClick = (e) => {
+            const target = e.target?.closest("npt-segmented-option");
+            if (!target || target.hasAttribute("disabled"))
+                return;
+            if (this.hasAttribute("multi")) {
+                target.toggleAttribute("selected");
+            }
+            else {
+                for (const opt of this.querySelectorAll("npt-segmented-option")) {
+                    opt.toggleAttribute("selected", opt === target);
+                }
+            }
+            this.dispatchEvent(new CustomEvent("change", { bubbles: true }));
+        };
+    }
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.update();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener("click", this.onClick);
+    }
+    disconnectedCallback() {
+        this.removeEventListener("click", this.onClick);
+    }
+    styles() {
+        return css `
+      ${A11Y}
+      :host {
+        display: inline-flex;
+      }
+      .group {
+        display: inline-flex;
+        border: 1px solid var(--md-sys-color-outline);
+        border-radius: var(--npt-corner-full, 999px);
+        overflow: hidden;
+      }
+    `;
+    }
+    render() {
+        const multi = this.hasAttribute("multi");
+        return html `<div class="group" part="group" role="group" aria-multiselectable="${multi}">
+      <slot></slot>
+    </div>`;
+    }
+}
+NptSegmentedButton.observedAttributes = ["multi"];
+/** <npt-segmented-option value="day" [selected] [disabled]>Day</npt-segmented-option> */
+export class NptSegmentedOption extends NptElement {
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.update();
+    }
+    styles() {
+        return css `
+      ${A11Y}
+      :host {
+        display: inline-flex;
+      }
+      .opt {
+        min-height: 48px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--npt-space-2, 8px);
+        padding-inline: var(--npt-space-4, 16px);
+        border: none;
+        border-inline-start: 1px solid var(--md-sys-color-outline);
+        background: transparent;
+        color: var(--md-sys-color-on-surface);
+        cursor: pointer;
+        font-family: var(--npt-font-text);
+        font-size: var(--npt-text-label, 14px);
+        transition: background-color var(--npt-dur-fast, 200ms) var(--npt-ease-standard, ease);
+      }
+      :host(:first-of-type) .opt {
+        border-inline-start: none;
+      }
+      :host([selected]) .opt {
+        background: var(--md-sys-color-secondary-container);
+        color: var(--md-sys-color-on-secondary-container);
+      }
+      .opt:disabled {
+        cursor: not-allowed;
+        opacity: 0.38;
+      }
+      .check {
+        display: none;
+      }
+      :host([selected]) .check {
+        display: inline;
+      }
+    `;
+    }
+    render() {
+        const selected = this.hasAttribute("selected");
+        const disabled = this.hasAttribute("disabled") ? "disabled" : "";
+        return html `<button
+      class="opt"
+      part="option"
+      role="button"
+      aria-pressed="${selected}"
+      ${disabled}
+    >
+      <span class="check" aria-hidden="true">✓</span>
+      <slot></slot>
+    </button>`;
+    }
+}
+NptSegmentedOption.observedAttributes = ["selected", "disabled", "value"];
+//# sourceMappingURL=actions.js.map

package/dist/components/actions.js.map

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

package/dist/components/button.d.ts

@@ -1,6 +1,6 @@
 import { NptElement } from "./base.js";
 /**
- * <npt-button variant="filled|tonal|outlined|text" [disabled]>Label</npt-button>
+ * <npt-button variant="filled|elevated|tonal|outlined|text" [disabled]>Label</npt-button>
  * M3 Expressive button. Pill shape, brand-tinted, 48dp min target.
  */
 export declare class NptButton extends NptElement {

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

@@ -1 +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"}
+{"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;IA6D1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAI3B"}

package/dist/components/button.js

@@ -1,7 +1,7 @@
 // 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>
+ * <npt-button variant="filled|elevated|tonal|outlined|text" [disabled]>Label</npt-button>
  * M3 Expressive button. Pill shape, brand-tinted, 48dp min target.
  */
 export class NptButton extends NptElement {
@@ -45,6 +45,14 @@ export class NptButton extends NptElement {
       :host(:not([variant])) button:hover:not(:disabled) {
         box-shadow: var(--npt-elevation-1, 0 1px 3px rgba(0, 0, 0, 0.2));
       }
+      :host([variant="elevated"]) button {
+        background: var(--md-sys-color-surface-container-low);
+        color: var(--md-sys-color-primary);
+        box-shadow: var(--npt-elevation-1, 0 1px 3px rgba(0, 0, 0, 0.2));
+      }
+      :host([variant="elevated"]) button:hover:not(:disabled) {
+        box-shadow: var(--npt-elevation-2, 0 2px 6px rgba(0, 0, 0, 0.18));
+      }
       :host([variant="tonal"]) button {
         background: var(--md-sys-color-secondary-container);
         color: var(--md-sys-color-on-secondary-container);

package/dist/components/button.js.map

@@ -1 +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"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwDP,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;;AAtEM,4BAAkB,GAAG,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC"}

package/dist/components/cards.d.ts

@@ -0,0 +1,64 @@
+import { NptElement } from "./base.js";
+/**
+ * <npt-card-art holder="A. KELLER" last4="4821" expiry="08/29" scheme="VISA"
+ *   variant="virtual|physical|frozen"><span slot="brand">◈</span></npt-card-art>
+ * Payment-card visual on the brand gradient. `scheme` is a plain label; provide a
+ * brand mark via the `brand` slot (top-trailing). [frozen] dims and shows a frozen
+ * affordance. Card number digits use tabular figures.
+ */
+export declare class NptCardArt extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    protected styles(): string;
+    protected render(): string;
+}
+/**
+ * <npt-card-row label="Salary card" last4="4821" scheme="VISA" [interactive]>
+ *   <span slot="brand">◈</span></npt-card-row>
+ * Saved-card list item. Leading `brand` slot, trailing chevron. [interactive] makes
+ * the whole row a button (role/tabindex/hover) that emits a bubbling `select` event.
+ */
+export declare class NptCardRow extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private activate;
+    private onClick;
+    private onKey;
+    protected styles(): string;
+    protected render(): string;
+}
+/**
+ * <npt-add-card>Add a new card</npt-add-card>
+ * Dashed call-to-action tile with a leading +. Behaves as a button (role/tabindex)
+ * and emits a bubbling `add` event on click / Enter / Space.
+ */
+export declare class NptAddCard extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private activate;
+    private onClick;
+    private onKey;
+    protected styles(): string;
+    protected render(): string;
+}
+/**
+ * <npt-card-controls [frozen]></npt-card-controls>
+ * Row of toggle actions (Freeze, Limits, Details, PIN). Each press dispatches a
+ * bubbling `control` event whose detail is { action }. [frozen] flips the first
+ * action's label/affordance to Unfreeze.
+ */
+export declare class NptCardControls extends NptElement {
+    static observedAttributes: string[];
+    private static readonly ACTIONS;
+    attributeChangedCallback(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private onClick;
+    protected styles(): string;
+    protected render(): string;
+}
+//# sourceMappingURL=cards.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cards.d.ts","sourceRoot":"","sources":["../../src/components/cards.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAA2B,MAAM,WAAW,CAAC;AAKhE;;;;;;GAMG;AACH,qBAAa,UAAW,SAAQ,UAAU;IACxC,MAAM,CAAC,kBAAkB,WAAsD;IAE/E,wBAAwB,IAAI,IAAI;IAIhC,SAAS,CAAC,MAAM,IAAI,MAAM;IAkH1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAyB3B;AAED;;;;;GAKG;AACH,qBAAa,UAAW,SAAQ,UAAU;IACxC,MAAM,CAAC,kBAAkB,WAA+C;IAExE,wBAAwB,IAAI,IAAI;IAIvB,iBAAiB,IAAI,IAAI;IAMlC,oBAAoB,IAAI,IAAI;IAK5B,OAAO,CAAC,QAAQ;IAKhB,OAAO,CAAC,OAAO,CAA+B;IAC9C,OAAO,CAAC,KAAK,CAMX;IAEF,SAAS,CAAC,MAAM,IAAI,MAAM;IA4E1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAmB3B;AAED;;;;GAIG;AACH,qBAAa,UAAW,SAAQ,UAAU;IACxC,MAAM,CAAC,kBAAkB,WAAgB;IAEzC,wBAAwB,IAAI,IAAI;IAIvB,iBAAiB,IAAI,IAAI;IAMlC,oBAAoB,IAAI,IAAI;IAK5B,OAAO,CAAC,QAAQ;IAKhB,OAAO,CAAC,OAAO,CAA+B;IAC9C,OAAO,CAAC,KAAK,CAKX;IAEF,SAAS,CAAC,MAAM,IAAI,MAAM;IAsD1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAc3B;AAED;;;;;GAKG;AACH,qBAAa,eAAgB,SAAQ,UAAU;IAC7C,MAAM,CAAC,kBAAkB,WAAc;IAEvC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,OAAO,CAK7B;IAEF,wBAAwB,IAAI,IAAI;IAIvB,iBAAiB,IAAI,IAAI;IAKlC,oBAAoB,IAAI,IAAI;IAI5B,OAAO,CAAC,OAAO,CAMb;IAEF,SAAS,CAAC,MAAM,IAAI,MAAM;IA8C1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAmB3B"}