@duskmoon-dev/el-base 0.6.0

package/dist/esm/index.js

@@ -0,0 +1,958 @@
+// src/styles.ts
+var styleSheetCache = new WeakMap;
+function css(strings, ...values) {
+  const cached = styleSheetCache.get(strings);
+  if (cached && values.length === 0) {
+    return cached;
+  }
+  let cssText = strings[0];
+  for (let i = 0;i < values.length; i++) {
+    cssText += String(values[i]) + strings[i + 1];
+  }
+  const sheet = new CSSStyleSheet;
+  sheet.replaceSync(cssText);
+  if (values.length === 0) {
+    styleSheetCache.set(strings, sheet);
+  }
+  return sheet;
+}
+function combineStyles(...sheets) {
+  return sheets;
+}
+function cssVars(vars) {
+  return Object.entries(vars).map(([key, value]) => `--${key}: ${value}`).join("; ");
+}
+var defaultTheme = css`
+  :host {
+    /* Typography - safe to set defaults */
+    --font-family: system-ui, -apple-system, sans-serif;
+    --font-size-xs: 0.75rem;
+    --font-size-sm: 0.875rem;
+    --font-size-md: 1rem;
+    --font-size-lg: 1.125rem;
+    --font-size-xl: 1.25rem;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+
+    /* Spacing - safe to set defaults */
+    --spacing-xs: 0.25rem;
+    --spacing-sm: 0.5rem;
+    --spacing-md: 1rem;
+    --spacing-lg: 1.5rem;
+    --spacing-xl: 2rem;
+
+    /* Border Radius - safe to set defaults */
+    --radius-sm: 0.25rem;
+    --radius-md: 0.5rem;
+    --radius-lg: 0.75rem;
+    --radius-xl: 1rem;
+    --radius-full: 9999px;
+
+    /* Transitions - safe to set defaults */
+    --transition-fast: 150ms ease;
+    --transition-normal: 200ms ease;
+    --transition-slow: 300ms ease;
+  }
+`;
+var lightThemeColors = `
+  /* Primary colors */
+  --color-primary: oklch(60% 0.15 250);
+  --color-primary-content: white;
+  --color-on-primary: white;
+
+  /* Secondary colors */
+  --color-secondary: oklch(55% 0.1 250);
+  --color-secondary-content: white;
+  --color-on-secondary: white;
+
+  /* Tertiary colors */
+  --color-tertiary: oklch(50% 0.12 300);
+  --color-tertiary-content: white;
+  --color-on-tertiary: white;
+
+  /* Surface colors */
+  --color-surface: white;
+  --color-surface-container: oklch(97% 0.01 250);
+  --color-surface-container-low: oklch(98% 0.005 250);
+  --color-surface-container-high: oklch(94% 0.01 250);
+  --color-on-surface: oklch(25% 0.02 250);
+  --color-on-surface-variant: oklch(45% 0.02 250);
+
+  /* Outline colors */
+  --color-outline: oklch(75% 0.02 250);
+  --color-outline-variant: oklch(85% 0.01 250);
+
+  /* Semantic colors */
+  --color-success: oklch(60% 0.15 145);
+  --color-warning: oklch(75% 0.15 85);
+  --color-error: oklch(55% 0.2 25);
+  --color-info: oklch(60% 0.15 250);
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+
+  /* Focus */
+  --focus-ring: 0 0 0 2px var(--color-primary);
+  --focus-ring-offset: 0 0 0 2px white, 0 0 0 4px var(--color-primary);
+`;
+var resetStyles = css`
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  :host {
+    font-family: var(--font-family, system-ui, -apple-system, sans-serif);
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+`;
+
+// src/base-element.ts
+class BaseElement extends HTMLElement {
+  static properties = {};
+  static get observedAttributes() {
+    return Object.entries(this.properties).filter(([, def]) => def.attribute !== false).map(([name, def]) => def.attribute || toKebabCase(name));
+  }
+  _styles = [];
+  _isConnected = false;
+  _preUpgradeValues;
+  _pendingUpdate = false;
+  _propertyValues = new Map;
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this._styles = [resetStyles, defaultTheme];
+    this.shadowRoot.adoptedStyleSheets = [...this._styles];
+    this._initializeProperties();
+  }
+  _initializeProperties() {
+    const ctor = this.constructor;
+    const properties = ctor.properties;
+    for (const [name, def] of Object.entries(properties)) {
+      if (Object.prototype.hasOwnProperty.call(this, name)) {
+        const preValue = this[name];
+        delete this[name];
+        if (preValue !== undefined) {
+          if (!this._preUpgradeValues)
+            this._preUpgradeValues = new Map;
+          this._preUpgradeValues.set(name, preValue);
+        }
+      }
+      if (def.default !== undefined) {
+        this._propertyValues.set(name, def.default);
+      }
+      Object.defineProperty(this, name, {
+        get: () => this._propertyValues.get(name),
+        set: (value) => {
+          const oldValue = this._propertyValues.get(name);
+          if (oldValue === value)
+            return;
+          this._propertyValues.set(name, value);
+          if (def.reflect && def.attribute !== false) {
+            const attrName = def.attribute || toKebabCase(name);
+            this._reflectToAttribute(attrName, value, def.type);
+          }
+          this._scheduleUpdate();
+        },
+        enumerable: true,
+        configurable: true
+      });
+    }
+  }
+  _reflectToAttribute(attrName, value, type) {
+    if (value === null || value === undefined) {
+      this.removeAttribute(attrName);
+      return;
+    }
+    if (type === Boolean) {
+      if (value) {
+        this.setAttribute(attrName, "");
+      } else {
+        this.removeAttribute(attrName);
+      }
+      return;
+    }
+    if (type === Object || type === Array) {
+      this.setAttribute(attrName, JSON.stringify(value));
+      return;
+    }
+    this.setAttribute(attrName, String(value));
+  }
+  _attributeToProperty(value, type) {
+    if (value === null) {
+      return type === Boolean ? false : undefined;
+    }
+    switch (type) {
+      case Boolean:
+        return true;
+      case Number:
+        return Number(value);
+      case Object:
+      case Array:
+        try {
+          return JSON.parse(value);
+        } catch {
+          return;
+        }
+      default:
+        return value;
+    }
+  }
+  _scheduleUpdate() {
+    if (this._pendingUpdate)
+      return;
+    this._pendingUpdate = true;
+    queueMicrotask(() => {
+      this._pendingUpdate = false;
+      if (this._isConnected) {
+        this.update();
+      }
+    });
+  }
+  attachStyles(styles) {
+    const sheets = Array.isArray(styles) ? styles : [styles];
+    this._styles = [...this._styles, ...sheets];
+    this.shadowRoot.adoptedStyleSheets = [...this._styles];
+  }
+  connectedCallback() {
+    this._isConnected = true;
+    if (this._preUpgradeValues) {
+      for (const [name, value] of this._preUpgradeValues) {
+        this[name] = value;
+      }
+      this._preUpgradeValues = undefined;
+    }
+    this.update();
+  }
+  disconnectedCallback() {
+    this._isConnected = false;
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue)
+      return;
+    const ctor = this.constructor;
+    const properties = ctor.properties;
+    for (const [propName, def] of Object.entries(properties)) {
+      const attrName = def.attribute || toKebabCase(propName);
+      if (attrName === name) {
+        const value = this._attributeToProperty(newValue, def.type);
+        this._propertyValues.set(propName, value);
+        this._scheduleUpdate();
+        break;
+      }
+    }
+  }
+  update() {
+    const content = this.render();
+    if (content !== undefined) {
+      this.shadowRoot.innerHTML = content;
+    }
+  }
+  render() {
+    return;
+  }
+  emit(name, detail, options) {
+    const event = new CustomEvent(name, {
+      bubbles: true,
+      composed: true,
+      cancelable: true,
+      ...options,
+      detail
+    });
+    return this.dispatchEvent(event);
+  }
+  query(selector) {
+    return this.shadowRoot.querySelector(selector);
+  }
+  queryAll(selector) {
+    return this.shadowRoot.querySelectorAll(selector);
+  }
+}
+function toKebabCase(str) {
+  return str.replace(/([A-Z])/g, "-$1").toLowerCase();
+}
+// src/animations.ts
+var durations = {
+  fast: "150ms",
+  normal: "200ms",
+  slow: "300ms",
+  slower: "500ms"
+};
+var easings = {
+  ease: "ease",
+  easeIn: "cubic-bezier(0.4, 0, 1, 1)",
+  easeOut: "cubic-bezier(0, 0, 0.2, 1)",
+  easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
+  spring: "cubic-bezier(0.175, 0.885, 0.32, 1.275)"
+};
+var animationStyles = css`
+  @keyframes dm-fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes dm-fade-out {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes dm-scale-in {
+    from {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes dm-scale-out {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+    to {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+  }
+
+  @keyframes dm-slide-in-up {
+    from {
+      opacity: 0;
+      transform: translateY(0.5rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes dm-slide-in-down {
+    from {
+      opacity: 0;
+      transform: translateY(-0.5rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes dm-slide-in-left {
+    from {
+      opacity: 0;
+      transform: translateX(0.5rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes dm-slide-in-right {
+    from {
+      opacity: 0;
+      transform: translateX(-0.5rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes dm-shake {
+    0%,
+    100% {
+      transform: translateX(0);
+    }
+    10%,
+    30%,
+    50%,
+    70%,
+    90% {
+      transform: translateX(-0.25rem);
+    }
+    20%,
+    40%,
+    60%,
+    80% {
+      transform: translateX(0.25rem);
+    }
+  }
+
+  @keyframes dm-spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes dm-pulse {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
+  }
+
+  /* Reduced motion: disable all animations */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+`;
+function animation(name, duration = "normal", easing = "easeOut", fillMode = "both") {
+  return `${name} ${durations[duration]} ${easings[easing]} ${fillMode}`;
+}
+function transition(properties, duration = "normal", easing = "ease") {
+  return properties.map((prop) => `${prop} ${durations[duration]} ${easings[easing]}`).join(", ");
+}
+// src/themes.ts
+var sunshineTheme = `
+  /* Primary */
+  --color-primary: oklch(60% 0.15 250);
+  --color-primary-content: white;
+  --color-on-primary: white;
+
+  /* Secondary */
+  --color-secondary: oklch(55% 0.1 250);
+  --color-secondary-content: white;
+  --color-on-secondary: white;
+
+  /* Tertiary */
+  --color-tertiary: oklch(50% 0.12 300);
+  --color-tertiary-content: white;
+  --color-on-tertiary: white;
+
+  /* Surface */
+  --color-surface: white;
+  --color-surface-container: oklch(97% 0.01 250);
+  --color-surface-container-low: oklch(98% 0.005 250);
+  --color-surface-container-high: oklch(94% 0.01 250);
+  --color-surface-variant: oklch(92% 0.01 250);
+  --color-on-surface: oklch(25% 0.02 250);
+  --color-on-surface-variant: oklch(45% 0.02 250);
+  --color-inverse-surface: oklch(25% 0.02 250);
+  --color-inverse-on-surface: oklch(95% 0.01 250);
+
+  /* Outline */
+  --color-outline: oklch(75% 0.02 250);
+  --color-outline-variant: oklch(85% 0.01 250);
+
+  /* Semantic */
+  --color-success: oklch(60% 0.15 145);
+  --color-on-success: white;
+  --color-warning: oklch(75% 0.15 85);
+  --color-on-warning: oklch(25% 0.05 85);
+  --color-error: oklch(55% 0.2 25);
+  --color-on-error: white;
+  --color-info: oklch(60% 0.15 250);
+  --color-on-info: white;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+
+  /* Focus */
+  --focus-ring: 0 0 0 2px var(--color-primary);
+  --focus-ring-offset: 0 0 0 2px white, 0 0 0 4px var(--color-primary);
+`;
+var moonlightTheme = `
+  /* Primary */
+  --color-primary: oklch(72% 0.15 250);
+  --color-primary-content: oklch(20% 0.05 250);
+  --color-on-primary: oklch(20% 0.05 250);
+
+  /* Secondary */
+  --color-secondary: oklch(68% 0.1 250);
+  --color-secondary-content: oklch(20% 0.05 250);
+  --color-on-secondary: oklch(20% 0.05 250);
+
+  /* Tertiary */
+  --color-tertiary: oklch(70% 0.12 300);
+  --color-tertiary-content: oklch(20% 0.05 300);
+  --color-on-tertiary: oklch(20% 0.05 300);
+
+  /* Surface */
+  --color-surface: oklch(18% 0.02 250);
+  --color-surface-container: oklch(22% 0.02 250);
+  --color-surface-container-low: oklch(20% 0.02 250);
+  --color-surface-container-high: oklch(26% 0.02 250);
+  --color-surface-variant: oklch(30% 0.02 250);
+  --color-on-surface: oklch(92% 0.01 250);
+  --color-on-surface-variant: oklch(75% 0.02 250);
+  --color-inverse-surface: oklch(92% 0.01 250);
+  --color-inverse-on-surface: oklch(25% 0.02 250);
+
+  /* Outline */
+  --color-outline: oklch(45% 0.02 250);
+  --color-outline-variant: oklch(35% 0.02 250);
+
+  /* Semantic */
+  --color-success: oklch(70% 0.15 145);
+  --color-on-success: oklch(20% 0.05 145);
+  --color-warning: oklch(80% 0.12 85);
+  --color-on-warning: oklch(20% 0.05 85);
+  --color-error: oklch(65% 0.2 25);
+  --color-on-error: oklch(20% 0.05 25);
+  --color-info: oklch(70% 0.15 250);
+  --color-on-info: oklch(20% 0.05 250);
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.4);
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.5);
+
+  /* Focus */
+  --focus-ring: 0 0 0 2px var(--color-primary);
+  --focus-ring-offset: 0 0 0 2px oklch(18% 0.02 250), 0 0 0 4px var(--color-primary);
+`;
+var oceanTheme = `
+  /* Primary */
+  --color-primary: oklch(58% 0.12 210);
+  --color-primary-content: white;
+  --color-on-primary: white;
+
+  /* Secondary */
+  --color-secondary: oklch(55% 0.08 185);
+  --color-secondary-content: white;
+  --color-on-secondary: white;
+
+  /* Tertiary */
+  --color-tertiary: oklch(60% 0.1 170);
+  --color-tertiary-content: white;
+  --color-on-tertiary: white;
+
+  /* Surface */
+  --color-surface: oklch(98% 0.005 210);
+  --color-surface-container: oklch(96% 0.01 210);
+  --color-surface-container-low: oklch(97% 0.005 210);
+  --color-surface-container-high: oklch(93% 0.01 210);
+  --color-surface-variant: oklch(91% 0.01 210);
+  --color-on-surface: oklch(22% 0.02 210);
+  --color-on-surface-variant: oklch(40% 0.02 210);
+  --color-inverse-surface: oklch(22% 0.02 210);
+  --color-inverse-on-surface: oklch(95% 0.01 210);
+
+  /* Outline */
+  --color-outline: oklch(72% 0.02 210);
+  --color-outline-variant: oklch(82% 0.01 210);
+
+  /* Semantic */
+  --color-success: oklch(62% 0.14 155);
+  --color-on-success: white;
+  --color-warning: oklch(76% 0.14 80);
+  --color-on-warning: oklch(25% 0.05 80);
+  --color-error: oklch(56% 0.18 20);
+  --color-on-error: white;
+  --color-info: oklch(58% 0.12 210);
+  --color-on-info: white;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.06);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+
+  /* Focus */
+  --focus-ring: 0 0 0 2px var(--color-primary);
+  --focus-ring-offset: 0 0 0 2px oklch(98% 0.005 210), 0 0 0 4px var(--color-primary);
+`;
+var forestTheme = `
+  /* Primary */
+  --color-primary: oklch(52% 0.12 155);
+  --color-primary-content: white;
+  --color-on-primary: white;
+
+  /* Secondary */
+  --color-secondary: oklch(50% 0.08 70);
+  --color-secondary-content: white;
+  --color-on-secondary: white;
+
+  /* Tertiary */
+  --color-tertiary: oklch(55% 0.1 120);
+  --color-tertiary-content: white;
+  --color-on-tertiary: white;
+
+  /* Surface */
+  --color-surface: oklch(97% 0.005 90);
+  --color-surface-container: oklch(95% 0.01 90);
+  --color-surface-container-low: oklch(96% 0.005 90);
+  --color-surface-container-high: oklch(92% 0.01 90);
+  --color-surface-variant: oklch(90% 0.01 90);
+  --color-on-surface: oklch(22% 0.03 90);
+  --color-on-surface-variant: oklch(40% 0.03 90);
+  --color-inverse-surface: oklch(22% 0.03 90);
+  --color-inverse-on-surface: oklch(95% 0.01 90);
+
+  /* Outline */
+  --color-outline: oklch(70% 0.03 90);
+  --color-outline-variant: oklch(82% 0.01 90);
+
+  /* Semantic */
+  --color-success: oklch(58% 0.14 145);
+  --color-on-success: white;
+  --color-warning: oklch(74% 0.14 85);
+  --color-on-warning: oklch(25% 0.05 85);
+  --color-error: oklch(54% 0.18 25);
+  --color-on-error: white;
+  --color-info: oklch(55% 0.12 230);
+  --color-on-info: white;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+
+  /* Focus */
+  --focus-ring: 0 0 0 2px var(--color-primary);
+  --focus-ring-offset: 0 0 0 2px oklch(97% 0.005 90), 0 0 0 4px var(--color-primary);
+`;
+var roseTheme = `
+  /* Primary */
+  --color-primary: oklch(60% 0.16 350);
+  --color-primary-content: white;
+  --color-on-primary: white;
+
+  /* Secondary */
+  --color-secondary: oklch(55% 0.1 330);
+  --color-secondary-content: white;
+  --color-on-secondary: white;
+
+  /* Tertiary */
+  --color-tertiary: oklch(58% 0.12 15);
+  --color-tertiary-content: white;
+  --color-on-tertiary: white;
+
+  /* Surface */
+  --color-surface: oklch(98% 0.005 350);
+  --color-surface-container: oklch(96% 0.01 350);
+  --color-surface-container-low: oklch(97% 0.005 350);
+  --color-surface-container-high: oklch(93% 0.01 350);
+  --color-surface-variant: oklch(91% 0.01 350);
+  --color-on-surface: oklch(22% 0.02 350);
+  --color-on-surface-variant: oklch(42% 0.02 350);
+  --color-inverse-surface: oklch(22% 0.02 350);
+  --color-inverse-on-surface: oklch(95% 0.005 350);
+
+  /* Outline */
+  --color-outline: oklch(72% 0.02 350);
+  --color-outline-variant: oklch(84% 0.01 350);
+
+  /* Semantic */
+  --color-success: oklch(62% 0.14 148);
+  --color-on-success: white;
+  --color-warning: oklch(76% 0.14 82);
+  --color-on-warning: oklch(25% 0.05 82);
+  --color-error: oklch(55% 0.2 22);
+  --color-on-error: white;
+  --color-info: oklch(58% 0.14 245);
+  --color-on-info: white;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+
+  /* Focus */
+  --focus-ring: 0 0 0 2px var(--color-primary);
+  --focus-ring-offset: 0 0 0 2px oklch(98% 0.005 350), 0 0 0 4px var(--color-primary);
+`;
+var themes = {
+  sunshine: sunshineTheme,
+  moonlight: moonlightTheme,
+  ocean: oceanTheme,
+  forest: forestTheme,
+  rose: roseTheme
+};
+function applyTheme(element, theme) {
+  const css2 = typeof theme === "string" && theme in themes ? themes[theme] : theme;
+  const props = css2.match(/--[\w-]+:\s*[^;]+/g);
+  if (props) {
+    for (const prop of props) {
+      const [name, ...valueParts] = prop.split(":");
+      const value = valueParts.join(":").trim();
+      element.style.setProperty(name.trim(), value);
+    }
+  }
+}
+// src/mixins.ts
+function FocusableMixin(Base) {
+  class FocusableElement extends Base {
+    static properties = {
+      ...Base.properties,
+      focused: { type: Boolean, reflect: true, default: false }
+    };
+    #handleFocus = () => {
+      this.focused = true;
+    };
+    #handleBlur = () => {
+      this.focused = false;
+    };
+    connectedCallback() {
+      super.connectedCallback();
+      if (!this.hasAttribute("tabindex")) {
+        this.setAttribute("tabindex", "0");
+      }
+      this.addEventListener("focus", this.#handleFocus);
+      this.addEventListener("blur", this.#handleBlur);
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      this.removeEventListener("focus", this.#handleFocus);
+      this.removeEventListener("blur", this.#handleBlur);
+    }
+  }
+  return FocusableElement;
+}
+function FormMixin(Base) {
+
+  class FormElement extends Base {
+    static properties = {
+      ...Base.properties,
+      name: { type: String, reflect: true, default: "" },
+      value: { type: String, reflect: true, default: "" },
+      disabled: { type: Boolean, reflect: true, default: false },
+      required: { type: Boolean, reflect: true, default: false }
+    };
+    get form() {
+      return this.closest("form");
+    }
+  }
+  return FormElement;
+}
+function EventListenerMixin(Base) {
+
+  class EventListenerElement extends Base {
+    #listeners = [];
+    addListener(target, type, handler, options) {
+      target.addEventListener(type, handler, options);
+      this.#listeners.push({ target, type, handler, options });
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      for (const { target, type, handler, options } of this.#listeners) {
+        target.removeEventListener(type, handler, options);
+      }
+      this.#listeners = [];
+    }
+  }
+  return EventListenerElement;
+}
+function SlotObserverMixin(Base) {
+
+  class SlotObserverElement extends Base {
+    #slotObservers = new Map;
+    observeSlot(slotName, handler) {
+      this.#slotObservers.set(slotName, handler);
+    }
+    connectedCallback() {
+      super.connectedCallback();
+      requestAnimationFrame(() => this.#attachSlotListeners());
+    }
+    #attachSlotListeners() {
+      const slots = this.shadowRoot.querySelectorAll("slot");
+      for (const slot of slots) {
+        const name = slot.name || "";
+        const handler = this.#slotObservers.get(name);
+        if (handler) {
+          slot.addEventListener("slotchange", () => {
+            const elements2 = slot.assignedElements();
+            handler(elements2);
+          });
+          const elements = slot.assignedElements();
+          handler(elements);
+        }
+      }
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      this.#slotObservers.clear();
+    }
+  }
+  return SlotObserverElement;
+}
+// src/validation.ts
+function validate(value, rules) {
+  for (const rule of rules) {
+    const message = rule(value);
+    if (message) {
+      return { state: "invalid", message };
+    }
+  }
+  return { state: "valid", message: undefined };
+}
+async function validateAsync(value, rules, asyncRule) {
+  const syncResult = validate(value, rules);
+  if (syncResult.state === "invalid") {
+    return syncResult;
+  }
+  const message = await asyncRule(value);
+  if (message) {
+    return { state: "invalid", message };
+  }
+  return { state: "valid", message: undefined };
+}
+var validators = {
+  required(message = "This field is required") {
+    return (value) => !value || value.trim().length === 0 ? message : undefined;
+  },
+  minLength(min, message) {
+    return (value) => value && value.length < min ? message ?? `Must be at least ${min} characters` : undefined;
+  },
+  maxLength(max, message) {
+    return (value) => value && value.length > max ? message ?? `Must be at most ${max} characters` : undefined;
+  },
+  pattern(regex, message = "Invalid format") {
+    return (value) => value && !regex.test(value) ? message : undefined;
+  },
+  email(message = "Must be a valid email address") {
+    const emailRe = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return (value) => value && !emailRe.test(value) ? message : undefined;
+  },
+  range(min, max, message) {
+    return (value) => {
+      if (!value)
+        return;
+      const num = Number(value);
+      if (isNaN(num) || num < min || num > max) {
+        return message ?? `Must be between ${min} and ${max}`;
+      }
+      return;
+    };
+  },
+  custom(predicate, message) {
+    return (value) => !predicate(value) ? message : undefined;
+  }
+};
+// src/performance.ts
+function debounce(fn, delay) {
+  let timeoutId;
+  const debounced = function(...args) {
+    if (timeoutId !== undefined) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => {
+      timeoutId = undefined;
+      fn.apply(this, args);
+    }, delay);
+  };
+  debounced.cancel = () => {
+    if (timeoutId !== undefined) {
+      clearTimeout(timeoutId);
+      timeoutId = undefined;
+    }
+  };
+  return debounced;
+}
+function throttle(fn, interval) {
+  let lastCall = 0;
+  let timeoutId;
+  const throttled = function(...args) {
+    const now = Date.now();
+    const remaining = interval - (now - lastCall);
+    if (remaining <= 0) {
+      if (timeoutId !== undefined) {
+        clearTimeout(timeoutId);
+        timeoutId = undefined;
+      }
+      lastCall = now;
+      fn.apply(this, args);
+    } else if (timeoutId === undefined) {
+      timeoutId = setTimeout(() => {
+        lastCall = Date.now();
+        timeoutId = undefined;
+        fn.apply(this, args);
+      }, remaining);
+    }
+  };
+  throttled.cancel = () => {
+    if (timeoutId !== undefined) {
+      clearTimeout(timeoutId);
+      timeoutId = undefined;
+    }
+    lastCall = 0;
+  };
+  return throttled;
+}
+function scheduleIdle(callback, options) {
+  if (typeof requestIdleCallback === "function") {
+    const id2 = requestIdleCallback(callback, options);
+    return () => cancelIdleCallback(id2);
+  }
+  const id = setTimeout(callback, options?.timeout ?? 50);
+  return () => clearTimeout(id);
+}
+export {
+  validators,
+  validateAsync,
+  validate,
+  transition,
+  throttle,
+  themes,
+  sunshineTheme,
+  scheduleIdle,
+  roseTheme,
+  resetStyles,
+  oceanTheme,
+  moonlightTheme,
+  lightThemeColors,
+  forestTheme,
+  easings,
+  durations,
+  defaultTheme,
+  debounce,
+  cssVars,
+  css,
+  combineStyles,
+  applyTheme,
+  animationStyles,
+  animation,
+  SlotObserverMixin,
+  FormMixin,
+  FocusableMixin,
+  EventListenerMixin,
+  BaseElement
+};
+
+//# debugId=68AFD94A846D93BF64756E2164756E21
+//# sourceMappingURL=index.js.map