@vibe-flags/core 0.1.4 → 0.1.5

package/dist/vibe-flags.cdn.mjs

@@ -3,16 +3,16 @@
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const D = globalThis, X = D.ShadowRoot && (D.ShadyCSS === void 0 || D.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, Y = Symbol(), re = /* @__PURE__ */ new WeakMap();
+const D = globalThis, Y = D.ShadowRoot && (D.ShadyCSS === void 0 || D.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, Z = Symbol(), re = /* @__PURE__ */ new WeakMap();
 let be = class {
   constructor(e, t, s) {
-    if (this._$cssResult$ = !0, s !== Y) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+    if (this._$cssResult$ = !0, s !== Z) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
     this.cssText = e, this.t = t;
   }
   get styleSheet() {
     let e = this.o;
     const t = this.t;
-    if (X && e === void 0) {
+    if (Y && e === void 0) {
       const s = t !== void 0 && t.length === 1;
       s && (e = re.get(t)), e === void 0 && ((this.o = e = new CSSStyleSheet()).replaceSync(this.cssText), s && re.set(t, e));
     }
@@ -22,20 +22,20 @@ let be = class {
     return this.cssText;
   }
 };
-const _e = (i) => new be(typeof i == "string" ? i : i + "", void 0, Y), Z = (i, ...e) => {
+const _e = (i) => new be(typeof i == "string" ? i : i + "", void 0, Z), X = (i, ...e) => {
   const t = i.length === 1 ? i[0] : e.reduce((s, r, o) => s + ((n) => {
     if (n._$cssResult$ === !0) return n.cssText;
     if (typeof n == "number") return n;
     throw Error("Value passed to 'css' function must be a 'css' function result: " + n + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
   })(r) + i[o + 1], i[0]);
-  return new be(t, i, Y);
+  return new be(t, i, Z);
 }, we = (i, e) => {
-  if (X) i.adoptedStyleSheets = e.map((t) => t instanceof CSSStyleSheet ? t : t.styleSheet);
+  if (Y) i.adoptedStyleSheets = e.map((t) => t instanceof CSSStyleSheet ? t : t.styleSheet);
   else for (const t of e) {
     const s = document.createElement("style"), r = D.litNonce;
     r !== void 0 && s.setAttribute("nonce", r), s.textContent = t.cssText, i.appendChild(s);
   }
-}, oe = X ? (i) => i : (i) => i instanceof CSSStyleSheet ? ((e) => {
+}, oe = Y ? (i) => i : (i) => i instanceof CSSStyleSheet ? ((e) => {
   let t = "";
   for (const s of e.cssRules) t += s.cssText;
   return _e(t);
@@ -262,7 +262,7 @@ A.elementStyles = [], A.shadowRootOptions = { mode: "open" }, A[O("elementProper
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const Q = globalThis, le = (i) => i, B = Q.trustedTypes, he = B ? B.createPolicy("lit-html", { createHTML: (i) => i }) : void 0, $e = "$lit$", $ = `lit$${Math.random().toFixed(9).slice(2)}$`, ye = "?" + $, Te = `<${ye}>`, w = document, M = () => w.createComment(""), T = (i) => i === null || typeof i != "object" && typeof i != "function", ee = Array.isArray, Ue = (i) => ee(i) || typeof i?.[Symbol.iterator] == "function", K = `[ 	
+const Q = globalThis, le = (i) => i, B = Q.trustedTypes, he = B ? B.createPolicy("lit-html", { createHTML: (i) => i }) : void 0, ye = "$lit$", y = `lit$${Math.random().toFixed(9).slice(2)}$`, $e = "?" + y, Te = `<${$e}>`, w = document, M = () => w.createComment(""), T = (i) => i === null || typeof i != "object" && typeof i != "function", ee = Array.isArray, Ue = (i) => ee(i) || typeof i?.[Symbol.iterator] == "function", K = `[ 	
 \f\r]`, k = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, ce = /-->/g, de = />/g, x = RegExp(`>|${K}(?:([^\\s"'>=/]+)(${K}*=${K}*(?:[^ 	
 \f\r"'\`<>=]|("|')|))|$)`, "g"), pe = /'/g, fe = /"/g, me = /^(?:script|style|textarea|title)$/i, Fe = (i) => (e, ...t) => ({ _$litType$: i, strings: e, values: t }), f = Fe(1), S = Symbol.for("lit-noChange"), c = Symbol.for("lit-nothing"), ue = /* @__PURE__ */ new WeakMap(), _ = w.createTreeWalker(w, 129);
 function xe(i, e) {
@@ -277,7 +277,7 @@ const Ne = (i, e) => {
     let d, p, h = -1, g = 0;
     for (; g < a.length && (n.lastIndex = g, p = n.exec(a), p !== null); ) g = n.lastIndex, n === k ? p[1] === "!--" ? n = ce : p[1] !== void 0 ? n = de : p[2] !== void 0 ? (me.test(p[2]) && (r = RegExp("</" + p[2], "g")), n = x) : p[3] !== void 0 && (n = x) : n === x ? p[0] === ">" ? (n = r ?? k, h = -1) : p[1] === void 0 ? h = -2 : (h = n.lastIndex - p[2].length, d = p[1], n = p[3] === void 0 ? x : p[3] === '"' ? fe : pe) : n === fe || n === pe ? n = x : n === ce || n === de ? n = k : (n = x, r = void 0);
     const b = n === x && i[l + 1].startsWith("/>") ? " " : "";
-    o += n === k ? a + Te : h >= 0 ? (s.push(d), a.slice(0, h) + $e + a.slice(h) + $ + b) : a + $ + (h === -2 ? l : b);
+    o += n === k ? a + Te : h >= 0 ? (s.push(d), a.slice(0, h) + ye + a.slice(h) + y + b) : a + y + (h === -2 ? l : b);
   }
   return [xe(i, o + (i[t] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), s];
 };
@@ -293,22 +293,22 @@ class U {
     }
     for (; (r = _.nextNode()) !== null && a.length < l; ) {
       if (r.nodeType === 1) {
-        if (r.hasAttributes()) for (const h of r.getAttributeNames()) if (h.endsWith($e)) {
-          const g = p[n++], b = r.getAttribute(h).split($), I = /([.?@])?(.*)/.exec(g);
+        if (r.hasAttributes()) for (const h of r.getAttributeNames()) if (h.endsWith(ye)) {
+          const g = p[n++], b = r.getAttribute(h).split(y), I = /([.?@])?(.*)/.exec(g);
           a.push({ type: 1, index: o, name: I[2], strings: b, ctor: I[1] === "." ? Re : I[1] === "?" ? je : I[1] === "@" ? Ie : W }), r.removeAttribute(h);
-        } else h.startsWith($) && (a.push({ type: 6, index: o }), r.removeAttribute(h));
+        } else h.startsWith(y) && (a.push({ type: 6, index: o }), r.removeAttribute(h));
         if (me.test(r.tagName)) {
-          const h = r.textContent.split($), g = h.length - 1;
+          const h = r.textContent.split(y), g = h.length - 1;
           if (g > 0) {
             r.textContent = B ? B.emptyScript : "";
             for (let b = 0; b < g; b++) r.append(h[b], M()), _.nextNode(), a.push({ type: 2, index: ++o });
             r.append(h[g], M());
           }
         }
-      } else if (r.nodeType === 8) if (r.data === ye) a.push({ type: 2, index: o });
+      } else if (r.nodeType === 8) if (r.data === $e) a.push({ type: 2, index: o });
       else {
         let h = -1;
-        for (; (h = r.data.indexOf($, h + 1)) !== -1; ) a.push({ type: 7, index: o }), h += $.length - 1;
+        for (; (h = r.data.indexOf(y, h + 1)) !== -1; ) a.push({ type: 7, index: o }), h += y.length - 1;
       }
       o++;
     }
@@ -601,8 +601,8 @@ class Je extends EventTarget {
   }
   register(e) {
     this.configs.set(e.key, e);
-    const t = this.readFromStorage(e.key);
-    this.state[e.key] = t ?? J(e), this.listening || (this.listening = !0, typeof window < "u" && window.addEventListener("storage", this.onStorageEvent)), this.dispatch(e.key);
+    const t = J(e), s = this.readFromStorage(e.key), r = s !== null && (e.type === "boolean" && typeof s == "boolean" || e.type === "select" && typeof s == "string" && e.options.includes(s));
+    this.state[e.key] = r ? s : t, this.listening || (this.listening = !0, typeof window < "u" && window.addEventListener("storage", this.onStorageEvent)), this.dispatch(e.key);
   }
   unregister(e) {
     this.configs.delete(e), delete this.state[e], this.dispatch();
@@ -660,10 +660,10 @@ class Je extends EventTarget {
   }
 }
 const u = new Je();
-var Xe = Object.defineProperty, Ye = Object.getOwnPropertyDescriptor, R = (i, e, t, s) => {
-  for (var r = s > 1 ? void 0 : s ? Ye(e, t) : e, o = i.length - 1, n; o >= 0; o--)
+var Ye = Object.defineProperty, Ze = Object.getOwnPropertyDescriptor, R = (i, e, t, s) => {
+  for (var r = s > 1 ? void 0 : s ? Ze(e, t) : e, o = i.length - 1, n; o >= 0; o--)
     (n = i[o]) && (r = (s ? n(e, t, r) : n(r)) || r);
-  return s && r && Xe(e, t, r), r;
+  return s && r && Ye(e, t, r), r;
 };
 if (typeof document < "u" && !document.getElementById("vibe-flag-fouc")) {
   const i = document.createElement("style");
@@ -717,10 +717,10 @@ R([
 C = R([
   N("vibe-flag-boolean")
 ], C);
-var Ze = Object.defineProperty, Ge = Object.getOwnPropertyDescriptor, se = (i, e, t, s) => {
+var Xe = Object.defineProperty, Ge = Object.getOwnPropertyDescriptor, se = (i, e, t, s) => {
   for (var r = s > 1 ? void 0 : s ? Ge(e, t) : e, o = i.length - 1, n; o >= 0; o--)
     (n = i[o]) && (r = (s ? n(e, t, r) : n(r)) || r);
-  return s && r && Ze(e, t, r), r;
+  return s && r && Xe(e, t, r), r;
 };
 let L = class extends v {
   constructor() {
@@ -780,6 +780,9 @@ let V = class extends v {
   constructor() {
     super(...arguments), this.value = "", this.active = !1;
   }
+  firstUpdated() {
+    this.style.display = "contents";
+  }
   render() {
     return this.active ? f`<slot></slot>` : c;
   }
@@ -793,7 +796,7 @@ ie([
 V = ie([
   N("vibe-flag-option")
 ], V);
-const tt = Z`
+const tt = X`
   :host {
     --vf-bg: #0a0a0a;
     --vf-bg-muted: #171717;
@@ -817,7 +820,7 @@ const tt = Z`
     --vf-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6),
       0 8px 10px -6px rgba(0, 0, 0, 0.6);
   }
-`, st = Z`
+`, st = X`
   :host {
     --vf-bg: #ffffff;
     --vf-bg-muted: #f5f5f5;
@@ -848,7 +851,7 @@ var it = Object.defineProperty, rt = Object.getOwnPropertyDescriptor, j = (i, e,
   return s && r && it(e, t, r), r;
 };
 const ve = "vibeFlagsTheme";
-let y = class extends v {
+let $ = class extends v {
   constructor() {
     super(...arguments), this.open = !1, this.flags = {}, this.configs = [], this.darkMode = !0, this.onFlagChange = () => {
       this.syncFromStore();
@@ -871,19 +874,16 @@ let y = class extends v {
   applyTheme() {
     const i = this.darkMode ? tt : st, e = new CSSStyleSheet();
     e.replaceSync(i.cssText), this.shadowRoot.adoptedStyleSheets = [
-      ...y.elementStyles.map((t) => t.styleSheet),
+      ...$.elementStyles.map((t) => t.styleSheet),
       e
     ];
   }
   syncFromStore() {
     this.configs = u.getConfig(), this.flags = u.getAll();
   }
-  toggleSidebar() {
+  toggle() {
     this.open = !this.open;
   }
-  closeSidebar() {
-    this.open = !1;
-  }
   onToggle(i) {
     const e = this.flags[i];
     u.set(i, !e);
@@ -963,14 +963,12 @@ let y = class extends v {
   render() {
     return f`
       ${this.open ? c : f`
-        <button class="fab" @click=${this.toggleSidebar} aria-label="Toggle feature flags">
+        <button class="fab" @click=${this.toggle} aria-label="Toggle feature flags">
           ${this.renderFlagIcon()}
         </button>
       `}
 
-      <div class="backdrop ${this.open ? "open" : ""}" @click=${this.closeSidebar}></div>
-
-      <div class="sidebar ${this.open ? "open" : ""}">
+      <div class="card ${this.open ? "open" : ""}">
         <div class="header">
           <h2>
             ${this.renderFlagIcon()}
@@ -981,7 +979,7 @@ let y = class extends v {
             <button class="icon-btn" @click=${this.toggleTheme} aria-label="Toggle theme" title="${this.darkMode ? "Switch to light theme" : "Switch to dark theme"}">
               ${this.darkMode ? this.renderSunIcon() : this.renderMoonIcon()}
             </button>
-            <button class="icon-btn" @click=${this.closeSidebar} aria-label="Close">
+            <button class="icon-btn" @click=${this.toggle} aria-label="Close">
               ${this.renderCloseIcon()}
             </button>
           </div>
@@ -1002,8 +1000,8 @@ let y = class extends v {
     `;
   }
 };
-y.styles = [
-  Z`
+$.styles = [
+  X`
       * {
         box-sizing: border-box;
         margin: 0;
@@ -1012,15 +1010,13 @@ y.styles = [
 
       .fab {
         position: fixed;
-        right: 0;
-        top: 50%;
-        transform: translateY(-50%);
+        right: 16px;
+        bottom: 16px;
         z-index: 99999;
-        width: 40px;
-        height: 44px;
+        width: 42px;
+        height: 42px;
         border: 1px solid var(--vf-border);
-        border-right: none;
-        border-radius: var(--vf-radius-lg) 0 0 var(--vf-radius-lg);
+        border-radius: 12px;
         background: var(--vf-bg);
         color: var(--vf-text);
         cursor: pointer;
@@ -1033,94 +1029,80 @@ y.styles = [
       }
 
       .fab:hover {
-        width: 46px;
         background: var(--vf-bg-muted);
+        box-shadow: var(--vf-shadow-xl);
+        transform: translateY(-1px);
       }
 
       .fab svg {
-        width: 20px;
-        height: 20px;
+        width: 18px;
+        height: 18px;
         flex-shrink: 0;
       }
 
-      .backdrop {
-        position: fixed;
-        inset: 0;
-        z-index: 100000;
-        background: rgba(0, 0, 0, 0.4);
-        opacity: 0;
-        transition: opacity 0.3s ease;
-        pointer-events: none;
-      }
-
-      .backdrop.open {
-        opacity: 1;
-        pointer-events: auto;
-      }
-
-      .sidebar {
+      .card {
         position: fixed;
-        top: 0;
-        right: 0;
-        bottom: 0;
+        right: 16px;
+        bottom: 16px;
         z-index: 100001;
-        width: 340px;
-        max-width: 90vw;
+        width: 300px;
+        max-width: calc(100vw - 32px);
+        max-height: calc(100vh - 32px);
         background: var(--vf-bg);
-        border-left: 1px solid var(--vf-border);
+        border: 1px solid var(--vf-border);
+        border-radius: 14px;
         box-shadow: var(--vf-shadow-xl);
-        transform: translateX(100%);
-        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        display: flex;
-        flex-direction: column;
         font-family: var(--vf-font);
         color: var(--vf-text);
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        opacity: 0;
+        transform: translateY(8px) scale(0.96);
+        pointer-events: none;
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
       }
 
-      .sidebar.open {
-        transform: translateX(0);
+      .card.open {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+        pointer-events: auto;
       }
 
       .header {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        padding: 16px 20px;
+        padding: 12px 14px;
         border-bottom: 1px solid var(--vf-border);
         flex-shrink: 0;
       }
 
-      .header-left {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-      }
-
       .header h2 {
-        font-size: 16px;
+        font-size: 13px;
         font-weight: 600;
-        letter-spacing: -0.025em;
+        letter-spacing: -0.01em;
         display: flex;
         align-items: center;
-        gap: 8px;
+        gap: 7px;
       }
 
       .header h2 svg {
-        width: 18px;
-        height: 18px;
+        width: 15px;
+        height: 15px;
         color: var(--vf-accent);
       }
 
       .header-actions {
         display: flex;
         align-items: center;
-        gap: 4px;
+        gap: 2px;
       }
 
       .badge {
-        font-size: 11px;
+        font-size: 10px;
         font-weight: 500;
-        padding: 2px 7px;
+        padding: 1px 6px;
         border-radius: 9999px;
         background: var(--vf-bg-muted);
         color: var(--vf-text-muted);
@@ -1128,8 +1110,8 @@ y.styles = [
       }
 
       .icon-btn {
-        width: 32px;
-        height: 32px;
+        width: 28px;
+        height: 28px;
         border: none;
         border-radius: var(--vf-radius);
         background: transparent;
@@ -1147,18 +1129,17 @@ y.styles = [
       }
 
       .icon-btn svg {
-        width: 16px;
-        height: 16px;
+        width: 14px;
+        height: 14px;
       }
 
       .flags {
-        flex: 1;
         overflow-y: auto;
-        padding: 8px 0;
+        flex: 1;
       }
 
       .flag-item {
-        padding: 12px 20px;
+        padding: 10px 14px;
         transition: background 0.1s ease;
       }
 
@@ -1171,13 +1152,13 @@ y.styles = [
       }
 
       .flag-label {
-        font-size: 13px;
+        font-size: 12px;
         font-weight: 500;
-        margin-bottom: 2px;
+        margin-bottom: 1px;
       }
 
       .flag-key {
-        font-size: 11px;
+        font-size: 10px;
         color: var(--vf-text-muted);
         font-family: 'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Consolas,
           monospace;
@@ -1187,7 +1168,7 @@ y.styles = [
         display: flex;
         align-items: center;
         justify-content: space-between;
-        gap: 12px;
+        gap: 10px;
       }
 
       .flag-info {
@@ -1198,8 +1179,8 @@ y.styles = [
       /* Toggle switch */
       .toggle {
         position: relative;
-        width: 40px;
-        height: 22px;
+        width: 36px;
+        height: 20px;
         flex-shrink: 0;
       }
 
@@ -1213,7 +1194,7 @@ y.styles = [
       .toggle-track {
         position: absolute;
         inset: 0;
-        border-radius: 11px;
+        border-radius: 10px;
         background: var(--vf-border);
         cursor: pointer;
         transition: background 0.2s ease;
@@ -1227,8 +1208,8 @@ y.styles = [
         position: absolute;
         top: 2px;
         left: 2px;
-        width: 18px;
-        height: 18px;
+        width: 16px;
+        height: 16px;
         border-radius: 50%;
         background: white;
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
@@ -1237,7 +1218,7 @@ y.styles = [
       }
 
       .toggle input:checked ~ .toggle-thumb {
-        transform: translateX(18px);
+        transform: translateX(16px);
       }
 
       /* Select dropdown */
@@ -1249,16 +1230,16 @@ y.styles = [
       .select {
         appearance: none;
         -webkit-appearance: none;
-        font-size: 13px;
+        font-size: 12px;
         font-family: var(--vf-font);
-        padding: 6px 30px 6px 10px;
+        padding: 5px 26px 5px 8px;
         border: 1px solid var(--vf-border);
         border-radius: var(--vf-radius);
         background: var(--vf-bg);
         color: var(--vf-text);
         cursor: pointer;
         outline: none;
-        min-width: 100px;
+        min-width: 80px;
         transition: border-color 0.15s ease;
       }
 
@@ -1273,7 +1254,7 @@ y.styles = [
 
       .select-chevron {
         position: absolute;
-        right: 8px;
+        right: 6px;
         top: 50%;
         transform: translateY(-50%);
         pointer-events: none;
@@ -1281,21 +1262,21 @@ y.styles = [
       }
 
       .select-chevron svg {
-        width: 14px;
-        height: 14px;
+        width: 12px;
+        height: 12px;
       }
 
       /* Footer */
       .footer {
-        padding: 12px 20px;
+        padding: 10px 14px;
         border-top: 1px solid var(--vf-border);
         flex-shrink: 0;
       }
 
       .reset-btn {
         width: 100%;
-        padding: 8px 16px;
-        font-size: 13px;
+        padding: 6px 12px;
+        font-size: 12px;
         font-weight: 500;
         font-family: var(--vf-font);
         border: 1px solid var(--vf-border);
@@ -1312,33 +1293,33 @@ y.styles = [
       }
 
       .empty {
-        padding: 40px 20px;
+        padding: 24px 14px;
         text-align: center;
         color: var(--vf-text-muted);
-        font-size: 13px;
+        font-size: 12px;
       }
     `
 ];
 j([
   H()
-], y.prototype, "open", 2);
+], $.prototype, "open", 2);
 j([
   H()
-], y.prototype, "flags", 2);
+], $.prototype, "flags", 2);
 j([
   H()
-], y.prototype, "configs", 2);
+], $.prototype, "configs", 2);
 j([
   H()
-], y.prototype, "darkMode", 2);
-y = j([
+], $.prototype, "darkMode", 2);
+$ = j([
   N("vibe-toolbar")
-], y);
+], $);
 export {
   C as VibeFlagBoolean,
   V as VibeFlagOption,
   L as VibeFlagSelect,
   ge as VibeFlags,
-  y as VibeToolbar,
+  $ as VibeToolbar,
   u as flagStore
 };