@juspay/svelte-ui-components 2.66.0 → 2.68.0

package/dist/Modal/Modal.svelte

@@ -335,6 +335,19 @@
     --cursor: var(--modal-footer-secondary-button-cursor, pointer);
     --opacity: var(--modal-footer-secondary-button-opacity, 1);
     --button-border: var(--modal-footer-secondary-button-border, none);
+    --disabled-background-color: var(
+      --modal-footer-secondary-button-disabled-color,
+      var(--modal-footer-secondary-button-color, #3a4550)
+    );
+    --disabled-text-color: var(
+      --modal-footer-secondary-button-disabled-text-color,
+      var(--modal-footer-secondary-button-text-color, white)
+    );
+    --disabled-border: var(
+      --modal-footer-secondary-button-disabled-border,
+      var(--modal-footer-secondary-button-border, none)
+    );
+    --disabled-opacity: var(--modal-footer-secondary-button-disabled-opacity, 0.4);
     --button-justify-content: var(--modal-footer-secondary-button-justify-content, center);
     --button-content-flex-direction: var(
       --modal-footer-secondary-button-content-flex-direction,
@@ -363,6 +376,19 @@
     --cursor: var(--modal-footer-primary-button-cursor, pointer);
     --opacity: var(--modal-footer-primary-button-opacity, 1);
     --button-border: var(--modal-footer-primary-button-border, none);
+    --disabled-background-color: var(
+      --modal-footer-primary-button-disabled-color,
+      var(--modal-footer-primary-button-color, #3a4550)
+    );
+    --disabled-text-color: var(
+      --modal-footer-primary-button-disabled-text-color,
+      var(--modal-footer-primary-button-text-color, white)
+    );
+    --disabled-border: var(
+      --modal-footer-primary-button-disabled-border,
+      var(--modal-footer-primary-button-border, none)
+    );
+    --disabled-opacity: var(--modal-footer-primary-button-disabled-opacity, 0.4);
     --button-justify-content: var(--modal-footer-primary-button-justify-content, center);
     --button-content-flex-direction: var(--modal-footer-primary-button-content-flex-direction, row);
     --button-content-gap: var(--modal-footer-primary-button-content-gap, 16px);

package/dist/Select/Select.svelte

@@ -4,6 +4,7 @@
   import Pill from '../Pill/Pill.svelte';
   import Img from '../Img/Img.svelte';
   import chevronDownSvg from '../assets/chevron-down.svg?raw';
+  import checkmarkSvg from '../assets/checkmark.svg?raw';
 
   let {
     items: rawItems,
@@ -378,9 +379,16 @@
               {#if typeof optionIndicator === 'function'}
                 {@render optionIndicator({ checked: value.includes(item.id) })}
               {:else}
-                <span class="select-option-indicator" aria-hidden="true"
-                  >{value.includes(item.id) ? '☑' : '☐'}</span
+                <span
+                  class="select-option-indicator"
+                  class:checked={value.includes(item.id)}
+                  aria-hidden="true"
                 >
+                  {#if value.includes(item.id)}
+                    <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                    <span class="select-option-check">{@html checkmarkSvg}</span>
+                  {/if}
+                </span>
               {/if}
             {/if}
             {item.label}
@@ -557,8 +565,37 @@
   .select-option-indicator {
     display: inline-flex;
     align-items: center;
-    color: var(--select-option-indicator-color, currentColor);
+    justify-content: center;
     flex-shrink: 0;
+    box-sizing: border-box;
+    width: var(--select-option-indicator-size, 18px);
+    height: var(--select-option-indicator-size, 18px);
+    border: var(--select-option-indicator-border, 2px solid #757575);
+    border-radius: var(--select-option-indicator-border-radius, 3px);
+    background-color: var(--select-option-indicator-background, transparent);
+    color: var(--select-option-indicator-color, currentColor);
+    transition:
+      background-color 0.15s,
+      border-color 0.15s;
+  }
+
+  .select-option-indicator.checked {
+    background-color: var(--select-option-indicator-checked-background, #2196f3);
+    border-color: var(--select-option-indicator-checked-border-color, #2196f3);
+  }
+
+  .select-option-check {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--select-option-indicator-check-size, 12px);
+    height: var(--select-option-indicator-check-size, 12px);
+    color: var(--select-option-indicator-check-color, #ffffff);
+  }
+
+  .select-option-check :global(svg) {
+    width: 100%;
+    height: 100%;
   }
 
   .select-empty {

package/dist/Select/properties.d.ts

@@ -17,6 +17,14 @@ export type OptionalSelectProperties = {
     placeholder?: string;
     disabled?: boolean;
     bottomContent?: Snippet;
+    /**
+     * Snippet for rendering a custom multi-select option indicator, receiving `{ checked }`.
+     * When omitted, multiple-mode options render a design-system checkbox box (bordered square
+     * that fills and shows a checkmark when selected), themeable via the `--select-option-indicator-*`
+     * CSS variables: `-size` (18px), `-border`, `-border-radius`, `-background`,
+     * `-checked-background`, `-checked-border-color`, `-check-size`, `-check-color`. Provide this
+     * snippet to fully replace the indicator (e.g. to restore the legacy ☑/☐ glyph).
+     */
     optionIndicator?: Snippet<[{
         checked: boolean;
     }]>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "2.66.0",
+  "version": "2.68.0",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",