@arclux/brand 1.0.3 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arclux/brand",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Arclight brand components — logo, wordmark, powered-by badge",
   "type": "module",
   "main": "src/index.js",

package/src/assets/blob-url.js

@@ -0,0 +1,7 @@
+/** Convert a base64 string to a same-origin blob URL (bypasses font-src 'self' CSP). */
+export function base64ToBlobUrl(b64, mime = 'font/woff2') {
+  const bin = atob(b64);
+  const buf = new Uint8Array(bin.length);
+  for (let i = 0; i < bin.length; i++) buf[i] = bin.charCodeAt(i);
+  return URL.createObjectURL(new Blob([buf], { type: mime }));
+}

package/src/components/by-arclight.js

@@ -1,6 +1,7 @@
 import { LitElement, html, css } from 'lit';
 import { tokenStyles } from '../shared-styles.js';
 import { tekturSubsetBase64 } from '../assets/tektur-font.js';
+import { base64ToBlobUrl } from '../assets/blob-url.js';
 import './logo-wordmark.js';
 
 // @font-face must be in document scope — shadow DOM won't pick it up.
@@ -8,11 +9,12 @@ let fontInjected = false;
 function injectFont() {
   if (fontInjected) return;
   fontInjected = true;
+  const url = base64ToBlobUrl(tekturSubsetBase64);
   const style = document.createElement('style');
   style.textContent = `
     @font-face {
       font-family: 'Tektur Subset';
-      src: url('data:font/woff2;base64,${tekturSubsetBase64}') format('woff2');
+      src: url('${url}') format('woff2');
       font-weight: 400 900;
       font-display: block;
     }

package/src/components/wordmark.js

@@ -1,6 +1,7 @@
 import { LitElement, html, css } from 'lit';
 import { tokenStyles } from '../shared-styles.js';
 import { hostGroteskSubsetBase64 } from '../assets/wordmark-font.js';
+import { base64ToBlobUrl } from '../assets/blob-url.js';
 
 const SIZES = {
   sm: { fontSize: '15px', fontWeight: '500', letterSpacing: '6px' },
@@ -14,11 +15,12 @@ let fontInjected = false;
 function injectFont() {
   if (fontInjected) return;
   fontInjected = true;
+  const url = base64ToBlobUrl(hostGroteskSubsetBase64);
   const style = document.createElement('style');
   style.textContent = `
     @font-face {
       font-family: 'Host Grotesk Subset';
-      src: url('data:font/woff2;base64,${hostGroteskSubsetBase64}') format('woff2');
+      src: url('${url}') format('woff2');
       font-weight: 100 900;
       font-display: block;
     }