poe-svelte-ui-lib 1.18.0 → 1.19.0

package/dist/Accordion/Accordion.svelte

@@ -20,8 +20,11 @@
 
 <div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class={twMerge(`w-full`, wrapperClass)} transition:slide={{ duration: 200 }}>
   <div class="overflow-hidden rounded-[14px] border border-(--hairline-color) bg-(--back-color)">
+    <!-- Заголовок темнее контента (--container-color), а не наоборот: так он читается
+         как отдельная кликабельная полоса, а раскрытое содержимое остаётся на чистом
+         светлом фоне (--back-color) — там часто лежат вложенные карточки/поля. -->
     <button
-      class="flex w-full cursor-pointer items-center justify-between gap-3 px-4 py-3 text-left transition-colors duration-150 hover:bg-(--container-color)"
+      class="flex w-full cursor-pointer items-center justify-between gap-3 bg-(--container-color) px-4 py-3 text-left transition-colors duration-150 hover:bg-(--border-color)"
       onclick={toggle}
     >
       <div class="flex min-w-0 flex-1 items-center gap-3">
@@ -50,7 +53,7 @@
 
     {#if isOpen}
       <div
-        class="grid w-full gap-3 border-t border-(--hairline-color) bg-(--container-color) p-4"
+        class="grid w-full gap-3 border-t border-(--hairline-color) bg-(--back-color) p-4"
         transition:slide={{ duration: 200 }}
         style="grid-template-columns: repeat({size.width || 1}, minmax(0, 1fr));
           grid-template-rows: repeat({size.height || 1}, {image ? 'minmax(6.5rem, auto)' : 'auto'});

package/dist/Button/Button.svelte

@@ -70,18 +70,6 @@
     }
   })
 
-  const svgSize = $derived(() => {
-    const widthClass = twMerge(
-      wrapperClass.split(" ").find((cls: string) => cls.startsWith("w-")),
-      componentClass.split(" ").find((cls: string) => cls.startsWith("w-")),
-    )
-    const heightClass = twMerge(
-      wrapperClass.split(" ").find((cls: string) => cls.startsWith("h-")),
-      componentClass.split(" ").find((cls: string) => cls.startsWith("h-")),
-    )
-    return `${widthClass} ${heightClass}`
-  })
-
   const handleClick = (event: Event) => {
     if (disabled || !onClick) return
     event?.stopPropagation()
@@ -134,7 +122,7 @@
     {#if content?.icon}
       <span
         class={`flex shrink-0 items-center justify-center overflow-visible
-          ${content.name?.trim() ? "h-[18px] w-[18px]" : `${svgSize()}`}
+          ${content.name?.trim() ? "h-[18px] w-[18px]" : "h-full w-full"}
           [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full`}
       >
         {#if typeof content?.icon === "string"}

package/dist/FileAttach/FileAttach.svelte

@@ -42,17 +42,21 @@
   }
 </script>
 
-<div class={twMerge(`flex flex-col items-center`, wrapperClass)}>
+<!-- Не входил в исходный design-handoff (пропущен вместе с остальными точками,
+     которые авторы документа не осматривали) — сейчас приведён к общей палитре:
+     радиус 10/высота 36 как у Input/Select, сегмент "Выбрать файл" залит акцентом
+     с текстом --on-accent (было --font-color по тёмно-синему — нечитаемо). -->
+<div class={twMerge(`flex flex-col items-center gap-1`, wrapperClass)}>
   {#if label.name}
-    <h5 class={`${label.class} w-full`}>{label.name}</h5>
+    <span class={twMerge(`w-full text-[12px] font-semibold text-(--muted-color)`, label.class)}>{label.name}</span>
   {/if}
 
   {#if type === "image"}
     <div class="relative">
       <button
-        class="flex items-center justify-center overflow-hidden {imageSize.form === 'circle' ? 'rounded-full' : 'rounded-2xl'} 
-        bg-(--back-color) shadow-sm transition duration-250
-        {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer hover:shadow-md'}"
+        class="flex items-center justify-center overflow-hidden {imageSize.form === 'circle' ? 'rounded-full' : 'rounded-2xl'}
+        border border-(--hairline-color) bg-(--container-color) transition-colors duration-150
+        {disabled ? 'cursor-not-allowed opacity-45' : 'cursor-pointer hover:bg-(--border-color)'}"
         style={`height: ${imageSize.height}; width: ${imageSize.width}`}
         onclick={triggerFileInput}
         {disabled}
@@ -67,7 +71,7 @@
             `}
           />
         {:else}
-          <span class="text-sm text-gray-500">Image</span>
+          <span class="text-[12px] font-medium text-(--faint-color)">Image</span>
         {/if}
       </button>
       <input id={ID} type="file" class="absolute -z-10 h-0 w-0 overflow-hidden opacity-0" {accept} {disabled} onchange={handleFileChange} />
@@ -77,19 +81,19 @@
       <input
         id={ID}
         type="file"
-        class="absolute left-0 z-1 h-8.5 w-full opacity-0 {disabled ? 'cursor-not-allowed' : 'cursor-pointer'}"
+        class="absolute left-0 z-1 h-9 w-full opacity-0 {disabled ? 'cursor-not-allowed' : 'cursor-pointer'}"
         {accept}
         {disabled}
         onchange={handleFileChange}
       />
       <div
-        class="flex w-full overflow-hidden rounded-2xl font-semibold shadow-sm transition duration-250 {disabled ? '' : 'hover:shadow-md'}
-             "
+        class="flex h-9 w-full overflow-hidden rounded-[10px] border border-(--border-color) text-[14px] transition-colors duration-150
+             {disabled ? 'opacity-45' : 'hover:border-(--faint-color)'}"
       >
-        <div class="flex w-1/3 items-center justify-center bg-(--blue-color) p-2 py-1 {disabled ? 'opacity-50' : ''}">
+        <div class="flex shrink-0 items-center justify-center bg-(--accent-color) px-3 font-semibold whitespace-nowrap text-(--on-accent)">
           {$T("constructor.props.file.select")}
         </div>
-        <div class="flex flex-1 items-center justify-start truncate bg-(--back-color) px-2 {disabled ? 'opacity-50' : ''}">
+        <div class="flex min-w-0 flex-1 items-center justify-start truncate bg-(--field-color) px-3 text-(--font-color)">
           <p class="truncate">{fileName || $T("constructor.props.file.notselected")}</p>
         </div>
       </div>

package/dist/Input/Input.svelte

@@ -239,7 +239,10 @@
     {/if}
   </div>
 
-  {#if !isValid && help.regExp}
-    <span class="text-[12px] text-(--red-color)">Неверный формат</span>
+  {#if help.regExp}
+    <!-- Место под ошибку зарезервировано всегда (высота фиксирована), чтобы её появление
+         не двигало соседние элементы — кнопку в одной строке с полем (как в восстановлении
+         пароля) или соседние поля формы. -->
+    <span class="block h-4 text-[12px] text-(--red-color)">{!isValid ? "Неверный формат" : ""}</span>
   {/if}
 </div>

package/dist/Modal.svelte

@@ -97,7 +97,7 @@
         </button>
       </div>
 
-      <div class={twMerge("flex h-full w-full flex-col overflow-auto p-5", mainClass)}>
+      <div class={twMerge("flex h-full w-full min-h-0 flex-col overflow-x-hidden overflow-y-auto p-5", mainClass)}>
         {@render main?.()}
       </div>
 

package/dist/Select/Select.svelte

@@ -10,6 +10,38 @@
 
   let isDropdownOpen = $state(false)
   let dropdownElement: HTMLDivElement
+  let portalElement: HTMLDivElement | undefined = $state()
+  let anchorRect: { top: number; bottom: number; left: number; width: number } | null = $state(null)
+
+  /* Список вариантов выносится в document.body (портал), чтобы его не обрезал
+     overflow-hidden/overflow-auto ближайшего скроллящегося предка (например,
+     панель свойств конструктора). Позиция считается от dropdownElement и
+     обновляется, пока список открыт, при скролле/резайзе где угодно на странице. */
+  function portal(node: HTMLElement) {
+    document.body.appendChild(node)
+    return {
+      destroy() {
+        node.remove()
+      },
+    }
+  }
+
+  function updateAnchorRect() {
+    if (!dropdownElement) return
+    const rect = dropdownElement.getBoundingClientRect()
+    anchorRect = { top: rect.top, bottom: rect.bottom, left: rect.left, width: rect.width }
+  }
+
+  $effect(() => {
+    if (!isDropdownOpen) return
+    updateAnchorRect()
+    window.addEventListener("scroll", updateAnchorRect, true)
+    window.addEventListener("resize", updateAnchorRect)
+    return () => {
+      window.removeEventListener("scroll", updateAnchorRect, true)
+      window.removeEventListener("resize", updateAnchorRect)
+    }
+  })
 
   let {
     id = crypto.randomUUID(),
@@ -41,7 +73,10 @@
   )
 
   const handleClickOutside = (event: MouseEvent) => {
-    if (dropdownElement && !dropdownElement.contains(event.target as Node)) isDropdownOpen = false
+    const target = event.target as Node
+    const insideAnchor = !!dropdownElement?.contains(target)
+    const insidePortal = !!portalElement?.contains(target)
+    if (!insideAnchor && !insidePortal) isDropdownOpen = false
   }
 
   onMount(() => {
@@ -135,7 +170,13 @@
       </button>
 
       {#if isDropdownOpen}
-        <div class="absolute top-full left-0 z-50 mt-1 w-full" transition:slide={{ duration: 150 }}>
+        <div
+          use:portal
+          bind:this={portalElement}
+          class="fixed z-[9999] mt-1"
+          style="top: {anchorRect?.bottom ?? 0}px; left: {anchorRect?.left ?? 0}px; width: {anchorRect?.width ?? 0}px;"
+          transition:slide={{ duration: 150 }}
+        >
           <div class={listBase} style="max-height: {listHeight};" role="listbox">
             {#each options as option (option.id)}
               <button
@@ -214,7 +255,13 @@
       />
 
       {#if isDropdownOpen}
-        <div class="absolute top-full left-0 z-50 mt-1 w-full select-none" transition:slide={{ duration: 150 }}>
+        <div
+          use:portal
+          bind:this={portalElement}
+          class="fixed z-[9999] mt-1 select-none"
+          style="top: {anchorRect?.bottom ?? 0}px; left: {anchorRect?.left ?? 0}px; width: {anchorRect?.width ?? 0}px;"
+          transition:slide={{ duration: 150 }}
+        >
           <div class={listBase} style="max-height: {listHeight};" role="listbox">
             {#each filteredOptions as option (option.id)}
               <button

package/dist/Slider/Slider.svelte

@@ -92,16 +92,19 @@
      подбирать под конкретную высоту трека, и он даёт разный результат в Chromium и
      Safari/WebKit — при равных высотах input и thumb смещения нет по определению,
      это работает одинаково везде. */
+  /* Бегунок: было border-(--hairline-color) (почти прозрачная линия) + мягкая тень —
+     на светлом фоне белый кружок буквально сливался с дорожкой. Рамка в 2px цветом
+     заливки даёт чёткий, "премиальный" контур вместо почти невидимой линии. */
   const THUMB = `w-full appearance-none bg-transparent h-[18px]
     [&::-webkit-slider-runnable-track]:h-[18px] [&::-webkit-slider-runnable-track]:bg-transparent
     [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:size-[18px]
     [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white
-    [&::-webkit-slider-thumb]:border [&::-webkit-slider-thumb]:border-(--hairline-color)
-    [&::-webkit-slider-thumb]:shadow-[0_1px_3px_rgb(16_24_40/0.22)]
+    [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-(--bg-color,var(--accent-color))
+    [&::-webkit-slider-thumb]:shadow-[0_1px_4px_rgb(16_24_40/0.35)]
     [&::-moz-range-track]:h-[18px] [&::-moz-range-track]:bg-transparent [&::-moz-range-track]:border-0
     [&::-moz-range-thumb]:size-[18px] [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-white
-    [&::-moz-range-thumb]:border [&::-moz-range-thumb]:border-(--hairline-color)
-    [&::-moz-range-thumb]:shadow-[0_1px_3px_rgb(16_24_40/0.22)]
+    [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-(--bg-color,var(--accent-color))
+    [&::-moz-range-thumb]:shadow-[0_1px_4px_rgb(16_24_40/0.35)]
     focus-visible:outline-none`
 
   /* Двойной слайдер: оба input на всю ширину трека с ОДИНАКОВЫМ min/max,
@@ -123,17 +126,19 @@
       id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
       class="relative flex h-8 flex-1 items-center {disabled ? 'cursor-not-allowed opacity-45' : ''}"
     >
-      <!-- Фон дорожки 4px -->
-      <div class="pointer-events-none absolute inset-x-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-(--container-color)"></div>
+      <!-- Фон дорожки 6px — --container-color здесь давал слишком слабый контраст
+           с фоном страницы (#f0f2f5 на белом), дорожка визуально пропадала;
+           --border-color заметно контрастнее и совпадает с рамкой счётчика ниже. -->
+      <div class="pointer-events-none absolute inset-x-0 top-1/2 h-1.5 -translate-y-1/2 rounded-full bg-(--border-color)"></div>
       <!-- Заливка -->
       {#if isRange}
         <div
-          class="pointer-events-none absolute top-1/2 h-1 -translate-y-1/2 rounded-full bg-(--bg-color,var(--accent-color))"
+          class="pointer-events-none absolute top-1/2 h-1.5 -translate-y-1/2 rounded-full bg-(--bg-color,var(--accent-color))"
           style="left: {pct(lowerValue)}%; width: {Math.max(0, pct(upperValue) - pct(lowerValue))}%;"
         ></div>
       {:else}
         <div
-          class="pointer-events-none absolute top-1/2 left-0 h-1 -translate-y-1/2 rounded-full bg-(--bg-color,var(--accent-color))"
+          class="pointer-events-none absolute top-1/2 left-0 h-1.5 -translate-y-1/2 rounded-full bg-(--bg-color,var(--accent-color))"
           style="width: {pct(singleValue)}%;"
         ></div>
       {/if}

package/dist/Table/Table.svelte

@@ -314,7 +314,11 @@
                   <div
                     id="rowDiv{i}-{j}"
                     class="relative grid min-h-7 w-full min-w-0 items-center gap-x-2 px-3 py-1 text-[13px] wrap-break-word
-              {column.align === 'center' ? 'justify-center text-center' : column.align === 'right' ? 'justify-end text-right tabular-nums' : 'justify-start text-left'}
+              {column.align === 'center'
+                ? 'justify-center justify-items-center text-center'
+                : column.align === 'right'
+                  ? 'justify-end justify-items-end text-right tabular-nums'
+                  : 'justify-start justify-items-start text-left'}
                {j !== 0 ? ' border-l ' : ''} {outline ? 'border-(--hairline-color)' : 'border-transparent'} {column.disableSelect ? 'select-none' : 'select-all'}"
                     style=" grid-template-columns: repeat({contentArray?.length}, minmax(0, 1fr));"
                   >

package/dist/Tabs/Tabs.svelte

@@ -30,55 +30,66 @@
 
 <div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class="h-full w-full">
   <div class="flex h-full w-full flex-col overflow-hidden rounded-[14px] border border-(--hairline-color) bg-(--back-color)">
-    <!-- Полоса вкладок -->
-    <div class={twMerge(`sticky top-0 z-40 flex h-fit items-center gap-6 overflow-x-auto border-b border-(--hairline-color) px-4`, wrapperClass)}>
-      {#each items as item, index}
-        <button
-          class={twMerge(
-            `tab relative flex min-w-fit shrink-0 items-center gap-2 border-0 bg-transparent py-3 text-[14px]
-             transition-colors duration-150 ${isCol && items.find((item) => item.icon) ? "h-20 flex-col justify-center" : ""}
-             ${
-               index === currentTabIndex
-                 ? "cursor-pointer font-semibold text-(--font-color) shadow-[inset_0_-2px_0_var(--accent-color)]"
-                 : item.disabled
-                   ? "cursor-not-allowed font-medium text-(--faint-color)"
-                   : "cursor-pointer font-medium text-(--muted-color) hover:text-(--font-color)"
-             }`,
-            item.class,
-          )}
-          disabled={item.disabled}
-          style="width: {item.class
-            ?.split(' ')
-            .find((cls: string) => cls.startsWith('w-'))
-            ?.replace('w-[', '')
-            .slice(0, -1)};"
-          onclick={() => {
-            currentTabIndex = index
-            if (item.onClick) item.onClick()
-          }}
-          aria-selected={index === currentTabIndex}
-          role="tab"
-        >
-          {#if item?.icon}
-            <span class="flex size-[18px] items-center justify-center overflow-visible [&_svg]:h-full [&_svg]:w-full">
-              {#if typeof item.icon === "string"}
-                {@html item.icon}
-              {:else}
-                {@const IconComponent = item.icon}
-                <IconComponent />
-              {/if}
-            </span>
-          {/if}
-          {#if item?.name}
-            <span class="whitespace-nowrap">{item.name}</span>
-          {/if}
-        </button>
-      {/each}
+    <!-- Полоса вкладок — outer оставлен «чистым» скролл-контейнером без justify-*:
+         justify-content на самом overflow-x-auto блоке при контенте чуть шире контейнера
+         даёт паразитный горизонтальный скролл на пару px даже когда прокручивать нечего
+         (классический баг центрирования flex-контейнера с overflow). Поэтому justify-*
+         из wrapperClass уходит на внутреннюю обёртку, а не на сам скролл-контейнер. -->
+    <div class="sticky top-0 z-40 flex h-fit items-center overflow-x-auto border-b border-(--hairline-color) px-4">
+      <div class={twMerge(`flex w-full items-center gap-6`, wrapperClass)}>
+        {#each items as item, index}
+          <button
+            class={twMerge(
+              `tab relative flex min-w-fit shrink-0 items-center justify-center gap-2 border-0 bg-transparent py-3 text-[14px]
+               transition-colors duration-150 ${isCol && items.find((item) => item.icon) ? "h-20 flex-col" : ""}
+               ${
+                 index === currentTabIndex
+                   ? "cursor-pointer font-semibold text-(--font-color) shadow-[inset_0_-2px_0_var(--accent-color)]"
+                   : item.disabled
+                     ? "cursor-not-allowed font-medium text-(--faint-color)"
+                     : "cursor-pointer font-medium text-(--muted-color) hover:text-(--font-color)"
+               }`,
+              item.class,
+            )}
+            disabled={item.disabled}
+            style="width: {item.class
+              ?.split(' ')
+              .find((cls: string) => cls.startsWith('w-'))
+              ?.replace('w-[', '')
+              .slice(0, -1)};"
+            onclick={() => {
+              currentTabIndex = index
+              if (item.onClick) item.onClick()
+            }}
+            aria-selected={index === currentTabIndex}
+            role="tab"
+          >
+            {#if item?.icon}
+              <span class="flex size-[18px] items-center justify-center overflow-visible [&_svg]:h-full [&_svg]:w-full">
+                {#if typeof item.icon === "string"}
+                  {@html item.icon}
+                {:else}
+                  {@const IconComponent = item.icon}
+                  <IconComponent />
+                {/if}
+              </span>
+            {/if}
+            {#if item?.name}
+              <span class="whitespace-nowrap">{item.name}</span>
+            {/if}
+          </button>
+        {/each}
+      </div>
     </div>
 
-    <!-- Контент вкладки -->
+    <!-- Контент вкладки — overflow-x-hidden явно рядом с overflow-y-auto: у некоторых
+         потребителей (например, кнопка отправки формы логина в DevCloud) есть элемент
+         с col-start-2 при единственной явной колонке — он намеренно живёт в неявно
+         создаваемой второй колонке грида. Без overflow-x-hidden спека CSS трактует это
+         как реальное горизонтальное переполнение (раз overflow-y уже не visible, ось X
+         тоже становится auto) и рисует паразитный горизонтальный скролл на пару px. -->
     <div
-      class="grid w-full flex-1 gap-3 overflow-y-auto bg-(--back-color) p-4"
+      class="grid w-full min-h-0 flex-1 gap-3 overflow-x-hidden overflow-y-auto bg-(--back-color) p-4"
       style="grid-template-columns: repeat({size.width || 1}, minmax(0, 1fr)); grid-template-rows: repeat({size.height || 1}, auto);"
     >
       {#if Components}

package/dist/Widget/Widget.svelte

@@ -116,12 +116,12 @@
     [&::-webkit-slider-runnable-track]:h-8 [&::-webkit-slider-runnable-track]:bg-transparent
     [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:size-[18px] [&::-webkit-slider-thumb]:mt-[7px]
     [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white
-    [&::-webkit-slider-thumb]:border [&::-webkit-slider-thumb]:border-(--hairline-color)
-    [&::-webkit-slider-thumb]:shadow-[0_1px_3px_rgb(16_24_40/0.22)]
+    [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-(--bg-color,var(--accent-color))
+    [&::-webkit-slider-thumb]:shadow-[0_1px_4px_rgb(16_24_40/0.35)]
     [&::-moz-range-track]:h-8 [&::-moz-range-track]:bg-transparent [&::-moz-range-track]:border-0
     [&::-moz-range-thumb]:size-[18px] [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-white
-    [&::-moz-range-thumb]:border [&::-moz-range-thumb]:border-(--hairline-color)
-    [&::-moz-range-thumb]:shadow-[0_1px_3px_rgb(16_24_40/0.22)]
+    [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-(--bg-color,var(--accent-color))
+    [&::-moz-range-thumb]:shadow-[0_1px_4px_rgb(16_24_40/0.35)]
     focus-visible:outline-none`
 </script>
 
@@ -272,9 +272,9 @@
           >
 
           <div class="relative flex h-8 min-w-0 flex-1 items-center">
-            <div class="pointer-events-none absolute inset-x-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-(--back-color)"></div>
+            <div class="pointer-events-none absolute inset-x-0 top-1/2 h-1.5 -translate-y-1/2 rounded-full bg-(--back-color)"></div>
             <div
-              class="pointer-events-none absolute top-1/2 left-0 h-1 -translate-y-1/2 rounded-full bg-(--bg-color,var(--accent-color))"
+              class="pointer-events-none absolute top-1/2 left-0 h-1.5 -translate-y-1/2 rounded-full bg-(--bg-color,var(--accent-color))"
               style="width: {pct()}%;"
             ></div>
             <input

package/package.json

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