poe-svelte-ui-lib 1.20.3 → 1.20.5

package/dist/Button/Button.svelte

@@ -97,7 +97,7 @@
   })
 </script>
 
-<div class={twMerge(`relative flex w-full flex-col items-center gap-1`, wrapperClass)}>
+<div class={twMerge(`relative flex w-full flex-col items-center`, wrapperClass)}>
   <button
     {id}
     class={`${twMerge(
@@ -145,9 +145,4 @@
   </button>
 
   <Tooltip show={showInfo} text={content.info?.text ?? ""} side={content.info?.side ?? "top"} />
-
-  <!-- Такая же зарезервированная строка, как у Input/Select (h-4, всегда пустая — у кнопки
-       нет валидации), чтобы высота совпадала при совместном размещении в одной строке
-       (items-end) с полем ввода или селектом. -->
-  <span class="block h-4" aria-hidden="true"></span>
 </div>

package/dist/FileAttach/FileAttach.svelte

@@ -100,9 +100,4 @@
       </div>
     </label>
   {/if}
-
-  <!-- Такая же зарезервированная строка, как у Input/Select/Button (h-4, всегда пустая —
-       у FileAttach нет валидации), чтобы высота совпадала при совместном размещении в одной
-       строке (items-end) с полем ввода, селектом или кнопкой. -->
-  <span class="block h-4" aria-hidden="true"></span>
 </div>

package/dist/Input/Input.svelte

@@ -239,9 +239,11 @@
     {/if}
   </div>
 
-  <!-- Место под ошибку зарезервировано всегда (высота фиксирована, не только когда задан
-       help.regExp), чтобы Input сохранял одну и ту же высоту во всех случаях — иначе он не
-       совпадает по высоте с Select в одной строке (items-end), когда у одного поля есть
-       валидация, а у другого нет. -->
-  <span class="block h-4 text-[12px] text-(--red-color)">{help.regExp && !isValid ? "Неверный формат" : ""}</span>
+  {#if help.regExp && !isValid}
+    <!-- Абсолютное позиционирование — сообщение об ошибке не должно занимать место в потоке
+       и сдвигать соседние поля/кнопки в общей строке; было: зарезервированная строка h-4
+       всегда в потоке — давала лишний зазор везде, где ошибке взяться неоткуда (например
+       вертикальный список кнопок быстрых команд в Отладке). -->
+    <span class="absolute top-full left-0 mt-1 text-[12px] text-(--red-color)">Неверный формат</span>
+  {/if}
 </div>

package/dist/Select/Select.svelte

@@ -288,8 +288,4 @@
       {/if}
     {/if}
   </div>
-
-  <!-- Такая же зарезервированная строка, как у Input (h-4, всегда пустая — у Select нет
-       валидации), чтобы высота совпадала при совместном размещении в одной строке (items-end). -->
-  <span class="block h-4 text-[12px]"></span>
 </div>

package/dist/Select/SelectProps.svelte

@@ -7,6 +7,7 @@
   import ButtonAdd from "../libIcons/ButtonAdd.svelte"
   import { optionsStore } from "../options.js"
   import CommonSnippets from "../CommonSnippets.svelte"
+  import { twMerge } from "tailwind-merge"
 
   const {
     component,
@@ -53,6 +54,11 @@
       (a.value as string).includes(component.properties.label?.class?.split(" ").find((cls: string) => cls.startsWith("text-"))),
     ),
   )
+  const initialContentAlign = $derived(
+    $optionsStore.TEXT_ALIGN_OPTIONS.slice(0, -1).find((a) =>
+      (a.value as string).includes(component.properties.componentClass?.split(" ").find((cls: string) => cls.startsWith("text-")) ?? "text-left"),
+    ),
+  )
 
   /* Argument пуст — поле ниже лишь визуально показывает "ModCfg", реальное значение нужно проставить в состояние */
   $effect(() => {
@@ -70,6 +76,22 @@
   />
 {/snippet}
 
+{#snippet SelectContentAlign()}
+  <UI.Select
+    label={{ name: $T("constructor.props.align.content") }}
+    type="buttons"
+    value={initialContentAlign}
+    options={$optionsStore.TEXT_ALIGN_OPTIONS.slice(0, -1)}
+    onUpdate={(option) =>
+      updateProperty(
+        "componentClass",
+        twMerge(component.properties.componentClass, (option as UI.IOption<string>).value),
+        component,
+        onPropertyChange,
+      )}
+  />
+{/snippet}
+
 {#snippet SelectType()}
   <UI.Select
     label={{ name: $T("constructor.props.type") }}
@@ -262,6 +284,7 @@
     <div class="flex w-1/3 flex-col px-2">
       <CommonSnippets snippet="Label" {component} {onPropertyChange} />
       <CommonSnippets snippet="LabelAlign" initialValue={initialAlign} {component} {onPropertyChange} />
+      {@render SelectContentAlign()}
       {@render SelectSettings()}
     </div>
   </div>
@@ -276,6 +299,7 @@
     <div class="flex w-1/3 flex-col px-2">
       <CommonSnippets snippet="Label" {component} {onPropertyChange} />
       <CommonSnippets snippet="LabelClass" {component} {onPropertyChange} />
+      {@render SelectContentAlign()}
       <CommonSnippets snippet="Disabled" {component} {onPropertyChange} />
       <CommonSnippets snippet="BitModeInfo" {component} {onPropertyChange} />
     </div>

package/dist/Switch/Switch.svelte

@@ -91,10 +91,13 @@
                 disabled={option.disabled}
                 onchange={() => handleToggle(index)}
               />
-              <!-- Дорожка: акцент во включённом состоянии, нейтральная серая в выключенном -->
+              <!-- Дорожка: акцент во включённом состоянии, нейтральная серая в выключенном.
+                   Фолбэк var(--accent-color) — большинство вызовов Switch не передают
+                   wrapperClass с ролью цвета (bg-blue и т.п.), без фолбэка --bg-color
+                   остаётся не задан и дорожка становится невидимой при включении. -->
               <span
                 class="relative flex items-center rounded-full transition-colors duration-200
-                  {checkedOptions[index] ? 'bg-(--bg-color)' : 'bg-(--border-color)'}
+                  {checkedOptions[index] ? 'bg-(--bg-color,var(--accent-color))' : 'bg-(--border-color)'}
                   {option.disabled ? 'cursor-not-allowed opacity-45' : 'cursor-pointer'}"
                 style="{type === 'horizontal' ? 'width' : 'height'}: {`calc(${height} * 1.7)`}; {type === 'horizontal'
                   ? 'height'
@@ -144,7 +147,7 @@
       class="
         relative size-5 shrink-0 cursor-pointer appearance-none rounded-[6px] border border-(--border-color)
         bg-(--field-color) transition-colors duration-150 after:origin-center after:opacity-0
-        checked:border-(--bg-color) checked:bg-(--bg-color)
+        checked:border-(--bg-color,var(--accent-color)) checked:bg-(--bg-color,var(--accent-color))
         checked:after:absolute checked:after:top-[1px] checked:after:left-[6px]
         checked:after:h-[10px] checked:after:w-[5px] checked:after:rotate-45
         checked:after:border-2 checked:after:border-t-0 checked:after:border-l-0

package/dist/Switch/SwitchProps.svelte

@@ -22,6 +22,11 @@
   let initialColor = $optionsStore.COLOR_OPTIONS.find((c) =>
     (c.value as string).includes(component.properties.options[0].class.split(" ").find((cls: string) => cls.startsWith("bg-"))),
   )
+  const initialAlign = $derived(
+    $optionsStore.TEXT_ALIGN_OPTIONS.find((a) =>
+      (a.value as string).includes(component.properties.label?.class?.split(" ").find((cls: string) => cls.startsWith("text-"))),
+    ),
+  )
 </script>
 
 {#snippet SwitchType()}
@@ -201,6 +206,7 @@
 
     <div class="flex w-1/3 flex-col px-2">
       <CommonSnippets snippet="Label" {component} {onPropertyChange} />
+      <CommonSnippets snippet="LabelAlign" initialValue={initialAlign} {component} {onPropertyChange} />
       {#if !component.properties.bitMode}
         <CommonSnippets
           snippet="Colors"
@@ -251,6 +257,7 @@
     </div>
     <div class="flex w-1/3 flex-col px-2">
       <CommonSnippets snippet="Label" {component} {onPropertyChange} />
+      <CommonSnippets snippet="LabelAlign" initialValue={initialAlign} {component} {onPropertyChange} />
       {@render SwitchType()}
       {#if !component.properties.bitMode}
         {@render SwitchCaptions()}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.20.3",
+  "version": "1.20.5",
   "license": "MIT",
   "type": "module",
   "scripts": {