@juspay/svelte-ui-components 4.32.0 → 4.32.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/ChatComposer/ChatComposer.svelte +4 -0
  2. package/dist/Snippet/Snippet.svelte +7 -1
  3. package/dist/Table/Table.svelte +1 -0
  4. package/dist-wc/index.js +9 -3
  5. package/package.json +1 -1
package/dist/ChatComposer/ChatComposer.svelte CHANGED
@@ -225,6 +225,7 @@
225
225
  {#if showAttach}
226
226
  <div class="control attach">
227
227
  <Button
228
+ variant="ghost"
228
229
  onclick={() => {
229
230
  if (typeof onattachclick === 'function') {
230
231
  onattachclick();
@@ -281,6 +282,7 @@
281
282
  class:busy={dictationState === 'busy'}
282
283
  >
283
284
  <Button
285
+ variant="ghost"
284
286
  onclick={() => onvoice?.()}
285
287
  disabled={resolvedVoiceDisabled}
286
288
  ariaLabel={voiceLabel}
@@ -429,6 +431,8 @@
429
431
  --button-text-color: var(--chat-composer-action-color, #52525b);
430
432
  --button-content-gap: 0px;
431
433
  --button-hover-color: var(--chat-composer-action-hover-background-color, #f4f4f5);
434
+ /* Ghost brings its own hover label; keep this control's, recording red included. */
435
+ --button-hover-text-color: var(--button-text-color);
432
436
  }
433
437
 
434
438
  .voice.recording {
package/dist/Snippet/Snippet.svelte CHANGED
@@ -57,7 +57,11 @@
57
57
  visible text of its own. Keeping it once the label swaps to
58
58
  "Copied!" would leave a screen reader announcing "Copy to clipboard"
59
59
  over the visible feedback (WCAG 2.5.3, Label in Name). -->
60
- <Button onclick={handleCopy} {...copyState.copied ? {} : { ariaLabel: 'Copy to clipboard' }}>
60
+ <Button
61
+ variant="ghost"
62
+ onclick={handleCopy}
63
+ {...copyState.copied ? {} : { ariaLabel: 'Copy to clipboard' }}
64
+ >
61
65
  {#if copyState.copied}
62
66
  <span class="snippet-copied">{copiedLabel}</span>
63
67
  {:else if typeof copyIcon === 'function'}
@@ -124,6 +128,8 @@
124
128
  --button-border-radius: var(--snippet-copy-border-radius, var(--radius, 4px));
125
129
  --cursor: var(--snippet-copy-cursor, pointer);
126
130
  --button-hover-color: var(--snippet-copy-hover-background, #333);
131
+ /* Ghost brings its own hover label; keep this button's. */
132
+ --button-hover-text-color: var(--button-text-color);
127
133
  display: flex;
128
134
  align-items: center;
129
135
  justify-content: center;
package/dist/Table/Table.svelte CHANGED
@@ -947,6 +947,7 @@
947
947
  {#if isColumnSortable(colIndex)}
948
948
  <div class="sort-button">
949
949
  <Button
950
+ variant="ghost"
950
951
  onclick={() => handleSort(colIndex)}
951
952
  ariaLabel={labels?.sortBy?.(header) ?? `Sort by ${header}`}
952
953
  >
package/dist-wc/index.js CHANGED
@@ -21617,7 +21617,7 @@ function createCopyState(e = {}) {
21617
21617
  //#region src/lib/Snippet/Snippet.svelte
21618
21618
  var root$47 = /* @__PURE__ */ from_html("<span class=\"snippet-copied svelte-ql5iye\"> </span>"), root_1$44 = /* @__PURE__ */ from_html("<span class=\"snippet-copy-icon svelte-ql5iye\"></span>"), root_2$33 = /* @__PURE__ */ from_html("<div class=\"snippet-copy svelte-ql5iye\"><!></div> <span class=\"snippet-status svelte-ql5iye\" role=\"status\" aria-live=\"polite\"> </span>", 1), root_3$30 = /* @__PURE__ */ from_html("<div><code class=\"snippet-code svelte-ql5iye\"><span class=\"snippet-prompt svelte-ql5iye\"> </span> <span class=\"snippet-text svelte-ql5iye\"> </span></code> <!></div>"), $$css$91 = {
21619
21619
  hash: "svelte-ql5iye",
21620
- code: ".snippet.svelte-ql5iye {display:flex;align-items:center;justify-content:space-between;gap:var(--snippet-gap, 8px);background:var(--snippet-background, #1e1e1e);border:var(--snippet-border, 1px solid #333);border-radius:var(--snippet-border-radius, var(--radius, 4px));padding:var(--snippet-padding, 12px 16px);font-family:var(--snippet-font-family, monospace);font-size:var(--snippet-font-size, 14px);color:var(--snippet-color, #e0e0e0);margin:var(--snippet-margin, 0);}.snippet-code.svelte-ql5iye {display:flex;align-items:center;overflow:hidden;flex:1;min-width:0;}.snippet-prompt.svelte-ql5iye {color:var(--snippet-prompt-color, #888);margin-right:var(--snippet-prompt-margin-right, 8px);flex-shrink:0;}.snippet-text.svelte-ql5iye {color:var(--snippet-text-color, #e0e0e0);font-family:var(--snippet-text-font-family, inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.snippet-copy.svelte-ql5iye {--button-color: var(--snippet-copy-background, transparent);--button-text-color: var(--snippet-copy-color, #888);--button-border: var(--snippet-copy-border, none);--button-padding: var(--snippet-copy-padding, 4px);--button-border-radius: var(--snippet-copy-border-radius, var(--radius, 4px));--cursor: var(--snippet-copy-cursor, pointer);--button-hover-color: var(--snippet-copy-hover-background, #333);display:flex;align-items:center;justify-content:center;flex-shrink:0;}.snippet-copy-icon.svelte-ql5iye {display:inline-flex;align-items:center;justify-content:center;width:var(--snippet-copy-size, 16px);height:var(--snippet-copy-size, 16px);}.snippet-copy-icon.svelte-ql5iye svg {width:100%;height:100%;}\n\n /* Announced, never shown: the visible \"Copied!\" is the label inside the\n button, and repeating it on screen would read as a duplicate. */.snippet-status.svelte-ql5iye {position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}.snippet-copied.svelte-ql5iye {color:var(--snippet-copied-color, #4caf50);font-size:var(--snippet-copied-font-size, 12px);font-family:var(--snippet-font-family, monospace);}"
21620
+ code: ".snippet.svelte-ql5iye {display:flex;align-items:center;justify-content:space-between;gap:var(--snippet-gap, 8px);background:var(--snippet-background, #1e1e1e);border:var(--snippet-border, 1px solid #333);border-radius:var(--snippet-border-radius, var(--radius, 4px));padding:var(--snippet-padding, 12px 16px);font-family:var(--snippet-font-family, monospace);font-size:var(--snippet-font-size, 14px);color:var(--snippet-color, #e0e0e0);margin:var(--snippet-margin, 0);}.snippet-code.svelte-ql5iye {display:flex;align-items:center;overflow:hidden;flex:1;min-width:0;}.snippet-prompt.svelte-ql5iye {color:var(--snippet-prompt-color, #888);margin-right:var(--snippet-prompt-margin-right, 8px);flex-shrink:0;}.snippet-text.svelte-ql5iye {color:var(--snippet-text-color, #e0e0e0);font-family:var(--snippet-text-font-family, inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.snippet-copy.svelte-ql5iye {--button-color: var(--snippet-copy-background, transparent);--button-text-color: var(--snippet-copy-color, #888);--button-border: var(--snippet-copy-border, none);--button-padding: var(--snippet-copy-padding, 4px);--button-border-radius: var(--snippet-copy-border-radius, var(--radius, 4px));--cursor: var(--snippet-copy-cursor, pointer);--button-hover-color: var(--snippet-copy-hover-background, #333);\n /* Ghost brings its own hover label; keep this button's. */--button-hover-text-color: var(--button-text-color);display:flex;align-items:center;justify-content:center;flex-shrink:0;}.snippet-copy-icon.svelte-ql5iye {display:inline-flex;align-items:center;justify-content:center;width:var(--snippet-copy-size, 16px);height:var(--snippet-copy-size, 16px);}.snippet-copy-icon.svelte-ql5iye svg {width:100%;height:100%;}\n\n /* Announced, never shown: the visible \"Copied!\" is the label inside the\n button, and repeating it on screen would read as a duplicate. */.snippet-status.svelte-ql5iye {position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}.snippet-copied.svelte-ql5iye {color:var(--snippet-copied-color, #4caf50);font-size:var(--snippet-copied-font-size, 12px);font-family:var(--snippet-font-family, monospace);}"
21621
21621
  };
21622
21622
  function Snippet(e, t) {
21623
21623
  push(t, !0), append_styles$1(e, $$css$91);
@@ -21703,7 +21703,10 @@ function Snippet(e, t) {
21703
21703
  reset(re), reset(R);
21704
21704
  var be = sibling(R, 2), Me = (e) => {
21705
21705
  var t = root_2$33(), n = first_child(t);
21706
- Button(child(n), spread_props({ onclick: S }, () => h.copied ? {} : { ariaLabel: "Copy to clipboard" }, {
21706
+ Button(child(n), spread_props({
21707
+ variant: "ghost",
21708
+ onclick: S
21709
+ }, () => h.copied ? {} : { ariaLabel: "Copy to clipboard" }, {
21707
21710
  children: (e, t) => {
21708
21711
  var n = comment(), i = first_child(n), a = (e) => {
21709
21712
  var t = root$47(), n = child(t, !0);
@@ -23393,6 +23396,7 @@ function Table(e, t) {
23393
23396
  {
23394
23397
  let e = /* @__PURE__ */ user_derived(() => bt()?.sortBy?.(get(t)) ?? `Sort by ${get(t)}`);
23395
23398
  Button(a, {
23399
+ variant: "ghost",
23396
23400
  onclick: () => It(n),
23397
23401
  get ariaLabel() {
23398
23402
  return get(e);
@@ -51148,7 +51152,7 @@ function normalizeDictationState(e) {
51148
51152
  //#region src/lib/ChatComposer/ChatComposer.svelte
51149
51153
  var root$12 = /* @__PURE__ */ from_html("<div class=\"sr-only svelte-xpd394\" role=\"status\" aria-live=\"polite\"> </div>"), root_1$11 = /* @__PURE__ */ from_html("<div class=\"attachments-rich svelte-xpd394\"><!></div>"), root_2$6 = /* @__PURE__ */ from_html("<div class=\"attachments svelte-xpd394\"></div>"), root_3$6 = /* @__PURE__ */ from_html("<div class=\"control attach svelte-xpd394\"><!> <input type=\"file\" class=\"file-input\" hidden=\"\"/></div>"), root_4$5 = /* @__PURE__ */ from_html("<div class=\"leading svelte-xpd394\"><!></div>"), root_5$4 = /* @__PURE__ */ from_html("<div><!></div>"), root_6$4 = /* @__PURE__ */ from_html("<div class=\"control send stop svelte-xpd394\"><!></div>"), root_7$4 = /* @__PURE__ */ from_html("<div class=\"control send action svelte-xpd394\"><!></div>"), root_8$4 = /* @__PURE__ */ from_html("<div class=\"control send svelte-xpd394\"><!></div>"), root_9$3 = /* @__PURE__ */ from_html("<div><!> <!> <div class=\"input-row svelte-xpd394\"><!> <!> <textarea class=\"input svelte-xpd394\" rows=\"1\"></textarea> <!> <!></div></div>"), $$css$32 = {
51150
51154
  hash: "svelte-xpd394",
51151
- code: ".chat-composer.svelte-xpd394 {box-sizing:border-box;display:flex;flex-direction:column;gap:var(--chat-composer-stack-gap, 8px);width:var(--chat-composer-width, 100%);padding:var(--chat-composer-padding, 8px);background:var(--chat-composer-background, #ffffff);border:var(--chat-composer-border, 1px solid #e4e4e7);border-radius:var(--chat-composer-border-radius, 24px);box-shadow:var(--chat-composer-box-shadow, none);}.chat-composer.disabled.svelte-xpd394 {opacity:var(--chat-composer-disabled-opacity, 0.6);}\n\n /* .input below sets outline: none with nothing standing in for it, so the\n visible replacement lives here on the surrounding surface instead --\n :focus-within lights up whenever the textarea inside is focused, the same\n pattern Select's .select-trigger uses for its nested search input. */.chat-composer.svelte-xpd394:focus-within {border-color:var(--chat-composer-focus-border-color, #2563eb);box-shadow:var(--chat-composer-focus-shadow, 0 0 0 2px rgba(37, 99, 235, 0.2));}.attachments-rich.svelte-xpd394 {padding:var(--chat-composer-attachments-padding, 2px 4px 0);}.attachments.svelte-xpd394 {display:flex;flex-wrap:wrap;gap:var(--chat-composer-attachments-gap, 6px);padding:var(--chat-composer-attachments-padding, 2px 4px 0);}.input-row.svelte-xpd394 {display:flex;align-items:flex-end;gap:var(--chat-composer-gap, 8px);}.leading.svelte-xpd394 {display:flex;align-items:center;flex-shrink:0;}.input.svelte-xpd394 {flex:1;box-sizing:border-box;resize:none;border:none;outline:none;background:transparent;font-family:var(--chat-composer-font-family, inherit);font-size:var(--chat-composer-font-size, 0.9375rem);font-weight:var(--chat-composer-font-weight, 400);line-height:var(--chat-composer-line-height, 1.5);color:var(--chat-composer-color, #18181b);padding:var(--chat-composer-input-padding, 6px 4px);max-height:var(--chat-composer-max-height, 160px);overflow-y:auto;}.input.svelte-xpd394::placeholder {color:var(--chat-composer-placeholder-color, #52525b);}.control.svelte-xpd394 {flex-shrink:0;display:flex;}.control.svelte-xpd394 svg {height:100%;width:100%;}.attach.svelte-xpd394,\n .voice.svelte-xpd394 {--button-width: var(--chat-composer-action-size, 36px);--button-height: var(--chat-composer-action-size, 36px);--button-padding: var(--chat-composer-action-padding, 8px);--button-border-radius: var(--chat-composer-action-border-radius, 50%);--button-color: var(--chat-composer-action-background-color, transparent);--button-text-color: var(--chat-composer-action-color, #52525b);--button-content-gap: 0px;--button-hover-color: var(--chat-composer-action-hover-background-color, #f4f4f5);}.voice.recording.svelte-xpd394 {--button-color: var(--chat-composer-voice-recording-background-color, #fee2e2);--button-text-color: var(--chat-composer-voice-recording-color, #dc2626);}\n\n /* No dedicated busy palette: the disabled `Button` already dims itself\n (`--disabled-opacity`), which is enough to distinguish \"busy\" from the\n active \"recording\" red without inventing new color tokens that would\n need a matching dark-theme entry outside this component's scope. The\n `.busy` class is still applied to the wrapper (see markup) so a caller\n can target it with their own CSS if they want a distinct look. */.send.svelte-xpd394 {--button-width: var(--chat-composer-send-size, 40px);--button-height: var(--chat-composer-send-size, 40px);--button-padding: var(--chat-composer-send-padding, 8px);--button-border-radius: var(--chat-composer-send-border-radius, 50%);--button-color: var(--chat-composer-send-background-color, #18181b);--button-text-color: var(--chat-composer-send-color, #ffffff);--button-content-gap: 0px;--button-hover-color: var(--chat-composer-send-hover-background-color, #27272a);}.send.stop.svelte-xpd394 {--button-color: var(--chat-composer-stop-background-color, #18181b);--button-text-color: var(--chat-composer-stop-color, #ffffff);}\n\n /* Visually hidden but still read by assistive technology -- same pattern\n Table's caption and Label's required marker use. */.sr-only.svelte-xpd394 {position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap;border-width:0;}"
51155
+ code: ".chat-composer.svelte-xpd394 {box-sizing:border-box;display:flex;flex-direction:column;gap:var(--chat-composer-stack-gap, 8px);width:var(--chat-composer-width, 100%);padding:var(--chat-composer-padding, 8px);background:var(--chat-composer-background, #ffffff);border:var(--chat-composer-border, 1px solid #e4e4e7);border-radius:var(--chat-composer-border-radius, 24px);box-shadow:var(--chat-composer-box-shadow, none);}.chat-composer.disabled.svelte-xpd394 {opacity:var(--chat-composer-disabled-opacity, 0.6);}\n\n /* .input below sets outline: none with nothing standing in for it, so the\n visible replacement lives here on the surrounding surface instead --\n :focus-within lights up whenever the textarea inside is focused, the same\n pattern Select's .select-trigger uses for its nested search input. */.chat-composer.svelte-xpd394:focus-within {border-color:var(--chat-composer-focus-border-color, #2563eb);box-shadow:var(--chat-composer-focus-shadow, 0 0 0 2px rgba(37, 99, 235, 0.2));}.attachments-rich.svelte-xpd394 {padding:var(--chat-composer-attachments-padding, 2px 4px 0);}.attachments.svelte-xpd394 {display:flex;flex-wrap:wrap;gap:var(--chat-composer-attachments-gap, 6px);padding:var(--chat-composer-attachments-padding, 2px 4px 0);}.input-row.svelte-xpd394 {display:flex;align-items:flex-end;gap:var(--chat-composer-gap, 8px);}.leading.svelte-xpd394 {display:flex;align-items:center;flex-shrink:0;}.input.svelte-xpd394 {flex:1;box-sizing:border-box;resize:none;border:none;outline:none;background:transparent;font-family:var(--chat-composer-font-family, inherit);font-size:var(--chat-composer-font-size, 0.9375rem);font-weight:var(--chat-composer-font-weight, 400);line-height:var(--chat-composer-line-height, 1.5);color:var(--chat-composer-color, #18181b);padding:var(--chat-composer-input-padding, 6px 4px);max-height:var(--chat-composer-max-height, 160px);overflow-y:auto;}.input.svelte-xpd394::placeholder {color:var(--chat-composer-placeholder-color, #52525b);}.control.svelte-xpd394 {flex-shrink:0;display:flex;}.control.svelte-xpd394 svg {height:100%;width:100%;}.attach.svelte-xpd394,\n .voice.svelte-xpd394 {--button-width: var(--chat-composer-action-size, 36px);--button-height: var(--chat-composer-action-size, 36px);--button-padding: var(--chat-composer-action-padding, 8px);--button-border-radius: var(--chat-composer-action-border-radius, 50%);--button-color: var(--chat-composer-action-background-color, transparent);--button-text-color: var(--chat-composer-action-color, #52525b);--button-content-gap: 0px;--button-hover-color: var(--chat-composer-action-hover-background-color, #f4f4f5);\n /* Ghost brings its own hover label; keep this control's, recording red included. */--button-hover-text-color: var(--button-text-color);}.voice.recording.svelte-xpd394 {--button-color: var(--chat-composer-voice-recording-background-color, #fee2e2);--button-text-color: var(--chat-composer-voice-recording-color, #dc2626);}\n\n /* No dedicated busy palette: the disabled `Button` already dims itself\n (`--disabled-opacity`), which is enough to distinguish \"busy\" from the\n active \"recording\" red without inventing new color tokens that would\n need a matching dark-theme entry outside this component's scope. The\n `.busy` class is still applied to the wrapper (see markup) so a caller\n can target it with their own CSS if they want a distinct look. */.send.svelte-xpd394 {--button-width: var(--chat-composer-send-size, 40px);--button-height: var(--chat-composer-send-size, 40px);--button-padding: var(--chat-composer-send-padding, 8px);--button-border-radius: var(--chat-composer-send-border-radius, 50%);--button-color: var(--chat-composer-send-background-color, #18181b);--button-text-color: var(--chat-composer-send-color, #ffffff);--button-content-gap: 0px;--button-hover-color: var(--chat-composer-send-hover-background-color, #27272a);}.send.stop.svelte-xpd394 {--button-color: var(--chat-composer-stop-background-color, #18181b);--button-text-color: var(--chat-composer-stop-color, #ffffff);}\n\n /* Visually hidden but still read by assistive technology -- same pattern\n Table's caption and Label's required marker use. */.sr-only.svelte-xpd394 {position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap;border-width:0;}"
51152
51156
  };
51153
51157
  function ChatComposer(e, t) {
51154
51158
  push(t, !0), append_styles$1(e, $$css$32);
@@ -51641,6 +51645,7 @@ function ChatComposer(e, t) {
51641
51645
  var Sn = sibling(vn, 2), Cn = child(Sn), wn = (e) => {
51642
51646
  var t = root_3$6(), n = child(t);
51643
51647
  Button(n, {
51648
+ variant: "ghost",
51644
51649
  onclick: () => {
51645
51650
  if (typeof jt() == "function") {
51646
51651
  jt()();
@@ -51692,6 +51697,7 @@ function ChatComposer(e, t) {
51692
51697
  var t = root_5$4();
51693
51698
  let n;
51694
51699
  Button(child(t), {
51700
+ variant: "ghost",
51695
51701
  onclick: () => Ot()?.(),
51696
51702
  get disabled() {
51697
51703
  return get(rn);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@juspay/svelte-ui-components",
3
- "version": "4.32.0",
3
+ "version": "4.32.1",
4
4
  "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
5
5
  "keywords": [
6
6
  "svelte",