@symbo.ls/default-config 3.8.8 → 3.14.0

package/components/Input/Textarea.js

@@ -0,0 +1,47 @@
+'use strict'
+
+export const Textarea = {
+  tag: 'textarea',
+  extends: ['Input', 'Flex'],
+
+  fontfamily: 'Avenir',
+  placeholder: 'Leave us a message...',
+  padding: 'A',
+  theme: 'field',
+  border: 'none',
+  minHeight: 'E_default',
+  width: '100%',
+  height: 'E1_default',
+  fontFamily: 'inherit',
+  round: 'Z2',
+  lineHeight: 1.4,
+
+  '.outlined': {
+    borderWidth: '1px',
+    borderStyle: 'solid'
+  }
+
+  // NOTE: removed `html: (el, s) => el.value`. It was redundant — the
+  // framework's value handling (element/create.js value effect + static value
+  // path) already drives `node.value` for textareas. Worse, when `value` was
+  // itself a function (the common case for reactive inputs), this html getter
+  // returned the function reference, which got serialized to innerHTML as
+  // `(el, s) => s.foo` — leaking the function source into the visible text.
+}
+
+export const TextareaWithButton = {
+  display: 'flex',
+  gap: 'Y2',
+  Textarea: {
+    height: 'C2+W',
+    minWidth: 'H',
+    padding: 'A',
+    fontSize: 'Z1',
+    round: 'Z2',
+    minHeight: 'fit-content'
+  },
+  SquareButton: {
+    background: 'blue',
+    Icon: { name: 'send' }
+  }
+}

package/components/Input/Toggle.js

@@ -0,0 +1,36 @@
+'use strict'
+
+export const Toggle = {
+  extends: 'Checkbox',
+
+  Input: {
+    ':checked + div': {
+      background: 'green2+8',
+      justifyContent: 'flex-end'
+    }
+  },
+
+  Flex: {
+    boxSize: 'A1 B1',
+    padding: '- W_default',
+    round: 'D',
+    align: 'center flex-start',
+    theme: 'field',
+    border: 'none',
+    transition: 'opacity .15s ease',
+    ':after': {
+      content: '""',
+      boxSize: 'A A',
+      round: '100%',
+      background: 'white',
+      boxShadow: 'gray.2 1px 1px Z'
+    },
+    Icon: null
+  }
+}
+
+export const ToggleHgroup = {
+  extends: 'CheckboxHgroup',
+  Checkbox: null,
+  Toggle: {}
+}

package/components/Link.js

@@ -0,0 +1,166 @@
+'use strict'
+
+import { router as defaultRouter } from '@symbo.ls/router'
+import { resolvePropValue } from 'attrs-in-props'
+
+// SPA-by-default click handler. `Link` mixes this in below so internal hrefs
+// route through the smbls router instead of triggering a full page reload.
+// External schemes (http(s), mailto:, tel:, etc.) fall through to the browser.
+const routerOnClick = (event, el, s) => {
+  const { context: ctx } = el
+  const { href: h, scrollToTop, stopPropagation } = el
+  let href = el.call('exec', h, el)
+
+  if (el.call('isString', href) && href.includes('{{')) {
+    href = el.call('replaceLiteralsWithObjectFields', href)
+  }
+
+  if (stopPropagation) event.stopPropagation()
+  if (!href) return
+  const { utils, snippets, functions, routerOptions } = ctx
+  const root = el.__ref.root
+  const linkIsExternal =
+    href.startsWith('http://') ||
+    href.startsWith('https://') ||
+    href.startsWith('mailto:') ||
+    href.startsWith('tel:') ||
+    href.startsWith('sketch:') ||
+    href.startsWith('whatsapp:') ||
+    href.startsWith('sms:') ||
+    href.startsWith('skype:') ||
+    href.startsWith('viber:') ||
+    href.startsWith('callto:') ||
+    href.startsWith('facetime:') ||
+    href.startsWith('facetime-audio:') ||
+    href.startsWith('geo:') ||
+    href.startsWith('maps:')
+  if (href && !linkIsExternal) {
+    event.preventDefault()
+    try {
+      let targetEl = root
+      if (routerOptions && routerOptions.customRouterElement) {
+        const parts = Array.isArray(routerOptions.customRouterElement)
+          ? routerOptions.customRouterElement
+          : routerOptions.customRouterElement.split('.')
+        let resolved = root
+        for (const part of parts) {
+          if (!resolved || !resolved[part]) { resolved = null; break }
+          resolved = resolved[part]
+        }
+        if (resolved) {
+          targetEl = resolved
+          if (root.routes) targetEl.routes = root.routes
+        }
+      }
+      ;(functions.router || snippets.router || utils.router || defaultRouter)(
+        href,
+        targetEl,
+        {},
+        {
+          scrollToOptions: { behaviour: 'instant' },
+          scrollToTop: el.call('isDefined', scrollToTop) ? scrollToTop : true,
+          ...routerOptions,
+          ...el.routerOptions
+        }
+      )
+    } catch (e) {
+      console.warn(e)
+    }
+  }
+}
+
+export const Link = {
+  extends: 'Focusable',
+  tag: 'a',
+
+  aria: {},
+  fontWeight: 'bold',
+  textDecoration: 'none',
+  color: 'currentColor',
+  draggable: false,
+
+  attr: {
+    href: (el) => {
+      return resolvePropValue(el, el.href) ||
+        resolvePropValue(el, el.call('exec', el, el).href)
+    },
+    'aria-label': (el) => (el.aria ? el.aria.label : el.text)
+  },
+
+  onClick: routerOnClick
+}
+
+export const A = {
+  extends: 'Link'
+}
+
+// Kept for backwards compatibility — `Link` already has the router onClick
+// built in, so `RouterLink` and `RouteLink` are now thin aliases.
+export const RouterLink = {
+  onClick: (event, el, s) => {
+    const { context: ctx } = el
+    const { href: h, scrollToTop, stopPropagation } = el
+    let href = el.call('exec', h, el)
+
+    if (el.call('isString', href) && href.includes('{{')) {
+      href = el.call('replaceLiteralsWithObjectFields', href)
+    }
+
+    if (stopPropagation) event.stopPropagation()
+    if (!href) return
+    const { utils, snippets, functions, routerOptions } = ctx
+    const root = el.__ref.root
+    const linkIsExternal =
+      href.startsWith('http://') ||
+      href.startsWith('https://') ||
+      href.startsWith('mailto:') ||
+      href.startsWith('tel:') ||
+      href.startsWith('sketch:') ||
+      href.startsWith('whatsapp:') ||
+      href.startsWith('sms:') ||
+      href.startsWith('skype:') ||
+      href.startsWith('viber:') ||
+      href.startsWith('callto:') ||
+      href.startsWith('facetime:') ||
+      href.startsWith('facetime-audio:') ||
+      href.startsWith('geo:') ||
+      href.startsWith('maps:')
+    if (href && !linkIsExternal) {
+      event.preventDefault()
+      try {
+        let targetEl = root
+        if (routerOptions && routerOptions.customRouterElement) {
+          const parts = Array.isArray(routerOptions.customRouterElement)
+            ? routerOptions.customRouterElement
+            : routerOptions.customRouterElement.split('.')
+          let resolved = root
+          for (const part of parts) {
+            if (!resolved || !resolved[part]) { resolved = null; break }
+            resolved = resolved[part]
+          }
+          if (resolved) {
+            targetEl = resolved
+            if (root.routes) targetEl.routes = root.routes
+          }
+        }
+        ;(functions.router || snippets.router || utils.router || defaultRouter)(
+          href,
+          targetEl,
+          {},
+          {
+            scrollToOptions: { behaviour: 'instant' },
+            scrollToTop: el.call('isDefined', scrollToTop) ? scrollToTop : true,
+            ...routerOptions,
+            ...el.routerOptions
+          }
+        )
+      } catch (e) {
+        console.warn(e)
+      }
+    }
+  }
+}
+
+export const RouteLink = {
+  extends: [Link, RouterLink]
+}

package/components/Notification.js

@@ -0,0 +1,43 @@
+'use strict'
+
+export const Notification = {
+  display: 'flex',
+  theme: 'alert',
+  padding: 'Z1 B Z A',
+  round: 'A A A Y2',
+  gap: 'X2',
+  cursor: 'pointer',
+  align: 'flex-start center',
+
+  IconText: {
+    Icon: {
+      name: 'info outline'
+    },
+    Text: {
+      ':empty': { hide: true }
+    }
+  },
+
+  Hgroup: {
+    extends: ['Flex', 'Hgroup'],
+    flow: 'y',
+    align: 'flex-start',
+    gap: 'X2',
+
+    H: {
+      tag: 'h6',
+      margin: '0',
+      fontWeight: '600',
+      lineHeight: '1em',
+      text: 'Notification',
+      ':empty': { hide: true }
+    },
+
+    P: {
+      fontSize: 'Z',
+      margin: '0',
+      text: 'is not always a distraction',
+      ':empty': { hide: true }
+    }
+  }
+}

package/components/Range.js

@@ -0,0 +1,106 @@
+'use strict'
+
+import { opacify } from '@symbo.ls/scratch'
+
+export const Range = {
+  tag: 'input',
+
+  appearance: 'none',
+  width: '100%',
+  height: '2px',
+  outline: 'none',
+  flex: 1,
+
+  onInput: (ev, el, s) => {
+    if (el.call('isFunction', el.onInput)) {
+      el.onInput(ev, el, s)
+    } else {
+      s.update({ value: parseFloat(el.node.value) })
+    }
+  },
+  onChange: (ev, el, s) => {
+    if (el.call('isFunction', el.onChange)) {
+      el.onChange(ev, el, s)
+    } else {
+      s.update({ value: parseFloat(el.node.value) })
+    }
+  },
+
+  '::-webkit-slider-thumb': {
+    boxSizing: 'content-box',
+    width: '8px',
+    height: '8px',
+    borderWidth: '2px',
+    borderStyle: 'solid',
+    borderRadius: '100%',
+    opacity: '.8',
+    appearance: 'none'
+  },
+
+  '::-webkit-slider-runnable-track': {},
+
+  '@dark': {
+    background: 'white.2',
+
+    '::-webkit-slider-thumb': {
+      background: '#232526',
+      borderColor: opacify('#454646', 0.75)
+    },
+
+    ':hover': {
+      '::-webkit-slider-thumb': {
+        borderColor: opacify('#fff', 0.35)
+      }
+    },
+
+    ':focus': {
+      '::-webkit-slider-thumb': {
+        borderColor: '#3C6AC0'
+      }
+    }
+  },
+
+  '@light': {
+    background: 'gray9',
+
+    '::-webkit-slider-thumb': {
+      background: 'white',
+      borderColor: 'gray9'
+    },
+
+    ':hover': {
+      '::-webkit-slider-thumb': {
+        borderColor: 'gray7'
+      }
+    },
+
+    ':focus': {
+      '::-webkit-slider-thumb': {
+        borderColor: 'blue'
+      }
+    }
+  },
+
+  deps: {
+    returnPropertyValue: (el, property, def) => {
+      const val = el.call('exec', el[property], el)
+      const r = el.call('isFunction', val)
+        ? val(el, el.state)
+        : val !== undefined
+        ? val
+        : def !== undefined
+        ? def
+        : 0
+      return r + ''
+    }
+  },
+
+  attr: {
+    type: 'range',
+    value: (el, s) =>
+      el.call('exec', s.value || el.value || el.defaultValue, el),
+    min: (el, s) => el.deps.returnPropertyValue(el, 'min', 0),
+    max: (el, s) => el.deps.returnPropertyValue(el, 'max', 100),
+    step: (el, s) => el.deps.returnPropertyValue(el, 'step', 1)
+  }
+}

package/components/Select.js

@@ -0,0 +1,33 @@
+'use strict'
+
+export const Select = {
+  extends: 'Focusable',
+  tag: 'select',
+
+  fontSize: 'A',
+  border: 'none',
+  boxSizing: 'border-box',
+  theme: 'field',
+  cursor: 'pointer',
+  childProps: {
+    tag: 'option',
+    attr: {
+      value: (el) => el.value,
+      selected: (el) => el.selected,
+      disabled: (el) => el.disabled
+    }
+  },
+
+  attr: {
+    name: (el) => el.name,
+    disabled: (el) => el.disabled,
+    value: el => {
+      if (!el.value) return
+      const val = el.call('exec', el.value, el)
+      if (el.call('isString', val) && val.includes('{{')) {
+        return el.call('replaceLiteralsWithObjectFields', val)
+      }
+      return val
+    }
+  }
+}

package/components/Tooltip/index.js

@@ -0,0 +1,128 @@
+'use strict'
+
+import { isDefined } from '@symbo.ls/utils'
+
+export const Tooltip = {
+  display: 'flex',
+
+  theme: 'dialog',
+  background: 'black',
+  flow: 'column',
+  shape: 'tooltip',
+  shapeDirection: 'left',
+  padding: 'Z1 A',
+  round: 'Y2',
+  width: 'fit-content',
+  minWidth: 'D2',
+  maxWidth: 'F2',
+  gap: 'X',
+  textAlign: 'center',
+  attr: { tooltip: true },
+
+  Title: {
+    if: ({ parent }) => isDefined(parent.title) || parent.title,
+    width: 'fit-content',
+    fontWeight: 500,
+    color: 'gray12',
+    text: ({ parent }) => parent.title
+  },
+
+  P: {
+    if: (el, s) =>
+      el.call('isDefined', el.call('exec', el.parent.description, el)) ||
+      el.text,
+    width: 'fit-content',
+    fontSize: 'Z2',
+    margin: '0',
+    color: 'gray6',
+    fontWeight: '400',
+    text: (el, s) => el.call('exec', el.parent.description, el)
+  }
+}
+
+export const TooltipHidden = {
+  extends: 'Tooltip',
+
+  position: 'absolute',
+  pointerEvents: 'none',
+  opacity: '0',
+  visibility: 'hidden',
+  transition:
+    'C defaultBezier opacity, C defaultBezier visibility, B defaultBezier transform',
+
+  onInit: (el) => {
+    const result = !el.shapeDirection || el.shapeDirection === 'top'
+      ? {
+          top: '112%',
+          left: '50%',
+          transform: 'translate3d(-50%,10%,0)',
+
+          '.isActive': {
+            transform: 'translate3d(-50%,0,0)',
+            opacity: 1,
+            visibility: 'visible'
+          }
+        }
+      : el.shapeDirection === 'right'
+      ? {
+          transform: 'translate3d(10%,-50%,0)',
+          left: '112%',
+          top: '50%',
+
+          '.isActive': {
+            transform: 'translate3d(0%,-50%,0)',
+            opacity: 1,
+            visibility: 'visible'
+          }
+        }
+      : el.shapeDirection === 'bottom'
+      ? {
+          transform: 'translate3d(-50%,-10%,0)',
+          bottom: '112%',
+          left: '50%',
+
+          '.isActive': {
+            transform: 'translate3d(-50%,0,0)',
+            opacity: 1,
+            visibility: 'visible'
+          }
+        }
+      : el.shapeDirection === 'left'
+      ? {
+          transform: 'translate3d(10%,-50%,0)',
+          right: '112%',
+          top: '50%',
+
+          '.isActive': {
+            transform: 'translate3d(0%,-50%,0)',
+            opacity: 1,
+            visibility: 'visible'
+          }
+        }
+      : {}
+    Object.assign(el, result)
+  }
+}
+
+export const TooltipParent = {
+  position: 'relative',
+  zIndex: 999,
+
+  onInit: (el) => {
+    const { Tooltip, TooltipHidden } = el
+    const TooltipElem = Tooltip || TooltipHidden
+    if (!TooltipElem) return
+    const TooltipActive =
+      TooltipElem && TooltipElem['.isActive']
+    Object.assign(el, {
+      ':hover, &:focus-visible': {
+        zIndex: 1000,
+        '& [tooltip]': TooltipActive || {
+          transform: 'translate3d(-50%, 0, 0)',
+          opacity: 1,
+          visibility: 'visible'
+        }
+      }
+    })
+  }
+}

package/components/Tooltip/style.js

@@ -0,0 +1,12 @@
+'use strict'
+
+export default {
+  textAlign: 'center',
+  padding: '1.2em',
+  caption: {
+    whiteSpace: 'nowrap'
+  },
+  span: {
+    opacity: '.5'
+  }
+}

package/components/index.js

@@ -0,0 +1,36 @@
+'use strict'
+
+// Atoms
+export * from './Atoms/Block.js'
+export * from './Atoms/Img.js'
+export * from './Atoms/Form.js'
+export * from './Atoms/Iframe.js'
+export * from './Atoms/InteractiveComponent.js'
+export * from './Atoms/Picture.js'
+export * from './Atoms/Svg.js'
+export * from './Atoms/Shape.js'
+export * from './Atoms/Video.js'
+export * from './Atoms/Theme.js'
+export * from './Atoms/Text.js'
+export * from './Atoms/Box.js'
+export * from './Atoms/Hgroup.js'
+
+// Input
+export * from './Input/Input.js'
+export * from './Input/NumberInput.js'
+export * from './Input/Checkbox.js'
+export * from './Input/Radio.js'
+export * from './Input/Toggle.js'
+export * from './Input/Textarea.js'
+
+// Components
+export * from './Icon/index.js'
+export * from './Link.js'
+export * from './Select.js'
+export * from './Button.js'
+export * from './Dialog.js'
+export * from './Tooltip/index.js'
+export * from './Avatar.js'
+export * from './Range.js'
+export * from './Dropdown.js'
+export * from './Notification.js'

package/default/font.js

@@ -6,9 +6,16 @@ export const font = {
   }]
 }
 
-export const font_family = {
+export const fontFamily = {
   system: {
     value: ['"Helvetica Neue"', 'Helvetica', 'Arial'],
-    type: 'sans-serif'
+    type: 'sans-serif',
+    metrics: {
+      capHeight: 714,
+      ascent: 952,
+      descent: -213,
+      lineGap: 28,
+      unitsPerEm: 1000
+    }
   }
 }

package/default/index.js

@@ -4,7 +4,7 @@ import { color, gradient } from './color.js'
 import { theme } from './theme.js'
 import { typography } from './typography.js'
 import { spacing } from './spacing.js'
-import { font, font_family } from './font.js'
+import { font, fontFamily } from './font.js'
 import { icons } from './icons.js'
 import { media } from './media.js'
 import { timing } from './timing.js'
@@ -17,7 +17,7 @@ export const DEFAULT_CONFIG = {
   typography,
   spacing,
   font,
-  font_family,
+  fontFamily,
   timing,
   icons,
   media,

package/default/typography.js

@@ -4,5 +4,6 @@ export const typography = {
   base: 16,
   ratio: 1.25,
   subSequence: true,
+  useCapsize: true,
   templates: {}
 }