@wippy-fe/loading 0.0.64 → 0.0.65
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.
- package/dist/index.js +33 -0
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -232,7 +232,40 @@ var STYLES2 = `
|
|
|
232
232
|
|
|
233
233
|
.subtitle:empty { display: none; }
|
|
234
234
|
|
|
235
|
+
/* Before the theme tokens load, follow the color-scheme the page sets.
|
|
236
|
+
The facade puts the app's forced theme on <html> (color-scheme and
|
|
237
|
+
.w-theme-dark) before this overlay paints, and color-scheme inherits
|
|
238
|
+
into this shadow root, so light-dark() picks the app theme even when
|
|
239
|
+
the OS preference differs. Supported in Chromium 123+, Firefox 120+
|
|
240
|
+
and Safari 17.5+; older browsers skip this block and keep the plain
|
|
241
|
+
fallbacks above. */
|
|
242
|
+
@supports (color: light-dark(#fff, #000)) {
|
|
243
|
+
.container {
|
|
244
|
+
background: var(--p-content-background, light-dark(#fff, #18181b));
|
|
245
|
+
}
|
|
246
|
+
.ring.outer {
|
|
247
|
+
border-color: light-dark(var(--p-surface-300, #d4d4d8), var(--p-surface-500, #71717a));
|
|
248
|
+
}
|
|
249
|
+
.ring.inner {
|
|
250
|
+
border-top-color: light-dark(var(--p-primary, rgb(0, 95, 178)), var(--p-primary, rgb(0, 125, 178)));
|
|
251
|
+
border-bottom-color: light-dark(var(--p-primary, rgb(0, 95, 178)), var(--p-primary, rgb(0, 125, 178)));
|
|
252
|
+
}
|
|
253
|
+
.title {
|
|
254
|
+
color: var(--p-text-color, light-dark(#3f3f46, #fff));
|
|
255
|
+
}
|
|
256
|
+
.subtitle {
|
|
257
|
+
color: var(--p-text-muted-color, light-dark(#71717a, #a1a1aa));
|
|
258
|
+
}
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
/* Pages that set no color-scheme resolve light-dark() to light, so the
|
|
262
|
+
OS preference still decides for them. Comes after the block above. A
|
|
263
|
+
page that forces light while the OS prefers dark still gets the dark
|
|
264
|
+
fallbacks: CSS cannot tell a forced light scheme from an unset one. */
|
|
235
265
|
@media (prefers-color-scheme: dark) {
|
|
266
|
+
.container {
|
|
267
|
+
background: var(--p-content-background, #18181b);
|
|
268
|
+
}
|
|
236
269
|
.ring.outer {
|
|
237
270
|
border-color: var(--p-surface-500, #71717a);
|
|
238
271
|
}
|
package/dist/index.js.map
CHANGED
|
@@ -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 /* 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"]}
|
|
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 /* Before the theme tokens load, follow the color-scheme the page sets.\n The facade puts the app's forced theme on <html> (color-scheme and\n .w-theme-dark) before this overlay paints, and color-scheme inherits\n into this shadow root, so light-dark() picks the app theme even when\n the OS preference differs. Supported in Chromium 123+, Firefox 120+\n and Safari 17.5+; older browsers skip this block and keep the plain\n fallbacks above. */\n @supports (color: light-dark(#fff, #000)) {\n .container {\n background: var(--p-content-background, light-dark(#fff, #18181b));\n }\n .ring.outer {\n border-color: light-dark(var(--p-surface-300, #d4d4d8), var(--p-surface-500, #71717a));\n }\n .ring.inner {\n border-top-color: light-dark(var(--p-primary, rgb(0, 95, 178)), var(--p-primary, rgb(0, 125, 178)));\n border-bottom-color: light-dark(var(--p-primary, rgb(0, 95, 178)), var(--p-primary, rgb(0, 125, 178)));\n }\n .title {\n color: var(--p-text-color, light-dark(#3f3f46, #fff));\n }\n .subtitle {\n color: var(--p-text-muted-color, light-dark(#71717a, #a1a1aa));\n }\n }\n\n /* Pages that set no color-scheme resolve light-dark() to light, so the\n OS preference still decides for them. Comes after the block above. A\n page that forces light while the OS prefers dark still gets the dark\n fallbacks: CSS cannot tell a forced light scheme from an unset one. */\n @media (prefers-color-scheme: dark) {\n .container {\n background: var(--p-content-background, #18181b);\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":"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","names":["STYLES"]}
|