poe-svelte-ui-lib 1.3.2 → 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 }}
@@ -36,11 +36,20 @@
         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}
-          {@html label.icon}
+          {#if typeof label?.icon === 'string'}
+            {@html label.icon}
+          {:else}
+            {@const IconComponent = label?.icon}
+            <IconComponent />
+          {/if}
         {/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}
@@ -88,7 +88,7 @@
     <div class=" flex flex-row items-center justify-center gap-2">
       {#if content?.icon}
         <span
-          class={` ${content.name ? 'absolute left-3' : ''}  flex items-center justify-center overflow-visible 
+          class={` ${content.name ? 'absolute left-3' : ''} ${typeof content?.icon == 'string' ? 'p-0.5' : ''}  flex items-center justify-center overflow-visible 
             ${content.name ? 'h-8 w-8' : `${svgSize()}`} [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full`}
         >
           {#if typeof content?.icon === 'string'}

package/dist/Button/ButtonProps.svelte

@@ -5,6 +5,10 @@
   import * as UI from '..'
   import { optionsStore } from '../options'
   import { twMerge } from 'tailwind-merge'
+  import CrossIcon from '../libIcons/CrossIcon.svelte'
+  import Modal from '../Modal.svelte'
+  import { ICONS } from '../icons'
+  import Button from './Button.svelte'
 
   const {
     component,
@@ -16,6 +20,8 @@
     forConstructor?: boolean
   }>()
 
+  let showIconLib = $state(false)
+
   let hasValue: boolean = $derived(component.eventHandler.Value)
 
   let Header: ISelectOption = $derived(
@@ -104,6 +110,43 @@
         value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
         onUpdate={(option) => onPropertyChange({ access: option.value })}
       />
+      <div class="relative mt-6 flex w-full gap-2">
+        <UI.Button content={{ name: $t('constructor.props.buttonIcon') }} onClick={() => (showIconLib = true)} />
+        {#if showIconLib}
+          <Modal bind:isOpen={showIconLib} wrapperClass="w-130">
+            {#snippet main()}
+              <div class="grid grid-cols-3">
+                {#each ICONS as category}
+                  <div class="relative m-1.5 rounded-xl border-2 border-(--border-color) p-3">
+                    <div class="absolute -top-3.5 bg-(--back-color) px-1">{$t(`constructor.props.icon.${category[0]}`)}</div>
+                    <div class="grid grid-cols-3 place-items-center gap-2">
+                      {#each category[1] as icon}
+                        <button
+                          class="h-8 w-8 cursor-pointer [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full"
+                          onclick={() => {
+                            updateProperty('content.icon', icon as string, component, onPropertyChange)
+                          }}
+                        >
+                          {@html icon}
+                        </button>{/each}
+                    </div>
+                  </div>
+                {/each}
+              </div>
+            {/snippet}
+          </Modal>
+        {/if}
+        {#if component.properties.content.icon}
+          <Button
+            wrapperClass="w-8.5 "
+            componentClass="p-0.5 bg-red"
+            content={{ icon: CrossIcon }}
+            onClick={() => {
+              updateProperty('content.icon', '', component, onPropertyChange)
+            }}
+          />
+        {/if}
+      </div>
     </div>
     <div class="flex w-1/3 flex-col items-center px-2">
       <UI.Input
@@ -194,14 +237,43 @@
         onUpdate={(option) =>
           updateProperty('componentClass', twMerge(component.properties.componentClass, option.value), component, onPropertyChange)}
       />
-
-      <UI.Input
-        label={{ name: $t('constructor.props.svgicon') }}
-        type="text-area"
-        maxlength={100000}
-        value={component.properties.content.icon}
-        onUpdate={(value) => updateProperty('content.icon', value as string, component, onPropertyChange)}
-      />
+      <div class="relative mt-6 flex w-full gap-2">
+        <UI.Button content={{ name: $t('constructor.props.buttonIcon') }} onClick={() => (showIconLib = true)} />
+        {#if showIconLib}
+          <Modal bind:isOpen={showIconLib} wrapperClass="w-130">
+            {#snippet main()}
+              <div class="grid grid-cols-3">
+                {#each ICONS as category}
+                  <div class="relative m-1.5 rounded-xl border-2 border-(--border-color) p-3">
+                    <div class="absolute -top-3.5 bg-(--back-color) px-1">{$t(`constructor.props.icon.${category[0]}`)}</div>
+                    <div class="grid grid-cols-3 place-items-center gap-2">
+                      {#each category[1] as icon}
+                        <button
+                          class="h-8 w-8 cursor-pointer [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full"
+                          onclick={() => {
+                            updateProperty('content.icon', icon as string, component, onPropertyChange)
+                          }}
+                        >
+                          {@html icon}
+                        </button>{/each}
+                    </div>
+                  </div>
+                {/each}
+              </div>
+            {/snippet}
+          </Modal>
+        {/if}
+        {#if component.properties.content.icon}
+          <Button
+            wrapperClass="w-8.5 "
+            componentClass="p-0.5 bg-red"
+            content={{ icon: CrossIcon }}
+            onClick={() => {
+              updateProperty('content.icon', '', component, onPropertyChange)
+            }}
+          />
+        {/if}
+      </div>
     </div>
   </div>
 {/if}

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/ComponentExample.svelte

@@ -17,15 +17,36 @@
   <div class="max-h-[70%]" transition:fade={{ duration: 200 }}>
     {@render componentProps()}
     <div class="relative mt-3">
-      <UI.Button
-        wrapperClass="absolute top-3 right-5 w-6"
-        content={{ icon: isCopied ? '<div class="rounded-md bg-(--green-color) shadow-lg px-1">✓</div>' : CopyButton }}
-        onClick={() => {
+      <button
+        class="absolute top-2 right-3 flex cursor-pointer border-none bg-transparent"
+        onclick={(e) => {
+          e.preventDefault()
+          navigator.clipboard.writeText(codeText)
           isCopied = true
           setTimeout(() => (isCopied = false), 1000)
-          navigator.clipboard.writeText(codeText)
         }}
-      />
+        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}
+            <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
+                  d="M6 11c0-2.828 0-4.243.879-5.121C7.757 5 9.172 5 12 5h3c2.828 0 4.243 0 5.121.879C21 6.757 21 8.172 21 11v5c0 2.828 0 4.243-.879 5.121C19.243 22 17.828 22 15 22h-3c-2.828 0-4.243 0-5.121-.879C6 20.243 6 18.828 6 16z"
+                />
+                <path d="M6 19a3 3 0 0 1-3-3v-6c0-3.771 0-5.657 1.172-6.828S7.229 2 11 2h4a3 3 0 0 1 3 3" />
+              </g>
+            </svg>
+          {/if}
+        </div>
+      </button>
       <pre class="overflow-x-auto">{codeText}
   </pre>
     </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

@@ -177,15 +177,27 @@
         class="z-20 flex size-20 items-center justify-center rounded-full bg-(--bg-color) shadow-[0_0_15px_rgb(0_0_0_/0.25)] transition hover:scale-103"
       >
         <button
-          class="flex size-18 cursor-pointer items-center justify-center rounded-full"
+          class="flex size-18 cursor-pointer items-center justify-center rounded-full p-3.5 [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full"
           style="background: {value[3] == 1 ? 'color-mix(in srgb, var(--bg-color), var(--shadow-color) 10%)' : 'var(--bg-color)'}"
           onclick={() => {
             value[3] = value[3] == 0 ? 1 : 0
           }}
         >
-          {@html buttonIcon
-            ? buttonIcon
-            : '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor"d="M6 19h3v-5q0-.425.288-.712T10 13h4q.425 0 .713.288T15 14v5h3v-9l-6-4.5L6 10zm-2 0v-9q0-.475.213-.9t.587-.7l6-4.5q.525-.4 1.2-.4t1.2.4l6 4.5q.375.275.588.7T20 10v9q0 .825-.588 1.413T18 21h-4q-.425 0-.712-.288T13 20v-5h-2v5q0 .425-.288.713T10 21H6q-.825 0-1.412-.587T4 19m8-6.75"/></svg>'}
+          {#if buttonIcon}
+            {#if typeof buttonIcon === 'string'}
+              {@html buttonIcon}
+            {:else}
+              {@const IconComponent = buttonIcon}
+              <IconComponent />
+            {/if}
+          {:else}
+            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"
+              ><path
+                fill="currentColor"
+                d="M6 19h3v-5q0-.425.288-.712T10 13h4q.425 0 .713.288T15 14v5h3v-9l-6-4.5L6 10zm-2 0v-9q0-.475.213-.9t.587-.7l6-4.5q.525-.4 1.2-.4t1.2.4l6 4.5q.375.275.588.7T20 10v9q0 .825-.588 1.413T18 21h-4q-.425 0-.712-.288T13 20v-5h-2v5q0 .425-.288.713T10 21H6q-.825 0-1.412-.587T4 19m8-6.75"
+              /></svg
+            >
+          {/if}
         </button>
       </div>
     </div>
@@ -196,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)) {
@@ -209,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)) {
@@ -232,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'}
@@ -136,10 +136,29 @@
             <div
               class="flex size-8 shrink-0 items-center justify-center [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full
             {device.isFresh ? 'text-green-500' : 'text-red-500'}"
-              style="rotate: {device.NavHeading - 90}deg;"
+              style="rotate: {device.NavHeading}deg;"
             >
-              {@html markerIcon ||
-                '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.76 12H6.832m0 0c0-.275-.057-.55-.17-.808L4.285 5.814c-.76-1.72 1.058-3.442 2.734-2.591L20.8 10.217c1.46.74 1.46 2.826 0 3.566L7.02 20.777c-1.677.851-3.495-.872-2.735-2.591l2.375-5.378A2 2 0 0 0 6.83 12"/></svg>'}
+              {#if markerIcon}
+                {#if typeof markerIcon === 'string'}
+                  {@html markerIcon}
+                {:else}
+                  {@const IconComponent = markerIcon}
+                  <IconComponent />
+                {/if}
+              {:else}
+                <div class="rotate-270">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
+                    <path
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="1.5"
+                      d="M14.76 12H6.832m0 0c0-.275-.057-.55-.17-.808L4.285 5.814c-.76-1.72 1.058-3.442 2.734-2.591L20.8 10.217c1.46.74 1.46 2.826 0 3.566L7.02 20.777c-1.677.851-3.495-.872-2.735-2.591l2.375-5.378A2 2 0 0 0 6.83 12"
+                    /></svg
+                  >
+                </div>
+              {/if}
             </div>
             <p class="font-bold">{device.DevName}</p>
           </div>

package/dist/ProgressBar/ProgressBar.svelte

@@ -7,7 +7,7 @@
     id = crypto.randomUUID(),
     wrapperClass = '',
     label = { name: '', class: '' },
-    value = $bindable(0),
+    value = $bindable([0]),
     type = 'horizontal',
     number = {
       minNum: 0,
@@ -16,29 +16,35 @@
     },
   }: IProgressBarProps = $props()
 
+  let innerValue: number[] | null = $derived(
+    (() => {
+      if (typeof value == 'number') {
+        return [value]
+      } else return value
+    })(),
+  )
+
   const min = $derived(number.minNum ?? 0)
   const max = $derived(number.maxNum ?? 100)
 
-  let numericValue = $derived(
-    (() => {
-      if (typeof value === 'number' && !isNaN(value)) {
-        return Math.max(min, Math.min(max, value))
-      } else if (typeof value === 'string') {
-        const parsedValue = parseFloat(value)
-        if (!isNaN(parsedValue)) {
-          return Math.max(min, Math.min(max, parsedValue))
-        }
-      } else {
-        return min
+  const numericValue = (value: number) => {
+    if (typeof value === 'number' && !isNaN(value)) {
+      return Math.max(min, Math.min(max, value))
+    } else if (typeof value === 'string') {
+      const parsedValue = parseFloat(value)
+      if (!isNaN(parsedValue)) {
+        return Math.max(min, Math.min(max, parsedValue))
       }
-    })(),
-  )
+    } else {
+      return min
+    }
+  }
 
-  const progressPercent = $derived(() => {
+  const progressPercent = (value: number) => {
     if (value) {
       return (((Math.min(Math.max(value, min), max) - min) / (max - min)) * 100) as number
     }
-  })
+  }
 
   const roundToClean = (num: number): number => {
     if (Number.isInteger(num)) return num
@@ -60,20 +66,27 @@
   {#if label.name}
     <h5 class={twMerge(` w-full px-4 text-center`, label.class)}>{label.name}</h5>
   {/if}
-
   {#if type == 'vertical'}
-    <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="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()}%;"></div>
-      </div>
-      <span class="m-auto font-semibold">{roundToClean(Number(numericValue))}{number.units}</span>
+    <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 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>
+          <span class="m-auto font-semibold">{roundToClean(Number(numericValue(val)))}{number.units}</span>
+        </div>
+      {/each}
     </div>
   {:else}
-    <div class="flex h-7 w-full items-center gap-2 rounded-full bg-(--bg-color) px-2">
-      <span class="m-auto font-semibold">{roundToClean(Number(numericValue))}{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()}%;"></div>
-      </div>
+    <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 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>
+          </div>
+        </div>
+      {/each}
     </div>
   {/if}
 </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/dist/Tabs/Tabs.svelte

@@ -48,7 +48,12 @@
       >
         {#if item?.icon}
           <span class="flex h-7 w-7 items-center justify-center overflow-visible [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full">
-            {@html item.icon}
+            {#if typeof item.icon === 'string'}
+              {@html item.icon}
+            {:else}
+              {@const IconComponent = item.icon}
+              <IconComponent />
+            {/if}
           </span>
         {/if}
         {#if item?.name}

package/dist/types.d.ts

@@ -69,7 +69,7 @@ export interface IButtonProps {
 }
 export interface IAccordionProps {
     id?: string;
-    isOpen: boolean;
+    isOpen?: boolean;
     outline?: boolean;
     wrapperClass?: string;
     size?: {
@@ -79,7 +79,7 @@ export interface IAccordionProps {
     label?: {
         name?: string;
         class?: string;
-        icon?: string | null;
+        icon?: ConstructorOfATypedSvelteComponent | string | null;
     };
     children?: Snippet;
     image?: string;
@@ -199,7 +199,7 @@ export interface IProgressBarProps {
         name?: string;
         class?: string;
     };
-    value?: number | null;
+    value?: number | number[] | null;
     number?: {
         minNum?: number;
         maxNum?: number;
@@ -291,7 +291,7 @@ export interface ITabsProps {
     activeTab?: number;
     items: {
         name?: string;
-        icon?: string;
+        icon?: ConstructorOfATypedSvelteComponent | string;
         class?: string;
         children?: Snippet;
     }[];
@@ -312,7 +312,7 @@ export interface IJoystickProps {
         minNum?: number;
         maxNum?: number;
     }[];
-    buttonIcon?: string;
+    buttonIcon?: ConstructorOfATypedSvelteComponent | string;
     onUpdate?: (value: number[]) => void;
 }
 export interface IDeviceGNSS {
@@ -331,7 +331,7 @@ export interface IMapProps {
         class?: string;
     };
     data: IDeviceGNSS | null;
-    markerIcon?: string;
+    markerIcon?: ConstructorOfATypedSvelteComponent | string;
 }
 export interface IFileAttachProps {
     id?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -45,11 +45,11 @@
   "devDependencies": {
     "@sveltejs/adapter-static": "^3.0.10",
     "@sveltejs/kit": "^2.49.0",
-    "@sveltejs/package": "^2.5.6",
+    "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@types/node": "^24.10.1",
     "publint": "^0.3.15",
-    "svelte": "^5.44.1",
+    "svelte": "^5.45.2",
     "svelte-preprocess": "^6.0.3",
     "vite": "^7.2.4",
     "vite-plugin-compression": "^0.5.1"