@symbo.ls/uikit 2.11.270 → 2.11.276

package/dist/index.cjs.js

@@ -406,6 +406,7 @@ var require_string = __commonJS({
     var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
     var string_exports = {};
     __export2(string_exports, {
+      lowercaseFirstLetter: () => lowercaseFirstLetter,
       replaceLiteralsWithObjectFields: () => replaceLiteralsWithObjectFields2,
       stringIncludesAny: () => stringIncludesAny,
       trimStringFromSymbols: () => trimStringFromSymbols
@@ -445,6 +446,9 @@ var require_string = __commonJS({
         }
       });
     };
+    var lowercaseFirstLetter = (inputString) => {
+      return `${inputString.charAt(0).toLowerCase()}${inputString.slice(1)}`;
+    };
   }
 });
 
@@ -4764,7 +4768,7 @@ var require_on = __commonJS({
     var applyEventsOnNode = (element, options) => {
       const { node: node2, on } = element;
       for (const param in on) {
-        if (param === "init" || param === "beforeClassAssign" || param === "render" || param === "renderRouter" || param === "attachNode" || param === "stateInit" || param === "stateCreated" || param === "initStateUpdated" || param === "stateUpdated" || param === "initUpdate" || param === "update")
+        if (param === "init" || param === "beforeClassAssign" || param === "render" || param === "renderRouter" || param === "attachNode" || param === "stateInit" || param === "stateCreated" || param === "initStateUpdate" || param === "stateUpdate" || param === "initUpdate" || param === "update")
           continue;
         const appliedFunction = element.on[param];
         if ((0, import_utils17.isFunction)(appliedFunction)) {
@@ -5262,7 +5266,7 @@ var require_updateState = __commonJS({
       } else if (options.preventInheritAtCurrentState)
         return;
       if (!options.preventInitStateUpdateListener) {
-        const initStateUpdateReturns = (0, import_event.triggerEventOnUpdate)("initStateUpdated", obj, element, options);
+        const initStateUpdateReturns = (0, import_event.triggerEventOnUpdate)("initStateUpdate", obj, element, options);
         if (initStateUpdateReturns === false)
           return element;
       }
@@ -5273,7 +5277,7 @@ var require_updateState = __commonJS({
       updateDependentState(state, obj, options);
       applyElementUpdate(state, obj, options);
       if (!options.preventStateUpdateListener) {
-        (0, import_event.triggerEventOnUpdate)("stateUpdated", obj, element, options);
+        (0, import_event.triggerEventOnUpdate)("stateUpdate", obj, element, options);
       }
       return state;
     };
@@ -5281,13 +5285,15 @@ var require_updateState = __commonJS({
       const { overwrite } = options;
       if (!overwrite)
         return;
-      const shallow = overwrite === "shallow";
+      const shallow = overwrite === "shallow" || overwrite === "shallow-once";
       const merge22 = overwrite === "merge";
       if (merge22) {
         (0, import_utils17.deepMerge)(state, obj, import_ignore.IGNORE_STATE_PARAMS);
         return;
       }
       const overwriteFunc = shallow ? import_utils17.overwriteShallow : import_utils17.overwriteDeep;
+      if (options.overwrite === "shallow-once")
+        options.overwrite = true;
       overwriteFunc(state, obj, import_ignore.IGNORE_STATE_PARAMS);
     };
     var hoistStateUpdate = (state, obj, options) => {
@@ -5313,13 +5319,13 @@ var require_updateState = __commonJS({
       targetParent.update(changesValue, {
         execStateFunction: false,
         isHoisted: true,
-        ...options,
         preventUpdate: options.preventHoistElementUpdate,
-        overwrite: !options.replace
+        overwrite: !options.replace,
+        ...options
       });
       const hasNotUpdated = options.preventUpdate !== true || !options.preventHoistElementUpdate;
       if (!options.preventStateUpdateListener && hasNotUpdated) {
-        (0, import_event.triggerEventOnUpdate)("stateUpdated", obj, element, options);
+        (0, import_event.triggerEventOnUpdate)("stateUpdate", obj, element, options);
       }
       return true;
     };
@@ -6889,7 +6895,7 @@ var Collection = {
       }
       return data;
     },
-    $setStateCollection: (param, el, state) => {
+    $stateCollection: (param, el, state) => {
       if (!param)
         return;
       if ((0, import_utils4.isString)(param)) {
@@ -6929,7 +6935,7 @@ var Collection = {
       el.content = obj;
       return obj;
     },
-    $setPropsCollection: (param, el, state) => {
+    $propsCollection: (param, el, state) => {
       if (!param)
         return;
       if ((0, import_utils4.isString)(param)) {
@@ -9254,8 +9260,8 @@ var CommonFieldTemplate = {
 
 // Field/Field.js
 var Field = {
+  extend: "Flex",
   tag: "label",
-  extend: [Focusable, IconText],
   props: {
     minWidth: "F2+Z2",
     maxWidth: "F2+Z2",
@@ -9263,14 +9269,10 @@ var Field = {
     align: "center flex-start",
     gap: "Y",
     boxSizing: "border-box",
-    padding: "- A - Z2",
-    round: "Z1",
-    border: "solid, gray .45 +80",
-    borderWidth: ".8px",
     position: "relative",
-    ":focus-within": { outline: "1px solid #0474F2" },
-    Icon: {
-      fontSize: "Z2"
+    Input: {
+      padding: "Z2 B2 Z2 B",
+      flex: "1"
     },
     Button: {
       padding: "0",
@@ -9280,19 +9282,15 @@ var Field = {
     }
   },
   Input: {
-    props: {
-      fontWeight: "400",
-      padding: "0",
-      background: "rgba(0, 0, 0, 0)",
-      round: "0",
-      color: "title",
-      fontFamily: "avenir",
-      placeholder: "Placeholder",
-      flex: "1",
-      minHeight: "100%",
-      outline: "none !important",
-      "::placeholder": { color: "gray 1 +64" }
-    }
+    placeholder: "Placeholder"
+  },
+  Icon: {
+    props: ({ parent }) => ({
+      name: parent.props.icon,
+      minWidth: "A",
+      margin: "- Z1 - -C",
+      position: "relative"
+    })
   }
 };
 var FieldTemplate = {
@@ -9348,25 +9346,35 @@ var FieldWithTitleTemplate = {
 
 // Field/Search.js
 var Search = {
-  extend: Field,
   tag: "search",
   props: {
     maxWidth: "G3",
     gap: "Z",
-    theme: "dialog",
-    padding: "Z+V Z+V2"
+    onSubmit: (ev, el, s) => {
+    }
   },
   Form: {
-    SquareButton: {
-      name: "search",
-      color: "title",
-      margin: "V - - -"
+    extend: "Field",
+    props: {
+      flow: "row-reverse",
+      Input: {
+        padding: "Z2 B Z2 C"
+      },
+      Icon: {
+        margin: "- -C - Z1",
+        name: "search"
+      }
     },
     Input: {
       props: {
-        placeholder: "type a command or search",
+        type: "search",
+        placeholder: "Search",
         "::placeholder": { color: "paragraph" }
       }
+    },
+    Icon: {},
+    on: {
+      submit: (ev, el, s) => el.parent.props.onSubmit(ev, el, s)
     }
   }
 };
@@ -9815,9 +9823,8 @@ var Input = {
     theme: "field",
     fontSize: "A",
     round: "C",
-    lineHeight: 1,
-    fontFamily: "smbls",
-    padding: "Z A"
+    lineHeight: "1",
+    padding: "Z2 B"
   },
   attr: {
     pattern: ({ props: props4 }) => props4.pattern,
@@ -10000,12 +10007,13 @@ var Textarea = {
     round: "Z1",
     placeholder: "Leave us a message...",
     padding: "A",
-    theme: "transparent",
+    theme: "field",
     border: "none",
     maxWidth: "G1_default",
     minHeight: "E_default",
     width: "100%",
     height: "E1_default",
+    fontFamily: "inherit",
     style: { resize: "none" }
   },
   ".simple": {
@@ -10017,10 +10025,11 @@ var Textarea = {
   },
   ".outlined": {
     props: {
-      background: "transparent",
+      theme: "field",
+      borderWidth: "1px",
+      borderStyle: "solid",
       lineHeight: 1.4,
       placeholder: "Leave us a message...",
-      outline: "none !important",
       resize: "none"
     }
   }
@@ -10087,7 +10096,8 @@ var Button = {
     textDecoration: "none",
     lineHeight: "1",
     whiteSpace: "nowrap",
-    padding: "Z A1",
+    padding: "Z B2",
+    fontWeight: "500",
     fontFamily: "inherit",
     round: "C2"
   },
@@ -10123,12 +10133,11 @@ var FlexButton = {
     boxSize: "fit-content",
     padding: "Z2 A2",
     round: "Z1",
-    gap: "X1",
-    position: "relative"
-  },
-  Icon: {
-    props: { fontSize: "B1" }
+    gap: "Z",
+    position: "relative",
+    Icon: { fontSize: "B1" }
   },
+  Icon: {},
   Text: { text: "Button" }
 };
 var ButtonSet = {
@@ -10392,16 +10401,40 @@ var props = {
     }
   }
 };
-var Range = {
-  props,
-  tag: "input",
-  attr: { type: "range" }
-};
 var returnPropertyValue = (el, property, def) => {
   const val = el.props && el.props[property];
-  const r = (0, import_utils14.isFunction)(val) ? val(el, el.state) : val !== void 0 ? val : def !== void 0 ? def : 50;
+  const r = (0, import_utils14.isFunction)(val) ? val(el, el.state) : val !== void 0 ? val : def !== void 0 ? def : 0;
   return r + "";
 };
+var Range = {
+  props,
+  tag: "input",
+  attr: {
+    type: "range",
+    value: (el, s) => parseFloat(el.state.value || el.props.value || el.props.defaultValue),
+    min: (el, s) => returnPropertyValue(el, "min", 0),
+    max: (el, s) => returnPropertyValue(el, "max", 100),
+    step: (el, s) => returnPropertyValue(el, "step", 1)
+  },
+  on: {
+    input: (ev, el, s) => {
+      const props4 = el.props;
+      if ((0, import_utils14.isFunction)(props4.onInput)) {
+        props4.onInput(ev, el, s);
+      } else {
+        s.update({ value: parseFloat(el.node.value) });
+      }
+    },
+    change: (ev, el, s) => {
+      const props4 = el.props;
+      if ((0, import_utils14.isFunction)(props4.onChange)) {
+        props4.onChange(ev, el, s);
+      } else {
+        s.update({ value: parseFloat(el.node.value) });
+      }
+    }
+  }
+};
 var RangeWithButtons = {
   minus: {
     extend: SquareButton,
@@ -10427,13 +10460,13 @@ var RangeWithButtons = {
     tag: "span",
     text: ({ state, parent }) => {
       const unit = returnPropertyValue(parent, "unit", "");
-      return "" + (state.value || 50) + unit;
+      return "" + (state.value || state.defaultValue || 0) + unit;
     }
   },
   input: {
     extend: Range,
     attr: {
-      value: (el, s) => parseFloat(el.state.value),
+      value: (el, s) => parseFloat(s.value || s.defaultValue),
       min: (el, s) => returnPropertyValue(el.parent, "min", 0),
       max: (el, s) => returnPropertyValue(el.parent, "max", 100),
       step: (el, s) => returnPropertyValue(el.parent, "step", 1)
@@ -10654,7 +10687,7 @@ var AvatarBundle = {
     }
   },
   childExtend: Avatar,
-  $setPropsCollection: ({ props: props4 }) => props4.options
+  $propsCollection: ({ props: props4 }) => props4.options
 };
 
 // Avatar/AvatarChooser.js
@@ -10695,7 +10728,7 @@ var AvatarChooser = {
       }
     },
     childExtend: { tag: "option" },
-    $setPropsCollection: ({ parent, state }) => {
+    $propsCollection: ({ parent, state }) => {
       if (!parent.props.options)
         return [];
       return parent.props.options.map((v) => {
@@ -10906,7 +10939,7 @@ var Pills = {
       }
     }
   },
-  $setPropsCollection: ({ props: props4, state }) => new Array(props4.qty).fill({})
+  $propsCollection: ({ props: props4, state }) => new Array(props4.qty).fill({})
 };
 
 // Tab/index.js
@@ -10917,6 +10950,8 @@ var Tab = {
     align: "center flex-start",
     position: "relative",
     padding: "Z Z1",
+    theme: "field",
+    borderRadius: "A A X2 X2",
     icon: "smile"
   },
   Icon: {},
@@ -11541,7 +11576,7 @@ var DropdownList = {
       }
     })
   },
-  $setPropsCollection: ({ props: props4 }) => props4.options
+  $propsCollection: ({ props: props4 }) => props4.options
 };
 var DropdownParent = {
   props: {