polymorph-ui-components 0.6.2 → 0.8.0

package/dist/CommandMenu/CommandMenu.svelte

@@ -4,6 +4,7 @@
   import { SvelteMap } from 'svelte/reactivity';
   import Img from '../Img/Img.svelte';
   import searchSvg from '../assets/search.svg?raw';
+  import { lockDocumentScroll } from '../utils';
 
   let {
     items,
@@ -162,7 +163,7 @@
   }
 
   function scrollLockAction(_node: HTMLElement) {
-    document.body.style.overflow = 'hidden';
+    const unlockScroll = lockDocumentScroll();
     tick().then(() => {
       if (inputElement !== null) {
         inputElement.focus();
@@ -170,7 +171,7 @@
     });
     return {
       destroy() {
-        document.body.style.overflow = '';
+        unlockScroll();
       }
     };
   }
@@ -181,7 +182,6 @@
 
   onDestroy(() => {
     if (typeof window !== 'undefined') {
-      document.body.style.overflow = '';
       window.removeEventListener('keydown', handleGlobalKeyDown);
     }
   });

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,
@@ -26,6 +27,7 @@
     closeIcon,
     editIcon,
     deleteIcon,
+    itemFooter,
     testId,
     onimageclick,
     oneditclick,
@@ -47,21 +49,23 @@
   let hasPrevious = $derived(loop ? images.length > 1 : activeIndex > 0);
   let hasNext = $derived(loop ? images.length > 1 : activeIndex < images.length - 1);
   let itemsAreInteractive = $derived(enableLightbox || typeof onimageclick === 'function');
+  let hasItemFooter = $derived(view === 'grid' && typeof itemFooter === 'function');
   let showEditButton = $derived(typeof oneditclick === 'function');
   let showDeleteButton = $derived(typeof ondeleteclick === 'function');
   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;
@@ -91,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();
     }
   }
@@ -133,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();
     }
@@ -181,19 +183,32 @@
   {/if}
 {/snippet}
 
-{#snippet itemContent(image: GalleryImage)}
-  <Img src={image.thumbnail ?? image.src} alt={image.alt} fallback={image.fallback} />
-  {#if view === 'list'}
-    <span class="list-text">
-      <span class="list-title">{image.alt}</span>
-      {#if typeof image.caption === 'string' && image.caption.length > 0}
-        <span class="list-caption">{image.caption}</span>
-      {/if}
+{#snippet itemContent(image: GalleryImage, index: number)}
+  {#if hasItemFooter}
+    <span class="grid-image-wrap">
+      <Img src={image.thumbnail ?? image.src} alt={image.alt} fallback={image.fallback} />
     </span>
+    {#if typeof itemFooter === 'function'}
+      {@render itemFooter(image, index)}
+    {/if}
+  {:else}
+    <Img src={image.thumbnail ?? image.src} alt={image.alt} fallback={image.fallback} />
+    {#if view === 'list'}
+      <span class="list-text">
+        <span class="list-title">{image.alt}</span>
+        {#if typeof image.caption === 'string' && image.caption.length > 0}
+          <span class="list-caption">{image.caption}</span>
+        {/if}
+      </span>
+    {/if}
   {/if}
 {/snippet}
 
-<div class="gallery {view} {classes ?? ''}" data-pw={testId} role="list">
+<div
+  class="gallery {view} {hasItemFooter ? 'has-item-footer' : ''} {classes ?? ''}"
+  data-pw={testId}
+  role="list"
+>
   {#each images as image, index (index)}
     <div class="gallery-item" role="listitem">
       {#if itemsAreInteractive}
@@ -204,11 +219,11 @@
             ? `View image ${index + 1} of ${images.length}: ${image.alt}`
             : image.alt}
         >
-          {@render itemContent(image)}
+          {@render itemContent(image, index)}
         </button>
       {:else}
         <div class="gallery-item-content">
-          {@render itemContent(image)}
+          {@render itemContent(image, index)}
         </div>
       {/if}
       {#if showItemActions}
@@ -297,7 +312,10 @@
 
   .gallery.grid {
     display: grid;
-    grid-template-columns: repeat(var(--gallery-columns, 3), 1fr);
+    grid-template-columns: var(
+      --gallery-grid-template-columns,
+      repeat(var(--gallery-columns, 3), 1fr)
+    );
     gap: var(--gallery-gap, 8px);
   }
 
@@ -322,6 +340,12 @@
     --image-transition: var(--gallery-item-image-transition);
   }
 
+  .grid.has-item-footer .gallery-item {
+    aspect-ratio: auto;
+    overflow: visible;
+    border-radius: 0px;
+  }
+
   .list .gallery-item {
     display: flex;
     align-items: center;
@@ -355,6 +379,25 @@
     border-radius: var(--gallery-item-border-radius, 0px);
   }
 
+  .grid.has-item-footer .gallery-item-content {
+    display: flex;
+    flex-direction: column;
+    height: auto;
+    border-radius: var(--gallery-item-border-radius, 0px);
+    overflow: hidden;
+  }
+
+  .grid-image-wrap {
+    display: block;
+    aspect-ratio: var(--gallery-item-aspect-ratio, 1);
+    overflow: hidden;
+    --image-width: 100%;
+    --image-height: 100%;
+    --image-object-fit: var(--gallery-item-image-fit, cover);
+    --image-border-radius: 0px;
+    --image-transition: var(--gallery-item-image-transition);
+  }
+
   .list .gallery-item-content {
     display: flex;
     align-items: center;

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/Gallery/properties.d.ts

@@ -24,6 +24,7 @@ export type OptionalGalleryProperties = {
     closeIcon?: Snippet;
     editIcon?: Snippet;
     deleteIcon?: Snippet;
+    itemFooter?: Snippet<[GalleryImage, number]>;
     testId?: string;
     classes?: string;
 };

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/MediaUpload/MediaUpload.svelte

@@ -88,13 +88,13 @@
       isImage
     };
     items = [...items, item];
+    const updatedItem = items[items.length - 1];
 
     if (isImage) {
       const reader = new FileReader();
       reader.onload = (event) => {
         if (typeof event.target?.result === 'string') {
-          item.src = event.target.result;
-          items = [...items];
+          updatedItem.src = event.target.result;
         }
       };
       reader.readAsDataURL(file);

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();
@@ -221,6 +220,7 @@
 
   .slot-content {
     display: var(--modal-display, flex);
+    flex-direction: var(--modal-flex-direction, row);
     overflow-y: var(--modal-overflow-y, scroll);
     scrollbar-width: var(--modal-scrollbar-width, none);
   }

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'}