@tachui/core 0.7.0-alpha1

package/dist/modifiers/attributes.js

@@ -0,0 +1,272 @@
+import { BaseModifier as s } from "./base.js";
+import { ModifierPriority as d } from "./types.js";
+var p = Object.defineProperty, f = (i, t, e) => t in i ? p(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e, o = (i, t, e) => f(i, typeof t != "symbol" ? t + "" : t, e);
+class b extends s {
+  constructor() {
+    super(...arguments), o(this, "type", "id"), o(this, "priority", d.CUSTOM + 10);
+  }
+  apply(t, e) {
+    if (!e.element) return;
+    const { id: r } = this.properties;
+    process.env.NODE_ENV === "development" && this.validateId(r), e.element.setAttribute("id", r);
+  }
+  validateId(t) {
+    if (!t || typeof t != "string") {
+      console.warn("TachUI ID Modifier: ID must be a non-empty string");
+      return;
+    }
+    /^[a-zA-Z][a-zA-Z0-9_:-]*$/.test(t) || console.warn(`TachUI ID Modifier: Invalid ID format "${t}". IDs must start with a letter and contain only letters, digits, hyphens, underscores, colons, and periods.`), document.getElementById(t) && console.warn(`TachUI ID Modifier: Duplicate ID "${t}" detected. IDs should be unique within the document.`);
+  }
+}
+function g(i) {
+  return new b({ id: i });
+}
+class m extends s {
+  constructor() {
+    super(...arguments), o(this, "type", "data"), o(this, "priority", d.CUSTOM + 5);
+  }
+  apply(t, e) {
+    if (!e.element) return;
+    const { data: r } = this.properties;
+    process.env.NODE_ENV === "development" && this.validateDataAttributes(r), Object.entries(r).forEach(([a, n]) => {
+      const c = this.formatDataAttributeName(a), u = this.formatDataAttributeValue(n);
+      e.element.setAttribute(c, u);
+    });
+  }
+  formatDataAttributeName(t) {
+    const e = t.replace(/[A-Z]/g, (r) => `-${r.toLowerCase()}`);
+    return e.startsWith("data-") ? e : `data-${e}`;
+  }
+  formatDataAttributeValue(t) {
+    return typeof t == "boolean" ? t ? "true" : "false" : String(t);
+  }
+  validateDataAttributes(t) {
+    Object.entries(t).forEach(([e, r]) => {
+      if (!e || typeof e != "string") {
+        console.warn("TachUI Data Modifier: Data attribute keys must be non-empty strings");
+        return;
+      }
+      /^[a-zA-Z][a-zA-Z0-9-_]*$/.test(e.replace(/^data-/, "")) || console.warn(`TachUI Data Modifier: Invalid data attribute key "${e}". Keys should contain only letters, numbers, hyphens, and underscores.`), r != null && typeof r != "string" && typeof r != "number" && typeof r != "boolean" && console.warn(`TachUI Data Modifier: Data attribute "${e}" has invalid value type. Only strings, numbers, and booleans are supported.`);
+    });
+  }
+}
+function v(i) {
+  return new m({ data: i });
+}
+class h extends s {
+  constructor() {
+    super(...arguments), o(this, "type", "aria"), o(this, "priority", d.CUSTOM + 15);
+  }
+  apply(t, e) {
+    if (!e.element) return;
+    const { aria: r } = this.properties;
+    process.env.NODE_ENV === "development" && this.validateAriaAttributes(r), Object.entries(r).forEach(([a, n]) => {
+      if (n != null) {
+        const c = this.formatAriaAttributeName(a), u = this.formatAriaAttributeValue(n);
+        e.element.setAttribute(c, u);
+      }
+    });
+  }
+  formatAriaAttributeName(t) {
+    if (t === "role")
+      return "role";
+    const e = t.replace(/[A-Z]/g, (r) => `-${r.toLowerCase()}`);
+    return e.startsWith("aria-") ? e : `aria-${e}`;
+  }
+  formatAriaAttributeValue(t) {
+    return typeof t == "boolean" ? t ? "true" : "false" : String(t);
+  }
+  validateAriaAttributes(t) {
+    const e = /* @__PURE__ */ new Set([
+      "label",
+      "labelledby",
+      "describedby",
+      "expanded",
+      "hidden",
+      "live",
+      "atomic",
+      "busy",
+      "controls",
+      "current",
+      "disabled",
+      "grabbed",
+      "haspopup",
+      "invalid",
+      "level",
+      "multiline",
+      "multiselectable",
+      "orientation",
+      "owns",
+      "placeholder",
+      "posinset",
+      "pressed",
+      "readonly",
+      "relevant",
+      "required",
+      "selected",
+      "setsize",
+      "sort",
+      "valuemax",
+      "valuemin",
+      "valuenow",
+      "valuetext",
+      "role"
+    ]);
+    Object.entries(t).forEach(([r, a]) => {
+      if (!r || typeof r != "string") {
+        console.warn("TachUI ARIA Modifier: ARIA attribute keys must be non-empty strings");
+        return;
+      }
+      const n = r.replace(/^aria-/, "");
+      !e.has(n) && !n.startsWith("aria-") && console.warn(`TachUI ARIA Modifier: Unknown ARIA attribute "${r}". This may not be a valid ARIA attribute. Did you mean "${this.suggestCorrection(n)}"?`), this.validateSpecificAriaAttribute(r, a);
+    });
+  }
+  validateSpecificAriaAttribute(t, e) {
+    const r = t.replace(/^aria-/, "");
+    switch (r) {
+      case "live":
+        e !== "off" && e !== "polite" && e !== "assertive" && console.warn(`TachUI ARIA Modifier: Invalid value "${e}" for aria-live. Valid values are: "off", "polite", "assertive"`);
+        break;
+      case "haspopup":
+        typeof e == "string" && !["false", "true", "menu", "listbox", "tree", "grid", "dialog"].includes(e) && console.warn(`TachUI ARIA Modifier: Invalid value "${e}" for aria-haspopup. Valid values are: false, true, "menu", "listbox", "tree", "grid", "dialog"`);
+        break;
+      case "current":
+        typeof e == "string" && !["page", "step", "location", "date", "time"].includes(e) && console.warn(`TachUI ARIA Modifier: Invalid value "${e}" for aria-current. Valid values are: false, true, "page", "step", "location", "date", "time"`);
+        break;
+      case "invalid":
+        typeof e == "string" && !["false", "true", "grammar", "spelling"].includes(e) && console.warn(`TachUI ARIA Modifier: Invalid value "${e}" for aria-invalid. Valid values are: false, true, "grammar", "spelling"`);
+        break;
+      case "orientation":
+        e !== "horizontal" && e !== "vertical" && console.warn(`TachUI ARIA Modifier: Invalid value "${e}" for aria-orientation. Valid values are: "horizontal", "vertical"`);
+        break;
+      case "sort":
+        ["none", "ascending", "descending", "other"].includes(e) || console.warn(`TachUI ARIA Modifier: Invalid value "${e}" for aria-sort. Valid values are: "none", "ascending", "descending", "other"`);
+        break;
+      case "level":
+      case "posinset":
+      case "setsize":
+      case "valuemax":
+      case "valuemin":
+      case "valuenow":
+        typeof e == "number" && (e < 0 || !Number.isInteger(e)) && console.warn(`TachUI ARIA Modifier: Invalid value "${e}" for aria-${r}. Must be a non-negative integer.`);
+        break;
+    }
+  }
+  suggestCorrection(t) {
+    return {
+      lable: "label",
+      labeledby: "labelledby",
+      descripedby: "describedby",
+      descibed: "describedby",
+      controled: "controls",
+      expaned: "expanded",
+      hiden: "hidden",
+      disbled: "disabled",
+      requird: "required",
+      selectd: "selected"
+    }[t] || t;
+  }
+}
+function w(i) {
+  return new h({ aria: i });
+}
+class I extends s {
+  constructor() {
+    super(...arguments), o(this, "type", "tabIndex"), o(this, "priority", d.CUSTOM + 12);
+  }
+  apply(t, e) {
+    if (!e.element) return;
+    const { tabIndex: r } = this.properties;
+    process.env.NODE_ENV === "development" && this.validateTabIndex(r), e.element.setAttribute("tabindex", String(r));
+  }
+  validateTabIndex(t) {
+    if (typeof t != "number" || !Number.isInteger(t)) {
+      console.warn("TachUI TabIndex Modifier: tabIndex must be an integer");
+      return;
+    }
+    t > 0 && console.info('TachUI TabIndex Modifier: Positive tabIndex values can disrupt natural tab order. Consider using tabIndex="0" for focusable elements and tabIndex="-1" for programmatically focusable elements.'), t < -1 && console.warn("TachUI TabIndex Modifier: tabIndex values less than -1 are not recommended. Use -1 to remove from tab order or 0+ for tab order.");
+  }
+}
+function M(i) {
+  return new I({ tabIndex: i });
+}
+class l extends s {
+  // Early application for CSS variables
+  constructor(t) {
+    const e = {};
+    for (const [r, a] of Object.entries(t))
+      typeof a == "function" && "peek" in a ? e[r] = a.peek() : e[r] = a;
+    super(e), o(this, "type", "customProperties"), o(this, "priority", 5);
+  }
+  apply(t, e) {
+    if (!e.element) return;
+    const r = this.computeCustomPropertyStyles(this.properties);
+    this.applyStyles(e.element, r);
+  }
+  computeCustomPropertyStyles(t) {
+    const e = {};
+    if (t.properties)
+      for (const [r, a] of Object.entries(t.properties)) {
+        const n = r.startsWith("--") ? r : `--${r}`;
+        e[n] = this.formatPropertyValue(a);
+      }
+    return e;
+  }
+  formatPropertyValue(t) {
+    return typeof t == "number" ? t.toString() : t;
+  }
+}
+function T(i) {
+  return new l({
+    properties: i.properties,
+    scope: i.scope || "local"
+  });
+}
+function D(i, t, e) {
+  const r = i.startsWith("--") ? i : `--${i}`;
+  return new l({
+    properties: { [r]: t },
+    scope: e || "local"
+  });
+}
+function U(i) {
+  return new l({
+    properties: i,
+    scope: "local"
+  });
+}
+function $(i) {
+  const t = {};
+  for (const [e, r] of Object.entries(i))
+    t[`--theme-color-${e}`] = r;
+  return new l({
+    properties: t,
+    scope: "local"
+  });
+}
+function x(i) {
+  const t = {};
+  for (const [e, r] of Object.entries(i))
+    t[`--token-${e}`] = r;
+  return new l({
+    properties: t,
+    scope: "local"
+  });
+}
+export {
+  h as AriaModifier,
+  l as CustomPropertiesModifier,
+  m as DataModifier,
+  b as IdModifier,
+  I as TabIndexModifier,
+  w as aria,
+  U as cssVariables,
+  T as customProperties,
+  D as customProperty,
+  v as data,
+  x as designTokens,
+  g as id,
+  M as tabIndex,
+  $ as themeColors
+};
+//# sourceMappingURL=attributes.js.map

package/dist/modifiers/attributes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attributes.js","sources":["../../src/modifiers/attributes.ts"],"sourcesContent":["/**\n * HTML and ARIA Attributes Implementation\n *\n * Implementation of HTML attributes, ARIA accessibility attributes, and related modifiers.\n * These modifiers provide essential web functionality for accessibility, testing, and semantic markup.\n */\n\nimport type { DOMNode } from '../runtime/types'\nimport { BaseModifier } from './base'\nimport type { ModifierContext, ReactiveModifierProps } from './types'\nimport { ModifierPriority } from './types'\n\n// ============================================================================\n// HTML and ARIA Attribute Modifiers\n// ============================================================================\n\n/**\n * ID Modifier - HTML Element ID\n * Sets the id attribute for page anchoring, accessibility, and testing selectors\n */\nexport interface IdOptions {\n  id: string\n}\n\nexport type ReactiveIdOptions = ReactiveModifierProps<IdOptions>\n\nexport class IdModifier extends BaseModifier<IdOptions> {\n  readonly type = 'id'\n  readonly priority = ModifierPriority.CUSTOM + 10\n\n  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {\n    if (!context.element) return\n\n    const { id } = this.properties\n\n    // Validate ID in development mode\n    if (process.env.NODE_ENV === 'development') {\n      this.validateId(id)\n    }\n\n    // Set id attribute\n    context.element.setAttribute('id', id)\n    \n    return undefined\n  }\n\n  private validateId(id: string): void {\n    // Check for valid HTML ID format\n    if (!id || typeof id !== 'string') {\n      console.warn('TachUI ID Modifier: ID must be a non-empty string')\n      return\n    }\n\n    // HTML ID rules: must start with letter, can contain letters, digits, hyphens, underscores, colons, periods\n    const validIdPattern = /^[a-zA-Z][a-zA-Z0-9_:-]*$/\n    if (!validIdPattern.test(id)) {\n      console.warn(`TachUI ID Modifier: Invalid ID format \"${id}\". IDs must start with a letter and contain only letters, digits, hyphens, underscores, colons, and periods.`)\n    }\n\n    // Check for duplicate IDs in development\n    if (document.getElementById(id)) {\n      console.warn(`TachUI ID Modifier: Duplicate ID \"${id}\" detected. IDs should be unique within the document.`)\n    }\n  }\n}\n\n/**\n * ID modifier function\n */\nexport function id(value: string): IdModifier {\n  return new IdModifier({ id: value })\n}\n\n// ============================================================================\n// Data Attributes Modifier - Data Attributes for Testing and Analytics\n// ============================================================================\n\nexport interface DataAttributes {\n  [key: string]: string | number | boolean\n}\n\nexport interface DataOptions {\n  data: DataAttributes\n}\n\nexport type ReactiveDataOptions = ReactiveModifierProps<DataOptions>\n\nexport class DataModifier extends BaseModifier<DataOptions> {\n  readonly type = 'data'\n  readonly priority = ModifierPriority.CUSTOM + 5\n\n  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {\n    if (!context.element) return\n\n    const { data } = this.properties\n\n    // Validate data attributes in development mode\n    if (process.env.NODE_ENV === 'development') {\n      this.validateDataAttributes(data)\n    }\n\n    // Apply data attributes\n    Object.entries(data).forEach(([key, value]) => {\n      const attributeName = this.formatDataAttributeName(key)\n      const attributeValue = this.formatDataAttributeValue(value)\n      context.element!.setAttribute(attributeName, attributeValue)\n    })\n    \n    return undefined\n  }\n\n  private formatDataAttributeName(key: string): string {\n    // Convert camelCase to kebab-case and ensure data- prefix\n    const kebabKey = key.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`)\n    return kebabKey.startsWith('data-') ? kebabKey : `data-${kebabKey}`\n  }\n\n  private formatDataAttributeValue(value: string | number | boolean): string {\n    if (typeof value === 'boolean') {\n      return value ? 'true' : 'false'\n    }\n    return String(value)\n  }\n\n  private validateDataAttributes(data: DataAttributes): void {\n    Object.entries(data).forEach(([key, value]) => {\n      // Validate key format\n      if (!key || typeof key !== 'string') {\n        console.warn('TachUI Data Modifier: Data attribute keys must be non-empty strings')\n        return\n      }\n\n      // Check for valid data attribute naming\n      const validKeyPattern = /^[a-zA-Z][a-zA-Z0-9-_]*$/\n      if (!validKeyPattern.test(key.replace(/^data-/, ''))) {\n        console.warn(`TachUI Data Modifier: Invalid data attribute key \"${key}\". Keys should contain only letters, numbers, hyphens, and underscores.`)\n      }\n\n      // Validate value types\n      if (value !== null && value !== undefined && \n          typeof value !== 'string' && typeof value !== 'number' && typeof value !== 'boolean') {\n        console.warn(`TachUI Data Modifier: Data attribute \"${key}\" has invalid value type. Only strings, numbers, and booleans are supported.`)\n      }\n    })\n  }\n}\n\n/**\n * Data attributes modifier function\n */\nexport function data(attributes: DataAttributes): DataModifier {\n  return new DataModifier({ data: attributes })\n}\n\n// ============================================================================\n// ARIA Attributes Modifier - Accessibility Attributes\n// ============================================================================\n\nexport interface AriaAttributes {\n  // Common ARIA attributes with type safety\n  label?: string\n  labelledby?: string\n  describedby?: string\n  expanded?: boolean\n  hidden?: boolean\n  live?: 'off' | 'polite' | 'assertive'\n  atomic?: boolean\n  busy?: boolean\n  controls?: string\n  current?: boolean | 'page' | 'step' | 'location' | 'date' | 'time'\n  disabled?: boolean\n  grabbed?: boolean\n  haspopup?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'\n  invalid?: boolean | 'false' | 'true' | 'grammar' | 'spelling'\n  level?: number\n  multiline?: boolean\n  multiselectable?: boolean\n  orientation?: 'horizontal' | 'vertical'\n  owns?: string\n  placeholder?: string\n  posinset?: number\n  pressed?: boolean\n  readonly?: boolean\n  relevant?: 'additions' | 'removals' | 'text' | 'all' | string\n  required?: boolean\n  selected?: boolean\n  setsize?: number\n  sort?: 'none' | 'ascending' | 'descending' | 'other'\n  valuemax?: number\n  valuemin?: number\n  valuenow?: number\n  valuetext?: string\n  role?: string\n  // Allow custom ARIA attributes\n  [key: string]: string | number | boolean | undefined\n}\n\nexport interface AriaOptions {\n  aria: AriaAttributes\n}\n\nexport type ReactiveAriaOptions = ReactiveModifierProps<AriaOptions>\n\nexport class AriaModifier extends BaseModifier<AriaOptions> {\n  readonly type = 'aria'\n  readonly priority = ModifierPriority.CUSTOM + 15\n\n  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {\n    if (!context.element) return\n\n    const { aria } = this.properties\n\n    // Validate ARIA attributes in development mode\n    if (process.env.NODE_ENV === 'development') {\n      this.validateAriaAttributes(aria)\n    }\n\n    // Apply ARIA attributes\n    Object.entries(aria).forEach(([key, value]) => {\n      if (value !== undefined && value !== null) {\n        const attributeName = this.formatAriaAttributeName(key)\n        const attributeValue = this.formatAriaAttributeValue(value)\n        context.element!.setAttribute(attributeName, attributeValue)\n      }\n    })\n    \n    return undefined\n  }\n\n  private formatAriaAttributeName(key: string): string {\n    // Handle special case of 'role' attribute\n    if (key === 'role') {\n      return 'role'\n    }\n\n    // Convert camelCase to kebab-case and ensure aria- prefix\n    const kebabKey = key.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`)\n    return kebabKey.startsWith('aria-') ? kebabKey : `aria-${kebabKey}`\n  }\n\n  private formatAriaAttributeValue(value: string | number | boolean): string {\n    if (typeof value === 'boolean') {\n      return value ? 'true' : 'false'\n    }\n    return String(value)\n  }\n\n  private validateAriaAttributes(aria: AriaAttributes): void {\n    const knownAttributes = new Set([\n      'label', 'labelledby', 'describedby', 'expanded', 'hidden', 'live', 'atomic',\n      'busy', 'controls', 'current', 'disabled', 'grabbed', 'haspopup', 'invalid',\n      'level', 'multiline', 'multiselectable', 'orientation', 'owns', 'placeholder',\n      'posinset', 'pressed', 'readonly', 'relevant', 'required', 'selected',\n      'setsize', 'sort', 'valuemax', 'valuemin', 'valuenow', 'valuetext', 'role'\n    ])\n\n    Object.entries(aria).forEach(([key, value]) => {\n      // Check for valid attribute names\n      if (!key || typeof key !== 'string') {\n        console.warn('TachUI ARIA Modifier: ARIA attribute keys must be non-empty strings')\n        return\n      }\n\n      // Warn about unknown ARIA attributes (but still allow them for extensibility)\n      const normalizedKey = key.replace(/^aria-/, '')\n      if (!knownAttributes.has(normalizedKey) && !normalizedKey.startsWith('aria-')) {\n        console.warn(`TachUI ARIA Modifier: Unknown ARIA attribute \"${key}\". This may not be a valid ARIA attribute. Did you mean \"${this.suggestCorrection(normalizedKey)}\"?`)\n      }\n\n      // Validate specific attribute values\n      this.validateSpecificAriaAttribute(key, value)\n    })\n  }\n\n  private validateSpecificAriaAttribute(key: string, value: any): void {\n    const normalizedKey = key.replace(/^aria-/, '')\n\n    switch (normalizedKey) {\n      case 'live':\n        if (value !== 'off' && value !== 'polite' && value !== 'assertive') {\n          console.warn(`TachUI ARIA Modifier: Invalid value \"${value}\" for aria-live. Valid values are: \"off\", \"polite\", \"assertive\"`)\n        }\n        break\n      case 'haspopup':\n        if (typeof value === 'string' && !['false', 'true', 'menu', 'listbox', 'tree', 'grid', 'dialog'].includes(value)) {\n          console.warn(`TachUI ARIA Modifier: Invalid value \"${value}\" for aria-haspopup. Valid values are: false, true, \"menu\", \"listbox\", \"tree\", \"grid\", \"dialog\"`)\n        }\n        break\n      case 'current':\n        if (typeof value === 'string' && !['page', 'step', 'location', 'date', 'time'].includes(value)) {\n          console.warn(`TachUI ARIA Modifier: Invalid value \"${value}\" for aria-current. Valid values are: false, true, \"page\", \"step\", \"location\", \"date\", \"time\"`)\n        }\n        break\n      case 'invalid':\n        if (typeof value === 'string' && !['false', 'true', 'grammar', 'spelling'].includes(value)) {\n          console.warn(`TachUI ARIA Modifier: Invalid value \"${value}\" for aria-invalid. Valid values are: false, true, \"grammar\", \"spelling\"`)\n        }\n        break\n      case 'orientation':\n        if (value !== 'horizontal' && value !== 'vertical') {\n          console.warn(`TachUI ARIA Modifier: Invalid value \"${value}\" for aria-orientation. Valid values are: \"horizontal\", \"vertical\"`)\n        }\n        break\n      case 'sort':\n        if (!['none', 'ascending', 'descending', 'other'].includes(value as string)) {\n          console.warn(`TachUI ARIA Modifier: Invalid value \"${value}\" for aria-sort. Valid values are: \"none\", \"ascending\", \"descending\", \"other\"`)\n        }\n        break\n      case 'level':\n      case 'posinset':\n      case 'setsize':\n      case 'valuemax':\n      case 'valuemin':\n      case 'valuenow':\n        if (typeof value === 'number' && (value < 0 || !Number.isInteger(value))) {\n          console.warn(`TachUI ARIA Modifier: Invalid value \"${value}\" for aria-${normalizedKey}. Must be a non-negative integer.`)\n        }\n        break\n    }\n  }\n\n  private suggestCorrection(key: string): string {\n    const suggestions: Record<string, string> = {\n      'lable': 'label',\n      'labeledby': 'labelledby',\n      'descripedby': 'describedby',\n      'descibed': 'describedby',\n      'controled': 'controls',\n      'expaned': 'expanded',\n      'hiden': 'hidden',\n      'disbled': 'disabled',\n      'requird': 'required',\n      'selectd': 'selected'\n    }\n    \n    return suggestions[key] || key\n  }\n}\n\n/**\n * ARIA attributes modifier function\n */\nexport function aria(attributes: AriaAttributes): AriaModifier {\n  return new AriaModifier({ aria: attributes })\n}\n\n// NOTE: TextShadow functionality has been moved to enhanced.ts for unified shadow system\n// Use the enhanced textShadow modifier instead: import { textShadow } from './enhanced'\n\n// ============================================================================\n// Tab Index Modifier - Tab Navigation Order\n// ============================================================================\n\nexport interface TabIndexOptions {\n  tabIndex: number\n}\n\nexport type ReactiveTabIndexOptions = ReactiveModifierProps<TabIndexOptions>\n\nexport class TabIndexModifier extends BaseModifier<TabIndexOptions> {\n  readonly type = 'tabIndex'\n  readonly priority = ModifierPriority.CUSTOM + 12\n\n  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {\n    if (!context.element) return\n\n    const { tabIndex } = this.properties\n\n    // Validate tabIndex in development mode\n    if (process.env.NODE_ENV === 'development') {\n      this.validateTabIndex(tabIndex)\n    }\n\n    // Set tabindex attribute\n    context.element.setAttribute('tabindex', String(tabIndex))\n    \n    return undefined\n  }\n\n  private validateTabIndex(tabIndex: number): void {\n    if (typeof tabIndex !== 'number' || !Number.isInteger(tabIndex)) {\n      console.warn('TachUI TabIndex Modifier: tabIndex must be an integer')\n      return\n    }\n\n    // Provide helpful guidance\n    if (tabIndex > 0) {\n      console.info('TachUI TabIndex Modifier: Positive tabIndex values can disrupt natural tab order. Consider using tabIndex=\"0\" for focusable elements and tabIndex=\"-1\" for programmatically focusable elements.')\n    }\n\n    if (tabIndex < -1) {\n      console.warn('TachUI TabIndex Modifier: tabIndex values less than -1 are not recommended. Use -1 to remove from tab order or 0+ for tab order.')\n    }\n  }\n}\n\n/**\n * TabIndex modifier function\n */\nexport function tabIndex(value: number): TabIndexModifier {\n  return new TabIndexModifier({ tabIndex: value })\n}\n\n// ============================================================================\n// CSS Custom Properties Modifier (Moved from css-features.ts)\n// ============================================================================\n\nexport interface CSSCustomPropertiesConfig {\n  properties: Record<string, string | number>\n  scope?: 'local' | 'global' | 'root'\n}\n\nexport interface CustomPropertiesOptions {\n  properties?: Record<string, string | number>\n  scope?: 'local' | 'global' | 'root'\n}\n\nexport type ReactiveCustomPropertiesOptions = ReactiveModifierProps<CustomPropertiesOptions>\n\nexport class CustomPropertiesModifier extends BaseModifier<CustomPropertiesOptions> {\n  readonly type = 'customProperties'\n  readonly priority = 5  // Early application for CSS variables\n\n  constructor(options: ReactiveCustomPropertiesOptions) {\n    const resolvedOptions: CustomPropertiesOptions = {}\n    for (const [key, value] of Object.entries(options)) {\n      if (typeof value === 'function' && 'peek' in value) {\n        ;(resolvedOptions as any)[key] = (value as any).peek()\n      } else {\n        ;(resolvedOptions as any)[key] = value\n      }\n    }\n    super(resolvedOptions)\n  }\n\n  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {\n    if (!context.element) return\n\n    const styles = this.computeCustomPropertyStyles(this.properties)\n    this.applyStyles(context.element, styles)\n    \n    return undefined\n  }\n\n  private computeCustomPropertyStyles(props: CustomPropertiesOptions) {\n    const styles: Record<string, string> = {}\n\n    if (props.properties) {\n      for (const [name, value] of Object.entries(props.properties)) {\n        const propertyName = name.startsWith('--') ? name : `--${name}`\n        styles[propertyName] = this.formatPropertyValue(value)\n      }\n    }\n\n    return styles\n  }\n\n  private formatPropertyValue(value: string | number): string {\n    if (typeof value === 'number') {\n      return value.toString()\n    }\n    return value\n  }\n}\n\n/**\n * CSS custom properties modifier for creating CSS variables\n *\n * @example\n * ```typescript\n * .customProperties({\n *   properties: {\n *     'primary-color': '#007AFF',\n *     'font-size': 16,\n *     '--custom-spacing': '1rem'  // Already prefixed\n *   },\n *   scope: 'local'\n * })\n * ```\n */\nexport function customProperties(config: CSSCustomPropertiesConfig): CustomPropertiesModifier {\n  return new CustomPropertiesModifier({\n    properties: config.properties,\n    scope: config.scope || 'local'\n  })\n}\n\n/**\n * Single CSS custom property modifier\n *\n * @example\n * ```typescript\n * .customProperty('primary-color', '#007AFF')\n * .customProperty('--font-size', 16)  // Already prefixed\n * .customProperty('spacing', '1rem', 'global')\n * ```\n */\nexport function customProperty(name: string, value: string | number, scope?: 'local' | 'global' | 'root'): CustomPropertiesModifier {\n  const propertyName = name.startsWith('--') ? name : `--${name}`\n  return new CustomPropertiesModifier({\n    properties: { [propertyName]: value },\n    scope: scope || 'local'\n  })\n}\n\n/**\n * CSS variables modifier - alias for customProperties\n *\n * @example\n * ```typescript\n * .cssVariables({\n *   'primary': '#007AFF',\n *   'secondary': '#34C759',\n *   'spacing': 16\n * })\n * ```\n */\nexport function cssVariables(variables: Record<string, string | number>): CustomPropertiesModifier {\n  return new CustomPropertiesModifier({\n    properties: variables,\n    scope: 'local'\n  })\n}\n\n/**\n * Theme colors as CSS custom properties\n *\n * @example\n * ```typescript\n * .themeColors({\n *   primary: '#007AFF',\n *   secondary: '#34C759',\n *   accent: '#FF9500',\n *   background: '#FFFFFF',\n *   surface: '#F2F2F7'\n * })\n * ```\n */\nexport function themeColors(colors: Record<string, string>): CustomPropertiesModifier {\n  const themeProperties: Record<string, string> = {}\n  for (const [name, value] of Object.entries(colors)) {\n    themeProperties[`--theme-color-${name}`] = value\n  }\n  return new CustomPropertiesModifier({\n    properties: themeProperties,\n    scope: 'local'\n  })\n}\n\n/**\n * Design tokens as CSS custom properties\n *\n * @example\n * ```typescript\n * .designTokens({\n *   'spacing-sm': 8,\n *   'spacing-md': 16,\n *   'spacing-lg': 24,\n *   'border-radius': 8,\n *   'font-size-body': 16,\n *   'font-size-title': 24\n * })\n * ```\n */\nexport function designTokens(tokens: Record<string, string | number>): CustomPropertiesModifier {\n  const tokenProperties: Record<string, string | number> = {}\n  for (const [name, value] of Object.entries(tokens)) {\n    tokenProperties[`--token-${name}`] = value\n  }\n  return new CustomPropertiesModifier({\n    properties: tokenProperties,\n    scope: 'local'\n  })\n}"],"names":["IdModifier","BaseModifier","__publicField","ModifierPriority","_node","context","id","value","DataModifier","data","key","attributeName","attributeValue","kebabKey","letter","attributes","AriaModifier","aria","knownAttributes","normalizedKey","TabIndexModifier","tabIndex","CustomPropertiesModifier","options","resolvedOptions","styles","props","name","propertyName","customProperties","config","customProperty","scope","cssVariables","variables","themeColors","colors","themeProperties","designTokens","tokens","tokenProperties"],"mappings":"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"}

package/dist/modifiers/backdrop.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("./base.cjs"),u=require("./types.cjs");var c=Object.defineProperty,d=(o,e,r)=>e in o?c(o,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):o[e]=r,i=(o,e,r)=>d(o,typeof e!="symbol"?e+"":e,r);class a extends p.BaseModifier{constructor(e){let r="blur(10px)";e.backdropFilter&&(typeof e.backdropFilter=="function"&&"peek"in e.backdropFilter?r=e.backdropFilter.peek():r=e.backdropFilter);const t={backdropFilter:r};"fallbackColor"in e&&e.fallbackColor!==void 0&&(typeof e.fallbackColor=="function"&&"peek"in e.fallbackColor?t.fallbackColor=e.fallbackColor.peek():t.fallbackColor=e.fallbackColor),super(t),i(this,"type","backdropFilter"),i(this,"priority",u.ModifierPriority.APPEARANCE+15)}apply(e,r){if(!r.element)return;const t=this.computeBackdropFilterStyles(this.properties);this.applyStyles(r.element,t)}computeBackdropFilterStyles(e){const r={};if(e.backdropFilter){if(this.supportsBackdropFilter()){const t=this.formatBackdropFilter(e.backdropFilter);r.backdropFilter=t,r.webkitBackdropFilter=t}else if(e.fallbackColor){const t=this.resolveColorValue(e.fallbackColor);r.backgroundColor=t,process.env.NODE_ENV==="development"&&console.info("TachUI: backdrop-filter not supported, using fallback color:",t)}}return r}formatBackdropFilter(e){if(typeof e=="string")return e;const r=[];if(e.blur!==void 0&&r.push(`blur(${e.blur}px)`),e.brightness!==void 0&&r.push(`brightness(${e.brightness})`),e.contrast!==void 0&&r.push(`contrast(${e.contrast})`),e.dropShadow)if(typeof e.dropShadow=="string")r.push(`drop-shadow(${e.dropShadow})`);else{const{x:t,y:s,blur:l,color:n}=e.dropShadow;r.push(`drop-shadow(${t}px ${s}px ${l}px ${n})`)}return e.grayscale!==void 0&&r.push(`grayscale(${e.grayscale})`),e.hueRotate!==void 0&&r.push(`hue-rotate(${e.hueRotate}deg)`),e.invert!==void 0&&r.push(`invert(${e.invert})`),e.opacity!==void 0&&r.push(`opacity(${e.opacity})`),e.saturate!==void 0&&r.push(`saturate(${e.saturate})`),e.sepia!==void 0&&r.push(`sepia(${e.sepia})`),r.length===0?(process.env.NODE_ENV==="development"&&console.warn("TachUI BackdropFilter: No filter functions specified - provide blur, brightness, contrast, etc."),"none"):r.join(" ")}supportsBackdropFilter(){return typeof CSS<"u"&&CSS.supports?CSS.supports("backdrop-filter","blur(1px)")||CSS.supports("-webkit-backdrop-filter","blur(1px)"):!1}resolveColorValue(e){if(typeof e=="string")return e;if(typeof e=="function"&&"peek"in e)return e.peek();if(e&&typeof e=="object"){if("getValue"in e&&typeof e.getValue=="function")return e.getValue();if("value"in e&&typeof e.value=="string")return e.value;if("toString"in e&&typeof e.toString=="function")return e.toString()}return String(e)}}function b(o,e){return new a({backdropFilter:o,...e&&{fallbackColor:e}})}const f={subtle:{config:{blur:3,saturate:1.05,brightness:1.05},fallbackColor:"rgba(255, 255, 255, 0.05)"},light:{config:{blur:8,saturate:1.15,brightness:1.1},fallbackColor:"rgba(255, 255, 255, 0.1)"},medium:{config:{blur:16,saturate:1.3,brightness:1.15},fallbackColor:"rgba(255, 255, 255, 0.15)"},heavy:{config:{blur:24,saturate:1.5,brightness:1.2},fallbackColor:"rgba(255, 255, 255, 0.2)"}};function k(o="medium",e){const r=f[o];return new a({backdropFilter:r.config,fallbackColor:e||r.fallbackColor})}function h(o,e=1.2,r=1.1,t){return new a({backdropFilter:{blur:o,saturate:e,brightness:r},fallbackColor:t||`rgba(255, 255, 255, ${Math.min(o/200,.25)})`})}exports.BackdropFilterModifier=a;exports.backdropFilter=b;exports.customGlassmorphism=h;exports.glassmorphism=k;
+//# sourceMappingURL=backdrop.cjs.map

package/dist/modifiers/backdrop.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"backdrop.cjs","sources":["../../src/modifiers/backdrop.ts"],"sourcesContent":["/**\n * Backdrop Filter Modifiers Implementation\n *\n * Unified implementation combining the best elements of both previous backdrop filter\n * implementations - production-ready browser support with enhanced developer experience.\n */\n\nimport type { DOMNode } from '../runtime/types'\nimport { BaseModifier } from './base'\nimport type { ModifierContext, ReactiveModifierProps, ColorValue } from './types'\nimport { ModifierPriority } from './types'\n\n// ============================================================================\n// Enhanced Backdrop Filter Configuration\n// ============================================================================\n\nexport interface BackdropFilterConfig {\n  blur?: number\n  brightness?: number\n  contrast?: number\n  dropShadow?: {\n    x: number\n    y: number\n    blur: number\n    color: string\n  } | string  // Support both object config and CSS string\n  grayscale?: number\n  hueRotate?: number\n  invert?: number\n  opacity?: number\n  saturate?: number\n  sepia?: number\n}\n\nexport interface BackdropFilterOptions {\n  backdropFilter: BackdropFilterConfig | string\n  fallbackColor?: ColorValue  // Browser compatibility fallback - supports ColorAssets\n}\n\nexport type ReactiveBackdropFilterOptions = ReactiveModifierProps<BackdropFilterOptions>\n\n// ============================================================================\n// Unified Backdrop Filter Modifier\n// ============================================================================\n\nexport class BackdropFilterModifier extends BaseModifier<BackdropFilterOptions> {\n  readonly type = 'backdropFilter'\n  readonly priority = ModifierPriority.APPEARANCE + 15\n\n  constructor(options: ReactiveBackdropFilterOptions) {\n    // Handle backdropFilter specifically\n    let backdropFilterValue: BackdropFilterConfig | string = 'blur(10px)'\n    if (options.backdropFilter) {\n      if (typeof options.backdropFilter === 'function' && 'peek' in options.backdropFilter) {\n        backdropFilterValue = (options.backdropFilter as any).peek()\n      } else {\n        backdropFilterValue = options.backdropFilter as BackdropFilterConfig | string\n      }\n    }\n\n    const resolvedOptions: BackdropFilterOptions = {\n      backdropFilter: backdropFilterValue\n    }\n\n    // Handle fallbackColor\n    if ('fallbackColor' in options && options.fallbackColor !== undefined) {\n      if (typeof options.fallbackColor === 'function' && 'peek' in options.fallbackColor) {\n        resolvedOptions.fallbackColor = (options.fallbackColor as any).peek()\n      } else {\n        resolvedOptions.fallbackColor = options.fallbackColor as ColorValue\n      }\n    }\n\n    super(resolvedOptions)\n  }\n\n  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {\n    if (!context.element) return\n\n    const styles = this.computeBackdropFilterStyles(this.properties)\n    this.applyStyles(context.element, styles)\n\n    return undefined\n  }\n\n  private computeBackdropFilterStyles(props: BackdropFilterOptions) {\n    const styles: Record<string, string> = {}\n\n    if (props.backdropFilter) {\n      if (this.supportsBackdropFilter()) {\n        const filterValue = this.formatBackdropFilter(props.backdropFilter)\n\n        // Apply with vendor prefixes for maximum browser support\n        styles.backdropFilter = filterValue\n        styles.webkitBackdropFilter = filterValue // Safari support\n      } else if (props.fallbackColor) {\n        // Graceful fallback for browsers without backdrop-filter support\n        const resolvedColor = this.resolveColorValue(props.fallbackColor)\n        styles.backgroundColor = resolvedColor\n        if (process.env.NODE_ENV === 'development') {\n          console.info('TachUI: backdrop-filter not supported, using fallback color:', resolvedColor)\n        }\n      }\n    }\n\n    return styles\n  }\n\n  private formatBackdropFilter(filter: BackdropFilterConfig | string): string {\n    if (typeof filter === 'string') {\n      return filter\n    }\n\n    const filterFunctions: string[] = []\n\n    // Convert config object to CSS filter functions\n    // Order matters for consistent output\n    if (filter.blur !== undefined) {\n      filterFunctions.push(`blur(${filter.blur}px)`)\n    }\n    if (filter.brightness !== undefined) {\n      filterFunctions.push(`brightness(${filter.brightness})`)\n    }\n    if (filter.contrast !== undefined) {\n      filterFunctions.push(`contrast(${filter.contrast})`)\n    }\n    if (filter.dropShadow) {\n      if (typeof filter.dropShadow === 'string') {\n        filterFunctions.push(`drop-shadow(${filter.dropShadow})`)\n      } else {\n        const { x, y, blur, color } = filter.dropShadow\n        filterFunctions.push(`drop-shadow(${x}px ${y}px ${blur}px ${color})`)\n      }\n    }\n    if (filter.grayscale !== undefined) {\n      filterFunctions.push(`grayscale(${filter.grayscale})`)\n    }\n    if (filter.hueRotate !== undefined) {\n      filterFunctions.push(`hue-rotate(${filter.hueRotate}deg)`)\n    }\n    if (filter.invert !== undefined) {\n      filterFunctions.push(`invert(${filter.invert})`)\n    }\n    if (filter.opacity !== undefined) {\n      filterFunctions.push(`opacity(${filter.opacity})`)\n    }\n    if (filter.saturate !== undefined) {\n      filterFunctions.push(`saturate(${filter.saturate})`)\n    }\n    if (filter.sepia !== undefined) {\n      filterFunctions.push(`sepia(${filter.sepia})`)\n    }\n\n    if (filterFunctions.length === 0) {\n      if (process.env.NODE_ENV === 'development') {\n        console.warn('TachUI BackdropFilter: No filter functions specified - provide blur, brightness, contrast, etc.')\n      }\n      return 'none'\n    }\n\n    return filterFunctions.join(' ')\n  }\n\n  private supportsBackdropFilter(): boolean {\n    // Runtime browser feature detection\n    if (typeof CSS !== 'undefined' && CSS.supports) {\n      return CSS.supports('backdrop-filter', 'blur(1px)') ||\n             CSS.supports('-webkit-backdrop-filter', 'blur(1px)')\n    }\n    // Conservative fallback if CSS.supports is not available\n    return false\n  }\n\n  /**\n   * Resolve ColorValue (including ColorAssets) to CSS color string\n   */\n  private resolveColorValue(color: ColorValue): string {\n    if (typeof color === 'string') {\n      return color\n    }\n\n    // Handle Signal<string>\n    if (typeof color === 'function' && 'peek' in color) {\n      return (color as any).peek()\n    }\n\n    // Handle Asset types (ColorAssetProxy, Asset)\n    if (color && typeof color === 'object') {\n      // ColorAssetProxy has a getValue method\n      if ('getValue' in color && typeof color.getValue === 'function') {\n        return color.getValue()\n      }\n\n      // Asset has a value property\n      if ('value' in color && typeof color.value === 'string') {\n        return color.value\n      }\n\n      // Asset proxy might have toString\n      if ('toString' in color && typeof color.toString === 'function') {\n        return color.toString()\n      }\n    }\n\n    // Fallback - convert to string\n    return String(color)\n  }\n}\n\n// ============================================================================\n// Backdrop Filter Factory Functions\n// ============================================================================\n\n/**\n * Create a backdrop filter modifier with enhanced configuration options\n */\nexport function backdropFilter(config: BackdropFilterConfig, fallbackColor?: ColorValue): BackdropFilterModifier\nexport function backdropFilter(cssValue: string, fallbackColor?: ColorValue): BackdropFilterModifier\nexport function backdropFilter(\n  value: BackdropFilterConfig | string,\n  fallbackColor?: ColorValue\n): BackdropFilterModifier {\n  return new BackdropFilterModifier({\n    backdropFilter: value,\n    ...(fallbackColor && { fallbackColor })\n  })\n}\n\n// ============================================================================\n// Enhanced Glassmorphism Presets\n// ============================================================================\n\nexport type GlassmorphismIntensity = 'light' | 'medium' | 'heavy' | 'subtle'\n\ninterface GlassmorphismPreset {\n  config: BackdropFilterConfig\n  fallbackColor: ColorValue\n}\n\n/**\n * Refined glassmorphism presets with optimized blur, saturation, and brightness values\n */\nconst GLASSMORPHISM_PRESETS: Record<GlassmorphismIntensity, GlassmorphismPreset> = {\n  subtle: {\n    config: { blur: 3, saturate: 1.05, brightness: 1.05 },\n    fallbackColor: 'rgba(255, 255, 255, 0.05)'\n  },\n  light: {\n    config: { blur: 8, saturate: 1.15, brightness: 1.1 },\n    fallbackColor: 'rgba(255, 255, 255, 0.1)'\n  },\n  medium: {\n    config: { blur: 16, saturate: 1.3, brightness: 1.15 },\n    fallbackColor: 'rgba(255, 255, 255, 0.15)'\n  },\n  heavy: {\n    config: { blur: 24, saturate: 1.5, brightness: 1.2 },\n    fallbackColor: 'rgba(255, 255, 255, 0.2)'\n  }\n} as const\n\n/**\n * Create glassmorphism effect with intensity-based presets\n */\nexport function glassmorphism(\n  intensity: GlassmorphismIntensity = 'medium',\n  customFallback?: ColorValue\n): BackdropFilterModifier {\n  const preset = GLASSMORPHISM_PRESETS[intensity]\n\n  return new BackdropFilterModifier({\n    backdropFilter: preset.config,\n    fallbackColor: customFallback || preset.fallbackColor\n  })\n}\n\n/**\n * Create custom glassmorphism effect with fine-tuned parameters\n */\nexport function customGlassmorphism(\n  blur: number,\n  saturate: number = 1.2,\n  brightness: number = 1.1,\n  fallbackColor?: ColorValue\n): BackdropFilterModifier {\n  return new BackdropFilterModifier({\n    backdropFilter: { blur, saturate, brightness },\n    fallbackColor: fallbackColor || `rgba(255, 255, 255, ${Math.min(blur / 200, 0.25)})`\n  })\n}\n"],"names":["BackdropFilterModifier","BaseModifier","options","backdropFilterValue","resolvedOptions","__publicField","ModifierPriority","_node","context","styles","props","filterValue","resolvedColor","filter","filterFunctions","x","y","blur","color","backdropFilter","value","fallbackColor","GLASSMORPHISM_PRESETS","glassmorphism","intensity","customFallback","preset","customGlassmorphism","saturate","brightness"],"mappings":"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"}

package/dist/modifiers/backdrop.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Backdrop Filter Modifiers Implementation
+ *
+ * Unified implementation combining the best elements of both previous backdrop filter
+ * implementations - production-ready browser support with enhanced developer experience.
+ */
+import type { DOMNode } from '../runtime/types';
+import { BaseModifier } from './base';
+import type { ModifierContext, ReactiveModifierProps, ColorValue } from './types';
+export interface BackdropFilterConfig {
+    blur?: number;
+    brightness?: number;
+    contrast?: number;
+    dropShadow?: {
+        x: number;
+        y: number;
+        blur: number;
+        color: string;
+    } | string;
+    grayscale?: number;
+    hueRotate?: number;
+    invert?: number;
+    opacity?: number;
+    saturate?: number;
+    sepia?: number;
+}
+export interface BackdropFilterOptions {
+    backdropFilter: BackdropFilterConfig | string;
+    fallbackColor?: ColorValue;
+}
+export type ReactiveBackdropFilterOptions = ReactiveModifierProps<BackdropFilterOptions>;
+export declare class BackdropFilterModifier extends BaseModifier<BackdropFilterOptions> {
+    readonly type = "backdropFilter";
+    readonly priority: number;
+    constructor(options: ReactiveBackdropFilterOptions);
+    apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined;
+    private computeBackdropFilterStyles;
+    private formatBackdropFilter;
+    private supportsBackdropFilter;
+    /**
+     * Resolve ColorValue (including ColorAssets) to CSS color string
+     */
+    private resolveColorValue;
+}
+/**
+ * Create a backdrop filter modifier with enhanced configuration options
+ */
+export declare function backdropFilter(config: BackdropFilterConfig, fallbackColor?: ColorValue): BackdropFilterModifier;
+export declare function backdropFilter(cssValue: string, fallbackColor?: ColorValue): BackdropFilterModifier;
+export type GlassmorphismIntensity = 'light' | 'medium' | 'heavy' | 'subtle';
+/**
+ * Create glassmorphism effect with intensity-based presets
+ */
+export declare function glassmorphism(intensity?: GlassmorphismIntensity, customFallback?: ColorValue): BackdropFilterModifier;
+/**
+ * Create custom glassmorphism effect with fine-tuned parameters
+ */
+export declare function customGlassmorphism(blur: number, saturate?: number, brightness?: number, fallbackColor?: ColorValue): BackdropFilterModifier;
+//# sourceMappingURL=backdrop.d.ts.map

package/dist/modifiers/backdrop.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"backdrop.d.ts","sourceRoot":"","sources":["../../src/modifiers/backdrop.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,eAAe,EAAE,qBAAqB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAOjF,MAAM,WAAW,oBAAoB;IACnC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE;QACX,CAAC,EAAE,MAAM,CAAA;QACT,CAAC,EAAE,MAAM,CAAA;QACT,IAAI,EAAE,MAAM,CAAA;QACZ,KAAK,EAAE,MAAM,CAAA;KACd,GAAG,MAAM,CAAA;IACV,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,qBAAqB;IACpC,cAAc,EAAE,oBAAoB,GAAG,MAAM,CAAA;IAC7C,aAAa,CAAC,EAAE,UAAU,CAAA;CAC3B;AAED,MAAM,MAAM,6BAA6B,GAAG,qBAAqB,CAAC,qBAAqB,CAAC,CAAA;AAMxF,qBAAa,sBAAuB,SAAQ,YAAY,CAAC,qBAAqB,CAAC;IAC7E,QAAQ,CAAC,IAAI,oBAAmB;IAChC,QAAQ,CAAC,QAAQ,SAAmC;gBAExC,OAAO,EAAE,6BAA6B;IA2BlD,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,eAAe,GAAG,OAAO,GAAG,SAAS;IASpE,OAAO,CAAC,2BAA2B;IAuBnC,OAAO,CAAC,oBAAoB;IAuD5B,OAAO,CAAC,sBAAsB;IAU9B;;OAEG;IACH,OAAO,CAAC,iBAAiB;CA+B1B;AAMD;;GAEG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,oBAAoB,EAAE,aAAa,CAAC,EAAE,UAAU,GAAG,sBAAsB,CAAA;AAChH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,UAAU,GAAG,sBAAsB,CAAA;AAepG,MAAM,MAAM,sBAAsB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAA;AA6B5E;;GAEG;AACH,wBAAgB,aAAa,CAC3B,SAAS,GAAE,sBAAiC,EAC5C,cAAc,CAAC,EAAE,UAAU,GAC1B,sBAAsB,CAOxB;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,MAAM,EACZ,QAAQ,GAAE,MAAY,EACtB,UAAU,GAAE,MAAY,EACxB,aAAa,CAAC,EAAE,UAAU,GACzB,sBAAsB,CAKxB"}

package/dist/modifiers/backdrop.js

@@ -0,0 +1,109 @@
+import { BaseModifier as p } from "./base.js";
+import { ModifierPriority as u } from "./types.js";
+var c = Object.defineProperty, d = (o, r, e) => r in o ? c(o, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[r] = e, i = (o, r, e) => d(o, typeof r != "symbol" ? r + "" : r, e);
+class a extends p {
+  constructor(r) {
+    let e = "blur(10px)";
+    r.backdropFilter && (typeof r.backdropFilter == "function" && "peek" in r.backdropFilter ? e = r.backdropFilter.peek() : e = r.backdropFilter);
+    const t = {
+      backdropFilter: e
+    };
+    "fallbackColor" in r && r.fallbackColor !== void 0 && (typeof r.fallbackColor == "function" && "peek" in r.fallbackColor ? t.fallbackColor = r.fallbackColor.peek() : t.fallbackColor = r.fallbackColor), super(t), i(this, "type", "backdropFilter"), i(this, "priority", u.APPEARANCE + 15);
+  }
+  apply(r, e) {
+    if (!e.element) return;
+    const t = this.computeBackdropFilterStyles(this.properties);
+    this.applyStyles(e.element, t);
+  }
+  computeBackdropFilterStyles(r) {
+    const e = {};
+    if (r.backdropFilter) {
+      if (this.supportsBackdropFilter()) {
+        const t = this.formatBackdropFilter(r.backdropFilter);
+        e.backdropFilter = t, e.webkitBackdropFilter = t;
+      } else if (r.fallbackColor) {
+        const t = this.resolveColorValue(r.fallbackColor);
+        e.backgroundColor = t, process.env.NODE_ENV === "development" && console.info("TachUI: backdrop-filter not supported, using fallback color:", t);
+      }
+    }
+    return e;
+  }
+  formatBackdropFilter(r) {
+    if (typeof r == "string")
+      return r;
+    const e = [];
+    if (r.blur !== void 0 && e.push(`blur(${r.blur}px)`), r.brightness !== void 0 && e.push(`brightness(${r.brightness})`), r.contrast !== void 0 && e.push(`contrast(${r.contrast})`), r.dropShadow)
+      if (typeof r.dropShadow == "string")
+        e.push(`drop-shadow(${r.dropShadow})`);
+      else {
+        const { x: t, y: s, blur: l, color: n } = r.dropShadow;
+        e.push(`drop-shadow(${t}px ${s}px ${l}px ${n})`);
+      }
+    return r.grayscale !== void 0 && e.push(`grayscale(${r.grayscale})`), r.hueRotate !== void 0 && e.push(`hue-rotate(${r.hueRotate}deg)`), r.invert !== void 0 && e.push(`invert(${r.invert})`), r.opacity !== void 0 && e.push(`opacity(${r.opacity})`), r.saturate !== void 0 && e.push(`saturate(${r.saturate})`), r.sepia !== void 0 && e.push(`sepia(${r.sepia})`), e.length === 0 ? (process.env.NODE_ENV === "development" && console.warn("TachUI BackdropFilter: No filter functions specified - provide blur, brightness, contrast, etc."), "none") : e.join(" ");
+  }
+  supportsBackdropFilter() {
+    return typeof CSS < "u" && CSS.supports ? CSS.supports("backdrop-filter", "blur(1px)") || CSS.supports("-webkit-backdrop-filter", "blur(1px)") : !1;
+  }
+  /**
+   * Resolve ColorValue (including ColorAssets) to CSS color string
+   */
+  resolveColorValue(r) {
+    if (typeof r == "string")
+      return r;
+    if (typeof r == "function" && "peek" in r)
+      return r.peek();
+    if (r && typeof r == "object") {
+      if ("getValue" in r && typeof r.getValue == "function")
+        return r.getValue();
+      if ("value" in r && typeof r.value == "string")
+        return r.value;
+      if ("toString" in r && typeof r.toString == "function")
+        return r.toString();
+    }
+    return String(r);
+  }
+}
+function h(o, r) {
+  return new a({
+    backdropFilter: o,
+    ...r && { fallbackColor: r }
+  });
+}
+const f = {
+  subtle: {
+    config: { blur: 3, saturate: 1.05, brightness: 1.05 },
+    fallbackColor: "rgba(255, 255, 255, 0.05)"
+  },
+  light: {
+    config: { blur: 8, saturate: 1.15, brightness: 1.1 },
+    fallbackColor: "rgba(255, 255, 255, 0.1)"
+  },
+  medium: {
+    config: { blur: 16, saturate: 1.3, brightness: 1.15 },
+    fallbackColor: "rgba(255, 255, 255, 0.15)"
+  },
+  heavy: {
+    config: { blur: 24, saturate: 1.5, brightness: 1.2 },
+    fallbackColor: "rgba(255, 255, 255, 0.2)"
+  }
+};
+function g(o = "medium", r) {
+  const e = f[o];
+  return new a({
+    backdropFilter: e.config,
+    fallbackColor: r || e.fallbackColor
+  });
+}
+function v(o, r = 1.2, e = 1.1, t) {
+  return new a({
+    backdropFilter: { blur: o, saturate: r, brightness: e },
+    fallbackColor: t || `rgba(255, 255, 255, ${Math.min(o / 200, 0.25)})`
+  });
+}
+export {
+  a as BackdropFilterModifier,
+  h as backdropFilter,
+  v as customGlassmorphism,
+  g as glassmorphism
+};
+//# sourceMappingURL=backdrop.js.map

package/dist/modifiers/backdrop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"backdrop.js","sources":["../../src/modifiers/backdrop.ts"],"sourcesContent":["/**\n * Backdrop Filter Modifiers Implementation\n *\n * Unified implementation combining the best elements of both previous backdrop filter\n * implementations - production-ready browser support with enhanced developer experience.\n */\n\nimport type { DOMNode } from '../runtime/types'\nimport { BaseModifier } from './base'\nimport type { ModifierContext, ReactiveModifierProps, ColorValue } from './types'\nimport { ModifierPriority } from './types'\n\n// ============================================================================\n// Enhanced Backdrop Filter Configuration\n// ============================================================================\n\nexport interface BackdropFilterConfig {\n  blur?: number\n  brightness?: number\n  contrast?: number\n  dropShadow?: {\n    x: number\n    y: number\n    blur: number\n    color: string\n  } | string  // Support both object config and CSS string\n  grayscale?: number\n  hueRotate?: number\n  invert?: number\n  opacity?: number\n  saturate?: number\n  sepia?: number\n}\n\nexport interface BackdropFilterOptions {\n  backdropFilter: BackdropFilterConfig | string\n  fallbackColor?: ColorValue  // Browser compatibility fallback - supports ColorAssets\n}\n\nexport type ReactiveBackdropFilterOptions = ReactiveModifierProps<BackdropFilterOptions>\n\n// ============================================================================\n// Unified Backdrop Filter Modifier\n// ============================================================================\n\nexport class BackdropFilterModifier extends BaseModifier<BackdropFilterOptions> {\n  readonly type = 'backdropFilter'\n  readonly priority = ModifierPriority.APPEARANCE + 15\n\n  constructor(options: ReactiveBackdropFilterOptions) {\n    // Handle backdropFilter specifically\n    let backdropFilterValue: BackdropFilterConfig | string = 'blur(10px)'\n    if (options.backdropFilter) {\n      if (typeof options.backdropFilter === 'function' && 'peek' in options.backdropFilter) {\n        backdropFilterValue = (options.backdropFilter as any).peek()\n      } else {\n        backdropFilterValue = options.backdropFilter as BackdropFilterConfig | string\n      }\n    }\n\n    const resolvedOptions: BackdropFilterOptions = {\n      backdropFilter: backdropFilterValue\n    }\n\n    // Handle fallbackColor\n    if ('fallbackColor' in options && options.fallbackColor !== undefined) {\n      if (typeof options.fallbackColor === 'function' && 'peek' in options.fallbackColor) {\n        resolvedOptions.fallbackColor = (options.fallbackColor as any).peek()\n      } else {\n        resolvedOptions.fallbackColor = options.fallbackColor as ColorValue\n      }\n    }\n\n    super(resolvedOptions)\n  }\n\n  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {\n    if (!context.element) return\n\n    const styles = this.computeBackdropFilterStyles(this.properties)\n    this.applyStyles(context.element, styles)\n\n    return undefined\n  }\n\n  private computeBackdropFilterStyles(props: BackdropFilterOptions) {\n    const styles: Record<string, string> = {}\n\n    if (props.backdropFilter) {\n      if (this.supportsBackdropFilter()) {\n        const filterValue = this.formatBackdropFilter(props.backdropFilter)\n\n        // Apply with vendor prefixes for maximum browser support\n        styles.backdropFilter = filterValue\n        styles.webkitBackdropFilter = filterValue // Safari support\n      } else if (props.fallbackColor) {\n        // Graceful fallback for browsers without backdrop-filter support\n        const resolvedColor = this.resolveColorValue(props.fallbackColor)\n        styles.backgroundColor = resolvedColor\n        if (process.env.NODE_ENV === 'development') {\n          console.info('TachUI: backdrop-filter not supported, using fallback color:', resolvedColor)\n        }\n      }\n    }\n\n    return styles\n  }\n\n  private formatBackdropFilter(filter: BackdropFilterConfig | string): string {\n    if (typeof filter === 'string') {\n      return filter\n    }\n\n    const filterFunctions: string[] = []\n\n    // Convert config object to CSS filter functions\n    // Order matters for consistent output\n    if (filter.blur !== undefined) {\n      filterFunctions.push(`blur(${filter.blur}px)`)\n    }\n    if (filter.brightness !== undefined) {\n      filterFunctions.push(`brightness(${filter.brightness})`)\n    }\n    if (filter.contrast !== undefined) {\n      filterFunctions.push(`contrast(${filter.contrast})`)\n    }\n    if (filter.dropShadow) {\n      if (typeof filter.dropShadow === 'string') {\n        filterFunctions.push(`drop-shadow(${filter.dropShadow})`)\n      } else {\n        const { x, y, blur, color } = filter.dropShadow\n        filterFunctions.push(`drop-shadow(${x}px ${y}px ${blur}px ${color})`)\n      }\n    }\n    if (filter.grayscale !== undefined) {\n      filterFunctions.push(`grayscale(${filter.grayscale})`)\n    }\n    if (filter.hueRotate !== undefined) {\n      filterFunctions.push(`hue-rotate(${filter.hueRotate}deg)`)\n    }\n    if (filter.invert !== undefined) {\n      filterFunctions.push(`invert(${filter.invert})`)\n    }\n    if (filter.opacity !== undefined) {\n      filterFunctions.push(`opacity(${filter.opacity})`)\n    }\n    if (filter.saturate !== undefined) {\n      filterFunctions.push(`saturate(${filter.saturate})`)\n    }\n    if (filter.sepia !== undefined) {\n      filterFunctions.push(`sepia(${filter.sepia})`)\n    }\n\n    if (filterFunctions.length === 0) {\n      if (process.env.NODE_ENV === 'development') {\n        console.warn('TachUI BackdropFilter: No filter functions specified - provide blur, brightness, contrast, etc.')\n      }\n      return 'none'\n    }\n\n    return filterFunctions.join(' ')\n  }\n\n  private supportsBackdropFilter(): boolean {\n    // Runtime browser feature detection\n    if (typeof CSS !== 'undefined' && CSS.supports) {\n      return CSS.supports('backdrop-filter', 'blur(1px)') ||\n             CSS.supports('-webkit-backdrop-filter', 'blur(1px)')\n    }\n    // Conservative fallback if CSS.supports is not available\n    return false\n  }\n\n  /**\n   * Resolve ColorValue (including ColorAssets) to CSS color string\n   */\n  private resolveColorValue(color: ColorValue): string {\n    if (typeof color === 'string') {\n      return color\n    }\n\n    // Handle Signal<string>\n    if (typeof color === 'function' && 'peek' in color) {\n      return (color as any).peek()\n    }\n\n    // Handle Asset types (ColorAssetProxy, Asset)\n    if (color && typeof color === 'object') {\n      // ColorAssetProxy has a getValue method\n      if ('getValue' in color && typeof color.getValue === 'function') {\n        return color.getValue()\n      }\n\n      // Asset has a value property\n      if ('value' in color && typeof color.value === 'string') {\n        return color.value\n      }\n\n      // Asset proxy might have toString\n      if ('toString' in color && typeof color.toString === 'function') {\n        return color.toString()\n      }\n    }\n\n    // Fallback - convert to string\n    return String(color)\n  }\n}\n\n// ============================================================================\n// Backdrop Filter Factory Functions\n// ============================================================================\n\n/**\n * Create a backdrop filter modifier with enhanced configuration options\n */\nexport function backdropFilter(config: BackdropFilterConfig, fallbackColor?: ColorValue): BackdropFilterModifier\nexport function backdropFilter(cssValue: string, fallbackColor?: ColorValue): BackdropFilterModifier\nexport function backdropFilter(\n  value: BackdropFilterConfig | string,\n  fallbackColor?: ColorValue\n): BackdropFilterModifier {\n  return new BackdropFilterModifier({\n    backdropFilter: value,\n    ...(fallbackColor && { fallbackColor })\n  })\n}\n\n// ============================================================================\n// Enhanced Glassmorphism Presets\n// ============================================================================\n\nexport type GlassmorphismIntensity = 'light' | 'medium' | 'heavy' | 'subtle'\n\ninterface GlassmorphismPreset {\n  config: BackdropFilterConfig\n  fallbackColor: ColorValue\n}\n\n/**\n * Refined glassmorphism presets with optimized blur, saturation, and brightness values\n */\nconst GLASSMORPHISM_PRESETS: Record<GlassmorphismIntensity, GlassmorphismPreset> = {\n  subtle: {\n    config: { blur: 3, saturate: 1.05, brightness: 1.05 },\n    fallbackColor: 'rgba(255, 255, 255, 0.05)'\n  },\n  light: {\n    config: { blur: 8, saturate: 1.15, brightness: 1.1 },\n    fallbackColor: 'rgba(255, 255, 255, 0.1)'\n  },\n  medium: {\n    config: { blur: 16, saturate: 1.3, brightness: 1.15 },\n    fallbackColor: 'rgba(255, 255, 255, 0.15)'\n  },\n  heavy: {\n    config: { blur: 24, saturate: 1.5, brightness: 1.2 },\n    fallbackColor: 'rgba(255, 255, 255, 0.2)'\n  }\n} as const\n\n/**\n * Create glassmorphism effect with intensity-based presets\n */\nexport function glassmorphism(\n  intensity: GlassmorphismIntensity = 'medium',\n  customFallback?: ColorValue\n): BackdropFilterModifier {\n  const preset = GLASSMORPHISM_PRESETS[intensity]\n\n  return new BackdropFilterModifier({\n    backdropFilter: preset.config,\n    fallbackColor: customFallback || preset.fallbackColor\n  })\n}\n\n/**\n * Create custom glassmorphism effect with fine-tuned parameters\n */\nexport function customGlassmorphism(\n  blur: number,\n  saturate: number = 1.2,\n  brightness: number = 1.1,\n  fallbackColor?: ColorValue\n): BackdropFilterModifier {\n  return new BackdropFilterModifier({\n    backdropFilter: { blur, saturate, brightness },\n    fallbackColor: fallbackColor || `rgba(255, 255, 255, ${Math.min(blur / 200, 0.25)})`\n  })\n}\n"],"names":["BackdropFilterModifier","BaseModifier","options","backdropFilterValue","resolvedOptions","__publicField","ModifierPriority","_node","context","styles","props","filterValue","resolvedColor","filter","filterFunctions","x","y","blur","color","backdropFilter","value","fallbackColor","GLASSMORPHISM_PRESETS","glassmorphism","intensity","customFallback","preset","customGlassmorphism","saturate","brightness"],"mappings":"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"}

package/dist/modifiers/background.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./base.cjs"),u=require("../gradients/css-generator.cjs"),h=require("../gradients/state-gradient-asset.cjs");var c=Object.defineProperty,f=(i,t,e)=>t in i?c(i,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):i[t]=e,n=(i,t,e)=>f(i,typeof t!="symbol"?t+"":t,e);class b extends o.BaseModifier{constructor(){super(...arguments),n(this,"type","background"),n(this,"priority",95),n(this,"stateGradientAsset")}apply(t,e){if(!e.element)return;const s=this.properties.background,r=e.element;if(this.isStateGradientOptions(s))this.setupStateGradient(r,s);else{const a=this.resolveBackground(s);a&&(r.style.background=a)}}setupStateGradient(t,e){this.stateGradientAsset=new h.StateGradientAsset("background-state",e),t.style.background=this.stateGradientAsset.resolve();const s=this.stateGradientAsset.getAnimationCSS();t.style.cssText+=s,this.setupStateEventListeners(t)}setupStateEventListeners(t){this.stateGradientAsset&&(this.stateGradientAsset.hasState("hover")&&(t.addEventListener("mouseenter",()=>{this.stateGradientAsset.setState("hover"),t.style.background=this.stateGradientAsset.resolve()}),t.addEventListener("mouseleave",()=>{const e=this.getCurrentElementState(t);this.stateGradientAsset.setState(e),t.style.background=this.stateGradientAsset.resolve()})),this.stateGradientAsset.hasState("active")&&(t.addEventListener("mousedown",()=>{this.stateGradientAsset.setState("active"),t.style.background=this.stateGradientAsset.resolve()}),t.addEventListener("mouseup",()=>{const s=t.matches(":hover")&&this.stateGradientAsset.hasState("hover")?"hover":"default";this.stateGradientAsset.setState(s),t.style.background=this.stateGradientAsset.resolve()})),this.stateGradientAsset.hasState("focus")&&(t.addEventListener("focus",()=>{this.stateGradientAsset.setState("focus"),t.style.background=this.stateGradientAsset.resolve()}),t.addEventListener("blur",()=>{this.stateGradientAsset.setState("default"),t.style.background=this.stateGradientAsset.resolve()})),this.stateGradientAsset.hasState("disabled")&&new MutationObserver(s=>{s.forEach(r=>{if(r.type==="attributes"&&r.attributeName==="disabled"){const d=t.hasAttribute("disabled")?"disabled":"default";this.stateGradientAsset.setState(d),t.style.background=this.stateGradientAsset.resolve()}})}).observe(t,{attributes:!0,attributeFilter:["disabled"]}))}getCurrentElementState(t){return this.stateGradientAsset?t.hasAttribute("disabled")&&this.stateGradientAsset.hasState("disabled")?"disabled":t.matches(":focus")&&this.stateGradientAsset.hasState("focus")?"focus":"default":"default"}resolveBackground(t){return typeof t=="string"?t:this.isAsset(t)?t.resolve():this.isGradientDefinition(t)?u.gradientToCSS(t):this.isStateGradientOptions(t)?this.resolveBackground(t.default):""}isAsset(t){return t&&typeof t=="object"&&typeof t.resolve=="function"}isGradientDefinition(t){return t&&typeof t=="object"&&"type"in t&&"options"in t}isStateGradientOptions(t){return t&&typeof t=="object"&&"default"in t}}exports.BackgroundModifier=b;
+//# sourceMappingURL=background.cjs.map

package/dist/modifiers/background.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"background.cjs","sources":["../../src/modifiers/background.ts"],"sourcesContent":["import { BaseModifier } from './base'\nimport type { ModifierContext } from './types'\nimport type { DOMNode } from '../runtime/types'\nimport type { Asset } from '../assets/types'\nimport type { \n  GradientDefinition, \n  StatefulBackgroundValue, \n  StateGradientOptions \n} from '../gradients/types'\nimport { gradientToCSS } from '../gradients/css-generator'\nimport { StateGradientAsset } from '../gradients/state-gradient-asset'\n\nexport interface BackgroundOptions {\n  background: StatefulBackgroundValue\n}\n\nexport class BackgroundModifier extends BaseModifier<BackgroundOptions> {\n  readonly type = 'background'\n  readonly priority = 95\n  private stateGradientAsset?: StateGradientAsset\n\n  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {\n    if (!context.element) return\n\n    const background = this.properties.background\n    const element = context.element as HTMLElement\n\n    if (this.isStateGradientOptions(background)) {\n      this.setupStateGradient(element, background)\n    } else {\n      const cssValue = this.resolveBackground(background)\n      if (cssValue) {\n        element.style.background = cssValue\n      }\n    }\n\n    return undefined\n  }\n\n  private setupStateGradient(element: HTMLElement, stateOptions: StateGradientOptions): void {\n    // Create or update the state gradient asset\n    this.stateGradientAsset = new StateGradientAsset('background-state', stateOptions)\n    \n    // Set initial background\n    element.style.background = this.stateGradientAsset.resolve()\n    \n    // Add animation styles\n    const animationCSS = this.stateGradientAsset.getAnimationCSS()\n    element.style.cssText += animationCSS\n\n    // Set up event listeners for state changes\n    this.setupStateEventListeners(element)\n  }\n\n  private setupStateEventListeners(element: HTMLElement): void {\n    if (!this.stateGradientAsset) return\n\n    // Hover state\n    if (this.stateGradientAsset.hasState('hover')) {\n      element.addEventListener('mouseenter', () => {\n        this.stateGradientAsset!.setState('hover')\n        element.style.background = this.stateGradientAsset!.resolve()\n      })\n\n      element.addEventListener('mouseleave', () => {\n        // Return to appropriate state (active, focus, or default)\n        const currentState = this.getCurrentElementState(element)\n        this.stateGradientAsset!.setState(currentState)\n        element.style.background = this.stateGradientAsset!.resolve()\n      })\n    }\n\n    // Active/pressed state\n    if (this.stateGradientAsset.hasState('active')) {\n      element.addEventListener('mousedown', () => {\n        this.stateGradientAsset!.setState('active')\n        element.style.background = this.stateGradientAsset!.resolve()\n      })\n\n      element.addEventListener('mouseup', () => {\n        // Return to hover if still hovering, otherwise default\n        const isHovering = element.matches(':hover')\n        const nextState = isHovering && this.stateGradientAsset!.hasState('hover') ? 'hover' : 'default'\n        this.stateGradientAsset!.setState(nextState)\n        element.style.background = this.stateGradientAsset!.resolve()\n      })\n    }\n\n    // Focus state\n    if (this.stateGradientAsset.hasState('focus')) {\n      element.addEventListener('focus', () => {\n        this.stateGradientAsset!.setState('focus')\n        element.style.background = this.stateGradientAsset!.resolve()\n      })\n\n      element.addEventListener('blur', () => {\n        this.stateGradientAsset!.setState('default')\n        element.style.background = this.stateGradientAsset!.resolve()\n      })\n    }\n\n    // Disabled state (handled via attribute observation)\n    if (this.stateGradientAsset.hasState('disabled')) {\n      const observer = new MutationObserver((mutations) => {\n        mutations.forEach((mutation) => {\n          if (mutation.type === 'attributes' && mutation.attributeName === 'disabled') {\n            const isDisabled = element.hasAttribute('disabled')\n            const state = isDisabled ? 'disabled' : 'default'\n            this.stateGradientAsset!.setState(state)\n            element.style.background = this.stateGradientAsset!.resolve()\n          }\n        })\n      })\n\n      observer.observe(element, { attributes: true, attributeFilter: ['disabled'] })\n    }\n  }\n\n  private getCurrentElementState(element: HTMLElement): keyof StateGradientOptions {\n    if (!this.stateGradientAsset) return 'default'\n\n    if (element.hasAttribute('disabled') && this.stateGradientAsset.hasState('disabled')) {\n      return 'disabled'\n    }\n\n    if (element.matches(':focus') && this.stateGradientAsset.hasState('focus')) {\n      return 'focus'\n    }\n\n    return 'default'\n  }\n\n  private resolveBackground(background: StatefulBackgroundValue): string {\n    if (typeof background === 'string') {\n      return background\n    }\n\n    if (this.isAsset(background)) {\n      return background.resolve() as string\n    }\n\n    if (this.isGradientDefinition(background)) {\n      return gradientToCSS(background)\n    }\n\n    if (this.isStateGradientOptions(background)) {\n      // This should be handled by setupStateGradient\n      return this.resolveBackground(background.default)\n    }\n\n    return ''\n  }\n\n  private isAsset(value: any): value is Asset {\n    return value && typeof value === 'object' && typeof value.resolve === 'function'\n  }\n\n  private isGradientDefinition(value: any): value is GradientDefinition {\n    return value && typeof value === 'object' && 'type' in value && 'options' in value\n  }\n\n  private isStateGradientOptions(value: any): value is StateGradientOptions {\n    return value && typeof value === 'object' && 'default' in value\n  }\n}"],"names":["BackgroundModifier","BaseModifier","__publicField","_node","context","background","element","cssValue","stateOptions","StateGradientAsset","animationCSS","currentState","nextState","mutations","mutation","state","gradientToCSS","value"],"mappings":"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"}