sibujs 1.0.7 → 1.0.8

package/dist/chunk-6LSNVCS2.js

@@ -0,0 +1,937 @@
+import {
+  bindAttribute
+} from "./chunk-SDLZDHKP.js";
+import {
+  derived
+} from "./chunk-FGOEVHY3.js";
+import {
+  effect
+} from "./chunk-PZEGYCF5.js";
+import {
+  signal,
+  track
+} from "./chunk-YECR7UIA.js";
+
+// src/ui/form.ts
+function required(message = "This field is required") {
+  return (value) => {
+    if (value == null || value === "" || Array.isArray(value) && value.length === 0) {
+      return message;
+    }
+    return null;
+  };
+}
+function minLength(min2, message) {
+  return (value) => {
+    if (value && value.length < min2) {
+      return message || `Must be at least ${min2} characters`;
+    }
+    return null;
+  };
+}
+function maxLength(max2, message) {
+  return (value) => {
+    if (value && value.length > max2) {
+      return message || `Must be at most ${max2} characters`;
+    }
+    return null;
+  };
+}
+function matchesPattern(regex, message = "Invalid format") {
+  return (value) => {
+    if (value && !regex.test(value)) {
+      return message;
+    }
+    return null;
+  };
+}
+function email(message = "Invalid email address") {
+  return matchesPattern(/^[^\s@]+@[^\s@]+\.[^\s@]+$/, message);
+}
+function min(minVal, message) {
+  return (value) => {
+    if (value != null && value < minVal) {
+      return message || `Must be at least ${minVal}`;
+    }
+    return null;
+  };
+}
+function max(maxVal, message) {
+  return (value) => {
+    if (value != null && value > maxVal) {
+      return message || `Must be at most ${maxVal}`;
+    }
+    return null;
+  };
+}
+function custom(fn, message) {
+  return (value) => fn(value) ? null : message;
+}
+function bindField(field, extras) {
+  const fieldOn = {
+    input: (e) => {
+      const target = e.target;
+      if (target.type === "checkbox") {
+        field.set(target.checked);
+      } else {
+        field.set(target.value);
+      }
+    },
+    change: (e) => {
+      const target = e.target;
+      if ("checked" in target && target.type === "checkbox") {
+        field.set(target.checked);
+      } else {
+        field.set(target.value);
+      }
+    },
+    blur: () => field.touch()
+  };
+  const { on: extraOn, value: _ignoreValue, ...restExtras } = extras ?? {};
+  const mergedOn = extraOn && typeof extraOn === "object" ? { ...fieldOn, ...extraOn } : fieldOn;
+  return {
+    value: field.value,
+    on: mergedOn,
+    ...restExtras
+  };
+}
+function form(config) {
+  const fieldEntries = Object.entries(config);
+  const fieldMap = {};
+  const [manualErrors, setManualErrors] = signal({});
+  for (const [name, cfg] of fieldEntries) {
+    const [value, setValue] = signal(cfg.initial);
+    const [isTouched, setTouched] = signal(false);
+    const error = derived(() => {
+      const manual = manualErrors();
+      if (manual[name]) return manual[name];
+      const val = value();
+      if (!cfg.validators) return null;
+      for (const validator of cfg.validators) {
+        const msg = validator(val);
+        if (msg) return msg;
+      }
+      return null;
+    });
+    fieldMap[name] = {
+      value,
+      set: setValue,
+      error,
+      touched: isTouched,
+      touch: () => setTouched(true),
+      reset: () => {
+        setValue(cfg.initial);
+        setTouched(false);
+        setManualErrors((prev) => ({ ...prev, [name]: null }));
+      }
+    };
+  }
+  const errors = derived(() => {
+    const result = {};
+    for (const [name, field] of Object.entries(fieldMap)) {
+      result[name] = field.error();
+    }
+    return result;
+  });
+  const isValid = derived(() => {
+    for (const field of Object.values(fieldMap)) {
+      if (field.error() != null) return false;
+    }
+    return true;
+  });
+  const isDirty = derived(() => {
+    for (const [name, cfg] of fieldEntries) {
+      if (!Object.is(fieldMap[name].value(), cfg.initial)) return true;
+    }
+    return false;
+  });
+  const touchedState = derived(() => {
+    const result = {};
+    for (const [name, field] of Object.entries(fieldMap)) {
+      result[name] = field.touched();
+    }
+    return result;
+  });
+  const values = derived(() => {
+    const result = {};
+    for (const [name, field] of Object.entries(fieldMap)) {
+      result[name] = field.value();
+    }
+    return result;
+  });
+  function handleSubmit(onSubmit) {
+    return (e) => {
+      if (e) e.preventDefault();
+      for (const field of Object.values(fieldMap)) {
+        field.touch();
+      }
+      if (isValid()) {
+        onSubmit(values());
+      }
+    };
+  }
+  function reset() {
+    for (const field of Object.values(fieldMap)) {
+      field.reset();
+    }
+  }
+  function setError(field, message) {
+    setManualErrors((prev) => ({ ...prev, [field]: message }));
+  }
+  return {
+    fields: fieldMap,
+    errors,
+    isValid,
+    isDirty,
+    touched: touchedState,
+    values,
+    handleSubmit,
+    reset,
+    setError
+  };
+}
+
+// src/ui/virtualList.ts
+function VirtualList(props) {
+  const overscan = props.overscan ?? 3;
+  const [scrollTop, setScrollTop] = signal(0);
+  const container = document.createElement("div");
+  container.style.overflow = "auto";
+  container.style.height = `${props.containerHeight}px`;
+  container.style.position = "relative";
+  if (props.class) container.className = props.class;
+  const spacer = document.createElement("div");
+  spacer.style.position = "relative";
+  const content = document.createElement("div");
+  content.style.position = "absolute";
+  content.style.left = "0";
+  content.style.right = "0";
+  spacer.appendChild(content);
+  container.appendChild(spacer);
+  container.addEventListener("scroll", () => {
+    setScrollTop(container.scrollTop);
+  });
+  const update = () => {
+    const items = props.items();
+    const totalHeight = items.length * props.itemHeight;
+    spacer.style.height = `${totalHeight}px`;
+    const currentScroll = scrollTop();
+    const startIndex = Math.max(0, Math.floor(currentScroll / props.itemHeight) - overscan);
+    const visibleCount = Math.ceil(props.containerHeight / props.itemHeight) + 2 * overscan;
+    const endIndex = Math.min(items.length, startIndex + visibleCount);
+    content.style.top = `${startIndex * props.itemHeight}px`;
+    content.innerHTML = "";
+    for (let i = startIndex; i < endIndex; i++) {
+      const itemEl = props.renderItem(items[i], i);
+      itemEl.style.height = `${props.itemHeight}px`;
+      itemEl.style.boxSizing = "border-box";
+      content.appendChild(itemEl);
+    }
+  };
+  effect(update);
+  return container;
+}
+
+// src/ui/intersection.ts
+function intersection(options) {
+  const [isIntersecting, setIsIntersecting] = signal(false);
+  const [ratio, setRatio] = signal(0);
+  let observer = null;
+  let currentElement = null;
+  function observe(element) {
+    unobserve();
+    currentElement = element;
+    observer = new IntersectionObserver((entries) => {
+      const entry = entries[0];
+      if (entry) {
+        setIsIntersecting(entry.isIntersecting);
+        setRatio(entry.intersectionRatio);
+      }
+    }, options);
+    observer.observe(element);
+  }
+  function unobserve() {
+    if (observer) {
+      if (currentElement) observer.unobserve(currentElement);
+      observer.disconnect();
+      observer = null;
+      currentElement = null;
+    }
+  }
+  return {
+    isIntersecting,
+    intersectionRatio: ratio,
+    observe,
+    unobserve
+  };
+}
+function lazyLoad(element, loader, options) {
+  const observer = new IntersectionObserver((entries) => {
+    for (const entry of entries) {
+      if (entry.isIntersecting) {
+        loader();
+        observer.disconnect();
+        break;
+      }
+    }
+  }, options);
+  observer.observe(element);
+  return () => observer.disconnect();
+}
+
+// src/ui/inputMask.ts
+function inputMask(options) {
+  const placeholder = options.placeholder || "_";
+  const [value, setValue] = signal("");
+  const [rawValue, setRawValue] = signal("");
+  function applyMask(raw) {
+    let result = "";
+    let rawIndex = 0;
+    for (let i = 0; i < options.pattern.length && rawIndex < raw.length; i++) {
+      const maskChar = options.pattern[i];
+      if (maskChar === "9") {
+        while (rawIndex < raw.length && !/\d/.test(raw[rawIndex])) rawIndex++;
+        if (rawIndex < raw.length) {
+          result += raw[rawIndex++];
+        }
+      } else if (maskChar === "A") {
+        while (rawIndex < raw.length && !/[a-zA-Z]/.test(raw[rawIndex])) rawIndex++;
+        if (rawIndex < raw.length) {
+          result += raw[rawIndex++];
+        }
+      } else if (maskChar === "*") {
+        result += raw[rawIndex++];
+      } else {
+        result += maskChar;
+        if (raw[rawIndex] === maskChar) rawIndex++;
+      }
+    }
+    return result;
+  }
+  function extractRaw(masked) {
+    let raw = "";
+    for (let i = 0; i < masked.length && i < options.pattern.length; i++) {
+      const maskChar = options.pattern[i];
+      if (maskChar === "9" || maskChar === "A" || maskChar === "*") {
+        raw += masked[i];
+      }
+    }
+    return raw;
+  }
+  function bind(input) {
+    input.addEventListener("input", () => {
+      const raw = input.value.replace(/[^a-zA-Z0-9]/g, "");
+      const masked = applyMask(raw);
+      setValue(masked);
+      setRawValue(extractRaw(masked));
+      input.value = masked;
+    });
+    input.addEventListener("focus", () => {
+      if (!input.value) {
+        const display = options.pattern.replace(/9/g, placeholder).replace(/A/g, placeholder).replace(/\*/g, placeholder);
+        input.placeholder = display;
+      }
+    });
+  }
+  return { value, rawValue, bind };
+}
+function phoneMask() {
+  return { pattern: "(999) 999-9999" };
+}
+function dateMask() {
+  return { pattern: "99/99/9999" };
+}
+function creditCardMask() {
+  return { pattern: "9999 9999 9999 9999" };
+}
+function timeMask() {
+  return { pattern: "99:99" };
+}
+function ssnMask() {
+  return { pattern: "999-99-9999" };
+}
+function zipMask() {
+  return { pattern: "99999" };
+}
+
+// src/ui/a11y.ts
+function aria(element, attrs) {
+  for (const [key, value] of Object.entries(attrs)) {
+    const ariaKey = key.startsWith("aria-") ? key : `aria-${key}`;
+    if (typeof value === "function") {
+      const getter = value;
+      track(() => {
+        element.setAttribute(ariaKey, String(getter()));
+      });
+    } else {
+      element.setAttribute(ariaKey, String(value));
+    }
+  }
+}
+function focus() {
+  const [isFocused, setIsFocused] = signal(false);
+  let currentElement = null;
+  function bind(element) {
+    currentElement = element;
+    element.addEventListener("focus", () => setIsFocused(true));
+    element.addEventListener("blur", () => setIsFocused(false));
+  }
+  function focus2() {
+    currentElement?.focus();
+  }
+  function blur() {
+    currentElement?.blur();
+  }
+  return { isFocused, focus: focus2, blur, bind };
+}
+function FocusTrap(nodes, options = {}) {
+  const container = document.createElement("div");
+  container.setAttribute("data-sibu-focus-trap", "true");
+  container.appendChild(nodes);
+  const previouslyFocused = document.activeElement;
+  container.addEventListener("keydown", (e) => {
+    if (e.key !== "Tab") return;
+    const focusable = container.querySelectorAll(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    );
+    if (focusable.length === 0) return;
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (e.shiftKey) {
+      if (document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      }
+    } else {
+      if (document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    }
+  });
+  if (options.autoFocus !== false) {
+    queueMicrotask(() => {
+      const first = container.querySelector(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      first?.focus();
+    });
+  }
+  if (options.restoreFocus !== false) {
+    const observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        for (const removed of Array.from(mutation.removedNodes)) {
+          if (removed === container || removed.contains(container)) {
+            previouslyFocused?.focus();
+            observer.disconnect();
+            return;
+          }
+        }
+      }
+    });
+    queueMicrotask(() => {
+      if (container.parentNode) {
+        observer.observe(container.parentNode, { childList: true });
+      }
+    });
+  }
+  return container;
+}
+function hotkey(combo, handler, options = {}) {
+  let key = combo;
+  let needCtrl = options.ctrl ?? false;
+  let needShift = options.shift ?? false;
+  let needAlt = options.alt ?? false;
+  let needMeta = options.meta ?? false;
+  if (combo.includes("+")) {
+    const parts = combo.toLowerCase().split("+");
+    key = parts[parts.length - 1];
+    for (let i = 0; i < parts.length - 1; i++) {
+      const mod = parts[i];
+      if (mod === "ctrl" || mod === "control") needCtrl = true;
+      else if (mod === "shift") needShift = true;
+      else if (mod === "alt") needAlt = true;
+      else if (mod === "meta" || mod === "cmd" || mod === "command") needMeta = true;
+    }
+  }
+  const listener = (e) => {
+    const ke = e;
+    if (ke.key.toLowerCase() !== key.toLowerCase()) return;
+    if (needCtrl !== ke.ctrlKey) return;
+    if (needShift !== ke.shiftKey) return;
+    if (needAlt !== ke.altKey) return;
+    if (needMeta !== ke.metaKey) return;
+    if (options.preventDefault) ke.preventDefault();
+    handler(ke);
+  };
+  document.addEventListener("keydown", listener);
+  return () => document.removeEventListener("keydown", listener);
+}
+function announce(message, priority = "polite") {
+  let region = document.getElementById(`sibu-announce-${priority}`);
+  if (!region) {
+    region = document.createElement("div");
+    region.id = `sibu-announce-${priority}`;
+    region.setAttribute("aria-live", priority);
+    region.setAttribute("aria-atomic", "true");
+    region.setAttribute("role", priority === "assertive" ? "alert" : "status");
+    region.style.cssText = "position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;";
+    document.body.appendChild(region);
+  }
+  region.textContent = "";
+  requestAnimationFrame(() => {
+    if (region) region.textContent = message;
+  });
+}
+
+// src/ui/scopedStyle.ts
+var scopeCounter = 0;
+function sanitizeCSS(css) {
+  let sanitized = css.replace(/@import\s+[^;]+;/gi, "/* @import removed */");
+  sanitized = sanitized.replace(/url\s*\(\s*(?:"[^"]*"|'[^']*'|[^)]*)\s*\)/gi, "/* url() removed */");
+  sanitized = sanitized.replace(/expression\s*\(\s*(?:"[^"]*"|'[^']*'|[^)]*)\s*\)/gi, "/* expression() removed */");
+  sanitized = sanitized.replace(/-moz-binding\s*:[^;]+;/gi, "/* -moz-binding removed */");
+  sanitized = sanitized.replace(/behavior\s*:[^;]+;/gi, "/* behavior removed */");
+  return sanitized;
+}
+function scopedStyle(css) {
+  const id = `sibu-s${scopeCounter++}`;
+  const attr = `data-${id}`;
+  const safeCss = sanitizeCSS(css);
+  const scopedCSS = safeCss.replace(/([^\r\n,{}]+)(,(?=[^}]*{)|\s*{)/g, (match, selector, delimiter) => {
+    const trimmed = selector.trim();
+    if (trimmed.startsWith("@") || trimmed.startsWith("from") || trimmed.startsWith("to") || /^\d+%$/.test(trimmed)) {
+      return match;
+    }
+    return `${trimmed}[${attr}]${delimiter}`;
+  });
+  if (typeof document !== "undefined") {
+    const styleEl = document.createElement("style");
+    styleEl.setAttribute("data-sibu-scope", id);
+    styleEl.textContent = scopedCSS;
+    document.head.appendChild(styleEl);
+  }
+  return { scope: id, attr };
+}
+function withScopedStyle(css, component) {
+  let style = null;
+  return (props) => {
+    if (!style) {
+      style = scopedStyle(css);
+    }
+    const el = component(props);
+    applyScopeRecursive(el, style.attr);
+    return el;
+  };
+}
+function applyScopeRecursive(element, attr) {
+  element.setAttribute(attr, "");
+  for (const child of Array.from(element.children)) {
+    if (child instanceof HTMLElement) {
+      applyScopeRecursive(child, attr);
+    }
+  }
+}
+function removeScopedStyle(scopeId) {
+  const el = document.head.querySelector(`style[data-sibu-scope="${scopeId}"]`);
+  if (el) el.remove();
+}
+
+// src/ui/reactiveAttr.ts
+function bindAttrs(el, attrs) {
+  const teardowns = [];
+  for (const [attr, value] of Object.entries(attrs)) {
+    if (typeof value === "function") {
+      const teardown = bindAttribute(el, attr, value);
+      teardowns.push(teardown);
+    } else if (typeof value === "boolean") {
+      if (value) {
+        el.setAttribute(attr, "");
+      } else {
+        el.removeAttribute(attr);
+      }
+    } else {
+      el.setAttribute(attr, String(value));
+    }
+  }
+  return () => {
+    for (const td of teardowns) {
+      td();
+    }
+  };
+}
+function bindBoolAttr(el, attr, getter) {
+  if (typeof getter !== "function") {
+    if (getter) {
+      el.setAttribute(attr, "");
+    } else {
+      el.removeAttribute(attr);
+    }
+    return () => {
+    };
+  }
+  const reactiveGetter = getter;
+  function commit() {
+    let value;
+    try {
+      value = reactiveGetter();
+    } catch {
+      return;
+    }
+    if (value) {
+      el.setAttribute(attr, "");
+    } else {
+      el.removeAttribute(attr);
+    }
+  }
+  const teardown = track(commit);
+  return teardown;
+}
+function bindData(el, key, getter) {
+  const dataAttr = `data-${key}`;
+  if (typeof getter !== "function") {
+    el.setAttribute(dataAttr, String(getter));
+    return () => {
+    };
+  }
+  return bindAttribute(el, dataAttr, getter);
+}
+
+// src/ui/dialog.ts
+function dialog() {
+  const [isOpen, setIsOpen] = signal(false);
+  let listenerAttached = false;
+  function handleKeydown(event) {
+    if (event.key === "Escape") {
+      close();
+    }
+  }
+  function open() {
+    setIsOpen(true);
+    if (typeof window !== "undefined" && !listenerAttached) {
+      window.addEventListener("keydown", handleKeydown);
+      listenerAttached = true;
+    }
+  }
+  function close() {
+    setIsOpen(false);
+    if (typeof window !== "undefined" && listenerAttached) {
+      window.removeEventListener("keydown", handleKeydown);
+      listenerAttached = false;
+    }
+  }
+  function toggle() {
+    if (isOpen()) {
+      close();
+    } else {
+      open();
+    }
+  }
+  return { open, close, isOpen, toggle };
+}
+
+// src/ui/toast.ts
+var toastCounter = 0;
+function toast(options) {
+  const duration = options?.duration ?? 3e3;
+  const maxToasts = options?.maxToasts ?? Infinity;
+  const [toasts, setToasts] = signal([]);
+  const timers = /* @__PURE__ */ new Map();
+  function show(message, type) {
+    const id = `toast-${++toastCounter}`;
+    const toast2 = { id, message, type };
+    setToasts((prev) => {
+      const next = [...prev, toast2];
+      if (next.length > maxToasts) {
+        const removed = next.splice(0, next.length - maxToasts);
+        for (const r of removed) {
+          clearTimerForToast(r.id);
+        }
+      }
+      return next;
+    });
+    if (duration > 0) {
+      const timer = setTimeout(() => {
+        dismiss(id);
+      }, duration);
+      timers.set(id, timer);
+    }
+    return id;
+  }
+  function dismiss(id) {
+    clearTimerForToast(id);
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }
+  function dismissAll() {
+    for (const timer of timers.values()) {
+      clearTimeout(timer);
+    }
+    timers.clear();
+    setToasts([]);
+  }
+  function clearTimerForToast(id) {
+    const timer = timers.get(id);
+    if (timer !== void 0) {
+      clearTimeout(timer);
+      timers.delete(id);
+    }
+  }
+  return {
+    toasts,
+    show,
+    info: (message) => show(message, "info"),
+    success: (message) => show(message, "success"),
+    error: (message) => show(message, "error"),
+    warning: (message) => show(message, "warning"),
+    dismiss,
+    dismissAll
+  };
+}
+
+// src/ui/infiniteScroll.ts
+function infiniteScroll(options) {
+  const { onLoadMore, hasMore, threshold = 0 } = options;
+  const [loading, setLoading] = signal(false);
+  const sentinelRef = { current: null };
+  let observer = null;
+  let disposed = false;
+  function createObserver() {
+    if (typeof IntersectionObserver === "undefined") return;
+    observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (entry?.isIntersecting && !loading() && hasMore() && !disposed) {
+          loadMore();
+        }
+      },
+      { threshold }
+    );
+    if (sentinelRef.current) {
+      observer.observe(sentinelRef.current);
+    }
+  }
+  async function loadMore() {
+    setLoading(true);
+    try {
+      await onLoadMore();
+    } finally {
+      setLoading(false);
+    }
+  }
+  const originalRef = sentinelRef;
+  let _current = null;
+  Object.defineProperty(originalRef, "current", {
+    get() {
+      return _current;
+    },
+    set(el) {
+      _current = el;
+      if (observer) {
+        observer.disconnect();
+        observer = null;
+      }
+      if (el && !disposed) {
+        createObserver();
+      }
+    },
+    configurable: true
+  });
+  function dispose() {
+    disposed = true;
+    if (observer) {
+      observer.disconnect();
+      observer = null;
+    }
+  }
+  return { sentinelRef: originalRef, loading, dispose };
+}
+
+// src/ui/pagination.ts
+function pagination(options) {
+  const pageSizeValue = options.pageSize ?? 10;
+  const [page, setPage] = signal(options.initialPage ?? 1);
+  const [pageSize] = signal(pageSizeValue);
+  const totalPages = derived(() => {
+    const total = options.totalItems();
+    return Math.max(1, Math.ceil(total / pageSizeValue));
+  });
+  const startIndex = derived(() => {
+    return (page() - 1) * pageSizeValue;
+  });
+  const endIndex = derived(() => {
+    const end = page() * pageSizeValue;
+    const total = options.totalItems();
+    return Math.min(end, total);
+  });
+  function next() {
+    if (page() < totalPages()) {
+      setPage((p) => p + 1);
+    }
+  }
+  function prev() {
+    if (page() > 1) {
+      setPage((p) => p - 1);
+    }
+  }
+  function goTo(target) {
+    const clamped = Math.max(1, Math.min(target, totalPages()));
+    setPage(clamped);
+  }
+  return { page, pageSize, totalPages, next, prev, goTo, startIndex, endIndex };
+}
+
+// src/ui/eventBus.ts
+function eventBus() {
+  const listeners = /* @__PURE__ */ new Map();
+  function on(event, handler) {
+    let set = listeners.get(event);
+    if (!set) {
+      set = /* @__PURE__ */ new Set();
+      listeners.set(event, set);
+    }
+    set.add(handler);
+    return () => off(event, handler);
+  }
+  function emit(event, data) {
+    const set = listeners.get(event);
+    if (set) {
+      for (const handler of set) {
+        handler(data);
+      }
+    }
+  }
+  function off(event, handler) {
+    const set = listeners.get(event);
+    if (set) {
+      set.delete(handler);
+      if (set.size === 0) {
+        listeners.delete(event);
+      }
+    }
+  }
+  function clear() {
+    listeners.clear();
+  }
+  return { on, emit, off, clear };
+}
+
+// src/platform/customElement.ts
+function defineElement(name, component, options = {}) {
+  if (customElements.get(name)) return;
+  const observed = options.observedAttributes || [];
+  class SibuElement extends HTMLElement {
+    constructor() {
+      super();
+      this._rendered = false;
+      if (options.shadow !== false) {
+        this._root = this.attachShadow({ mode: options.mode || "open" });
+      } else {
+        this._root = this;
+      }
+    }
+    static get observedAttributes() {
+      return observed;
+    }
+    connectedCallback() {
+      this._render();
+    }
+    disconnectedCallback() {
+      if (this._root instanceof ShadowRoot) {
+        this._root.innerHTML = "";
+      }
+      this._rendered = false;
+    }
+    attributeChangedCallback() {
+      if (this._rendered) {
+        this._render();
+      }
+    }
+    _render() {
+      const props = this._getProps();
+      if (this._root instanceof ShadowRoot) {
+        this._root.innerHTML = "";
+      } else {
+        while (this._root.firstChild) {
+          this._root.removeChild(this._root.firstChild);
+        }
+      }
+      if (options.styles && this._root instanceof ShadowRoot) {
+        const styleEl = document.createElement("style");
+        styleEl.textContent = options.styles;
+        this._root.appendChild(styleEl);
+      }
+      const el = component(props, this);
+      this._root.appendChild(el);
+      this._rendered = true;
+    }
+    _getProps() {
+      const props = {};
+      for (const attr of this.attributes) {
+        props[attr.name] = attr.value;
+      }
+      return props;
+    }
+  }
+  customElements.define(name, SibuElement);
+}
+function svgElement(tag, props = {}, ...nodes) {
+  const SVG_NS = "http://www.w3.org/2000/svg";
+  const el = document.createElementNS(SVG_NS, tag);
+  for (const [key, value] of Object.entries(props)) {
+    if (key === "nodes") continue;
+    if (typeof value === "function" && key.startsWith("on")) {
+      el.addEventListener(key.slice(2).toLowerCase(), value);
+    } else if (value != null) {
+      el.setAttribute(key, String(value));
+    }
+  }
+  for (const child of nodes) {
+    if (typeof child === "string") {
+      el.appendChild(document.createTextNode(child));
+    } else if (child instanceof Node) {
+      el.appendChild(child);
+    }
+  }
+  return el;
+}
+
+export {
+  required,
+  minLength,
+  maxLength,
+  matchesPattern,
+  email,
+  min,
+  max,
+  custom,
+  bindField,
+  form,
+  VirtualList,
+  intersection,
+  lazyLoad,
+  inputMask,
+  phoneMask,
+  dateMask,
+  creditCardMask,
+  timeMask,
+  ssnMask,
+  zipMask,
+  aria,
+  focus,
+  FocusTrap,
+  hotkey,
+  announce,
+  scopedStyle,
+  withScopedStyle,
+  removeScopedStyle,
+  bindAttrs,
+  bindBoolAttr,
+  bindData,
+  dialog,
+  toast,
+  infiniteScroll,
+  pagination,
+  eventBus,
+  defineElement,
+  svgElement
+};