@guidelytech/guide-runtime 0.10.0 → 0.12.0

package/dist/capture.cjs

@@ -746,6 +746,9 @@ function screenshotDataUrl(canvas) {
   }
 }
 
+// src/host.ts
+var import_runtime3 = require("@guidelytech/shared/runtime");
+
 // src/styles.ts
 var STYLES = `
 :host{all:initial;position:static;display:block;contain:none}
@@ -929,6 +932,21 @@ var STYLES = `
 .g-auth-outline.g-picked .g-auth-label{background:#16a34a}
 .g-highlight{position:fixed;z-index:calc(var(--g-z) + 8);pointer-events:none;border:2px dashed #f59e0b;background:rgba(245,158,11,.12);border-radius:4px}
 @media (max-width:480px){.g-card.g-modal,.g-panel{width:calc(100vw - 32px)}.g-inner{padding:16px}}
+/* resource center: unread badge + "What's new" */
+.g-launcher-badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#dc2626;color:#fff;font-size:11px;font-weight:700;line-height:20px;text-align:center;box-shadow:0 0 0 2px var(--g-bg)}
+.g-rc-news{padding:10px 20px 12px;border-bottom:1px solid var(--g-border)}
+.g-rc-news:last-of-type{border-bottom:0}
+.g-rc-news-head{display:flex;align-items:baseline;gap:8px}
+.g-rc-news-title{margin:0;font-size:14px;font-weight:600;line-height:1.35;flex:1}
+.g-rc-news-new{flex:none;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--g-primary-text);background:var(--g-primary);border-radius:999px;padding:2px 7px}
+.g-rc-news-date{display:block;font-size:12px;color:var(--g-muted);margin:2px 0 6px}
+.g-rc-news-body{font-size:13px}
+.g-rc-news-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
+.g-rc-news-actions .g-btn{min-height:32px;padding:6px 12px;font-size:13px}
+/* accessibility */
+.g-sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
+.g-hotspot:focus-visible,.g-custom:focus-visible,.g-card:focus-visible{outline:2px solid var(--g-primary);outline-offset:2px}
+@media (forced-colors:active){.g-card,.g-panel,.g-banner{border:1px solid CanvasText}.g-btn{border:1px solid ButtonText}}
 `;
 
 // src/host.ts
@@ -1017,6 +1035,7 @@ function resolveTheme(theme, appearance) {
 }
 function applyTheme(el, vars) {
   el.style.setProperty("--g-primary", vars.primary);
+  if (/^#[0-9a-f]{3}([0-9a-f]{3})?$/i.test(vars.primary)) el.style.setProperty("--g-primary-text", (0, import_runtime3.readableTextOn)(vars.primary));
   el.style.setProperty("--g-bg", vars.bg);
   el.style.setProperty("--g-text", vars.text);
   el.style.setProperty("--g-radius", `${vars.radius}px`);
@@ -1033,6 +1052,16 @@ function createScope(theme, appearance, doc = document) {
   const vars = resolveTheme(theme, appearance);
   applyTheme(el, vars);
   handle.shadow.appendChild(el);
+  const css = [appearance ? theme?.customCss : void 0, appearance?.customCss].filter((c) => !!c && !!c.trim());
+  let style = null;
+  if (css.length) {
+    const id = `c${++cssScopeSeq}`;
+    el.setAttribute("data-g-css", id);
+    style = doc.createElement("style");
+    style.setAttribute("data-g-custom", id);
+    style.textContent = css.map((c) => (0, import_runtime3.scopeCustomCss)(c, `.g-scope[data-g-css="${id}"]`)).join("\n");
+    handle.shadow.insertBefore(style, el);
+  }
   let mq = null;
   const onChange = () => applyTheme(el, resolveTheme(theme, appearance));
   if ((appearance?.theme ?? "auto") === "auto" && typeof window !== "undefined" && typeof window.matchMedia === "function") {
@@ -1048,10 +1077,12 @@ function createScope(theme, appearance, doc = document) {
     vars,
     destroy() {
       mq?.removeEventListener?.("change", onChange);
+      style?.remove();
       el.remove();
     }
   };
 }
+var cssScopeSeq = 0;
 
 // src/capture.ts
 var DOUBLE_CLICK_MS = 400;