@namiml/web-sdk 1.7.3 → 1.7.4

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Nami Web SDK Changelog
 
+## 1.7.4
+**Release Date:** October 30, 2025
+
+### Bug Fixes
+- Fix an issue where if device registration failed, user was stuck in anonymous mode
+
+### Enhancements
+- Support for legacy browsers
+
 ## 1.7.3
 **Release Date:** October 13, 2025
 

package/README.md

@@ -32,3 +32,26 @@ yarn add @namiml/web-sdk
 Example apps showing how to use the SDK are available in our [Nami Web SDK repo](https://github.com/namiml/nami-web-sdk).
 
 More information on configuring and using the SDK is available in our docs at [https://learn.namiml.com](https://learn.namiml.com).
+
+## Legacy support
+
+To support older browsers, import our side-effect module before you import the SDK. It installs the necessary polyfills and shims, allowing the main entry point to stay the same for every app.
+
+- ESM:
+  ```js
+  import '@namiml/web-sdk/legacy-support';
+  import { Nami } from '@namiml/web-sdk';
+  ```
+- CommonJS:
+  ```js
+  require('@namiml/web-sdk/legacy-support');
+  const { Nami } = require('@namiml/web-sdk');
+  ```
+
+Modern apps that do not target legacy environments can simply import the default entry:
+
+```js
+import { Nami } from '@namiml/web-sdk';
+```
+
+This keeps the modern bundle slim, while letting you opt into additional support only when you need it.

package/dist/components/ContextProvider.d.ts

@@ -7,8 +7,9 @@ import { TDevice } from '../types/device';
 import { Callback } from '../types/components/containers';
 import type { NamiFlow } from '../nami/flow/NamiFlow';
 import { NamiPaywallEvent, NamiPaywallLaunchContext } from '../types/externals/paywall';
+import { SimpleEventTarget } from '../utils/simple-event-target';
 export declare const initialState: TPaywallContext;
-export declare class PaywallContextProvider extends EventTarget implements ReactiveController {
+export declare class PaywallContextProvider extends SimpleEventTarget implements ReactiveController {
     static providers: PaywallContextProvider[];
     host: ReactiveControllerHost | null;
     state: TPaywallContext;

package/dist/components/NamiElement.d.ts

@@ -1,22 +1,28 @@
-import { CSSResult, LitElement, PropertyValueMap } from "lit";
+import { CSSResult, CSSResultGroup, LitElement, PropertyValueMap } from "lit";
 import ContextConsumer from "./ContextConsumer";
 import { PaywallContextProvider } from "./ContextProvider";
 import { TBaseComponent } from "../types/components";
 export declare class NamiElementBase extends LitElement {
+    static styles: CSSResultGroup;
     contextConsumer: ContextConsumer;
     contextProvider: PaywallContextProvider;
+    private _instanceStyleSheet?;
+    private _instanceStyleElement?;
     constructor();
     protected styles(): CSSResult;
     createRenderRoot(): HTMLElement | DocumentFragment;
     protected shouldUpdate(): boolean;
     protected willUpdate(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     disconnectedCallback(): void;
+    protected getInstanceStyles(): CSSResult[];
+    private ensureInstanceStyleTarget;
+    private applyInstanceStyles;
 }
 export declare abstract class NamiElement<C extends TBaseComponent = TBaseComponent> extends NamiElementBase {
+    static styles: CSSResultGroup;
     contextConsumer: ContextConsumer;
     contextProvider: PaywallContextProvider;
     abstract component: C;
-    createRenderRoot(): HTMLElement | DocumentFragment;
-    protected willUpdate(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     protected animationStyles(): CSSResult;
+    protected getInstanceStyles(): CSSResult[];
 }

package/dist/components/containers/Container.d.ts

@@ -8,7 +8,12 @@ export declare class NamiContainer extends NamiElement {
     inFocusedState: boolean;
     scaleFactor: number;
     minSDKVersion: TSemverObj;
+    private readonly handleFocusIn;
+    private readonly handleFocusOut;
+    private readonly handleFocusChanged;
     constructor();
+    disconnectedCallback(): void;
     protected styles(): CSSResult;
     render(): any[];
+    private setFocusState;
 }

package/dist/components/utils/styles.d.ts

@@ -4,6 +4,8 @@ import type { TSegmentPickerItem, TTextLikeComponent } from "../../types/compone
 import type { TSemverObj } from "../../utils/parsers";
 export declare function parseSize(value: string | number, scaleFactor: number): string;
 export declare function backgroundColor(value: string, fallback?: string): string;
+export declare function filteredBorderColor(value: string, fallback?: string): string;
+export declare function filteredTextColor(value: string, fallback?: string): string;
 export declare function pickAndApplyBackgroundColor(component: TBaseComponent, inFocusedState?: boolean): string;
 export declare function flexDirection({ direction }: TBaseComponent): string;
 export declare function alignAndJustifyItems(component: TBaseComponent): string;