npm - @wippy-fe/loading - Versions diffs - 0.0.37 → 0.0.38 - Mend

@wippy-fe/loading 0.0.37 → 0.0.38

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 (3) hide show

package/dist/index.js CHANGED Viewed

@@ -36,7 +36,9 @@ var STYLES = `
     justify-content: center;
     width: 100%;
     height: 100%;
-    background: var(--p-surface-0, #fff);
+    /* content-background flips with both OS and a forced w-theme-* scope
+       (inherited token), so the overlay follows a forced theme too. */
+    background: var(--p-content-background, #fff);
     font-family: system-ui, -apple-system, sans-serif;
   }
@@ -83,9 +85,6 @@ var STYLES = `
   .message:empty { display: none; }
   @media (prefers-color-scheme: dark) {
-    .container {
-      background: var(--p-surface-900, #1c1a19);
-    }
     :host([severity="warning"]) .icon,
     :host([severity="warning"]) .title {
       color: var(--p-warn-400, color-mix(in srgb, rgb(249, 115, 22) 40%, white));
@@ -176,7 +175,9 @@ var STYLES2 = `
     justify-content: center;
     width: 100%;
     height: 100%;
-    background: var(--p-surface-0, #fff);
+    /* content-background flips with both OS and a forced w-theme-* scope
+       (inherited token), so the overlay follows a forced theme too. */
+    background: var(--p-content-background, #fff);
     font-family: system-ui, -apple-system, sans-serif;
   }
@@ -232,9 +233,6 @@ var STYLES2 = `
   .subtitle:empty { display: none; }
   @media (prefers-color-scheme: dark) {
-    .container {
-      background: var(--p-surface-900, #1c1a19);
-    }
     .ring.outer {
       border-color: var(--p-surface-500, #71717a);
     }

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/wippy-error.ts","../src/wippy-loading.ts","../src/index.ts"],"sourcesContent":["const ICON_CIRCLE = '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 36 36\"><circle cx=\"18\" cy=\"26.06\" r=\"1.33\" fill=\"currentColor\"/><path fill=\"currentColor\" d=\"M18 22.61a1 1 0 0 1-1-1v-12a1 1 0 1 1 2 0v12a1 1 0 0 1-1 1\"/><path fill=\"currentColor\" d=\"M18 34a16 16 0 1 1 16-16a16 16 0 0 1-16 16m0-30a14 14 0 1 0 14 14A14 14 0 0 0 18 4\"/></svg>'\n\nconst ICON_TRIANGLE = '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 36 36\"><circle cx=\"18\" cy=\"26.06\" r=\"1.33\" fill=\"currentColor\"/><path fill=\"currentColor\" d=\"M18 22.61a1 1 0 0 1-1-1v-12a1 1 0 1 1 2 0v12a1 1 0 0 1-1 1\"/><path fill=\"currentColor\" d=\"M15.062 1.681a3.221 3.221 0 0 1 5.647.002l13.89 25.56A3.22 3.22 0 0 1 31.77 32H4.022a3.22 3.22 0 0 1-2.9-4.759zM2.88 28.198A1.22 1.22 0 0 0 4 30h27.77a1.22 1.22 0 0 0 1.071-1.803L18.954 2.642a1.22 1.22 0 0 0-2.137-.001z\"/></svg>'\n\nconst ICON_SAD = '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 36 36\"><path fill=\"currentColor\" d=\"M18 2a16 16 0 1 0 16 16A16 16 0 0 0 18 2m0 30a14 14 0 1 1 14-14a14 14 0 0 1-14 14\"/><circle cx=\"25.16\" cy=\"14.28\" r=\"1.8\" fill=\"currentColor\"/><circle cx=\"11.41\" cy=\"14.28\" r=\"1.8\" fill=\"currentColor\"/><path fill=\"currentColor\" d=\"M18.16 20a9 9 0 0 0-7.33 3.78a1 1 0 1 0 1.63 1.16a7 7 0 0 1 11.31-.13a1 1 0 0 0 1.6-1.2A9 9 0 0 0 18.16 20\"/></svg>'\n\nconst ICONS: Record<string, string> = {\n circle: ICON_CIRCLE,\n triangle: ICON_TRIANGLE,\n sad: ICON_SAD,\n}\n\nconst STYLES = `\n , ::before, ::after { box-sizing: border-box; }\n\n :host {\n display: block;\n width: 100%;\n height: 100%;\n min-height: 120px;\n overflow: hidden;\n }\n\n :host(:only-child) {\n height: 100vh;\n height: 100dvh;\n }\n\n :host([no-bg]) .container { background: transparent; }\n\n .container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n background: var(--p-surface-0, #fff);\n font-family: system-ui, -apple-system, sans-serif;\n }\n\n .icon {\n width: 48px;\n height: 48px;\n margin-bottom: 16px;\n }\n\n .icon svg {\n width: 100%;\n height: 100%;\n }\n\n :host([severity=\"warning\"]) .icon,\n :host([severity=\"warning\"]) .title {\n color: var(--p-warn-500, rgb(249, 115, 22));\n }\n\n :host(:not([severity=\"warning\"])) .icon,\n :host(:not([severity=\"warning\"])) .title {\n color: var(--p-danger-500, rgb(239, 68, 68));\n }\n\n .title {\n font-size: 16px;\n font-weight: 600;\n text-align: center;\n padding: 0 16px;\n }\n\n .title:empty { display: none; }\n\n .message {\n font-size: 13px;\n color: var(--p-text-muted-color, #71717a);\n margin-top: 6px;\n text-align: center;\n padding: 0 16px;\n max-width: 480px;\n line-height: 1.4;\n }\n\n .message:empty { display: none; }\n\n @media (prefers-color-scheme: dark) {\n .container {\n background: var(--p-surface-900, #1c1a19);\n }\n :host([severity=\"warning\"]) .icon,\n :host([severity=\"warning\"]) .title {\n color: var(--p-warn-400, color-mix(in srgb, rgb(249, 115, 22) 40%, white));\n }\n :host(:not([severity=\"warning\"])) .icon,\n :host(:not([severity=\"warning\"])) .title {\n color: var(--p-danger-400, color-mix(in srgb, rgb(239, 68, 68) 40%, white));\n }\n .message {\n color: var(--p-text-muted-color, #a1a1aa);\n }\n }\n`\n\nexport class WippyErrorElement extends HTMLElement {\n static observedAttributes = ['title', 'message', 'icon', 'severity']\n\n private _iconEl: HTMLElement \| null = null\n private _titleEl: HTMLElement \| null = null\n private _messageEl: HTMLElement \| null = null\n\n connectedCallback() {\n const shadow = this.shadowRoot ?? this.attachShadow({ mode: 'open' })\n shadow.textContent = ''\n\n const style = document.createElement('style')\n style.textContent = STYLES\n shadow.appendChild(style)\n\n const container = document.createElement('div')\n container.className = 'container'\n\n this._iconEl = document.createElement('div')\n this._iconEl.className = 'icon'\n this._iconEl.setAttribute('part', 'icon')\n\n this._titleEl = document.createElement('div')\n this._titleEl.className = 'title'\n this._titleEl.setAttribute('part', 'title')\n\n this._messageEl = document.createElement('div')\n this._messageEl.className = 'message'\n this._messageEl.setAttribute('part', 'message')\n\n this._update()\n\n container.append(this._iconEl, this._titleEl, this._messageEl)\n shadow.appendChild(container)\n }\n\n disconnectedCallback() {\n this._iconEl = null\n this._titleEl = null\n this._messageEl = null\n }\n\n attributeChangedCallback() {\n this._update()\n }\n\n private _update() {\n if (this._iconEl) {\n const iconKey = this.getAttribute('icon') ?? 'circle'\n this._iconEl.innerHTML = ICONS[iconKey] ?? ICONS.circle\n }\n if (this._titleEl)\n this._titleEl.textContent = this.getAttribute('title') ?? 'Something went wrong'\n if (this._messageEl)\n this._messageEl.textContent = this.getAttribute('message') ?? ''\n }\n}\n","const OUTER_DURATION = 3000\nconst INNER_DURATION = 2000\n\nconst STYLES = `\n , ::before, ::after { box-sizing: border-box; }\n\n :host {\n display: block;\n width: 100%;\n height: 100%;\n min-height: 120px;\n overflow: hidden;\n }\n\n :host(:only-child) {\n height: 100vh;\n height: 100dvh;\n }\n\n :host([no-bg]) .container { background: transparent; }\n\n .container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n background: var(--p-surface-0, #fff);\n font-family: system-ui, -apple-system, sans-serif;\n }\n\n .spinner {\n position: relative;\n width: 48px;\n height: 48px;\n margin-bottom: 16px;\n }\n\n .ring {\n position: absolute;\n border-radius: 50%;\n box-sizing: border-box;\n }\n\n .ring.outer {\n width: 48px;\n height: 48px;\n border: 3px solid var(--p-surface-300, #d4d4d8);\n animation: spin-outer ${OUTER_DURATION}ms linear infinite;\n }\n\n .ring.inner {\n width: 56px;\n height: 56px;\n top: 50%;\n left: 50%;\n border: 3px solid transparent;\n border-top-color: var(--p-primary, rgb(0, 95, 178));\n border-bottom-color: var(--p-primary, rgb(0, 95, 178));\n animation: spin-inner ${INNER_DURATION}ms linear infinite;\n }\n\n .title {\n font-size: 14px;\n font-weight: 500;\n color: var(--p-text-color, #3f3f46);\n text-align: center;\n padding: 0 16px;\n }\n\n .title:empty { display: none; }\n\n .subtitle {\n font-size: 12px;\n color: var(--p-text-muted-color, #71717a);\n margin-top: 4px;\n text-align: center;\n padding: 0 16px;\n }\n\n .subtitle:empty { display: none; }\n\n @media (prefers-color-scheme: dark) {\n .container {\n background: var(--p-surface-900, #1c1a19);\n }\n .ring.outer {\n border-color: var(--p-surface-500, #71717a);\n }\n .ring.inner {\n border-top-color: var(--p-primary, rgb(0, 125, 178));\n border-bottom-color: var(--p-primary, rgb(0, 125, 178));\n }\n .title {\n color: var(--p-text-color, #fff);\n }\n .subtitle {\n color: var(--p-text-muted-color, #a1a1aa);\n }\n }\n\n @keyframes spin-outer {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n\n @keyframes spin-inner {\n from { transform: translate(-50%, -50%) rotate(0deg); }\n to { transform: translate(-50%, -50%) rotate(-360deg); }\n }\n`\n\nexport class WippyLoadingElement extends HTMLElement {\n static observedAttributes = ['title', 'subtitle']\n\n private _titleEl: HTMLElement \| null = null\n private _subtitleEl: HTMLElement \| null = null\n\n connectedCallback() {\n const shadow = this.shadowRoot ?? this.attachShadow({ mode: 'open' })\n shadow.textContent = ''\n\n const style = document.createElement('style')\n style.textContent = STYLES\n shadow.appendChild(style)\n\n const container = document.createElement('div')\n container.className = 'container'\n\n const spinner = document.createElement('div')\n spinner.className = 'spinner'\n\n const outer = document.createElement('div')\n outer.className = 'ring outer'\n\n const inner = document.createElement('div')\n inner.className = 'ring inner'\n\n spinner.append(outer, inner)\n\n this._titleEl = document.createElement('div')\n this._titleEl.className = 'title'\n this._titleEl.setAttribute('part', 'title')\n\n this._subtitleEl = document.createElement('div')\n this._subtitleEl.className = 'subtitle'\n this._subtitleEl.setAttribute('part', 'subtitle')\n\n this._updateText()\n\n container.append(spinner, this._titleEl, this._subtitleEl)\n shadow.appendChild(container)\n\n // Time-synced animation — phase matches wall-clock time\n const now = Date.now()\n outer.style.animationDelay = `-${now % OUTER_DURATION}ms`\n inner.style.animationDelay = `-${now % INNER_DURATION}ms`\n }\n\n disconnectedCallback() {\n this._titleEl = null\n this._subtitleEl = null\n }\n\n attributeChangedCallback() {\n this._updateText()\n }\n\n private _updateText() {\n if (this._titleEl)\n this._titleEl.textContent = this.getAttribute('title') ?? ''\n if (this._subtitleEl)\n this._subtitleEl.textContent = this.getAttribute('subtitle') ?? ''\n }\n}\n","import { WippyErrorElement } from './wippy-error'\nimport { WippyLoadingElement } from './wippy-loading'\n\nexport { WippyErrorElement, WippyLoadingElement }\n\nexport function register() {\n if (!customElements.get('wippy-loading'))\n customElements.define('wippy-loading', WippyLoadingElement)\n if (!customElements.get('wippy-error'))\n customElements.define('wippy-error', WippyErrorElement)\n}\n\n// Auto-register when loaded as a script\nregister()\n"],"mappings":";;;;;AAAA,IAAM,cAAc;AAEpB,IAAM,gBAAgB;AAEtB,IAAM,WAAW;AAEjB,IAAM,QAAgC;AAAA,EACpC,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,KAAK;AACP;AAEA,IAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyFR,IAAM,oBAAN,cAAgC,YAAY;AAAA,EAA5C;AAAA;AAGL,wBAAQ,WAA8B;AACtC,wBAAQ,YAA+B;AACvC,wBAAQ,cAAiC;AAAA;AAAA,EAEzC,oBAAoB;AAClB,UAAM,SAAS,KAAK,cAAc,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AACpE,WAAO,cAAc;AAErB,UAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,UAAM,cAAc;AACpB,WAAO,YAAY,KAAK;AAExB,UAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,cAAU,YAAY;AAEtB,SAAK,UAAU,SAAS,cAAc,KAAK;AAC3C,SAAK,QAAQ,YAAY;AACzB,SAAK,QAAQ,aAAa,QAAQ,MAAM;AAExC,SAAK,WAAW,SAAS,cAAc,KAAK;AAC5C,SAAK,SAAS,YAAY;AAC1B,SAAK,SAAS,aAAa,QAAQ,OAAO;AAE1C,SAAK,aAAa,SAAS,cAAc,KAAK;AAC9C,SAAK,WAAW,YAAY;AAC5B,SAAK,WAAW,aAAa,QAAQ,SAAS;AAE9C,SAAK,QAAQ;AAEb,cAAU,OAAO,KAAK,SAAS,KAAK,UAAU,KAAK,UAAU;AAC7D,WAAO,YAAY,SAAS;AAAA,EAC9B;AAAA,EAEA,uBAAuB;AACrB,SAAK,UAAU;AACf,SAAK,WAAW;AAChB,SAAK,aAAa;AAAA,EACpB;AAAA,EAEA,2BAA2B;AACzB,SAAK,QAAQ;AAAA,EACf;AAAA,EAEQ,UAAU;AAChB,QAAI,KAAK,SAAS;AAChB,YAAM,UAAU,KAAK,aAAa,MAAM,KAAK;AAC7C,WAAK,QAAQ,YAAY,MAAM,OAAO,KAAK,MAAM;AAAA,IACnD;AACA,QAAI,KAAK;AACP,WAAK,SAAS,cAAc,KAAK,aAAa,OAAO,KAAK;AAC5D,QAAI,KAAK;AACP,WAAK,WAAW,cAAc,KAAK,aAAa,SAAS,KAAK;AAAA,EAClE;AACF;AAvDE,cADW,mBACJ,sBAAqB,CAAC,SAAS,WAAW,QAAQ,UAAU;;;ACtGrE,IAAM,iBAAiB;AACvB,IAAM,iBAAiB;AAEvB,IAAMA,UAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BA8Ca,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAWd,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqDnC,IAAM,sBAAN,cAAkC,YAAY;AAAA,EAA9C;AAAA;AAGL,wBAAQ,YAA+B;AACvC,wBAAQ,eAAkC;AAAA;AAAA,EAE1C,oBAAoB;AAClB,UAAM,SAAS,KAAK,cAAc,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AACpE,WAAO,cAAc;AAErB,UAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,UAAM,cAAcA;AACpB,WAAO,YAAY,KAAK;AAExB,UAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,cAAU,YAAY;AAEtB,UAAM,UAAU,SAAS,cAAc,KAAK;AAC5C,YAAQ,YAAY;AAEpB,UAAM,QAAQ,SAAS,cAAc,KAAK;AAC1C,UAAM,YAAY;AAElB,UAAM,QAAQ,SAAS,cAAc,KAAK;AAC1C,UAAM,YAAY;AAElB,YAAQ,OAAO,OAAO,KAAK;AAE3B,SAAK,WAAW,SAAS,cAAc,KAAK;AAC5C,SAAK,SAAS,YAAY;AAC1B,SAAK,SAAS,aAAa,QAAQ,OAAO;AAE1C,SAAK,cAAc,SAAS,cAAc,KAAK;AAC/C,SAAK,YAAY,YAAY;AAC7B,SAAK,YAAY,aAAa,QAAQ,UAAU;AAEhD,SAAK,YAAY;AAEjB,cAAU,OAAO,SAAS,KAAK,UAAU,KAAK,WAAW;AACzD,WAAO,YAAY,SAAS;AAG5B,UAAM,MAAM,KAAK,IAAI;AACrB,UAAM,MAAM,iBAAiB,IAAI,MAAM,cAAc;AACrD,UAAM,MAAM,iBAAiB,IAAI,MAAM,cAAc;AAAA,EACvD;AAAA,EAEA,uBAAuB;AACrB,SAAK,WAAW;AAChB,SAAK,cAAc;AAAA,EACrB;AAAA,EAEA,2BAA2B;AACzB,SAAK,YAAY;AAAA,EACnB;AAAA,EAEQ,cAAc;AACpB,QAAI,KAAK;AACP,WAAK,SAAS,cAAc,KAAK,aAAa,OAAO,KAAK;AAC5D,QAAI,KAAK;AACP,WAAK,YAAY,cAAc,KAAK,aAAa,UAAU,KAAK;AAAA,EACpE;AACF;AA7DE,cADW,qBACJ,sBAAqB,CAAC,SAAS,UAAU;;;AC7G3C,SAAS,WAAW;AACzB,MAAI,CAAC,eAAe,IAAI,eAAe;AACrC,mBAAe,OAAO,iBAAiB,mBAAmB;AAC5D,MAAI,CAAC,eAAe,IAAI,aAAa;AACnC,mBAAe,OAAO,eAAe,iBAAiB;AAC1D;AAGA,SAAS;","names":["STYLES"]}
1	+ {"version":3,"sources":["../src/wippy-error.ts","../src/wippy-loading.ts","../src/index.ts"],"sourcesContent":["const ICON_CIRCLE = '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 36 36\"><circle cx=\"18\" cy=\"26.06\" r=\"1.33\" fill=\"currentColor\"/><path fill=\"currentColor\" d=\"M18 22.61a1 1 0 0 1-1-1v-12a1 1 0 1 1 2 0v12a1 1 0 0 1-1 1\"/><path fill=\"currentColor\" d=\"M18 34a16 16 0 1 1 16-16a16 16 0 0 1-16 16m0-30a14 14 0 1 0 14 14A14 14 0 0 0 18 4\"/></svg>'\n\nconst ICON_TRIANGLE = '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 36 36\"><circle cx=\"18\" cy=\"26.06\" r=\"1.33\" fill=\"currentColor\"/><path fill=\"currentColor\" d=\"M18 22.61a1 1 0 0 1-1-1v-12a1 1 0 1 1 2 0v12a1 1 0 0 1-1 1\"/><path fill=\"currentColor\" d=\"M15.062 1.681a3.221 3.221 0 0 1 5.647.002l13.89 25.56A3.22 3.22 0 0 1 31.77 32H4.022a3.22 3.22 0 0 1-2.9-4.759zM2.88 28.198A1.22 1.22 0 0 0 4 30h27.77a1.22 1.22 0 0 0 1.071-1.803L18.954 2.642a1.22 1.22 0 0 0-2.137-.001z\"/></svg>'\n\nconst ICON_SAD = '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 36 36\"><path fill=\"currentColor\" d=\"M18 2a16 16 0 1 0 16 16A16 16 0 0 0 18 2m0 30a14 14 0 1 1 14-14a14 14 0 0 1-14 14\"/><circle cx=\"25.16\" cy=\"14.28\" r=\"1.8\" fill=\"currentColor\"/><circle cx=\"11.41\" cy=\"14.28\" r=\"1.8\" fill=\"currentColor\"/><path fill=\"currentColor\" d=\"M18.16 20a9 9 0 0 0-7.33 3.78a1 1 0 1 0 1.63 1.16a7 7 0 0 1 11.31-.13a1 1 0 0 0 1.6-1.2A9 9 0 0 0 18.16 20\"/></svg>'\n\nconst ICONS: Record<string, string> = {\n circle: ICON_CIRCLE,\n triangle: ICON_TRIANGLE,\n sad: ICON_SAD,\n}\n\nconst STYLES = `\n , ::before, ::after { box-sizing: border-box; }\n\n :host {\n display: block;\n width: 100%;\n height: 100%;\n min-height: 120px;\n overflow: hidden;\n }\n\n :host(:only-child) {\n height: 100vh;\n height: 100dvh;\n }\n\n :host([no-bg]) .container { background: transparent; }\n\n .container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n / content-background flips with both OS and a forced w-theme-* scope\n (inherited token), so the overlay follows a forced theme too. /\n background: var(--p-content-background, #fff);\n font-family: system-ui, -apple-system, sans-serif;\n }\n\n .icon {\n width: 48px;\n height: 48px;\n margin-bottom: 16px;\n }\n\n .icon svg {\n width: 100%;\n height: 100%;\n }\n\n :host([severity=\"warning\"]) .icon,\n :host([severity=\"warning\"]) .title {\n color: var(--p-warn-500, rgb(249, 115, 22));\n }\n\n :host(:not([severity=\"warning\"])) .icon,\n :host(:not([severity=\"warning\"])) .title {\n color: var(--p-danger-500, rgb(239, 68, 68));\n }\n\n .title {\n font-size: 16px;\n font-weight: 600;\n text-align: center;\n padding: 0 16px;\n }\n\n .title:empty { display: none; }\n\n .message {\n font-size: 13px;\n color: var(--p-text-muted-color, #71717a);\n margin-top: 6px;\n text-align: center;\n padding: 0 16px;\n max-width: 480px;\n line-height: 1.4;\n }\n\n .message:empty { display: none; }\n\n @media (prefers-color-scheme: dark) {\n :host([severity=\"warning\"]) .icon,\n :host([severity=\"warning\"]) .title {\n color: var(--p-warn-400, color-mix(in srgb, rgb(249, 115, 22) 40%, white));\n }\n :host(:not([severity=\"warning\"])) .icon,\n :host(:not([severity=\"warning\"])) .title {\n color: var(--p-danger-400, color-mix(in srgb, rgb(239, 68, 68) 40%, white));\n }\n .message {\n color: var(--p-text-muted-color, #a1a1aa);\n }\n }\n`\n\nexport class WippyErrorElement extends HTMLElement {\n static observedAttributes = ['title', 'message', 'icon', 'severity']\n\n private _iconEl: HTMLElement \| null = null\n private _titleEl: HTMLElement \| null = null\n private _messageEl: HTMLElement \| null = null\n\n connectedCallback() {\n const shadow = this.shadowRoot ?? this.attachShadow({ mode: 'open' })\n shadow.textContent = ''\n\n const style = document.createElement('style')\n style.textContent = STYLES\n shadow.appendChild(style)\n\n const container = document.createElement('div')\n container.className = 'container'\n\n this._iconEl = document.createElement('div')\n this._iconEl.className = 'icon'\n this._iconEl.setAttribute('part', 'icon')\n\n this._titleEl = document.createElement('div')\n this._titleEl.className = 'title'\n this._titleEl.setAttribute('part', 'title')\n\n this._messageEl = document.createElement('div')\n this._messageEl.className = 'message'\n this._messageEl.setAttribute('part', 'message')\n\n this._update()\n\n container.append(this._iconEl, this._titleEl, this._messageEl)\n shadow.appendChild(container)\n }\n\n disconnectedCallback() {\n this._iconEl = null\n this._titleEl = null\n this._messageEl = null\n }\n\n attributeChangedCallback() {\n this._update()\n }\n\n private _update() {\n if (this._iconEl) {\n const iconKey = this.getAttribute('icon') ?? 'circle'\n this._iconEl.innerHTML = ICONS[iconKey] ?? ICONS.circle\n }\n if (this._titleEl)\n this._titleEl.textContent = this.getAttribute('title') ?? 'Something went wrong'\n if (this._messageEl)\n this._messageEl.textContent = this.getAttribute('message') ?? ''\n }\n}\n","const OUTER_DURATION = 3000\nconst INNER_DURATION = 2000\n\nconst STYLES = `\n , ::before, ::after { box-sizing: border-box; }\n\n :host {\n display: block;\n width: 100%;\n height: 100%;\n min-height: 120px;\n overflow: hidden;\n }\n\n :host(:only-child) {\n height: 100vh;\n height: 100dvh;\n }\n\n :host([no-bg]) .container { background: transparent; }\n\n .container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n /* content-background flips with both OS and a forced w-theme-* scope\n (inherited token), so the overlay follows a forced theme too. */\n background: var(--p-content-background, #fff);\n font-family: system-ui, -apple-system, sans-serif;\n }\n\n .spinner {\n position: relative;\n width: 48px;\n height: 48px;\n margin-bottom: 16px;\n }\n\n .ring {\n position: absolute;\n border-radius: 50%;\n box-sizing: border-box;\n }\n\n .ring.outer {\n width: 48px;\n height: 48px;\n border: 3px solid var(--p-surface-300, #d4d4d8);\n animation: spin-outer ${OUTER_DURATION}ms linear infinite;\n }\n\n .ring.inner {\n width: 56px;\n height: 56px;\n top: 50%;\n left: 50%;\n border: 3px solid transparent;\n border-top-color: var(--p-primary, rgb(0, 95, 178));\n border-bottom-color: var(--p-primary, rgb(0, 95, 178));\n animation: spin-inner ${INNER_DURATION}ms linear infinite;\n }\n\n .title {\n font-size: 14px;\n font-weight: 500;\n color: var(--p-text-color, #3f3f46);\n text-align: center;\n padding: 0 16px;\n }\n\n .title:empty { display: none; }\n\n .subtitle {\n font-size: 12px;\n color: var(--p-text-muted-color, #71717a);\n margin-top: 4px;\n text-align: center;\n padding: 0 16px;\n }\n\n .subtitle:empty { display: none; }\n\n @media (prefers-color-scheme: dark) {\n .ring.outer {\n border-color: var(--p-surface-500, #71717a);\n }\n .ring.inner {\n border-top-color: var(--p-primary, rgb(0, 125, 178));\n border-bottom-color: var(--p-primary, rgb(0, 125, 178));\n }\n .title {\n color: var(--p-text-color, #fff);\n }\n .subtitle {\n color: var(--p-text-muted-color, #a1a1aa);\n }\n }\n\n @keyframes spin-outer {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n\n @keyframes spin-inner {\n from { transform: translate(-50%, -50%) rotate(0deg); }\n to { transform: translate(-50%, -50%) rotate(-360deg); }\n }\n`\n\nexport class WippyLoadingElement extends HTMLElement {\n static observedAttributes = ['title', 'subtitle']\n\n private _titleEl: HTMLElement \| null = null\n private _subtitleEl: HTMLElement \| null = null\n\n connectedCallback() {\n const shadow = this.shadowRoot ?? this.attachShadow({ mode: 'open' })\n shadow.textContent = ''\n\n const style = document.createElement('style')\n style.textContent = STYLES\n shadow.appendChild(style)\n\n const container = document.createElement('div')\n container.className = 'container'\n\n const spinner = document.createElement('div')\n spinner.className = 'spinner'\n\n const outer = document.createElement('div')\n outer.className = 'ring outer'\n\n const inner = document.createElement('div')\n inner.className = 'ring inner'\n\n spinner.append(outer, inner)\n\n this._titleEl = document.createElement('div')\n this._titleEl.className = 'title'\n this._titleEl.setAttribute('part', 'title')\n\n this._subtitleEl = document.createElement('div')\n this._subtitleEl.className = 'subtitle'\n this._subtitleEl.setAttribute('part', 'subtitle')\n\n this._updateText()\n\n container.append(spinner, this._titleEl, this._subtitleEl)\n shadow.appendChild(container)\n\n // Time-synced animation — phase matches wall-clock time\n const now = Date.now()\n outer.style.animationDelay = `-${now % OUTER_DURATION}ms`\n inner.style.animationDelay = `-${now % INNER_DURATION}ms`\n }\n\n disconnectedCallback() {\n this._titleEl = null\n this._subtitleEl = null\n }\n\n attributeChangedCallback() {\n this._updateText()\n }\n\n private _updateText() {\n if (this._titleEl)\n this._titleEl.textContent = this.getAttribute('title') ?? ''\n if (this._subtitleEl)\n this._subtitleEl.textContent = this.getAttribute('subtitle') ?? ''\n }\n}\n","import { WippyErrorElement } from './wippy-error'\nimport { WippyLoadingElement } from './wippy-loading'\n\nexport { WippyErrorElement, WippyLoadingElement }\n\nexport function register() {\n if (!customElements.get('wippy-loading'))\n customElements.define('wippy-loading', WippyLoadingElement)\n if (!customElements.get('wippy-error'))\n customElements.define('wippy-error', WippyErrorElement)\n}\n\n// Auto-register when loaded as a script\nregister()\n"],"mappings":"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","names":["STYLES"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@wippy-fe/loading",
-  "version": "0.0.37",
+  "version": "0.0.38",
   "description": "Zero-dependency loading and error screen web components for the Wippy platform",
   "license": "UNLICENSED",
   "type": "module",