attrs-in-props 3.8.0 → 3.8.1

package/README.md

@@ -74,8 +74,65 @@ const resolved = executeAttr(componentDef, element)
 // -> { src: '/resolved-path.jpg', alt: 'Photo' }
 ```
 
+## ARIA Attributes
+
+All `aria-*` attributes are valid on any element. Three syntax forms are supported:
+
+```javascript
+// 1. Kebab-case (standard HTML)
+{ 'aria-label': 'Close', 'aria-expanded': true }
+
+// 2. camelCase (JS-friendly) — auto-converted to kebab-case
+{ ariaLabel: 'Close', ariaExpanded: true }
+
+// 3. Object shorthand
+{ aria: { label: 'Close', expanded: true, hidden: false } }
+```
+
+All three produce `aria-label="Close"`, `aria-expanded="true"` in the DOM.
+
+## Data Attributes
+
+All `data-*` attributes are valid on any element, with the same three syntax forms:
+
+```javascript
+{ 'data-testid': 'btn' }         // kebab-case
+{ dataTestId: 'btn' }            // camelCase → data-test-id
+{ data: { testId: 'btn' } }     // object shorthand → data-test-id
+```
+
+## Conditional Attributes
+
+Attributes inside `$`, `.`, `!` prefix blocks are conditionally applied — same prefixes as css-in-props:
+
+```javascript
+const Button = {
+  // $ prefix: global case from context.cases
+  '$isSafari': { disabled: true, 'aria-label': 'Safari' },
+
+  // . prefix: truthy (props/state first, then context.cases)
+  '.isActive': { aria: { expanded: true }, 'data-state': 'open' },
+
+  // ! prefix: falsy
+  '!isActive': { ariaHidden: true }
+}
+```
+
+Conditional attribute values are wrapped in functions and re-evaluated on every `update()` call.
+
+### `extractConditionalAttrs(props, tag, cssProps?)`
+
+Extract HTML attributes from conditional blocks in props.
+
+```javascript
+import { extractConditionalAttrs } from 'attrs-in-props'
+
+const conditionalAttrs = extractConditionalAttrs(props, 'button', cssPropsRegistry)
+// Returns attr functions that evaluate conditions on each call
+```
+
 ## Default attributes
 
 All HTML elements support these attributes by default: `id`, `title`, `class`, `style`, `dir`, `lang`, `hidden`, `tabindex`, `draggable`, `contenteditable`, `spellcheck`, `translate`, `role`, `slot`, and more.
 
-Element-specific attributes are supported for 50+ HTML tags including `a`, `img`, `input`, `video`, `iframe`, `form`, `select`, `textarea`, `svg`, and all ARIA attributes.
+All `aria-*` and `data-*` attributes are valid on any element. Element-specific attributes are supported for 50+ HTML tags including `a`, `img`, `input`, `video`, `iframe`, `form`, `select`, `textarea`, and `svg`.

package/dist/cjs/index.js

@@ -26,7 +26,9 @@ __export(index_exports, {
   checkAttributeByTagName: () => checkAttributeByTagName,
   checkEventFunctions: () => checkEventFunctions,
   executeAttr: () => executeAttr,
+  extractConditionalAttrs: () => extractConditionalAttrs,
   filterAttributesByTagName: () => filterAttributesByTagName,
+  resolveFileSource: () => resolveFileSource,
   resolvePropValue: () => resolvePropValue
 });
 module.exports = __toCommonJS(index_exports);
@@ -992,7 +994,18 @@ const DOM_EVENTS = [
   "onfullscreenchange",
   "onfullscreenerror"
 ];
+const camelToAttr = (key) => {
+  if (key.startsWith("aria") && key.length > 4 && key.charCodeAt(4) >= 65 && key.charCodeAt(4) <= 90) {
+    return "aria-" + key.charAt(4).toLowerCase() + key.slice(5).replace(/([A-Z])/g, (m) => "-" + m.toLowerCase());
+  }
+  if (key.startsWith("data") && key.length > 4 && key.charCodeAt(4) >= 65 && key.charCodeAt(4) <= 90) {
+    return "data-" + key.charAt(4).toLowerCase() + key.slice(5).replace(/([A-Z])/g, (m) => "-" + m.toLowerCase());
+  }
+  return null;
+};
 const checkAttributeByTagName = (tag, attribute) => {
+  if (attribute.startsWith("aria-") || attribute.startsWith("data-")) return true;
+  if (camelToAttr(attribute)) return true;
   if (Object.prototype.hasOwnProperty.call(HTML_ATTRIBUTES, tag)) {
     const attributes = HTML_ATTRIBUTES[tag];
     return attributes.includes(attribute) || attributes.includes("default");
@@ -1011,10 +1024,28 @@ const filterAttributesByTagName = (tag, props, cssProps) => {
   for (const key in props) {
     if (Object.prototype.hasOwnProperty.call(props, key)) {
       if (cssProps && key in cssProps) continue;
+      if (key === "aria" && props[key] && typeof props[key] === "object") {
+        for (const ariaKey in props[key]) {
+          if ((0, import_utils.isDefined)(props[key][ariaKey])) {
+            filteredObject["aria-" + ariaKey] = props[key][ariaKey];
+          }
+        }
+        continue;
+      }
+      if (key === "data" && props[key] && typeof props[key] === "object") {
+        for (const dataKey in props[key]) {
+          if ((0, import_utils.isDefined)(props[key][dataKey])) {
+            const kebab = dataKey.replace(/([A-Z])/g, (m) => "-" + m.toLowerCase());
+            filteredObject["data-" + kebab] = props[key][dataKey];
+          }
+        }
+        continue;
+      }
       const isAttribute = checkAttributeByTagName(tag, key);
       const isEvent = checkEventFunctions(key);
       if ((0, import_utils.isDefined)(props[key]) && (isAttribute || isEvent)) {
-        filteredObject[key] = props[key];
+        const attrName = camelToAttr(key) || key;
+        filteredObject[attrName] = props[key];
       }
     }
   }
@@ -1037,11 +1068,26 @@ const resolvePropValue = (el, value) => {
   }
   return resolved;
 };
+const resolveFileSource = (el, value) => {
+  let src = (el.props.preSrc || "") + (resolvePropValue(el, value) || "");
+  if (!src) return;
+  try {
+    new URL(src);
+    return src;
+  } catch (e) {
+  }
+  const { context } = el;
+  if (!context.files) return src;
+  const fileSrc = src.startsWith("/files/") ? src.slice(7) : src;
+  const file = context.files[src] || context.files[fileSrc];
+  if (file && file.content) return file.content.src;
+  return src;
+};
 const ATTR_TRANSFORMS = {
-  src: (el) => resolvePropValue(el, el.props.src),
+  src: (el) => resolveFileSource(el, el.props.src),
   href: (el) => resolvePropValue(el, el.props.href),
   action: (el) => resolvePropValue(el, el.props.action),
-  poster: (el) => resolvePropValue(el, el.props.poster),
+  poster: (el) => resolveFileSource(el, el.props.poster),
   data: (el) => resolvePropValue(el, el.props.data)
 };
 const applyAttrTransforms = (element) => {
@@ -1056,3 +1102,62 @@ const applyAttrTransforms = (element) => {
   }
   return result;
 };
+const resolveCase = (caseKey, element) => {
+  const caseFn = element.context?.cases?.[caseKey];
+  if (caseFn === void 0) return void 0;
+  if ((0, import_utils.isFunction)(caseFn)) return caseFn.call(element, element);
+  return !!caseFn;
+};
+const evaluateCondition = (prefix, caseKey, element) => {
+  if (prefix === "$") {
+    let result = resolveCase(caseKey, element);
+    if (result === void 0) result = !!element.props?.[caseKey];
+    return result;
+  }
+  let isTruthy = element.props[caseKey] === true || element.state[caseKey] || element[caseKey];
+  if (!isTruthy) {
+    const caseResult = resolveCase(caseKey, element);
+    if (caseResult !== void 0) isTruthy = caseResult;
+  }
+  return prefix === "." ? !!isTruthy : !isTruthy;
+};
+const CONDITIONAL_PREFIXES = /* @__PURE__ */ new Set(["$", ".", "!"]);
+const extractConditionalAttrs = (props, tag, cssProps) => {
+  const result = {};
+  const addConditionalAttr = (attrName, attrVal, prefix, caseKey) => {
+    const capturedVal = attrVal;
+    result[attrName] = (el) => {
+      if (!evaluateCondition(prefix, caseKey, el)) return void 0;
+      return (0, import_utils.isFunction)(capturedVal) ? capturedVal(el) : capturedVal;
+    };
+  };
+  for (const key in props) {
+    const prefix = key.charAt(0);
+    if (!CONDITIONAL_PREFIXES.has(prefix)) continue;
+    const block = props[key];
+    if (!block || typeof block !== "object") continue;
+    const caseKey = key.slice(1);
+    for (const attrKey in block) {
+      if (cssProps && attrKey in cssProps) continue;
+      if (attrKey === "aria" && block[attrKey] && typeof block[attrKey] === "object") {
+        for (const ariaKey in block[attrKey]) {
+          addConditionalAttr("aria-" + ariaKey, block[attrKey][ariaKey], prefix, caseKey);
+        }
+        continue;
+      }
+      if (attrKey === "data" && block[attrKey] && typeof block[attrKey] === "object") {
+        for (const dataKey in block[attrKey]) {
+          const kebab = dataKey.replace(/([A-Z])/g, (m) => "-" + m.toLowerCase());
+          addConditionalAttr("data-" + kebab, block[attrKey][dataKey], prefix, caseKey);
+        }
+        continue;
+      }
+      const isAttribute = checkAttributeByTagName(tag, attrKey);
+      const isEvent = checkEventFunctions(attrKey);
+      if (!isAttribute && !isEvent) continue;
+      const attrName = camelToAttr(attrKey) || attrKey;
+      addConditionalAttr(attrName, block[attrKey], prefix, caseKey);
+    }
+  }
+  return result;
+};

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-import { isDefined, isString } from "@domql/utils";
+import { isDefined, isFunction, isString } from "@domql/utils";
 const ARIA_ROLES = [
   "alert",
   "alertdialog",
@@ -960,7 +960,18 @@ const DOM_EVENTS = [
   "onfullscreenchange",
   "onfullscreenerror"
 ];
+const camelToAttr = (key) => {
+  if (key.startsWith("aria") && key.length > 4 && key.charCodeAt(4) >= 65 && key.charCodeAt(4) <= 90) {
+    return "aria-" + key.charAt(4).toLowerCase() + key.slice(5).replace(/([A-Z])/g, (m) => "-" + m.toLowerCase());
+  }
+  if (key.startsWith("data") && key.length > 4 && key.charCodeAt(4) >= 65 && key.charCodeAt(4) <= 90) {
+    return "data-" + key.charAt(4).toLowerCase() + key.slice(5).replace(/([A-Z])/g, (m) => "-" + m.toLowerCase());
+  }
+  return null;
+};
 const checkAttributeByTagName = (tag, attribute) => {
+  if (attribute.startsWith("aria-") || attribute.startsWith("data-")) return true;
+  if (camelToAttr(attribute)) return true;
   if (Object.prototype.hasOwnProperty.call(HTML_ATTRIBUTES, tag)) {
     const attributes = HTML_ATTRIBUTES[tag];
     return attributes.includes(attribute) || attributes.includes("default");
@@ -979,10 +990,28 @@ const filterAttributesByTagName = (tag, props, cssProps) => {
   for (const key in props) {
     if (Object.prototype.hasOwnProperty.call(props, key)) {
       if (cssProps && key in cssProps) continue;
+      if (key === "aria" && props[key] && typeof props[key] === "object") {
+        for (const ariaKey in props[key]) {
+          if (isDefined(props[key][ariaKey])) {
+            filteredObject["aria-" + ariaKey] = props[key][ariaKey];
+          }
+        }
+        continue;
+      }
+      if (key === "data" && props[key] && typeof props[key] === "object") {
+        for (const dataKey in props[key]) {
+          if (isDefined(props[key][dataKey])) {
+            const kebab = dataKey.replace(/([A-Z])/g, (m) => "-" + m.toLowerCase());
+            filteredObject["data-" + kebab] = props[key][dataKey];
+          }
+        }
+        continue;
+      }
       const isAttribute = checkAttributeByTagName(tag, key);
       const isEvent = checkEventFunctions(key);
       if (isDefined(props[key]) && (isAttribute || isEvent)) {
-        filteredObject[key] = props[key];
+        const attrName = camelToAttr(key) || key;
+        filteredObject[attrName] = props[key];
       }
     }
   }
@@ -1005,11 +1034,26 @@ const resolvePropValue = (el, value) => {
   }
   return resolved;
 };
+const resolveFileSource = (el, value) => {
+  let src = (el.props.preSrc || "") + (resolvePropValue(el, value) || "");
+  if (!src) return;
+  try {
+    new URL(src);
+    return src;
+  } catch (e) {
+  }
+  const { context } = el;
+  if (!context.files) return src;
+  const fileSrc = src.startsWith("/files/") ? src.slice(7) : src;
+  const file = context.files[src] || context.files[fileSrc];
+  if (file && file.content) return file.content.src;
+  return src;
+};
 const ATTR_TRANSFORMS = {
-  src: (el) => resolvePropValue(el, el.props.src),
+  src: (el) => resolveFileSource(el, el.props.src),
   href: (el) => resolvePropValue(el, el.props.href),
   action: (el) => resolvePropValue(el, el.props.action),
-  poster: (el) => resolvePropValue(el, el.props.poster),
+  poster: (el) => resolveFileSource(el, el.props.poster),
   data: (el) => resolvePropValue(el, el.props.data)
 };
 const applyAttrTransforms = (element) => {
@@ -1024,6 +1068,65 @@ const applyAttrTransforms = (element) => {
   }
   return result;
 };
+const resolveCase = (caseKey, element) => {
+  const caseFn = element.context?.cases?.[caseKey];
+  if (caseFn === void 0) return void 0;
+  if (isFunction(caseFn)) return caseFn.call(element, element);
+  return !!caseFn;
+};
+const evaluateCondition = (prefix, caseKey, element) => {
+  if (prefix === "$") {
+    let result = resolveCase(caseKey, element);
+    if (result === void 0) result = !!element.props?.[caseKey];
+    return result;
+  }
+  let isTruthy = element.props[caseKey] === true || element.state[caseKey] || element[caseKey];
+  if (!isTruthy) {
+    const caseResult = resolveCase(caseKey, element);
+    if (caseResult !== void 0) isTruthy = caseResult;
+  }
+  return prefix === "." ? !!isTruthy : !isTruthy;
+};
+const CONDITIONAL_PREFIXES = /* @__PURE__ */ new Set(["$", ".", "!"]);
+const extractConditionalAttrs = (props, tag, cssProps) => {
+  const result = {};
+  const addConditionalAttr = (attrName, attrVal, prefix, caseKey) => {
+    const capturedVal = attrVal;
+    result[attrName] = (el) => {
+      if (!evaluateCondition(prefix, caseKey, el)) return void 0;
+      return isFunction(capturedVal) ? capturedVal(el) : capturedVal;
+    };
+  };
+  for (const key in props) {
+    const prefix = key.charAt(0);
+    if (!CONDITIONAL_PREFIXES.has(prefix)) continue;
+    const block = props[key];
+    if (!block || typeof block !== "object") continue;
+    const caseKey = key.slice(1);
+    for (const attrKey in block) {
+      if (cssProps && attrKey in cssProps) continue;
+      if (attrKey === "aria" && block[attrKey] && typeof block[attrKey] === "object") {
+        for (const ariaKey in block[attrKey]) {
+          addConditionalAttr("aria-" + ariaKey, block[attrKey][ariaKey], prefix, caseKey);
+        }
+        continue;
+      }
+      if (attrKey === "data" && block[attrKey] && typeof block[attrKey] === "object") {
+        for (const dataKey in block[attrKey]) {
+          const kebab = dataKey.replace(/([A-Z])/g, (m) => "-" + m.toLowerCase());
+          addConditionalAttr("data-" + kebab, block[attrKey][dataKey], prefix, caseKey);
+        }
+        continue;
+      }
+      const isAttribute = checkAttributeByTagName(tag, attrKey);
+      const isEvent = checkEventFunctions(attrKey);
+      if (!isAttribute && !isEvent) continue;
+      const attrName = camelToAttr(attrKey) || attrKey;
+      addConditionalAttr(attrName, block[attrKey], prefix, caseKey);
+    }
+  }
+  return result;
+};
 export {
   ARIA_ROLES,
   ATTR_TRANSFORMS,
@@ -1033,6 +1136,8 @@ export {
   checkAttributeByTagName,
   checkEventFunctions,
   executeAttr,
+  extractConditionalAttrs,
   filterAttributesByTagName,
+  resolveFileSource,
   resolvePropValue
 };

package/dist/iife/index.js

@@ -37,10 +37,11 @@ var AttrsInProps = (() => {
   });
 
   // ../utils/dist/esm/types.js
-  var isString, isDefined;
+  var isString, isFunction, isDefined;
   var init_types = __esm({
     "../utils/dist/esm/types.js"() {
       isString = (arg) => typeof arg === "string";
+      isFunction = (arg) => typeof arg === "function";
       isDefined = (arg) => arg !== void 0;
     }
   });
@@ -296,7 +297,9 @@ var AttrsInProps = (() => {
     checkAttributeByTagName: () => checkAttributeByTagName,
     checkEventFunctions: () => checkEventFunctions,
     executeAttr: () => executeAttr,
+    extractConditionalAttrs: () => extractConditionalAttrs,
     filterAttributesByTagName: () => filterAttributesByTagName,
+    resolveFileSource: () => resolveFileSource,
     resolvePropValue: () => resolvePropValue
   });
   init_esm();
@@ -1261,7 +1264,18 @@ var AttrsInProps = (() => {
     "onfullscreenchange",
     "onfullscreenerror"
   ];
+  var camelToAttr = (key) => {
+    if (key.startsWith("aria") && key.length > 4 && key.charCodeAt(4) >= 65 && key.charCodeAt(4) <= 90) {
+      return "aria-" + key.charAt(4).toLowerCase() + key.slice(5).replace(/([A-Z])/g, (m) => "-" + m.toLowerCase());
+    }
+    if (key.startsWith("data") && key.length > 4 && key.charCodeAt(4) >= 65 && key.charCodeAt(4) <= 90) {
+      return "data-" + key.charAt(4).toLowerCase() + key.slice(5).replace(/([A-Z])/g, (m) => "-" + m.toLowerCase());
+    }
+    return null;
+  };
   var checkAttributeByTagName = (tag, attribute) => {
+    if (attribute.startsWith("aria-") || attribute.startsWith("data-")) return true;
+    if (camelToAttr(attribute)) return true;
     if (Object.prototype.hasOwnProperty.call(HTML_ATTRIBUTES, tag)) {
       const attributes = HTML_ATTRIBUTES[tag];
       return attributes.includes(attribute) || attributes.includes("default");
@@ -1280,10 +1294,28 @@ var AttrsInProps = (() => {
     for (const key in props) {
       if (Object.prototype.hasOwnProperty.call(props, key)) {
         if (cssProps && key in cssProps) continue;
+        if (key === "aria" && props[key] && typeof props[key] === "object") {
+          for (const ariaKey in props[key]) {
+            if (isDefined(props[key][ariaKey])) {
+              filteredObject["aria-" + ariaKey] = props[key][ariaKey];
+            }
+          }
+          continue;
+        }
+        if (key === "data" && props[key] && typeof props[key] === "object") {
+          for (const dataKey in props[key]) {
+            if (isDefined(props[key][dataKey])) {
+              const kebab = dataKey.replace(/([A-Z])/g, (m) => "-" + m.toLowerCase());
+              filteredObject["data-" + kebab] = props[key][dataKey];
+            }
+          }
+          continue;
+        }
         const isAttribute = checkAttributeByTagName(tag, key);
         const isEvent = checkEventFunctions(key);
         if (isDefined(props[key]) && (isAttribute || isEvent)) {
-          filteredObject[key] = props[key];
+          const attrName = camelToAttr(key) || key;
+          filteredObject[attrName] = props[key];
         }
       }
     }
@@ -1306,11 +1338,26 @@ var AttrsInProps = (() => {
     }
     return resolved;
   };
+  var resolveFileSource = (el, value) => {
+    let src = (el.props.preSrc || "") + (resolvePropValue(el, value) || "");
+    if (!src) return;
+    try {
+      new URL(src);
+      return src;
+    } catch (e) {
+    }
+    const { context } = el;
+    if (!context.files) return src;
+    const fileSrc = src.startsWith("/files/") ? src.slice(7) : src;
+    const file = context.files[src] || context.files[fileSrc];
+    if (file && file.content) return file.content.src;
+    return src;
+  };
   var ATTR_TRANSFORMS = {
-    src: (el) => resolvePropValue(el, el.props.src),
+    src: (el) => resolveFileSource(el, el.props.src),
     href: (el) => resolvePropValue(el, el.props.href),
     action: (el) => resolvePropValue(el, el.props.action),
-    poster: (el) => resolvePropValue(el, el.props.poster),
+    poster: (el) => resolveFileSource(el, el.props.poster),
     data: (el) => resolvePropValue(el, el.props.data)
   };
   var applyAttrTransforms = (element) => {
@@ -1325,6 +1372,65 @@ var AttrsInProps = (() => {
     }
     return result;
   };
+  var resolveCase = (caseKey, element) => {
+    const caseFn = element.context?.cases?.[caseKey];
+    if (caseFn === void 0) return void 0;
+    if (isFunction(caseFn)) return caseFn.call(element, element);
+    return !!caseFn;
+  };
+  var evaluateCondition = (prefix, caseKey, element) => {
+    if (prefix === "$") {
+      let result = resolveCase(caseKey, element);
+      if (result === void 0) result = !!element.props?.[caseKey];
+      return result;
+    }
+    let isTruthy = element.props[caseKey] === true || element.state[caseKey] || element[caseKey];
+    if (!isTruthy) {
+      const caseResult = resolveCase(caseKey, element);
+      if (caseResult !== void 0) isTruthy = caseResult;
+    }
+    return prefix === "." ? !!isTruthy : !isTruthy;
+  };
+  var CONDITIONAL_PREFIXES = /* @__PURE__ */ new Set(["$", ".", "!"]);
+  var extractConditionalAttrs = (props, tag, cssProps) => {
+    const result = {};
+    const addConditionalAttr = (attrName, attrVal, prefix, caseKey) => {
+      const capturedVal = attrVal;
+      result[attrName] = (el) => {
+        if (!evaluateCondition(prefix, caseKey, el)) return void 0;
+        return isFunction(capturedVal) ? capturedVal(el) : capturedVal;
+      };
+    };
+    for (const key in props) {
+      const prefix = key.charAt(0);
+      if (!CONDITIONAL_PREFIXES.has(prefix)) continue;
+      const block = props[key];
+      if (!block || typeof block !== "object") continue;
+      const caseKey = key.slice(1);
+      for (const attrKey in block) {
+        if (cssProps && attrKey in cssProps) continue;
+        if (attrKey === "aria" && block[attrKey] && typeof block[attrKey] === "object") {
+          for (const ariaKey in block[attrKey]) {
+            addConditionalAttr("aria-" + ariaKey, block[attrKey][ariaKey], prefix, caseKey);
+          }
+          continue;
+        }
+        if (attrKey === "data" && block[attrKey] && typeof block[attrKey] === "object") {
+          for (const dataKey in block[attrKey]) {
+            const kebab = dataKey.replace(/([A-Z])/g, (m) => "-" + m.toLowerCase());
+            addConditionalAttr("data-" + kebab, block[attrKey][dataKey], prefix, caseKey);
+          }
+          continue;
+        }
+        const isAttribute = checkAttributeByTagName(tag, attrKey);
+        const isEvent = checkEventFunctions(attrKey);
+        if (!isAttribute && !isEvent) continue;
+        const attrName = camelToAttr(attrKey) || attrKey;
+        addConditionalAttr(attrName, block[attrKey], prefix, caseKey);
+      }
+    }
+    return result;
+  };
   return __toCommonJS(index_exports);
 })();
 // @preserve-env

package/index.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { isDefined, isString } from '@domql/utils'
+import { isDefined, isFunction, isString } from '@domql/utils'
 
 export const ARIA_ROLES = [
   'alert',
@@ -1040,7 +1040,23 @@ export const DOM_EVENTS = [
   'onfullscreenerror'
 ]
 
+// Convert camelCase aria/data attrs to kebab-case: ariaLabel → aria-label, dataTestId → data-test-id
+const camelToAttr = (key) => {
+  if (key.startsWith('aria') && key.length > 4 && key.charCodeAt(4) >= 65 && key.charCodeAt(4) <= 90) {
+    return 'aria-' + key.charAt(4).toLowerCase() + key.slice(5).replace(/([A-Z])/g, (m) => '-' + m.toLowerCase())
+  }
+  if (key.startsWith('data') && key.length > 4 && key.charCodeAt(4) >= 65 && key.charCodeAt(4) <= 90) {
+    return 'data-' + key.charAt(4).toLowerCase() + key.slice(5).replace(/([A-Z])/g, (m) => '-' + m.toLowerCase())
+  }
+  return null
+}
+
 export const checkAttributeByTagName = (tag, attribute) => {
+  // aria-* and data-* are valid on all elements
+  if (attribute.startsWith('aria-') || attribute.startsWith('data-')) return true
+  // camelCase aria/data attrs
+  if (camelToAttr(attribute)) return true
+
   if (Object.prototype.hasOwnProperty.call(HTML_ATTRIBUTES, tag)) {
     const attributes = HTML_ATTRIBUTES[tag]
     return attributes.includes(attribute) || attributes.includes('default')
@@ -1062,10 +1078,33 @@ export const filterAttributesByTagName = (tag, props, cssProps) => {
   for (const key in props) {
     if (Object.prototype.hasOwnProperty.call(props, key)) {
       if (cssProps && key in cssProps) continue
+
+      // aria: { label: 'foo', expanded: true } → aria-label, aria-expanded
+      if (key === 'aria' && props[key] && typeof props[key] === 'object') {
+        for (const ariaKey in props[key]) {
+          if (isDefined(props[key][ariaKey])) {
+            filteredObject['aria-' + ariaKey] = props[key][ariaKey]
+          }
+        }
+        continue
+      }
+
+      // data: { testId: 'foo' } → data-test-id
+      if (key === 'data' && props[key] && typeof props[key] === 'object') {
+        for (const dataKey in props[key]) {
+          if (isDefined(props[key][dataKey])) {
+            const kebab = dataKey.replace(/([A-Z])/g, (m) => '-' + m.toLowerCase())
+            filteredObject['data-' + kebab] = props[key][dataKey]
+          }
+        }
+        continue
+      }
+
       const isAttribute = checkAttributeByTagName(tag, key)
       const isEvent = checkEventFunctions(key)
       if (isDefined(props[key]) && (isAttribute || isEvent)) {
-        filteredObject[key] = props[key]
+        const attrName = camelToAttr(key) || key
+        filteredObject[attrName] = props[key]
       }
     }
   }
@@ -1096,16 +1135,38 @@ export const resolvePropValue = (el, value) => {
   return resolved
 }
 
+/**
+ * Resolve a file URL from context.files.
+ * Handles absolute URLs (passthrough), /files/ prefix stripping,
+ * and file lookup for bundler-resolved paths.
+ */
+export const resolveFileSource = (el, value) => {
+  let src = (el.props.preSrc || '') + (resolvePropValue(el, value) || '')
+  if (!src) return
+
+  try { new URL(src); return src } catch (e) { } // absolute URL — passthrough
+
+  const { context } = el
+  if (!context.files) return src
+
+  const fileSrc = src.startsWith('/files/') ? src.slice(7) : src
+  const file = context.files[src] || context.files[fileSrc]
+  if (file && file.content) return file.content.src
+
+  return src
+}
+
 /**
  * Auto-resolve attribute transformers.
  * Attributes listed here are automatically resolved from props
  * via resolvePropValue (exec + template literal replacement).
+ * src and poster also resolve from context.files for media elements.
  */
 export const ATTR_TRANSFORMS = {
-  src: (el) => resolvePropValue(el, el.props.src),
+  src: (el) => resolveFileSource(el, el.props.src),
   href: (el) => resolvePropValue(el, el.props.href),
   action: (el) => resolvePropValue(el, el.props.action),
-  poster: (el) => resolvePropValue(el, el.props.poster),
+  poster: (el) => resolveFileSource(el, el.props.poster),
   data: (el) => resolvePropValue(el, el.props.data)
 }
 
@@ -1125,3 +1186,93 @@ export const applyAttrTransforms = (element) => {
   }
   return result
 }
+
+/**
+ * Resolve a case value from context.cases.
+ * Returns true/false, or undefined if case is not defined.
+ */
+const resolveCase = (caseKey, element) => {
+  const caseFn = element.context?.cases?.[caseKey]
+  if (caseFn === undefined) return undefined
+  if (isFunction(caseFn)) return caseFn.call(element, element)
+  return !!caseFn
+}
+
+/**
+ * Evaluate whether a conditional prefix key is active.
+ * Supports $ (global cases), . (truthy), ! (falsy) prefixes.
+ */
+const evaluateCondition = (prefix, caseKey, element) => {
+  if (prefix === '$') {
+    let result = resolveCase(caseKey, element)
+    if (result === undefined) result = !!element.props?.[caseKey]
+    return result
+  }
+
+  // . and ! prefixes: check props/state/element first, then context.cases
+  let isTruthy = element.props[caseKey] === true || element.state[caseKey] || element[caseKey]
+  if (!isTruthy) {
+    const caseResult = resolveCase(caseKey, element)
+    if (caseResult !== undefined) isTruthy = caseResult
+  }
+
+  return prefix === '.' ? !!isTruthy : !isTruthy
+}
+
+const CONDITIONAL_PREFIXES = new Set(['$', '.', '!'])
+
+/**
+ * Extract HTML attributes from conditional blocks ($, ., !) in props.
+ * Returns an attr object with functions that re-evaluate on each update.
+ */
+export const extractConditionalAttrs = (props, tag, cssProps) => {
+  const result = {}
+
+  const addConditionalAttr = (attrName, attrVal, prefix, caseKey) => {
+    const capturedVal = attrVal
+    result[attrName] = (el) => {
+      if (!evaluateCondition(prefix, caseKey, el)) return undefined
+      return isFunction(capturedVal) ? capturedVal(el) : capturedVal
+    }
+  }
+
+  for (const key in props) {
+    const prefix = key.charAt(0)
+    if (!CONDITIONAL_PREFIXES.has(prefix)) continue
+
+    const block = props[key]
+    if (!block || typeof block !== 'object') continue
+
+    const caseKey = key.slice(1)
+
+    for (const attrKey in block) {
+      if (cssProps && attrKey in cssProps) continue
+
+      // aria: { label: 'foo' } inside conditional block
+      if (attrKey === 'aria' && block[attrKey] && typeof block[attrKey] === 'object') {
+        for (const ariaKey in block[attrKey]) {
+          addConditionalAttr('aria-' + ariaKey, block[attrKey][ariaKey], prefix, caseKey)
+        }
+        continue
+      }
+
+      // data: { testId: 'foo' } inside conditional block
+      if (attrKey === 'data' && block[attrKey] && typeof block[attrKey] === 'object') {
+        for (const dataKey in block[attrKey]) {
+          const kebab = dataKey.replace(/([A-Z])/g, (m) => '-' + m.toLowerCase())
+          addConditionalAttr('data-' + kebab, block[attrKey][dataKey], prefix, caseKey)
+        }
+        continue
+      }
+
+      const isAttribute = checkAttributeByTagName(tag, attrKey)
+      const isEvent = checkEventFunctions(attrKey)
+      if (!isAttribute && !isEvent) continue
+
+      const attrName = camelToAttr(attrKey) || attrKey
+      addConditionalAttr(attrName, block[attrKey], prefix, caseKey)
+    }
+  }
+
+  return result
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "attrs-in-props",
   "description": "Utilize props as attributes",
   "author": "symbo.ls",
-  "version": "3.8.0",
+  "version": "3.8.1",
   "repository": "https://github.com/symbo-ls/smbls",
   "type": "module",
   "module": "./dist/esm/index.js",
@@ -11,7 +11,7 @@
   "main": "./dist/cjs/index.js",
   "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",
   "dependencies": {
-    "@domql/utils": "^3.8.0"
+    "@domql/utils": "^3.8.1"
   },
   "source": "index.js",
   "browser": "./dist/esm/index.js",