smbls 0.15.44 → 0.15.46

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI Library built on Scratch and DOMQL",
   "private": false,
   "author": "symbo.ls",
-  "version": "0.15.44",
+  "version": "0.15.46",
   "repository": "https://github.com/symbo-ls/smbls",
   "main": "src/index.js",
   "files": [

package/src/Input.js

@@ -13,10 +13,11 @@ export const Input = {
     fontSize: 'A',
     round: 'C',
     lineHeight: 1,
-    padding: 'Z A',
+    padding: 'Z A'
   },
 
   attr: {
+    name: ({ props }) => props.name,
     placeholder: ({ props }) => props.placeholder,
     value: ({ props }) => props.value,
     disabled: ({ props }) => props.disabled || null,

package/src/atoms/Form.js

@@ -0,0 +1,11 @@
+'use strict'
+
+export const Form = {
+  tag: 'form',
+  props: {},
+  attr: {
+    action: ({ props }) => props.action,
+    method: ({ props }) => props.method,
+    enctype: ({ props }) => props.enctype
+  }
+}

package/src/atoms/Iframe.js

@@ -0,0 +1,16 @@
+'use strict'
+
+export const Iframe = {
+  tag: 'iframe',
+  props: {
+    position: 'relative',
+    minWidth: 'H',
+    minHeight: 'H'
+  },
+  attr: {
+    src: ({ props }) => props.src,
+    loading: ({ props }) => props.loading,
+    allowfullscreen: ({ props }) => props.allowfullscreen,
+    referrerpolicy: ({ props }) => props.referrerpolicy
+  }
+}

package/src/atoms/InteractiveComponent.js

@@ -0,0 +1,82 @@
+'use strict'
+
+const style = {
+  appearance: 'none',
+  border: 'none',
+  cursor: 'pointer',
+  fontFamily: 'inherit'
+}
+
+export const Hoverable = {
+  props: {
+    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: 1 }
+    }
+  }
+}
+
+export const Clickable = {
+  extend: Hoverable,
+  props: {
+    ':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'
+    }
+
+    // ':not(:focus-visible):invalid': {
+    //   outline: 'solid, X, red .3'
+    // }
+  },
+
+  attr: {
+    placeholder: ({ props }) => props.placeholder,
+    tabIndex: ({ props }) => props.tabIndex
+  }
+}
+
+export const FocusableComponent = {
+  extend: Focusable,
+  tag: 'button',
+  props: {
+    fontSize: 'A',
+    type: 'button',
+    border: 'none',
+    textDecoration: 'none',
+    lineHeight: '1',
+    whiteSpace: 'nowrap',
+    fontFamily: 'inherit',
+    style
+  },
+  attr: {
+    type: ({ props }) => props.type
+  }
+}

package/src/atoms/index.js

@@ -5,8 +5,11 @@ export * from './Direction'
 export * from './Flex'
 export * from './Grid'
 export * from './Img'
+export * from './Form'
 export * from './Media'
+export * from './Iframe'
 export * from './Interaction'
+export * from './InteractiveComponent'
 export * from './Overflow'
 export * from './Position'
 export * from './Picture'