@juspay/svelte-ui-components 2.94.0 → 2.95.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 (5) hide show
  1. package/dist/Table/Table.svelte +20 -6
  2. package/dist/assets/sort-ascending.svg +4 -0
  3. package/dist/assets/sort-default.svg +3 -3
  4. package/dist/assets/sort-descending.svg +4 -0
  5. package/package.json +1 -1
package/dist/Table/Table.svelte CHANGED
@@ -10,8 +10,8 @@
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 chevronUpSvg from '../assets/chevron-up.svg?raw';
14
- import chevronDownSvg from '../assets/chevron-down.svg?raw';
13
+ import sortAscendingSvg from '../assets/sort-ascending.svg?raw';
14
+ import sortDescendingSvg from '../assets/sort-descending.svg?raw';
15
15
  import sortDefaultSvg from '../assets/sort-default.svg?raw';
16
16
  import searchSvg from '../assets/search.svg?raw';
17
17
  import closeSvg from '../assets/close.svg?raw';
@@ -745,7 +745,7 @@
745
745
  {:else}
746
746
  <span class="sort-icon">
747
747
  <!-- eslint-disable svelte/no-at-html-tags -->
748
- {@html chevronUpSvg}
748
+ {@html sortAscendingSvg}
749
749
  </span>
750
750
  {/if}
751
751
  {:else if sortColumn === colIndex && sortDirection === 'desc'}
@@ -754,7 +754,7 @@
754
754
  {:else}
755
755
  <span class="sort-icon">
756
756
  <!-- eslint-disable svelte/no-at-html-tags -->
757
- {@html chevronDownSvg}
757
+ {@html sortDescendingSvg}
758
758
  </span>
759
759
  {/if}
760
760
  {:else if typeof sortDefaultIcon === 'function'}
@@ -1324,18 +1324,32 @@
1324
1324
  align-items: center;
1325
1325
  }
1326
1326
 
1327
+ /* The sorted-direction half paints via currentColor; without an explicit
1328
+ color it inherits the Button's text color (white on the default button
1329
+ theme), which disappears on light headers. Default to the design
1330
+ system's active blue. */
1331
+ .sort-button :global(.sort-icon:not(.sort-icon-idle)) {
1332
+ color: var(--table-sort-active-color, #1b85ff);
1333
+ }
1334
+
1327
1335
  .sort-button :global(.sort-icon svg) {
1328
1336
  width: var(--table-sort-icon-size, 14px);
1329
1337
  height: var(--table-sort-icon-size, 14px);
1330
1338
  display: block;
1331
1339
  }
1332
1340
 
1341
+ /* The design system draws every sort state fully opaque — faintness comes
1342
+ from the glyph fills (inactive halves #C7C7C7, active direction
1343
+ currentColor), never from transparency. The opacity vars remain for
1344
+ consumers that prefer a fade but now default to solid; hover steps the
1345
+ inactive halves to the design system's hover gray. */
1333
1346
  .sort-button :global(.sort-icon-idle) {
1334
- opacity: var(--table-sort-idle-opacity, 0.5);
1347
+ opacity: var(--table-sort-idle-opacity, 1);
1335
1348
  }
1336
1349
 
1337
1350
  .sort-button:hover :global(.sort-icon-idle) {
1338
- opacity: var(--table-sort-idle-hover-opacity, 0.85);
1351
+ opacity: var(--table-sort-idle-hover-opacity, 1);
1352
+ --table-sort-inactive-color: var(--table-sort-hover-color, #797979);
1339
1353
  }
1340
1354
 
1341
1355
  /* ── Empty ──────────────────────────────────────────────────────────────── */
package/dist/assets/sort-ascending.svg ADDED
@@ -0,0 +1,4 @@
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-default.svg CHANGED
@@ -1,4 +1,4 @@
1
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <polyline points="18 15 12 9 6 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.5"/>
3
- <polyline points="6 17 12 23 18 17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.5"/>
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)"/>
4
4
  </svg>
package/dist/assets/sort-descending.svg ADDED
@@ -0,0 +1,4 @@
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>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@juspay/svelte-ui-components",
3
- "version": "2.94.0",
3
+ "version": "2.95.0",
4
4
  "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
5
5
  "keywords": [
6
6
  "svelte",