@symbo.ls/uikit 2.11.99 → 2.11.101

package/dist/index.cjs.js

@@ -10059,6 +10059,7 @@ __export(domql_exports, {
   Caption: () => Caption,
   CheckBoxWithLabel: () => CheckBoxWithLabel,
   Checkbox: () => Checkbox,
+  Circle: () => Circle,
   CircleButton: () => CircleButton,
   Clickable: () => Clickable,
   Collection: () => Collection,
@@ -10097,7 +10098,7 @@ __export(domql_exports, {
   IconText: () => IconText,
   Iframe: () => Iframe,
   Img: () => Img,
-  Input: () => Input,
+  Input: () => Input2,
   Interaction: () => Interaction,
   Italic: () => Italic,
   KangorooButton: () => KangorooButton,
@@ -10165,7 +10166,7 @@ var Block = {
       boxSizing: "border-box"
     },
     display: ({ props: props6 }) => props6.display && { display: props6.display },
-    hide: ({ props: props6 }) => props6.hide && { display: "none" },
+    hide: ({ props: props6 }) => props6.hide && { display: "none !important" },
     width: ({ props: props6 }) => props6.width && (0, import_scratch.getSpacingBasedOnRatio)(props6, "width"),
     height: ({ props: props6 }) => props6.height && (0, import_scratch.getSpacingBasedOnRatio)(props6, "height"),
     boxSize: ({ props: props6 }) => {
@@ -10712,6 +10713,9 @@ var Theme = {
     },
     columnRule: ({ props: props6 }) => props6.columnRule && {
       columnRule: (0, import_scratch5.transformBorder)(props6.columnRule)
+    },
+    appearance: ({ props: props6 }) => props6.appearance && {
+      appearance: props6.appearance
     }
   }
 };
@@ -12687,7 +12691,21 @@ var Box = {
     Animation
   ],
   attr: {
-    id: ({ props: props6 }) => props6.id
+    id: ({ props: props6 }) => props6.id,
+    contenteditable: ({ props: props6 }) => props6.contenteditable,
+    dir: ({ props: props6 }) => props6.dir,
+    draggable: ({ props: props6 }) => props6.draggable,
+    hidden: ({ props: props6 }) => props6.hidden,
+    lang: ({ props: props6 }) => props6.lang,
+    spellcheck: ({ props: props6 }) => props6.spellcheck,
+    tabindex: ({ props: props6 }) => props6.tabindex,
+    title: ({ props: props6 }) => props6.title,
+    translate: ({ props: props6 }) => props6.translate
+  }
+};
+var Circle = {
+  props: {
+    round: "100%"
   }
 };
 
@@ -12871,11 +12889,11 @@ var AvatarChooser = {
       padding: "0 A 0 B1+X"
     },
     attr: { name: "avatar-chooser", id: "avatar-chooser" },
-    childExtend: { tag: "option", text: ({ state }) => state.text },
-    $setCollection: ({ parent }) => parent.props.options,
+    childExtend: { tag: "option" },
+    $setPropsCollection: ({ parent }) => parent.props.options,
     on: {
       change: (ev, { parent }) => {
-        parent.user.update({ key: ev.target.value });
+        parent.Avatar.update({ key: ev.target.value });
       }
     }
   }
@@ -13623,53 +13641,74 @@ var FieldLabel = {
 };
 
 // Form/Checkbox.js
-var templateDefault = {
-  padding: "Z",
-  round: "100%",
-  boxSize: "fit-content fit-content",
-  ":hover": { background: "#252527" },
-  input: {
-    display: "none",
-    ":checked + div": {
-      theme: "primary",
-      border: "none"
+var Input = {
+  props: {
+    type: "checkbox",
+    hide: true
+  },
+  attr: {
+    name: ({ parent }) => parent.props.name,
+    checked: ({ state, parent }) => state.checked || parent.props.checked,
+    type: "checkbox"
+  },
+  on: {
+    render: ({ state, parent, node: node2 }) => {
+      const { indeterminate } = parent.props;
+      node2.indeterminate = indeterminate;
+    },
+    update: ({ parent, node: node2 }) => {
+      const { indeterminate } = parent.props;
+      node2.indeterminate = indeterminate;
     },
-    ":checked + div > svg": { opacity: "1" }
+    change: (event, { state, node: node2 }) => {
+      state.update({
+        checked: node2.checked
+      });
+    }
   }
 };
 var Checkbox = {
+  extend: Focusable,
   tag: "label",
-  props: templateDefault,
-  input: {
-    attr: {
-      type: "checkbox",
-      checked: ({ parent }) => parent.props.checked
-    },
-    on: {
-      render: ({ parent, node: node2 }) => {
-        const { indeterminate } = parent.props;
-        node2.indeterminate = indeterminate;
-      },
-      update: ({ parent, node: node2 }) => {
-        const { indeterminate } = parent.props;
-        console.log(indeterminate);
-        node2.indeterminate = indeterminate;
-      }
-    }
+  props: {
+    padding: "Z",
+    round: "100%",
+    boxSize: "fit-content",
+    ":hover": { background: "gray .1" },
+    ":active": { background: "gray .35" }
   },
+  state: ({ props: props6 }) => ({
+    checked: props6.checked
+  }),
+  Input,
   Flex: {
     props: {
       align: "center center",
-      border: "1px solid #E9E9EA",
-      boxSize: "B B",
-      round: "Y"
+      boxSize: "B",
+      round: "Y",
+      transition: "Z defaultBezier",
+      transitionProperty: "background, color, border",
+      borderWidth: "1px",
+      borderStyle: "solid",
+      "@dark": { color: "white" },
+      "@light": { color: "black" },
+      ".checked": {
+        theme: "primary",
+        borderColor: "transparent"
+      },
+      "!checked": {
+        "@dark": { borderColor: "white" },
+        "@light": { borderColor: "black" }
+      }
     },
     Icon: {
       height: "Z Z2",
-      color: "white",
       name: "check",
       opacity: "0",
-      transition: "opacity .15s ease"
+      transition: "opacity A defaultBezier",
+      ".checked": {
+        opacity: "1"
+      }
     }
   }
 };
@@ -13680,33 +13719,31 @@ var CheckBoxWithLabel = {
     width: "fit-content",
     fieldLabel: { padding: "Z - - -" }
   },
-  checkbox: { extend: Checkbox },
-  fieldLabel: { extend: FieldLabel }
+  Checkbox,
+  FieldLabel
 };
 
 // Form/Radio.js
-var templateDefault2 = {
-  input: { ":checked + div > div": { opacity: "1" } },
+var Radio = {
+  extend: Checkbox,
+  Input: {
+    props: { type: "radio" }
+  },
   Flex: {
-    round: "100%",
-    circle: {
+    props: { round: "100%" },
+    Icon: null,
+    Circle: {
       boxSize: "Y2 Y2",
-      background: "black",
+      background: "currentColor",
       round: "100%",
       opacity: "0",
-      transition: "opacity .15s ease"
+      transition: "opacity .15s ease",
+      ".checked": {
+        opacity: "1"
+      }
     }
   }
 };
-var Radio = {
-  extend: Checkbox,
-  props: templateDefault2,
-  input: { attr: { type: "radio" } },
-  Flex: {
-    Icon: null,
-    circle: {}
-  }
-};
 var RadioWithLabel = {
   extend: Flex,
   props: {
@@ -13714,56 +13751,51 @@ var RadioWithLabel = {
     width: "fit-content",
     fieldLabel: { padding: "Z - - -" }
   },
-  radio: { extend: Radio },
-  fieldLabel: { extend: FieldLabel }
+  Radio,
+  FieldLabel
 };
 
 // Form/ToggleSwitch.js
-var templateDefault3 = {
-  padding: "Y",
-  round: "B",
-  input: {
-    ":checked + div": {
-      justifyContent: "flex-end",
-      theme: "primary"
-    }
+var ToggleSwitch = {
+  extend: Checkbox,
+  props: {
+    padding: "Y",
+    round: "B",
+    ":hover > div": { opacity: "1" }
   },
-  ":hover > div": { opacity: "1" },
+  Input: {},
   Flex: {
-    boxSize: "B C",
-    padding: "- W",
-    round: "D",
-    opacity: ".5",
-    align: "center flex-start",
-    background: "#CFCFD1",
-    border: "none",
-    transition: "opacity .15s ease",
-    circle: {
+    props: {
+      boxSize: "B C",
+      padding: "- W",
+      round: "D",
+      opacity: ".5",
+      align: "center flex-start",
+      background: "#CFCFD1",
+      border: "none",
+      transition: "opacity .15s ease",
+      ".checked": {
+        justifyContent: "flex-end",
+        theme: "primary"
+      }
+    },
+    Icon: null,
+    Circle: {
       boxSize: "A1 A1",
       round: "100%",
-      background: "white",
-      boxShadow: "1px, 1px, 8px, rgba(0, 0, 0, 0.2)"
+      background: "currentColor",
+      boxShadow: "1px, 1px, Z, gray .2"
     }
   }
 };
-var ToggleSwitch = {
-  extend: Checkbox,
-  props: templateDefault3,
-  input: {},
-  Flex: {
-    Icon: null,
-    circle: {}
-  }
-};
 var ToggleSwithWithLabel = {
   extend: Flex,
   props: {
     gap: "A",
-    width: "fit-content",
-    fieldLabel: { padding: "Z - - -" }
+    width: "fit-content"
   },
-  toggleSwith: { extend: ToggleSwitch },
-  fieldLabel: { extend: FieldLabel }
+  ToggleSwitch: {},
+  FieldLabel: { padding: "Z - - -" }
 };
 
 // Link/index.js
@@ -13814,7 +13846,7 @@ var RouteLink = {
 };
 
 // Input/index.js
-var Input = {
+var Input2 = {
   extend: [Focusable],
   tag: "input",
   props: {
@@ -13842,7 +13874,7 @@ var Input = {
   }
 };
 var NumberInput = {
-  extend: Input,
+  extend: Input2,
   props: {
     type: "number"
   },
@@ -13864,15 +13896,13 @@ var Field = {
     round: "C",
     type: "text",
     position: "relative",
-    width: "16em",
-    style: {
-      appearance: "none",
-      outline: 0,
-      border: "none",
-      cursor: "pointer",
-      fontFamily: "inherit",
-      boxSizing: "border-box"
-    },
+    width: "G",
+    appearance: "none",
+    outline: 0,
+    border: "none",
+    cursor: "pointer",
+    fontFamily: "inherit",
+    boxSizing: "border-box",
     input: {
       width: "100%",
       height: "100%",
@@ -13880,10 +13910,10 @@ var Field = {
     },
     svg: {
       position: "absolute",
-      right: "1em"
+      right: "A"
     }
   }),
-  input: { extend: [Focusable, Input] }
+  input: { extend: [Focusable, Input2] }
 };
 
 // Video/index.js
@@ -14224,7 +14254,7 @@ var TooltipParent = {
 
 // Textarea/index.js
 var Textarea = {
-  extend: [Input],
+  extend: [Input2],
   tag: "textarea",
   props: {
     theme: "tertiary",