@juspay/svelte-ui-components 4.27.5 → 4.28.0

package/dist/Radio/properties.d.ts

@@ -4,11 +4,34 @@ export type MandatoryRadioProperties = {
     value: string;
 };
 export type OptionalRadioProperties = {
+    /**
+     * Text shown, and announced, when the control is in error. Linked to the
+     * control through `aria-describedby`, and sets `aria-invalid` while present.
+     */
+    errorMessage?: string | null;
+    /**
+     * Persistent helper text describing the control. Linked through
+     * `aria-describedby` too, so it is read before the user trips an error rather
+     * than only after.
+     */
+    infoMessage?: string | null;
+    /**
+     * Marks the control invalid without supplying a message, for a consumer
+     * driving validity from a server or its own rules.
+     */
+    invalid?: boolean;
     selectedValue?: string;
     text?: string;
     disabled?: boolean;
     testId?: string;
     classes?: string;
+    /** Blocks submission until one radio in the group is selected. Set it on every
+     *  member, the way the native control expects. */
+    required?: boolean;
+    /** `id` of a form elsewhere in the same document, for a radio rendered outside it.
+     *  Not available through `<sui-radio>`: a shadow-root control cannot join a form
+     *  in the host document. */
+    form?: string;
 };
 export type RadioEventProperties = {
     onchange?: (value: string) => void;

package/dist/RatingGroup/RatingGroup.svelte

@@ -0,0 +1,283 @@
+<script lang="ts">
+  import type { RatingGroupProperties, RatingGroupStarState } from './properties';
+  import starSvg from '../assets/star.svg?raw';
+
+  let {
+    value = $bindable(0),
+    max = 5,
+    disabled = false,
+    readonly = false,
+    allowHalf = false,
+    ariaLabel,
+    testId,
+    classes,
+    star,
+    name,
+    required = false,
+    form,
+    onchange
+  }: RatingGroupProperties = $props();
+
+  // `max` has to be a finite positive number for a star count to mean anything -- a
+  // zero, negative, or non-finite max renders no stars at all instead of a broken or
+  // infinite row, mirroring Progress's guard against an unusable range.
+  const hasValidMax = $derived(Number.isFinite(max) && max > 0);
+  const effectiveMax = $derived(hasValidMax ? max : 0);
+  const starCount = $derived(hasValidMax ? Math.max(0, Math.floor(max)) : 0);
+  const starIndices = $derived(Array.from({ length: starCount }, (_, index) => index));
+
+  const step = $derived(allowHalf ? 0.5 : 1);
+
+  // Clamps AND steps a raw number into a value this component can actually paint and
+  // report: finite, within [0, effectiveMax], and aligned to the configured precision.
+  // A non-finite input (NaN, +/-Infinity) becomes 0 rather than propagating into
+  // aria-valuenow, and an out-of-range input is clamped rather than wrapped -- pressing
+  // ArrowRight past the last star stays on the last star, it does not jump to 0.
+  function sanitize(raw: number): number {
+    // NaN has no direction to clamp toward, so it collapses to 0. +/-Infinity does have
+    // a direction and needs no special case: Math.max/Math.min below already clamp it
+    // to the corresponding bound, the same as any other out-of-range finite number.
+    if (Number.isNaN(raw)) {
+      return 0;
+    }
+    const clamped = Math.min(effectiveMax, Math.max(0, raw));
+    const stepped = allowHalf ? Math.round(clamped * 2) / 2 : Math.round(clamped);
+    // Guards against -0, which is finite, in range, and would otherwise render as the
+    // (visually identical but semantically wrong) "-0 out of N stars".
+    return stepped === 0 ? 0 : stepped;
+  }
+
+  const sanitizedValue = $derived(sanitize(value));
+
+  function formatNumber(n: number): string {
+    return Number.isInteger(n) ? String(n) : n.toFixed(1);
+  }
+
+  const valueText = $derived(
+    `${formatNumber(sanitizedValue)} out of ${formatNumber(effectiveMax)} star${effectiveMax === 1 ? '' : 's'}`
+  );
+
+  function starState(index: number): RatingGroupStarState {
+    const filled = sanitizedValue - index;
+    if (filled >= 1) {
+      return 'full';
+    }
+    if (filled >= 0.5) {
+      return 'half';
+    }
+    return 'empty';
+  }
+
+  // Only interaction produces a value, so the result of sanitize() here is always
+  // already finite and in range -- the guard is against a no-op (e.g. ArrowRight
+  // already at max), not against an invalid result.
+  function commit(newValue: number): void {
+    const sanitizedNew = sanitize(newValue);
+    if (sanitizedNew === sanitizedValue) {
+      return;
+    }
+    value = sanitizedNew;
+    onchange?.(sanitizedNew);
+  }
+
+  function handleStarClick(event: MouseEvent, index: number): void {
+    if (disabled) {
+      return;
+    }
+    // Clicking anywhere in the group focuses it even while readonly -- readonly stays
+    // focusable, only the value stops being settable, so focus is unconditional here
+    // and the value change below is the part readonly guards.
+    root?.focus();
+    if (readonly) {
+      return;
+    }
+    const target = event.currentTarget;
+    const ratio =
+      target instanceof HTMLElement
+        ? (() => {
+            const rect = target.getBoundingClientRect();
+            return rect.width > 0 ? (event.clientX - rect.left) / rect.width : 1;
+          })()
+        : 1;
+    const isHalfClick = allowHalf && ratio < 0.5;
+    commit(isHalfClick ? index + 0.5 : index + 1);
+  }
+
+  // A tablist-style guard against hijacking browser/OS shortcuts built on the same
+  // keys (Ctrl+Home, Shift+ArrowRight) -- mirrors Tabs.svelte's handleKeydown.
+  function handleKeydown(event: KeyboardEvent): void {
+    if (disabled || readonly) {
+      return;
+    }
+    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+      return;
+    }
+    let next: number;
+    if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
+      next = sanitizedValue + step;
+    } else if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
+      next = sanitizedValue - step;
+    } else if (event.key === 'Home') {
+      next = 0;
+    } else if (event.key === 'End') {
+      next = effectiveMax;
+    } else {
+      return;
+    }
+    event.preventDefault();
+    commit(next);
+  }
+
+  let root: HTMLDivElement | null = $state(null);
+
+  // The hidden native input is tabindex="-1", so the browser's own "focus the invalid
+  // field" step would land on an element the user cannot see or reach. Focus the
+  // role="slider" element that carries the group's single tab stop instead -- the same
+  // pattern Checkbox.svelte uses for its own hidden control.
+  function handleInvalid(e: Event): void {
+    e.preventDefault();
+    root?.focus();
+  }
+
+  // A native number input can't distinguish "explicitly rated 0" from "never touched",
+  // so 0 is submitted as empty -- required then blocks submission until a real rating
+  // is made, the same reading Checkbox gives an unchecked required box.
+  const submittedValue = $derived(sanitizedValue > 0 ? sanitizedValue : null);
+</script>
+
+<div
+  bind:this={root}
+  class="rating-group {classes ?? ''}"
+  class:disabled
+  class:readonly
+  data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
+  role="slider"
+  tabindex={disabled ? -1 : 0}
+  aria-valuemin={0}
+  aria-valuemax={effectiveMax}
+  aria-valuenow={sanitizedValue}
+  aria-valuetext={valueText}
+  aria-label={ariaLabel ?? 'Rating'}
+  aria-disabled={disabled}
+  aria-readonly={readonly}
+  data-disabled={disabled ? '' : null}
+  data-readonly={readonly ? '' : null}
+  onkeydown={handleKeydown}
+>
+  {#each starIndices as index (index)}
+    {@const state = starState(index)}
+    <span
+      class="star"
+      aria-hidden="true"
+      data-state={state}
+      data-pw={typeof testId === 'string' ? `${testId}-star-${index + 1}` : null}
+      testID={typeof testId === 'string' ? `${testId}-star-${index + 1}` : null}
+      onclick={(event) => handleStarClick(event, index)}
+    >
+      {#if typeof star === 'function'}
+        {@render star({ index, state })}
+      {:else}
+        <span class="star-empty">
+          <!-- eslint-disable svelte/no-at-html-tags -->
+          {@html starSvg}
+        </span>
+        {#if state !== 'empty'}
+          <span class="star-fill" style:width={state === 'half' ? '50%' : '100%'}>
+            <!-- eslint-disable svelte/no-at-html-tags -->
+            {@html starSvg}
+          </span>
+        {/if}
+      {/if}
+    </span>
+  {/each}
+  <input
+    type="number"
+    class="native-input"
+    tabindex={-1}
+    aria-hidden="true"
+    min={0}
+    max={hasValidMax ? max : null}
+    step={allowHalf ? 0.5 : 1}
+    value={submittedValue === null ? '' : submittedValue}
+    {disabled}
+    {required}
+    name={typeof name === 'string' && submittedValue !== null ? name : null}
+    form={typeof form === 'string' ? form : null}
+    oninvalid={handleInvalid}
+    data-pw={typeof testId === 'string' ? `${testId}-native-input` : null}
+    testID={typeof testId === 'string' ? `${testId}-native-input` : null}
+  />
+</div>
+
+<style>
+  .rating-group {
+    display: var(--rating-group-display, inline-flex);
+    align-items: center;
+    gap: var(--rating-group-gap, 2px);
+    cursor: var(--rating-group-cursor, pointer);
+    outline: none;
+    border-radius: var(--rating-group-border-radius, var(--radius, 4px));
+    width: fit-content;
+  }
+
+  .rating-group:focus-visible {
+    box-shadow: var(--rating-group-focus-ring, 0 0 0 3px rgba(33, 150, 243, 0.3));
+  }
+
+  .rating-group.disabled {
+    opacity: var(--rating-group-disabled-opacity, 0.4);
+    cursor: var(--rating-group-disabled-cursor, not-allowed);
+  }
+
+  .rating-group.readonly {
+    cursor: var(--rating-group-readonly-cursor, default);
+  }
+
+  .star {
+    position: relative;
+    display: inline-flex;
+    width: var(--rating-group-star-size, 24px);
+    height: var(--rating-group-star-size, 24px);
+    flex-shrink: 0;
+  }
+
+  .rating-group:not(.disabled):not(.readonly) .star:hover {
+    transform: var(--rating-group-star-hover-transform, scale(1.1));
+  }
+
+  .star-empty,
+  .star-fill {
+    position: absolute;
+    inset: 0;
+    display: flex;
+  }
+
+  .star-empty {
+    color: var(--rating-group-star-empty-color, #d1d5db);
+  }
+
+  .star-empty :global(svg) {
+    width: 100%;
+    height: 100%;
+  }
+
+  .star-fill {
+    color: var(--rating-group-star-filled-color, #f5a623);
+    overflow: hidden;
+  }
+
+  .star-fill :global(svg) {
+    width: var(--rating-group-star-size, 24px);
+    height: var(--rating-group-star-size, 24px);
+    flex-shrink: 0;
+  }
+
+  .native-input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+    pointer-events: none;
+  }
+</style>

package/dist/RatingGroup/RatingGroup.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { RatingGroupProperties } from './properties';
+declare const RatingGroup: import("svelte").Component<RatingGroupProperties, {}, "value">;
+type RatingGroup = ReturnType<typeof RatingGroup>;
+export default RatingGroup;

package/dist/RatingGroup/properties.d.ts

@@ -0,0 +1,73 @@
+import type { Snippet } from 'svelte';
+/** Fill state of a single star, passed to the `star` snippet. `'half'` is only ever
+ *  produced while `allowHalf` is on -- with it off every star is `'empty'` or `'full'`. */
+export type RatingGroupStarState = 'empty' | 'half' | 'full';
+export type RatingGroupStarContext = {
+    /** 0-based position of this star in the row. */
+    index: number;
+    state: RatingGroupStarState;
+};
+export type RatingGroupProperties = OptionalRatingGroupProperties & RatingGroupEventProperties;
+export type OptionalRatingGroupProperties = {
+    /**
+     * Current rating. Bindable, like `Checkbox.checked` and `Slider.value`. Defaults to
+     * `0` (unrated). Clamped to `[0, max]` and, unless `allowHalf` is set, rounded to the
+     * nearest whole star before it is ever painted or read back through `aria-valuenow` --
+     * a non-finite or out-of-range value never reaches the DOM as `NaN` or an overflowed
+     * star count, it renders as the nearest in-range value instead (mirrors `Progress`'s
+     * guard against an unusable `value`/`max`).
+     */
+    value?: number;
+    /**
+     * Number of stars in the group. Must be a finite, positive number; a zero, negative,
+     * or non-finite `max` is an invalid range and renders no stars at all, the same way
+     * `Progress` renders an invalid range as an empty bar rather than a broken one.
+     */
+    max?: number;
+    disabled?: boolean;
+    /**
+     * Read but not settable: the group stays a single tab stop and its ARIA value keeps
+     * following `value` from outside, but clicking a star or pressing an arrow key no
+     * longer changes it. Distinct from `disabled`, which removes it from the tab order
+     * entirely.
+     */
+    readonly?: boolean;
+    /**
+     * Allows landing on the half star between two whole ones -- clicking the left half of
+     * a star sets it, and the right half sets the whole star. Arrow keys move in 0.5 steps
+     * instead of 1 while this is on.
+     */
+    allowHalf?: boolean;
+    /** Accessible name for the `role="slider"` element. Falls back to `"Rating"`; the
+     *  current value is announced separately through `aria-valuetext`. */
+    ariaLabel?: string;
+    testId?: string;
+    classes?: string;
+    /**
+     * Custom rendering for a single star, given its 0-based `index` and fill `state`.
+     * Falls back to a themeable default star built from `--rating-group-star-*` custom
+     * properties.
+     */
+    star?: Snippet<[RatingGroupStarContext]>;
+    /**
+     * Submits the current rating under this name via a hidden native `<input
+     * type="number">`, the way `Checkbox` submits through a visually hidden native input.
+     * Omitted entirely while disabled, and while unrated (`0`) -- a native number input
+     * cannot itself express "explicitly zero" vs. "never touched", so `0` is treated as
+     * the empty state for submission purposes, matching `required`'s reading of it below.
+     */
+    name?: string;
+    /**
+     * Blocks submission while the rating is unset (`0`), the same way an unchecked
+     * required `Checkbox` does. Invalid focus lands on the group itself, since the
+     * hidden native input is deliberately not a tab stop.
+     */
+    required?: boolean;
+    /** `id` of a form elsewhere in the same document, for a group rendered outside it.
+     *  Unavailable through `<sui-rating-group>`, whose hidden input sits in a shadow
+     *  root and cannot reach a form in the host document. */
+    form?: string;
+};
+export type RatingGroupEventProperties = {
+    onchange?: (value: number) => void;
+};

package/dist/RatingGroup/properties.js

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

package/dist/RelativeTime/RelativeTime.svelte

@@ -112,7 +112,7 @@
   .relative-time {
     font-size: var(--relative-time-font-size, 14px);
     font-weight: var(--relative-time-font-weight, 400);
-    font-family: var(--relative-time-font-family);
+    font-family: var(--relative-time-font-family, inherit);
     color: var(--relative-time-color, inherit);
     cursor: var(--relative-time-cursor, default);
   }