kritzel-stencil 0.4.4 → 0.4.5

package/dist/components/p-894OnDQV.js

@@ -1 +1,39 @@
-import{p as i,H as t,h as e,d as r,t as a}from"./p-B43upypT.js";const n=i(class extends t{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow()}visible=!1;text="Syncing...";render(){return e(r,{key:"833aa19a39357398a9fc2d97246398b77f1b990f"},e("div",{key:"cabb31890ea7c6afdafa6427306caa19a2d8f818",class:{indicator:!0,visible:this.visible},role:"status","aria-live":"polite","aria-label":"Synchronizing workspace"},e("span",{key:"086105d00156d8556d8a78cfb0cec47d65b40a1f",class:"spinner","aria-hidden":"true"}),e("span",{key:"9934152bb9f55399a20112f4230c4efc1518a2e1"},this.text)))}static get style(){return":host{display:contents}.indicator{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:var(--kritzel-sync-indicator-z-index, 10001);pointer-events:none;display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:var(--kritzel-sync-indicator-background, rgba(255, 255, 255, 0.92));color:var(--kritzel-sync-indicator-color, #334155);box-shadow:0 2px 10px rgba(0, 0, 0, 0.12);font-family:var(--kritzel-font-family, sans-serif);font-size:12px;line-height:1;font-weight:500;opacity:0;visibility:hidden}.indicator.visible{opacity:1;visibility:visible}.spinner{width:12px;height:12px;border-radius:50%;border:2px solid var(--kritzel-sync-indicator-spinner-track, rgba(148, 163, 184, 0.35));border-top-color:var(--kritzel-sync-indicator-spinner-color, #2563eb);animation:kritzel-sync-indicator-spin 0.8s linear infinite}@keyframes kritzel-sync-indicator-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}"}},[513,"kritzel-sync-indicator",{visible:[4],text:[1]}]);function s(){"undefined"!=typeof customElements&&["kritzel-sync-indicator"].forEach((i=>{"kritzel-sync-indicator"===i&&(customElements.get(a(i))||customElements.define(a(i),n))}))}export{n as K,s as d}
+import { p as proxyCustomElement, H, h, d as Host, t as transformTag } from './p-B43upypT.js';
+
+const kritzelSyncIndicatorCss = () => `:host{display:contents}.indicator{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:var(--kritzel-sync-indicator-z-index, 10001);pointer-events:none;display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:var(--kritzel-sync-indicator-background, rgba(255, 255, 255, 0.92));color:var(--kritzel-sync-indicator-color, #334155);box-shadow:0 2px 10px rgba(0, 0, 0, 0.12);font-family:var(--kritzel-font-family, sans-serif);font-size:12px;line-height:1;font-weight:500;opacity:0;visibility:hidden}.indicator.visible{opacity:1;visibility:visible}.spinner{width:12px;height:12px;border-radius:50%;border:2px solid var(--kritzel-sync-indicator-spinner-track, rgba(148, 163, 184, 0.35));border-top-color:var(--kritzel-sync-indicator-spinner-color, #2563eb);animation:kritzel-sync-indicator-spin 0.8s linear infinite}@keyframes kritzel-sync-indicator-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}`;
+
+const KritzelSyncIndicator = /*@__PURE__*/ proxyCustomElement(class KritzelSyncIndicator extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    /** Whether the indicator is visible. */
+    visible = false;
+    /** The text displayed next to the spinner. */
+    text = 'Syncing...';
+    render() {
+        return (h(Host, { key: '833aa19a39357398a9fc2d97246398b77f1b990f' }, h("div", { key: 'cabb31890ea7c6afdafa6427306caa19a2d8f818', class: { indicator: true, visible: this.visible }, role: "status", "aria-live": "polite", "aria-label": "Synchronizing workspace" }, h("span", { key: '086105d00156d8556d8a78cfb0cec47d65b40a1f', class: "spinner", "aria-hidden": "true" }), h("span", { key: '9934152bb9f55399a20112f4230c4efc1518a2e1' }, this.text))));
+    }
+    static get style() { return kritzelSyncIndicatorCss(); }
+}, [513, "kritzel-sync-indicator", {
+        "visible": [4],
+        "text": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-sync-indicator"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-sync-indicator":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelSyncIndicator);
+            }
+            break;
+    } });
+}
+
+export { KritzelSyncIndicator as K, defineCustomElement as d };