@juspay/svelte-ui-components 4.47.0 → 4.48.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.
|
@@ -399,6 +399,23 @@
|
|
|
399
399
|
flex: 1 0 auto;
|
|
400
400
|
}
|
|
401
401
|
|
|
402
|
+
/* Hooks for an app that lays the message column out itself: the clearance below the last
|
|
403
|
+
message, the width it centres at on a wide screen, and the space beside it. An auto margin
|
|
404
|
+
turns the column's stretch off (it shrinks to its content), so centring it takes a width as
|
|
405
|
+
well: width 100% beside a maximum width and auto inline margins. They sit in
|
|
406
|
+
:where() for the reason the list's overflow tokens do, so a rule of the app's own that
|
|
407
|
+
wrote these properties before the tokens existed keeps winning over Svelte's scope class,
|
|
408
|
+
and they fall back to revert-layer, not to a value, so a rule of the app's inside a
|
|
409
|
+
cascade @layer still wins while a token is unset. Unset, the column has no padding, no
|
|
410
|
+
margin and no maximum width, as before. */
|
|
411
|
+
:where(.inner) {
|
|
412
|
+
padding-bottom: var(--chat-message-list-inner-padding-bottom, revert-layer);
|
|
413
|
+
padding-inline: var(--chat-message-list-inner-padding-inline, revert-layer);
|
|
414
|
+
width: var(--chat-message-list-inner-width, revert-layer);
|
|
415
|
+
max-width: var(--chat-message-list-inner-max-width, revert-layer);
|
|
416
|
+
margin-inline: var(--chat-message-list-inner-margin-inline, revert-layer);
|
|
417
|
+
}
|
|
418
|
+
|
|
402
419
|
.jump {
|
|
403
420
|
position: sticky;
|
|
404
421
|
bottom: var(--chat-message-list-jump-bottom, 8px);
|
package/dist-wc/index.js
CHANGED
|
@@ -52105,7 +52105,7 @@ create_custom_element(ChatMessage, {
|
|
|
52105
52105
|
//#region src/lib/ChatMessageList/ChatMessageList.svelte
|
|
52106
52106
|
var root$14 = /* @__PURE__ */ from_html("<div class=\"jump svelte-qpm4dm\"><!></div>"), root_1$13 = /* @__PURE__ */ from_html("<div role=\"log\" aria-live=\"polite\"><div class=\"inner svelte-qpm4dm\"><!> <!> <!></div></div>"), $$css$34 = {
|
|
52107
52107
|
hash: "svelte-qpm4dm",
|
|
52108
|
-
code: ".chat-message-list.svelte-qpm4dm {box-sizing:border-box;display:flex;flex-direction:column;flex:1;width:100%;overflow-y:auto;padding:var(--chat-message-list-padding, 0.75rem 1.5rem);scroll-behavior:var(--chat-message-list-scroll-behavior, smooth);}\n\n /* Both properties sit inside :where() so they carry no specificity. A host that\n already sets overflow-x or overscroll-behavior on the list wrote that rule\n before these tokens existed, and Svelte's scope class would otherwise make\n this tie it or beat it.\n An unset token falls back to revert-layer, not to a value: this rule is\n unlayered, and an unlayered declaration beats any rule inside a cascade\n @layer whatever its specificity, so a fixed fallback would override a layered\n rule of the host's that used to win. revert-layer hands the property back to\n what the cascade held below this rule, which is that layered rule if there is\n one and the property's initial value if not: overflow-x `visible` (computing\n to `auto` beside overflow-y `auto`) and overscroll-behavior `auto`, the list\n as it was before the tokens. An engine without revert-layer drops the\n declaration to that same initial value. */:where(.chat-message-list.svelte-qpm4dm) {overflow-x:var(--chat-message-list-overflow-x, revert-layer);overscroll-behavior:var(--chat-message-list-overscroll-behavior, revert-layer);}.chat-message-list.hide-scrollbar.svelte-qpm4dm {-ms-overflow-style:none;scrollbar-width:none;}.chat-message-list.hide-scrollbar.svelte-qpm4dm::-webkit-scrollbar {display:none;}\n\n /* The inner wrapper is what the pin-sender-turn policy reserves height on; it\n carries the column layout so the reservation becomes scrollable headroom. */.inner.svelte-qpm4dm {display:flex;flex-direction:column;gap:var(--chat-message-list-gap, 1rem);flex:1 0 auto;}.jump.svelte-qpm4dm {position:sticky;bottom:var(--chat-message-list-jump-bottom, 8px);align-self:center;margin-top:var(--chat-message-list-jump-margin-top, 4px);--button-width: var(--chat-message-list-jump-size, 36px);--button-height: var(--chat-message-list-jump-size, 36px);--button-padding: var(--chat-message-list-jump-padding, 8px);--button-border-radius: var(--chat-message-list-jump-border-radius, 50%);--button-color: var(--chat-message-list-jump-background-color, #ffffff);--button-text-color: var(--chat-message-list-jump-color, #52525b);--button-border: var(--chat-message-list-jump-border, 1px solid #e4e4e7);--button-box-shadow: var(--chat-message-list-jump-box-shadow, 0 4px 12px rgba(0, 0, 0, 0.12));--button-content-gap: 0px;--button-hover-color: var(--chat-message-list-jump-hover-background-color, #f4f4f5);}.jump.svelte-qpm4dm svg {height:100%;width:100%;}\n\n @media (prefers-reduced-motion: reduce) {.chat-message-list.svelte-qpm4dm {scroll-behavior:auto;}\n }"
|
|
52108
|
+
code: ".chat-message-list.svelte-qpm4dm {box-sizing:border-box;display:flex;flex-direction:column;flex:1;width:100%;overflow-y:auto;padding:var(--chat-message-list-padding, 0.75rem 1.5rem);scroll-behavior:var(--chat-message-list-scroll-behavior, smooth);}\n\n /* Both properties sit inside :where() so they carry no specificity. A host that\n already sets overflow-x or overscroll-behavior on the list wrote that rule\n before these tokens existed, and Svelte's scope class would otherwise make\n this tie it or beat it.\n An unset token falls back to revert-layer, not to a value: this rule is\n unlayered, and an unlayered declaration beats any rule inside a cascade\n @layer whatever its specificity, so a fixed fallback would override a layered\n rule of the host's that used to win. revert-layer hands the property back to\n what the cascade held below this rule, which is that layered rule if there is\n one and the property's initial value if not: overflow-x `visible` (computing\n to `auto` beside overflow-y `auto`) and overscroll-behavior `auto`, the list\n as it was before the tokens. An engine without revert-layer drops the\n declaration to that same initial value. */:where(.chat-message-list.svelte-qpm4dm) {overflow-x:var(--chat-message-list-overflow-x, revert-layer);overscroll-behavior:var(--chat-message-list-overscroll-behavior, revert-layer);}.chat-message-list.hide-scrollbar.svelte-qpm4dm {-ms-overflow-style:none;scrollbar-width:none;}.chat-message-list.hide-scrollbar.svelte-qpm4dm::-webkit-scrollbar {display:none;}\n\n /* The inner wrapper is what the pin-sender-turn policy reserves height on; it\n carries the column layout so the reservation becomes scrollable headroom. */.inner.svelte-qpm4dm {display:flex;flex-direction:column;gap:var(--chat-message-list-gap, 1rem);flex:1 0 auto;}\n\n /* Hooks for an app that lays the message column out itself: the clearance below the last\n message, the width it centres at on a wide screen, and the space beside it. An auto margin\n turns the column's stretch off (it shrinks to its content), so centring it takes a width as\n well: width 100% beside a maximum width and auto inline margins. They sit in\n :where() for the reason the list's overflow tokens do, so a rule of the app's own that\n wrote these properties before the tokens existed keeps winning over Svelte's scope class,\n and they fall back to revert-layer, not to a value, so a rule of the app's inside a\n cascade @layer still wins while a token is unset. Unset, the column has no padding, no\n margin and no maximum width, as before. */:where(.inner.svelte-qpm4dm) {padding-bottom:var(--chat-message-list-inner-padding-bottom, revert-layer);padding-inline:var(--chat-message-list-inner-padding-inline, revert-layer);width:var(--chat-message-list-inner-width, revert-layer);max-width:var(--chat-message-list-inner-max-width, revert-layer);margin-inline:var(--chat-message-list-inner-margin-inline, revert-layer);}.jump.svelte-qpm4dm {position:sticky;bottom:var(--chat-message-list-jump-bottom, 8px);align-self:center;margin-top:var(--chat-message-list-jump-margin-top, 4px);--button-width: var(--chat-message-list-jump-size, 36px);--button-height: var(--chat-message-list-jump-size, 36px);--button-padding: var(--chat-message-list-jump-padding, 8px);--button-border-radius: var(--chat-message-list-jump-border-radius, 50%);--button-color: var(--chat-message-list-jump-background-color, #ffffff);--button-text-color: var(--chat-message-list-jump-color, #52525b);--button-border: var(--chat-message-list-jump-border, 1px solid #e4e4e7);--button-box-shadow: var(--chat-message-list-jump-box-shadow, 0 4px 12px rgba(0, 0, 0, 0.12));--button-content-gap: 0px;--button-hover-color: var(--chat-message-list-jump-hover-background-color, #f4f4f5);}.jump.svelte-qpm4dm svg {height:100%;width:100%;}\n\n @media (prefers-reduced-motion: reduce) {.chat-message-list.svelte-qpm4dm {scroll-behavior:auto;}\n }"
|
|
52109
52109
|
};
|
|
52110
52110
|
function ChatMessageList(e, t) {
|
|
52111
52111
|
push(t, !0), append_styles$1(e, $$css$34);
|