@juspay/svelte-ui-components 4.46.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/Img/Img.svelte
CHANGED
|
@@ -368,4 +368,28 @@
|
|
|
368
368
|
background: var(--image-hover-background, var(--image-background));
|
|
369
369
|
border: var(--image-hover-border, var(--image-border));
|
|
370
370
|
}
|
|
371
|
+
|
|
372
|
+
/* The ceilings sit in a cascade layer and read through :where(), for one reason:
|
|
373
|
+
an Img that sets neither token must compute exactly what it computed before
|
|
374
|
+
they existed, beside whatever max-width rule the app already has.
|
|
375
|
+
|
|
376
|
+
A layer loses to every rule outside a layer, whatever its selector and
|
|
377
|
+
whichever stylesheet loads first, so an app's `img { max-width: 100% }`, its
|
|
378
|
+
`* { max-width: 100% }` and a zero-specificity `:where(img)` reset all keep
|
|
379
|
+
winning. A zero-specificity rule outside a layer would not do that: it ties
|
|
380
|
+
with the app's `*` and `:where()` rules, and the later stylesheet takes it.
|
|
381
|
+
:where() keeps the rule at zero specificity should it ever leave the layer;
|
|
382
|
+
Svelte compiles :where(img) to :where(img.svelte-hash).
|
|
383
|
+
|
|
384
|
+
The fallback is `revert-layer`, not `none`. `none` is the initial value, but
|
|
385
|
+
as a declaration it would outrank a reset an app keeps in an earlier layer
|
|
386
|
+
(Tailwind 4's preflight does). `revert-layer` hands the property back to the
|
|
387
|
+
layers below this one, and to `none` when there are none, so an unset token
|
|
388
|
+
declares nothing. */
|
|
389
|
+
@layer svelte-ui-img {
|
|
390
|
+
:where(img, svg) {
|
|
391
|
+
max-width: var(--image-max-width, revert-layer);
|
|
392
|
+
max-height: var(--image-max-height, revert-layer);
|
|
393
|
+
}
|
|
394
|
+
}
|
|
371
395
|
</style>
|
package/dist-wc/index.js
CHANGED
|
@@ -3863,7 +3863,7 @@ customElements.define("sui-animated-number", create_custom_element(AnimatedNumbe
|
|
|
3863
3863
|
//#region src/lib/Img/Img.svelte
|
|
3864
3864
|
var root_1$100 = /* @__PURE__ */ from_svg("<svg></svg>"), root_2$78 = /* @__PURE__ */ from_html("<img/>"), $$css$204 = {
|
|
3865
3865
|
hash: "svelte-13ogpty",
|
|
3866
|
-
code: "img.svelte-13ogpty,\n svg.svelte-13ogpty {object-fit:var(--image-object-fit);height:var(--image-height, 24px);width:var(--image-width, 24px);padding:var(--image-padding, 0px);border-radius:var(--image-border-radius, 0px);margin:var(--image-margin, 0px);filter:var(--image-filter, none);background:var(--image-background);border:var(--image-border);transition:var(--image-transition);}img.svelte-13ogpty:hover,\n svg.svelte-13ogpty:hover {background:var(--image-hover-background, var(--image-background));border:var(--image-hover-border, var(--image-border));}"
|
|
3866
|
+
code: "img.svelte-13ogpty,\n svg.svelte-13ogpty {object-fit:var(--image-object-fit);height:var(--image-height, 24px);width:var(--image-width, 24px);padding:var(--image-padding, 0px);border-radius:var(--image-border-radius, 0px);margin:var(--image-margin, 0px);filter:var(--image-filter, none);background:var(--image-background);border:var(--image-border);transition:var(--image-transition);}img.svelte-13ogpty:hover,\n svg.svelte-13ogpty:hover {background:var(--image-hover-background, var(--image-background));border:var(--image-hover-border, var(--image-border));}\n\n /* The ceilings sit in a cascade layer and read through :where(), for one reason:\n an Img that sets neither token must compute exactly what it computed before\n they existed, beside whatever max-width rule the app already has.\n\n A layer loses to every rule outside a layer, whatever its selector and\n whichever stylesheet loads first, so an app's `img { max-width: 100% }`, its\n `* { max-width: 100% }` and a zero-specificity `:where(img)` reset all keep\n winning. A zero-specificity rule outside a layer would not do that: it ties\n with the app's `*` and `:where()` rules, and the later stylesheet takes it.\n :where() keeps the rule at zero specificity should it ever leave the layer;\n Svelte compiles :where(img) to :where(img.svelte-hash).\n\n The fallback is `revert-layer`, not `none`. `none` is the initial value, but\n as a declaration it would outrank a reset an app keeps in an earlier layer\n (Tailwind 4's preflight does). `revert-layer` hands the property back to the\n layers below this one, and to `none` when there are none, so an unset token\n declares nothing. */\n @layer svelte-ui-img {:where(img.svelte-13ogpty, svg.svelte-13ogpty) {max-width:var(--image-max-width, revert-layer);max-height:var(--image-max-height, revert-layer);}\n }"
|
|
3867
3867
|
};
|
|
3868
3868
|
function Img(e, t) {
|
|
3869
3869
|
push(t, !0), append_styles$1(e, $$css$204);
|
|
@@ -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);
|