@alegendstale/holly-components 2.0.8 → 2.0.10

package/dist/node_modules/style-observer/src/style-observer.js

@@ -0,0 +1,98 @@
+import h, { resolveOptions as g } from "./element-style-observer.js";
+import { toArray as n } from "./util.js";
+class p {
+  /**
+   * @type { WeakMap<Element, ElementStyleObserver> }
+   */
+  elementObservers = /* @__PURE__ */ new WeakMap();
+  /**
+   * @param {StyleObserverCallback} callback
+   * @param {StyleObserverOptions | string | string[]} [options]
+   */
+  constructor(t, e) {
+    this.callback = t, e = g(e), e.targets ??= [], e.target && e.targets.push(e.target), this.options = e, this.options.targets.length > 0 && this.options.properties.length > 0 && this.observe(this.options.targets, this.options.properties);
+  }
+  /**
+   * @type {StyleObserverCallback}
+   */
+  changed(t) {
+    this.callback(t);
+  }
+  /**
+   * Observe one or more targets for changes to one or more CSS properties.
+   *
+   * @overload
+   * @param {Element | Element[]} targets
+   * @param {string | string[]} properties
+   * @returns {void}
+   *
+   * @overload
+   * @param {string | string[]} properties
+   * @param {Element | Element[]} targets
+   * @returns {void}
+   *
+   * @overload
+   * @param {...(string | Element | (string | Element)[]) } propertiesOrTargets
+   * @returns {void}
+   */
+  observe(...t) {
+    let { targets: e, properties: r } = l(...t);
+    if (e.length === 0 && (e = this.options.targets), e.length !== 0)
+      for (let i of e) {
+        let s = this.elementObservers.get(i);
+        s || (s = new h(
+          i,
+          (a) => this.changed(a),
+          this.options
+        ), this.elementObservers.set(i, s)), s.observe(r);
+      }
+  }
+  /**
+   * Stop observing one or more targets for changes to one or more CSS properties.
+   *
+   * @overload
+   * @param {Element | Element[]} targets
+   * @param {string | string[]} properties
+   * @returns {void}
+   *
+   * @overload
+   * @param {string | string[]} properties
+   * @param {Element | Element[]} targets
+   * @returns {void}
+   *
+   * @overload
+   * @param {...(string | Element | (string | Element)[]) } propertiesOrTargets
+   * @returns {void}
+   */
+  unobserve(...t) {
+    let { targets: e, properties: r } = l(...t);
+    if (e.length === 0 && (e = this.options.targets), e.length !== 0) {
+      r.length === 0 && (r = this.options.properties);
+      for (let i of e) {
+        let s = this.elementObservers.get(i);
+        s && s.unobserve(r);
+      }
+    }
+  }
+  /**
+   * Update the transition for one or more targets.
+   * @param {Element | Element[]} targets
+   * @returns {void}
+   */
+  updateTransition(t) {
+    for (let e of n(t)) {
+      let r = this.elementObservers.get(e);
+      r && r.updateTransition();
+    }
+  }
+}
+function l(o, t) {
+  let e = [...n(o), ...n(t)];
+  o = [], t = [];
+  for (let r of e)
+    (typeof r == "string" || r instanceof String ? t : o).push(r);
+  return { targets: o, properties: t };
+}
+export {
+  p as default
+};

package/dist/node_modules/style-observer/src/util/Bug.js

@@ -0,0 +1,36 @@
+class t {
+  constructor({ name: e, initialValue: i, detect: s }) {
+    this.name = e, this.initialValue = i ?? !0, this.detect = s, t.all[e] = this, Object.defineProperty(t, e, {
+      get() {
+        return this.all[e].value;
+      },
+      configurable: !0,
+      enumerable: !0
+    });
+  }
+  #t;
+  #e;
+  /**
+   * Get whether the bug is present or not, or a promise that will resolve to this value when detection is complete.
+   */
+  get valuePending() {
+    return this.#t !== void 0 ? this.#t : this.#e !== void 0 ? this.#e : (this.#e = this.detect(), this.#e instanceof Promise ? this.#e.then((e) => this.#t = e) : this.#t = this.#e, this.#e);
+  }
+  /**
+   * Synchronously get either whether the bug is present (if already detected or detection is sync)
+   * or kick off detection and return the initial value if detection is async
+   */
+  get value() {
+    if (this.#t !== void 0)
+      return this.#t;
+    let e = this.valuePending;
+    return e instanceof Promise ? this.initialValue : e;
+  }
+  static all = {};
+  static detectAll() {
+    return Promise.all(Object.values(t.all).map((e) => e.valuePending));
+  }
+}
+export {
+  t as default
+};

package/dist/node_modules/style-observer/src/util/MultiWeakMap.js

@@ -0,0 +1,20 @@
+class r extends WeakMap {
+  has(e, s) {
+    return arguments.length === 1 ? super.has(e) : super.get(e)?.has(s) || !1;
+  }
+  add(e, s) {
+    let t = super.get(e) ?? /* @__PURE__ */ new Set();
+    t.add(s), super.set(e, t);
+  }
+  delete(e, ...s) {
+    let t = super.get(e);
+    if (t) {
+      for (let a of s)
+        t.delete(a);
+      t.size === 0 && super.delete(e);
+    }
+  }
+}
+export {
+  r as default
+};

package/dist/node_modules/style-observer/src/util/adopt-css.js

@@ -0,0 +1,15 @@
+let d = /* @__PURE__ */ new WeakMap();
+function n(l, e = globalThis.document) {
+  e = e.ownerDocument ?? e;
+  let a = e.defaultView;
+  if (e.adoptedStyleSheets) {
+    let t = new a.CSSStyleSheet();
+    return t.replaceSync(l), Object.isFrozen(e.adoptedStyleSheets) ? e.adoptedStyleSheets = [...e.adoptedStyleSheets, t] : e.adoptedStyleSheets.push(t), t;
+  } else {
+    let t = d.get(e);
+    return t || (t = e.head.appendChild(e.createElement("style")), d.set(e, t)), t.insertAdjacentText("beforeend", l), t.sheet;
+  }
+}
+export {
+  n as default
+};

package/dist/node_modules/style-observer/src/util/bugs/adopted-style-sheet.js

@@ -0,0 +1,28 @@
+import d from "../gentle-register-property.js";
+import a from "../Bug.js";
+new a({
+  name: "ADOPTED_STYLE_SHEET",
+  detect() {
+    let e = document.createElement("div");
+    if (document.body.append(e), e.attachShadow({ mode: "open" }), Object.isFrozen(e.shadowRoot.adoptedStyleSheets))
+      return e.remove(), !1;
+    d("--style-observer-adopted-style-sheet-bug", {
+      syntax: "<number>",
+      inherits: !0,
+      initialValue: 0
+    });
+    let t = new CSSStyleSheet();
+    t.insertRule(`
+			:host {
+				/* This declaration shouldn't be empty for the bug to trigger */
+				color: transparent;
+			}
+		`), e.shadowRoot.adoptedStyleSheets.push(t);
+    let r = t.cssRules[0].style;
+    r.setProperty("--style-observer-adopted-style-sheet-bug", "1");
+    let o = getComputedStyle(e), s = o.getPropertyValue("--style-observer-adopted-style-sheet-bug");
+    r.removeProperty("--style-observer-adopted-style-sheet-bug"), o = getComputedStyle(e);
+    let l = o.getPropertyValue("--style-observer-adopted-style-sheet-bug");
+    return e.remove(), s === l;
+  }
+});

package/dist/node_modules/style-observer/src/util/bugs/transitionrun-loop.js

@@ -0,0 +1,15 @@
+import s from "../Bug.js";
+new s({
+  name: "TRANSITIONRUN_EVENT_LOOP",
+  detect() {
+    let e = document.createElement("div");
+    document.body.appendChild(e);
+    let t = "--bar-" + Date.now();
+    return e.style.cssText = `${t}: 1; transition: ${t} 1ms step-start allow-discrete`, new Promise((r) => {
+      let n = 0;
+      requestAnimationFrame(() => {
+        setTimeout((o) => r(n > 1), 50), e.addEventListener("transitionrun", (o) => n++), e.style.setProperty(t, "2");
+      });
+    }).finally(() => e.remove());
+  }
+});

package/dist/node_modules/style-observer/src/util/bugs/unregistered-transition.js

@@ -0,0 +1,14 @@
+import o from "../Bug.js";
+new o({
+  name: "UNREGISTERED_TRANSITION",
+  detect() {
+    let e = document.createElement("div");
+    document.body.appendChild(e);
+    let t = "--foo-" + Date.now();
+    return e.style.cssText = `${t}: 1; transition: ${t} 1ms step-start allow-discrete`, new Promise((r) => {
+      requestAnimationFrame(() => {
+        setTimeout((n) => r(!0), 30), e.addEventListener("transitionstart", (n) => r(!1)), e.style.setProperty(t, "2");
+      });
+    }).finally(() => e.remove());
+  }
+});

package/dist/node_modules/style-observer/src/util/gentle-register-property.js

@@ -0,0 +1,41 @@
+import u from "./adopt-css.js";
+import g from "./is-registered-property.js";
+const s = {
+  "<angle>": "0deg",
+  "<color>": "transparent",
+  "<custom-ident>": "none",
+  "<image>": "linear-gradient(transparent 0% 100%)",
+  "<integer>": "0",
+  "<length>": "0px",
+  "<length-percentage>": "0px",
+  "<number>": "0",
+  "<percentage>": "0%",
+  "<resolution>": "1dppx",
+  "<string>": "''",
+  "<time>": "0s",
+  "<transform-function>": "scale(1)",
+  "<transform-list>": "scale(1)",
+  "<url>": "url('')"
+};
+let a = /* @__PURE__ */ new Map();
+function f(t, n = {}, r = globalThis.document) {
+  let i = a.get(r);
+  if (!t.startsWith("--") || i && t in i || g(t, r))
+    return;
+  let e = {
+    syntax: n.syntax || "*",
+    inherits: n.inherits ?? !0
+  };
+  n.initialValue !== void 0 ? e.initialValue = n.initialValue : e.syntax !== "*" && e.syntax in s && (e.initialValue = s[e.syntax]);
+  let l = u(`@layer style-observer-registered-properties {
+		@property ${t} {
+			syntax: "${e.syntax}";
+			inherits: ${e.inherits};
+			${e.initialValue !== void 0 ? `initial-value: ${e.initialValue};` : ""}
+		}
+	}`, r);
+  i || (i = {}, a.set(r, i)), i[t] = l;
+}
+export {
+  f as default
+};

package/dist/node_modules/style-observer/src/util/is-registered-property.js

@@ -0,0 +1,15 @@
+function n(t, l = globalThis.document) {
+  let e = l.createElement("div");
+  l.body.append(e);
+  let d = "foo(bar)";
+  e.style.setProperty(t, d);
+  let i = getComputedStyle(e).getPropertyValue(t), a = !0;
+  if (i === d) {
+    let r = e.appendChild(l.createElement("div"));
+    a = getComputedStyle(r).getPropertyValue(t) !== d;
+  }
+  return e.remove(), a;
+}
+export {
+  n as default
+};

package/dist/node_modules/style-observer/src/util.js

@@ -0,0 +1,61 @@
+function c(e) {
+  return e == null ? [] : Array.isArray(e) ? e : typeof e != "string" && typeof e[Symbol.iterator] == "function" ? Array.from(e) : [e];
+}
+function h(e) {
+  return e ? new Promise((t) => setTimeout(t, e)) : new Promise((t) => requestAnimationFrame(t));
+}
+let o;
+function m(e) {
+  o ??= document.createElement("div");
+  let t = o.style;
+  t[e] = "inherit";
+  let n = [...t];
+  return n.length === 0 && (n = [e]), t.cssText = "", n;
+}
+function u(e) {
+  let t = e.matchAll(/(?:^|\s)([+-]?(?:\d+|\d*\.\d+))\s*(ms|s)?(?=\s|$)/g), n = [];
+  for (let r of t) {
+    let [, i, l] = r;
+    i = parseFloat(i), l === "s" && (i *= 1e3), n.push(i);
+  }
+  return n;
+}
+function d(e, t) {
+  t = a(t);
+  let n;
+  if (e === "all")
+    n = /\b\w+\b/g;
+  else {
+    let f = [.../* @__PURE__ */ new Set([...m(e), e, "all"])];
+    n = RegExp(`(?:^|\\s)(${f.join("|")})\\b`);
+  }
+  let r = t.findLast((f) => n.test(f)), i = r ? u(r) : [0, 0];
+  i.length === 0 ? i = [0, 0] : i.length === 1 && i.push(0);
+  let [l, s] = i;
+  return { duration: l, delay: s };
+}
+function a(e) {
+  let t = [], n = 0, r = [];
+  for (let i of e.matchAll(/[,()]/g)) {
+    let l = i[0];
+    if (l === ",") {
+      if (r.length === 0) {
+        let s = e.slice(n, i.index);
+        t.push(s.trim()), n = i.index + 1;
+      }
+    } else l === "(" ? r.push("(") : l === ")" && r.pop();
+  }
+  if (n < e.length) {
+    let i = e.slice(n);
+    t.push(i.trim());
+  }
+  return t;
+}
+export {
+  m as getLonghands,
+  d as getTimesFor,
+  u as parseTimes,
+  a as splitCommas,
+  c as toArray,
+  h as wait
+};

package/package.json

@@ -2,17 +2,21 @@
 	"private": false,
 	"name": "@alegendstale/holly-components",
 	"description": "Reusable UI components created using lit",
-	"version": "2.0.8",
+	"version": "2.0.10",
 	"author": "ALegendsTale",
 	"license": "GPL-3.0",
 	"customElements": "custom-elements.json",
 	"type": "module",
 	"exports": {
 		"./components": "./dist/components",
-		"./decorators": "./dist/decorators",
-		"./utils": "./dist/utils",
 		"./components/*.js": "./dist/components/*.js",
+		"./controllers": "./dist/controllers",
+		"./controllers/*.js": "./dist/controllers/*.js",
+		"./decorators": "./dist/decorators",
 		"./decorators/*.js": "./dist/decorators/*.js",
+		"./directives": "./dist/directives",
+		"./directives/*.js": "./dist/directives/*.js",
+		"./utils": "./dist/utils",
 		"./utils/*.js": "./dist/utils/*.js",
 		"./custom-elements.json": "./custom-elements.json",
 		"./package.json": "./package.json"
@@ -32,7 +36,11 @@
 		"build": "vite build && npm run build:types && npm run cem",
 		"build:types": "tsc -p tsconfig.prod.json",
 		"cem": "cem analyze --litelement",
-		"storybook": "storybook dev -p 6006"
+		"storybook": "storybook dev -p 6006",
+		"build:watch": "vite build --watch",
+		"types:watch": "tsc -p tsconfig.prod.json --watch",
+		"prewatch": "rimraf dist",
+		"watch": "concurrently \"npm run build:watch\" \"npm run types:watch\""
 	},
 	"sideEffects": [
 		"dist/components/**/*.js"
@@ -41,7 +49,8 @@
 		"colorsea": "^1.2.2",
 		"lit": "^3.3.1",
 		"lucide": "^0.556.0",
-		"quantize": "^1.0.2"
+		"quantize": "^1.0.2",
+		"style-observer": "^0.1.2"
 	},
 	"devDependencies": {
 		"@chromatic-com/storybook": "^4.1.3",
@@ -57,6 +66,7 @@
 		"@vitest/coverage-v8": "^4.0.15",
 		"@wc-toolkit/cem-validator": "^1.0.3",
 		"@wc-toolkit/storybook-helpers": "^10.0.0",
+		"concurrently": "^9.2.1",
 		"glob": "^13.0.0",
 		"playwright": "^1.57.0",
 		"rimraf": "^6.1.2",

package/dist/utils/ResponsiveController.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ResponsiveController.d.ts","sourceRoot":"","sources":["../../src/utils/ResponsiveController.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAEjE,qBAAa,oBAAqB,YAAW,kBAAkB;IAC9D,QAAQ,EAAE,OAAO,CAAS;IAC1B,OAAO,CAAC,IAAI,CAAyB;IACrC,OAAO,CAAC,cAAc,CAAiB;IACvC,OAAO,CAAC,sBAAsB,CAAuC;gBAEzD,IAAI,EAAE,sBAAsB,EAAE,gBAAgB,GAAE,MAAgB;IAS5E,aAAa,IAAI,IAAI;IAMrB,gBAAgB,IAAI,IAAI;CAGxB"}