@juspay/svelte-ui-components 2.133.0 → 2.134.0

package/README.md

@@ -153,6 +153,36 @@ This library takes a different approach: **components are unstyled by default**
 
 ---
 
+## Web Components
+
+Every component also ships as a real Custom Element (Svelte 5's native `customElement`
+compiler output, shadow DOM), tagged `sui-*` — usable from React, Vue, Angular, or plain
+HTML, no separate Svelte installation required; the runtime is bundled with each
+component.
+
+```html
+<!-- Always the latest release, via GitHub Pages -->
+<script type="module" src="https://juspay.github.io/svelte-ui-components/wc/index.js"></script>
+
+<!-- Pinned to an npm version, via jsDelivr or unpkg -->
+<script type="module" src="https://cdn.jsdelivr.net/npm/@juspay/svelte-ui-components@latest/dist-wc/index.js"></script>
+<script type="module" src="https://unpkg.com/@juspay/svelte-ui-components@latest/dist-wc/index.js"></script>
+
+<sui-button>Click me</sui-button>
+<sui-input placeholder="Type here"></sui-input>
+```
+
+Or from npm directly, via the package's `./wc` export:
+
+```ts
+import '@juspay/svelte-ui-components/wc';
+```
+
+Theming works identically to the Svelte components — the same `--{component}-{element}-{property}`
+CSS custom properties apply across the shadow DOM boundary.
+
+---
+
 ## Theming
 
 ### How It Works

package/dist/Checkbox/Checkbox.svelte

@@ -13,7 +13,8 @@
     indeterminateIcon,
     onclick,
     classes,
-    ariaControls
+    ariaControls,
+    ariaLabel
   }: CheckboxProperties = $props();
 
   function handleClick(): void {
@@ -71,6 +72,7 @@
     aria-checked={indeterminate ? 'mixed' : checked}
     aria-disabled={disabled}
     aria-controls={ariaControls ?? null}
+    aria-label={text.length === 0 ? (ariaLabel ?? null) : null}
     onkeydown={handleKeyDown}
     data-pw={typeof testId === 'string' ? `${testId}-box` : null}
     testID={typeof testId === 'string' ? `${testId}-box` : null}

package/dist/Checkbox/properties.d.ts

@@ -12,6 +12,11 @@ export type OptionalCheckboxProperties = {
     indeterminateIcon?: Snippet;
     classes?: string;
     ariaControls?: string;
+    /** Accessible name for the checkbox. Needed whenever the visible label sits
+     *  outside this component (a table header cell, an icon-only row control),
+     *  since name-from-content cannot reach it. Ignored when `text` is non-empty:
+     *  a visible label must stay part of the accessible name (WCAG 2.5.3). */
+    ariaLabel?: string;
 };
 export type CheckboxEventProperties = {
     onclick?: (checked: boolean) => void;

package/dist/Draggable/Draggable.svelte

@@ -0,0 +1,175 @@
+<script lang="ts">
+  import type { DraggableProperties, DragPosition } from './properties';
+
+  let {
+    x = $bindable(0),
+    y = $bindable(0),
+    axis = 'both',
+    handle,
+    bounds = null,
+    disabled = false,
+    step = 16,
+    dragLabel = 'Drag to move',
+    children,
+    onMoveStart,
+    onMove,
+    onMoveEnd,
+    testId,
+    classes
+  }: DraggableProperties = $props();
+
+  let active: {
+    pointerId: number;
+    startX: number;
+    startY: number;
+    baseX: number;
+    baseY: number;
+  } | null = $state(null);
+
+  function isInteractive(target: EventTarget | null): boolean {
+    return (
+      target instanceof Element &&
+      target.closest('input, textarea, select, button, a, [contenteditable="true"]') !== null
+    );
+  }
+
+  function withinHandle(target: EventTarget | null): boolean {
+    if (typeof handle !== 'string' || handle.length === 0) {
+      return !isInteractive(target);
+    }
+    return target instanceof Element && target.closest(handle) !== null;
+  }
+
+  function clamp(node: HTMLElement, nextX: number, nextY: number): DragPosition {
+    if (bounds !== 'viewport' || typeof window === 'undefined') {
+      return { x: nextX, y: nextY };
+    }
+    const rect = node.getBoundingClientRect();
+    let resultX = nextX;
+    let resultY = nextY;
+    if (rect.left + (nextX - x) < 0) {
+      resultX = x - rect.left;
+    } else if (rect.right + (nextX - x) > window.innerWidth) {
+      resultX = x + (window.innerWidth - rect.right);
+    }
+    if (rect.top + (nextY - y) < 0) {
+      resultY = y - rect.top;
+    } else if (rect.bottom + (nextY - y) > window.innerHeight) {
+      resultY = y + (window.innerHeight - rect.bottom);
+    }
+    return { x: resultX, y: resultY };
+  }
+
+  function startDrag(event: PointerEvent & { currentTarget: HTMLElement }): void {
+    if (disabled || !withinHandle(event.target)) {
+      return;
+    }
+    event.preventDefault();
+    active = {
+      pointerId: event.pointerId,
+      startX: event.clientX,
+      startY: event.clientY,
+      baseX: x,
+      baseY: y
+    };
+    event.currentTarget.setPointerCapture(event.pointerId);
+    onMoveStart?.({ x, y });
+  }
+
+  function moveDrag(event: PointerEvent & { currentTarget: HTMLElement }): void {
+    if (active === null) {
+      return;
+    }
+    const nextX = axis === 'y' ? x : active.baseX + (event.clientX - active.startX);
+    const nextY = axis === 'x' ? y : active.baseY + (event.clientY - active.startY);
+    const clamped = clamp(event.currentTarget, nextX, nextY);
+    x = clamped.x;
+    y = clamped.y;
+    onMove?.({ x, y });
+  }
+
+  function endDrag(event: PointerEvent & { currentTarget: HTMLElement }): void {
+    if (active === null) {
+      return;
+    }
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+    active = null;
+    onMoveEnd?.({ x, y });
+  }
+
+  function keyDrag(event: KeyboardEvent & { currentTarget: HTMLElement }): void {
+    if (disabled || event.target !== event.currentTarget) {
+      return;
+    }
+    let nextX = x;
+    let nextY = y;
+    let moved = false;
+    if (axis !== 'y' && event.key === 'ArrowLeft') {
+      nextX = x - step;
+      moved = true;
+    } else if (axis !== 'y' && event.key === 'ArrowRight') {
+      nextX = x + step;
+      moved = true;
+    } else if (axis !== 'x' && event.key === 'ArrowUp') {
+      nextY = y - step;
+      moved = true;
+    } else if (axis !== 'x' && event.key === 'ArrowDown') {
+      nextY = y + step;
+      moved = true;
+    }
+    if (moved) {
+      event.preventDefault();
+      const clamped = clamp(event.currentTarget, nextX, nextY);
+      x = clamped.x;
+      y = clamped.y;
+      onMove?.({ x, y });
+    }
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  class="draggable {classes ?? ''}"
+  class:dragging={active !== null}
+  data-pw={typeof testId === 'string' ? testId : null}
+  tabindex={disabled ? -1 : 0}
+  aria-label={dragLabel}
+  style:transform={`translate(${x}px, ${y}px)`}
+  onpointerdown={startDrag}
+  onpointermove={moveDrag}
+  onpointerup={endDrag}
+  onkeydown={keyDrag}
+>
+  {#if typeof children === 'function'}
+    {@render children()}
+  {/if}
+</div>
+
+<style>
+  .draggable {
+    box-sizing: border-box;
+    width: var(--draggable-width, fit-content);
+    height: var(--draggable-height, fit-content);
+    cursor: var(--draggable-cursor, grab);
+    touch-action: none;
+  }
+
+  .draggable.dragging {
+    cursor: var(--draggable-cursor-active, grabbing);
+    user-select: none;
+  }
+
+  .draggable:focus-visible {
+    outline: var(--draggable-focus-outline, 2px solid #3b5bdb);
+    outline-offset: var(--draggable-focus-outline-offset, 2px);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .draggable {
+      transition: none;
+    }
+  }
+</style>

package/dist/Draggable/Draggable.svelte.d.ts

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

package/dist/Draggable/properties.d.ts

@@ -0,0 +1,26 @@
+import type { Snippet } from 'svelte';
+export type DragAxis = 'both' | 'x' | 'y';
+export type DragBounds = 'viewport' | null;
+export type DragPosition = {
+    x: number;
+    y: number;
+};
+export type DraggableProperties = OptionalDraggableProperties & DraggableEventProperties;
+export type OptionalDraggableProperties = {
+    x?: number;
+    y?: number;
+    axis?: DragAxis;
+    handle?: string;
+    bounds?: DragBounds;
+    disabled?: boolean;
+    step?: number;
+    dragLabel?: string;
+    children?: Snippet;
+    testId?: string;
+    classes?: string;
+};
+export type DraggableEventProperties = {
+    onMoveStart?: (position: DragPosition) => void;
+    onMove?: (position: DragPosition) => void;
+    onMoveEnd?: (position: DragPosition) => void;
+};

package/dist/Draggable/properties.js

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