@symbo.ls/default-config 3.8.9 → 3.14.1

package/README.md

@@ -1,2 +1,5 @@
 # Default Config
-This is a default repository for Symbols Design Systems. It shows how it works and provides some default propoerties. Check out the [docs page](http://symbols.app/developersintro#configuration) to learn more.
+
+Default design system configuration for Symbols v3.14. Provides baseline color, typography, spacing, media query, and theme definitions used when no custom config is supplied. The atomic CSS engine (`@symbo.ls/css`) and `@symbo.ls/scratch` consume this config to generate design tokens.
+
+Check out the [docs page](http://symbols.app/developersintro#configuration) to learn more.

package/__tests__/assetMedia.test.js

@@ -0,0 +1,242 @@
+/**
+ * Asset-aware media components: Img, Video, Audio, AssetPicture. The
+ * components themselves are plain DOMQL config objects — DOMQL evaluates
+ * functions against an element at runtime. These tests bypass DOMQL and
+ * call the functions directly with a mock `el` shape, asserting the
+ * src/srcset/children outputs computed from `el.context.assets`.
+ */
+
+import { describe, it, expect } from '@jest/globals'
+import { Img } from '../components/Atoms/Img.js'
+import { Video } from '../components/Atoms/Video.js'
+import { Audio } from '../components/Atoms/Audio.js'
+import { AssetPicture } from '../components/Atoms/AssetPicture.js'
+
+const HERO_ASSET = {
+  src: '/assets/hero.jpg',
+  type: 'image/jpeg',
+  category: 'image',
+  variants: [
+    { src: '/assets/hero.jpg', format: 'image/jpeg', scale: 1 },
+    { src: '/assets/hero@2x.jpg', format: 'image/jpeg', scale: 2 },
+    { src: '/assets/hero.webp', format: 'image/webp', scale: 1 },
+    { src: '/assets/hero@2x.webp', format: 'image/webp', scale: 2 },
+    { src: '/assets/hero.avif', format: 'image/avif', scale: 1 }
+  ]
+}
+
+const HERO_WIDTHS_ASSET = {
+  src: '/assets/cover.jpg',
+  type: 'image/jpeg',
+  category: 'image',
+  variants: [
+    { src: '/assets/cover.jpg', format: 'image/jpeg', scale: 1 },
+    { src: '/assets/cover-640w.jpg', format: 'image/jpeg', scale: 1, width: 640 },
+    { src: '/assets/cover-1280w.jpg', format: 'image/jpeg', scale: 1, width: 1280 }
+  ]
+}
+
+const INTRO_VIDEO_ASSET = {
+  src: '/assets/intro.mp4',
+  type: 'video/mp4',
+  category: 'video',
+  variants: [
+    { src: '/assets/intro.mp4', format: 'video/mp4', scale: 1 },
+    { src: '/assets/intro.webm', format: 'video/webm', scale: 1 }
+  ]
+}
+
+const VOICE_AUDIO_ASSET = {
+  src: '/assets/voice.mp3',
+  type: 'audio/mpeg',
+  category: 'audio',
+  variants: [
+    { src: '/assets/voice.mp3', format: 'audio/mpeg', scale: 1 },
+    { src: '/assets/voice.ogg', format: 'audio/ogg', scale: 1 }
+  ]
+}
+
+const ctxWith = (assets) => ({ context: { assets } })
+
+const elFor = (overrides = {}) => ({
+  ...overrides,
+  context: { assets: { 'hero.jpg': HERO_ASSET } }
+})
+
+describe('Img — asset-manifest awareness via src prop', () => {
+  it('falls through to literal src when no manifest exists', () => {
+    const el = { src: '/manual.jpg', alt: 'a' }
+    expect(Img.attr.src(el)).toBe('/manual.jpg')
+    expect(Img.attr.srcset(el)).toBeUndefined()
+  })
+
+  it('uses asset.src when src matches a manifest key', () => {
+    const el = { src: 'hero.jpg', ...ctxWith({ 'hero.jpg': HERO_ASSET }) }
+    expect(Img.attr.src(el)).toBe('/assets/hero.jpg')
+  })
+
+  it('emits scale-based srcset for same-format variants only', () => {
+    const el = { src: 'hero.jpg', ...ctxWith({ 'hero.jpg': HERO_ASSET }) }
+    const srcset = Img.attr.srcset(el)
+    // Same-format only — webp/avif must not appear in srcset (those need <picture>).
+    expect(srcset).toBe('/assets/hero@2x.jpg 2x')
+    expect(srcset).not.toMatch(/webp|avif/)
+  })
+
+  it('emits width-based srcset when variants carry .width', () => {
+    const el = { src: 'cover.jpg', ...ctxWith({ 'cover.jpg': HERO_WIDTHS_ASSET }) }
+    expect(Img.attr.srcset(el)).toBe('/assets/cover-640w.jpg 640w, /assets/cover-1280w.jpg 1280w')
+  })
+
+  it('treats src as a literal URL when not in the manifest', () => {
+    const el = { src: '/manual.jpg', alt: 'a', ...ctxWith({}) }
+    expect(Img.attr.src(el)).toBe('/manual.jpg')
+    expect(Img.attr.srcset(el)).toBeUndefined()
+  })
+
+  it('preserves the title-from-alt fallback', () => {
+    expect(Img.attr.title({ title: 't' })).toBe('t')
+    expect(Img.attr.title({ alt: 'a' })).toBe('a')
+  })
+})
+
+describe('Video — asset-manifest awareness', () => {
+  it('emits a <source> child per format variant', () => {
+    const el = { src: 'intro.mp4', ...ctxWith({ 'intro.mp4': INTRO_VIDEO_ASSET }) }
+    const children = Video.children(el)
+    expect(children).toEqual([
+      { tag: 'source', attr: { src: '/assets/intro.mp4', type: 'video/mp4' } },
+      { tag: 'source', attr: { src: '/assets/intro.webm', type: 'video/webm' } }
+    ])
+  })
+
+  it('sets src to the primary variant URL', () => {
+    const el = { src: 'intro.mp4', ...ctxWith({ 'intro.mp4': INTRO_VIDEO_ASSET }) }
+    expect(Video.attr.src(el)).toBe('/assets/intro.mp4')
+  })
+
+  it('returns undefined when no asset resolves (lets DOMQL fall through)', () => {
+    expect(Video.children({ src: '/manual.mp4' })).toBeUndefined()
+  })
+})
+
+describe('Audio — asset-manifest awareness', () => {
+  it('emits a <source> child per format variant', () => {
+    const el = { src: 'voice.mp3', ...ctxWith({ 'voice.mp3': VOICE_AUDIO_ASSET }) }
+    expect(Audio.children(el)).toEqual([
+      { tag: 'source', attr: { src: '/assets/voice.mp3', type: 'audio/mpeg' } },
+      { tag: 'source', attr: { src: '/assets/voice.ogg', type: 'audio/ogg' } }
+    ])
+  })
+
+  it('sets src to the primary variant URL', () => {
+    const el = { src: 'voice.mp3', ...ctxWith({ 'voice.mp3': VOICE_AUDIO_ASSET }) }
+    expect(Audio.attr.src(el)).toBe('/assets/voice.mp3')
+  })
+})
+
+describe('Smart resolution: cloud strings + context.files fallback', () => {
+  // Cloud / legacy entries arrive as bare URL strings, not manifest
+  // objects. Components must use the URL verbatim and skip variant
+  // emission entirely (no <source> chain, no srcset).
+
+  it('Img: cloud-string URL in context.assets resolves to plain src, no srcset', () => {
+    const el = { src: 'logo', ...ctxWith({ logo: 'https://cdn.example.com/logo.svg' }) }
+    expect(Img.attr.src(el)).toBe('https://cdn.example.com/logo.svg')
+    expect(Img.attr.srcset(el)).toBeUndefined()
+  })
+
+  it('Img: falls back to context.files when key missing in context.assets', () => {
+    const el = {
+      src: 'doc.pdf-thumb.jpg',
+      context: { files: { 'doc.pdf-thumb.jpg': '/cdn/doc-thumb.jpg' } }
+    }
+    expect(Img.attr.src(el)).toBe('/cdn/doc-thumb.jpg')
+  })
+
+  it('Video: cloud-string URL skips <source> children', () => {
+    const el = { src: 'reel', ...ctxWith({ reel: 'https://cdn.example.com/reel.mp4' }) }
+    expect(Video.attr.src(el)).toBe('https://cdn.example.com/reel.mp4')
+    // Video.children falls through to el.children; with none defined that's undefined.
+    expect(Video.children(el)).toBeUndefined()
+  })
+
+  it('Audio: cloud-string URL skips <source> children', () => {
+    const el = { src: 'theme', ...ctxWith({ theme: 'https://cdn.example.com/theme.mp3' }) }
+    expect(Audio.attr.src(el)).toBe('https://cdn.example.com/theme.mp3')
+    expect(Audio.children(el)).toBeUndefined()
+  })
+
+  it('AssetPicture: cloud-string URL emits a single <img> (no <source> chain)', () => {
+    const el = { src: 'banner', alt: 'Banner', ...ctxWith({ banner: 'https://cdn.example.com/banner.jpg' }) }
+    expect(AssetPicture.children(el)).toEqual([
+      { tag: 'img', attr: { src: 'https://cdn.example.com/banner.jpg', alt: 'Banner' } }
+    ])
+  })
+
+  it('Img: variant manifest still wins when both shapes present in different stores', () => {
+    // Same key in both context.assets (cloud string) and context.files (manifest).
+    // assets is checked first per resolveAsset's lookup order.
+    const el = {
+      src: 'hero.jpg',
+      context: {
+        assets: { 'hero.jpg': '/cloud/hero.jpg' },
+        files: { 'hero.jpg': HERO_ASSET }
+      }
+    }
+    expect(Img.attr.src(el)).toBe('/cloud/hero.jpg')
+    expect(Img.attr.srcset(el)).toBeUndefined() // cloud string → no variants
+  })
+
+  it('AssetPicture: object-shape entry without variants array emits just <img>', () => {
+    // Real-world cloud shape — provider returns { src, type } but no variant chain.
+    const minimalManifest = { src: 'https://cdn.example.com/hero.jpg', type: 'image/jpeg' }
+    const el = { src: 'hero.jpg', alt: 'Hero', ...ctxWith({ 'hero.jpg': minimalManifest }) }
+    expect(AssetPicture.children(el)).toEqual([
+      { tag: 'img', attr: { src: 'https://cdn.example.com/hero.jpg', alt: 'Hero' } }
+    ])
+  })
+})
+
+describe('AssetPicture — format-negotiated <picture>', () => {
+  it('emits <source type=…> for each non-primary format + trailing <img>', () => {
+    const el = { src: 'hero.jpg', alt: 'Hero', ...ctxWith({ 'hero.jpg': HERO_ASSET }) }
+    const children = AssetPicture.children(el)
+
+    // Non-primary formats become <source>: webp and avif (jpg is the primary).
+    const sources = children.filter((c) => c.tag === 'source')
+    const types = sources.map((c) => c.attr.type).sort()
+    expect(types).toEqual(['image/avif', 'image/webp'])
+
+    // Trailing <img> uses the primary fallback URL + same-format srcset.
+    const img = children.find((c) => c.tag === 'img')
+    expect(img.attr.src).toBe('/assets/hero.jpg')
+    expect(img.attr.alt).toBe('Hero')
+    expect(img.attr.srcset).toBe('/assets/hero@2x.jpg 2x')
+  })
+
+  it('webp <source> includes scale variants in its srcset', () => {
+    const el = { src: 'hero.jpg', ...ctxWith({ 'hero.jpg': HERO_ASSET }) }
+    const children = AssetPicture.children(el)
+    const webp = children.find((c) => c.tag === 'source' && c.attr.type === 'image/webp')
+    expect(webp.attr.srcset).toBe('/assets/hero.webp, /assets/hero@2x.webp 2x')
+  })
+
+  it('avif <source> with single variant emits no scale descriptor', () => {
+    const el = { src: 'hero.jpg', ...ctxWith({ 'hero.jpg': HERO_ASSET }) }
+    const avif = AssetPicture.children(el).find((c) => c.tag === 'source' && c.attr.type === 'image/avif')
+    expect(avif.attr.srcset).toBe('/assets/hero.avif')
+  })
+
+  it('returns undefined when no asset resolves (lets DOMQL fall through)', () => {
+    expect(AssetPicture.children({ src: '/manual.jpg' })).toBeUndefined()
+  })
+
+  it('emits just <img> when asset has no variants array', () => {
+    const minimalAsset = { src: '/assets/x.jpg', type: 'image/jpeg' }
+    const el = { src: 'x.jpg', alt: 'X', ...ctxWith({ 'x.jpg': minimalAsset }) }
+    expect(AssetPicture.children(el)).toEqual([
+      { tag: 'img', attr: { src: '/assets/x.jpg', alt: 'X' } }
+    ])
+  })
+})

package/__tests__/componentsManifest.test.js

@@ -0,0 +1,41 @@
+/**
+ * FT-FRAMEWORK-1: the explicit COMPONENTS manifest must surface every
+ * uppercase-keyed component published by the default-config atoms /
+ * input / component modules. Parcel under smbls's `sideEffects: false`
+ * was pruning entries off the namespace import that prepare.js used to
+ * iterate, and consumer projects ended up missing atoms from
+ * `context.components`. This test pins the manifest contract so a future
+ * build-time prune can't silently strip entries again.
+ */
+
+import { describe, it, expect } from '@jest/globals'
+import { COMPONENTS } from '../components/index.js'
+
+const REQUIRED = [
+  // Atoms
+  'Block', 'Box', 'Flex', 'Grid', 'Img', 'Form', 'Iframe',
+  'Picture', 'Svg', 'Audio', 'Video', 'Hgroup',
+  // Text atoms (from Atoms/Text.js)
+  'H1', 'H2', 'H3', 'H4', 'H5', 'H6',
+  'P', 'Span', 'Strong',
+  // Input
+  'Input', 'NumberInput', 'Checkbox', 'Radio', 'Toggle', 'Textarea',
+  // Components
+  'Icon', 'Link', 'Select', 'Button', 'Dialog', 'Tooltip',
+  'Avatar', 'Range', 'Dropdown', 'Notification'
+]
+
+describe('default-config COMPONENTS manifest', () => {
+  it('exposes every required atom + component as a uppercase-keyed entry', () => {
+    const missing = REQUIRED.filter(name => !COMPONENTS[name])
+    expect(missing).toEqual([])
+  })
+
+  it('every entry is an object (not a function or primitive)', () => {
+    for (const name of REQUIRED) {
+      const entry = COMPONENTS[name]
+      expect(entry).toBeTruthy()
+      expect(typeof entry).toBe('object')
+    }
+  })
+})

package/blank/font.js

@@ -2,7 +2,7 @@
 
 export const font = {}
 
-export const font_family = {
+export const fontFamily = {
   system: {
     value: ['"Helvetica Neue"', 'Helvetica', 'Arial'],
     type: 'sans-serif'

package/blank/index.js

@@ -1,12 +1,12 @@
 'use strict'
 
-import { color, gradient } from './color'
-import { theme } from './theme'
-import { typography } from './typography'
-import { spacing } from './spacing'
-import { font, font_family } from './font'
-import { media } from './media'
-import { timing } from './timing'
+import { color, gradient } from './color.js'
+import { theme } from './theme.js'
+import { typography } from './typography.js'
+import { spacing } from './spacing.js'
+import { font, fontFamily } from './font.js'
+import { media } from './media.js'
+import { timing } from './timing.js'
 
 export const DEFAULT_CONFIG = {
   version: '0.0.1',
@@ -16,7 +16,7 @@ export const DEFAULT_CONFIG = {
   typography,
   spacing,
   font,
-  font_family,
+  fontFamily,
   timing,
   media,
   reset: {

package/components/Atoms/AssetPicture.js

@@ -0,0 +1,34 @@
+'use strict'
+
+import { resolveAsset, buildSourcesAndImg } from '@symbo.ls/utils'
+
+/**
+ * Format-negotiated `<picture>`: emits one `<source type="…" srcset="…">`
+ * per non-primary format from the asset variant manifest, ending in a
+ * fallback `<img src="…">` for the primary (legacy-compatible) format.
+ *
+ *   { extends: 'AssetPicture', src: 'hero.jpg', alt: 'Hero photo' }
+ *
+ * Asset resolution and source-emission are shared with `Img`/`Video`/
+ * `Audio` (see `@symbo.ls/utils#resolveAsset` and `buildSourcesAndImg`):
+ * cloud-string URLs, runner-discovered manifests, and literal URLs are
+ * all handled transparently. Asset entries without a variants array
+ * collapse to a single `<img>` instead of an empty `<source>` chain.
+ *
+ * Distinct from the existing `Picture` component, which uses
+ * `<source media="…">` for theme-based switching. Pick `AssetPicture`
+ * when you want format negotiation; pick `Picture` when you want
+ * theme/media-query switching.
+ */
+export const AssetPicture = {
+  tag: 'picture',
+
+  // Returning `el.children` inside a `children: (el) => …` function would
+  // recursively re-enter it. Return undefined so DOMQL falls through to
+  // user-provided children (or none) when no asset resolves.
+  children: (el) => {
+    const asset = resolveAsset(el)
+    if (!asset) return undefined
+    return buildSourcesAndImg(asset, el.alt)
+  }
+}

package/components/Atoms/Audio.js

@@ -0,0 +1,38 @@
+'use strict'
+
+import { resolveAsset } from '@symbo.ls/utils'
+
+/**
+ * `<audio>` mirroring `Video`'s shape — same `src`-prop convention,
+ * same smart resolution. See `resolveAsset` in `@symbo.ls/utils`.
+ */
+export const Audio = {
+  tag: 'audio',
+
+  controls: true,
+
+  attr: {
+    src: (el) => {
+      const asset = resolveAsset(el)
+      return (asset && asset.src) || el.src
+    }
+  },
+
+  // Reading `el.children` inside a `children: (el) => …` function would
+  // recursively re-enter it. Return undefined to let DOMQL's extends
+  // chain pick up user-provided children or fall to childExtends.
+  children: (el) => {
+    const asset = resolveAsset(el)
+    if (!asset || !Array.isArray(asset.variants) || !asset.variants.length) {
+      return undefined
+    }
+    return asset.variants.map((v) => ({
+      tag: 'source',
+      attr: { src: v.src, type: v.format }
+    }))
+  },
+
+  childExtends: {
+    tag: 'source'
+  }
+}

package/components/Atoms/Block.js

@@ -0,0 +1,29 @@
+'use strict'
+
+export const Block = {
+  display: 'block'
+}
+
+export const Inline = {
+  display: 'inline'
+}
+
+export const Flex = {
+  display: 'flex'
+}
+
+export const InlineFlex = {
+  display: 'inline-flex'
+}
+
+export const Grid = {
+  display: 'grid'
+}
+
+export const InlineGrid = {
+  display: 'inline-grid'
+}
+
+export const Gutter = {
+  boxSize: 'C1'
+}

package/components/Atoms/Box.js

@@ -0,0 +1,37 @@
+'use strict'
+
+import { useCssInProps } from 'css-in-props'
+
+// Main class assignment handler
+const onBeforeClassAssign = (element) => {
+  if (!element.context) return
+  const { props, __ref: ref } = element
+  const result = useCssInProps(props, element, { unpack: false })
+  ref.__class = result
+}
+
+export const Box = {
+  extends: [
+    'Shape',
+    'Theme'
+  ],
+
+  boxSizing: 'border-box',
+
+  onBeforeClassAssign
+}
+
+export const Hr = {
+  tag: 'hr',
+  margin: 'C1 0'
+}
+export const Br = { tag: 'br' }
+export const Li = { tag: 'li' }
+export const Ul = {
+  tag: 'ul',
+  childExtends: { extends: 'Li' }
+}
+export const Ol = {
+  tag: 'ol',
+  childExtends: { extends: 'Li' }
+}

package/components/Atoms/Form.js

@@ -0,0 +1,5 @@
+'use strict'
+
+export const Form = {
+  tag: 'form',
+}

package/components/Atoms/Grid.js

@@ -0,0 +1,37 @@
+'use strict'
+
+export const Grid = {
+  display: 'grid',
+
+  class: {
+    area: (el) => (el.area ? { gridArea: el.area } : null),
+    template: (el) =>
+      el.template ? { gridTemplate: el.template } : null,
+    templateAreas: (el) =>
+      el.templateAreas ? { gridTemplateAreas: el.templateAreas } : null,
+
+    column: (el) => (el.column ? { gridColumn: el.column } : null),
+    columns: (el) =>
+      el.columns ? { gridTemplateColumns: el.columns } : null,
+    templateColumns: (el) =>
+      el.templateColumns
+        ? { gridTemplateColumns: el.templateColumns }
+        : null,
+    autoColumns: (el) =>
+      el.autoColumns ? { gridAutoColumns: el.autoColumns } : null,
+    columnStart: (el) =>
+      el.columnStart ? { gridColumnStart: el.columnStart } : null,
+
+    row: (el) => (el.row ? { gridRow: el.row } : null),
+    rows: (el) => (el.rows ? { gridTemplateRows: el.rows } : null),
+    templateRows: (el) =>
+      el.templateRows ? { gridTemplateRows: el.templateRows } : null,
+    autoRows: (el) =>
+      el.autoRows ? { gridAutoRows: el.autoRows } : null,
+    rowStart: (el) =>
+      el.rowStart ? { gridRowStart: el.rowStart } : null,
+
+    autoFlow: (el) =>
+      el.autoFlow ? { gridAutoFlow: el.autoFlow } : null
+  }
+}

package/components/Atoms/Hgroup.js

@@ -0,0 +1,75 @@
+'use strict'
+
+// FRAMEWORK-4: Hgroup's `H` and `P` slots used to render unconditionally,
+// so consumers who wrote `Hgroup: { Name, Submeta }` got phantom empty
+// `<h3></h3><p></p>` rows above their actual content. The `if:` predicate
+// suppresses each slot when the consumer hasn't supplied text, html, or
+// any uppercase-keyed child for it. Self-contained (no closures) so the
+// predicate survives JSON round-trip via deepStringifyFunctions.
+const hasSlotContent = (el) => {
+  if (el.text != null) return true
+  if (el.html != null) return true
+  for (const k in el) {
+    const c = k.charCodeAt(0)
+    if (c >= 65 && c <= 90) return true
+  }
+  return false
+}
+
+export const Hgroup = {
+  display: 'flex',
+  tag: 'hgroup',
+
+  flow: 'y',
+  gap: 'Y2',
+
+  H: {
+    if: hasSlotContent,
+    color: 'title',
+    tag: 'h3',
+    lineHeight: '1em',
+    margin: '0'
+  },
+  P: {
+    if: hasSlotContent,
+    margin: '0',
+    color: 'paragraph'
+  }
+}
+
+export const HgroupRows = {
+  extends: 'Hgroup',
+
+  H: {
+    display: 'flex',
+    color: 'title',
+    align: 'center space-between'
+  },
+
+  P: {
+    color: 'paragraph',
+    align: 'center space-between'
+  }
+}
+
+export const HgroupButton = {
+  extends: 'HgroupRows',
+
+  H: {
+    justifyContent: 'space-between',
+
+    Span: {},
+
+    Button: {
+      background: 'transparent',
+      color: 'currentColor',
+      padding: '0',
+      Icon: {
+        name: 'x',
+        fontSize: 'C'
+      }
+    }
+  },
+
+  P: {}
+}

package/components/Atoms/Iframe.js

@@ -0,0 +1,8 @@
+'use strict'
+
+export const Iframe = {
+  tag: 'iframe',
+  position: 'relative',
+  minWidth: 'H',
+  minHeight: 'H'
+}

package/components/Atoms/Img.js

@@ -0,0 +1,33 @@
+'use strict'
+
+import { resolveAsset, buildImgSrcset } from '@symbo.ls/utils'
+
+/**
+ * `<img>` with smart asset resolution.
+ *
+ * `src` is the only prop you set. Resolution order (transparent — see
+ * `resolveAsset` in `@symbo.ls/utils`):
+ *   1. Cloud-uploaded entry in `ctx.assets`/`ctx.files` → use that URL.
+ *   2. Runner-discovered manifest in `ctx.assets`/`ctx.files` → use the
+ *      primary URL + auto-emit `srcset` from same-format variants.
+ *   3. Not found → treat `src` as a literal URL (drop-in `<img>`).
+ *
+ * Format-negotiated variants (webp/avif fallback chain) need `<picture>`
+ * markup — use `AssetPicture` for that.
+ */
+export const Img = {
+  tag: 'img',
+
+  attr: {
+    title: (el) => el.title || el.alt,
+    src: (el) => {
+      const asset = resolveAsset(el)
+      return (asset && asset.src) || el.src
+    },
+    srcset: (el) => {
+      const asset = resolveAsset(el)
+      const fromAsset = asset ? buildImgSrcset(asset) : ''
+      return fromAsset || el.srcset
+    }
+  }
+}