@juspay/svelte-ui-components 3.3.0 → 3.3.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.
@@ -2,9 +2,9 @@
2
2
  import { renderMarkdown } from './markdown';
3
3
  import type { MarkdownTextProperties } from './properties';
4
4
 
5
- let { markdown, breaks = false, testId, classes }: MarkdownTextProperties = $props();
5
+ let { markdown, breaks = false, testId, classes, tableLabel }: MarkdownTextProperties = $props();
6
6
 
7
- let html = $derived(renderMarkdown(markdown, { breaks }));
7
+ let html = $derived(renderMarkdown(markdown, { breaks, tableLabel }));
8
8
  </script>
9
9
 
10
10
  <div
@@ -106,16 +106,43 @@
106
106
  opacity: var(--markdown-text-blockquote-opacity, 0.85);
107
107
  }
108
108
 
109
- .markdown-text :global(table) {
109
+ /* The wrapper scrolls, not the table. `display: block` on a `<table>` is what
110
+ would make `overflow-x` work on the element itself, but it also strips the
111
+ table's semantics for assistive technology, so the scroll container is a
112
+ separate box and the table stays a table. `max-width` bounds the wrapper to
113
+ the message; the table's `max-content` width is what overflows it. */
114
+ .markdown-text :global(.markdown-table-wrapper) {
110
115
  display: block;
111
116
  max-width: 100%;
112
117
  overflow-x: auto;
113
- border-collapse: collapse;
114
118
  margin: 0.5em 0;
115
119
  }
116
120
 
121
+ /* The wrapper holds focus, so it has to show it: a tab stop with no visible
122
+ ring is a keyboard user's dead end. Same default as Table's focusable rows. */
123
+ .markdown-text :global(.markdown-table-wrapper:focus-visible) {
124
+ outline: 2px solid var(--markdown-text-focus-outline-color, #3b82f6);
125
+ outline-offset: 2px;
126
+ }
127
+
128
+ /* Without an intrinsic width the table is exactly its container's width and a
129
+ six-column table compresses instead of scrolling. `max-content` supplies
130
+ that width; `min-width` keeps a narrow table filling the message rather
131
+ than shrink-wrapping to its content. */
132
+ .markdown-text :global(.markdown-table-wrapper table) {
133
+ width: max-content;
134
+ min-width: 100%;
135
+ border-collapse: collapse;
136
+ }
137
+
138
+ /* The container sets `overflow-wrap: anywhere` so long unbroken strings in a
139
+ message cannot force it wide. Inside a table that rule defeats the width
140
+ above: it makes every character a break opportunity, so `max-content`
141
+ resolves to `min-content` and the table collapses again. Cells opt back
142
+ out — they are sized by the column model, not by the message box. */
117
143
  .markdown-text :global(th),
118
144
  .markdown-text :global(td) {
145
+ overflow-wrap: normal;
119
146
  padding: 5px 10px;
120
147
  border: 1px solid var(--markdown-text-table-border-color, rgba(0, 0, 0, 0.12));
121
148
  text-align: left;
@@ -84,6 +84,28 @@ const EXTERNAL_ANCHOR_PATTERN = /<a href="(https?:\/\/[^"]*)"/g;
84
84
  function annotateExternalLinks(html) {
85
85
  return html.replace(EXTERNAL_ANCHOR_PATTERN, '<a href="$1" target="_blank" rel="noopener noreferrer"');
86
86
  }
87
+ /* A wide table has to scroll, and the scroll container has to be reachable.
88
+ Both constraints land on a wrapper rather than on the `<table>` itself:
89
+ `display: block` on a table is what makes `overflow-x` work, but it also
90
+ drops the element's table semantics, so assistive technology loses row and
91
+ column navigation on exactly the content that most needs it. Wrapping keeps
92
+ the table a table. `tabindex="0"` is the other half — an element with
93
+ `overflow-x: auto` cannot be scrolled with arrow keys unless it can hold
94
+ focus, so without it the new scrolling is mouse-only. Table.svelte reaches
95
+ the same shape with `.table-scroll`, and BarChart and Book both pair a
96
+ scrollable region with a tabindex. */
97
+ const TABLE_OPEN = /<table>/g;
98
+ const TABLE_CLOSE = /<\/table>/g;
99
+ function wrapTables(html, label) {
100
+ /* `role="region"` without an accessible name announces a landmark the user
101
+ cannot identify, which is worse than no landmark, so the role appears only
102
+ when the caller supplies a name. The tabindex does not depend on it:
103
+ keyboard scrolling should work either way. */
104
+ const open = typeof label === 'string' && label.length > 0
105
+ ? `<div class="markdown-table-wrapper" tabindex="0" role="region" aria-label="${escapeHtml(label)}">`
106
+ : '<div class="markdown-table-wrapper" tabindex="0">';
107
+ return html.replace(TABLE_OPEN, `${open}<table>`).replace(TABLE_CLOSE, '</table></div>');
108
+ }
87
109
  function instanceFor(options) {
88
110
  const breaks = options.breaks === true;
89
111
  const key = breaks ? 'breaks' : 'default';
@@ -101,5 +123,10 @@ function instanceFor(options) {
101
123
  export function renderMarkdown(markdown, options = {}) {
102
124
  const instance = instanceFor(options);
103
125
  const output = options.inline === true ? instance.parseInline(markdown) : instance.parse(markdown);
104
- return typeof output === 'string' ? annotateExternalLinks(output) : '';
126
+ if (typeof output !== 'string') {
127
+ return '';
128
+ }
129
+ /* Inline parsing produces no block elements, so there is no table to wrap. */
130
+ const linked = annotateExternalLinks(output);
131
+ return options.inline === true ? linked : wrapTables(linked, options.tableLabel);
105
132
  }
@@ -13,6 +13,13 @@ export type OptionalMarkdownTextProperties = {
13
13
  breaks?: boolean;
14
14
  testId?: string;
15
15
  classes?: string;
16
+ /**
17
+ * Accessible name for the scrollable region wrapping each table. Supplying it
18
+ * adds `role="region"` and `aria-label`; without it the wrapper stays
19
+ * keyboard-scrollable but announces no landmark, since an unnamed region is
20
+ * worse than none.
21
+ */
22
+ tableLabel?: string;
16
23
  };
17
24
  export type RenderMarkdownOptions = {
18
25
  /** Render single newlines as `<br>` (GFM "breaks" mode). */
@@ -24,4 +31,6 @@ export type RenderMarkdownOptions = {
24
31
  * link/image protocols are stripped.
25
32
  */
26
33
  inline?: boolean;
34
+ /** Accessible name for the scroll region wrapping each table. See `MarkdownTextProperties.tableLabel`. */
35
+ tableLabel?: string;
27
36
  };
package/dist-wc/index.js CHANGED
@@ -33595,6 +33595,10 @@ function escapeHtml(e) {
33595
33595
  function annotateExternalLinks(e) {
33596
33596
  return e.replace(EXTERNAL_ANCHOR_PATTERN, "<a href=\"$1\" target=\"_blank\" rel=\"noopener noreferrer\"");
33597
33597
  }
33598
+ function wrapTables(e, t) {
33599
+ let n = typeof t == "string" && t.length > 0 ? `<div class="markdown-table-wrapper" tabindex="0" role="region" aria-label="${escapeHtml(t)}">` : "<div class=\"markdown-table-wrapper\" tabindex=\"0\">";
33600
+ return e.replace(TABLE_OPEN, `${n}<table>`).replace(TABLE_CLOSE, "</table></div>");
33601
+ }
33598
33602
  function instanceFor(e) {
33599
33603
  let t = e.breaks === !0, n = t ? "breaks" : "default", i = instances.get(n);
33600
33604
  return i || (i = new q({
@@ -33605,9 +33609,11 @@ function instanceFor(e) {
33605
33609
  }
33606
33610
  function renderMarkdown(e, t = {}) {
33607
33611
  let n = instanceFor(t), i = t.inline === !0 ? n.parseInline(e) : n.parse(e);
33608
- return typeof i == "string" ? annotateExternalLinks(i) : "";
33612
+ if (typeof i != "string") return "";
33613
+ let a = annotateExternalLinks(i);
33614
+ return t.inline === !0 ? a : wrapTables(a, t.tableLabel);
33609
33615
  }
33610
- var SAFE_LINK_PROTOCOLS, SAFE_IMAGE_PROTOCOLS, NUMERIC_REFERENCE, NAMED_WHITESPACE_REFERENCE, STRIPPED_BY_URL_PARSER, sanitizingRenderer, instances, EXTERNAL_ANCHOR_PATTERN, init_markdown = __esmMin((() => {
33616
+ var SAFE_LINK_PROTOCOLS, SAFE_IMAGE_PROTOCOLS, NUMERIC_REFERENCE, NAMED_WHITESPACE_REFERENCE, STRIPPED_BY_URL_PARSER, sanitizingRenderer, instances, EXTERNAL_ANCHOR_PATTERN, TABLE_OPEN, TABLE_CLOSE, init_markdown = __esmMin((() => {
33611
33617
  init_marked_esm(), SAFE_LINK_PROTOCOLS = new Set([
33612
33618
  "http:",
33613
33619
  "https:",
@@ -33623,7 +33629,7 @@ var SAFE_LINK_PROTOCOLS, SAFE_IMAGE_PROTOCOLS, NUMERIC_REFERENCE, NAMED_WHITESPA
33623
33629
  image(e) {
33624
33630
  return hasSafeProtocol(e.href, SAFE_IMAGE_PROTOCOLS) ? !1 : escapeHtml(e.text);
33625
33631
  }
33626
- }, instances = /* @__PURE__ */ new Map(), EXTERNAL_ANCHOR_PATTERN = /<a href="(https?:\/\/[^"]*)"/g;
33632
+ }, instances = /* @__PURE__ */ new Map(), EXTERNAL_ANCHOR_PATTERN = /<a href="(https?:\/\/[^"]*)"/g, TABLE_OPEN = /<table>/g, TABLE_CLOSE = /<\/table>/g;
33627
33633
  })), root$12 = /* @__PURE__ */ from_html("<div class=\"avatar svelte-ivh8u\"><!></div>"), root_1$10 = /* @__PURE__ */ from_html("<div class=\"header svelte-ivh8u\"><!></div>"), root_2$7 = /* @__PURE__ */ from_html("<div class=\"body svelte-ivh8u\"><!></div>"), root_3$7 = /* @__PURE__ */ from_html("<div class=\"body svelte-ivh8u\"></div>"), root_4$6 = /* @__PURE__ */ from_html("<div class=\"body text svelte-ivh8u\"> </div>"), root_5$6 = /* @__PURE__ */ from_html("<span class=\"typing svelte-ivh8u\"><!></span>"), root_6$6 = /* @__PURE__ */ from_html("<div class=\"message-attachments svelte-ivh8u\"><!></div>"), root_7$5 = /* @__PURE__ */ from_html("<div class=\"action svelte-ivh8u\"><!></div>"), root_8$5 = /* @__PURE__ */ from_html("<div class=\"action svelte-ivh8u\"><!></div> <div class=\"action svelte-ivh8u\"><!></div>", 1), root_9$2 = /* @__PURE__ */ from_html("<div class=\"actions svelte-ivh8u\"><!> <!> <!> <!></div>"), root_10$1 = /* @__PURE__ */ from_html("<article><div class=\"row svelte-ivh8u\"><!> <div class=\"content svelte-ivh8u\"><!> <div class=\"bubble svelte-ivh8u\"><!> <!></div> <!> <!></div></div></article>"), $$css$13 = {
33628
33634
  hash: "svelte-ivh8u",
33629
33635
  code: ".chat-message.svelte-ivh8u {box-sizing:border-box;display:flex;flex-direction:column;max-width:var(--chat-message-max-width, 82%);margin:var(--chat-message-margin, 0);}.chat-message.party-sender.svelte-ivh8u {align-self:flex-end;align-items:flex-end;}.chat-message.party-responder.svelte-ivh8u {align-self:flex-start;align-items:flex-start;}.row.svelte-ivh8u {display:flex;gap:var(--chat-message-gap, 10px);align-items:flex-end;width:100%;}.chat-message.party-sender.svelte-ivh8u .row:where(.svelte-ivh8u) {flex-direction:row-reverse;}.avatar.svelte-ivh8u {display:flex;flex-shrink:0;align-items:center;justify-content:center;}.content.svelte-ivh8u {display:flex;flex-direction:column;gap:var(--chat-message-content-gap, 6px);min-width:0;}.header.svelte-ivh8u {font-size:var(--chat-message-header-font-size, 0.75rem);color:var(--chat-message-header-color, #71717a);}.bubble.svelte-ivh8u {box-sizing:border-box;padding:var(--chat-message-bubble-padding, 9px 13px);border-radius:var(--chat-message-bubble-border-radius, 16px);font-size:var(--chat-message-font-size, 0.9375rem);line-height:var(--chat-message-line-height, 1.5);color:var(--chat-message-color, #27272a);background:var(--chat-message-background, #f4f4f5);border:var(--chat-message-border, none);box-shadow:var(--chat-message-box-shadow, none);word-wrap:break-word;overflow-wrap:anywhere;}.chat-message.party-sender.svelte-ivh8u .bubble:where(.svelte-ivh8u) {color:var(--chat-message-sender-color, #ffffff);background:var(--chat-message-sender-background, #18181b);border:var(--chat-message-sender-border, none);border-radius:var(\n --chat-message-sender-border-radius,\n var(--chat-message-bubble-border-radius, 16px)\n );}.chat-message.party-responder.svelte-ivh8u .bubble:where(.svelte-ivh8u) {color:var(--chat-message-responder-color, var(--chat-message-color, #27272a));background:var(--chat-message-responder-background, transparent);border:var(--chat-message-responder-border, none);padding:var(--chat-message-responder-padding, 2px 0);}.chat-message.error.svelte-ivh8u .bubble:where(.svelte-ivh8u) {color:var(--chat-message-error-color, #e0334b);}.text.svelte-ivh8u {white-space:pre-wrap;}.typing.svelte-ivh8u {display:inline-flex;align-items:center;}.message-attachments.svelte-ivh8u {display:flex;flex-direction:column;gap:var(--chat-message-attachments-gap, 8px);margin:var(--chat-message-attachments-margin, 4px 0 0 0);}.message-attachments.svelte-ivh8u:empty {display:none;}.actions.svelte-ivh8u {display:flex;align-items:center;gap:var(--chat-message-actions-gap, 2px);opacity:var(--chat-message-actions-opacity, 0);transition:var(--chat-message-actions-transition, opacity 0.15s ease);--button-width: var(--chat-message-action-size, 28px);--button-height: var(--chat-message-action-size, 28px);--button-padding: var(--chat-message-action-padding, 6px);--button-border-radius: var(--chat-message-action-border-radius, 6px);--button-color: var(--chat-message-action-background-color, transparent);--button-text-color: var(--chat-message-action-color, #71717a);--button-content-gap: 0px;--button-hover-color: var(--chat-message-action-hover-background-color, #f4f4f5);}.chat-message.svelte-ivh8u:hover .actions:where(.svelte-ivh8u),\n .chat-message.svelte-ivh8u:focus-within .actions:where(.svelte-ivh8u) {opacity:1;}.action.svelte-ivh8u {display:flex;}.action.svelte-ivh8u svg {height:100%;width:100%;}\n\n @media (hover: none) {.actions.svelte-ivh8u {opacity:1;}\n }.body.svelte-ivh8u p {margin:var(--chat-message-paragraph-margin, 0 0 0.5em 0);}.body.svelte-ivh8u p:last-child {margin-bottom:0;}.body.svelte-ivh8u a {color:var(--chat-message-link-color, #6d28d9);text-decoration:underline;text-underline-offset:2px;}.body.svelte-ivh8u code {font-family:var(--chat-message-code-font-family, ui-monospace, monospace);font-size:0.88em;background:var(--chat-message-code-background, rgba(0, 0, 0, 0.05));padding:1px 5px;border-radius:4px;}.body.svelte-ivh8u pre {background:var(--chat-message-pre-background, rgba(0, 0, 0, 0.05));padding:10px 12px;border-radius:8px;overflow-x:auto;margin:0.5em 0;}.body.svelte-ivh8u pre code {background:transparent;padding:0;}.body.svelte-ivh8u ul,\n .body.svelte-ivh8u ol {margin:var(--chat-message-list-margin, 0.4em 0);padding-left:var(--chat-message-list-padding, 1.4em);}.body.svelte-ivh8u li {margin:0.2em 0;}.body.svelte-ivh8u h1,\n .body.svelte-ivh8u h2,\n .body.svelte-ivh8u h3,\n .body.svelte-ivh8u h4,\n .body.svelte-ivh8u h5,\n .body.svelte-ivh8u h6 {margin:var(--chat-message-heading-margin, 0.8em 0 0.4em 0);line-height:1.3;}.body.svelte-ivh8u h1 {font-size:1.35em;}.body.svelte-ivh8u h2 {font-size:1.2em;}.body.svelte-ivh8u h3 {font-size:1.1em;}.body.svelte-ivh8u h4,\n .body.svelte-ivh8u h5,\n .body.svelte-ivh8u h6 {font-size:1em;}.body.svelte-ivh8u blockquote {margin:0.5em 0;padding:2px 0 2px 12px;border-left:3px solid var(--chat-message-blockquote-border-color, rgba(0, 0, 0, 0.15));opacity:var(--chat-message-blockquote-opacity, 0.85);}.body.svelte-ivh8u table {display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:0.5em 0;}.body.svelte-ivh8u th,\n .body.svelte-ivh8u td {padding:5px 10px;border:1px solid var(--chat-message-table-border-color, rgba(0, 0, 0, 0.12));text-align:left;}.body.svelte-ivh8u th {background:var(--chat-message-table-header-background, rgba(0, 0, 0, 0.04));}.body.svelte-ivh8u img {max-width:100%;border-radius:var(--chat-message-image-border-radius, 8px);}.body.svelte-ivh8u hr {border:none;border-top:1px solid var(--chat-message-hr-color, rgba(0, 0, 0, 0.12));margin:0.8em 0;}"
@@ -37001,12 +37007,15 @@ customElements.define("sui-chat-message-list", create_custom_element(ChatMessage
37001
37007
  }, [], [], { mode: "open" })), init_markdown();
37002
37008
  var root$5 = /* @__PURE__ */ from_html("<div></div>"), $$css$6 = {
37003
37009
  hash: "svelte-1d6q5h0",
37004
- code: ".markdown-text.svelte-1d6q5h0 {font-size:var(--markdown-text-font-size, inherit);line-height:var(--markdown-text-line-height, 1.5);color:var(--markdown-text-color, inherit);word-wrap:break-word;overflow-wrap:anywhere;}.markdown-text.svelte-1d6q5h0 p {margin:var(--markdown-text-paragraph-margin, 0 0 0.5em 0);}.markdown-text.svelte-1d6q5h0 p:last-child {margin-bottom:0;}.markdown-text.svelte-1d6q5h0 h1,\n .markdown-text.svelte-1d6q5h0 h2,\n .markdown-text.svelte-1d6q5h0 h3,\n .markdown-text.svelte-1d6q5h0 h4,\n .markdown-text.svelte-1d6q5h0 h5,\n .markdown-text.svelte-1d6q5h0 h6 {margin:var(--markdown-text-heading-margin, 0.8em 0 0.4em 0);line-height:1.3;}.markdown-text.svelte-1d6q5h0 h1 {font-size:1.35em;}.markdown-text.svelte-1d6q5h0 h2 {font-size:1.2em;}.markdown-text.svelte-1d6q5h0 h3 {font-size:1.1em;}.markdown-text.svelte-1d6q5h0 h4,\n .markdown-text.svelte-1d6q5h0 h5,\n .markdown-text.svelte-1d6q5h0 h6 {font-size:1em;}.markdown-text.svelte-1d6q5h0 a {color:var(--markdown-text-link-color, #6d28d9);text-decoration:underline;text-underline-offset:2px;}.markdown-text.svelte-1d6q5h0 code {font-family:var(--markdown-text-code-font-family, ui-monospace, monospace);font-size:0.88em;background:var(--markdown-text-code-background, rgba(0, 0, 0, 0.05));padding:1px 5px;border-radius:4px;}.markdown-text.svelte-1d6q5h0 pre {background:var(--markdown-text-pre-background, rgba(0, 0, 0, 0.05));padding:10px 12px;border-radius:8px;overflow-x:auto;margin:0.5em 0;}.markdown-text.svelte-1d6q5h0 pre code {background:transparent;padding:0;}.markdown-text.svelte-1d6q5h0 ul,\n .markdown-text.svelte-1d6q5h0 ol {margin:var(--markdown-text-list-margin, 0.4em 0);padding-left:var(--markdown-text-list-padding, 1.4em);}.markdown-text.svelte-1d6q5h0 li {margin:0.2em 0;}.markdown-text.svelte-1d6q5h0 blockquote {margin:0.5em 0;padding:2px 0 2px 12px;border-left:3px solid var(--markdown-text-blockquote-border-color, rgba(0, 0, 0, 0.15));color:var(--markdown-text-blockquote-color, inherit);opacity:var(--markdown-text-blockquote-opacity, 0.85);}.markdown-text.svelte-1d6q5h0 table {display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:0.5em 0;}.markdown-text.svelte-1d6q5h0 th,\n .markdown-text.svelte-1d6q5h0 td {padding:5px 10px;border:1px solid var(--markdown-text-table-border-color, rgba(0, 0, 0, 0.12));text-align:left;}.markdown-text.svelte-1d6q5h0 th {background:var(--markdown-text-table-header-background, rgba(0, 0, 0, 0.04));}.markdown-text.svelte-1d6q5h0 img {max-width:100%;border-radius:var(--markdown-text-image-border-radius, 8px);}.markdown-text.svelte-1d6q5h0 hr {border:none;border-top:1px solid var(--markdown-text-hr-color, rgba(0, 0, 0, 0.12));margin:0.8em 0;}"
37010
+ code: ".markdown-text.svelte-1d6q5h0 {font-size:var(--markdown-text-font-size, inherit);line-height:var(--markdown-text-line-height, 1.5);color:var(--markdown-text-color, inherit);word-wrap:break-word;overflow-wrap:anywhere;}.markdown-text.svelte-1d6q5h0 p {margin:var(--markdown-text-paragraph-margin, 0 0 0.5em 0);}.markdown-text.svelte-1d6q5h0 p:last-child {margin-bottom:0;}.markdown-text.svelte-1d6q5h0 h1,\n .markdown-text.svelte-1d6q5h0 h2,\n .markdown-text.svelte-1d6q5h0 h3,\n .markdown-text.svelte-1d6q5h0 h4,\n .markdown-text.svelte-1d6q5h0 h5,\n .markdown-text.svelte-1d6q5h0 h6 {margin:var(--markdown-text-heading-margin, 0.8em 0 0.4em 0);line-height:1.3;}.markdown-text.svelte-1d6q5h0 h1 {font-size:1.35em;}.markdown-text.svelte-1d6q5h0 h2 {font-size:1.2em;}.markdown-text.svelte-1d6q5h0 h3 {font-size:1.1em;}.markdown-text.svelte-1d6q5h0 h4,\n .markdown-text.svelte-1d6q5h0 h5,\n .markdown-text.svelte-1d6q5h0 h6 {font-size:1em;}.markdown-text.svelte-1d6q5h0 a {color:var(--markdown-text-link-color, #6d28d9);text-decoration:underline;text-underline-offset:2px;}.markdown-text.svelte-1d6q5h0 code {font-family:var(--markdown-text-code-font-family, ui-monospace, monospace);font-size:0.88em;background:var(--markdown-text-code-background, rgba(0, 0, 0, 0.05));padding:1px 5px;border-radius:4px;}.markdown-text.svelte-1d6q5h0 pre {background:var(--markdown-text-pre-background, rgba(0, 0, 0, 0.05));padding:10px 12px;border-radius:8px;overflow-x:auto;margin:0.5em 0;}.markdown-text.svelte-1d6q5h0 pre code {background:transparent;padding:0;}.markdown-text.svelte-1d6q5h0 ul,\n .markdown-text.svelte-1d6q5h0 ol {margin:var(--markdown-text-list-margin, 0.4em 0);padding-left:var(--markdown-text-list-padding, 1.4em);}.markdown-text.svelte-1d6q5h0 li {margin:0.2em 0;}.markdown-text.svelte-1d6q5h0 blockquote {margin:0.5em 0;padding:2px 0 2px 12px;border-left:3px solid var(--markdown-text-blockquote-border-color, rgba(0, 0, 0, 0.15));color:var(--markdown-text-blockquote-color, inherit);opacity:var(--markdown-text-blockquote-opacity, 0.85);}\n\n /* The wrapper scrolls, not the table. `display: block` on a `<table>` is what\n would make `overflow-x` work on the element itself, but it also strips the\n table's semantics for assistive technology, so the scroll container is a\n separate box and the table stays a table. `max-width` bounds the wrapper to\n the message; the table's `max-content` width is what overflows it. */.markdown-text.svelte-1d6q5h0 .markdown-table-wrapper {display:block;max-width:100%;overflow-x:auto;margin:0.5em 0;}\n\n /* The wrapper holds focus, so it has to show it: a tab stop with no visible\n ring is a keyboard user's dead end. Same default as Table's focusable rows. */.markdown-text.svelte-1d6q5h0 .markdown-table-wrapper:focus-visible {outline:2px solid var(--markdown-text-focus-outline-color, #3b82f6);outline-offset:2px;}\n\n /* Without an intrinsic width the table is exactly its container's width and a\n six-column table compresses instead of scrolling. `max-content` supplies\n that width; `min-width` keeps a narrow table filling the message rather\n than shrink-wrapping to its content. */.markdown-text.svelte-1d6q5h0 .markdown-table-wrapper table {width:max-content;min-width:100%;border-collapse:collapse;}\n\n /* The container sets `overflow-wrap: anywhere` so long unbroken strings in a\n message cannot force it wide. Inside a table that rule defeats the width\n above: it makes every character a break opportunity, so `max-content`\n resolves to `min-content` and the table collapses again. Cells opt back\n out — they are sized by the column model, not by the message box. */.markdown-text.svelte-1d6q5h0 th,\n .markdown-text.svelte-1d6q5h0 td {overflow-wrap:normal;padding:5px 10px;border:1px solid var(--markdown-text-table-border-color, rgba(0, 0, 0, 0.12));text-align:left;}.markdown-text.svelte-1d6q5h0 th {background:var(--markdown-text-table-header-background, rgba(0, 0, 0, 0.04));}.markdown-text.svelte-1d6q5h0 img {max-width:100%;border-radius:var(--markdown-text-image-border-radius, 8px);}.markdown-text.svelte-1d6q5h0 hr {border:none;border-top:1px solid var(--markdown-text-hr-color, rgba(0, 0, 0, 0.12));margin:0.8em 0;}"
37005
37011
  };
37006
37012
  function MarkdownText(e, t) {
37007
37013
  push(t, !0), append_styles$1(e, $$css$6);
37008
- let n = prop(t, "markdown", 7), i = prop(t, "breaks", 7, !1), a = prop(t, "testId", 7), o = prop(t, "classes", 7), s = /* @__PURE__ */ user_derived(() => renderMarkdown(n(), { breaks: i() }));
37009
- var c = {
37014
+ let n = prop(t, "markdown", 7), i = prop(t, "breaks", 7, !1), a = prop(t, "testId", 7), o = prop(t, "classes", 7), s = prop(t, "tableLabel", 7), c = /* @__PURE__ */ user_derived(() => renderMarkdown(n(), {
37015
+ breaks: i(),
37016
+ tableLabel: s()
37017
+ }));
37018
+ var l = {
37010
37019
  get markdown() {
37011
37020
  return n();
37012
37021
  },
@@ -37030,17 +37039,24 @@ function MarkdownText(e, t) {
37030
37039
  },
37031
37040
  set classes(e) {
37032
37041
  o(e), flushSync();
37042
+ },
37043
+ get tableLabel() {
37044
+ return s();
37045
+ },
37046
+ set tableLabel(e) {
37047
+ s(e), flushSync();
37033
37048
  }
37034
- }, l = root$5();
37035
- return html(l, () => get(s), !0), reset(l), template_effect(() => {
37036
- set_class(l, 1, `markdown-text ${o() ?? "" ?? ""}`, "svelte-1d6q5h0"), set_attribute(l, "data-pw", typeof a() == "string" ? a() : null), set_attribute(l, "testid", typeof a() == "string" ? a() : null);
37037
- }), append(e, l), pop(c);
37049
+ }, u = root$5();
37050
+ return html(u, () => get(c), !0), reset(u), template_effect(() => {
37051
+ set_class(u, 1, `markdown-text ${o() ?? "" ?? ""}`, "svelte-1d6q5h0"), set_attribute(u, "data-pw", typeof a() == "string" ? a() : null), set_attribute(u, "testid", typeof a() == "string" ? a() : null);
37052
+ }), append(e, u), pop(l);
37038
37053
  }
37039
37054
  create_custom_element(MarkdownText, {
37040
37055
  markdown: {},
37041
37056
  breaks: {},
37042
37057
  testId: {},
37043
- classes: {}
37058
+ classes: {},
37059
+ tableLabel: {}
37044
37060
  }, [], [], { mode: "open" });
37045
37061
  //#endregion
37046
37062
  //#region src/wc/components/MarkdownText.wc.svelte
@@ -37061,7 +37077,11 @@ customElements.define("sui-markdown-text", create_custom_element(MarkdownText_wc
37061
37077
  attribute: "test-id",
37062
37078
  type: "String"
37063
37079
  },
37064
- classes: { type: "String" }
37080
+ classes: { type: "String" },
37081
+ tableLabel: {
37082
+ attribute: "table-label",
37083
+ type: "String"
37084
+ }
37065
37085
  }, [], [], { mode: "open" }));
37066
37086
  //#endregion
37067
37087
  //#region src/wc/components/ChatComposer.wc.svelte
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@juspay/svelte-ui-components",
3
- "version": "3.3.0",
3
+ "version": "3.3.1",
4
4
  "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
5
5
  "keywords": [
6
6
  "svelte",