poe-svelte-ui-lib 1.3.3 → 1.3.4

package/dist/Accordion/Accordion.svelte

@@ -20,8 +20,8 @@
 <div
   id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
   class={twMerge(
-    `${outline ? 'border-none' : 'rounded-xl hover:shadow-md'} w-full
-    border border-(--border-color) bg-(--container-color) p-0 transition-shadow duration-250`,
+    `${outline ? 'border-none' : 'rounded-xl shadow-sm hover:shadow-md'} w-full
+     bg-(--container-color) p-0 transition-shadow duration-250`,
     wrapperClass,
   )}
   transition:slide={{ duration: 250 }}
@@ -45,7 +45,11 @@
         {/if}
       </span>
 
-      <span class="{twMerge('m-0 w-full cursor-pointer px-3 text-left font-semibold', label.class)} text-lg">
+      <span
+        class="{twMerge('m-0 w-full cursor-pointer px-3 text-left font-semibold', label.class)} text-lg {isOpen
+          ? 'text-blue-500 dark:text-blue-400'
+          : ''}"
+      >
         {label?.name}
       </span>
     </div>

package/dist/Button/Button.svelte

@@ -69,10 +69,10 @@
   <button
     id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
     class="{twMerge(
-      `relative m-0 inline-block w-full items-center rounded-2xl 
-        px-2 py-1 font-semibold  transition duration-200 select-none
+      `relative m-0 inline-block w-full items-center rounded-2xl px-2
+        py-1 font-semibold shadow-sm transition duration-200 select-none 
         ${content.icon && !content.name ? 'bg-transparent p-0' : 'bg-blue border border-(--bg-color) '}
-        ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer  active:scale-97'} `,
+        ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer  hover:shadow-md active:scale-97'} `,
       componentClass,
     )} bg-(--bg-color)"
     onclick={handleClick}

package/dist/ColorPicker/ColorPicker.svelte

@@ -140,7 +140,7 @@
     <div class="flex w-full flex-col gap-2">
       <!-- Выбор цвета -->
       <div
-        class="hue-slider relative h-7 w-full cursor-pointer overflow-hidden rounded-full shadow-md"
+        class="hue-slider relative h-7 w-full cursor-pointer overflow-hidden rounded-full shadow-sm transition duration-200 hover:shadow-md"
         role="slider"
         aria-valuenow={null}
         tabindex={null}
@@ -163,7 +163,9 @@
 
       <!-- Яркость цвета -->
       <div
-        class="brightness-slider relative h-4 w-full cursor-pointer overflow-hidden rounded-full {mode === 'hsv' ? 'shadow-md' : ''}"
+        class="brightness-slider relative h-4 w-full cursor-pointer overflow-hidden rounded-full {mode === 'hsv'
+          ? 'shadow-sm transition duration-200 hover:shadow-md'
+          : ''}"
         role="slider"
         aria-valuenow={null}
         tabindex={null}
@@ -184,7 +186,7 @@
 
       <!-- Яркость белого цвета -->
       <div
-        class="white-slider relative mt-4 h-4 w-full cursor-pointer overflow-hidden rounded-full shadow-sm"
+        class="white-slider relative mt-4 h-4 w-full cursor-pointer overflow-hidden rounded-full shadow-sm transition duration-200 hover:shadow-md"
         role="slider"
         aria-valuenow={null}
         tabindex={null}
@@ -204,7 +206,7 @@
 
     <div class="flex w-25 flex-col items-center">
       <div
-        class={`flex size-15 flex-col justify-center gap-1 rounded-full px-2 font-mono text-sm shadow-md select-none ${textColor()}`}
+        class={`flex size-15 flex-col justify-center gap-1 rounded-full px-2 font-mono text-sm shadow-sm transition duration-200 select-none ${textColor()}`}
         style={`background: rgb(${previewBaseColor().join(',')})`}
       ></div>
       <div class="w-full text-center font-semibold">{hex()}</div>

package/dist/FileAttach/FileAttach.svelte

@@ -51,8 +51,8 @@
     <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 hover:shadow-md
-        {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}"
+        bg-(--back-color) shadow-sm transition duration-250
+        {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer hover:shadow-md'}"
         style={`height: ${imageSize.height}; width: ${imageSize.width}`}
         onclick={triggerFileInput}
         {disabled}
@@ -83,14 +83,14 @@
         onchange={handleFileChange}
       />
       <div
-        class="flex h-8.5 w-full overflow-hidden rounded-2xl font-semibold shadow-sm transition duration-250 hover:shadow-md
+        class="flex w-full overflow-hidden rounded-2xl font-semibold shadow-sm transition duration-250 {disabled ? '' : 'hover:shadow-md'}
              "
       >
-        <div class="flex w-1/3 items-center justify-center bg-(--blue-color) {disabled ? 'opacity-50' : ''}">
+        <div class="flex w-1/3 items-center justify-center bg-(--blue-color) p-2 py-1 {disabled ? 'opacity-50' : ''}">
           {$t('constructor.props.file.select')}
         </div>
-        <div class="flex w-2/3 items-center justify-start bg-(--back-color) px-2 {disabled ? 'opacity-50' : ''}">
-          {fileName || $t('constructor.props.file.notselected')}
+        <div class="flex flex-1 items-center justify-start truncate bg-(--back-color) px-2 {disabled ? 'opacity-50' : ''}">
+          <p class="truncate">{fileName || $t('constructor.props.file.notselected')}</p>
         </div>
       </div>
     </label>

package/dist/Graph/Graph.svelte

@@ -225,7 +225,7 @@
 
   <div class="flex w-full flex-row gap-4">
     <!-- График -->
-    <div bind:this={container} class="h-64 grow overflow-hidden rounded-md border border-gray-200">
+    <div bind:this={container} class="h-64 grow overflow-hidden rounded-2xl border border-gray-200 shadow-sm">
       <canvas class="h-full w-full bg-(--back-color)" bind:this={canvas}></canvas>
     </div>
 

package/dist/Input/Input.svelte

@@ -64,8 +64,8 @@
       <input
         bind:value
         class={twMerge(
-          `w-full rounded-2xl border px-4 py-1 text-center transition-all duration-300 outline-none focus:border-blue-400
-              [&::-webkit-inner-spin-button]:hidden [&::-webkit-outer-spin-button]:hidden
+          `w-full rounded-2xl border px-4 py-1 text-center shadow-sm transition duration-200
+              outline-none focus:border-blue-400 [&::-webkit-inner-spin-button]:hidden [&::-webkit-outer-spin-button]:hidden
               ${isValid ? 'border-(--border-color)' : 'border-red-400 shadow-[0_0_6px_var(--red-color)] focus:border-red-400'}
               ${disabled ? 'opacity-50' : 'hover:shadow-md'} 
               ${readonly ? '' : 'hover:shadow-md'}
@@ -90,7 +90,8 @@
       <textarea
         bind:value
         class={twMerge(
-          `h-full w-full resize-y rounded-2xl border border-(--border-color) px-2 py-1 text-center font-mono outline-none focus:border-blue-400
+          `h-full w-full resize-y rounded-2xl border border-(--border-color) px-2 py-1 text-center font-mono shadow-sm transition
+          duration-200 outline-none focus:border-blue-400
             ${isValid ? 'border-(--border-color)' : 'border-red-400 shadow-[0_0_6px_var(--red-color)]'}
             ${disabled ? 'cursor-not-allowed opacity-50' : 'hover:shadow-md'} 
             ${readonly ? '' : 'hover:shadow-md'}

package/dist/Joystick/Joystick.svelte

@@ -208,7 +208,7 @@
         style="background: color-mix(in srgb, var(--bg-color), var(--shadow-color) 10%)"
       >
         <button
-          class="h-full rotate-270 cursor-pointer rounded-l-full px-3.5"
+          class="h-full cursor-pointer rounded-l-full px-3.5"
           title=""
           onclick={() => {
             if (value[0] - sensitivity <= (axes[0].minNum ?? -360)) {
@@ -221,17 +221,20 @@
           }}
           onmouseenter={(e) => (e.currentTarget.style.backgroundColor = 'color-mix(in srgb, var(--bg-color), var(--shadow-color) 30%)')}
           onmouseleave={(e) => (e.currentTarget.style.backgroundColor = 'background: color-mix(in srgb, var(--bg-color), var(--shadow-color) 10%)')}
-          ><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-            ><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"
-              ><path
-                stroke-miterlimit="10"
-                d="M6.395 7.705A7.9 7.9 0 0 1 12 5.382a7.93 7.93 0 0 1 7.929 7.929A7.94 7.94 0 0 1 12 21.25a7.94 7.94 0 0 1-7.929-7.94"
-              /><path stroke-linejoin="round" d="m7.12 2.75l-.95 3.858a1.33 1.33 0 0 0 .97 1.609l3.869.948" /></g
-            ></svg
-          ></button
+        >
+          <div class="rotate-270">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+              ><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"
+                ><path
+                  stroke-miterlimit="10"
+                  d="M6.395 7.705A7.9 7.9 0 0 1 12 5.382a7.93 7.93 0 0 1 7.929 7.929A7.94 7.94 0 0 1 12 21.25a7.94 7.94 0 0 1-7.929-7.94"
+                /><path stroke-linejoin="round" d="m7.12 2.75l-.95 3.858a1.33 1.33 0 0 0 .97 1.609l3.869.948" /></g
+              ></svg
+            >
+          </div></button
         >
         <button
-          class="h-full rotate-90 cursor-pointer rounded-r-full px-3.5"
+          class="h-full cursor-pointer rounded-r-full px-3.5"
           title=""
           onclick={() => {
             if (value[0] + sensitivity >= (axes[0].maxNum ?? 360)) {
@@ -244,14 +247,17 @@
           }}
           onmouseenter={(e) => (e.currentTarget.style.backgroundColor = 'color-mix(in srgb, var(--bg-color), var(--shadow-color) 30%)')}
           onmouseleave={(e) => (e.currentTarget.style.backgroundColor = 'vabackground: color-mix(in srgb, var(--bg-color), var(--shadow-color) 10%)')}
-          ><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-            ><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"
-              ><path
-                stroke-miterlimit="10"
-                d="M17.605 7.705A7.9 7.9 0 0 0 12 5.382a7.93 7.93 0 0 0-7.929 7.929A7.94 7.94 0 0 0 12 21.25a7.94 7.94 0 0 0 7.929-7.94"
-              /><path stroke-linejoin="round" d="m16.88 2.75l.95 3.858a1.33 1.33 0 0 1-.97 1.609l-3.869.948" /></g
-            ></svg
-          ></button
+        >
+          <div class="rotate-90">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+              ><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"
+                ><path
+                  stroke-miterlimit="10"
+                  d="M17.605 7.705A7.9 7.9 0 0 0 12 5.382a7.93 7.93 0 0 0-7.929 7.929A7.94 7.94 0 0 0 12 21.25a7.94 7.94 0 0 0 7.929-7.94"
+                /><path stroke-linejoin="round" d="m16.88 2.75l.95 3.858a1.33 1.33 0 0 1-.97 1.609l-3.869.948" /></g
+              ></svg
+            >
+          </div></button
         >
       </div>
     {/if}

package/dist/Map/Map.svelte

@@ -101,7 +101,7 @@
     <h5 class={twMerge(` w-full px-4 text-center`, label.class)}>{label.name}</h5>
   {/if}
   <MapLibre
-    class="h-[calc(100%-2rem)] min-h-[200px]"
+    class="h-[calc(100%-2rem)] min-h-[200px] overflow-hidden rounded-2xl shadow-sm transition duration-200 hover:shadow-md"
     style={isDarkMode
       ? 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json'
       : 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json'}

package/dist/ProgressBar/ProgressBar.svelte

@@ -69,7 +69,7 @@
   {#if type == 'vertical'}
     <div class="flex h-full flex-wrap gap-3">
       {#each innerValue as val}
-        <div class="flex h-full w-fit min-w-16 flex-col items-center gap-2 rounded-full bg-(--bg-color) p-2">
+        <div class="flex h-full w-fit min-w-16 flex-col items-center gap-2 rounded-full bg-(--bg-color) p-2 shadow-sm">
           <div class="relative my-auto h-[80%] w-[70%] rounded-full bg-(--back-color)/40">
             <div class="absolute bottom-0 left-0 flex w-full rounded-full bg-(--field-color)" style="height: {progressPercent(val)}%;"></div>
           </div>
@@ -80,7 +80,7 @@
   {:else}
     <div class="flex w-full flex-col gap-2">
       {#each innerValue as val}
-        <div class="flex h-7 w-full items-center gap-2 rounded-full bg-(--bg-color) px-2">
+        <div class="flex h-7 w-full items-center gap-2 rounded-full bg-(--bg-color) px-2 shadow-sm">
           <span class="m-auto font-semibold">{roundToClean(Number(numericValue(val)))}{number.units}</span>
           <div class="relative my-auto h-3.5 w-[85%] rounded-full bg-(--back-color)/40">
             <div class="absolute top-0 left-0 flex h-full rounded-full bg-(--field-color)" style="width: {progressPercent(val)}%;"></div>

package/dist/Select/Select.svelte

@@ -99,8 +99,8 @@
       id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
       value={value?.value ? String(value.value) : ''}
       class={twMerge(
-        `w-full rounded-2xl border border-(--border-color) p-1 text-center duration-250
-        ${disabled ? 'opacity-50' : 'cursor-pointer hover:shadow-lg'}`,
+        `w-full rounded-2xl border border-(--border-color) p-1 text-center shadow-sm transition-shadow duration-200
+        ${disabled ? 'opacity-50' : 'cursor-pointer hover:shadow-md'}`,
         value?.class,
       )}
       style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
@@ -164,10 +164,10 @@
   {:else if type === 'input'}
     <input
       bind:value={searchValue}
-      class="w-full appearance-none rounded-2xl border px-4 py-1 text-center transition-shadow
-          outline-none hover:shadow-md focus:border-blue-400
+      class="w-full appearance-none rounded-2xl border px-4 py-1 text-center shadow-sm
+          transition-shadow duration-200 outline-none focus:border-blue-400
           [&::-webkit-inner-spin-button]:hidden [&::-webkit-outer-spin-button]:hidden
-          {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-text'} border-(--border-color)"
+          {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-text'} border-(--border-color) hover:shadow-md"
       style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
       id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
       {disabled}

package/dist/Slider/Slider.svelte

@@ -110,6 +110,7 @@
               [&::-webkit-slider-runnable-track]:rounded-l-full
               [&::-webkit-slider-runnable-track]:bg-(--gray-color)
               [&::-webkit-slider-runnable-track]:px-2
+              [&::-webkit-slider-runnable-track]:shadow-sm
               [&::-webkit-slider-thumb]:relative
               [&::-webkit-slider-thumb]:size-4
               [&::-webkit-slider-thumb]:cursor-pointer
@@ -156,6 +157,7 @@
               [&::-webkit-slider-runnable-track]:rounded-r-full
               [&::-webkit-slider-runnable-track]:bg-(--gray-color)
               [&::-webkit-slider-runnable-track]:px-2
+              [&::-webkit-slider-runnable-track]:shadow-sm
               [&::-webkit-slider-thumb]:relative
               [&::-webkit-slider-thumb]:size-4
               [&::-webkit-slider-thumb]:cursor-pointer
@@ -197,6 +199,7 @@
             `h-8 w-full appearance-none overflow-hidden rounded-full accent-(--back-color) 
               [&::-webkit-slider-runnable-track]:rounded-full
               [&::-webkit-slider-runnable-track]:bg-(--gray-color)
+              [&::-webkit-slider-runnable-track]:shadow-sm
               [&::-webkit-slider-thumb]:relative 
 
               [&::-webkit-slider-thumb]:ml-[-0.4rem] 

package/dist/Switch/Switch.svelte

@@ -74,9 +74,9 @@
             {/if}
 
             <label
-              class="relative flex items-center justify-between rounded-full shadow-md
+              class="relative flex items-center justify-between rounded-full shadow-sm transition duration-200
       {checkedOptions[index] ? 'border-(--bg-color)' : 'border-(--bg-color)'}
-      {option.disabled ? 'opacity-60' : ''}"
+      {option.disabled ? 'opacity-60' : 'hover:shadow-md'}"
             >
               <input
                 id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
@@ -126,7 +126,7 @@
       disabled={localOptions[0].disabled}
       class="
       relative size-8 cursor-pointer appearance-none rounded-2xl border border-(--bg-color)
-      bg-white transition duration-300 after:origin-bottom-left after:opacity-0
+      bg-white shadow-sm transition duration-200 after:origin-bottom-left after:opacity-0
       checked:border-(--bg-color)
       checked:bg-(--bg-color) checked:after:absolute checked:after:-top-px checked:after:left-[5px]
       checked:after:h-[13.5px] checked:after:w-[7.5px] checked:after:rotate-43

package/dist/Table/Table.svelte

@@ -160,7 +160,11 @@
     <h5 class={twMerge(`w-full px-4 text-center`, label.class)}>{label.name}</h5>
   {/if}
 
-  <div class="flex h-full flex-col overflow-hidden rounded-xl border {outline ? ' border-(--border-color)' : 'border-transparent'} ">
+  <div
+    class="flex h-full flex-col overflow-hidden rounded-xl border shadow-sm transition duration-200 hover:shadow-md {outline
+      ? ' border-(--border-color)'
+      : 'border-transparent'} "
+  >
     <!-- Table Header -->
     <div class="grid font-semibold" style={`grid-template-columns: ${header.map((c) => c.width || 'minmax(0, 1fr)').join(' ')};`}>
       {#each header as column, index (column)}
@@ -211,7 +215,7 @@
                   {#each column.buttons as button (button)}
                     <button
                       class="{twMerge(`cursor-pointer rounded-full 
-                           px-4 py-1 font-medium transition-shadow outline-none select-none hover:shadow-md
+                           px-4 py-1 font-medium shadow-sm transition-shadow duration-200 outline-none select-none hover:shadow-md
                           ${typeof button.class === 'function' ? button.class(row) : button.class}`)} bg-(--bg-color)"
                       onclick={() => buttonClick(row, button)}
                     >

package/package.json

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