polymorph-ui-components 0.7.0 → 0.9.0

package/dist/Progress/properties.d.ts

@@ -1,3 +1,8 @@
+import type { Snippet } from 'svelte';
+export type ProgressMilestone = {
+    value: number;
+    label?: string;
+};
 export type ProgressProperties = MandatoryProgressProperties & OptionalProgressProperties;
 export type MandatoryProgressProperties = {
     value: number;
@@ -5,6 +10,10 @@ export type MandatoryProgressProperties = {
 export type OptionalProgressProperties = {
     max?: number;
     showLabel?: boolean;
+    ariaLabel?: string;
+    valueText?: string;
+    milestones?: ProgressMilestone[];
+    milestone?: Snippet<[ProgressMilestone, boolean]>;
     testId?: string;
     classes?: string;
 };

package/dist/Select/Select.svelte

@@ -11,6 +11,7 @@
     searchable = false,
     placeholder = '',
     disabled = false,
+    ariaLabel,
     testId,
     onchange,
     classes
@@ -240,6 +241,7 @@
     onclick={handleTriggerClick}
     onkeydown={handleKeydown}
     role="combobox"
+    aria-label={ariaLabel}
     aria-expanded={isOpen}
     aria-haspopup="listbox"
     aria-controls={listboxId}
@@ -265,6 +267,7 @@
           onfocus={handleSearchFocus}
           bind:this={searchInputEl}
           placeholder={value.length === 0 ? placeholder : ''}
+          aria-label={ariaLabel}
           {disabled}
           autocomplete="off"
           tabindex={disabled ? -1 : 0}
@@ -281,6 +284,7 @@
         onfocus={handleSearchFocus}
         bind:this={searchInputEl}
         placeholder={searchPlaceholder}
+        aria-label={ariaLabel}
         {disabled}
         autocomplete="off"
         tabindex={disabled ? -1 : 0}
@@ -295,7 +299,13 @@
   </div>
 
   {#if isOpen && !disabled}
-    <div class="select-dropdown" role="listbox" id={listboxId} aria-multiselectable={multiple}>
+    <div
+      class="select-dropdown"
+      role="listbox"
+      id={listboxId}
+      aria-label={ariaLabel}
+      aria-multiselectable={multiple}
+    >
       {#if filteredItems.length === 0}
         <div class="select-empty">No results</div>
       {:else}

package/dist/Select/properties.d.ts

@@ -12,6 +12,7 @@ export type OptionalSelectProperties = {
     searchable?: boolean;
     placeholder?: string;
     disabled?: boolean;
+    ariaLabel?: string;
     testId?: string;
     classes?: string;
 };

package/dist/Sheet/Sheet.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
   import type { SheetProperties } from './properties';
   import { fly, fade } from 'svelte/transition';
+  import { prefersReducedMotion } from 'svelte/motion';
   import { tick } from 'svelte';
   import Button from '../Button/Button.svelte';
+  import closeSvg from '../assets/close.svg?raw';
+  import { deepActiveElement, focusableElements, lockDocumentScroll } from '../utils';
 
   let {
     open = $bindable(false),
@@ -10,31 +13,57 @@
     title,
     showOverlay = true,
     showCloseButton = true,
+    closeLabel = 'Close',
     testId,
     content,
     footer,
+    closeIcon,
     onclose,
     classes
   }: SheetProperties = $props();
 
   let overlayDiv: HTMLDivElement | null = $state(null);
   let sheetPanel: HTMLDivElement | null = $state(null);
+  let openerElement: HTMLElement | null = null;
+
+  let fadeDuration = $derived(prefersReducedMotion.current ? 0 : 200);
 
   let flyParams = $derived.by(() => {
+    const duration = prefersReducedMotion.current ? 0 : 300;
     switch (side) {
       case 'left':
-        return { x: -400, y: 0, duration: 300 };
+        return { x: '-100%', duration };
       case 'right':
-        return { x: 400, y: 0, duration: 300 };
+        return { x: '100%', duration };
       case 'top':
-        return { x: 0, y: -400, duration: 300 };
+        return { y: '-100%', duration };
       case 'bottom':
-        return { x: 0, y: 400, duration: 300 };
+        return { y: '100%', duration };
     }
   });
 
+  function enter() {
+    if (openerElement === null) {
+      const active = deepActiveElement();
+      openerElement = active instanceof HTMLElement ? active : null;
+    }
+    tick().then(() => {
+      if (sheetPanel !== null) {
+        sheetPanel.focus();
+      }
+    });
+  }
+
+  function restoreFocus() {
+    if (openerElement !== null && openerElement.isConnected) {
+      openerElement.focus();
+    }
+    openerElement = null;
+  }
+
   function close() {
     open = false;
+    restoreFocus();
     onclose?.();
   }
 
@@ -44,65 +73,77 @@
     }
   }
 
-  function handleKeyDown(event: KeyboardEvent) {
-    if (event.key === 'Escape') {
-      close();
+  function trapTab(event: KeyboardEvent) {
+    if (sheetPanel === null) {
       return;
     }
+    const focusable = focusableElements(sheetPanel);
+    const first = focusable.at(0);
+    const last = focusable.at(-1);
 
-    if (event.key === 'Tab' && sheetPanel !== null) {
-      const focusable = sheetPanel.querySelectorAll<HTMLElement>(
-        'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
-      );
-      const first = focusable.item(0);
-      const last = focusable.item(focusable.length - 1);
-
-      if (first === null || last === null) {
-        return;
-      }
+    if (!(first instanceof HTMLElement) || !(last instanceof HTMLElement)) {
+      event.preventDefault();
+      sheetPanel.focus();
+      return;
+    }
 
-      const atEdge = document.activeElement === (event.shiftKey ? first : last);
-      if (atEdge) {
-        event.preventDefault();
-        (event.shiftKey ? last : first).focus();
-      }
+    const active = deepActiveElement();
+    const inside = active === sheetPanel || focusable.some((element) => element === active);
+    if (!inside) {
+      event.preventDefault();
+      (event.shiftKey ? last : first).focus();
+    } else if (event.shiftKey && (active === first || active === sheetPanel)) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && active === last) {
+      event.preventDefault();
+      first.focus();
     }
   }
 
-  function lockScroll() {
-    document.body.style.overflow = 'hidden';
+  function handleKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      close();
+    } else if (event.key === 'Tab') {
+      trapTab(event);
+    }
   }
 
-  function unlockScroll() {
-    document.body.style.overflow = '';
+  function handleWindowKeyDown(event: KeyboardEvent) {
+    if (!open || event.defaultPrevented) {
+      return;
+    }
+    if (overlayDiv !== null && event.composedPath().includes(overlayDiv)) {
+      return;
+    }
+    handleKeyDown(event);
   }
 
-  function scrollLockAction(_node: HTMLElement) {
-    lockScroll();
-    tick().then(() => {
-      if (sheetPanel !== null) {
-        sheetPanel.focus();
-      }
-    });
+  function sheetAction(_node: HTMLElement) {
+    const unlockScroll = lockDocumentScroll();
+    enter();
     return {
       destroy() {
         unlockScroll();
+        restoreFocus();
       }
     };
   }
 </script>
 
+<svelte:window onkeydown={handleWindowKeyDown} />
+
 {#if open}
   <div
     bind:this={overlayDiv}
-    use:scrollLockAction
+    use:sheetAction
     class="sheet-overlay {showOverlay ? 'overlay-active' : 'overlay-inactive'} {classes ?? ''}"
     onclick={handleOverlayClick}
     onkeydown={handleKeyDown}
-    role="button"
-    tabindex="-1"
+    role="presentation"
     data-pw={testId}
-    transition:fade={{ duration: 200 }}
+    transition:fade={{ duration: fadeDuration }}
   >
     <div
       bind:this={sheetPanel}
@@ -112,20 +153,26 @@
       aria-label={title ?? 'Sheet'}
       tabindex="-1"
       transition:fly|global={flyParams}
+      onintrostart={enter}
     >
       {#if typeof title === 'string' || showCloseButton}
         <div class="sheet-header">
           {#if typeof title === 'string'}
-            <span class="sheet-title">{title}</span>
+            <h2 class="sheet-title">{title}</h2>
           {/if}
           {#if showCloseButton}
             <div class="sheet-close-button">
               <Button
                 onclick={close}
-                ariaLabel="Close"
+                ariaLabel={closeLabel}
                 {...typeof testId === 'string' ? { testId: `${testId}-close` } : {}}
               >
-                &#x2715;
+                {#if typeof closeIcon === 'function'}
+                  {@render closeIcon()}
+                {:else}
+                  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                  {@html closeSvg}
+                {/if}
               </Button>
             </div>
           {/if}
@@ -213,6 +260,8 @@
   .sheet-header {
     display: flex;
     align-items: center;
+    justify-content: flex-end;
+    gap: var(--sheet-header-gap, 8px);
     padding: var(--sheet-header-padding, 16px 20px);
     background-color: var(--sheet-header-background, inherit);
     border-bottom: var(--sheet-header-border-bottom, 1px solid #e4e4e7);
@@ -221,6 +270,7 @@
 
   .sheet-title {
     flex: 1;
+    margin: var(--sheet-title-margin, 0);
     font-size: var(--sheet-title-font-size, 18px);
     font-weight: var(--sheet-title-font-weight, 600);
     font-family: var(--sheet-title-font-family, inherit);
@@ -244,9 +294,15 @@
     justify-content: center;
   }
 
+  .sheet-close-button :global(svg) {
+    width: var(--sheet-close-icon-size, var(--sheet-close-button-font-size, 16px));
+    height: var(--sheet-close-icon-size, var(--sheet-close-button-font-size, 16px));
+  }
+
   .sheet-content {
     flex: 1;
     overflow-y: var(--sheet-content-overflow-y, auto);
+    overscroll-behavior: var(--sheet-content-overscroll-behavior, contain);
     padding: var(--sheet-content-padding, 20px);
     scrollbar-width: var(--sheet-scrollbar-width, none);
   }

package/dist/Sheet/properties.d.ts

@@ -10,8 +10,10 @@ export type OptionalSheetProperties = {
     title?: string;
     showOverlay?: boolean;
     showCloseButton?: boolean;
+    closeLabel?: string;
     testId?: string;
     footer?: Snippet;
+    closeIcon?: Snippet;
     classes?: string;
 };
 export type SheetEventProperties = {

package/dist/index.d.ts

@@ -65,6 +65,7 @@ export { default as Resizable } from './Resizable/Resizable.svelte';
 export { default as Draggable } from './Draggable/Draggable.svelte';
 export { default as ChatBubble } from './ChatBubble/ChatBubble.svelte';
 export { default as Gallery } from './Gallery/Gallery.svelte';
+export { default as NumberStepper } from './NumberStepper/NumberStepper.svelte';
 export { ChatController } from './Chat/controller.svelte';
 export { partyOf } from './Chat/roles';
 export type * from './Button/properties';
@@ -129,4 +130,5 @@ export type * from './Resizable/properties';
 export type * from './Draggable/properties';
 export type * from './ChatBubble/properties';
 export type * from './Gallery/properties';
+export type * from './NumberStepper/properties';
 export { validateInput } from './utils';

package/dist/index.js

@@ -65,6 +65,7 @@ export { default as Resizable } from './Resizable/Resizable.svelte';
 export { default as Draggable } from './Draggable/Draggable.svelte';
 export { default as ChatBubble } from './ChatBubble/ChatBubble.svelte';
 export { default as Gallery } from './Gallery/Gallery.svelte';
+export { default as NumberStepper } from './NumberStepper/NumberStepper.svelte';
 export { ChatController } from './Chat/controller.svelte';
 export { partyOf } from './Chat/roles';
 export { validateInput } from './utils';

package/dist/utils.d.ts

@@ -26,3 +26,23 @@ export declare function hslToHsv(hDeg: number, sPct: number, lPct: number): Hsv;
 export declare function isValidHex(hex: string): boolean;
 export declare function clampInt(v: string, min: number, max: number): number;
 export declare function createDebouncer(delay: number): <T extends unknown[]>(callback: (...args: T) => void, ...args: T) => void;
+/**
+ * @description The focused element in the same document or shadow root as `node`.
+ * `document.activeElement` stops at the shadow host, so focus checks inside web components need this.
+ */
+export declare function activeElementOf(node: Node): Element | null;
+/**
+ * @description The focused element, following open shadow roots down to the innermost one.
+ */
+export declare function deepActiveElement(): Element | null;
+/**
+ * @description Focusable elements inside `container`, in document order across the composed tree:
+ * content assigned to slots and open shadow roots are included, inert, hidden and undisplayed elements are not.
+ */
+export declare function focusableElements(container: Element): HTMLElement[];
+/**
+ * @description Stops the page behind an overlay from scrolling and returns the release function.
+ * Locks are counted, so closing a nested overlay keeps the page locked until the last one closes,
+ * and releasing restores whatever inline overflow the page had before.
+ */
+export declare function lockDocumentScroll(): () => void;

package/dist/utils.js

@@ -292,3 +292,110 @@ export function createDebouncer(delay) {
         }
     };
 }
+// ── Focus & scrolling ───────────────────────────────────────────
+/**
+ * @description The focused element in the same document or shadow root as `node`.
+ * `document.activeElement` stops at the shadow host, so focus checks inside web components need this.
+ */
+export function activeElementOf(node) {
+    const root = node.getRootNode();
+    if (root instanceof Document || root instanceof ShadowRoot) {
+        return root.activeElement;
+    }
+    return null;
+}
+/**
+ * @description The focused element, following open shadow roots down to the innermost one.
+ */
+export function deepActiveElement() {
+    let active = document.activeElement;
+    while (active !== null &&
+        active.shadowRoot !== null &&
+        active.shadowRoot.activeElement !== null) {
+        active = active.shadowRoot.activeElement;
+    }
+    return active;
+}
+const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function isRendered(element) {
+    return typeof element.checkVisibility !== 'function' || element.checkVisibility();
+}
+/**
+ * @description Focusable elements inside `container`, in document order across the composed tree:
+ * content assigned to slots and open shadow roots are included, inert, hidden and undisplayed elements are not.
+ */
+export function focusableElements(container) {
+    const found = [];
+    const visit = (element) => {
+        if (element.hasAttribute('inert') || element.hasAttribute('hidden')) {
+            return;
+        }
+        if (element instanceof HTMLSlotElement) {
+            const assigned = element.assignedElements({ flatten: true });
+            (assigned.length > 0 ? assigned : Array.from(element.children)).forEach(visit);
+            return;
+        }
+        if (element instanceof HTMLElement &&
+            element.matches(FOCUSABLE_SELECTOR) &&
+            isRendered(element)) {
+            found.push(element);
+        }
+        Array.from((element.shadowRoot ?? element).children).forEach(visit);
+    };
+    Array.from(container.children).forEach(visit);
+    return found;
+}
+let scrollLocks = 0;
+let releaseDocumentScroll = null;
+function lockOverflow(element) {
+    const { style } = element;
+    const saved = ['overflow-x', 'overflow-y'].map((property) => ({
+        property,
+        value: style.getPropertyValue(property),
+        priority: style.getPropertyPriority(property)
+    }));
+    saved.forEach(({ property }) => style.setProperty(property, 'hidden', 'important'));
+    return () => {
+        saved.forEach(({ property, value, priority }) => {
+            if (value === '') {
+                style.removeProperty(property);
+            }
+            else {
+                style.setProperty(property, value, priority);
+            }
+        });
+    };
+}
+/**
+ * @description The element whose overflow scrolls the page: `<body>` unless the page gives `<html>` an overflow.
+ * Hiding overflow on the other one would turn it into a scroll container and unstick sticky headers.
+ */
+function viewportOverflowElement() {
+    const root = document.documentElement;
+    const { overflowX, overflowY } = getComputedStyle(root);
+    const rootIsVisible = [overflowX, overflowY].every((value) => value === 'visible' || value === '');
+    return rootIsVisible ? document.body : root;
+}
+/**
+ * @description Stops the page behind an overlay from scrolling and returns the release function.
+ * Locks are counted, so closing a nested overlay keeps the page locked until the last one closes,
+ * and releasing restores whatever inline overflow the page had before.
+ */
+export function lockDocumentScroll() {
+    if (scrollLocks === 0) {
+        releaseDocumentScroll = lockOverflow(viewportOverflowElement());
+    }
+    scrollLocks += 1;
+    let released = false;
+    return () => {
+        if (released) {
+            return;
+        }
+        released = true;
+        scrollLocks -= 1;
+        if (scrollLocks === 0) {
+            releaseDocumentScroll?.();
+            releaseDocumentScroll = null;
+        }
+    };
+}