@juspay/svelte-ui-components 2.134.0 → 2.134.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/ChipInput/ChipInput.svelte +2 -0
  2. package/dist/ChipInput/properties.d.ts +6 -0
  3. package/dist/Input/Input.svelte +29 -3
  4. package/dist-wc/index.js +48 -46
  5. package/package.json +1 -1
package/dist/ChipInput/ChipInput.svelte CHANGED
@@ -5,6 +5,7 @@
5
5
 
6
6
  let {
7
7
  values = $bindable([]),
8
+ ariaLabel,
8
9
  placeholder = 'Add value…',
9
10
  disabled = false,
10
11
  testId,
@@ -66,6 +67,7 @@
66
67
  {placeholder}
67
68
  dataType="text"
68
69
  name=""
70
+ {ariaLabel}
69
71
  autoComplete="off"
70
72
  actionInput={false}
71
73
  disable={disabled}
package/dist/ChipInput/properties.d.ts CHANGED
@@ -9,6 +9,12 @@ export type MandatoryChipInputProperties = {
9
9
  values: string[];
10
10
  };
11
11
  export type OptionalChipInputProperties = {
12
+ /**
13
+ * Names the draft field for assistive technology. ChipInput renders no visible label of its
14
+ * own, so without this the control reaches the accessibility tree unnamed however the caption
15
+ * beside it reads on screen. Pass the same words as that caption.
16
+ */
17
+ ariaLabel?: string;
12
18
  placeholder?: string;
13
19
  disabled?: boolean;
14
20
  testId?: string;
package/dist/Input/Input.svelte CHANGED
@@ -122,6 +122,26 @@
122
122
  // forceError lets consumers drive the error border from server/runtime validation,
123
123
  // independent of validationPattern.
124
124
  const showError = $derived(showErrorMessage || forceError);
125
+ // The error text has to be reachable FROM the field it describes and announced when it
126
+ // appears. Without both, a screen-reader user submits, hears nothing, and is left on a form
127
+ // that did not move -- the message is on screen and absent from the accessibility tree.
128
+ const errorMessageId = $derived(`${effectiveId}-error`);
129
+ // `onErrorMessage` is `string | null`, so null has to be excluded explicitly: `null !== ''`
130
+ // is true, which would describe the field by an alert element carrying no message.
131
+ const isShowingError = $derived(
132
+ onErrorMessage != null && onErrorMessage !== '' && showError && !actionInput
133
+ );
134
+ const infoMessageId = $derived(`${effectiveId}-info`);
135
+ const isShowingInfo = $derived(infoMessage !== '' && !actionInput);
136
+ // Helper text is part of the field's description, not decoration: a consumer's `infoMessage`
137
+ // ("Enter a percentage between 1 and 100") is exactly the guidance a screen-reader user needs
138
+ // BEFORE they trip an error. Reference both, in reading order, so the field is described by
139
+ // everything visibly attached to it rather than only by its failure.
140
+ const describedBy = $derived(
141
+ [isShowingError ? errorMessageId : null, isShowingInfo ? infoMessageId : null]
142
+ .filter(Boolean)
143
+ .join(' ')
144
+ );
125
145
  const hasLeftIcon = $derived(typeof leftIcon === 'function');
126
146
  const hasRightIcon = $derived(typeof rightIcon === 'function');
127
147
 
@@ -301,6 +321,8 @@
301
321
  aria-controls={ariaControls}
302
322
  aria-activedescendant={ariaActivedescendant}
303
323
  aria-required={mandatory || null}
324
+ aria-invalid={showError ? 'true' : null}
325
+ aria-describedby={describedBy || null}
304
326
  required={mandatory || null}
305
327
  onfocus={onFocus}
306
328
  onfocusout={_onFocusOut}
@@ -337,6 +359,8 @@
337
359
  aria-controls={ariaControls}
338
360
  aria-activedescendant={ariaActivedescendant}
339
361
  aria-required={mandatory || null}
362
+ aria-invalid={showError ? 'true' : null}
363
+ aria-describedby={describedBy || null}
340
364
  required={mandatory || null}
341
365
  onfocus={onFocus}
342
366
  onfocusout={_onFocusOut}
@@ -399,8 +423,10 @@
399
423
  {@render fieldElement()}
400
424
  {/if}
401
425
 
402
- {#if onErrorMessage !== '' && showError && !actionInput}
426
+ {#if isShowingError}
403
427
  <div
428
+ id={errorMessageId}
429
+ role="alert"
404
430
  class="error-message"
405
431
  data-pw={typeof testId === 'string' && testId.length > 0 ? `${testId}-error-message` : null}
406
432
  testID={typeof testId === 'string' && testId.length > 0 ? `${testId}-error-message` : null}
@@ -408,8 +434,8 @@
408
434
  {onErrorMessage}
409
435
  </div>
410
436
  {/if}
411
- {#if infoMessage !== '' && !actionInput}
412
- <div class="info-message">
437
+ {#if isShowingInfo}
438
+ <div id={infoMessageId} class="info-message">
413
439
  {infoMessage}
414
440
  </div>
415
441
  {/if}
package/dist-wc/index.js CHANGED
@@ -6745,7 +6745,7 @@ function createDebouncer(e) {
6745
6745
  }
6746
6746
  //#endregion
6747
6747
  //#region src/lib/Input/Input.svelte
6748
- var root$65 = /* @__PURE__ */ from_html("<textarea></textarea>"), root_1$54 = /* @__PURE__ */ from_html("<input/>"), root_2$41 = /* @__PURE__ */ from_html("<span class=\"input-mandatory-asterisk svelte-1h0c2oe\" aria-hidden=\"true\">*</span>"), root_3$37 = /* @__PURE__ */ from_html("<label class=\"label svelte-1h0c2oe\"> <!></label>"), root_4$30 = /* @__PURE__ */ from_html("<button type=\"button\" class=\"input-icon input-icon-left input-icon-button svelte-1h0c2oe\"><!></button>"), root_5$23 = /* @__PURE__ */ from_html("<span class=\"input-icon input-icon-left svelte-1h0c2oe\"><!></span>"), root_6$20 = /* @__PURE__ */ from_html("<button type=\"button\" class=\"input-icon input-icon-right input-icon-button svelte-1h0c2oe\"><!></button>"), root_7$17 = /* @__PURE__ */ from_html("<span class=\"input-icon input-icon-right svelte-1h0c2oe\"><!></span>"), root_8$15 = /* @__PURE__ */ from_html("<div><!> <!> <!></div>"), root_9$10 = /* @__PURE__ */ from_html("<div class=\"error-message svelte-1h0c2oe\"> </div>"), root_10$9 = /* @__PURE__ */ from_html("<div class=\"info-message svelte-1h0c2oe\"> </div>"), root_11$8 = /* @__PURE__ */ from_html("<div> </div>"), root_12$8 = /* @__PURE__ */ from_html("<div><!> <!> <!> <!> <!></div>"), $$css$63 = {
6748
+ var root$65 = /* @__PURE__ */ from_html("<textarea></textarea>"), root_1$54 = /* @__PURE__ */ from_html("<input/>"), root_2$41 = /* @__PURE__ */ from_html("<span class=\"input-mandatory-asterisk svelte-1h0c2oe\" aria-hidden=\"true\">*</span>"), root_3$37 = /* @__PURE__ */ from_html("<label class=\"label svelte-1h0c2oe\"> <!></label>"), root_4$30 = /* @__PURE__ */ from_html("<button type=\"button\" class=\"input-icon input-icon-left input-icon-button svelte-1h0c2oe\"><!></button>"), root_5$23 = /* @__PURE__ */ from_html("<span class=\"input-icon input-icon-left svelte-1h0c2oe\"><!></span>"), root_6$20 = /* @__PURE__ */ from_html("<button type=\"button\" class=\"input-icon input-icon-right input-icon-button svelte-1h0c2oe\"><!></button>"), root_7$17 = /* @__PURE__ */ from_html("<span class=\"input-icon input-icon-right svelte-1h0c2oe\"><!></span>"), root_8$15 = /* @__PURE__ */ from_html("<div><!> <!> <!></div>"), root_9$10 = /* @__PURE__ */ from_html("<div role=\"alert\" class=\"error-message svelte-1h0c2oe\"> </div>"), root_10$9 = /* @__PURE__ */ from_html("<div class=\"info-message svelte-1h0c2oe\"> </div>"), root_11$8 = /* @__PURE__ */ from_html("<div> </div>"), root_12$8 = /* @__PURE__ */ from_html("<div><!> <!> <!> <!> <!></div>"), $$css$63 = {
6749
6749
  hash: "svelte-1h0c2oe",
6750
6750
  code: "textarea.svelte-1h0c2oe,\n input.svelte-1h0c2oe {box-sizing:var(--input-box-sizing, border-box);height:var(--input-height, fit-content);\n\n /* Both default to the CSS initial value, so a consumer that sets neither is\n byte-identical to before. A textarea that grows with its content needs a\n ceiling before it can scroll, and one used as a paste target needs a floor;\n neither was reachable through the --input-* surface. */min-height:var(--input-min-height, auto);max-height:var(--input-max-height, none);background-color:var(--input-background, white);font-size:var(--input-font-size, 16px) !important;font-family:var(--input-font-family, inherit);border-radius:var(--input-radius, var(--radius, 4px));outline:none;padding:var(--input-padding, 16px);font-weight:var(--input-font-weight, 500);\n\n /* `normal` is what a textarea/input computes today regardless of any inherited\n value — the UA sheet sets it, and inheritance loses to a UA declaration on the\n element itself. So the default here is byte-identical for existing consumers,\n and this is the only way a consumer can set it at all. */line-height:var(--input-line-height, normal);width:var(--input-width, fit-content);margin:var(--input-margin, 0);appearance:none !important;-webkit-appearance:none !important; /* For Safari MWeb */box-shadow:var(--input-box-shadow, 0px 1px 8px #2f537733);border:var(--input-border, 1px solid transparent);resize:none;visibility:var(--input-visibility, visible);text-align:var(--input-text-align, left);text-transform:var(--input-text-transform, none);color:var(--input-text-color);}textarea.svelte-1h0c2oe:focus,\n input.svelte-1h0c2oe:focus {border:var(--input-focus-border, 1px solid transparent);}.input-error.svelte-1h0c2oe {--input-focus-border: var(\n --input-error-border,\n 1px solid var(--input-error-msg-text-color, #fa1405)\n ) !important;--input-border: var(\n --input-error-border,\n 1px solid var(--input-error-msg-text-color, #fa1405)\n ) !important;}.action-input.svelte-1h0c2oe {border-radius:var(--input-radius, var(--radius, 4px) 0 0 var(--radius, 4px));box-shadow:var(--input-box-shadow, 0px 0px 0px #ffffff);margin-bottom:0;}.input-container.svelte-1h0c2oe {display:flex;flex-direction:column;margin:var(--input-container-margin, 0);padding:var(--input-container-padding, 0);width:var(--input-container-width, fit-content);}.label.svelte-1h0c2oe {font-weight:var(--input-label-msg-text-weight, 400);font-size:var(--input-label-msg-text-size, 12px);color:var(--input-label-msg-text-color, #637c95);margin:var(--input-label-msg-margin, 0px 0px 6px 0px);padding:var(--input-label-msg-padding);}.input-mandatory-asterisk.svelte-1h0c2oe {color:var(--input-mandatory-color, var(--input-error-msg-text-color, #fa1405));margin-left:var(--input-mandatory-gap, 2px);}\n\n /* Icon wrapper: only rendered when leftIcon/rightIcon is supplied, so non-icon\n consumers keep the exact prior DOM. The field's bottom margin moves to the\n wrap so the absolutely-positioned icons centre on the field, not the margin. */.input-field-wrap.svelte-1h0c2oe {position:relative;display:block;margin:var(--input-margin, 0);}.input-field-wrap.svelte-1h0c2oe > textarea,\n .input-field-wrap.svelte-1h0c2oe > input {margin:0 !important;width:var(--input-width, 100%);}.input-icon.svelte-1h0c2oe {position:absolute;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:var(--input-icon-size, 20px);height:var(--input-icon-size, 20px);color:var(--input-icon-color, inherit);pointer-events:none;}.input-icon-button.svelte-1h0c2oe {background:none;border:none;padding:0;cursor:pointer;pointer-events:auto;}.input-icon-button.svelte-1h0c2oe:focus-visible {outline:var(--input-icon-focus-outline, 2px solid var(--input-focus-border-color, #005fcc));outline-offset:var(--input-icon-focus-outline-offset, 2px);border-radius:var(--input-icon-focus-radius, var(--radius, 4px));}.input-icon-left.svelte-1h0c2oe {left:var(--input-icon-gap, 12px);}.input-icon-right.svelte-1h0c2oe {right:var(--input-icon-gap, 12px);}.input-field-wrap.has-left-icon.svelte-1h0c2oe > textarea,\n .input-field-wrap.has-left-icon.svelte-1h0c2oe > input {padding-left:calc(var(--input-icon-size, 20px) + var(--input-icon-gap, 12px) * 2);}.input-field-wrap.has-right-icon.svelte-1h0c2oe > textarea,\n .input-field-wrap.has-right-icon.svelte-1h0c2oe > input {padding-right:calc(var(--input-icon-size, 20px) + var(--input-icon-gap, 12px) * 2);}.error-message.svelte-1h0c2oe {font-weight:var(--input-error-msg-text-weight, 400);font-size:var(--input-error-msg-text-size, 12px);color:var(--input-error-msg-text-color, #fa1405);margin:var(--input-error-msg-margin);padding:var(--input-error-msg-padding);}.info-message.svelte-1h0c2oe {font-weight:var(--input-info-msg-text-weight, 400);font-size:var(--input-info-msg-text-size, 12px);color:var(--input-info-msg-text-color, #fa1405);margin:var(--input-info-msg-margin);padding:var(--input-info-msg-padding);}.input-char-count.svelte-1h0c2oe {align-self:flex-end;font-size:var(--input-char-count-size, 12px);color:var(--input-char-count-color, #98a2b3);margin:var(--input-char-count-margin, 4px 0 0);font-variant-numeric:tabular-nums;}.input-char-count.at-limit.svelte-1h0c2oe {color:var(--input-char-count-limit-color, var(--input-error-msg-text-color, #fa1405));}.svelte-1h0c2oe::placeholder {color:var(--input-placeholder-color);}"
6751
6751
  };
@@ -6780,8 +6780,8 @@ function Input(e, t) {
6780
6780
  user_effect(() => {
6781
6781
  F()(get(de));
6782
6782
  });
6783
- let fe = /* @__PURE__ */ user_derived(() => get(de) === "Invalid"), pe = /* @__PURE__ */ user_derived(() => get(fe) || Q()), me = /* @__PURE__ */ user_derived(() => typeof G() == "function"), he = /* @__PURE__ */ user_derived(() => typeof K() == "function"), ge = /* @__PURE__ */ user_derived(() => i()?.length ?? 0), _e = /* @__PURE__ */ user_derived(() => _() ?? 1e3), ve = /* @__PURE__ */ user_derived(() => $() ? "none" : re());
6784
- function ye() {
6783
+ let fe = /* @__PURE__ */ user_derived(() => get(de) === "Invalid"), pe = /* @__PURE__ */ user_derived(() => get(fe) || Q()), me = /* @__PURE__ */ user_derived(() => `${get(ae)}-error`), he = /* @__PURE__ */ user_derived(() => c() != null && c() !== "" && get(pe) && !x()), ge = /* @__PURE__ */ user_derived(() => `${get(ae)}-info`), _e = /* @__PURE__ */ user_derived(() => l() !== "" && !x()), ve = /* @__PURE__ */ user_derived(() => [get(he) ? get(me) : null, get(_e) ? get(ge) : null].filter(Boolean).join(" ")), ye = /* @__PURE__ */ user_derived(() => typeof G() == "function"), be = /* @__PURE__ */ user_derived(() => typeof K() == "function"), xe = /* @__PURE__ */ user_derived(() => i()?.length ?? 0), Se = /* @__PURE__ */ user_derived(() => _() ?? 1e3), Ce = /* @__PURE__ */ user_derived(() => $() ? "none" : re());
6784
+ function we() {
6785
6785
  let e = get(ue);
6786
6786
  if (!e || !S() || !$()) return;
6787
6787
  e.style.height = "auto";
@@ -6789,9 +6789,9 @@ function Input(e, t) {
6789
6789
  e.style.height = `${u}px`, e.style.overflowY = e.scrollHeight > l ? "auto" : "hidden";
6790
6790
  }
6791
6791
  user_effect(() => {
6792
- i(), S() && $() && ye();
6792
+ i(), S() && $() && we();
6793
6793
  });
6794
- function be(e) {
6794
+ function Te(e) {
6795
6795
  if (get(ue) === null) return;
6796
6796
  let t = get(ue).value;
6797
6797
  if (o() === "tel" && t.length > 0) {
@@ -6801,18 +6801,18 @@ function Input(e, t) {
6801
6801
  get(ue).value = i();
6802
6802
  return;
6803
6803
  }
6804
- if (e > get(_e)) {
6805
- if (i().length === get(_e)) {
6806
- get(ue).value = Se(i());
6804
+ if (e > get(Se)) {
6805
+ if (i().length === get(Se)) {
6806
+ get(ue).value = De(i());
6807
6807
  return;
6808
6808
  }
6809
- t = t.substring(e - get(_e));
6809
+ t = t.substring(e - get(Se));
6810
6810
  }
6811
- t = Se(t), get(ue).value = t;
6811
+ t = De(t), get(ue).value = t;
6812
6812
  }
6813
6813
  i(get(ue).value), N()(get(ue).value, e);
6814
6814
  }
6815
- function xe(e) {
6815
+ function Ee(e) {
6816
6816
  if (get(ue) !== null) {
6817
6817
  if (o() !== "tel") {
6818
6818
  P()(e);
@@ -6822,17 +6822,17 @@ function Input(e, t) {
6822
6822
  let t = e.clipboardData.getData("text");
6823
6823
  t = O().reduce((e, t) => t(e), t);
6824
6824
  let n = t.replace(/\D+|\D/gm, ""), a = n.length;
6825
- n.length === 0 && e.preventDefault(), n.length > get(_e) && (i(Se(n.substring(a - get(_e)))), P()(e), e.preventDefault());
6825
+ n.length === 0 && e.preventDefault(), n.length > get(Se) && (i(De(n.substring(a - get(Se)))), P()(e), e.preventDefault());
6826
6826
  }
6827
6827
  }
6828
6828
  }
6829
- function Se(e) {
6829
+ function De(e) {
6830
6830
  return k().reduce((e, t) => t(e), e);
6831
6831
  }
6832
- function Ce(e) {
6832
+ function Oe(e) {
6833
6833
  get(de) === "InProgress" && i().length > 0 && set(de, "Invalid"), j()(e), M()(e);
6834
6834
  }
6835
- var we = {
6835
+ var ke = {
6836
6836
  focus: se,
6837
6837
  blur: ce,
6838
6838
  getInputRef: le,
@@ -7166,8 +7166,8 @@ function Input(e, t) {
7166
7166
  set showCount(e = !1) {
7167
7167
  ie(e), flushSync();
7168
7168
  }
7169
- }, Te = root_12$8();
7170
- let Ee;
7169
+ }, Ae = root_12$8();
7170
+ let je;
7171
7171
  {
7172
7172
  let e = (e) => {
7173
7173
  var t = comment(), n = first_child(t), s = (e) => {
@@ -7175,10 +7175,10 @@ function Input(e, t) {
7175
7175
  remove_textarea_child(t);
7176
7176
  let n, s;
7177
7177
  bind_this(t, (e) => set(ue, e), () => get(ue)), template_effect(() => {
7178
- set_attribute(t, "id", get(ae)), set_value(t, i()), set_attribute(t, "placeholder", a()), set_attribute(t, "aria-label", get(oe) ? null : B() ?? null), set_attribute(t, "autocomplete", C()), set_attribute(t, "inputmode", w()), set_attribute(t, "name", T()), set_attribute(t, "role", z()), set_attribute(t, "aria-expanded", V()), set_attribute(t, "aria-autocomplete", H()), set_attribute(t, "aria-controls", U()), set_attribute(t, "aria-activedescendant", W()), set_attribute(t, "aria-required", Z() || null), t.required = Z() || null, set_attribute(t, "data-pw", D()), set_attribute(t, "testid", D()), n = set_style(t, `--focus-border: ${+!!g()}px;`, n, { resize: get(ve) }), set_attribute(t, "rows", ee() ?? null), t.disabled = d(), t.readOnly = f() || null, set_attribute(t, "spellcheck", p()), set_attribute(t, "maxlength", o() === "tel" ? null : _()), set_attribute(t, "minlength", v()), s = set_class(t, 1, "svelte-1h0c2oe", null, s, { "action-input": x() });
7178
+ set_attribute(t, "id", get(ae)), set_value(t, i()), set_attribute(t, "placeholder", a()), set_attribute(t, "aria-label", get(oe) ? null : B() ?? null), set_attribute(t, "autocomplete", C()), set_attribute(t, "inputmode", w()), set_attribute(t, "name", T()), set_attribute(t, "role", z()), set_attribute(t, "aria-expanded", V()), set_attribute(t, "aria-autocomplete", H()), set_attribute(t, "aria-controls", U()), set_attribute(t, "aria-activedescendant", W()), set_attribute(t, "aria-required", Z() || null), set_attribute(t, "aria-invalid", get(pe) ? "true" : null), set_attribute(t, "aria-describedby", get(ve) || null), t.required = Z() || null, set_attribute(t, "data-pw", D()), set_attribute(t, "testid", D()), n = set_style(t, `--focus-border: ${+!!g()}px;`, n, { resize: get(Ce) }), set_attribute(t, "rows", ee() ?? null), t.disabled = d(), t.readOnly = f() || null, set_attribute(t, "spellcheck", p()), set_attribute(t, "maxlength", o() === "tel" ? null : _()), set_attribute(t, "minlength", v()), s = set_class(t, 1, "svelte-1h0c2oe", null, s, { "action-input": x() });
7179
7179
  }), event("focus", t, function(...e) {
7180
7180
  A()?.apply(this, e);
7181
- }), delegated("focusout", t, Ce), delegated("input", t, be), event("paste", t, xe), delegated("click", t, function(...e) {
7181
+ }), delegated("focusout", t, Oe), delegated("input", t, Te), event("paste", t, Ee), delegated("click", t, function(...e) {
7182
7182
  I()?.apply(this, e);
7183
7183
  }), delegated("keydown", t, function(...e) {
7184
7184
  L()?.apply(this, e);
@@ -7188,10 +7188,10 @@ function Input(e, t) {
7188
7188
  remove_input_defaults(t);
7189
7189
  let n;
7190
7190
  bind_this(t, (e) => set(ue, e), () => get(ue)), template_effect(() => {
7191
- set_attribute(t, "id", get(ae)), set_attribute(t, "type", o()), set_value(t, i()), set_attribute(t, "placeholder", a()), set_attribute(t, "aria-label", get(oe) ? null : B() ?? null), set_attribute(t, "autocomplete", C()), set_attribute(t, "inputmode", w()), set_attribute(t, "name", T()), set_attribute(t, "role", z()), set_attribute(t, "aria-expanded", V()), set_attribute(t, "aria-autocomplete", H()), set_attribute(t, "aria-controls", U()), set_attribute(t, "aria-activedescendant", W()), set_attribute(t, "aria-required", Z() || null), t.required = Z() || null, set_attribute(t, "data-pw", D()), set_attribute(t, "testid", D()), t.disabled = d(), t.readOnly = f() || null, set_attribute(t, "spellcheck", p()), set_attribute(t, "maxlength", o() === "tel" ? null : _()), set_attribute(t, "minlength", v()), set_attribute(t, "min", y()), set_attribute(t, "max", b()), n = set_class(t, 1, "svelte-1h0c2oe", null, n, { "action-input": x() });
7191
+ set_attribute(t, "id", get(ae)), set_attribute(t, "type", o()), set_value(t, i()), set_attribute(t, "placeholder", a()), set_attribute(t, "aria-label", get(oe) ? null : B() ?? null), set_attribute(t, "autocomplete", C()), set_attribute(t, "inputmode", w()), set_attribute(t, "name", T()), set_attribute(t, "role", z()), set_attribute(t, "aria-expanded", V()), set_attribute(t, "aria-autocomplete", H()), set_attribute(t, "aria-controls", U()), set_attribute(t, "aria-activedescendant", W()), set_attribute(t, "aria-required", Z() || null), set_attribute(t, "aria-invalid", get(pe) ? "true" : null), set_attribute(t, "aria-describedby", get(ve) || null), t.required = Z() || null, set_attribute(t, "data-pw", D()), set_attribute(t, "testid", D()), t.disabled = d(), t.readOnly = f() || null, set_attribute(t, "spellcheck", p()), set_attribute(t, "maxlength", o() === "tel" ? null : _()), set_attribute(t, "minlength", v()), set_attribute(t, "min", y()), set_attribute(t, "max", b()), n = set_class(t, 1, "svelte-1h0c2oe", null, n, { "action-input": x() });
7192
7192
  }), event("focus", t, function(...e) {
7193
7193
  A()?.apply(this, e);
7194
- }), delegated("focusout", t, Ce), delegated("input", t, be), event("paste", t, xe), delegated("click", t, function(...e) {
7194
+ }), delegated("focusout", t, Oe), delegated("input", t, Te), event("paste", t, Ee), delegated("click", t, function(...e) {
7195
7195
  I()?.apply(this, e);
7196
7196
  }), delegated("keydown", t, function(...e) {
7197
7197
  L()?.apply(this, e);
@@ -7201,7 +7201,7 @@ function Input(e, t) {
7201
7201
  S() ? e(s) : e(c, -1);
7202
7202
  }), append(e, t);
7203
7203
  };
7204
- var De = child(Te), Oe = (e) => {
7204
+ var Me = child(Ae), Ne = (e) => {
7205
7205
  var t = root_3$37(), n = child(t, !0), i = sibling(n), a = (e) => {
7206
7206
  append(e, root_2$41());
7207
7207
  };
@@ -7211,10 +7211,10 @@ function Input(e, t) {
7211
7211
  set_attribute(t, "for", get(ae)), set_text(n, s());
7212
7212
  }), append(e, t);
7213
7213
  };
7214
- if_block(De, (e) => {
7215
- get(oe) && e(Oe);
7214
+ if_block(Me, (e) => {
7215
+ get(oe) && e(Ne);
7216
7216
  });
7217
- var ke = sibling(De, 2), Ae = (t) => {
7217
+ var Pe = sibling(Me, 2), Fe = (t) => {
7218
7218
  var n = root_8$15();
7219
7219
  let i;
7220
7220
  var a = child(n), o = (e) => {
@@ -7232,7 +7232,7 @@ function Input(e, t) {
7232
7232
  }), append(e, t);
7233
7233
  };
7234
7234
  if_block(a, (e) => {
7235
- get(me) && e(o);
7235
+ get(ye) && e(o);
7236
7236
  });
7237
7237
  var s = sibling(a, 2);
7238
7238
  e(s);
@@ -7251,46 +7251,48 @@ function Input(e, t) {
7251
7251
  }), append(e, t);
7252
7252
  };
7253
7253
  if_block(c, (e) => {
7254
- get(he) && e(l);
7254
+ get(be) && e(l);
7255
7255
  }), reset(n), template_effect(() => i = set_class(n, 1, "input-field-wrap svelte-1h0c2oe", null, i, {
7256
- "has-left-icon": get(me),
7257
- "has-right-icon": get(he)
7256
+ "has-left-icon": get(ye),
7257
+ "has-right-icon": get(be)
7258
7258
  })), append(t, n);
7259
- }, je = (t) => {
7259
+ }, Ie = (t) => {
7260
7260
  e(t);
7261
7261
  };
7262
- if_block(ke, (e) => {
7263
- get(me) || get(he) ? e(Ae) : e(je, -1);
7262
+ if_block(Pe, (e) => {
7263
+ get(ye) || get(be) ? e(Fe) : e(Ie, -1);
7264
7264
  });
7265
- var Me = sibling(ke, 2), Ne = (e) => {
7265
+ var Le = sibling(Pe, 2), Re = (e) => {
7266
7266
  var t = root_9$10(), n = child(t, !0);
7267
7267
  reset(t), template_effect(() => {
7268
- set_attribute(t, "data-pw", typeof D() == "string" && D().length > 0 ? `${D()}-error-message` : null), set_attribute(t, "testid", typeof D() == "string" && D().length > 0 ? `${D()}-error-message` : null), set_text(n, c());
7268
+ set_attribute(t, "id", get(me)), set_attribute(t, "data-pw", typeof D() == "string" && D().length > 0 ? `${D()}-error-message` : null), set_attribute(t, "testid", typeof D() == "string" && D().length > 0 ? `${D()}-error-message` : null), set_text(n, c());
7269
7269
  }), append(e, t);
7270
7270
  };
7271
- if_block(Me, (e) => {
7272
- c() !== "" && get(pe) && !x() && e(Ne);
7271
+ if_block(Le, (e) => {
7272
+ get(he) && e(Re);
7273
7273
  });
7274
- var Pe = sibling(Me, 2), Fe = (e) => {
7274
+ var ze = sibling(Le, 2), Be = (e) => {
7275
7275
  var t = root_10$9(), n = child(t, !0);
7276
- reset(t), template_effect(() => set_text(n, l())), append(e, t);
7276
+ reset(t), template_effect(() => {
7277
+ set_attribute(t, "id", get(ge)), set_text(n, l());
7278
+ }), append(e, t);
7277
7279
  };
7278
- if_block(Pe, (e) => {
7279
- l() !== "" && !x() && e(Fe);
7280
+ if_block(ze, (e) => {
7281
+ get(_e) && e(Be);
7280
7282
  });
7281
- var Ie = sibling(Pe, 2), Le = (e) => {
7283
+ var Ve = sibling(ze, 2), He = (e) => {
7282
7284
  var t = root_11$8();
7283
7285
  let n;
7284
7286
  var i = child(t);
7285
7287
  reset(t), template_effect(() => {
7286
- n = set_class(t, 1, "input-char-count svelte-1h0c2oe", null, n, { "at-limit": get(ge) >= get(_e) }), set_text(i, `${get(ge) ?? ""}/${get(_e) ?? ""}`);
7288
+ n = set_class(t, 1, "input-char-count svelte-1h0c2oe", null, n, { "at-limit": get(xe) >= get(Se) }), set_text(i, `${get(xe) ?? ""}/${get(Se) ?? ""}`);
7287
7289
  }), append(e, t);
7288
7290
  };
7289
- if_block(Ie, (e) => {
7290
- S() && ie() && !x() && e(Le);
7291
- }), reset(Te);
7291
+ if_block(Ve, (e) => {
7292
+ S() && ie() && !x() && e(He);
7293
+ }), reset(Ae);
7292
7294
  }
7293
- return template_effect(() => Ee = set_class(Te, 1, `input-container ${R() ?? "" ?? ""}`, "svelte-1h0c2oe", Ee, { "input-error": get(pe) && !x() })), append(e, Te), pop(we);
7295
+ return template_effect(() => je = set_class(Ae, 1, `input-container ${R() ?? "" ?? ""}`, "svelte-1h0c2oe", je, { "input-error": get(pe) && !x() })), append(e, Ae), pop(ke);
7294
7296
  }
7295
7297
  delegate([
7296
7298
  "focusout",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@juspay/svelte-ui-components",
3
- "version": "2.134.0",
3
+ "version": "2.134.1",
4
4
  "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
5
5
  "keywords": [
6
6
  "svelte",