@symbo.ls/input 2.11.249 → 2.11.265

package/Checkbox.js

@@ -23,7 +23,9 @@ export const Checkbox = {
         opacity: '1'
       }
     },
-    attr: { checked: ({ parent }) => parent.props.checked }
+    attr: {
+      checked: ({ parent }) => parent.props.checked
+    }
   },
 
   Flex: {
@@ -46,7 +48,7 @@ export const Checkbox = {
   }
 }
 
-export const CheckboxTitleParagraph = {
+export const CheckboxHgroup = {
   extend: Flex,
   tag: 'label',
 
@@ -57,7 +59,7 @@ export const CheckboxTitleParagraph = {
   },
 
   Checkbox: { tag: 'div' },
-  TitleParagraphRows: {
+  HgroupRows: {
     gap: 'Z1',
     margin: 'Y - - -'
   }

package/Radio.js

@@ -1,7 +1,7 @@
 'use strict'
 
 import { Pseudo } from '@symbo.ls/atoms'
-import { Checkbox, CheckboxTitleParagraph } from './Checkbox'
+import { Checkbox, CheckboxHgroup } from './Checkbox'
 
 export const Radio = {
   extend: Checkbox,
@@ -30,8 +30,8 @@ export const Radio = {
   }
 }
 
-export const RadioTitleParagraph = {
-  extend: CheckboxTitleParagraph,
+export const RadioHgroup = {
+  extend: CheckboxHgroup,
   Checkbox: null,
   Radio: {}
 }

package/Textarea.js

@@ -52,7 +52,7 @@ export const TextareaWithButton = {
     round: 'Z2',
     minHeight: 'fit-content'
   },
-  IconCommonButton: {
+  IconFlexButton: {
     props: {
       background: 'blue',
       Icon: { name: 'send' }

package/Toggle.js

@@ -1,45 +1,16 @@
 'use strict'
 
-import { Checkbox, CheckboxTitleParagraph } from './Checkbox'
-
-/**
- * A Toggle component
- * The `Toggle` component represents a customizable checkbox input with a switch-like appearance.
- * It extends the Checkbox component and allows for various style and property configurations.
- *
- * @typedef {Object} Toggle
- * @property {Object} Input - Style configurations for the input element.
- * @property {Object} Flex - Style and property configurations for the surrounding container.
- * @property {Object} Flex.props - Additional properties for the Flex container.
- * @property {string} Flex.props.boxSize - The size of the container (e.g., 'A+X B+Z').
- * @property {string} Flex.props.padding - The padding of the container (e.g., '- W').
- * @property {string} Flex.props.round - The roundness of the container (e.g., 'D').
- * @property {string} Flex.props.align - The alignment of the container (e.g., 'center flex-start').
- * @property {string} Flex.props.background - The background color of the container (e.g., 'gray .8 +68').
- * @property {string} Flex.props.border - The border style of the container (e.g., 'none').
- * @property {string} Flex.props.transition - The transition effect of the container (e.g., 'opacity .15s ease').
- * @property {Object} Flex.props.:after - Additional styles for the pseudo-element ":after".
- * @property {string} Flex.props.:after.content - Content to be displayed in the pseudo-element.
- * @property {string} Flex.props.:after.boxSize - The size of the pseudo-element (e.g., 'A A').
- * @property {string} Flex.props.:after.round - The roundness of the pseudo-element (e.g., '100%').
- * @property {string} Flex.props.:after.background - The background color of the pseudo-element (e.g., 'white').
- * @property {string} Flex.props.:after.boxShadow - The box shadow of the pseudo-element (e.g., '1px, 1px, Z, gray .2').
- * @property {null|object} Flex.Icon - An optional icon for the Toggle component.
- *
- * @example
- * // Example usage of the Toggle component:
- * const myToggle = {
- *   extend: Toggle,
- * };
- */
+import { Checkbox, CheckboxHgroup } from './Checkbox'
 
 export const Toggle = {
   extend: Checkbox,
 
   Input: {
-    ':checked + div': {
-      background: 'green2 +8',
-      justifyContent: 'flex-end'
+    props: {
+      ':checked + div': {
+        background: 'green2 +8',
+        justifyContent: 'flex-end'
+      }
     }
   },
 
@@ -49,7 +20,7 @@ export const Toggle = {
       padding: '- W',
       round: 'D',
       align: 'center flex-start',
-      background: 'gray',
+      theme: 'field',
       border: 'none',
       transition: 'opacity .15s ease',
       ':after': {
@@ -64,8 +35,8 @@ export const Toggle = {
   }
 }
 
-export const ToggleTitleParagraph = {
-  extend: CheckboxTitleParagraph,
+export const ToggleHgroup = {
+  extend: CheckboxHgroup,
   Checkbox: null,
   Toggle: {}
 }

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@symbo.ls/input",
-  "version": "2.11.249",
+  "version": "2.11.265",
   "main": "index.js",
   "source": "index.js",
   "license": "MIT",
-  "gitHead": "9c800fdfdff5d9a49083e7d4f849189a35b8054c",
+  "gitHead": "e96a45d1a191dbcd8ee2d02c969398821e1f446d",
   "dependencies": {
     "@domql/utils": "latest",
     "@symbo.ls/atoms": "latest"