poe-svelte-ui-lib 1.9.16 → 1.9.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/Accordion/Accordion.svelte +1 -1
  2. package/dist/Input/Input.svelte +3 -3
  3. package/dist/Select/Select.svelte +110 -108
  4. package/dist/Slider/Slider.svelte +6 -6
  5. package/dist/Table/Table.svelte +6 -6
  6. package/dist/Table/TableProps.svelte +2 -2
  7. package/dist/Tabs/Tabs.svelte +1 -1
  8. package/dist/Widget/Widget.svelte +9 -7
  9. package/package.json +1 -1
package/dist/Accordion/Accordion.svelte CHANGED
@@ -17,7 +17,7 @@
17
17
  </script>
18
18
 
19
19
  <div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class={twMerge(`w-full p-1`, wrapperClass)} transition:slide={{ duration: 250 }}>
20
- <div class="shadow-[0_0_3px_rgb(0_0_0_/0.25)] hover:shadow-[0_0_6px_rgb(0_0_0_/0.25)] transition-shadow duration-250 rounded-xl bg-(--container-color)">
20
+ <div class="shadow-(--border-shadow-color) hover:shadow-(--focus-shadow-color) transition-shadow duration-250 rounded-xl bg-(--container-color)">
21
21
  <button class="flex w-full cursor-pointer items-center justify-between p-4 py-3.5" onclick={toggle}>
22
22
  <div class="flex w-full items-center">
23
23
  <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`}>
package/dist/Input/Input.svelte CHANGED
@@ -86,11 +86,11 @@
86
86
  <input
87
87
  bind:value
88
88
  class={twMerge(
89
- `w-full rounded-2xl border px-4 py-1 text-center shadow-[0_0_3px_rgb(0_0_0_/0.25)] transition duration-200
89
+ `w-full rounded-2xl border px-4 py-1 text-center shadow-(--border-shadow-color) transition duration-200
90
90
  outline-none focus:shadow-[0_0_6px_var(--blue-color)] focus:border-(--blue-color) [&::-webkit-inner-spin-button]:hidden [&::-webkit-outer-spin-button]:hidden
91
91
  ${isValid ? "border-(--bg-color)" : "border-red-400 shadow-[0_0_6px_var(--red-color)] focus:shadow-[0_0_6px_var(--red-color)] focus:border-red-400"}
92
- ${disabled ? "opacity-50" : "hover:shadow-[0_0_6px_rgb(0_0_0_/0.25)]"}
93
- ${readonly ? "" : "hover:shadow-[0_0_6px_rgb(0_0_0_/0.25)]"}
92
+ ${disabled ? "opacity-50" : "hover:shadow-(--focus-shadow-color)"}
93
+ ${readonly ? "" : "hover:shadow-(--focus-shadow-color)"}
94
94
  ${help?.info ? "pl-8" : ""}
95
95
  ${help.copyButton || type === "password" || (type === "number" && !readonly) ? "pr-8" : ""}`,
96
96
  componentClass,
package/dist/Select/Select.svelte CHANGED
@@ -100,120 +100,122 @@
100
100
  }
101
101
  </script>
102
102
 
103
- <div class={twMerge(`bg-max relative flex w-full flex-col items-center px-1`, wrapperClass)} bind:this={dropdownElement}>
104
- {#if label.name}
105
- <h5 class={twMerge(`w-full px-4`, label.class)}>{label.name}</h5>
106
- {/if}
107
- {#if type === "select" && !Array.isArray(value)}
108
- <button
109
- id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
110
- value={value?.value ? String(value.value) : ""}
111
- class={twMerge(
112
- `w-full rounded-2xl border border-(--bg-color) p-1 text-center shadow-[0_0_3px_rgb(0_0_0_/0.25)] transition duration-200
113
- ${disabled ? "opacity-50" : "cursor-pointer hover:shadow-[0_0_6px_rgb(0_0_0_/0.25)]"}`,
114
- value?.class,
115
- )}
116
- style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%); "
117
- onclick={toggleDropdown}
118
- aria-haspopup="true"
119
- aria-expanded={isDropdownOpen}
120
- {disabled}
121
- >
122
- {value?.name || $t("common.select_tag")}
123
- </button>
124
-
125
- {#if isDropdownOpen}
126
- <div
127
- class="absolute top-full left-1/2 z-50 rounded-b-xl -translate-x-1/2 shadow-[0_0_3px_rgb(0_0_0_/0.25)]"
128
- style="width: calc(100% - 1.8rem);"
129
- transition:slide={{ duration: 250 }}
103
+ <div class={twMerge(`bg-max w-full px-1`, wrapperClass)}>
104
+ <div class="relative w-full flex flex-col items-center" bind:this={dropdownElement}>
105
+ {#if label.name}
106
+ <h5 class={twMerge(`w-full px-4`, label.class)}>{label.name}</h5>
107
+ {/if}
108
+ {#if type === "select" && !Array.isArray(value)}
109
+ <button
110
+ id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
111
+ value={value?.value ? String(value.value) : ""}
112
+ class={twMerge(
113
+ `w-full rounded-2xl border border-(--bg-color) p-1 text-center shadow-(--border-shadow-color) transition duration-200
114
+ ${disabled ? "opacity-50" : "cursor-pointer hover:shadow-(--focus-shadow-color)"}`,
115
+ value?.class,
116
+ )}
117
+ style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%); "
118
+ onclick={toggleDropdown}
119
+ aria-haspopup="true"
120
+ aria-expanded={isDropdownOpen}
121
+ {disabled}
130
122
  >
131
- <div class="overflow-y-auto bg-(--back-color) rounded-b-xl" style="max-height: {listHeight};">
132
- {#each options as option, index (option.id)}
133
- <button
134
- id={option.id}
135
- value={option?.value ? String(option.value) : ""}
136
- class={twMerge(
137
- `flex h-full w-full cursor-pointer items-center justify-center p-1 inset-shadow-[0_10px_10px_-15px_rgb(0_0_0_/0.5)] duration-250 hover:bg-(--field-color) wrap-break-word
138
- ${index === options.length - 1 ? "rounded-b-xl" : ""}`,
139
- option.class,
140
- )}
141
- onclick={(e) => selectOption(option, e)}
142
- {disabled}
143
- style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
144
- >
145
- {option.name}
146
- </button>
147
- {/each}
123
+ {value?.name || $t("common.select_tag")}
124
+ </button>
125
+
126
+ {#if isDropdownOpen}
127
+ <div
128
+ class="absolute top-full left-1/2 z-50 rounded-b-xl -translate-x-1/2 shadow-(--border-shadow-color)"
129
+ style="width: calc(100% - 1.8rem);"
130
+ transition:slide={{ duration: 250 }}
131
+ >
132
+ <div class="overflow-y-auto bg-(--back-color) rounded-b-xl" style="max-height: {listHeight};">
133
+ {#each options as option, index (option.id)}
134
+ <button
135
+ id={option.id}
136
+ value={option?.value ? String(option.value) : ""}
137
+ class={twMerge(
138
+ `flex h-full w-full items-center justify-center p-1 inset-shadow-[0_10px_10px_-15px_rgb(0_0_0_/0.5)] dark:inset-shadow-[0_10px_10px_-15px_rgb(255_255_255_/0.5)]
139
+ duration-250 hover:bg-(--field-color) wrap-break-word ${index === options.length - 1 ? "rounded-b-xl" : ""} ${option.disabled ? "opacity-50" : "cursor-pointer"}`,
140
+ option.class,
141
+ )}
142
+ onclick={(e) => selectOption(option, e)}
143
+ disabled={option.disabled}
144
+ style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
145
+ >
146
+ {option.name}
147
+ </button>
148
+ {/each}
149
+ </div>
148
150
  </div>
149
- </div>
150
- {/if}
151
- {:else if type === "buttons"}
152
- <div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class="flex h-full w-full flex-row justify-center rounded-full">
153
- {#each options as option, index (option.id)}
154
- <button
155
- id={option.id}
156
- class="{twMerge(
157
- `m-0 inline-block min-w-0 flex-1 items-center px-2 py-1 font-semibold shadow-[0_0_3px_rgb(0_0_0_/0.25)] transition duration-300 select-none border border-(--bg-color)
158
- ${option.disabled || disabled ? 'opacity-50' : 'cursor-pointer hover:shadow-[0_0_6px_rgb(0_0_0_/0.25)]'}
151
+ {/if}
152
+ {:else if type === "buttons"}
153
+ <div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class="flex h-full w-full flex-row justify-center rounded-full">
154
+ {#each options as option, index (option.id)}
155
+ <button
156
+ id={option.id}
157
+ class="{twMerge(
158
+ `m-0 inline-block min-w-0 flex-1 items-center px-2 py-1 font-semibold shadow-(--border-shadow-color) transition duration-300 select-none border border-(--bg-color)
159
+ ${option.disabled || disabled ? 'opacity-50' : 'cursor-pointer hover:shadow-(--focus-shadow-color)'}
159
160
  ${value !== null && isSelected(option) ? 'z-10 py-1 shadow-[0_0_10px_var(--shadow-color)] hover:shadow-[0_0_15px_var(--shadow-color)]' : ''}
160
161
  ${options.length > 0 && index === 0 ? 'rounded-l-2xl' : ''} ${index === options.length - 1 ? 'rounded-r-2xl' : ''}`,
161
- option.class,
162
- )} bg-(--bg-color)"
163
- onclick={(e) => selectOption(option, e)}
164
- disabled={option.disabled || disabled}
165
- >
166
- <span class="flex flex-row items-center justify-center gap-4">
167
- {#if option.name}
168
- <div class="flex-1">
169
- {option.name}
170
- </div>
171
- {/if}
172
- </span>
173
- </button>
174
- {/each}
175
- </div>
176
- {:else if type === "input"}
177
- <input
178
- bind:value={searchValue}
179
- class="w-full appearance-none rounded-2xl border px-4 py-1 text-center shadow-[0_0_3px_rgb(0_0_0_/0.25)]
162
+ option.class,
163
+ )} bg-(--bg-color)"
164
+ onclick={(e) => selectOption(option, e)}
165
+ disabled={option.disabled || disabled}
166
+ >
167
+ <span class="flex flex-row items-center justify-center gap-4">
168
+ {#if option.name}
169
+ <div class="flex-1">
170
+ {option.name}
171
+ </div>
172
+ {/if}
173
+ </span>
174
+ </button>
175
+ {/each}
176
+ </div>
177
+ {:else if type === "input"}
178
+ <input
179
+ bind:value={searchValue}
180
+ class="w-full appearance-none rounded-2xl border px-4 py-1 text-center shadow-(--border-shadow-color)
180
181
  transition duration-200 outline-none focus:shadow-[0_0_6px_var(--blue-color)]
181
182
  [&::-webkit-inner-spin-button]:hidden [&::-webkit-outer-spin-button]:hidden
182
- {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-text'} border-(--bg-color) focus:border-(--blue-color) hover:shadow-[0_0_6px_rgb(0_0_0_/0.25)]"
183
- style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
184
- id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
185
- {disabled}
186
- oninput={handleSearch}
187
- onclick={(e) => {
188
- toggleDropdown(e)
189
- }}
190
- />
191
-
192
- {#if isDropdownOpen}
193
- <div
194
- class="absolute select-none top-full left-1/2 z-50 -translate-x-1/2 rounded-b-xl border border-t-0 border-(--bg-color) shadow-[0_0_3px_rgb(0_0_0_/0.25)]"
195
- style="width: calc(100% - 1.8rem); "
196
- transition:slide={{ duration: 250 }}
197
- >
198
- <div class="overflow-y-auto bg-(--back-color) rounded-b-xl wrap-anywhere" style="max-height: {listHeight};">
199
- {#each filteredOptions as option, index (option.id)}
200
- <button
201
- id={option.id}
202
- value={option?.value ? String(option.value) : ""}
203
- class={twMerge(
204
- `flex h-full w-full cursor-pointer items-center justify-center p-1 inset-shadow-[0_10px_10px_-15px_rgb(0_0_0_/0.5)] duration-250 hover:bg-(--field-color)
205
- ${index === filteredOptions.length - 1 ? "rounded-b-xl" : ""}`,
206
- option.class,
207
- )}
208
- onclick={(e) => selectOption(option, e)}
209
- {disabled}
210
- style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
211
- >
212
- {option.name}
213
- </button>
214
- {/each}
183
+ {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-text'} border-(--bg-color) focus:border-(--blue-color) hover:shadow-(--focus-shadow-color)"
184
+ style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
185
+ id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
186
+ {disabled}
187
+ oninput={handleSearch}
188
+ onclick={(e) => {
189
+ toggleDropdown(e)
190
+ }}
191
+ />
192
+
193
+ {#if isDropdownOpen}
194
+ <div
195
+ class="absolute select-none top-full left-1/2 z-50 -translate-x-1/2 rounded-b-xl border border-t-0 border-(--bg-color) shadow-(--border-shadow-color)"
196
+ style="width: calc(100% - 1.8rem); "
197
+ transition:slide={{ duration: 250 }}
198
+ >
199
+ <div class="overflow-y-auto bg-(--back-color) rounded-b-xl wrap-anywhere" style="max-height: {listHeight};">
200
+ {#each filteredOptions as option, index (option.id)}
201
+ <button
202
+ id={option.id}
203
+ value={option?.value ? String(option.value) : ""}
204
+ class={twMerge(
205
+ `flex h-full w-full items-center justify-center p-1 inset-shadow-[0_10px_10px_-15px_rgb(0_0_0_/0.5)] dark:inset-shadow-[0_10px_10px_-15px_rgb(255_255_255_/0.5)]
206
+ uration-250 hover:bg-(--field-color) ${index === filteredOptions.length - 1 ? "rounded-b-xl" : ""} ${option.disabled ? "opacity-50" : "cursor-pointer"}`,
207
+ option.class,
208
+ )}
209
+ onclick={(e) => selectOption(option, e)}
210
+ disabled={option.disabled}
211
+ style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
212
+ >
213
+ {option.name}
214
+ </button>
215
+ {/each}
216
+ </div>
215
217
  </div>
216
- </div>
218
+ {/if}
217
219
  {/if}
218
- {/if}
220
+ </div>
219
221
  </div>
package/dist/Slider/Slider.svelte CHANGED
@@ -115,7 +115,7 @@
115
115
  [&::-webkit-slider-thumb]:cursor-pointer
116
116
  ${disabled ? "[&::-webkit-slider-thumb]:cursor-not-allowed" : ""}
117
117
  [&::-webkit-slider-thumb]:rounded-full
118
- [&::-webkit-slider-thumb]:shadow-[var(--focus-shadow),]
118
+ [&::-webkit-slider-thumb]:shadow-(--focus-shadow)
119
119
  ${
120
120
  userAgent.includes("iOS") || userAgent.includes("iPhone") || userAgent.includes("iPad")
121
121
  ? "[&::-webkit-slider-thumb]:ring-[6.5px]"
@@ -127,7 +127,7 @@
127
127
  [&::-moz-range-thumb]:cursor-pointer
128
128
  ${disabled ? "[&::-moz-range-thumb]:cursor-not-allowed" : ""}
129
129
  [&::-moz-range-thumb]:rounded-full
130
- [&::-moz-range-thumb]:shadow-[var(--focus-shadow),]
130
+ [&::-moz-range-thumb]:shadow-(--focus-shadow)
131
131
  [&::-moz-range-thumb]:ring-[6px]
132
132
  [&::-moz-range-track]:rounded-full
133
133
  [&::-moz-range-track]:bg-(--gray-color)
@@ -164,7 +164,7 @@
164
164
  [&::-webkit-slider-thumb]:cursor-pointer
165
165
  ${disabled ? "[&::-webkit-slider-thumb]:cursor-not-allowed" : ""}
166
166
  [&::-webkit-slider-thumb]:rounded-full
167
- [&::-webkit-slider-thumb]:shadow-[var(--focus-shadow),]
167
+ [&::-webkit-slider-thumb]:shadow-(--focus-shadow)
168
168
  ${
169
169
  userAgent.includes("iOS") || userAgent.includes("iPhone") || userAgent.includes("iPad")
170
170
  ? "[&::-webkit-slider-thumb]:ring-[6.5px]"
@@ -176,7 +176,7 @@
176
176
  [&::-moz-range-thumb]:cursor-pointer
177
177
  ${disabled ? "[&::-moz-range-thumb]:cursor-not-allowed" : ""}
178
178
  [&::-moz-range-thumb]:rounded-full
179
- [&::-moz-range-thumb]:shadow-[var(--focus-shadow),]
179
+ [&::-moz-range-thumb]:shadow-(--focus-shadow)
180
180
  [&::-moz-range-thumb]:ring-[6px]
181
181
  [&::-moz-range-track]:rounded-full
182
182
  [&::-moz-range-track]:bg-(--gray-color)
@@ -211,7 +211,7 @@
211
211
  [&::-webkit-slider-thumb]:w-4
212
212
  ${disabled ? "[&::-webkit-slider-thumb]:cursor-not-allowed" : "[&::-webkit-slider-thumb]:cursor-pointer"}
213
213
  [&::-webkit-slider-thumb]:rounded-full
214
- [&::-webkit-slider-thumb]:shadow-[var(--focus-shadow),]
214
+ [&::-webkit-slider-thumb]:shadow-(--focus-shadow)
215
215
  ${
216
216
  userAgent.includes("iOS") || userAgent.includes("iPhone") || userAgent.includes("iPad")
217
217
  ? "pl-3.5 [&::-webkit-slider-thumb]:ring-[6.5px]"
@@ -222,7 +222,7 @@
222
222
  [&::-moz-range-thumb]:size-4
223
223
  ${disabled ? "[&::-moz-range-thumb]:cursor-not-allowed" : "[&::-moz-range-thumb]:cursor-pointer"}
224
224
  [&::-moz-range-thumb]:rounded-full
225
- [&::-moz-range-thumb]:shadow-[var(--focus-shadow),]
225
+ [&::-moz-range-thumb]:shadow-(--focus-shadow)
226
226
  [&::-moz-range-thumb]:ring-[6px]
227
227
  [&::-moz-range-track]:rounded-full
228
228
  [&::-moz-range-track]:bg-(--gray-color)
package/dist/Table/Table.svelte CHANGED
@@ -247,7 +247,7 @@
247
247
 
248
248
  <div
249
249
  class="relative flex h-full w-full flex-col overflow-hidden rounded-xl transition-shadow duration-250
250
- shadow-[0_0_3px_rgb(0_0_0_/0.25)]"
250
+ shadow-(--border-shadow-color)"
251
251
  >
252
252
  <!-- Table Header -->
253
253
  <div
@@ -286,7 +286,7 @@
286
286
  {#if dataBuffer.clearButton}
287
287
  <button
288
288
  class={twMerge(
289
- "absolute right-2 bg-(--back-color) rounded-full p-1 cursor-pointer [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full",
289
+ "absolute size-[2.25em] top-0.5 right-2 bg-(--back-color) rounded-full p-1 cursor-pointer [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full",
290
290
  dataBuffer.clearClass,
291
291
  )}
292
292
  onclick={clearBuffer}
@@ -356,8 +356,8 @@
356
356
  <div class="relative w-full select-none">
357
357
  <button
358
358
  id="select{i}-{j}-{index}"
359
- class="w-full rounded-2xl border border-(--blue-color) bg-(--back-color) p-1 text-center shadow-[0_0_3px_rgb(0_0_0_/0.25)] transition duration-200
360
- cursor-pointer hover:shadow-[0_0_6px_rgb(0_0_0_/0.25)]"
359
+ class="w-full rounded-2xl border border-(--blue-color) bg-(--back-color) p-1 text-center shadow-(--border-shadow-color) transition duration-200
360
+ cursor-pointer hover:shadow-(--focus-shadow-color)"
361
361
  onclick={() =>
362
362
  (isDropdownOpen =
363
363
  isDropdownOpen?.x === j && isDropdownOpen?.y === i && isDropdownOpen?.index === index ? null : { x: j, y: i, index })}
@@ -370,7 +370,7 @@
370
370
  {#if isDropdownOpen?.x === j && isDropdownOpen.y === i && isDropdownOpen.index === index}
371
371
  {@const cords = document.getElementById(`select${i}-${j}-${index}`)?.getBoundingClientRect()}
372
372
  <div
373
- class="fixed z-50 rounded-b-2xl shadow-[0_0_3px_rgb(0_0_0_/0.25)]"
373
+ class="fixed z-50 rounded-b-2xl shadow-(--border-shadow-color)"
374
374
  style="top: {cords?.bottom}px; left: calc({cords?.left}px + 0.9rem) ; width: calc({cords?.width}px - 1.8rem);"
375
375
  transition:slide={{ duration: selectSlideDuration }}
376
376
  >
@@ -379,7 +379,7 @@
379
379
  id={option.id}
380
380
  value={option?.value ? String(option.value) : ""}
381
381
  class={twMerge(
382
- `flex h-full w-full cursor-pointer items-center justify-center p-1 inset-shadow-[0_10px_10px_-15px_rgb(0_0_0_/0.5)] duration-250 hover:bg-(--field-color)! bg-(--back-color)
382
+ `flex h-full w-full cursor-pointer items-center justify-center p-1 inset-shadow-[0_10px_10px_-15px_rgb(0_0_0_/0.5)] dark:inset-shadow-[0_10px_10px_-15px_rgb(255_255_255_/0.5)] duration-250 hover:bg-(--field-color)! bg-(--back-color)
383
383
  ${option_index === options.length - 1 ? "rounded-b-2xl" : ""}`,
384
384
  option.class,
385
385
  )}
package/dist/Table/TableProps.svelte CHANGED
@@ -200,7 +200,7 @@
200
200
  </button>
201
201
  {#if isDropdownOpen == columnIndex}
202
202
  <div
203
- class="absolute top-full left-1/2 z-50 -translate-x-1/2 rounded-b-xl shadow-[0_0_3px_rgb(0_0_0_/0.25)] w-25"
203
+ class="absolute top-full left-1/2 z-50 -translate-x-1/2 rounded-b-xl shadow-(--border-shadow-color) w-25"
204
204
  transition:slide={{ duration: 250 }}
205
205
  >
206
206
  {#each $optionsStore.TABLE_CONTENT_TYPE_OPTIONS.slice(0, forConstructor ? 4 : 5) as option, index (option.id)}
@@ -208,7 +208,7 @@
208
208
  id={option.id}
209
209
  value={option?.value ? String(option.value) : ""}
210
210
  class={`flex h-full w-full cursor-pointer items-center justify-center p-1 duration-250 hover:bg-(--field-color)
211
- ${index === $optionsStore.TABLE_CONTENT_TYPE_OPTIONS.slice(0, forConstructor ? 4 : 5).length - 1 ? "rounded-b-xl" : ""} ${index === 0 ? "rounded-t-xl" : "inset-shadow-[0_10px_10px_-15px_rgb(0_0_0_/0.5)]"}`}
211
+ ${index === $optionsStore.TABLE_CONTENT_TYPE_OPTIONS.slice(0, forConstructor ? 4 : 5).length - 1 ? "rounded-b-xl" : ""} ${index === 0 ? "rounded-t-xl" : "inset-shadow-[0_10px_10px_-15px_rgb(0_0_0_/0.5)] dark:inset-shadow-[0_10px_10px_-15px_rgb(0_0_0_/0.5)]"}`}
212
212
  onclick={(e) => addContent(option, e, columnIndex)}
213
213
  style="background: color-mix(in srgb, var(--back-color), var(--back-color) 70%);"
214
214
  >
package/dist/Tabs/Tabs.svelte CHANGED
@@ -23,7 +23,7 @@
23
23
  </script>
24
24
 
25
25
  <div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class="w-full h-full rounded-xl p-1">
26
- <div class="flex flex-col shadow-[0_0_3px_rgb(0_0_0_/0.25)] transition-shadow duration-250 h-full w-full rounded-xl bg-(--back-color)">
26
+ <div class="flex flex-col shadow-(--border-shadow-color) transition-shadow duration-250 h-full w-full rounded-xl bg-(--back-color)">
27
27
  <!-- Вкладки -->
28
28
  <div class="{twMerge(`z-40 flex h-fit items-center rounded-t-xl overflow-x-auto px-1 sticky top-0`, wrapperClass)} bg-(--bg-color)">
29
29
  {#each items as item, index}
package/dist/Widget/Widget.svelte CHANGED
@@ -105,8 +105,8 @@
105
105
  <div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class={twMerge("w-full h-full p-1", wrapperClass)}>
106
106
  <div
107
107
  class={`h-full grid grid-rows-[4fr_9fr_5fr] rounded-xl bg-(--container-color)
108
- transition-shadow duration-250 p-1
109
- shadow-[0_0_3px_rgb(0_0_0_/0.25)] hover:shadow-[0_0_6px_rgb(0_0_0_/0.25)]`}
108
+ transition-all duration-250 p-1
109
+ shadow-(--border-shadow-color) hover:shadow-(--focus-shadow-color)`}
110
110
  >
111
111
  <div class="grid gap-2 overflow-hidden items-center" style="grid-template-columns:{icons.array && icons.array.length !== 0 ? '3.5rem' : ''} 1fr;">
112
112
  {#if icons.array && icons.array.length !== 0}
@@ -118,7 +118,9 @@
118
118
  <span class="text-left text-3xl overflow-hidden font-semibold {label.class}">{label.name}</span>
119
119
  </div>
120
120
 
121
- <div class="flex mx-3 gap-1 items-center justify-center inset-shadow-[0_-10px_10px_-15px_rgb(0_0_0_/0.5)]">
121
+ <div
122
+ class="flex mx-3 gap-1 items-center justify-center inset-shadow-[0_-10px_10px_-15px_rgb(0_0_0_/0.5)] dark:inset-shadow-[0_-10px_10px_-15px_rgb(255_255_255_/0.5)]"
123
+ >
122
124
  {#if settings.type == "input" || settings.type == "slider"}
123
125
  <div>
124
126
  <span class="text-7xl">{currentValue}</span>
@@ -156,10 +158,10 @@
156
158
  {/if}
157
159
  <input
158
160
  bind:value={currentValue}
159
- class={twMerge(`flex-1 w-full rounded-2xl border px-8 py-1 text-center shadow-[0_0_3px_rgb(0_0_0_/0.25)] transition duration-200
161
+ class={twMerge(`flex-1 w-full rounded-2xl border px-8 py-1 text-center shadow-(--border-shadow-color) transition duration-200
160
162
  outline-none focus:shadow-[0_0_6px_var(--bg-color)] focus:border-(--bg-color) [&::-webkit-inner-spin-button]:hidden [&::-webkit-outer-spin-button]:hidden
161
163
  border-(--back-color)
162
- hover:shadow-[0_0_6px_rgb(0_0_0_/0.25)]`)}
164
+ hover:shadow-(--focus-shadow-color)`)}
163
165
  style="background: color-mix(in srgb, var(--back-color), var(--back-color) 70%);"
164
166
  id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
165
167
  type="number"
@@ -263,7 +265,7 @@
263
265
  [&::-webkit-slider-thumb]:w-4
264
266
  ${readonly ? "[&::-webkit-slider-thumb]:cursor-not-allowed" : "[&::-webkit-slider-thumb]:cursor-pointer"}
265
267
  [&::-webkit-slider-thumb]:rounded-full
266
- [&::-webkit-slider-thumb]:shadow-[var(--focus-shadow),]
268
+ [&::-webkit-slider-thumb]:shadow-(--focus-shadow)
267
269
  ${
268
270
  userAgent.includes("iOS") || userAgent.includes("iPhone") || userAgent.includes("iPad")
269
271
  ? "pl-3.5 [&::-webkit-slider-thumb]:ring-[6.5px]"
@@ -274,7 +276,7 @@
274
276
  [&::-moz-range-thumb]:size-4
275
277
  ${readonly ? "[&::-moz-range-thumb]:cursor-not-allowed" : "[&::-moz-range-thumb]:cursor-pointer"}
276
278
  [&::-moz-range-thumb]:rounded-full
277
- [&::-moz-range-thumb]:shadow-[var(--focus-shadow),]
279
+ [&::-moz-range-thumb]:shadow-(--focus-shadow)
278
280
  [&::-moz-range-thumb]:ring-[6px]
279
281
  [&::-moz-range-track]:rounded-full
280
282
  [&::-moz-range-track]:bg-(--gray-color)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "poe-svelte-ui-lib",
3
- "version": "1.9.16",
3
+ "version": "1.9.18",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "scripts": {