poe-svelte-ui-lib 1.17.6 → 1.19.0

package/dist/Accordion/Accordion.svelte

@@ -1,3 +1,5 @@
+<!-- $lib/Accordion/Accordion.svelte — заголовок больше не увеличивается при раскрытии,
+     тень на hover заменена фоном, радиус 14. Логика toggle не тронута. -->
 <script lang="ts">
   import { slide } from "svelte/transition"
   import type { IAccordionProps } from "../types"
@@ -16,64 +18,45 @@
   const toggle = () => (isOpen = !isOpen)
 </script>
 
-<div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class={twMerge(`w-full p-1`, wrapperClass)} transition:slide={{ duration: 250 }}>
-  <div class="shadow-(--border-shadow-color) hover:shadow-(--focus-shadow-color) transition-shadow duration-250 rounded-xl bg-(--container-color)">
-    <button class="flex w-full cursor-pointer items-center justify-between p-4 py-3.5" onclick={toggle}>
-      <div class="flex w-full items-center">
-        <span class={`flex h-7 w-7 shrink-0 items-center justify-center overflow-visible [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full`}>
-          {#if label?.icon}
+<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 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">
+        {#if label?.icon}
+          <span class="flex h-[18px] w-[18px] shrink-0 items-center justify-center text-(--muted-color) [&_svg]:h-full [&_svg]:w-full">
             {#if typeof label?.icon === "string"}
               {@html label.icon}
             {:else}
               {@const IconComponent = label?.icon}
               <IconComponent />
             {/if}
-          {/if}
-        </span>
-
-        <div
-          class="{twMerge(
-            'flex w-full justify-start ',
-            label.class?.split(' ').find((cls: string) => cls.startsWith('justify-')),
-          )} "
-        >
-          <span
-            class="{twMerge(
-              `m-0 origin-top-left cursor-pointer justify-end px-3 font-semibold transition duration-200 ${isOpen ? 'scale-110' : ''}`,
-              label.class,
-            )} text-lg"
-          >
-            {label?.name}
           </span>
-        </div>
+        {/if}
+        <span class={twMerge(`min-w-0 truncate text-[14px] font-semibold`, label.class)}>{label?.name}</span>
       </div>
 
-      <div class="w-10 pl-4">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-[1.1rem] w-[1.1rem] transition-transform duration-250"
-          style="transform: rotate({isOpen ? 180 : 0}deg)"
-          viewBox="0 0 24 24"
-        >
-          <path
-            fill="none"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M18 12.5s-4.419 6-6 6s-6-6-6-6m12-7s-4.419 6-6 6s-6-6-6-6"
-            color="currentColor"
-          />
-        </svg>
-      </div>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-[14px] w-[14px] shrink-0 text-(--faint-color) transition-transform duration-200"
+        style="transform: rotate({isOpen ? 180 : 0}deg)"
+        viewBox="0 0 24 24"
+      >
+        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 9l6 6 6-6" />
+      </svg>
     </button>
 
     {#if isOpen}
       <div
-        class="grid w-full p-4 sm:p-3 {image ? 'gap-x-2' : 'gap-2'} inset-shadow-[0_10px_10px_-15px_rgb(0_0_0_/0.5)]"
-        transition:slide={{ duration: 250 }}
-        style="grid-template-columns: repeat({size.width || 10}, minmax(0, 1fr)); 
-          grid-template-rows: repeat({size.height || 2}, {image ? 'minmax(6.5rem, auto)' : 'auto'});
+        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'});
           {image ? `background-image: url(${image}); background-size: cover; background-position: center;` : ''}"
       >
         {@render children?.()}

package/dist/Button/Button.svelte

@@ -1,9 +1,17 @@
-<!-- $lib/ElementsUI/Button.svelte -->
+<!-- $lib/Button/Button.svelte — шаг 3 плана.
+     API не изменён: id, wrapperClass, componentClass, disabled, content, keyBind, onClick.
+     Что изменилось внутри:
+       • роль определяется значением bg-* (намерение), а не фактом его наличия;
+       • убрано автоподчёркивание текста — кнопка больше не выглядит ссылкой;
+       • единый радиус 10px (иконка без подписи — круг), высота 36px, кегль 14/600;
+       • кольцо фокуса вместо размытой тени;
+       • disabled через токены, а не opacity: 0.5;
+       • иконка встала в поток (flex + gap) вместо absolute left-3. -->
 <script lang="ts">
   import { onMount } from "svelte"
   import type { IButtonProps } from "../types"
-  import { fly } from "svelte/transition"
   import { twMerge } from "tailwind-merge"
+  import Tooltip from "../Tooltip.svelte"
 
   let {
     id = crypto.randomUUID(),
@@ -21,69 +29,66 @@
 
   let showInfo = $state(false)
 
-  let tooltipConfig = $derived({
-    top: {
-      pos: "bottom-full left-1/2 mb-2",
-      tr: "translateX(-50%)",
-      arr: "top-full left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-45",
-      off: "y:-15",
-    },
-    bottom: {
-      pos: "top-full left-1/2 mt-2",
-      tr: "translateX(-50%)",
-      arr: "bottom-full left-1/2 -translate-x-1/2 translate-y-1/2 rotate-45",
-      off: "y:15",
-    },
-    left: {
-      pos: "top-1/2 right-full mr-2",
-      tr: "translateY(-50%)",
-      arr: "top-1/2 -right-2 -translate-x-1/2 -translate-y-1/2 rotate-45",
-      off: "x:15",
-    },
-    right: {
-      pos: "top-1/2 left-full ml-2",
-      tr: "translateY(-50%)",
-      arr: "top-1/2 -left-2 translate-x-1/2 -translate-y-1/2 rotate-45 ",
-      off: "x:-15",
-    },
+  /* ─── Роль кнопки по последнему классу bg-* ─────────────────────────
+     bg-blue / bg-green / bg-cyan / bg-purple / bg-orange / bg-yellow → primary     (заливка + белый текст)
+     bg-red / bg-pink                                                → destructive
+     bg-max / bg-gray / bg-*-soft                                    → secondary   (поверхность + контур)
+     bg-transparent / без bg-*                                       → plain       (текст акцентом) */
+  const SURFACE_BG = ["bg-max", "bg-gray"]
+  const DANGER_BG = ["bg-red", "bg-pink"]
+
+  const role = $derived.by(() => {
+    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"
+    return "primary"
+  })
+
+  const isIconOnly = $derived(!!content?.icon && !content.name?.trim())
+
+  /* bg-(--bg-color) намеренно не входит в roleClass: он приклеивается к готовому
+     className вне twMerge (см. разметку ниже) — иначе twMerge видит его и явный
+     bg-* из componentClass (bg-red, bg-max…) как конфликтующие утилиты одной
+     группы и вырезает один из них, из-за чего заливка кнопки пропадает. */
+  const roleBg = $derived.by(() => {
+    if (disabled) return "bg-(--gray-color)"
+    if (role === "plain") return "bg-transparent"
+    return "bg-(--bg-color)"
   })
 
-  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 roleClass = $derived.by(() => {
+    if (disabled) return "text-(--faint-color) border border-transparent cursor-not-allowed"
+    switch (role) {
+      case "primary":
+      case "destructive":
+        return "text-(--on-accent) border border-transparent shadow-(--elevation-1) hover:brightness-90 dark:hover:brightness-115"
+      case "secondary":
+        return "text-(--font-color) border border-(--border-color) hover:bg-(--container-color)"
+      default:
+        return "text-(--accent-color) border border-transparent hover:bg-(--accent-soft)"
+    }
   })
 
-  /* Обработчик клика */
   const handleClick = (event: Event) => {
     if (disabled || !onClick) return
     event?.stopPropagation()
     onClick()
   }
 
-  /* Обработчик горячих клавиш */
   const handleKeyDown = (event: KeyboardEvent) => {
     if (disabled || !keyBind.key || !onClick) return
-
     const isKeyMatch = event.key === keyBind.key
     const isCtrlMatch = keyBind.ctrlKey === undefined || event.ctrlKey === keyBind.ctrlKey
     const isShiftMatch = keyBind.shiftKey === undefined || event.shiftKey === keyBind.shiftKey
     const isAltMatch = keyBind.altKey === undefined || event.altKey === keyBind.altKey
     const isMetaMatch = keyBind.metaKey === undefined || event.metaKey === keyBind.metaKey
-
     if (isKeyMatch && isCtrlMatch && isShiftMatch && isAltMatch && isMetaMatch) {
       event.preventDefault()
       onClick()
     }
   }
 
-  /* Подписка на события клавиатуры */
   onMount(() => {
     if (keyBind) window.addEventListener("keydown", handleKeyDown)
     return () => {
@@ -92,20 +97,21 @@
   })
 </script>
 
-<div class={twMerge(`relative flex w-full flex-col items-center `, wrapperClass)}>
+<div class={twMerge(`relative flex w-full flex-col items-center`, wrapperClass)}>
   <button
-    id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
-    class="{twMerge(
-      `relative inline-block items-center font-semibold w-full transition duration-200 select-none
-      ${componentClass.split(' ').find((cl: string) => cl === 'bg-transparent') || !componentClass.split(' ').find((cl: string) => cl.startsWith('bg-')) ? 'underline' : 'border border-(--bg-color) shadow-sm hover:shadow-md'}
-      ${content.icon && !content.name?.trim() ? 'rounded-full' : 'rounded-2xl py-1 px-2'}
-      ${disabled ? 'cursor-not-allowed opacity-50 hover:shadow-none' : 'cursor-pointer active:scale-97'} `,
+    {id}
+    class={`${twMerge(
+      `relative inline-flex w-full items-center justify-center gap-2 leading-none font-semibold text-[14px] select-none
+       transition-[background-color,filter,box-shadow] duration-150
+       focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--accent-color)
+       ${isIconOnly ? "aspect-square rounded-full p-0" : "min-h-9 rounded-[10px] px-4 py-2"}
+       ${disabled ? "" : "cursor-pointer active:scale-[0.97]"}`,
+      roleClass,
       componentClass,
-    )} bg-(--bg-color)"
-    style={!content.name?.trim() && content.name && content.icon ? `padding-inline: ${content.name.length / 2}rem` : ""}
+    )} ${roleBg}`}
     onclick={(event) => handleClick(event)}
     {disabled}
-    aria-label={content.name}
+    aria-label={content.name || undefined}
     onmouseenter={() => {
       if (content.info?.text) showInfo = true
     }}
@@ -113,43 +119,30 @@
       if (content.info?.text) showInfo = false
     }}
   >
-    <div class="flex flex-row items-center justify-center gap-2">
-      {#if content?.icon}
-        <span
-          class={` ${content.name?.trim() ? "absolute left-3" : ""} ${typeof content?.icon == "string" ? "p-0.5" : ""} flex items-center justify-center overflow-visible 
-            ${content.name?.trim() ? "h-8 w-8" : `${svgSize()}`} [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full`}
-        >
-          {#if typeof content?.icon === "string"}
-            {@html content.icon}
-          {:else}
-            {@const IconComponent = content?.icon}
-            <IconComponent />
-          {/if}
-        </span>
-      {/if}
+    {#if content?.icon}
+      <span
+        class={`flex shrink-0 items-center justify-center overflow-visible
+          ${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"}
+          {@html content.icon}
+        {:else}
+          {@const IconComponent = content?.icon}
+          <IconComponent />
+        {/if}
+      </span>
+    {/if}
 
-      {#if content.name?.trim()}
-        <div class="flex-1 truncate">
-          {content.name}
-          {#if keyBind.key && keyBind.showHint}
-            <div class="text-xs opacity-70">
-              ({keyBind.ctrlKey ? "Ctrl+" : ""}{keyBind.shiftKey ? "Shift+" : ""}{keyBind.altKey ? "Alt+" : ""}{keyBind.key})
-            </div>
-          {/if}
-        </div>
+    {#if content.name?.trim()}
+      <span class="truncate">{content.name}</span>
+      {#if keyBind.key && keyBind.showHint}
+        <span class="ml-1 text-[11px] font-medium tabular-nums opacity-60">
+          {keyBind.ctrlKey ? "Ctrl+" : ""}{keyBind.shiftKey ? "Shift+" : ""}{keyBind.altKey ? "Alt+" : ""}{keyBind.key}
+        </span>
       {/if}
-    </div>
+    {/if}
   </button>
 
-  {#if showInfo && content.info?.side && tooltipConfig[content.info?.side]}
-    {@const config = tooltipConfig[content.info?.side]}
-    <div
-      transition:fly={{ [config.off.split(":")[0]]: parseInt(config.off.split(":")[1]), duration: 300 }}
-      class={`absolute z-50 w-max max-w-xs rounded-md bg-(--container-color) px-3 py-1 text-sm shadow-lg ${config.pos}`}
-      style={`transform: ${config.tr};`}
-    >
-      {content.info?.text}
-      <div class={`absolute ${config.arr} h-2 w-2 transform bg-(--container-color)`}></div>
-    </div>
-  {/if}
+  <Tooltip show={showInfo} text={content.info?.text ?? ""} side={content.info?.side ?? "top"} />
 </div>

package/dist/ComponentExample.svelte

@@ -2,6 +2,7 @@
   import { Select, Switch, T, type IOption } from "./"
   import type { Snippet } from "svelte"
   import { fade } from "svelte/transition"
+  import CopiedChip from "./CopiedChip.svelte"
 
   let {
     component,
@@ -65,14 +66,7 @@
                 aria-label="Копировать текст"
               >
                 <div class="size-6 text-sm [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full">
-                  {#if isCopied}
-                    <div
-                      class="right-1..5 absolute top-1/2 -translate-y-1/2 transform rounded-md bg-(--green-color) px-1.5 py-1 shadow-lg"
-                      transition:fade={{ duration: 200 }}
-                    >
-                      ✓
-                    </div>
-                  {:else}
+                  {#if !isCopied}
                     <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                       <g fill="none" stroke="currentColor" stroke-width="1.5">
                         <path
@@ -82,6 +76,7 @@
                       </g>
                     </svg>
                   {/if}
+                  <CopiedChip show={isCopied} class="right-1.5 top-1/2 -translate-y-1/2" />
                 </div>
               </button>
               <pre class="overflow-x-auto">{codeText}</pre>

package/dist/CopiedChip.svelte

@@ -0,0 +1,20 @@
+<!-- $lib/CopiedChip.svelte — единая всплывающая метка "Скопировано" после клика
+     на кнопку копирования. Раньше в каждом месте (Input, Table, Map,
+     ComponentExample) была своя версия: где-то текст, где-то просто "✓",
+     разные цвета (--green-color вместо --green-soft) и радиусы, а в
+     ComponentExample — опечатка в классе позиционирования (right-1..5,
+     невалидный Tailwind-класс, физически ничего не позиционировал). -->
+<script lang="ts">
+  import { fade } from "svelte/transition"
+
+  let { show = false, class: className = "" }: { show?: boolean; class?: string } = $props()
+</script>
+
+{#if show}
+  <span
+    class="{className} absolute flex items-center gap-1 rounded-lg bg-(--green-soft) px-2 py-1 text-[11px] font-bold whitespace-nowrap text-(--green-color)"
+    transition:fade={{ duration: 150 }}
+  >
+    Скопировано
+  </span>
+{/if}

package/dist/CopiedChip.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    show?: boolean;
+    class?: string;
+};
+declare const CopiedChip: import("svelte").Component<$$ComponentProps, {}, "">;
+type CopiedChip = ReturnType<typeof CopiedChip>;
+export default CopiedChip;

package/dist/Divider/Divider.svelte

@@ -1,15 +1,19 @@
-<!-- $lib/ElementsUI/Divider.svelte -->
+<!-- $lib/Divider/Divider.svelte — волосяная линия вместо скруглённой полосы 2px. -->
 <script lang="ts">
   import { twMerge } from "tailwind-merge"
   import type { IDividerProps } from "../types"
 
-  let { id = crypto.randomUUID(), wrapperClass = "", type = "line", width = 2, color = "bg-max", anchor = "center" }: IDividerProps = $props()
+  let { id = crypto.randomUUID(), wrapperClass = "", type = "line", width = 1, color = "", anchor = "center" }: IDividerProps = $props()
 
   const anchorClass = { top: "justify-start", center: "justify-center", bottom: "justify-end" } as const
 </script>
 
 <div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class={twMerge(`flex h-full w-full flex-col ${anchorClass[anchor]}`, wrapperClass)}>
   {#if type === "line"}
-    <div class="{twMerge('w-full rounded-full', color)} bg-(--bg-color)" style="height: {width}px;"></div>
+    <!-- Без 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>
   {/if}
 </div>

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>