@tatchi-xyz/sdk 0.21.0 → 0.31.1

package/dist/esm/react/src/core/WebAuthnManager/LitComponents/LitElementWithProps.js

@@ -0,0 +1,258 @@
+import { isObject } from "../../../utils/validation.js";
+import { LitElement } from "lit";
+
+//#region src/core/WebAuthnManager/LitComponents/LitElementWithProps.ts
+const hasAdoptedStyleSheets = (node) => !!node && typeof node === "object" && "adoptedStyleSheets" in node;
+const supportsConstructableStylesheets = () => typeof CSSStyleSheet !== "undefined" && "replaceSync" in CSSStyleSheet.prototype;
+/**
+* Drop-in replacement for LitElement that automatically handles the custom element upgrade race.
+* See lit-element-with-props.md for more details.
+* All properties defined in static properties will be automatically upgraded on mount.
+*/
+var LitElementWithProps = class extends LitElement {
+	_varsSheet = null;
+	_varsMap = {};
+	_varsDocSheet = null;
+	_varsClassName = null;
+	/**
+	* Optional: Subclasses can provide a list of imported custom element classes they rely on
+	* to prevent bundlers from tree-shaking those definitions when they are only used
+	* through side effects (e.g., nested custom elements inside templates).
+	* Example usage in a subclass:
+	*   import TxTree from '../TxTree';
+	*   static keepDefinitions = [TxTree];
+	*/
+	static keepDefinitions;
+	/**
+	* Optional: Tag names that should be defined before this component renders.
+	* When missing, a console.warn is emitted to remind developers to import/keep the child.
+	* Example:
+	*   static requiredChildTags = ['w3a-tx-tree'];
+	*/
+	static requiredChildTags;
+	/**
+	* When true, missing requiredChildTags trigger a thrown Error (instead of a warn).
+	* Useful in development to fail fast when a nested custom element definition
+	* has been tree‑shaken or not imported.
+	*/
+	static strictChildDefinitions;
+	/**
+	* Handles the custom element upgrade race for a specific property.
+	* This method ensures that any property values set before the custom element
+	* fully upgrades are correctly re-applied through Lit's property system.
+	* @param prop - The property name to upgrade
+	*/
+	upgradeProperty(prop) {
+		if (Object.prototype.hasOwnProperty.call(this, prop)) {
+			const selfRead = this;
+			const value = selfRead[prop];
+			delete selfRead[prop];
+			this[prop] = value;
+		}
+	}
+	/**
+	* Automatically upgrades all properties defined in static properties.
+	* Called automatically in connectedCallback - no manual intervention needed.
+	*/
+	upgradeAllProperties() {
+		const constructor = this.constructor;
+		const properties = constructor.properties;
+		if (properties) {
+			const propertyNames = properties instanceof Map ? Array.from(properties.keys()) : Object.keys(properties);
+			propertyNames.forEach((prop) => this.upgradeProperty(prop));
+		}
+	}
+	/**
+	* Generic styles property for component customization.
+	* Subclasses can override this with their specific style types.
+	*/
+	styles;
+	/**
+	* Lit lifecycle: Called when element is added to DOM.
+	* Automatically upgrades all defined properties to handle the upgrade race.
+	*/
+	connectedCallback() {
+		super.connectedCallback();
+		this.upgradeAllProperties();
+		if (this.styles) this.applyStyles(this.styles, this.getComponentPrefix());
+		try {
+			const ctor = this.constructor;
+			const { keepDefinitions, requiredChildTags, strictChildDefinitions } = ctor;
+			const defs = keepDefinitions;
+			if (defs && defs.length) for (const d of defs);
+			const req = requiredChildTags;
+			if (req && Array.isArray(req)) for (const tag of req) try {
+				if (typeof tag === "string" && tag.includes("-") && !customElements.get(tag)) {
+					const msg = `[W3A] Required child custom element not defined: <${tag}>. Import the module that defines it and keep a reference via \`static keepDefinitions\` or a private field to avoid tree-shaking. See LitComponents/README.md (tree-shake checklist).`;
+					if (strictChildDefinitions) throw new Error(msg);
+					else console.error(msg);
+				}
+			} catch (err) {
+				if (strictChildDefinitions) throw err;
+			}
+		} catch {}
+	}
+	/**
+	* Override this method in subclasses to return the appropriate component prefix
+	* for CSS variable naming (e.g., 'tree', 'modal', 'button').
+	*/
+	getComponentPrefix() {
+		return "component";
+	}
+	/**
+	* Applies component styles by translating a structured style object into
+	* CSS custom properties (variables) — never inline styles.
+	*
+	* CSP notes
+	* - No style="…" attributes are written (compatible with style-src-attr 'none').
+	* - No <style> tags are injected. Variables are applied via constructable
+	*   stylesheets (adoptedStyleSheets). When unavailable, we fall back to a
+	*   document-level constructable sheet with a per-instance class. If even
+	*   that is not supported, we no-op and rely on external CSS defaults.
+	*
+	* How it works
+	* - Flattens top-level tokens (e.g., colors, radii) to canonical CSS vars
+	*   (e.g., --w3a-colors-*, --w3a-border-radius-*).
+	* - Transforms viewport units to dvh/dvw on capable engines to avoid
+	*   Safari 100vh issues.
+	* - Maps sectioned styles (nested objects) to namespaced variables of the
+	*   form --w3a-${prefix}__${section}__${prop} to scope tokens per-component.
+	* - Delegates to setCssVars(), which merges vars and updates the appropriate
+	*   constructable stylesheet target (ShadowRoot preferred).
+	*
+	* @param styles - The styles object to apply
+	* @param componentPrefix - Optional component prefix override, defaults to getComponentPrefix()
+	*/
+	applyStyles(styles, componentPrefix) {
+		if (!styles) return;
+		const prefix = componentPrefix || this.getComponentPrefix();
+		const vars = {};
+		const setVar = (name, val) => {
+			vars[name] = val;
+		};
+		const toKebab = (s) => this.camelToKebab(s);
+		const transformViewportUnits = (val) => {
+			if (!val || typeof val !== "string") return val;
+			try {
+				const canUseCssSupports = typeof CSS !== "undefined" && typeof CSS.supports === "function";
+				const supportsDvh = canUseCssSupports && CSS.supports("height", "1dvh");
+				const supportsDvw = canUseCssSupports && CSS.supports("width", "1dvw");
+				let out = val;
+				if (supportsDvh && out.includes("vh")) out = out.replace(/([0-9]+(?:\.[0-9]+)?)vh\b/g, "$1dvh");
+				if (supportsDvw && out.includes("vw")) out = out.replace(/([0-9]+(?:\.[0-9]+)?)vw\b/g, "$1dvw");
+				return out;
+			} catch {
+				return val;
+			}
+		};
+		const colorMappings = {
+			colorSecondary: "--w3a-colors-secondary",
+			colorSuccess: "--w3a-colors-success",
+			colorWarning: "--w3a-colors-warning",
+			colorError: "--w3a-colors-error",
+			colorBackground: "--w3a-colors-colorBackground",
+			surface: "--w3a-colors-surface",
+			surface2: "--w3a-colors-surface2",
+			surface3: "--w3a-colors-surface3",
+			borderPrimary: "--w3a-colors-borderPrimary",
+			borderSecondary: "--w3a-colors-borderSecondary",
+			borderHover: "--w3a-colors-borderHover",
+			textPrimary: "--w3a-colors-textPrimary",
+			textSecondary: "--w3a-colors-textSecondary",
+			textMuted: "--w3a-colors-textMuted"
+		};
+		const radiusMatcher = /^radius([A-Z].*)$/;
+		const shadowMatcher = /^shadow([A-Z].*)$/;
+		Object.entries(styles).forEach(([key, value]) => {
+			if (typeof value !== "string") return;
+			const maybeTransformed = transformViewportUnits(value);
+			if (key in colorMappings) {
+				setVar(colorMappings[key], maybeTransformed);
+				return;
+			}
+			const r = key.match(radiusMatcher);
+			if (r) {
+				setVar(`--w3a-border-radius-${r[1].toLowerCase()}`, maybeTransformed);
+				return;
+			}
+			const s = key.match(shadowMatcher);
+			if (s) {
+				setVar(`--w3a-shadows-${s[1].toLowerCase()}`, maybeTransformed);
+				return;
+			}
+			setVar(`--w3a-${toKebab(key)}`, maybeTransformed);
+		});
+		Object.entries(styles).forEach(([section, sectionStyles]) => {
+			if (sectionStyles && isObject(sectionStyles)) Object.entries(sectionStyles).forEach(([prop, value]) => {
+				const kebabSection = toKebab(section);
+				const kebabProp = toKebab(prop);
+				const cssVarNew = `--w3a-${prefix}__${kebabSection}__${kebabProp}`;
+				const v = typeof value === "string" ? transformViewportUnits(value) : String(value);
+				vars[cssVarNew] = v;
+			});
+		});
+		this.setCssVars(vars);
+	}
+	/**
+	* Converts camelCase strings to kebab-case for CSS variables
+	*/
+	camelToKebab(str) {
+		return str.replace(/([A-Z])/g, "-$1").toLowerCase();
+	}
+	/** Merge and apply CSS variables via adopted stylesheets only (no inline style attr). */
+	setCssVars(vars) {
+		try {
+			for (const [k, v] of Object.entries(vars)) {
+				if (v == null) continue;
+				this._varsMap[k] = String(v);
+			}
+			const decls = Object.entries(this._varsMap).map(([k, v]) => `${k}: ${v};`).join(" ");
+			const cssTextShadow = `:host{ ${decls} }`;
+			const canUseConstructable = supportsConstructableStylesheets();
+			if (this.renderRoot instanceof ShadowRoot && canUseConstructable && hasAdoptedStyleSheets(this.renderRoot)) {
+				if (!this._varsSheet) this._varsSheet = new CSSStyleSheet();
+				try {
+					this._varsSheet.replaceSync(cssTextShadow);
+				} catch {}
+				const sheets = this.renderRoot.adoptedStyleSheets ?? [];
+				const without = sheets.filter((sheet) => sheet !== this._varsSheet);
+				this.renderRoot.adoptedStyleSheets = [...without, this._varsSheet];
+				return;
+			}
+			const rootNode = this.getRootNode?.();
+			const doc = rootNode instanceof Document ? rootNode : document;
+			const cssTextScoped = () => {
+				if (!this._varsClassName) {
+					this._varsClassName = `w3a-vars-${Math.random().toString(36).slice(2)}`;
+					try {
+						this.classList.add(this._varsClassName);
+					} catch {}
+				}
+				return `.${this._varsClassName}{ ${decls} }`;
+			};
+			if (rootNode && canUseConstructable && hasAdoptedStyleSheets(rootNode)) {
+				if (!this._varsDocSheet) this._varsDocSheet = new CSSStyleSheet();
+				try {
+					this._varsDocSheet.replaceSync(cssTextScoped());
+				} catch {}
+				const srSheets = rootNode.adoptedStyleSheets ?? [];
+				if (!srSheets.includes(this._varsDocSheet)) rootNode.adoptedStyleSheets = [...srSheets, this._varsDocSheet];
+				return;
+			}
+			const docSupportsConstructable = canUseConstructable && hasAdoptedStyleSheets(doc);
+			if (docSupportsConstructable) {
+				if (!this._varsDocSheet) this._varsDocSheet = new CSSStyleSheet();
+				try {
+					this._varsDocSheet.replaceSync(cssTextScoped());
+				} catch {}
+				const current = doc.adoptedStyleSheets ?? [];
+				if (!current.includes(this._varsDocSheet)) doc.adoptedStyleSheets = [...current, this._varsDocSheet];
+				return;
+			}
+		} catch {}
+	}
+};
+
+//#endregion
+export { LitElementWithProps };
+//# sourceMappingURL=LitElementWithProps.js.map

package/dist/esm/react/src/core/WebAuthnManager/LitComponents/LitElementWithProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LitElementWithProps.js","names":["vars: Record<string, string>","colorMappings: Record<string, string>"],"sources":["../../../../../../../src/core/WebAuthnManager/LitComponents/LitElementWithProps.ts"],"sourcesContent":["/**\n * Lit Component Property Upgrade Pattern\n *\n * Problem: The custom element upgrade race can silently drop properties set\n * on elements before the browser upgrades them from HTMLElement to the custom\n * class. Timeline: createElement → set props → append → upgrade → Lit init →\n * defaults overwrite early props.\n *\n * Solution: upgradeProperty pattern. On connectedCallback, for each declared\n * property, if a plain own-property value exists (set before upgrade), delete\n * the data property and reassign via the class setter to trigger Lit reactivity.\n *\n * This class implements that pattern and adds a few developer affordances:\n * - keepDefinitions: prevent treeshaking of nested custom elements used only\n *   through side-effects in templates by touching their constructors.\n * - requiredChildTags (+strictChildDefinitions): dev-time checks to surface\n *   missing nested element definitions early with a loud console.error or Error.\n * - applyStyles(): map style objects to CSS variables, including section-scoped\n *   tokens and viewport unit normalization (vh→dvh, vw→dvw when supported).\n *\n */\n\nimport { LitElement } from 'lit';\nimport { isObject } from '@/utils/validation';\n\nexport type CSSProperties = Record<string, string | Record<string, string> | undefined>;\n\ntype KeepDefinition = CustomElementConstructor;\n\ninterface LitElementWithPropsStatics {\n  keepDefinitions?: ReadonlyArray<KeepDefinition>;\n  requiredChildTags?: ReadonlyArray<string>;\n  strictChildDefinitions?: boolean;\n}\n\ninterface AdoptedStyleSheetsOwner {\n  adoptedStyleSheets: CSSStyleSheet[];\n}\n\nconst hasAdoptedStyleSheets = (node: unknown): node is AdoptedStyleSheetsOwner =>\n  !!node && typeof node === 'object' && 'adoptedStyleSheets' in node;\n\nconst supportsConstructableStylesheets = (): boolean =>\n  typeof CSSStyleSheet !== 'undefined' && 'replaceSync' in CSSStyleSheet.prototype;\n\n/**\n * Drop-in replacement for LitElement that automatically handles the custom element upgrade race.\n * See lit-element-with-props.md for more details.\n * All properties defined in static properties will be automatically upgraded on mount.\n */\nexport class LitElementWithProps extends LitElement {\n  // Per-instance CSS custom properties sheet to avoid inline style mutations.\n  private _varsSheet: CSSStyleSheet | null = null;\n  private _varsMap: Record<string, string> = {};\n  // Fallback sheet attached to the Document (constructable stylesheet) + a per-instance class\n  private _varsDocSheet: CSSStyleSheet | null = null;\n  private _varsClassName: string | null = null;\n  // No inline style capability check: components never write inline styles.\n\n  /**\n   * Optional: Subclasses can provide a list of imported custom element classes they rely on\n   * to prevent bundlers from tree-shaking those definitions when they are only used\n   * through side effects (e.g., nested custom elements inside templates).\n   * Example usage in a subclass:\n   *   import TxTree from '../TxTree';\n   *   static keepDefinitions = [TxTree];\n   */\n  static keepDefinitions?: ReadonlyArray<KeepDefinition>;\n\n  /**\n   * Optional: Tag names that should be defined before this component renders.\n   * When missing, a console.warn is emitted to remind developers to import/keep the child.\n   * Example:\n   *   static requiredChildTags = ['w3a-tx-tree'];\n   */\n  static requiredChildTags?: ReadonlyArray<string>;\n\n  /**\n   * When true, missing requiredChildTags trigger a thrown Error (instead of a warn).\n   * Useful in development to fail fast when a nested custom element definition\n   * has been tree‑shaken or not imported.\n   */\n  static strictChildDefinitions?: boolean;\n\n  /**\n   * Handles the custom element upgrade race for a specific property.\n   * This method ensures that any property values set before the custom element\n   * fully upgrades are correctly re-applied through Lit's property system.\n   * @param prop - The property name to upgrade\n   */\n  private upgradeProperty(prop: string): void {\n    if (Object.prototype.hasOwnProperty.call(this, prop)) {\n      // Capture the value that was set before upgrade\n      const selfRead = this as Record<string, unknown>;\n      const value = selfRead[prop];\n\n      // Remove the property so the class getter/setter takes over\n      delete selfRead[prop];\n\n      // Re-assign through the proper setter to trigger Lit's reactivity\n      (this as Record<string, unknown>)[prop] = value;\n    }\n  }\n\n  /**\n   * Automatically upgrades all properties defined in static properties.\n   * Called automatically in connectedCallback - no manual intervention needed.\n   */\n  private upgradeAllProperties(): void {\n    const constructor = this.constructor as typeof LitElement;\n    const properties = constructor.properties;\n\n    if (properties) {\n      // Handle both object syntax and Map syntax\n      const propertyNames = properties instanceof Map\n        ? Array.from(properties.keys())\n        : Object.keys(properties);\n\n      propertyNames.forEach(prop => this.upgradeProperty(prop));\n    }\n  }\n\n  /**\n   * Generic styles property for component customization.\n   * Subclasses can override this with their specific style types.\n   */\n  styles?: ComponentStyles;\n\n  /**\n   * Lit lifecycle: Called when element is added to DOM.\n   * Automatically upgrades all defined properties to handle the upgrade race.\n   */\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.upgradeAllProperties();\n\n    // Apply styles if they exist\n    if (this.styles) {\n      this.applyStyles(this.styles, this.getComponentPrefix());\n    }\n\n    // No global token side-effects here; components read tokens from host/theme CSS\n\n    // Ensure referenced definitions are kept by bundlers (touch the values)\n    try {\n      const ctor = this.constructor as typeof LitElementWithProps & LitElementWithPropsStatics;\n      const { keepDefinitions, requiredChildTags, strictChildDefinitions } = ctor;\n      const defs = keepDefinitions;\n      if (defs && defs.length) {\n        // Touch each value to prevent tree-shaking of side-effect-only imports\n        for (const d of defs) void d;\n      }\n\n      // Dev-time reminder when nested custom elements are not defined\n      const req = requiredChildTags;\n      if (req && Array.isArray(req)) {\n        for (const tag of req) {\n          try {\n            if (typeof tag === 'string' && tag.includes('-') && !customElements.get(tag)) {\n              const msg = `[W3A] Required child custom element not defined: <${tag}>. ` +\n                'Import the module that defines it and keep a reference via `static keepDefinitions` ' +\n                'or a private field to avoid tree-shaking. See LitComponents/README.md (tree-shake checklist).';\n              if (strictChildDefinitions) {\n                throw new Error(msg);\n              } else {\n                // Elevate to error for visibility without breaking execution\n                console.error(msg);\n              }\n            }\n          } catch (err) {\n            // In strict mode, surface the failure to developers immediately\n            if (strictChildDefinitions) { throw err; }\n          }\n        }\n      }\n    } catch {}\n  }\n\n  /**\n   * Override this method in subclasses to return the appropriate component prefix\n   * for CSS variable naming (e.g., 'tree', 'modal', 'button').\n   */\n  protected getComponentPrefix(): string {\n    return 'component';\n  }\n\n  /**\n   * Applies component styles by translating a structured style object into\n   * CSS custom properties (variables) — never inline styles.\n   *\n   * CSP notes\n   * - No style=\"…\" attributes are written (compatible with style-src-attr 'none').\n   * - No <style> tags are injected. Variables are applied via constructable\n   *   stylesheets (adoptedStyleSheets). When unavailable, we fall back to a\n   *   document-level constructable sheet with a per-instance class. If even\n   *   that is not supported, we no-op and rely on external CSS defaults.\n   *\n   * How it works\n   * - Flattens top-level tokens (e.g., colors, radii) to canonical CSS vars\n   *   (e.g., --w3a-colors-*, --w3a-border-radius-*).\n   * - Transforms viewport units to dvh/dvw on capable engines to avoid\n   *   Safari 100vh issues.\n   * - Maps sectioned styles (nested objects) to namespaced variables of the\n   *   form --w3a-${prefix}__${section}__${prop} to scope tokens per-component.\n   * - Delegates to setCssVars(), which merges vars and updates the appropriate\n   *   constructable stylesheet target (ShadowRoot preferred).\n   *\n   * @param styles - The styles object to apply\n   * @param componentPrefix - Optional component prefix override, defaults to getComponentPrefix()\n   */\n  protected applyStyles(styles: ComponentStyles, componentPrefix?: string): void {\n    if (!styles) return;\n\n    const prefix = componentPrefix || this.getComponentPrefix();\n    const vars: Record<string, string> = {};\n    const setVar = (name: string, val: string) => { vars[name] = val; };\n    const toKebab = (s: string) => this.camelToKebab(s);\n\n    // Prefer dynamic viewport units on capable browsers to avoid Safari 100vh/100vw issues\n    const transformViewportUnits = (val: string): string => {\n      if (!val || typeof val !== 'string') return val;\n      try {\n        const canUseCssSupports = typeof CSS !== 'undefined' && typeof CSS.supports === 'function';\n        const supportsDvh = canUseCssSupports && CSS.supports('height', '1dvh');\n        const supportsDvw = canUseCssSupports && CSS.supports('width', '1dvw');\n        let out = val;\n        if (supportsDvh && out.includes('vh')) {\n          // Replace numeric vh occurrences (e.g., 50vh, calc(100vh - 1rem)) with dvh\n          out = out.replace(/([0-9]+(?:\\.[0-9]+)?)vh\\b/g, '$1dvh');\n        }\n        if (supportsDvw && out.includes('vw')) {\n          out = out.replace(/([0-9]+(?:\\.[0-9]+)?)vw\\b/g, '$1dvw');\n        }\n        return out;\n      } catch {\n        return val;\n      }\n    };\n\n    // Map known tokens to canonical CSS variables\n    const colorMappings: Record<string, string> = {\n      colorSecondary: '--w3a-colors-secondary',\n      colorSuccess: '--w3a-colors-success',\n      colorWarning: '--w3a-colors-warning',\n      colorError: '--w3a-colors-error',\n      colorBackground: '--w3a-colors-colorBackground',\n      surface: '--w3a-colors-surface',\n      surface2: '--w3a-colors-surface2',\n      surface3: '--w3a-colors-surface3',\n      borderPrimary: '--w3a-colors-borderPrimary',\n      borderSecondary: '--w3a-colors-borderSecondary',\n      borderHover: '--w3a-colors-borderHover',\n      textPrimary: '--w3a-colors-textPrimary',\n      textSecondary: '--w3a-colors-textSecondary',\n      textMuted: '--w3a-colors-textMuted',\n    };\n\n    const radiusMatcher = /^radius([A-Z].*)$/;\n    const shadowMatcher = /^shadow([A-Z].*)$/;\n\n    Object.entries(styles).forEach(([key, value]) => {\n      if (typeof value !== 'string') return;\n\n      const maybeTransformed = transformViewportUnits(value);\n\n      if (key in colorMappings) {\n        setVar(colorMappings[key], maybeTransformed);\n        return;\n      }\n\n      const r = key.match(radiusMatcher);\n      if (r) { setVar(`--w3a-border-radius-${r[1].toLowerCase()}`, maybeTransformed); return; }\n\n      const s = key.match(shadowMatcher);\n      if (s) { setVar(`--w3a-shadows-${s[1].toLowerCase()}`, maybeTransformed); return; }\n\n      // No legacy gap variables; rely on spacing tokens only.\n      setVar(`--w3a-${toKebab(key)}`, maybeTransformed);\n    });\n\n    // Component-scoped CSS variables\n    Object.entries(styles).forEach(([section, sectionStyles]) => {\n      if (sectionStyles && isObject(sectionStyles)) {\n        Object.entries(sectionStyles).forEach(([prop, value]) => {\n          const kebabSection = toKebab(section);\n          const kebabProp = toKebab(prop);\n          const cssVarNew = `--w3a-${prefix}__${kebabSection}__${kebabProp}`;\n          const v = typeof value === 'string' ? transformViewportUnits(value) : String(value);\n          vars[cssVarNew] = v;\n        });\n      }\n    });\n\n    this.setCssVars(vars);\n  }\n\n  /**\n   * Converts camelCase strings to kebab-case for CSS variables\n   */\n  camelToKebab(str: string): string {\n    return str.replace(/([A-Z])/g, '-$1').toLowerCase();\n  }\n\n  /** Merge and apply CSS variables via adopted stylesheets only (no inline style attr). */\n  protected setCssVars(vars: Record<string, string>): void {\n    try {\n      // Merge new vars\n      for (const [k, v] of Object.entries(vars)) {\n        if (v == null) continue;\n        this._varsMap[k] = String(v);\n      }\n      const decls = Object.entries(this._varsMap)\n        .map(([k, v]) => `${k}: ${v};`)\n        .join(' ');\n\n      const cssTextShadow = `:host{ ${decls} }`;\n      const canUseConstructable = supportsConstructableStylesheets();\n\n      // 1) Preferred: ShadowRoot adopted stylesheets\n      if (this.renderRoot instanceof ShadowRoot && canUseConstructable && hasAdoptedStyleSheets(this.renderRoot)) {\n        if (!this._varsSheet) this._varsSheet = new CSSStyleSheet();\n        try { this._varsSheet.replaceSync(cssTextShadow); } catch {}\n        const sheets = this.renderRoot.adoptedStyleSheets ?? [];\n        // Ensure the vars sheet is last so its :host var declarations override defaults\n        const without = sheets.filter(sheet => sheet !== this._varsSheet);\n        this.renderRoot.adoptedStyleSheets = [...without, this._varsSheet];\n        return;\n      }\n\n      // 2) Fallback (still CSP-safe): Document-level constructable stylesheet with per-instance class\n      const rootNode = this.getRootNode?.();\n      const doc = rootNode instanceof Document ? rootNode : document;\n      const cssTextScoped = () => {\n        if (!this._varsClassName) {\n          this._varsClassName = `w3a-vars-${Math.random().toString(36).slice(2)}`;\n          try { this.classList.add(this._varsClassName); } catch {}\n        }\n        return `.${this._varsClassName}{ ${decls} }`;\n      };\n      // Try attaching a constructable sheet to the nearest ShadowRoot when present\n      if (rootNode && canUseConstructable && hasAdoptedStyleSheets(rootNode)) {\n        if (!this._varsDocSheet) this._varsDocSheet = new CSSStyleSheet();\n        try { this._varsDocSheet.replaceSync(cssTextScoped()); } catch {}\n        const srSheets = rootNode.adoptedStyleSheets ?? [];\n        if (!srSheets.includes(this._varsDocSheet)) {\n          rootNode.adoptedStyleSheets = [...srSheets, this._varsDocSheet];\n        }\n        return;\n      }\n      // Otherwise, attach to Document (styles won’t pierce closed shadow DOMs, but helps for light DOM cases)\n      const docSupportsConstructable = canUseConstructable && hasAdoptedStyleSheets(doc);\n      if (docSupportsConstructable) {\n        if (!this._varsDocSheet) this._varsDocSheet = new CSSStyleSheet();\n        try { this._varsDocSheet.replaceSync(cssTextScoped()); } catch {}\n        const current = doc.adoptedStyleSheets ?? [];\n        if (!current.includes(this._varsDocSheet)) {\n          doc.adoptedStyleSheets = [...current, this._varsDocSheet];\n        }\n        return;\n      }\n\n      // 3) Final fallback: no inline writes under strict CSP; rely on defaults\n    } catch {}\n  }\n}\n\n/**\n * Generic styles interface for component styling\n */\nexport interface ComponentStyles extends CSSProperties{\n  // Base design system variables\n  fontFamily?: string;\n  fontSize?: string;\n  color?: string;\n  backgroundColor?: string;\n\n  // Core color variables\n  primary?: string;\n  colorSecondary?: string;\n  colorSuccess?: string;\n  colorWarning?: string;\n  colorError?: string;\n  colorBackground?: string;\n  surface?: string;\n  surface2?: string;\n  surface3?: string;\n  borderPrimary?: string;\n  textPrimary?: string;\n  textSecondary?: string;\n\n  // Typography\n  fontSizeSm?: string;\n  fontSizeBase?: string;\n  fontSizeLg?: string;\n  fontSizeXl?: string;\n\n  // Spacing and layout\n  radiusSm?: string;\n  radiusMd?: string;\n  radiusLg?: string;\n  radiusXl?: string;\n  // Use spacing tokens via theme; no legacy gap vars\n  shadowSm?: string;\n  shadowMd?: string;\n\n  // Component-specific variables (to be extended by subclasses)\n  [key: string]: string | Record<string, string> | undefined;\n}\n"],"mappings":"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"}

package/dist/esm/react/src/core/WebAuthnManager/LitComponents/PasskeyHaloLoading/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["vars: Record<string, string>"],"sources":["../../../../../../../../src/core/WebAuthnManager/LitComponents/PasskeyHaloLoading/index.ts"],"sourcesContent":["import { html } from 'lit';\nimport { LitElementWithProps } from '../LitElementWithProps';\nimport type { HaloTheme } from '../HaloBorder';\nimport '../HaloBorder';\nimport { ensureExternalStyles } from '../css/css-loader';\n\nexport class PasskeyHaloLoadingElement extends LitElementWithProps {\n  static properties = {\n    // Pass-through HaloBorder props\n    animated: { type: Boolean },\n    theme: { type: String },\n    ringGap: { type: Number, attribute: 'ring-gap' },\n    ringWidth: { type: Number, attribute: 'ring-width' },\n    ringBorderRadius: { type: String, attribute: 'ring-border-radius' },\n    ringBorderShadow: { type: String, attribute: 'ring-border-shadow' },\n    ringBackground: { type: String, attribute: 'ring-background' },\n    padding: { type: String },\n    innerPadding: { type: String, attribute: 'inner-padding' },\n    innerBackground: { type: String, attribute: 'inner-background' },\n    // Local visual props\n    height: { type: Number },\n    width: { type: Number },\n    // Icon container overrides\n    iconContainerBorderRadius: { type: String, attribute: 'icon-container-border-radius' },\n    iconContainerBackgroundColor: { type: String, attribute: 'icon-container-background-color' },\n  } as const;\n\n  declare animated?: boolean;\n  declare theme?: HaloTheme;\n  declare ringGap?: number;\n  declare ringWidth?: number;\n  declare ringBorderRadius?: string;\n  declare ringBorderShadow?: string;\n  declare ringBackground?: string;\n  declare padding?: string;\n  declare innerPadding?: string;\n  declare innerBackground?: string;\n  declare height?: number;\n  declare width?: number;\n  declare iconContainerBorderRadius?: string;\n  declare iconContainerBackgroundColor?: string;\n\n  // Static styles removed; external stylesheet is adopted for CSP compatibility\n  private _stylesReady = false;\n  private _stylePromises: Promise<void>[] = [];\n  private _stylesAwaiting: Promise<void> | null = null;\n\n  protected createRenderRoot(): HTMLElement | DocumentFragment {\n    const root = super.createRenderRoot();\n    const p = ensureExternalStyles(root as ShadowRoot | DocumentFragment | HTMLElement, 'passkey-halo-loading.css', 'data-w3a-passkey-halo-loading-css');\n    this._stylePromises.push(p);\n    p.catch(() => {});\n    return root;\n  }\n\n  // Defer first render until external styles are adopted to avoid FOUC\n  protected shouldUpdate(_changed: Map<string | number | symbol, unknown>): boolean {\n    if (this._stylesReady) return true;\n    if (!this._stylesAwaiting) {\n      const settle = Promise.all(this._stylePromises)\n        .then(() => new Promise<void>((r) => requestAnimationFrame(() => requestAnimationFrame(() => r()))));\n      this._stylesAwaiting = settle.then(() => { this._stylesReady = true; this.requestUpdate(); });\n    }\n    return false;\n  }\n\n  protected updated(): void {\n    // Bridge prop overrides into CSS variables to avoid inline styles\n    const vars: Record<string, string> = {};\n    if (this.iconContainerBackgroundColor) {\n      vars['--w3a-modal__passkey-halo-loading-icon-container__background-color'] = this.iconContainerBackgroundColor;\n    }\n    if (this.iconContainerBorderRadius) {\n      vars['--w3a-modal__passkey-halo-loading-icon-container__border-radius'] = this.iconContainerBorderRadius;\n    }\n    if (Object.keys(vars).length) this.setCssVars(vars);\n  }\n\n  render() {\n    const theme = this.theme ?? 'light';\n    const height = this.height ?? 24;\n    const width = this.width ?? 24;\n    const animated = this.animated ?? true;\n    const ringGap = this.ringGap ?? 4;\n    const ringWidth = this.ringWidth ?? 4;\n    const ringBorderRadius = this.ringBorderRadius ?? '1.125rem';\n    const ringBorderShadow = this.ringBorderShadow;\n    const ringBackground = this.ringBackground;\n    const padding = this.padding;\n    const innerPadding = this.innerPadding ?? '4px';\n    const innerBackground = this.innerBackground;\n\n    return html`\n      <div class=\"w3a-passkey-loading-root ${theme}\">\n        <w3a-halo-border\n          .theme=${theme}\n          .animated=${animated}\n          .ringGap=${ringGap}\n          .ringWidth=${ringWidth}\n          .ringBorderRadius=${ringBorderRadius}\n          .ringBorderShadow=${ringBorderShadow}\n          .ringBackground=${ringBackground}\n          .padding=${padding}\n          .innerPadding=${innerPadding}\n          .innerBackground=${innerBackground}\n        >\n          <div class=\"w3a-passkey-loading-touch-icon-container\">\n            ${this.renderTouchIcon({ height, width })}\n          </div>\n        </w3a-halo-border>\n      </div>\n    `;\n  }\n\n  private renderTouchIcon({ height, width }: { height: number; width: number; }) {\n    const strokeWidth = 'var(--w3a-modal__passkey-halo-loading-touch-icon__stroke-width, 3)';\n\n    return html`\n      <svg\n        class=\"w3a-passkey-loading-touch-icon\"\n        width=${width}\n        height=${height}\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M6.40519 19.0481C6.58912 18.6051 6.75832 18.1545 6.91219 17.6969M14.3433 20.6926C14.6095 19.9418 14.8456 19.1768 15.0502 18.399C15.2359 17.6934 15.3956 16.9772 15.5283 16.2516M19.4477 17.0583C19.8121 15.0944 20.0026 13.0694 20.0026 11C20.0026 6.58172 16.4209 3 12.0026 3C10.7472 3 9.55932 3.28918 8.50195 3.80456M3.52344 15.0245C3.83663 13.7343 4.00262 12.3865 4.00262 11C4.00262 9.25969 4.55832 7.64917 5.50195 6.33621M12.003 11C12.003 13.7604 11.5557 16.4163 10.7295 18.8992C10.5169 19.5381 10.2792 20.1655 10.0176 20.7803M7.71227 14.5C7.90323 13.3618 8.00262 12.1925 8.00262 11C8.00262 8.79086 9.79348 7 12.0026 7C14.2118 7 16.0026 8.79086 16.0026 11C16.0026 11.6166 15.9834 12.2287 15.9455 12.8357\"\n          stroke=\"currentColor\"\n          stroke-width=${strokeWidth}\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          vector-effect=\"non-scaling-stroke\"\n          pathLength=\"1\"\n        />\n      </svg>\n    `;\n  }\n}\n\nimport { W3A_PASSKEY_HALO_LOADING_ID } from '../tags';\n\nif (!customElements.get(W3A_PASSKEY_HALO_LOADING_ID)) {\n  customElements.define(W3A_PASSKEY_HALO_LOADING_ID, PasskeyHaloLoadingElement);\n}\n\nexport default PasskeyHaloLoadingElement;\n"],"mappings":";;;;;;AAMA,IAAa,4BAAb,cAA+C,oBAAoB;CACjE,OAAO,aAAa;EAElB,UAAU,EAAE,MAAM;EAClB,OAAO,EAAE,MAAM;EACf,SAAS;GAAE,MAAM;GAAQ,WAAW;;EACpC,WAAW;GAAE,MAAM;GAAQ,WAAW;;EACtC,kBAAkB;GAAE,MAAM;GAAQ,WAAW;;EAC7C,kBAAkB;GAAE,MAAM;GAAQ,WAAW;;EAC7C,gBAAgB;GAAE,MAAM;GAAQ,WAAW;;EAC3C,SAAS,EAAE,MAAM;EACjB,cAAc;GAAE,MAAM;GAAQ,WAAW;;EACzC,iBAAiB;GAAE,MAAM;GAAQ,WAAW;;EAE5C,QAAQ,EAAE,MAAM;EAChB,OAAO,EAAE,MAAM;EAEf,2BAA2B;GAAE,MAAM;GAAQ,WAAW;;EACtD,8BAA8B;GAAE,MAAM;GAAQ,WAAW;;;CAmB3D,AAAQ,eAAe;CACvB,AAAQ,iBAAkC;CAC1C,AAAQ,kBAAwC;CAEhD,AAAU,mBAAmD;EAC3D,MAAM,OAAO,MAAM;EACnB,MAAM,IAAI,qBAAqB,MAAqD,4BAA4B;AAChH,OAAK,eAAe,KAAK;AACzB,IAAE,YAAY;AACd,SAAO;;CAIT,AAAU,aAAa,UAA2D;AAChF,MAAI,KAAK,aAAc,QAAO;AAC9B,MAAI,CAAC,KAAK,iBAAiB;GACzB,MAAM,SAAS,QAAQ,IAAI,KAAK,gBAC7B,WAAW,IAAI,SAAe,MAAM,4BAA4B,4BAA4B;AAC/F,QAAK,kBAAkB,OAAO,WAAW;AAAE,SAAK,eAAe;AAAM,SAAK;;;AAE5E,SAAO;;CAGT,AAAU,UAAgB;EAExB,MAAMA,OAA+B;AACrC,MAAI,KAAK,6BACP,MAAK,wEAAwE,KAAK;AAEpF,MAAI,KAAK,0BACP,MAAK,qEAAqE,KAAK;AAEjF,MAAI,OAAO,KAAK,MAAM,OAAQ,MAAK,WAAW;;CAGhD,SAAS;EACP,MAAM,QAAQ,KAAK,SAAS;EAC5B,MAAM,SAAS,KAAK,UAAU;EAC9B,MAAM,QAAQ,KAAK,SAAS;EAC5B,MAAM,WAAW,KAAK,YAAY;EAClC,MAAM,UAAU,KAAK,WAAW;EAChC,MAAM,YAAY,KAAK,aAAa;EACpC,MAAM,mBAAmB,KAAK,oBAAoB;EAClD,MAAM,mBAAmB,KAAK;EAC9B,MAAM,iBAAiB,KAAK;EAC5B,MAAM,UAAU,KAAK;EACrB,MAAM,eAAe,KAAK,gBAAgB;EAC1C,MAAM,kBAAkB,KAAK;AAE7B,SAAO,IAAI;6CAC8B,MAAM;;mBAEhC,MAAM;sBACH,SAAS;qBACV,QAAQ;uBACN,UAAU;8BACH,iBAAiB;8BACjB,iBAAiB;4BACnB,eAAe;qBACtB,QAAQ;0BACH,aAAa;6BACV,gBAAgB;;;cAG/B,KAAK,gBAAgB;GAAE;GAAQ;KAAS;;;;;;CAOpD,AAAQ,gBAAgB,EAAE,QAAQ,SAA6C;EAC7E,MAAM,cAAc;AAEpB,SAAO,IAAI;;;gBAGC,MAAM;iBACL,OAAO;;;;;;;;yBAQC,YAAY;;;;;;;;;;AAarC,IAAI,CAAC,eAAe,IAAI,6BACtB,gBAAe,OAAO,6BAA6B;AAGrD,iCAAe"}