@juspay/svelte-ui-components 2.95.0 → 2.96.0

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 (7) hide show
  1. package/dist/ColorPicker/ColorPicker.svelte +3 -1
  2. package/dist/Input/Input.svelte +1 -0
  3. package/dist/Table/Table.svelte +19 -6
  4. package/dist/assets/sort-default.svg +2 -2
  5. package/package.json +1 -1
  6. package/dist/assets/sort-ascending.svg +0 -4
  7. package/dist/assets/sort-descending.svg +0 -4
package/dist/ColorPicker/ColorPicker.svelte CHANGED
@@ -401,7 +401,8 @@
401
401
  );
402
402
  --input-box-shadow: none;
403
403
  --input-width: 100%;
404
- --input-height: 38px;
404
+ --input-height: var(--color-picker-input-height, 38px);
405
+ --input-text-transform: var(--color-picker-value-text-transform, none);
405
406
  margin-left: -1px;
406
407
  }
407
408
 
@@ -538,6 +539,7 @@
538
539
  --input-height: 32px;
539
540
  --input-text-align: center;
540
541
  --input-focus-border: 1px solid var(--color-picker-field-focus-border, #3b82f6);
542
+ --input-text-transform: var(--color-picker-value-text-transform, none);
541
543
  }
542
544
 
543
545
  .cp-split-input {
package/dist/Input/Input.svelte CHANGED
@@ -396,6 +396,7 @@
396
396
  resize: none;
397
397
  visibility: var(--input-visibility, visible);
398
398
  text-align: var(--input-text-align, left);
399
+ text-transform: var(--input-text-transform, none);
399
400
  color: var(--input-text-color);
400
401
  }
401
402
 
package/dist/Table/Table.svelte CHANGED
@@ -10,8 +10,6 @@
10
10
  import Pagination from '../Pagination/Pagination.svelte';
11
11
  import Select from '../Select/Select.svelte';
12
12
  import chevronDownSmSvg from '../assets/chevron-down-sm.svg?raw';
13
- import sortAscendingSvg from '../assets/sort-ascending.svg?raw';
14
- import sortDescendingSvg from '../assets/sort-descending.svg?raw';
15
13
  import sortDefaultSvg from '../assets/sort-default.svg?raw';
16
14
  import searchSvg from '../assets/search.svg?raw';
17
15
  import closeSvg from '../assets/close.svg?raw';
@@ -743,18 +741,18 @@
743
741
  {#if typeof sortAscIcon === 'function'}
744
742
  {@render sortAscIcon()}
745
743
  {:else}
746
- <span class="sort-icon">
744
+ <span class="sort-icon sort-icon-asc">
747
745
  <!-- eslint-disable svelte/no-at-html-tags -->
748
- {@html sortAscendingSvg}
746
+ {@html sortDefaultSvg}
749
747
  </span>
750
748
  {/if}
751
749
  {:else if sortColumn === colIndex && sortDirection === 'desc'}
752
750
  {#if typeof sortDescIcon === 'function'}
753
751
  {@render sortDescIcon()}
754
752
  {:else}
755
- <span class="sort-icon">
753
+ <span class="sort-icon sort-icon-desc">
756
754
  <!-- eslint-disable svelte/no-at-html-tags -->
757
- {@html sortDescendingSvg}
755
+ {@html sortDefaultSvg}
758
756
  </span>
759
757
  {/if}
760
758
  {:else if typeof sortDefaultIcon === 'function'}
@@ -1338,6 +1336,21 @@
1338
1336
  display: block;
1339
1337
  }
1340
1338
 
1339
+ /* Two-tone state painting. The shared sort-default.svg asset stays
1340
+ color-agnostic (fill="currentColor", like every other icon asset); the
1341
+ state colors live here. All halves default to the inactive fill, then
1342
+ the sorted direction's half is released back to currentColor (the
1343
+ active color above). Path order in the asset is up-chevron first,
1344
+ down-chevron second. */
1345
+ .sort-button :global(.sort-icon svg path) {
1346
+ fill: var(--table-sort-inactive-color, #c7c7c7);
1347
+ }
1348
+
1349
+ .sort-button :global(.sort-icon-asc svg path:first-child),
1350
+ .sort-button :global(.sort-icon-desc svg path:last-child) {
1351
+ fill: currentColor;
1352
+ }
1353
+
1341
1354
  /* The design system draws every sort state fully opaque — faintness comes
1342
1355
  from the glyph fills (inactive halves #C7C7C7, active direction
1343
1356
  currentColor), never from transparency. The opacity vars remain for
package/dist/assets/sort-default.svg CHANGED
@@ -1,4 +1,4 @@
1
1
  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path fill-rule="evenodd" clip-rule="evenodd" d="M5.64645 1.64645C5.84171 1.45118 6.15829 1.45118 6.35355 1.64645L8.85355 4.14645C9.04882 4.34171 9.04882 4.65829 8.85355 4.85355C8.65829 5.04882 8.34171 5.04882 8.14645 4.85355L6 2.70711L3.85355 4.85355C3.65829 5.04882 3.34171 5.04882 3.14645 4.85355C2.95118 4.65829 2.95118 4.34171 3.14645 4.14645L5.64645 1.64645Z" fill="var(--table-sort-inactive-color, #C7C7C7)"/>
3
- <path fill-rule="evenodd" clip-rule="evenodd" d="M3.14645 7.14645C3.34171 6.95118 3.65829 6.95118 3.85355 7.14645L6 9.29289L8.14645 7.14645C8.34171 6.95118 8.65829 6.95118 8.85355 7.14645C9.04882 7.34171 9.04882 7.65829 8.85355 7.85355L6.35355 10.3536C6.15829 10.5488 5.84171 10.5488 5.64645 10.3536L3.14645 7.85355C2.95118 7.65829 2.95118 7.34171 3.14645 7.14645Z" fill="var(--table-sort-inactive-color, #C7C7C7)"/>
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M5.64645 1.64645C5.84171 1.45118 6.15829 1.45118 6.35355 1.64645L8.85355 4.14645C9.04882 4.34171 9.04882 4.65829 8.85355 4.85355C8.65829 5.04882 8.34171 5.04882 8.14645 4.85355L6 2.70711L3.85355 4.85355C3.65829 5.04882 3.34171 5.04882 3.14645 4.85355C2.95118 4.65829 2.95118 4.34171 3.14645 4.14645L5.64645 1.64645Z" fill="currentColor"/>
3
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M3.14645 7.14645C3.34171 6.95118 3.65829 6.95118 3.85355 7.14645L6 9.29289L8.14645 7.14645C8.34171 6.95118 8.65829 6.95118 8.85355 7.14645C9.04882 7.34171 9.04882 7.65829 8.85355 7.85355L6.35355 10.3536C6.15829 10.5488 5.84171 10.5488 5.64645 10.3536L3.14645 7.85355C2.95118 7.65829 2.95118 7.34171 3.14645 7.14645Z" fill="currentColor"/>
4
4
  </svg>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@juspay/svelte-ui-components",
3
- "version": "2.95.0",
3
+ "version": "2.96.0",
4
4
  "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
5
5
  "keywords": [
6
6
  "svelte",
package/dist/assets/sort-ascending.svg DELETED
@@ -1,4 +0,0 @@
1
- <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path fill-rule="evenodd" clip-rule="evenodd" d="M5.64645 1.64645C5.84171 1.45118 6.15829 1.45118 6.35355 1.64645L8.85355 4.14645C9.04882 4.34171 9.04882 4.65829 8.85355 4.85355C8.65829 5.04882 8.34171 5.04882 8.14645 4.85355L6 2.70711L3.85355 4.85355C3.65829 5.04882 3.34171 5.04882 3.14645 4.85355C2.95118 4.65829 2.95118 4.34171 3.14645 4.14645L5.64645 1.64645Z" fill="currentColor"/>
3
- <path fill-rule="evenodd" clip-rule="evenodd" d="M3.14645 7.14645C3.34171 6.95118 3.65829 6.95118 3.85355 7.14645L6 9.29289L8.14645 7.14645C8.34171 6.95118 8.65829 6.95118 8.85355 7.14645C9.04882 7.34171 9.04882 7.65829 8.85355 7.85355L6.35355 10.3536C6.15829 10.5488 5.84171 10.5488 5.64645 10.3536L3.14645 7.85355C2.95118 7.65829 2.95118 7.34171 3.14645 7.14645Z" fill="var(--table-sort-inactive-color, #C7C7C7)"/>
4
- </svg>
package/dist/assets/sort-descending.svg DELETED
@@ -1,4 +0,0 @@
1
- <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path fill-rule="evenodd" clip-rule="evenodd" d="M5.64645 1.64645C5.84171 1.45118 6.15829 1.45118 6.35355 1.64645L8.85355 4.14645C9.04882 4.34171 9.04882 4.65829 8.85355 4.85355C8.65829 5.04882 8.34171 5.04882 8.14645 4.85355L6 2.70711L3.85355 4.85355C3.65829 5.04882 3.34171 5.04882 3.14645 4.85355C2.95118 4.65829 2.95118 4.34171 3.14645 4.14645L5.64645 1.64645Z" fill="var(--table-sort-inactive-color, #C7C7C7)"/>
3
- <path fill-rule="evenodd" clip-rule="evenodd" d="M3.14645 7.14645C3.34171 6.95118 3.65829 6.95118 3.85355 7.14645L6 9.29289L8.14645 7.14645C8.34171 6.95118 8.65829 6.95118 8.85355 7.14645C9.04882 7.34171 9.04882 7.65829 8.85355 7.85355L6.35355 10.3536C6.15829 10.5488 5.84171 10.5488 5.64645 10.3536L3.14645 7.85355C2.95118 7.65829 2.95118 7.34171 3.14645 7.14645Z" fill="currentColor"/>
4
- </svg>