@juspay/svelte-ui-components 4.34.0 → 4.34.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.
- package/dist/HITL/HITL.svelte +2 -2
- package/dist-wc/index.js +1 -1
- package/package.json +1 -1
package/dist/HITL/HITL.svelte
CHANGED
|
@@ -913,8 +913,8 @@
|
|
|
913
913
|
loaders in Button and ListItem, where the base rule is the FINISHED state and
|
|
914
914
|
stopping the animation would claim completion that has not happened. */
|
|
915
915
|
@media (prefers-reduced-motion: reduce) {
|
|
916
|
-
.hitl
|
|
917
|
-
.
|
|
916
|
+
.hitl,
|
|
917
|
+
.completion {
|
|
918
918
|
animation: none;
|
|
919
919
|
}
|
|
920
920
|
}
|
package/dist-wc/index.js
CHANGED
|
@@ -56736,7 +56736,7 @@ customElements.define("sui-attachment-chip-row", create_custom_element(Attachmen
|
|
|
56736
56736
|
//#region src/lib/HITL/timers.ts
|
|
56737
56737
|
var pauseAllConfirmationTimers = writable(!1), root$4 = /* @__PURE__ */ from_html("<p class=\"description svelte-13vzr9e\"> </p>"), root_1$3 = /* @__PURE__ */ from_html("<div class=\"params svelte-13vzr9e\"><span class=\"parameter-label svelte-13vzr9e\"> </span> <span class=\"parameter-value svelte-13vzr9e\"> </span></div>"), root_2$1 = /* @__PURE__ */ from_svg("<svg viewBox=\"0 0 20 20\" fill=\"none\"><circle cx=\"10\" cy=\"10\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.5\"></circle><path d=\"M6 10.2l2.6 2.6L14 7.4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg>"), root_3$1 = /* @__PURE__ */ from_svg("<svg viewBox=\"0 0 20 20\" fill=\"none\"><circle cx=\"10\" cy=\"10\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.5\"></circle><path d=\"M6 10h8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path></svg>"), root_4$1 = /* @__PURE__ */ from_html("<div class=\"completion svelte-13vzr9e\"><span aria-hidden=\"true\"><!></span> <span> </span></div>"), root_5 = /* @__PURE__ */ from_html("<div class=\"extra-content svelte-13vzr9e\"><!></div>"), root_6 = /* @__PURE__ */ from_html("<span class=\"question-header svelte-13vzr9e\"> </span>"), root_7 = /* @__PURE__ */ from_html("<div class=\"question svelte-13vzr9e\" role=\"group\"><!> <span class=\"question-text svelte-13vzr9e\"> </span> <div class=\"question-options svelte-13vzr9e\"></div></div>"), root_8 = /* @__PURE__ */ from_html("<div class=\"questions svelte-13vzr9e\"></div>"), root_9 = /* @__PURE__ */ from_html("<div class=\"reply-box svelte-13vzr9e\"><!> <div class=\"action-buttons svelte-13vzr9e\"><div class=\"cancel-button svelte-13vzr9e\"><!></div> <div class=\"confirm-button svelte-13vzr9e\"><!></div></div></div>"), root_10 = /* @__PURE__ */ from_html("<div class=\"cancel-button svelte-13vzr9e\"><!></div>"), root_11 = /* @__PURE__ */ from_html("<div class=\"extra-action-button svelte-13vzr9e\"><!></div>"), root_12 = /* @__PURE__ */ from_html("<div class=\"confirm-button svelte-13vzr9e\"><!></div>"), root_13 = /* @__PURE__ */ from_html("<div class=\"progress-anchor svelte-13vzr9e\"><!></div>"), root_14 = /* @__PURE__ */ from_html("<div class=\"confirm-button svelte-13vzr9e\"><!> <!></div>"), root_15 = /* @__PURE__ */ from_html("<div class=\"action-buttons svelte-13vzr9e\"><!> <!> <!> <!></div>"), root_16 = /* @__PURE__ */ from_html("<!> <!> <!>", 1), root_17 = /* @__PURE__ */ from_html("<div class=\"confirmation-header svelte-13vzr9e\"><span class=\"badge svelte-13vzr9e\"> </span> <span class=\"title svelte-13vzr9e\"> </span></div> <div class=\"header-border svelte-13vzr9e\"></div> <!> <div class=\"confirmation-body svelte-13vzr9e\"><!> <!></div>", 1), root_18 = /* @__PURE__ */ from_html("<div><!></div>"), $$css$10 = {
|
|
56738
56738
|
hash: "svelte-13vzr9e",
|
|
56739
|
-
code: ".hitl.svelte-13vzr9e {position:relative;width:100%;max-width:var(--hitl-max-width, 100%);margin:var(--hitl-margin, 0);\n animation: svelte-13vzr9e-hitl-slide-in var(--hitl-slide-in-animation-duration, var(--motion-duration, 0.3s))\n var(--hitl-slide-in-animation-easing, var(--motion-easing, ease-out)) forwards;contain:layout style;}.confirmation-header.svelte-13vzr9e {display:flex;flex-direction:column;gap:var(--hitl-header-gap, 2px);margin-bottom:var(--hitl-header-margin-bottom, 0.75rem);}.badge.svelte-13vzr9e {font-size:var(--hitl-badge-font-size, 0.6875rem);font-weight:var(--hitl-badge-font-weight, 600);letter-spacing:var(--hitl-badge-letter-spacing, 0.06em);color:var(--hitl-badge-color, #595959);text-transform:uppercase;}.title.svelte-13vzr9e {font-size:var(--hitl-title-font-size, 1rem);font-weight:var(--hitl-title-font-weight, 600);color:var(--hitl-title-color, #1f1f23);}.header-border.svelte-13vzr9e {height:1px;background-color:var(--hitl-divider-color, #e4e4e7);}.description.svelte-13vzr9e {margin:0;padding:var(--hitl-description-padding, 0.25rem 0);font-size:var(--hitl-description-font-size, 0.8125rem);line-height:var(--hitl-description-line-height, inherit);color:var(--hitl-description-color, #5c5c5c);}.confirmation-body.svelte-13vzr9e {display:flex;flex-direction:column;gap:var(--hitl-content-gap, 1rem);margin-top:var(--hitl-content-margin-top, 0.75rem);}.params.svelte-13vzr9e {display:flex;flex-direction:column;gap:var(--hitl-param-gap, 0.25rem);}.parameter-label.svelte-13vzr9e {font-size:var(--hitl-param-label-font-size, 0.6875rem);font-weight:var(--hitl-param-label-font-weight, 600);letter-spacing:var(--hitl-param-label-letter-spacing, 0.04em);color:var(--hitl-param-label-color, #595959);word-spacing:var(--hitl-param-label-word-spacing, normal);text-transform:uppercase;}.parameter-value.svelte-13vzr9e {white-space:pre-line;overflow-wrap:break-word;font-size:var(--hitl-param-value-font-size, 0.875rem);line-height:var(--hitl-param-value-line-height, 1.4);color:var(--hitl-param-value-color, #1f1f23);word-spacing:var(--hitl-param-value-word-spacing, normal);\n /* Capitalize suits prose values; a command or a path has to read verbatim,\n so the consumer can turn it off. */text-transform:var(--hitl-param-value-text-transform, capitalize);}\n\n /* Rendered only when `children` is supplied; the flex gap on\n .confirmation-body already spaces it from the params above and the\n action-buttons row below, so no default-behavior change when it's absent. */.extra-content.svelte-13vzr9e {width:100%;}\n\n /* The question and reply rules are written down the structure they live in\n (.confirmation-body > ...), so a class of the same name that a consumer passes through\n `classes`, which lands on the root, cannot match them. */.confirmation-body.svelte-13vzr9e > .questions:where(.svelte-13vzr9e) {display:flex;flex-direction:column;gap:var(--hitl-questions-gap, 0.75rem);}.questions.svelte-13vzr9e > .question:where(.svelte-13vzr9e) {display:flex;flex-direction:column;gap:var(--hitl-question-gap, 0.375rem);}\n\n /* Same voice as the parameter blocks above: the header reads like a\n parameter label, the question like its value. */.question.svelte-13vzr9e > .question-header:where(.svelte-13vzr9e) {font-size:var(--hitl-param-label-font-size, 0.6875rem);font-weight:var(--hitl-param-label-font-weight, 600);letter-spacing:var(--hitl-param-label-letter-spacing, 0.04em);color:var(--hitl-param-label-color, #595959);text-transform:uppercase;}.question.svelte-13vzr9e > .question-text:where(.svelte-13vzr9e) {font-size:var(--hitl-param-value-font-size, 0.875rem);line-height:var(--hitl-param-value-line-height, 1.4);color:var(--hitl-param-value-color, #1f1f23);}.question.svelte-13vzr9e > .question-options:where(.svelte-13vzr9e) {display:flex;flex-wrap:wrap;gap:var(--hitl-question-options-gap, 0.5rem);}.confirmation-body.svelte-13vzr9e > .reply-box:where(.svelte-13vzr9e) {display:flex;flex-direction:column;gap:var(--hitl-reply-gap, 0.5rem);width:100%;--input-container-width: 100%;}.action-buttons.svelte-13vzr9e {display:flex;gap:var(--hitl-buttons-gap, 0.75rem);width:100%;}\n\n /* Zero specificity, so a consumer's own flex-wrap rule for the row keeps winning, as it\n did before this hook existed. */:where(.action-buttons.svelte-13vzr9e) {flex-wrap:var(--hitl-buttons-wrap, nowrap);}.cancel-button.svelte-13vzr9e,\n .confirm-button.svelte-13vzr9e,\n .extra-action-button.svelte-13vzr9e {flex:1;position:relative;--button-width: 100%;}\n\n /* The countdown sweep: a transparent Progress stretched over the confirm\n button whose bar darkens what is underneath as it advances. */.progress-anchor.svelte-13vzr9e {position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:var(--hitl-border-radius, 0.5rem);overflow:hidden;--progress-track-background: transparent;--progress-bar-background: transparent;\n /* Named so a consumer can reach it. HITL sets the Progress child's token\n directly, which beats anything declared at :root, so a `<sui-hitl>`\n consumer had no way to slow or stop the countdown sweep -- custom\n properties are the only thing that crosses a shadow boundary, and this\n one was spoken for. */--progress-bar-transition: var(--hitl-countdown-transition, width 0.1s linear);--progress-track-height: 100%;--progress-container-padding: 0;}.progress-anchor.svelte-13vzr9e > * {height:100%;}.progress-anchor.svelte-13vzr9e .bar {backdrop-filter:var(--hitl-countdown-filter, brightness(0.8));}.completion.svelte-13vzr9e {display:flex;align-items:center;justify-content:center;gap:var(--hitl-completion-gap, 0.5rem);background:var(--hitl-completion-background, #f4f4f5);border-radius:var(--hitl-border-radius, 0.5rem);padding:var(--hitl-completion-padding, 1rem);\n animation: svelte-13vzr9e-hitl-fade-in var(--hitl-completion-animation-duration, var(--motion-duration, 0.3s))\n var(--hitl-completion-animation-easing, var(--motion-easing, ease-in-out));}.completion-icon.svelte-13vzr9e {display:inline-flex;width:var(--hitl-completion-icon-size, 1.25rem);height:var(--hitl-completion-icon-size, 1.25rem);color:var(--hitl-approved-color, #166534);}\n\n /* :global() rather than the plain scoped selector: sui-hitl's wrapper mirrors\n this file's default SVG into a <slot> fallback so the icon survives when a\n consumer slots nothing, and that markup is written in a different .svelte\n file -- Svelte's scoped-style hash is only ever added to elements written in\n THIS file's own template, so an unscoped selector is the only one that also\n matches the mirrored copy. Same idiom as Checkbox.wc.svelte's `.icon :global(svg)`. */.completion-icon.svelte-13vzr9e svg {width:100%;height:100%;}.completion-icon.halted.svelte-13vzr9e {color:var(--hitl-halted-color, #b45309);}.completion-text.svelte-13vzr9e {font-size:var(--hitl-completion-font-size, 0.875rem);font-weight:var(--hitl-completion-font-weight, 600);color:var(--hitl-approved-color, light-dark(#15803d, #4ade80));}.completion-text.halted.svelte-13vzr9e {color:var(--hitl-halted-color, #b45309);}\n\n @keyframes svelte-13vzr9e-hitl-slide-in {\n from {\n opacity: 0;\n transform: translateY(8px);\n }\n\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes svelte-13vzr9e-hitl-fade-in {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n }\n\n /* Two entrance animations: a slide-in and a fade-in. `animation: none` is safe\n for both -- an entrance animates FROM an offset TO the resting state, so\n removing it shows the resting state immediately, which is the frame the\n animation was travelling towards anyway. That is the opposite of the timed\n loaders in Button and ListItem, where the base rule is the FINISHED state and\n stopping the animation would claim completion that has not happened. */\n @media (prefers-reduced-motion: reduce) {.hitl
|
|
56739
|
+
code: ".hitl.svelte-13vzr9e {position:relative;width:100%;max-width:var(--hitl-max-width, 100%);margin:var(--hitl-margin, 0);\n animation: svelte-13vzr9e-hitl-slide-in var(--hitl-slide-in-animation-duration, var(--motion-duration, 0.3s))\n var(--hitl-slide-in-animation-easing, var(--motion-easing, ease-out)) forwards;contain:layout style;}.confirmation-header.svelte-13vzr9e {display:flex;flex-direction:column;gap:var(--hitl-header-gap, 2px);margin-bottom:var(--hitl-header-margin-bottom, 0.75rem);}.badge.svelte-13vzr9e {font-size:var(--hitl-badge-font-size, 0.6875rem);font-weight:var(--hitl-badge-font-weight, 600);letter-spacing:var(--hitl-badge-letter-spacing, 0.06em);color:var(--hitl-badge-color, #595959);text-transform:uppercase;}.title.svelte-13vzr9e {font-size:var(--hitl-title-font-size, 1rem);font-weight:var(--hitl-title-font-weight, 600);color:var(--hitl-title-color, #1f1f23);}.header-border.svelte-13vzr9e {height:1px;background-color:var(--hitl-divider-color, #e4e4e7);}.description.svelte-13vzr9e {margin:0;padding:var(--hitl-description-padding, 0.25rem 0);font-size:var(--hitl-description-font-size, 0.8125rem);line-height:var(--hitl-description-line-height, inherit);color:var(--hitl-description-color, #5c5c5c);}.confirmation-body.svelte-13vzr9e {display:flex;flex-direction:column;gap:var(--hitl-content-gap, 1rem);margin-top:var(--hitl-content-margin-top, 0.75rem);}.params.svelte-13vzr9e {display:flex;flex-direction:column;gap:var(--hitl-param-gap, 0.25rem);}.parameter-label.svelte-13vzr9e {font-size:var(--hitl-param-label-font-size, 0.6875rem);font-weight:var(--hitl-param-label-font-weight, 600);letter-spacing:var(--hitl-param-label-letter-spacing, 0.04em);color:var(--hitl-param-label-color, #595959);word-spacing:var(--hitl-param-label-word-spacing, normal);text-transform:uppercase;}.parameter-value.svelte-13vzr9e {white-space:pre-line;overflow-wrap:break-word;font-size:var(--hitl-param-value-font-size, 0.875rem);line-height:var(--hitl-param-value-line-height, 1.4);color:var(--hitl-param-value-color, #1f1f23);word-spacing:var(--hitl-param-value-word-spacing, normal);\n /* Capitalize suits prose values; a command or a path has to read verbatim,\n so the consumer can turn it off. */text-transform:var(--hitl-param-value-text-transform, capitalize);}\n\n /* Rendered only when `children` is supplied; the flex gap on\n .confirmation-body already spaces it from the params above and the\n action-buttons row below, so no default-behavior change when it's absent. */.extra-content.svelte-13vzr9e {width:100%;}\n\n /* The question and reply rules are written down the structure they live in\n (.confirmation-body > ...), so a class of the same name that a consumer passes through\n `classes`, which lands on the root, cannot match them. */.confirmation-body.svelte-13vzr9e > .questions:where(.svelte-13vzr9e) {display:flex;flex-direction:column;gap:var(--hitl-questions-gap, 0.75rem);}.questions.svelte-13vzr9e > .question:where(.svelte-13vzr9e) {display:flex;flex-direction:column;gap:var(--hitl-question-gap, 0.375rem);}\n\n /* Same voice as the parameter blocks above: the header reads like a\n parameter label, the question like its value. */.question.svelte-13vzr9e > .question-header:where(.svelte-13vzr9e) {font-size:var(--hitl-param-label-font-size, 0.6875rem);font-weight:var(--hitl-param-label-font-weight, 600);letter-spacing:var(--hitl-param-label-letter-spacing, 0.04em);color:var(--hitl-param-label-color, #595959);text-transform:uppercase;}.question.svelte-13vzr9e > .question-text:where(.svelte-13vzr9e) {font-size:var(--hitl-param-value-font-size, 0.875rem);line-height:var(--hitl-param-value-line-height, 1.4);color:var(--hitl-param-value-color, #1f1f23);}.question.svelte-13vzr9e > .question-options:where(.svelte-13vzr9e) {display:flex;flex-wrap:wrap;gap:var(--hitl-question-options-gap, 0.5rem);}.confirmation-body.svelte-13vzr9e > .reply-box:where(.svelte-13vzr9e) {display:flex;flex-direction:column;gap:var(--hitl-reply-gap, 0.5rem);width:100%;--input-container-width: 100%;}.action-buttons.svelte-13vzr9e {display:flex;gap:var(--hitl-buttons-gap, 0.75rem);width:100%;}\n\n /* Zero specificity, so a consumer's own flex-wrap rule for the row keeps winning, as it\n did before this hook existed. */:where(.action-buttons.svelte-13vzr9e) {flex-wrap:var(--hitl-buttons-wrap, nowrap);}.cancel-button.svelte-13vzr9e,\n .confirm-button.svelte-13vzr9e,\n .extra-action-button.svelte-13vzr9e {flex:1;position:relative;--button-width: 100%;}\n\n /* The countdown sweep: a transparent Progress stretched over the confirm\n button whose bar darkens what is underneath as it advances. */.progress-anchor.svelte-13vzr9e {position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:var(--hitl-border-radius, 0.5rem);overflow:hidden;--progress-track-background: transparent;--progress-bar-background: transparent;\n /* Named so a consumer can reach it. HITL sets the Progress child's token\n directly, which beats anything declared at :root, so a `<sui-hitl>`\n consumer had no way to slow or stop the countdown sweep -- custom\n properties are the only thing that crosses a shadow boundary, and this\n one was spoken for. */--progress-bar-transition: var(--hitl-countdown-transition, width 0.1s linear);--progress-track-height: 100%;--progress-container-padding: 0;}.progress-anchor.svelte-13vzr9e > * {height:100%;}.progress-anchor.svelte-13vzr9e .bar {backdrop-filter:var(--hitl-countdown-filter, brightness(0.8));}.completion.svelte-13vzr9e {display:flex;align-items:center;justify-content:center;gap:var(--hitl-completion-gap, 0.5rem);background:var(--hitl-completion-background, #f4f4f5);border-radius:var(--hitl-border-radius, 0.5rem);padding:var(--hitl-completion-padding, 1rem);\n animation: svelte-13vzr9e-hitl-fade-in var(--hitl-completion-animation-duration, var(--motion-duration, 0.3s))\n var(--hitl-completion-animation-easing, var(--motion-easing, ease-in-out));}.completion-icon.svelte-13vzr9e {display:inline-flex;width:var(--hitl-completion-icon-size, 1.25rem);height:var(--hitl-completion-icon-size, 1.25rem);color:var(--hitl-approved-color, #166534);}\n\n /* :global() rather than the plain scoped selector: sui-hitl's wrapper mirrors\n this file's default SVG into a <slot> fallback so the icon survives when a\n consumer slots nothing, and that markup is written in a different .svelte\n file -- Svelte's scoped-style hash is only ever added to elements written in\n THIS file's own template, so an unscoped selector is the only one that also\n matches the mirrored copy. Same idiom as Checkbox.wc.svelte's `.icon :global(svg)`. */.completion-icon.svelte-13vzr9e svg {width:100%;height:100%;}.completion-icon.halted.svelte-13vzr9e {color:var(--hitl-halted-color, #b45309);}.completion-text.svelte-13vzr9e {font-size:var(--hitl-completion-font-size, 0.875rem);font-weight:var(--hitl-completion-font-weight, 600);color:var(--hitl-approved-color, light-dark(#15803d, #4ade80));}.completion-text.halted.svelte-13vzr9e {color:var(--hitl-halted-color, #b45309);}\n\n @keyframes svelte-13vzr9e-hitl-slide-in {\n from {\n opacity: 0;\n transform: translateY(8px);\n }\n\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes svelte-13vzr9e-hitl-fade-in {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n }\n\n /* Two entrance animations: a slide-in and a fade-in. `animation: none` is safe\n for both -- an entrance animates FROM an offset TO the resting state, so\n removing it shows the resting state immediately, which is the frame the\n animation was travelling towards anyway. That is the opposite of the timed\n loaders in Button and ListItem, where the base rule is the FINISHED state and\n stopping the animation would claim completion that has not happened. */\n @media (prefers-reduced-motion: reduce) {.hitl.svelte-13vzr9e,\n .completion.svelte-13vzr9e {\n animation: none;}\n }"
|
|
56740
56740
|
};
|
|
56741
56741
|
function HITL(e, t) {
|
|
56742
56742
|
push(t, !0), append_styles$1(e, $$css$10);
|