poe-svelte-ui-lib 1.22.2 → 1.23.1

package/dist/Accordion/AccordionProps.svelte

@@ -8,6 +8,7 @@
   import Button from "../Button/Button.svelte"
   import CrossIcon from "../libIcons/CrossIcon.svelte"
   import CommonSnippets from "../CommonSnippets.svelte"
+  import PropsGroup from "../PropsGroup.svelte"
 
   const {
     component,
@@ -92,11 +93,11 @@
 {/snippet}
 
 {#if forConstructor}
-  <div class="flex items-start justify-center gap-8">
-    <div class="flex w-1/3 flex-col px-2">
+  <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
+    <PropsGroup label={$T("constructor.props.group.general")}>
       <CommonSnippets snippet="Access" {component} {onPropertyChange} />
-    </div>
-    <div class="flex w-1/3 flex-col px-2">
+    </PropsGroup>
+    <PropsGroup label={$T("constructor.props.group.content")}>
       <CommonSnippets snippet="Label" {component} {onPropertyChange} />
       <CommonSnippets snippet="LabelAlign" initialValue={initialAlign} {component} {onPropertyChange} />
       <CommonSnippets
@@ -110,20 +111,20 @@
         {component}
         {onPropertyChange}
       />
-    </div>
-    <div class="flex w-1/3 flex-col gap-2 items-center px-2">
+    </PropsGroup>
+    <PropsGroup label={$T("constructor.props.group.appearance")} contentClass="items-center">
       {@render AccordionBackgroundImage()}
-    </div>
+    </PropsGroup>
   </div>
 {:else}
-  <div class="flex items-start justify-center gap-8">
-    <div class="flex w-1/3 flex-col px-2">
+  <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
+    <PropsGroup label={$T("constructor.props.group.general")}>
       <CommonSnippets snippet="Identificator" {component} {onPropertyChange} />
       <CommonSnippets snippet="Access" {component} {onPropertyChange} />
       <CommonSnippets snippet="WrapperClass" {component} {onPropertyChange} />
       {@render AccordionSize()}
-    </div>
-    <div class="flex w-1/3 flex-col px-2">
+    </PropsGroup>
+    <PropsGroup label={$T("constructor.props.group.content")}>
       <CommonSnippets snippet="Label" {component} {onPropertyChange} />
       <CommonSnippets snippet="LabelClass" initialValue={initialAlign} {component} {onPropertyChange} />
       <CommonSnippets
@@ -138,9 +139,9 @@
         {onPropertyChange}
       />
       {@render AccordionIsOpen()}
-    </div>
-    <div class="flex w-1/3 flex-col items-center gap-2 px-2">
+    </PropsGroup>
+    <PropsGroup label={$T("constructor.props.group.appearance")} contentClass="items-center">
       {@render AccordionBackgroundImage()}
-    </div>
+    </PropsGroup>
   </div>
 {/if}

package/dist/Button/Button.svelte

@@ -38,7 +38,11 @@
   const DANGER_BG = ["bg-red", "bg-pink"]
 
   const role = $derived.by(() => {
-    const bg = componentClass.split(/\s+/).filter((c) => c.startsWith("bg-")).at(-1) ?? ""
+    const bg =
+      componentClass
+        .split(/\s+/)
+        .filter((c) => c.startsWith("bg-"))
+        .at(-1) ?? ""
     if (!bg || bg === "bg-transparent") return "plain"
     if (SURFACE_BG.includes(bg) || bg.endsWith("-soft")) return "secondary"
     if (DANGER_BG.includes(bg)) return "destructive"

package/dist/Button/ButtonProps.svelte

@@ -7,6 +7,7 @@
   import { twMerge } from "tailwind-merge"
   import { ICONS } from "../icons"
   import CommonSnippets from "../CommonSnippets.svelte"
+  import PropsGroup from "../PropsGroup.svelte"
   import InfoIcon from "../libIcons/InfoIcon.svelte"
 
   const {
@@ -165,17 +166,16 @@
 {/snippet}
 
 {#if forConstructor}
-  <div class="relative flex flex-row items-start justify-center">
-    <!-- Сообщение для отправки в ws по нажатию кнопки -->
-    <div class="flex w-1/3 flex-col px-2">
+  <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
+    <PropsGroup label={$T("constructor.props.group.general")}>
       <CommonSnippets snippet="Access" {component} {onPropertyChange} />
       {@render ButtonHeaderArgument()}
-    </div>
-    <div class="flex w-1/3 flex-col px-2">
+    </PropsGroup>
+    <PropsGroup label={$T("constructor.props.group.value")}>
       {@render ButtonVariables()}
       {@render ButtonColors()}
-    </div>
-    <div class="flex w-1/3 flex-col px-2">
+    </PropsGroup>
+    <PropsGroup label={$T("constructor.props.group.appearance")}>
       {@render ButtonName()}
       <CommonSnippets
         snippet="IconsLib"
@@ -189,22 +189,22 @@
         {onPropertyChange}
       />
       {@render ButtonHeight()}
-    </div>
+    </PropsGroup>
   </div>
 {:else}
-  <div class="relative flex flex-row items-start justify-center">
-    <div class="flex w-1/3 flex-col px-2">
+  <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
+    <PropsGroup label={$T("constructor.props.group.general")}>
       <CommonSnippets snippet="Identificator" {component} {onPropertyChange} />
       <CommonSnippets snippet="Access" {component} {onPropertyChange} />
       <CommonSnippets snippet="WrapperClass" {component} {onPropertyChange} />
       <CommonSnippets snippet="Disabled" {component} {onPropertyChange} />
-    </div>
-    <div class="flex w-1/3 flex-col px-2">
+    </PropsGroup>
+    <PropsGroup label={$T("constructor.props.group.content")}>
       {@render ButtonName()}
       {@render ButtonInfo()}
       {@render ButtonInfoSide()}
-    </div>
-    <div class="flex w-1/3 flex-col px-2">
+    </PropsGroup>
+    <PropsGroup label={$T("constructor.props.group.appearance")}>
       {@render ButtonComponentClass()}
       {@render ButtonColors()}
       <CommonSnippets
@@ -218,6 +218,6 @@
         {component}
         {onPropertyChange}
       />
-    </div>
+    </PropsGroup>
   </div>
 {/if}

package/dist/ColorPicker/ColorPickerProps.svelte

@@ -6,6 +6,7 @@
   import { getContext } from "svelte"
   import { optionsStore } from "../options"
   import CommonSnippets from "../CommonSnippets.svelte"
+  import PropsGroup from "../PropsGroup.svelte"
 
   const {
     component,
@@ -58,33 +59,33 @@
 {/snippet}
 
 {#if forConstructor}
-  <div class="relative flex flex-row items-start justify-center">
-    <div class="flex w-1/3 flex-col px-2">
+  <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
+    <PropsGroup label={$T("constructor.props.group.general")}>
       <CommonSnippets snippet="Access" {component} {onPropertyChange} />
-    </div>
-    <div class="flex w-1/3 flex-col px-2">
+    </PropsGroup>
+    <PropsGroup label={$T("constructor.props.group.value")}>
       <CommonSnippets snippet="Variable" {VARIABLE_OPTIONS} {component} {onPropertyChange} />
       <CommonSnippets snippet="EventHandlerArgument" {component} {onPropertyChange} />
-    </div>
-    <div class="flex w-1/3 flex-col px-2">
+    </PropsGroup>
+    <PropsGroup label={$T("constructor.props.group.appearance")}>
       <CommonSnippets snippet="Label" {component} {onPropertyChange} />
       <CommonSnippets snippet="LabelAlign" initialValue={initialAlign} {component} {onPropertyChange} />
-    </div>
+    </PropsGroup>
   </div>
 {:else}
-  <div class="relative flex flex-row items-start justify-center">
-    <div class="flex w-1/3 flex-col px-2">
+  <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
+    <PropsGroup label={$T("constructor.props.group.general")}>
       <CommonSnippets snippet="Identificator" {component} {onPropertyChange} />
       <CommonSnippets snippet="Access" {component} {onPropertyChange} />
-    </div>
-    <div class="flex w-1/3 flex-col px-2">
+    </PropsGroup>
+    <PropsGroup label={$T("constructor.props.group.appearance")}>
       <CommonSnippets snippet="Label" {component} {onPropertyChange} />
       <CommonSnippets snippet="LabelClass" initialValue={initialAlign} {component} {onPropertyChange} />
       <CommonSnippets snippet="Readonly" {component} {onPropertyChange} />
-    </div>
-    <div class="flex w-1/3 flex-col px-2">
+    </PropsGroup>
+    <PropsGroup label={$T("constructor.props.group.value")}>
       <CommonSnippets snippet="WrapperClass" {component} {onPropertyChange} />
       {@render ColorPickerDefaultColor()}
-    </div>
+    </PropsGroup>
   </div>
 {/if}

package/dist/Divider/Divider.svelte

@@ -11,9 +11,6 @@
 <div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class={twMerge(`flex h-full w-full flex-col ${anchorClass[anchor]}`, wrapperClass)}>
   {#if type === "line"}
     <!-- Без bg-* класса берём --hairline-color; явный bg-* по-прежнему уважается через --bg-color -->
-    <div
-      class={twMerge("w-full", color)}
-      style="height: {width}px; background: {color ? 'var(--bg-color)' : 'var(--hairline-color)'};"
-    ></div>
+    <div class={twMerge("w-full", color)} style="height: {width}px; background: {color ? 'var(--bg-color)' : 'var(--hairline-color)'};"></div>
   {/if}
 </div>

package/dist/Divider/DividerProps.svelte

@@ -5,6 +5,7 @@
   import * as UI from ".."
   import { optionsStore } from "../options"
   import CommonSnippets from "../CommonSnippets.svelte"
+  import PropsGroup from "../PropsGroup.svelte"
 
   const {
     component,
@@ -64,33 +65,33 @@
 {/snippet}
 
 {#if forConstructor}
-  <div class="flex items-start justify-center gap-8">
-    <div class="flex w-1/3 flex-col px-2">
+  <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
+    <PropsGroup label={$T("constructor.props.group.general")}>
       <CommonSnippets snippet="Access" {component} {onPropertyChange} />
       {@render DividerType()}
-    </div>
-    <div class="flex w-1/3 flex-col px-2">
+    </PropsGroup>
+    <PropsGroup label={$T("constructor.props.group.layout")}>
       {@render DividerAnchor()}
       {@render DividerWidth()}
-    </div>
-    <div class="flex w-1/3 flex-col px-2">
+    </PropsGroup>
+    <PropsGroup label={$T("constructor.props.group.appearance")}>
       {@render DividerColor()}
-    </div>
+    </PropsGroup>
   </div>
 {:else}
-  <div class="flex items-start justify-center gap-8">
-    <div class="flex w-1/3 flex-col px-2">
+  <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
+    <PropsGroup label={$T("constructor.props.group.general")}>
       <CommonSnippets snippet="Identificator" {component} {onPropertyChange} />
       <CommonSnippets snippet="Access" {component} {onPropertyChange} />
       <CommonSnippets snippet="WrapperClass" {component} {onPropertyChange} />
-    </div>
-    <div class="flex w-1/3 flex-col px-2">
+    </PropsGroup>
+    <PropsGroup label={$T("constructor.props.group.layout")}>
       {@render DividerType()}
       {@render DividerAnchor()}
-    </div>
-    <div class="flex w-1/3 flex-col px-2">
+    </PropsGroup>
+    <PropsGroup label={$T("constructor.props.group.appearance")}>
       {@render DividerWidth()}
       {@render DividerColor()}
-    </div>
+    </PropsGroup>
   </div>
 {/if}

package/dist/FileAttach/FileAttachProps.svelte

@@ -7,6 +7,7 @@
   import { getContext } from "svelte"
   import { twMerge } from "tailwind-merge"
   import CommonSnippets from "../CommonSnippets.svelte"
+  import PropsGroup from "../PropsGroup.svelte"
 
   const {
     component,
@@ -81,33 +82,33 @@
 {/snippet}
 
 {#if forConstructor}
-  <div class="relative flex flex-row items-start justify-center">
-    <div class="flex w-1/3 flex-col px-2">
+  <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
+    <PropsGroup label={$T("constructor.props.group.general")}>
       <CommonSnippets snippet="Access" {component} {onPropertyChange} />
-    </div>
-    <div class="flex w-1/3 flex-col px-2">
+    </PropsGroup>
+    <PropsGroup label={$T("constructor.props.group.appearance")}>
       <CommonSnippets snippet="Label" {component} {onPropertyChange} />
       <CommonSnippets snippet="LabelAlign" initialValue={initialAlign} {component} {onPropertyChange} />
-    </div>
-    <div class="flex w-1/3 flex-col px-2">
+    </PropsGroup>
+    <PropsGroup label={$T("constructor.props.group.content")}>
       {@render FileAccept()}
-    </div>
+    </PropsGroup>
   </div>
 {:else}
-  <div class="relative flex flex-row items-start justify-center">
-    <div class="flex w-1/3 flex-col px-2">
+  <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
+    <PropsGroup label={$T("constructor.props.group.general")}>
       <CommonSnippets snippet="Identificator" {component} {onPropertyChange} />
       <CommonSnippets snippet="Access" {component} {onPropertyChange} />
       <CommonSnippets snippet="WrapperClass" {component} {onPropertyChange} />
-    </div>
-    <div class="flex w-1/3 flex-col px-2">
+    </PropsGroup>
+    <PropsGroup label={$T("constructor.props.group.appearance")}>
       <CommonSnippets snippet="Label" {component} {onPropertyChange} />
       <CommonSnippets snippet="LabelClass" initialValue={initialAlign} {component} {onPropertyChange} />
       <CommonSnippets snippet="Disabled" {component} {onPropertyChange} />
-    </div>
-    <div class="flex w-1/3 flex-col px-2">
+    </PropsGroup>
+    <PropsGroup label={$T("constructor.props.group.content")}>
       {@render FileAccept()}
       {@render FileType()}
-    </div>
+    </PropsGroup>
   </div>
 {/if}

package/dist/Graph/GraphProps.svelte

@@ -6,6 +6,7 @@
   import { optionsStore } from "../options"
   import { twMerge } from "tailwind-merge"
   import CommonSnippets from "../CommonSnippets.svelte"
+  import PropsGroup from "../PropsGroup.svelte"
   import { REFRESH_OPTIONS } from "./Graph.svelte"
 
   const {
@@ -48,34 +49,34 @@
 {/snippet}
 
 {#if forConstructor}
-  <div class="relative flex flex-row items-start justify-center">
-    <div class="flex w-1/3 flex-col px-2">
+  <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
+    <PropsGroup label={$T("constructor.props.group.general")}>
       <CommonSnippets snippet="Access" {component} {onPropertyChange} />
       <CommonSnippets snippet="Variable" {VARIABLE_OPTIONS} {component} {onPropertyChange} />
-    </div>
-    <div class="flex w-1/3 flex-col px-2">
+    </PropsGroup>
+    <PropsGroup label={$T("constructor.props.group.appearance")}>
       <CommonSnippets snippet="Label" {component} {onPropertyChange} />
       <CommonSnippets snippet="LabelAlign" initialValue={initialAlign} {component} {onPropertyChange} />
-    </div>
-    <div class="flex w-1/3 flex-col px-2">
+    </PropsGroup>
+    <PropsGroup label={$T("constructor.props.group.behavior")}>
       {@render GraphIsTest()}
       {@render GraphSettings()}
-    </div>
+    </PropsGroup>
   </div>
 {:else}
-  <div class="relative mb-2 flex flex-row items-start justify-center">
-    <div class="flex w-1/3 flex-col px-2">
+  <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
+    <PropsGroup label={$T("constructor.props.group.general")}>
       <CommonSnippets snippet="Identificator" {component} {onPropertyChange} />
       <CommonSnippets snippet="Access" {component} {onPropertyChange} />
-    </div>
-    <div class="flex w-1/3 flex-col px-2">
+    </PropsGroup>
+    <PropsGroup label={$T("constructor.props.group.appearance")}>
       <CommonSnippets snippet="Label" {component} {onPropertyChange} />
       <CommonSnippets snippet="LabelClass" initialValue={initialAlign} {component} {onPropertyChange} />
-    </div>
-    <div class="flex w-1/3 flex-col px-2">
+    </PropsGroup>
+    <PropsGroup label={$T("constructor.props.group.behavior")}>
       <CommonSnippets snippet="WrapperClass" {component} {onPropertyChange} />
       {@render GraphIsTest()}
       {@render GraphSettings()}
-    </div>
+    </PropsGroup>
   </div>
 {/if}

package/dist/Input/Input.svelte

@@ -143,7 +143,9 @@
         {#if showPassword}
           <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
             ><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-              ><path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0" /><path d="M2 12c1.6-4.097 5.336-7 10-7s8.4 2.903 10 7c-1.6 4.097-5.336 7-10 7s-8.4-2.903-10-7" /></g
+              ><path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0" /><path
+                d="M2 12c1.6-4.097 5.336-7 10-7s8.4 2.903 10 7c-1.6 4.097-5.336 7-10 7s-8.4-2.903-10-7"
+              /></g
             ></svg
           >
         {:else}

package/dist/Input/InputProps.svelte

@@ -7,6 +7,7 @@
   import { twMerge } from "tailwind-merge"
   import Library from "../libIcons/Library.svelte"
   import CommonSnippets from "../CommonSnippets.svelte"
+  import PropsGroup from "../PropsGroup.svelte"
 
   const {
     component,
@@ -279,7 +280,6 @@
 {#snippet InputSettings()}
   {#if component.properties.type !== "bitMode"}
     <UI.Select
-      wrapperClass="mt-5"
       options={$optionsStore.INPUT_SETTING_OPTIONS.map((o) => {
         if (component.properties.type === "password" && o.value == "help.copyButton") return { ...o, disabled: true }
         else return o
@@ -377,48 +377,48 @@
 {/snippet}
 
 {#if forConstructor}
-  <div class="relative flex flex-row items-start justify-center">
-    <div class="flex w-1/3 flex-col px-2">
+  <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
+    <PropsGroup label={$T("constructor.props.group.general")}>
       {@render InputAccess()}
       {@render InputVariable()}
       {@render InputType()}
-    </div>
-    <div class="flex w-1/3 flex-col px-2">
+    </PropsGroup>
+    <PropsGroup label={$T("constructor.props.group.value")}>
       {@render InputValue()}
       {@render InputPlaceholder()}
       {@render InputInfo()}
       {@render InputSettings()}
       <CommonSnippets snippet="BitModeInfo" {component} {onPropertyChange} />
-    </div>
-    <div class="flex w-1/3 flex-col px-2">
+    </PropsGroup>
+    <PropsGroup label={$T("constructor.props.group.appearance")}>
       {@render InputLabel()}
       {@render InputLabelAlign()}
       {@render InputAutocomplete()}
       {@render InputColors()}
-    </div>
+    </PropsGroup>
   </div>
 {:else}
-  <div class="relative flex flex-row items-start justify-center">
-    <div class="flex w-1/3 flex-col px-2">
+  <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
+    <PropsGroup label={$T("constructor.props.group.general")}>
       {@render InputIdentificator()}
       {@render InputWrapperClass()}
       {@render InputLabel()}
       {@render InputLabelClass()}
       {@render InputComponentClass()}
       {@render InputColors()}
-    </div>
-    <div class="flex w-1/3 flex-col px-2">
+    </PropsGroup>
+    <PropsGroup label={$T("constructor.props.group.value")}>
       {@render InputAccess()}
       {@render InputValue()}
       {@render InputType()}
       <CommonSnippets snippet="BitModeInfo" {component} {onPropertyChange} />
-    </div>
-    <div class="flex w-1/3 flex-col px-2">
+    </PropsGroup>
+    <PropsGroup label={$T("constructor.props.group.behavior")}>
       {@render InputPlaceholder()}
       {@render InputInfo()}
       {@render InputAutocomplete()}
       {@render InputSettings()}
       {@render InputDisabled()}
-    </div>
+    </PropsGroup>
   </div>
 {/if}

package/dist/Joystick/JoystickProps.svelte

@@ -6,6 +6,7 @@
   import { ICONS } from "../icons"
   import { optionsStore } from "../options"
   import CommonSnippets from "../CommonSnippets.svelte"
+  import PropsGroup from "../PropsGroup.svelte"
 
   const {
     component,
@@ -34,7 +35,7 @@
 </script>
 
 {#snippet JoystickAxesMinMax()}
-  <div class="mt-2 flex w-full justify-around gap-2">
+  <PropsGroup label={$T("constructor.props.group.value")} wrapperClass="mt-3" contentClass="flex-row flex-wrap justify-around gap-2">
     {#each component.properties.axes as axe, index}
       {@const axesOptions = [
         { name: $T("constructor.props.joystick.pitch.axe"), info: "", regExp: /^[\p{L}0-9\-_"':{}]+$/u },
@@ -76,22 +77,22 @@
         />
       </div>
     {/each}
-  </div>
+  </PropsGroup>
 {/snippet}
 
 {#if forConstructor}
   <div>
-    <div class="relative flex flex-row items-start justify-center">
-      <div class="flex w-1/3 flex-col px-2">
+    <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
+      <PropsGroup label={$T("constructor.props.group.general")}>
         <CommonSnippets snippet="Access" {component} {onPropertyChange} />
         <CommonSnippets snippet="Variable" {VARIABLE_OPTIONS} {component} {onPropertyChange} />
         <CommonSnippets snippet="EventHandlerArgument" {component} {onPropertyChange} />
-      </div>
-      <div class="flex w-1/3 flex-col px-2">
+      </PropsGroup>
+      <PropsGroup label={$T("constructor.props.group.content")}>
         <CommonSnippets snippet="Label" {component} {onPropertyChange} />
         <CommonSnippets snippet="LabelAlign" initialValue={initialAlign} {component} {onPropertyChange} />
-      </div>
-      <div class="flex w-1/3 flex-col px-2">
+      </PropsGroup>
+      <PropsGroup label={$T("constructor.props.group.appearance")}>
         <CommonSnippets
           snippet="IconsLib"
           initialValue={{
@@ -104,23 +105,23 @@
           {onPropertyChange}
         />
         <CommonSnippets snippet="Colors" initialValue={{ color: initialColor }} {component} {onPropertyChange} />
-      </div>
+      </PropsGroup>
     </div>
     {@render JoystickAxesMinMax()}
   </div>
 {:else}
   <div>
-    <div class="relative mb-2 flex flex-row items-start justify-center">
-      <div class="flex w-1/3 flex-col px-2">
+    <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
+      <PropsGroup label={$T("constructor.props.group.general")}>
         <CommonSnippets snippet="Identificator" {component} {onPropertyChange} />
         <CommonSnippets snippet="Access" {component} {onPropertyChange} />
-      </div>
-      <div class="flex w-1/3 flex-col px-2">
+      </PropsGroup>
+      <PropsGroup label={$T("constructor.props.group.content")}>
         <CommonSnippets snippet="Label" {component} {onPropertyChange} />
         <CommonSnippets snippet="LabelClass" {component} {onPropertyChange} />
         <CommonSnippets snippet="Readonly" {component} {onPropertyChange} />
-      </div>
-      <div class="flex w-1/3 flex-col px-2">
+      </PropsGroup>
+      <PropsGroup label={$T("constructor.props.group.appearance")}>
         <CommonSnippets
           snippet="IconsLib"
           initialValue={{
@@ -133,7 +134,7 @@
           {onPropertyChange}
         />
         <CommonSnippets snippet="Colors" initialValue={{ color: initialColor }} {component} {onPropertyChange} />
-      </div>
+      </PropsGroup>
     </div>
     {@render JoystickAxesMinMax()}
   </div>

package/dist/Map/MapProps.svelte

@@ -5,6 +5,7 @@
   import { optionsStore } from "../options"
   import { getContext } from "svelte"
   import CommonSnippets from "../CommonSnippets.svelte"
+  import PropsGroup from "../PropsGroup.svelte"
   import { Switch, Select } from ".."
 
   const TRACK_LENGTH_OPTIONS = [100, 500, 1000, 5000, 10000, 50000].map((value) => ({ id: crypto.randomUUID(), value, name: String(value) }))
@@ -30,16 +31,16 @@
 </script>
 
 {#if forConstructor}
-  <div class="relative flex flex-row items-start justify-center">
-    <div class="flex w-1/3 flex-col px-2">
+  <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
+    <PropsGroup label={$T("constructor.props.group.general")}>
       <CommonSnippets snippet="Access" {component} {onPropertyChange} />
       <CommonSnippets snippet="Variable" {VARIABLE_OPTIONS} {component} {onPropertyChange} />
-    </div>
-    <div class="flex w-1/3 flex-col px-2">
+    </PropsGroup>
+    <PropsGroup label={$T("constructor.props.group.content")}>
       <CommonSnippets snippet="Label" {component} {onPropertyChange} />
       <CommonSnippets snippet="LabelAlign" initialValue={initialAlign} {component} {onPropertyChange} />
-    </div>
-    <div class="flex w-1/3 flex-col px-2">
+    </PropsGroup>
+    <PropsGroup label={$T("constructor.props.group.appearance")}>
       <CommonSnippets
         snippet="IconsLib"
         initialValue={{
@@ -66,20 +67,19 @@
           onUpdate={(option) => updateProperty("trackLength", (option as { value: number }).value, component, onPropertyChange)}
         />
       {/if}
-    </div>
+    </PropsGroup>
   </div>
 {:else}
-  <div class="relative mb-2 flex flex-row items-start justify-center">
-    <div class="flex w-1/3 flex-col px-2">
+  <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
+    <PropsGroup label={$T("constructor.props.group.general")}>
       <CommonSnippets snippet="Access" {component} {onPropertyChange} />
       <CommonSnippets snippet="Identificator" {component} {onPropertyChange} />
-    </div>
-    <div class="flex w-1/3 flex-col px-2">
+    </PropsGroup>
+    <PropsGroup label={$T("constructor.props.group.content")}>
       <CommonSnippets snippet="Label" {component} {onPropertyChange} />
       <CommonSnippets snippet="LabelClass" {component} {onPropertyChange} />
-    </div>
-
-    <div class="flex w-1/3 flex-col px-2">
+    </PropsGroup>
+    <PropsGroup label={$T("constructor.props.group.appearance")}>
       <CommonSnippets
         snippet="IconsLib"
         initialValue={{
@@ -106,6 +106,6 @@
           onUpdate={(option) => updateProperty("trackLength", (option as { value: number }).value, component, onPropertyChange)}
         />
       {/if}
-    </div>
+    </PropsGroup>
   </div>
 {/if}