@symbo.ls/atoms 3.0.2 → 3.0.6

package/Box.js

@@ -30,7 +30,7 @@ export const Box = {
     translate: el => el.props.translate
   },
 
-  class: {
+  classlist: {
     style: el => el.style || el.props?.style
   },
 

package/InteractiveComponent.js

@@ -8,49 +8,43 @@ const style = {
 }
 
 export const Hoverable = {
-  props: {
-    transition: 'C defaultBezier',
-    transitionProperty: 'opacity, transform',
-    opacity: 0.85,
+  transition: 'C defaultBezier',
+  transitionProperty: 'opacity, transform',
+  opacity: 0.85,
 
-    ':hover': {
-      opacity: 0.9,
-      transform: 'scale(1.015)'
-    },
-    ':active': {
-      opacity: 1,
-      transform: 'scale(1.015)'
-    },
-    '.active': {
-      opacity: 1,
-      transform: 'scale(1.015)',
+  ':hover': {
+    opacity: 0.9,
+    transform: 'scale(1.015)'
+  },
+  ':active': {
+    opacity: 1,
+    transform: 'scale(1.015)'
+  },
+  '.active': {
+    opacity: 1,
+    transform: 'scale(1.015)',
 
-      ':hover': { opacity: 1 }
-    }
+    ':hover': { opacity: 1 }
   }
 }
 
 export const Clickable = {
   extends: 'Hoverable',
-  props: {
-    ':active': {
-      opacity: 1,
-      transform: 'scale(1.015)'
-    },
-    '.active': {
-      opacity: 1
-    }
+  ':active': {
+    opacity: 1,
+    transform: 'scale(1.015)'
+  },
+  '.active': {
+    opacity: 1
   }
 }
 
 export const Focusable = {
-  props: {
-    border: 'none',
-    outline: 'solid, 0, blue .3',
-    ':focus-visible': {
-      opacity: 1,
-      outline: 'solid, X, blue .3'
-    }
+  border: 'none',
+  outline: 'solid, 0, blue .3',
+  ':focus-visible': {
+    opacity: 1,
+    outline: 'solid, X, blue .3'
   },
 
   attr: {
@@ -62,16 +56,14 @@ export const Focusable = {
 export const FocusableComponent = {
   extends: 'Focusable',
   tag: 'button',
-  props: {
-    fontSize: 'A',
-    type: 'button',
-    border: 'none',
-    textDecoration: 'none',
-    lineHeight: '1',
-    whiteSpace: 'nowrap',
-    fontFamily: 'inherit',
-    style
-  },
+  fontSize: 'A',
+  type: 'button',
+  border: 'none',
+  textDecoration: 'none',
+  lineHeight: '1',
+  whiteSpace: 'nowrap',
+  fontFamily: 'inherit',
+  style,
   attr: {
     type: ({ props }) => props.type
   }

package/Shape/index.js

@@ -7,7 +7,7 @@ import { getSpacingBasedOnRatio, getMediaColor } from '@symbo.ls/scratch'
 export const Shape = {
   deps: { exec, getSpacingBasedOnRatio, getMediaColor },
 
-  class: {
+  classlist: {
     shape: ({ props, deps }) => {
       const { shape } = props
       return deps.exec(SHAPES[shape], ({ props, deps }))
@@ -34,9 +34,7 @@ export const Shape = {
 }
 
 export const Circle = {
-  props: {
-    round: '100%'
-  }
+  round: '100%'
 }
 
 export default Shape

package/Svg.js

@@ -3,7 +3,6 @@
 // create SVG symbol
 export const Svg = {
   tag: 'svg',
-  props: {},
   attr: {
     xmlns: 'http://www.w3.org/2000/svg',
     'xmlns:xlink': 'http://www.w3.org/1999/xlink'

package/Text.js

@@ -12,7 +12,7 @@ export const P = { tag: 'p' }
 export const Caption = { tag: 'caption' }
 export const Strong = {
   tag: 'strong',
-  props: { fontWeight: '700' }
+  fontWeight: '700'
 }
 export const Underline = { tag: 'u' }
 export const Italic = { tag: 'i' }
@@ -21,17 +21,18 @@ export const Title = {}
 
 export const Headline = {
   tag: 'h6',
-  props: { fontSize: 'B', fontWeight: 500 }
+  fontSize: 'B',
+  fontWeight: 500
 }
 
 export const Subhead = {
   tag: 'span',
-  props: { fontSize: 'Z1' }
+  fontSize: 'Z1'
 }
 
 export const Footnote = {
   tag: 'span',
-  props: { fontSize: 'Z' }
+  fontSize: 'Z'
 }
 
 export const B = { tag: 'b' }

package/Theme.js

@@ -13,7 +13,7 @@ export const Theme = {
     depth
   },
 
-  class: {
+  classlist: {
     depth: ({ props, deps }) => !isUndefined(props.depth) && deps.depth[props.depth]
   }
 }

package/Video.js

@@ -3,6 +3,8 @@
 export const Video = {
   tag: 'video',
 
+  controls: true,
+
   childExtends: {
     tag: 'source',
     attr: {
@@ -12,10 +14,6 @@ export const Video = {
     }
   },
 
-  props: {
-    controls: true
-  },
-
   attr: {
     src: ({ props }) => props.src,
     playsinline: ({ props }) => props.playsinline,

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@symbo.ls/atoms",
-  "version": "3.0.2",
+  "version": "3.0.6",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "c4dacc88fa3a65574680d11e320307dd2a22e6e9",
+  "gitHead": "d78a3603eea303118e84a46c24160c6d590bdb90",
   "dependencies": {
     "@domql/state": "^3.0.0",
     "@domql/utils": "^3.0.0",