@juspay/svelte-ui-components 2.95.0 → 2.95.1

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 (5) hide show
  1. package/dist/Table/Table.svelte +19 -6
  2. package/dist/assets/sort-default.svg +2 -2
  3. package/package.json +1 -1
  4. package/dist/assets/sort-ascending.svg +0 -4
  5. package/dist/assets/sort-descending.svg +0 -4
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.95.1",
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>