polymorph-ui-components 0.7.0 → 0.8.0

package/dist/Gallery/Gallery.svelte

@@ -11,6 +11,7 @@
   import chevronRightSvg from '../assets/chevron-right-lg.svg?raw';
   import editSvg from '../assets/edit.svg?raw';
   import deleteSvg from '../assets/delete.svg?raw';
+  import { activeElementOf, deepActiveElement, lockDocumentScroll } from '../utils';
 
   let {
     images,
@@ -54,16 +55,17 @@
   let showItemActions = $derived(showEditButton || showDeleteButton);
 
   function lightboxAction(node: HTMLElement) {
-    if (openerElement === null && document.activeElement instanceof HTMLElement) {
-      openerElement = document.activeElement;
+    const active = deepActiveElement();
+    if (openerElement === null && active instanceof HTMLElement) {
+      openerElement = active;
     }
-    document.body.style.overflow = 'hidden';
+    const unlockScroll = lockDocumentScroll();
     tick().then(() => {
       node.focus();
     });
     return {
       destroy() {
-        document.body.style.overflow = '';
+        unlockScroll();
         if (openerElement !== null) {
           openerElement.focus();
           openerElement = null;
@@ -93,7 +95,7 @@
     activeIndex = index;
     onchange?.(activeIndex);
     await tick();
-    if (lightboxDiv !== null && !lightboxDiv.contains(document.activeElement)) {
+    if (lightboxDiv !== null && !lightboxDiv.contains(activeElementOf(lightboxDiv))) {
       lightboxDiv.focus();
     }
   }
@@ -135,13 +137,11 @@
     if (first === null || last === null) {
       return;
     }
-    if (
-      event.shiftKey &&
-      (document.activeElement === first || document.activeElement === lightboxDiv)
-    ) {
+    const active = activeElementOf(first);
+    if (event.shiftKey && (active === first || active === lightboxDiv)) {
       event.preventDefault();
       last.focus();
-    } else if (!event.shiftKey && document.activeElement === last) {
+    } else if (!event.shiftKey && active === last) {
       event.preventDefault();
       first.focus();
     }

package/dist/Gallery/Gallery.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { GalleryProperties } from './properties';
-declare const Gallery: import("svelte").Component<GalleryProperties, {}, "activeIndex" | "open">;
+declare const Gallery: import("svelte").Component<GalleryProperties, {}, "open" | "activeIndex">;
 type Gallery = ReturnType<typeof Gallery>;
 export default Gallery;

package/dist/Input/Input.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { validateInput } from '../utils';
+  import { activeElementOf, validateInput } from '../utils';
   import type { InputProperties } from './properties';
   import type { ValidationState } from '../types';
 
@@ -23,6 +23,8 @@
     useTextArea = false,
     autoComplete = 'on',
     name = '',
+    id,
+    ariaLabel,
     testId = '',
     textTransformers = [],
     textViewPresentation = [],
@@ -42,6 +44,9 @@
     ariaActivedescendant
   }: InputProperties = $props();
 
+  const generatedId = $props.id();
+  const inputId = $derived(id ?? generatedId);
+
   export function focus() {
     try {
       inputElement?.focus();
@@ -77,7 +82,7 @@
       valueValidation === 'InProgress' &&
       value.length > 0 &&
       inputElement !== null &&
-      inputElement !== document.activeElement
+      inputElement !== activeElementOf(inputElement)
     ) {
       return 'Invalid';
     }
@@ -194,7 +199,7 @@
 
 <div class="input-container {classes ?? ''}" class:input-error={showErrorMessage && !actionInput}>
   {#if typeof label === 'string' && label !== '' && !actionInput}
-    <label class="label" for={name}>
+    <label class="label" for={inputId}>
       {label}
     </label>
   {/if}
@@ -206,7 +211,9 @@
       {placeholder}
       autocomplete={autoComplete}
       {name}
+      id={inputId}
       {role}
+      aria-label={ariaLabel}
       aria-expanded={ariaExpanded}
       aria-autocomplete={ariaAutocomplete}
       aria-controls={ariaControls}
@@ -231,7 +238,9 @@
       {placeholder}
       autocomplete={autoComplete}
       {name}
+      id={inputId}
       {role}
+      aria-label={ariaLabel}
       aria-expanded={ariaExpanded}
       aria-autocomplete={ariaAutocomplete}
       aria-controls={ariaControls}

package/dist/Input/properties.d.ts

@@ -23,6 +23,8 @@ export type OptionalInputProperties = {
     useTextArea?: boolean;
     autoComplete?: HTMLInputAttributes['autocomplete'];
     name?: string;
+    id?: string;
+    ariaLabel?: string;
     textTransformers?: TextTransformer[];
     textViewPresentation?: TextTransformer[];
     testId?: string;

package/dist/InputButton/InputButton.svelte

@@ -23,6 +23,9 @@
 
   let validationState = $state<ValidationState>('InProgress');
 
+  const generatedId = $props.id();
+  const inputId = $derived(inputProperties.id ?? generatedId);
+
   let inputRef: SvelteComponent | null = $state(null);
 
   // Derive enable state for right button
@@ -61,8 +64,8 @@
 </script>
 
 <div class="container {classes ?? ''}" data-pw={testId}>
-  {#if inputProperties.label && inputProperties.label !== ''}
-    <label class="label" for={inputProperties.name}>
+  {#if typeof inputProperties.label === 'string' && inputProperties.label.length > 0}
+    <label class="label" for={inputId}>
       {inputProperties.label}
     </label>
   {/if}
@@ -79,6 +82,7 @@
         <Input
           {...inputProperties}
           {...inputEventProperties}
+          id={inputId}
           bind:value
           bind:this={inputRef}
           onstatechange={handleStateChange}
@@ -102,12 +106,12 @@
       </div>
     {/if}
   </div>
-  {#if inputProperties.onErrorMessage !== '' && validationState === 'Invalid'}
+  {#if typeof inputProperties.onErrorMessage === 'string' && inputProperties.onErrorMessage.length > 0 && validationState === 'Invalid'}
     <div class="error-message">
       {inputProperties.onErrorMessage}
     </div>
   {/if}
-  {#if inputProperties.infoMessage !== ''}
+  {#if typeof inputProperties.infoMessage === 'string' && inputProperties.infoMessage.length > 0}
     <div class="info-message">
       {inputProperties.infoMessage}
     </div>
@@ -127,7 +131,6 @@
     --input-focus-border: none;
     --input-box-shadow: none;
     --input-margin: none;
-    --input-width: fit-content;
     height: var(--input-height, fit-content);
     font-size: var(--input-font-size, 16px) !important;
     font-weight: 500;
@@ -141,6 +144,7 @@
   .input-button {
     display: flex;
     align-items: stretch;
+    height: 100%;
     border-radius: var(--input-button-radius, 6px);
     border: var(--input-button-border, 1px solid currentColor);
     box-shadow: var(--input-button-box-shadow, none);
@@ -151,7 +155,11 @@
     border: var(--input-button-focus-border);
   }
   .input {
+    --input-container-width: 100%;
+    --input-width: 100%;
+    --input-height: 100%;
     flex: 2;
+    display: flex;
     min-width: 0px;
   }
 

package/dist/Loader/Loader.svelte

@@ -1,10 +1,16 @@
 <script lang="ts">
   import type { LoaderProperties } from './properties';
 
-  let { testId, classes }: LoaderProperties = $props();
+  let { label, testId, classes }: LoaderProperties = $props();
+
+  let announced = $derived(typeof label === 'string' && label.length > 0);
 </script>
 
-<div class="loader {classes ?? ''}" data-pw={testId}></div>
+<div class="loader {classes ?? ''}" role={announced ? 'status' : null} data-pw={testId}>
+  {#if announced}
+    <span class="loader-label">{label}</span>
+  {/if}
+</div>
 
 <style>
   .loader {
@@ -40,8 +46,8 @@
       var(--loader-foreground-end, transparent) 42%
     );
     position: relative;
-    -webkit-animation: load3 1.4s infinite linear;
-    animation: load3 1.4s infinite linear;
+    -webkit-animation: load3 var(--loader-duration, 1.4s) infinite linear;
+    animation: load3 var(--loader-duration, 1.4s) infinite linear;
     -webkit-transform: translateZ(0);
     -ms-transform: translateZ(0);
     transform: translateZ(0);
@@ -67,6 +73,16 @@
     left: var(--loader-after-left, 50%);
     transform: translate(-50%, -50%);
   }
+
+  .loader-label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
   @-webkit-keyframes load3 {
     0% {
       -webkit-transform: rotate(0deg);

package/dist/Loader/properties.d.ts

@@ -1,4 +1,5 @@
 export type LoaderProperties = {
+    label?: string;
     testId?: string;
     classes?: string;
 };

package/dist/Modal/Modal.svelte

@@ -3,12 +3,13 @@
   import { onMount, onDestroy, untrack } from 'svelte';
   import ModalAnimation from '../Animations/ModalAnimation.svelte';
   import OverlayAnimation from '../Animations/OverlayAnimation.svelte';
-  import { createDebouncer } from '../utils';
+  import { createDebouncer, lockDocumentScroll } from '../utils';
   import Button from '../Button/Button.svelte';
 
   let overlayDiv: HTMLDivElement | null = $state(null);
   let backPressed = false;
   let dismissTimer: ReturnType<typeof setTimeout> | null = null;
+  let unlockScroll: (() => void) | null = null;
 
   let {
     size = 'fit-content',
@@ -79,7 +80,7 @@
 
   onMount(() => {
     if (lockScroll) {
-      document.body.style.overflow = 'hidden';
+      unlockScroll = lockDocumentScroll();
     }
     if (typeof autoDismissAfter === 'number') {
       dismissTimer = setTimeout(() => onclose?.(), autoDismissAfter);
@@ -95,9 +96,7 @@
       clearTimeout(dismissTimer);
     }
     if (typeof window !== 'undefined') {
-      if (lockScroll) {
-        document.body.style.overflow = '';
-      }
+      unlockScroll?.();
       if (supportHardwareBackPress) {
         if (!backPressed) {
           history.back();

package/dist/NumberStepper/NumberStepper.svelte

@@ -0,0 +1,154 @@
+<script lang="ts">
+  import { tick } from 'svelte';
+  import type { NumberStepperProperties } from './properties';
+  import Button from '../Button/Button.svelte';
+  import Loader from '../Loader/Loader.svelte';
+  import minusSvg from '../assets/minus.svg?raw';
+  import addSvg from '../assets/add.svg?raw';
+  import { deepActiveElement } from '../utils';
+
+  let {
+    value,
+    min = 0,
+    max = Number.POSITIVE_INFINITY,
+    step = 1,
+    disabled = false,
+    ariaLabel = 'Quantity',
+    decrementLabel = 'Decrease',
+    incrementLabel = 'Increase',
+    loadingLabel = 'Updating',
+    decrementIcon,
+    incrementIcon,
+    testId,
+    onchange,
+    classes
+  }: NumberStepperProperties = $props();
+
+  let pending = $state(false);
+  let decrementButton: ReturnType<typeof Button> | null = $state(null);
+  let incrementButton: ReturnType<typeof Button> | null = $state(null);
+  let canDecrement = $derived(!disabled && value - step >= min);
+  let canIncrement = $derived(!disabled && value + step <= max);
+
+  async function change(next: number, pressed: ReturnType<typeof Button> | null): Promise<void> {
+    if (pending) {
+      return;
+    }
+    const pressedElement = pressed?.getButtonRef() ?? null;
+    const hadFocus = pressedElement !== null && deepActiveElement() === pressedElement;
+
+    const result = onchange?.(next);
+    if (result instanceof Promise) {
+      pending = true;
+      try {
+        await result;
+      } finally {
+        pending = false;
+      }
+    }
+
+    await tick();
+    const other = (pressed === incrementButton ? decrementButton : incrementButton)?.getButtonRef();
+    if (hadFocus && pressedElement.disabled && other instanceof HTMLElement && !other.disabled) {
+      other.focus();
+    }
+  }
+</script>
+
+<div
+  class="number-stepper {classes ?? ''}"
+  class:pending
+  role="group"
+  aria-label={ariaLabel}
+  aria-busy={pending}
+  data-pw={testId}
+>
+  <div class="number-stepper-button">
+    <Button
+      bind:this={decrementButton}
+      ariaLabel={decrementLabel}
+      disabled={!canDecrement}
+      onclick={() => change(value - step, decrementButton)}
+      {...typeof testId === 'string' ? { testId: `${testId}-decrement` } : {}}
+    >
+      {#if typeof decrementIcon === 'function'}
+        {@render decrementIcon(value)}
+      {:else}
+        <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+        {@html minusSvg}
+      {/if}
+    </Button>
+  </div>
+  <span class="number-stepper-value" aria-live="polite">
+    {#if pending}
+      <Loader label={loadingLabel} />
+    {:else}
+      {value}
+    {/if}
+  </span>
+  <div class="number-stepper-button">
+    <Button
+      bind:this={incrementButton}
+      ariaLabel={incrementLabel}
+      disabled={!canIncrement}
+      onclick={() => change(value + step, incrementButton)}
+      {...typeof testId === 'string' ? { testId: `${testId}-increment` } : {}}
+    >
+      {#if typeof incrementIcon === 'function'}
+        {@render incrementIcon(value)}
+      {:else}
+        <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+        {@html addSvg}
+      {/if}
+    </Button>
+  </div>
+</div>
+
+<style>
+  .number-stepper {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--number-stepper-gap, 0);
+    padding: var(--number-stepper-padding, 0);
+    border: var(--number-stepper-border, 1px solid currentColor);
+    border-radius: var(--number-stepper-border-radius, 6px);
+    background: var(--number-stepper-background, transparent);
+    color: var(--number-stepper-color, currentColor);
+  }
+
+  .number-stepper-button {
+    --button-color: var(--number-stepper-button-background, transparent);
+    --button-text-color: var(--number-stepper-button-color, currentColor);
+    --button-hover-color: var(--number-stepper-button-hover-background, transparent);
+    --button-padding: var(--number-stepper-button-padding, 6px);
+    --button-border: none;
+    --button-border-radius: var(--number-stepper-button-border-radius, 6px);
+    --button-disabled-opacity: var(--number-stepper-button-disabled-opacity, 0.4);
+    display: flex;
+  }
+
+  .pending .number-stepper-button {
+    --button-cursor: var(--number-stepper-pending-cursor, progress);
+    opacity: var(--number-stepper-button-disabled-opacity, 0.4);
+  }
+
+  .number-stepper-button :global(svg) {
+    width: var(--number-stepper-icon-size, 14px);
+    height: var(--number-stepper-icon-size, 14px);
+  }
+
+  .number-stepper-value {
+    --loader-width: var(--number-stepper-loader-size, 14px);
+    --loader-height: var(--number-stepper-loader-size, 14px);
+    --loader-before-width: calc(var(--number-stepper-loader-size, 14px) / 2);
+    --loader-before-height: calc(var(--number-stepper-loader-size, 14px) / 2);
+    --loader-after-width: calc(var(--number-stepper-loader-size, 14px) * 0.75);
+    --loader-after-height: calc(var(--number-stepper-loader-size, 14px) * 0.75);
+    display: flex;
+    justify-content: center;
+    min-width: var(--number-stepper-value-min-width, 24px);
+    font-size: var(--number-stepper-value-font-size, 14px);
+    font-weight: var(--number-stepper-value-font-weight, 500);
+    font-variant-numeric: var(--number-stepper-value-font-variant-numeric, tabular-nums);
+  }
+</style>

package/dist/NumberStepper/NumberStepper.svelte.d.ts

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

package/dist/NumberStepper/properties.d.ts

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+export type NumberStepperProperties = MandatoryNumberStepperProperties & OptionalNumberStepperProperties & NumberStepperEventProperties;
+export type MandatoryNumberStepperProperties = {
+    value: number;
+};
+export type OptionalNumberStepperProperties = {
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    ariaLabel?: string;
+    decrementLabel?: string;
+    incrementLabel?: string;
+    loadingLabel?: string;
+    decrementIcon?: Snippet<[number]>;
+    incrementIcon?: Snippet<[number]>;
+    testId?: string;
+    classes?: string;
+};
+export type NumberStepperEventProperties = {
+    onchange?: ((value: number) => void) | ((value: number) => Promise<void>);
+};

package/dist/NumberStepper/properties.js

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

package/dist/Pill/Pill.svelte

@@ -6,6 +6,7 @@
   let {
     text,
     dismissible = false,
+    dismissLabel = 'Dismiss',
     disabled = false,
     testId,
     dismissIcon,
@@ -58,7 +59,7 @@
       <Button
         {disabled}
         onclick={handleDismiss}
-        ariaLabel="Dismiss"
+        ariaLabel={dismissLabel}
         {...typeof testId === 'string' ? { testId: `${testId}-dismiss` } : {}}
       >
         {#if typeof dismissIcon === 'function'}

package/dist/Pill/properties.d.ts

@@ -5,6 +5,7 @@ export type MandatoryPillProperties = {
 };
 export type OptionalPillProperties = {
     dismissible?: boolean;
+    dismissLabel?: string;
     disabled?: boolean;
     testId?: string;
     dismissIcon?: Snippet;

package/dist/Progress/Progress.svelte

@@ -1,19 +1,88 @@
 <script lang="ts">
   import type { ProgressProperties } from './properties';
 
-  let { value, max = 100, showLabel = false, testId, classes }: ProgressProperties = $props();
+  let {
+    value,
+    max = 100,
+    showLabel = false,
+    ariaLabel,
+    valueText,
+    milestones = [],
+    milestone,
+    testId,
+    classes
+  }: ProgressProperties = $props();
 
-  let percentage = $derived(Math.min(100, Math.max(0, (value / max) * 100)));
+  let clampedValue = $derived(Math.min(max, Math.max(0, value)));
+  let percentage = $derived(max > 0 ? (clampedValue / max) * 100 : 0);
   let isIndeterminate = $derived(value < 0);
+
+  let stops = $derived.by(() => {
+    let previous = 0;
+    return [...milestones]
+      .sort((a, b) => a.value - b.value)
+      .map((stop) => {
+        const position = Math.min(max, Math.max(0, stop.value));
+        const span = position - previous;
+        previous = position;
+        return { stop, span, reached: !isIndeterminate && value >= stop.value };
+      });
+  });
+  let trailingSpan = $derived(max - Math.min(max, Math.max(0, stops.at(-1)?.stop.value ?? max)));
+  let hasMilestoneLabels = $derived(
+    stops.some(({ stop }) => typeof stop.label === 'string' && stop.label.length > 0)
+  );
 </script>
 
 <div class="container {classes ?? ''}" data-pw={testId}>
-  <div class="track">
-    <div
-      class="bar"
-      class:indeterminate={isIndeterminate}
-      style:width={isIndeterminate ? null : `${percentage}%`}
-    ></div>
+  <div class="meter">
+    <div class="rail" class:with-milestones={stops.length > 0}>
+      <div class="track-layer">
+        <div
+          class="track"
+          role="progressbar"
+          aria-label={ariaLabel ?? 'Progress'}
+          aria-valuemin={0}
+          aria-valuemax={max}
+          aria-valuenow={isIndeterminate ? null : clampedValue}
+          aria-valuetext={valueText}
+        >
+          <div
+            class="bar"
+            class:indeterminate={isIndeterminate}
+            style:width={isIndeterminate ? null : `${percentage}%`}
+          ></div>
+        </div>
+      </div>
+      {#if stops.length > 0}
+        <div class="milestones">
+          {#each stops as { stop, span, reached }, index (index)}
+            <div class="segment" style:flex-grow={span}>
+              <div class="milestone" class:reached>
+                {#if typeof milestone === 'function'}
+                  {@render milestone(stop, reached)}
+                {:else}
+                  <span class="milestone-marker"></span>
+                {/if}
+              </div>
+            </div>
+          {/each}
+          {#if trailingSpan > 0}
+            <div class="segment" style:flex-grow={trailingSpan}></div>
+          {/if}
+        </div>
+      {/if}
+    </div>
+    {#if hasMilestoneLabels}
+      <div class="milestone-labels">
+        {#each stops as { stop, span }, index (index)}
+          <span class="segment milestone-label" style:flex-grow={span}>{stop.label ?? ''}</span>
+        {/each}
+        {#if trailingSpan > 0}
+          <span class="segment" style:flex-grow={trailingSpan}></span>
+        {/if}
+      </div>
+    {/if}
   </div>
   {#if showLabel && !isIndeterminate}
     <div class="label">{Math.round(percentage)}%</div>
@@ -29,6 +98,32 @@
     gap: var(--progress-container-gap, 8px);
   }
 
+  .meter {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: var(--progress-milestone-label-gap, 8px);
+  }
+
+  .rail {
+    position: relative;
+    display: flex;
+  }
+
+  .track-layer {
+    flex: 1;
+    display: flex;
+    align-items: center;
+  }
+
+  .with-milestones .track-layer {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
   .track {
     flex: 1;
     height: var(--progress-track-height, 8px);
@@ -49,6 +144,49 @@
     animation: indeterminate var(--progress-indeterminate-duration, 1.5s) ease-in-out infinite;
   }
 
+  .milestones {
+    flex: 1;
+    display: flex;
+    position: relative;
+  }
+
+  .segment {
+    flex-basis: 0;
+    flex-shrink: 1;
+    min-width: 0;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .milestone {
+    display: flex;
+  }
+
+  .milestone-marker {
+    width: var(--progress-milestone-size, 12px);
+    height: var(--progress-milestone-size, 12px);
+    border: var(--progress-milestone-border, 2px solid #ffffff);
+    border-radius: var(--progress-milestone-border-radius, 50%);
+    background: var(--progress-milestone-background, #e4e4e7);
+    box-sizing: border-box;
+  }
+
+  .reached .milestone-marker {
+    background: var(--progress-milestone-reached-background, currentColor);
+  }
+
+  .milestone-labels {
+    display: flex;
+    font-size: var(--progress-milestone-label-font-size, 12px);
+    font-weight: var(--progress-milestone-label-font-weight, 400);
+    color: var(--progress-milestone-label-color, currentColor);
+    font-family: var(--progress-milestone-label-font-family, inherit);
+  }
+
+  .milestone-label {
+    text-align: var(--progress-milestone-label-text-align, end);
+  }
+
   .label {
     font-size: var(--progress-label-font-size, 14px);
     font-weight: var(--progress-label-font-weight, 500);