@juspay/svelte-ui-components 4.27.5 → 4.28.0

package/dist/Input/Input.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { prefersReducedMotion } from '../utils';
+  import { getActiveElement } from '../_interaction/focus';
   import { validateInput } from '../utils';
   import type { InputProperties } from './properties';
   import type { ValidationState } from '../types';
@@ -53,6 +55,7 @@
     leftIconLabel = 'Leading action',
     rightIconLabel = 'Trailing action',
     mandatory = false,
+    required,
     forceError = false,
     rows,
     autoResize = false,
@@ -62,6 +65,12 @@
     showCount = false
   }: InputProperties = $props();
 
+  // `required` decides when it is supplied at all, so a caller migrating one call site
+  // at a time gets an unambiguous direction; `mandatory` answers only when `required`
+  // was not passed. Checked with typeof rather than a default, so an explicit
+  // `required={false}` beside a legacy `mandatory` really does turn the field optional.
+  const isRequired = $derived(typeof required === 'boolean' ? required : mandatory);
+
   /* `for` on a <label> resolves against an element's id, never its name. The label
      was emitted with for={name} while the field itself carried only name={name},
      so the association never completed for any caller. Derive the id from name so
@@ -75,7 +84,12 @@
   export function focus() {
     try {
       inputElement?.focus();
-      inputElement?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      // A scrollIntoView `behavior` is not a style, so no media query reaches it.
+      // 'auto' still brings the field into view -- it just arrives instead of gliding.
+      inputElement?.scrollIntoView({
+        behavior: prefersReducedMotion() ? 'auto' : 'smooth',
+        block: 'center'
+      });
     } catch (error) {
       console.error('Error focusing or scrolling inputElement:', error);
     }
@@ -107,7 +121,7 @@
       valueValidation === 'InProgress' &&
       value.length > 0 &&
       inputElement !== null &&
-      inputElement !== document.activeElement
+      inputElement !== getActiveElement(inputElement)
     ) {
       return 'Invalid';
     }
@@ -302,7 +316,7 @@
 <div class="input-container {classes ?? ''}" class:input-error={showError && !actionInput}>
   {#if hasVisibleLabel}
     <label class="label" for={effectiveId}>
-      {label}{#if mandatory}<span class="input-mandatory-asterisk" aria-hidden="true">*</span>{/if}
+      {label}{#if isRequired}<span class="input-mandatory-asterisk" aria-hidden="true">*</span>{/if}
     </label>
   {/if}
 
@@ -321,10 +335,10 @@
         aria-autocomplete={ariaAutocomplete}
         aria-controls={ariaControls}
         aria-activedescendant={ariaActivedescendant}
-        aria-required={mandatory || null}
+        aria-required={isRequired || null}
         aria-invalid={showError && !actionInput ? 'true' : null}
         aria-describedby={describedBy || null}
-        required={mandatory || null}
+        required={isRequired || null}
         {onfocus}
         onfocusout={_onFocusOut}
         oninput={handleOnInput}
@@ -359,10 +373,10 @@
         aria-autocomplete={ariaAutocomplete}
         aria-controls={ariaControls}
         aria-activedescendant={ariaActivedescendant}
-        aria-required={mandatory || null}
+        aria-required={isRequired || null}
         aria-invalid={showError && !actionInput ? 'true' : null}
         aria-describedby={describedBy || null}
-        required={mandatory || null}
+        required={isRequired || null}
         {onfocus}
         onfocusout={_onFocusOut}
         oninput={handleOnInput}
@@ -487,7 +501,7 @@
     visibility: var(--input-visibility, visible);
     text-align: var(--input-text-align, left);
     text-transform: var(--input-text-transform, none);
-    color: var(--input-text-color);
+    color: var(--input-text-color, #333333);
   }
 
   textarea:focus,
@@ -619,7 +633,7 @@
   .input-char-count {
     align-self: flex-end;
     font-size: var(--input-char-count-size, 12px);
-    color: var(--input-char-count-color, #98a2b3);
+    color: var(--input-char-count-color, #5c6b7a);
     margin: var(--input-char-count-margin, 4px 0 0);
     font-variant-numeric: tabular-nums;
   }
@@ -629,6 +643,6 @@
   }
 
   ::placeholder {
-    color: var(--input-placeholder-color);
+    color: var(--input-placeholder-color, #5c6b7a);
   }
 </style>

package/dist/Input/properties.d.ts

@@ -7,6 +7,29 @@ export type MandatoryInputProperties = {
 };
 export type OptionalInputProperties = {
     placeholder?: string | null;
+    /**
+     * Native input type, and the switch `validateInput` runs on.
+     *
+     * **Only `text`, `tel`, `password` and `email` are validated.** `number`,
+     * `time`, `date`, `search` and `url` have no branch at all: they are always
+     * reported Valid, `onErrorMessage` never shows for them, and the browser's own
+     * constraint validation (`min`/`max`/`step`, the type's own parsing) is the
+     * only thing checking the value. Supply `validators` if you need more.
+     *
+     * `tel` with no `validationPattern` checks only the characters a phone number
+     * may contain -- digits, spaces, `+`, `-`, `.`, `()` -- and nothing about any
+     * national format, so `+33 6 12 34 56 78` and `(555) 123-4567` are accepted.
+     * Before 4.20 it silently required a ten-digit Indian mobile number. To ask for
+     * that rule, or any other market's, pass the preset's patterns:
+     *
+     * ```svelte
+     * <Input
+     *   dataType="tel"
+     *   validationPattern={TEL_PRESET_IN_MOBILE.valid}
+     *   inProgressPattern={TEL_PRESET_IN_MOBILE.inProgress}
+     * />
+     * ```
+     */
     dataType?: InputDataType;
     label?: string | null;
     onErrorMessage?: string | null;
@@ -94,7 +117,20 @@ export type OptionalInputProperties = {
     leftIconLabel?: string;
     /** Accessible label for the clickable rightIcon button (defaults to a generic label). */
     rightIconLabel?: string;
-    /** Appends a required asterisk beside the label and sets aria-required on the field. */
+    /**
+     * Appends a required asterisk beside the label and sets `aria-required` and the
+     * native `required` attribute on the field. This is the platform's own name and the
+     * one every other form control in this library uses, so it is the spelling to reach
+     * for. Wins over `mandatory` when both are supplied.
+     */
+    required?: boolean;
+    /**
+     * @deprecated Use `required`. This is the original spelling of the same concept and
+     * keeps working unchanged, but the library settled on the platform's name once the
+     * other form controls gained it. The `--input-mandatory-*` tokens and the
+     * `.input-mandatory-asterisk` class keep their names: those are a separate public
+     * surface, and renaming them would break every consumer theming the asterisk.
+     */
     mandatory?: boolean;
     /** Forces the error border independent of validationPattern (server/runtime-driven errors). */
     forceError?: boolean;

package/dist/InputButton/InputButton.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { describeField } from '../_field/description';
   import Button from '../Button/Button.svelte';
   import Input from '../Input/Input.svelte';
   import type { InputButtonProperties } from './properties';
@@ -18,6 +19,7 @@
     rightIcon,
     classes,
     mandatory,
+    required,
     size,
     error,
     testId
@@ -53,6 +55,59 @@
     inputEventProperties?.onstatechange?.(state);
   }
 
+  /* `for` resolves against an element's id and never its name, so `for={name}`
+     never completed the association for any caller -- the same defect Input
+     fixed for itself. InputButton cannot read the id Input derives internally,
+     so it derives the identical one here and passes it down, which both
+     completes the label and keeps the two components agreeing on one id.
+     An explicit id still wins, for repeated rows that need uniqueness. */
+  const uid = $props.id();
+  const fieldId = $derived(
+    inputProperties.id ||
+      (typeof inputProperties.name === 'string' && inputProperties.name !== ''
+        ? `${inputProperties.name}-${uid}`
+        : uid)
+  );
+
+  /* `mandatory` drew an asterisk and stopped there: the Input underneath never
+     received it, so the field was not actually required and announced nothing.
+     Input maps both spellings to native `required` plus `aria-required`, and a
+     component whose own marker contradicts the control inside it is the worse
+     of the two behaviours to keep. `required` is the settled name; `mandatory`
+     stays as the deprecated alias. */
+  const isRequired = $derived(typeof required === 'boolean' ? required : mandatory === true);
+
+  /* InputButton renders the error and helper text ITSELF -- it passes
+     `actionInput={true}`, which is what suppresses Input's own copies -- and
+     those two divs carried no id, so nothing referenced them. A screen-reader
+     user heard the field and never the sentence explaining why it was rejected.
+
+     `describeField` composes the reference from the messages that are actually
+     rendered, so aria-describedby never points at an id that is not in the DOM.
+     It is keyed on `fieldId`, the id Input is given below, and that cannot
+     collide with Input's own `${id}-error` / `${id}-info`: `actionInput` is
+     hard-coded true here, so Input renders neither.
+
+     The existing precedence is preserved exactly -- an external `error` wins
+     over the internal validation message, which itself only shows once
+     validation has actually failed. */
+  const resolvedError = $derived(
+    typeof error === 'string' && error.length > 0
+      ? error
+      : validationState === 'Invalid' &&
+          typeof inputProperties.onErrorMessage === 'string' &&
+          inputProperties.onErrorMessage !== ''
+        ? inputProperties.onErrorMessage
+        : null
+  );
+  const field = $derived(
+    describeField(fieldId, {
+      error: resolvedError,
+      info: inputProperties.infoMessage,
+      invalid: validationState === 'Invalid'
+    })
+  );
+
   export function focus() {
     inputRef?.focus();
   }
@@ -62,15 +117,22 @@
   }
 </script>
 
+<!-- The described element has to carry a role for the description to reach the
+     accessibility tree, and the field itself is inside `Input`, which exposes no
+     `aria-describedby` seam. The role is conditional so an InputButton with no
+     messages keeps the accessibility tree it had before. -->
 <div
   class="container {classes ?? ''}"
+  role={field.describedBy !== null || field.ariaInvalid !== null ? 'group' : null}
+  aria-describedby={field.describedBy}
+  aria-invalid={field.ariaInvalid}
   data-pw={typeof testId === 'string' ? testId : null}
   testID={typeof testId === 'string' ? testId : null}
 >
   {#if inputProperties.label && inputProperties.label !== ''}
-    <label class="label" for={inputProperties.name}>
-      {inputProperties.label}{#if mandatory}<span class="mandatory-marker" aria-label="required">
-          *</span
+    <label class="label" for={fieldId}>
+      {inputProperties.label}{#if isRequired}<span class="mandatory-marker" aria-hidden="true"
+          >*</span
         >{/if}
     </label>
   {/if}
@@ -87,6 +149,8 @@
         <Input
           {...inputProperties}
           {...inputEventProperties}
+          id={fieldId}
+          required={isRequired}
           bind:value
           bind:this={inputRef}
           onstatechange={handleStateChange}
@@ -110,15 +174,26 @@
       </div>
     {/if}
   </div>
-  {#if typeof error === 'string' && error.length > 0}
-    <div class="external-error-message">{error}</div>
-  {:else if typeof inputProperties.onErrorMessage === 'string' && inputProperties.onErrorMessage !== '' && validationState === 'Invalid'}
-    <div class="error-message">
-      {inputProperties.onErrorMessage}
+  {#if field.showsError}
+    <div
+      id={field.errorId}
+      role="alert"
+      class={typeof error === 'string' && error.length > 0
+        ? 'external-error-message'
+        : 'error-message'}
+      data-pw={typeof testId === 'string' ? `${testId}-error-message` : null}
+      testID={typeof testId === 'string' ? `${testId}-error-message` : null}
+    >
+      {resolvedError}
     </div>
   {/if}
-  {#if typeof inputProperties.infoMessage === 'string' && inputProperties.infoMessage !== ''}
-    <div class="info-message">
+  {#if field.showsInfo}
+    <div
+      id={field.infoId}
+      class="info-message"
+      data-pw={typeof testId === 'string' ? `${testId}-info-message` : null}
+      testID={typeof testId === 'string' ? `${testId}-info-message` : null}
+    >
       {inputProperties.infoMessage}
     </div>
   {/if}
@@ -182,7 +257,7 @@
     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, #4d6174);
-    line-height: var(--input-label-msg-text-line-height);
+    line-height: var(--input-label-msg-text-line-height, inherit);
     margin: var(--input-label-msg-text-margin, 0px 0px 6px 0px);
   }
 

package/dist/InputButton/properties.d.ts

@@ -22,7 +22,16 @@ export type OptionalInputButtonProperties = {
     leftIcon?: Snippet;
     rightIcon?: Snippet;
     classes?: string;
-    /** When true, renders a red asterisk (*) next to the label to signal the field is required. */
+    /**
+     * Marks the field required: native `required` and `aria-required` on the
+     * input the user reaches, plus a decorative asterisk beside the label.
+     */
+    required?: boolean;
+    /**
+     * @deprecated Use `required`, the platform's name for this. Kept working as
+     * an alias. It previously drew the asterisk without making the field
+     * required; it now does both, matching the `Input` it wraps.
+     */
     mandatory?: boolean;
     /** Preset height/padding size variant. Overridable per-size via CSS variables. */
     size?: InputButtonSize;

package/dist/Label/Label.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import type { LabelProperties } from './properties';
+
+  // `for` can't be a destructured binding name -- it's a reserved word -- so
+  // it's pulled in under `htmlFor` and re-emitted as the real `for` attribute
+  // below, which is what actually wires up the native label/control
+  // association.
+  let { for: htmlFor, required = false, children, testId, classes }: LabelProperties = $props();
+</script>
+
+<label
+  class="label {classes ?? ''}"
+  for={htmlFor}
+  data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
+>
+  {@render children?.()}
+  {#if required}
+    <span class="required-marker" aria-hidden="true">*</span>
+    <span class="sr-only">required</span>
+  {/if}
+</label>
+
+<style>
+  .label {
+    display: var(--label-display, inline-flex);
+    align-items: var(--label-align-items, center);
+    gap: var(--label-gap, 4px);
+    font-size: var(--label-font-size, 14px);
+    font-weight: var(--label-font-weight, 500);
+    color: var(--label-color, #333);
+    font-family: var(--label-font-family, inherit);
+    cursor: var(--label-cursor, pointer);
+  }
+
+  .required-marker {
+    color: var(--label-required-color, #d32f2f);
+    font-size: var(--label-required-font-size, inherit);
+  }
+
+  /* Visually hidden but still read by assistive technology -- same pattern
+     Table's caption uses. */
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+  }
+</style>

package/dist/Label/Label.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Label: import("svelte").Component<import("./properties").OptionalLabelProperties, {}, "">;
+type Label = ReturnType<typeof Label>;
+export default Label;

package/dist/Label/properties.d.ts

@@ -0,0 +1,26 @@
+import type { Snippet } from 'svelte';
+export type LabelProperties = OptionalLabelProperties;
+export type MandatoryLabelProperties = Record<string, never>;
+export type OptionalLabelProperties = {
+    /**
+     * Id of the form control this label names. Rendered as the real `for`
+     * attribute on a real `<label>` element, so a click anywhere on the label
+     * focuses (and, for a checkbox/radio, activates) the control with this id
+     * -- the native association a `<span>` styled to look like a label can
+     * never give you. Omit it when the label instead wraps its control
+     * (implicit association), or has no associated control at all.
+     */
+    for?: string;
+    /**
+     * Marks the named field as required. Shown as a visual asterisk, but the
+     * asterisk alone is `aria-hidden` -- a screen reader would otherwise either
+     * skip it silently or read the bare glyph "asterisk", neither of which says
+     * "required". A visually-hidden `"required"` string is rendered alongside
+     * it so the requirement is actually announced, not just conveyed by shape.
+     */
+    required?: boolean;
+    /** The label's text/content. */
+    children?: Snippet;
+    testId?: string;
+    classes?: string;
+};

package/dist/Label/properties.js

@@ -0,0 +1 @@
+export {};