attrs-in-props 3.14.6 → 3.14.8

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # attrs-in-props
 
+## 3.14.8
+
+### Patch Changes
+
+- Manual patch bump triggered via workflow_dispatch (scope: @symbo.ls).
+  No source change behind this bump — released to refresh dist or
+  coordinate a cross-package version line.
+- Updated dependencies
+  - @symbo.ls/utils@3.14.15
+
+## 3.14.7
+
+### Patch Changes
+
+- Manual patch bump triggered via workflow_dispatch (scope: @symbo.ls).
+  No source change behind this bump — released to refresh dist or
+  coordinate a cross-package version line.
+- Updated dependencies
+  - @symbo.ls/utils@3.14.11
+
 ## 3.14.6
 
 ### Patch Changes

package/index.js

@@ -0,0 +1,1331 @@
+'use strict'
+
+import { isDefined, isFunction, isString } from '@symbo.ls/utils'
+
+export const ARIA_ROLES = [
+  'alert',
+  'alertdialog',
+  'application',
+  'article',
+  'banner',
+  'button',
+  'cell',
+  'checkbox',
+  'columnheader',
+  'combobox',
+  'complementary',
+  'contentinfo',
+  'definition',
+  'dialog',
+  'directory',
+  'document',
+  'feed',
+  'figure',
+  'form',
+  'grid',
+  'gridcell',
+  'group',
+  'heading',
+  'img',
+  'link',
+  'list',
+  'listbox',
+  'listitem',
+  'log',
+  'main',
+  'marquee',
+  'math',
+  'menu',
+  'menubar',
+  'menuitem',
+  'menuitemcheckbox',
+  'menuitemradio',
+  'navigation',
+  'none',
+  'note',
+  'option',
+  'presentation',
+  'progressbar',
+  'radio',
+  'radiogroup',
+  'region',
+  'row',
+  'rowgroup',
+  'rowheader',
+  'scrollbar',
+  'search',
+  'searchbox',
+  'separator',
+  'slider',
+  'spinbutton',
+  'status',
+  'switch',
+  'tab',
+  'table',
+  'tablist',
+  'tabpanel',
+  'term',
+  'textbox',
+  'timer',
+  'toolbar',
+  'tooltip',
+  'tree',
+  'treegrid',
+  'treeitem'
+]
+
+export const HTML_ATTRIBUTES = {
+  default: [
+    'accesskey',
+    'autofocus',
+    'class',
+    'contenteditable',
+    'contextmenu',
+    'dir',
+    'draggable',
+    'hidden',
+    'id',
+    'lang',
+    'part',
+    'placeholder',
+    'slot',
+    'spellcheck',
+    'style',
+    'tabindex',
+    'title',
+    'translate',
+    'inert',
+    'radiogroup',
+    'role',
+    'about',
+    'datatype',
+    'inlist',
+    'prefix',
+    'property',
+    'resource',
+    'typeof',
+    'vocab',
+    'autocapitalize',
+    'autocorrect',
+    'autosave',
+    'color',
+    'itemprop',
+    'itemscope',
+    'itemtype',
+    'itemid',
+    'itemref',
+    'results',
+    'security',
+    'unselectable',
+    'is'
+  ],
+
+  a: [
+    'accesskey',
+    'charset',
+    'coords',
+    'download',
+    'href',
+    'hreflang',
+    'name',
+    'rel',
+    'rev',
+    'shape',
+    'target',
+    'type'
+  ],
+
+  aria: [
+    'aria-activedescendant',
+    'aria-atomic',
+    'aria-autocomplete',
+    'aria-checked',
+    'aria-colcount',
+    'aria-colindex',
+    'aria-colspan',
+    'aria-controls',
+    'aria-current',
+    'aria-describedby',
+    'aria-details',
+    'aria-dropeffect',
+    'aria-errormessage',
+    'aria-expanded',
+    'aria-flowto',
+    'aria-grabbed',
+    'aria-haspopup',
+    'aria-hidden',
+    'aria-invalid',
+    'aria-keyshortcuts',
+    'aria-label',
+    'aria-labelledby',
+    'aria-level',
+    'aria-live',
+    'aria-modal',
+    'aria-multiline',
+    'aria-multiselectable',
+    'aria-orientation',
+    'aria-owns',
+    'aria-placeholder',
+    'aria-posinset',
+    'aria-pressed',
+    'aria-readonly',
+    'aria-relevant',
+    'aria-required',
+    'aria-roledescription',
+    'aria-rowcount',
+    'aria-rowindex',
+    'aria-rowspan',
+    'aria-selected',
+    'aria-setsize',
+    'aria-sort',
+    'aria-valuemax',
+    'aria-valuemin',
+    'aria-valuenow',
+    'aria-valuetext'
+  ],
+
+  anchor: [
+    'download',
+    'href',
+    'hreflang',
+    'media',
+    'ping',
+    'rel',
+    'target',
+    'type',
+    'referrerpolicy'
+  ],
+
+  audio: [
+    'autoplay',
+    'controls',
+    'crossorigin',
+    'loop',
+    'muted',
+    'preload',
+    'src'
+  ],
+
+  area: [
+    'alt',
+    'coords',
+    'download',
+    'href',
+    'hreflang',
+    'media',
+    'referrerpolicy',
+    'rel',
+    'shape',
+    'target',
+    'ping'
+  ],
+
+  base: [
+    'href',
+    'target'
+  ],
+
+  blockquote: [
+    'cite'
+  ],
+
+  button: [
+    'disabled',
+    'form',
+    'formaction',
+    'formenctype',
+    'formmethod',
+    'formnovalidate',
+    'formtarget',
+    'name',
+    'type',
+    'value'
+  ],
+
+  canvas: [
+    'height',
+    'width'
+  ],
+
+  col: [
+    'span',
+    'width'
+  ],
+
+  colgroup: [
+    'span'
+  ],
+
+  data: [
+    'value'
+  ],
+
+  details: [
+    'open'
+  ],
+
+  del: [
+    'cite',
+    'datetime'
+  ],
+
+  dialog: [
+    'open'
+  ],
+
+  embed: [
+    'height',
+    'src',
+    'type',
+    'width'
+  ],
+
+  fieldset: [
+    'disabled',
+    'form',
+    'name'
+  ],
+
+  form: [
+    'acceptcharset',
+    'action',
+    'autocomplete',
+    'enctype',
+    'method',
+    'name',
+    'novalidate',
+    'target',
+    'rel'
+  ],
+
+  html: [
+    'manifest'
+  ],
+
+  iframe: [
+    'allow',
+    'allowfullscreen',
+    'allowtransparency',
+    'frameborder',
+    'height',
+    'loading',
+    'marginheight',
+    'marginwidth',
+    'mozallowfullscreen',
+    'name',
+    'referrerpolicy',
+    'sandbox',
+    'scrolling',
+    'seamless',
+    'src',
+    'srcdoc',
+    'webkitallowfullscreen',
+    'width'
+  ],
+
+  img: [
+    'alt',
+    'crossorigin',
+    'decoding',
+    'height',
+    'ismap',
+    'loading',
+    'referrerpolicy',
+    'sizes',
+    'src',
+    'srcset',
+    'usemap',
+    'width'
+  ],
+
+  ins: [
+    'cite',
+    'datetime'
+  ],
+
+  input: [
+    'accept',
+    'alt',
+    'autocomplete',
+    'capture',
+    'checked',
+    'crossorigin',
+    'disabled',
+    'form',
+    'formaction',
+    'formenctype',
+    'formmethod',
+    'formnovalidate',
+    'formtarget',
+    'height',
+    'indeterminate',
+    'list',
+    'max',
+    'maxlength',
+    'min',
+    'minlength',
+    'multiple',
+    'name',
+    'pattern',
+    'placeholder',
+    'readonly',
+    'required',
+    'size',
+    'src',
+    'step',
+    'type',
+    'value',
+    'width'
+  ],
+
+  keygen: [
+    'challenge',
+    'disabled',
+    'form',
+    'keytype',
+    'keyparams',
+    'name'
+  ],
+
+  label: [
+    'form',
+    'for'
+  ],
+
+  li: [
+    'value'
+  ],
+
+  link: [
+    'as',
+    'crossorigin',
+    'href',
+    'hreflang',
+    'integrity',
+    'media',
+    'imagesrcset',
+    'imagesizes',
+    'referrerpolicy',
+    'rel',
+    'sizes',
+    'type',
+    'charset'
+  ],
+
+  map: [
+    'name'
+  ],
+
+  menu: [
+    'type'
+  ],
+
+  media: [
+    'autoplay',
+    'controls',
+    'currenttime',
+    'defaultmuted',
+    'defaultplaybackrate',
+    'loop',
+    'mediagroup',
+    'muted',
+    'playsinline',
+    'preload',
+    'src',
+    'volume'
+  ],
+
+  meta: [
+    'charset',
+    'content',
+    'http-equiv',
+    'name',
+    'media'
+  ],
+
+  meter: [
+    'form',
+    'high',
+    'low',
+    'max',
+    'min',
+    'optimum',
+    'value'
+  ],
+
+  quote: [
+    'cite'
+  ],
+
+  object: [
+    'classid',
+    'data',
+    'form',
+    'height',
+    'name',
+    'type',
+    'usemap',
+    'width',
+    'wmode'
+  ],
+
+  ol: [
+    'reversed',
+    'start',
+    'type'
+  ],
+
+  optgroup: [
+    'disabled',
+    'label'
+  ],
+
+  option: [
+    'disabled',
+    'label',
+    'selected',
+    'value'
+  ],
+
+  output: [
+    'form',
+    'for',
+    'name'
+  ],
+
+  param: [
+    'name',
+    'value'
+  ],
+
+  progress: [
+    'max',
+    'value'
+  ],
+
+  slot: [
+    'name'
+  ],
+
+  script: [
+    'async',
+    'charset',
+    'crossorigin',
+    'defer',
+    'integrity',
+    'nomodule',
+    'nonce',
+    'referrerpolicy',
+    'src',
+    'type'
+  ],
+
+  select: [
+    'autocomplete',
+    'disabled',
+    'form',
+    'multiple',
+    'name',
+    'required',
+    'size',
+    'value',
+
+    'onchange'
+  ],
+
+  source: [
+    'height',
+    'media',
+    'sizes',
+    'src',
+    'srcset',
+    'type',
+    'width'
+  ],
+
+  style: [
+    'media',
+    'nonce',
+    'scoped',
+    'type'
+  ],
+
+  table: [
+    'align',
+    'bgcolor',
+    'border',
+    'cellpadding',
+    'cellspacing',
+    'frame',
+    'rules',
+    'summary',
+    'width'
+  ],
+
+  textarea: [
+    'autocomplete',
+    'cols',
+    'dirname',
+    'disabled',
+    'form',
+    'maxlength',
+    'minlength',
+    'name',
+    'placeholder',
+    'readonly',
+    'required',
+    'rows',
+    'value',
+    'wrap'
+  ],
+
+  td: [
+    'align',
+    'colspan',
+    'headers',
+    'rowspan',
+    'scope',
+    'abbr',
+    'height',
+    'width',
+    'valign'
+  ],
+
+  th: [
+    'align',
+    'colspan',
+    'headers',
+    'rowspan',
+    'scope',
+    'abbr'
+  ],
+
+  time: [
+    'datetime'
+  ],
+
+  track: [
+    'default',
+    'kind',
+    'label',
+    'src',
+    'srclang'
+  ],
+
+  video: [
+    'autoplay',
+    'controls',
+    'crossorigin',
+    'disablepictureinpicture',
+    'disableremoteplayback',
+    'height',
+    'loop',
+    'muted',
+    'playsinline',
+    'poster',
+    'preload',
+    'src',
+    'width'
+  ],
+
+  svg: [
+    'className',
+    'class',
+    'color',
+    'height',
+    'id',
+    'lang',
+    'max',
+    'media',
+    'method',
+    'min',
+    'name',
+    'style',
+    'target',
+    'type',
+    'width',
+
+    // Other HTML properties supported by SVG elements in browsers
+    'role',
+    'tabindex',
+    'crossorigin',
+
+    // SVG Specific attributes
+    'accent-height',
+    'accumulate',
+    'additive',
+    'alignment-baseline',
+    'allowReorder',
+    'alphabetic',
+    'amplitude',
+    'arabic-form',
+    'ascent',
+    'attributeName',
+    'attributeType',
+    'autoReverse',
+    'azimuth',
+    'baseFrequency',
+    'baseline-shift',
+    'baseProfile',
+    'bbox',
+    'begin',
+    'bias',
+    'by',
+    'calcMode',
+    'cap-height',
+    'clip',
+    'clip-path',
+    'clipPathUnits',
+    'clip-rule',
+    'color-interpolation',
+    'color-interpolation-filters',
+    'color-profile',
+    'color-rendering',
+    'contentScriptType',
+    'contentStyleType',
+    'cursor',
+    'cx',
+    'cy',
+    'd',
+    'decelerate',
+    'descent',
+    'diffuseConstant',
+    'direction',
+    'display',
+    'divisor',
+    'dominant-baseline',
+    'dur',
+    'dx',
+    'dy',
+    'edgeMode',
+    'elevation',
+    'enable-background',
+    'end',
+    'exponent',
+    'externalResourcesRequired',
+    'fill',
+    'fill-opacity',
+    'fill-rule',
+    'filter',
+    'filterRes',
+    'filterUnits',
+    'flood-color',
+    'flood-opacity',
+    'focusable',
+    'font-family',
+    'font-size',
+    'font-size-adjust',
+    'font-stretch',
+    'font-style',
+    'font-variant',
+    'font-weight',
+    'format',
+    'from',
+    'fx',
+    'fy',
+    'g1',
+    'g2',
+    'glyph-name',
+    'glyph-orientation-horizontal',
+    'glyph-orientation-vertical',
+    'glyphRef',
+    'gradientTransform',
+    'gradientUnits',
+    'hanging',
+    'href',
+    'horiz-adv-x',
+    'horiz-origin-x',
+    'ideographic',
+    'image-rendering',
+    'in2',
+    'in',
+    'intercept',
+    'k1',
+    'k2',
+    'k3',
+    'k4',
+    'k',
+    'kernelMatrix',
+    'kernelUnitLength',
+    'kerning',
+    'keyPoints',
+    'keySplines',
+    'keyTimes',
+    'lengthAdjust',
+    'letter-spacing',
+    'lighting-color',
+    'limitingConeAngle',
+    'local',
+    'marker-end',
+    'markerHeight',
+    'marker-mid',
+    'marker-start',
+    'markerUnits',
+    'markerWidth',
+    'mask',
+    'maskContentUnits',
+    'maskUnits',
+    'mathematical',
+    'mode',
+    'numOctaves',
+    'offset',
+    'opacity',
+    'operator',
+    'order',
+    'orient',
+    'orientation',
+    'origin',
+    'overflow',
+    'overline-position',
+    'overline-thickness',
+    'paint-order',
+    'panose-1',
+    'path',
+    'pathLength',
+    'patternContentUnits',
+    'patternTransform',
+    'patternUnits',
+    'pointer-events',
+    'points',
+    'pointsAtX',
+    'pointsAtY',
+    'pointsAtZ',
+    'preserveAlpha',
+    'preserveAspectRatio',
+    'primitiveUnits',
+    'r',
+    'radius',
+    'refX',
+    'refY',
+    'rendering-intent',
+    'repeatCount',
+    'repeatDur',
+    'requiredExtensions',
+    'requiredFeatures',
+    'restart',
+    'result',
+    'rotate',
+    'rx',
+    'ry',
+    'scale',
+    'seed',
+    'shape-rendering',
+    'slope',
+    'spacing',
+    'specularConstant',
+    'specularExponent',
+    'speed',
+    'spreadMethod',
+    'startOffset',
+    'stdDeviation',
+    'stemh',
+    'stemv',
+    'stitchTiles',
+    'stop-color',
+    'stop-opacity',
+    'strikethrough-position',
+    'strikethrough-thickness',
+    'string',
+    'stroke',
+    'stroke-dasharray',
+    'stroke-dashoffset',
+    'stroke-linecap',
+    'stroke-linejoin',
+    'stroke-miterlimit',
+    'stroke-opacity',
+    'stroke-width',
+    'surfaceScale',
+    'systemLanguage',
+    'tableValues',
+    'targetX',
+    'targetY',
+    'text-anchor',
+    'text-decoration',
+    'textLength',
+    'text-rendering',
+    'to',
+    'transform',
+    'u1',
+    'u2',
+    'underline-position',
+    'underline-thickness',
+    'unicode',
+    'unicode-bidi',
+    'unicode-range',
+    'units-per-em',
+    'v-alphabetic',
+    'values',
+    'vector-effect',
+    'version',
+    'vert-adv-y',
+    'vert-origin-x',
+    'vert-origin-y',
+    'v-hanging',
+    'v-ideographic',
+    'viewBox',
+    'viewTarget',
+    'visibility',
+    'v-mathematical',
+    'widths',
+    'word-spacing',
+    'writing-mode',
+    'x1',
+    'x2',
+    'x',
+    'xChannelSelector',
+    'x-height',
+    'xlink:actuate',
+    'xlink:arcrole',
+    'xlink:href',
+    'xlink:role',
+    'xlink:show',
+    'xlink:title',
+    'xlink:type',
+    'xml:base',
+    'xml:lang',
+    'xmlns',
+    'xmlns:xlink',
+    'xml:space',
+    'y1',
+    'y2',
+    'y',
+    'yChannelSelector',
+    'z',
+    'zoomAndPan'
+  ]
+}
+
+export const DOM_EVENTS = [
+  // Clipboard Events
+  'oncopy',
+  'oncut',
+  'onpaste',
+
+  // Composition Events
+  'oncompositionend',
+  'oncompositionstart',
+  'oncompositionupdate',
+
+  // Focus Events
+  'onfocus',
+  'onfocusin',
+  'onfocusout',
+  'onblur',
+
+  // Form Events
+  'onchange',
+  'onbeforeinput',
+  'oninput',
+  'onreset',
+  'onsubmit',
+  'oninvalid',
+  'onformdata',
+
+  // Image Events
+  'onload',
+  'onerror', // also a Media Event
+
+  // Detail Events
+  'ontoggle',
+
+  // Keyboard Events
+  'onkeydown',
+  'onkeypress',
+  'onkeyup',
+
+  // Media Events
+  'onabort',
+  'oncanplay',
+  'oncanplaythrough',
+  'oncuechange',
+  'ondurationchange',
+  'onemptied',
+  'onencrypted',
+  'onended',
+  'onloadeddata',
+  'onloadedmetadata',
+  'onloadstart',
+  'onpause',
+  'onplay',
+  'onplaying',
+  'onprogress',
+  'onratechange',
+  'onseeked',
+  'onseeking',
+  'onstalled',
+  'onsuspend',
+  'ontimeupdate',
+  'onvolumechange',
+  'onwaiting',
+
+  // MouseEvents
+  'onauxclick',
+  'onclick',
+  'oncontextmenu',
+  'ondblclick',
+  'ondrag',
+  'ondragend',
+  'ondragenter',
+  'ondragexit',
+  'ondragleave',
+  'ondragover',
+  'ondragstart',
+  'ondrop',
+  'onmousedown',
+  'onmouseenter',
+  'onmouseleave',
+  'onmousemove',
+  'onmouseout',
+  'onmouseover',
+  'onmouseup',
+
+  // Selection Events
+  'onselect',
+  'onselectionchange',
+  'onselectstart',
+
+  // Touch Events
+  'ontouchcancel',
+  'ontouchend',
+  'ontouchmove',
+  'ontouchstart',
+
+  // Pointer Events
+  'ongotpointercapture',
+  'onpointercancel',
+  'onpointerdown',
+  'onpointerenter',
+  'onpointerleave',
+  'onpointermove',
+  'onpointerout',
+  'onpointerover',
+  'onpointerup',
+  'onlostpointercapture',
+
+  // UI Events
+  'onscroll',
+  'onresize',
+
+  // Wheel Events
+  'onwheel',
+
+  // Animation Events
+  'onanimationstart',
+  'onanimationend',
+  'onanimationiteration',
+
+  // Transition Events
+  'ontransitionstart',
+  'ontransitionrun',
+  'ontransitionend',
+  'ontransitioncancel',
+
+  // Svelte Transition Events
+  'onoutrostart',
+  'onoutroend',
+  'onintrostart',
+  'onintroend',
+
+  // Message Events
+  'onmessage',
+  'onmessageerror',
+
+  // Document Events
+  'onvisibilitychange',
+
+  // Global Events
+  'oncancel',
+  'onclose',
+  'onfullscreenchange',
+  '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
+
+  // Global attributes (`title`, `id`, `class`, `role`, `tabindex`, `hidden`,
+  // `lang`, `dir`, `draggable`, `contenteditable`, `spellcheck`, `slot`, …)
+  // apply to every tag. Prior behavior only consulted HTML_ATTRIBUTES.default
+  // for tags WITHOUT a per-tag list, which silently dropped global attrs on
+  // every typed tag (button/a/img/input/...). Always allow defaults first,
+  // then tag-specific extras.
+  if (HTML_ATTRIBUTES.default.includes(attribute)) return true
+
+  if (Object.prototype.hasOwnProperty.call(HTML_ATTRIBUTES, tag)) {
+    const attributes = HTML_ATTRIBUTES[tag]
+    return attributes.includes(attribute)
+  }
+  return false
+}
+
+export const checkEventFunctions = (key) => {
+  if (!isString(key)) return false
+  const normalizedKey = key.toLowerCase()
+  return DOM_EVENTS.includes(normalizedKey)
+}
+
+export const filterAttributesByTagName = (tag, props, cssProps) => {
+  const filteredObject = {}
+
+  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
+      // Function values are stored as-is here; `executeAttr` is the single
+      // place that resolves reactive (el, state) → string for HTML attrs.
+      // We funnel aria/data through `attr` instead of duplicating execution
+      // logic so v3.14 reactive aria/data attributes work with the same
+      // re-render cycle as `attr.foo` — see FA-L1.
+      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)) {
+        const attrName = camelToAttr(key) || key
+        filteredObject[attrName] = props[key]
+      }
+    }
+  }
+
+  return filteredObject
+}
+
+export const executeAttr = (elem, element) => {
+  const attrObj = {}
+  if (elem.attr) {
+    for (const attrProp in elem.attr) {
+      attrObj[attrProp] = elem.attr[attrProp](element, element.state, element.context)
+    }
+  }
+  // FA-L1: aria.X and data.X with FUNCTION values must execute the same way
+  // as attr.X. Without this, `aria: { label: (el, s) => s.text }` writes a
+  // function reference to the DOM attribute and renders as `null`.
+  // Static (non-function) aria/data values are already promoted to flat
+  // attributes by `filterAttributesByTagName`; we only handle functions
+  // here to avoid double-write.
+  if (elem.aria && typeof elem.aria === 'object') {
+    for (const ariaKey in elem.aria) {
+      const v = elem.aria[ariaKey]
+      if (typeof v === 'function') {
+        attrObj['aria-' + ariaKey] = v(element, element.state, element.context)
+      }
+    }
+  }
+  if (elem.data && typeof elem.data === 'object') {
+    for (const dataKey in elem.data) {
+      const v = elem.data[dataKey]
+      if (typeof v === 'function') {
+        const kebab = dataKey.replace(/([A-Z])/g, (m) => '-' + m.toLowerCase())
+        attrObj['data-' + kebab] = v(element, element.state, element.context)
+      }
+    }
+  }
+  return attrObj
+}
+
+/**
+ * Resolves a prop value: executes dynamic values and replaces template literals.
+ * Shared logic for src, href, action, poster, data, etc.
+ */
+export const resolvePropValue = (el, value) => {
+  let resolved = el.call('exec', value, el)
+  if (!resolved) return
+  if (isString(resolved) && resolved.includes('{{')) {
+    resolved = el.call('replaceLiteralsWithObjectFields', resolved)
+  }
+  return resolved
+}
+
+/**
+ * Resolve a file URL from context.files or context.assets.
+ * Handles absolute URLs (passthrough), /files/ and /assets/ prefix routing,
+ * and lookup for bundler-resolved paths. An explicit `/files/` or `/assets/`
+ * prefix is authoritative — we do NOT cross-route between the two maps.
+ */
+export const resolveFileSource = (el, value) => {
+  let src = (el.preSrc || '') + (resolvePropValue(el, value) || '')
+  if (!src) return
+
+  try { new URL(src); return src } catch (e) { } // absolute URL — passthrough
+
+  const { context } = el
+  if (!context.files && !context.assets) return src
+
+  if (src.startsWith('/assets/')) {
+    const key = src.slice(8)
+    const asset = context.assets && (context.assets[src] || context.assets[key])
+    if (asset && asset.content) return asset.content.src
+    return src
+  }
+  if (src.startsWith('/files/')) {
+    const key = src.slice(7)
+    const file = context.files && (context.files[src] || context.files[key])
+    if (file && file.content) return file.content.src
+    return src
+  }
+
+  // Unprefixed: try assets first (newer system), then files.
+  if (context.assets) {
+    const asset = context.assets[src]
+    if (asset && asset.content) return asset.content.src
+  }
+  if (context.files) {
+    const file = context.files[src]
+    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) => resolveFileSource(el, el.src),
+  href: (el) => resolvePropValue(el, el.href),
+  action: (el) => resolvePropValue(el, el.action),
+  poster: (el) => resolveFileSource(el, el.poster),
+  data: (el) => resolvePropValue(el, el.data)
+}
+
+/**
+ * Applies ATTR_TRANSFORMS for valid attributes on the element's tag.
+ * Returns resolved attribute values from props.
+ */
+export const applyAttrTransforms = (element) => {
+  const tag = element.tag || 'div'
+  const result = {}
+  for (const attr in ATTR_TRANSFORMS) {
+    if (element[attr] !== undefined && checkAttributeByTagName(tag, attr)) {
+      const val = ATTR_TRANSFORMS[attr](element)
+      if (val !== undefined) result[attr] = val
+    }
+  }
+  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[caseKey]
+    return result
+  }
+
+  // . and ! prefixes: check element/state first, then context.cases
+  let isTruthy = element[caseKey] === true || element.state[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,14 +2,14 @@
   "name": "attrs-in-props",
   "description": "Utilize props as attributes",
   "author": "symbo.ls",
-  "version": "3.14.6",
+  "version": "3.14.8",
   "repository": "https://github.com/symbo-ls/smbls",
   "type": "module",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",
   "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",
   "dependencies": {
-    "@symbo.ls/utils": "^3.14.10"
+    "@symbo.ls/utils": "^3.14.15"
   },
   "source": "index.js",
   "browser": "./dist/esm/index.js",
@@ -25,6 +25,7 @@
   },
   "files": [
     "dist",
+    "*.js",
     "*.md",
     "LICENSE"
   ],