polymorph-ui-components 0.4.0 → 0.6.1

package/dist/Button/Button.svelte

@@ -22,6 +22,12 @@
     classes
   }: ButtonProperties = $props();
 
+  export function getButtonRef(): HTMLButtonElement | null {
+    return buttonElement;
+  }
+
+  let buttonElement: HTMLButtonElement | null = $state(null);
+
   let isDisabled = $derived(!enable || disabled || showLoader);
 
   function handleButtonClick(event: MouseEvent): void {
@@ -40,6 +46,7 @@
     <div class="button-progress-bar"></div>
   {/if}
   <button
+    bind:this={buttonElement}
     class:disabled={isDisabled}
     onclick={handleButtonClick}
     {onkeyup}
@@ -95,6 +102,8 @@
     gap: var(--button-content-gap, 16px);
     visibility: var(--button-visibility, visible);
     box-shadow: var(--button-box-shadow, none);
+    text-decoration: var(--button-text-decoration, none);
+    line-height: var(--button-line-height, normal);
   }
 
   .disabled {
@@ -105,6 +114,7 @@
     font-weight: var(--button-disabled-font-weight);
     border: var(--button-disabled-border);
     background: var(--button-disabled-background-color, var(--button-color, #18181b));
+    text-decoration: var(--button-disabled-text-decoration, var(--button-text-decoration, none));
   }
 
   .button-loader {
@@ -126,6 +136,7 @@
     color: var(--button-hover-text-color, var(--button-text-color, #ffffff));
     border: var(--button-hover-border, var(--button-border, none));
     transform: var(--button-hover-transform);
+    opacity: var(--button-hover-opacity, var(--button-opacity, 1));
   }
 
   button:active {

package/dist/Button/Button.svelte.d.ts

@@ -1,4 +1,6 @@
 import type { ButtonProperties } from './properties';
-declare const Button: import("svelte").Component<ButtonProperties, {}, "showProgressBar">;
+declare const Button: import("svelte").Component<ButtonProperties, {
+    getButtonRef: () => HTMLButtonElement | null;
+}, "showProgressBar">;
 type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/Choicebox/Choicebox.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
   import type { ChoiceboxProperties } from './properties';
+  import checkmarkSvg from '../assets/checkmark.svg?raw';
 
   let {
     children,
     selected = $bindable(false),
     mode = 'radio',
+    showIndicator = false,
     disabled = false,
     testId,
     onclick,
@@ -43,8 +45,18 @@
   onkeydown={handleKeyDown}
   data-pw={testId}
 >
-  {#if typeof children === 'function'}
-    {@render children()}
+  <div class="body">
+    {#if typeof children === 'function'}
+      {@render children()}
+    {/if}
+  </div>
+  {#if showIndicator}
+    <span class="indicator {mode}" class:selected aria-hidden="true">
+      {#if mode === 'checkbox' && selected}
+        <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+        <span class="indicator-icon">{@html checkmarkSvg}</span>
+      {/if}
+    </span>
   {/if}
 </div>
 
@@ -63,6 +75,14 @@
     -webkit-tap-highlight-color: transparent;
   }
 
+  .body {
+    flex: var(--choicebox-body-flex, 1);
+    min-width: var(--choicebox-body-min-width, 0);
+    display: var(--choicebox-body-display, flex);
+    align-items: var(--choicebox-body-align-items, var(--choicebox-align-items, center));
+    gap: var(--choicebox-body-gap, var(--choicebox-gap, 12px));
+  }
+
   .choicebox:focus-visible {
     outline: none;
     box-shadow: var(--choicebox-focus-ring, 0 0 0 3px currentColor);
@@ -82,4 +102,46 @@
     opacity: var(--choicebox-disabled-opacity, 0.4);
     cursor: var(--choicebox-disabled-cursor, not-allowed);
   }
+
+  .indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: var(--choicebox-indicator-size, 20px);
+    height: var(--choicebox-indicator-size, 20px);
+    border: var(--choicebox-indicator-border, 2px solid #757575);
+    background: var(--choicebox-indicator-background, transparent);
+    transition: var(--choicebox-indicator-transition, background 0.2s, border-color 0.2s);
+  }
+
+  .indicator.radio {
+    border-radius: 50%;
+  }
+
+  .indicator.checkbox {
+    border-radius: var(--choicebox-indicator-border-radius, var(--radius, 4px));
+  }
+
+  .indicator.selected {
+    border: var(--choicebox-indicator-selected-border, 2px solid #2196f3);
+    background: var(--choicebox-indicator-selected-background, #2196f3);
+  }
+
+  .indicator.radio.selected {
+    box-shadow: inset 0 0 0 var(--choicebox-indicator-dot-inset, 4px)
+      var(--choicebox-indicator-dot-color, #ffffff);
+  }
+
+  .indicator-icon {
+    display: flex;
+    width: var(--choicebox-indicator-icon-size, 14px);
+    height: var(--choicebox-indicator-icon-size, 14px);
+    color: var(--choicebox-indicator-icon-color, #ffffff);
+  }
+
+  .indicator-icon :global(svg) {
+    width: 100%;
+    height: 100%;
+  }
 </style>

package/dist/Choicebox/properties.d.ts

@@ -6,6 +6,7 @@ export type OptionalChoiceboxProperties = {
     selected?: boolean;
     mode?: ChoiceboxMode;
     disabled?: boolean;
+    showIndicator?: boolean;
     testId?: string;
     classes?: string;
 };

package/dist/Gallery/Gallery.svelte

@@ -0,0 +1,549 @@
+<script lang="ts">
+  import { tick } from 'svelte';
+  import type { Snippet } from 'svelte';
+  import { fade } from 'svelte/transition';
+  import type { GalleryImage, GalleryProperties } from './properties';
+  import Img from '../Img/Img.svelte';
+  import Button from '../Button/Button.svelte';
+  import Icon from '../Icon/Icon.svelte';
+  import closeSvg from '../assets/close.svg?raw';
+  import chevronLeftSvg from '../assets/chevron-left-lg.svg?raw';
+  import chevronRightSvg from '../assets/chevron-right-lg.svg?raw';
+  import editSvg from '../assets/edit.svg?raw';
+  import deleteSvg from '../assets/delete.svg?raw';
+
+  let {
+    images,
+    view = 'grid',
+    open = $bindable(false),
+    activeIndex = $bindable(0),
+    enableLightbox = true,
+    loop = false,
+    showCounter = true,
+    showCaption = true,
+    previousIcon,
+    nextIcon,
+    closeIcon,
+    editIcon,
+    deleteIcon,
+    testId,
+    onimageclick,
+    oneditclick,
+    ondeleteclick,
+    onopen,
+    onclose,
+    onchange,
+    onkeydown,
+    classes
+  }: GalleryProperties = $props();
+
+  let lightboxDiv: HTMLDivElement | null = $state(null);
+  let closeButtonRef: ReturnType<typeof Button> | null = $state(null);
+  let previousButtonRef: ReturnType<typeof Button> | null = $state(null);
+  let nextButtonRef: ReturnType<typeof Button> | null = $state(null);
+  let openerElement: HTMLElement | null = null;
+
+  let activeImage = $derived(images.at(activeIndex));
+  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 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;
+    }
+    document.body.style.overflow = 'hidden';
+    tick().then(() => {
+      node.focus();
+    });
+    return {
+      destroy() {
+        document.body.style.overflow = '';
+        if (openerElement !== null) {
+          openerElement.focus();
+          openerElement = null;
+        }
+      }
+    };
+  }
+
+  function openLightbox(index: number, opener: EventTarget | null): void {
+    if (opener instanceof HTMLElement) {
+      openerElement = opener;
+    }
+    activeIndex = index;
+    open = true;
+    onopen?.(index);
+  }
+
+  function closeLightbox(): void {
+    open = false;
+    onclose?.();
+  }
+
+  async function goToIndex(index: number): Promise<void> {
+    if (index < 0 || index >= images.length) {
+      return;
+    }
+    activeIndex = index;
+    onchange?.(activeIndex);
+    await tick();
+    if (lightboxDiv !== null && !lightboxDiv.contains(document.activeElement)) {
+      lightboxDiv.focus();
+    }
+  }
+
+  function showPrevious(): void {
+    if (activeIndex > 0) {
+      goToIndex(activeIndex - 1);
+    } else if (loop && images.length > 1) {
+      goToIndex(images.length - 1);
+    }
+  }
+
+  function showNext(): void {
+    if (activeIndex < images.length - 1) {
+      goToIndex(activeIndex + 1);
+    } else if (loop && images.length > 1) {
+      goToIndex(0);
+    }
+  }
+
+  function handleImageClick(index: number, event: MouseEvent): void {
+    onimageclick?.(index, event);
+    if (enableLightbox) {
+      openLightbox(index, event.currentTarget);
+    }
+  }
+
+  function handleEditClick(index: number, event: MouseEvent): void {
+    oneditclick?.(index, event);
+  }
+
+  function handleDeleteClick(index: number, event: MouseEvent): void {
+    ondeleteclick?.(index, event);
+  }
+
+  function trapFocus(event: KeyboardEvent): void {
+    const first = closeButtonRef?.getButtonRef() ?? null;
+    const last = (nextButtonRef ?? previousButtonRef ?? closeButtonRef)?.getButtonRef() ?? null;
+    if (first === null || last === null) {
+      return;
+    }
+    if (
+      event.shiftKey &&
+      (document.activeElement === first || document.activeElement === lightboxDiv)
+    ) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  }
+
+  function handleLightboxKeydown(event: KeyboardEvent): void {
+    onkeydown?.(event);
+    if (event.key === 'Escape') {
+      closeLightbox();
+    } else if (event.key === 'ArrowLeft') {
+      event.preventDefault();
+      showPrevious();
+    } else if (event.key === 'ArrowRight') {
+      event.preventDefault();
+      showNext();
+    } else if (event.key === 'Home') {
+      event.preventDefault();
+      goToIndex(0);
+    } else if (event.key === 'End') {
+      event.preventDefault();
+      goToIndex(images.length - 1);
+    } else if (event.key === 'Tab') {
+      trapFocus(event);
+    }
+  }
+
+  function handleBackdropClick(event: MouseEvent): void {
+    if (event.target === lightboxDiv) {
+      closeLightbox();
+    }
+  }
+</script>
+
+{#snippet controlIcon(fallbackMarkup: string, custom?: Snippet)}
+  {#if typeof custom === 'function'}
+    {@render custom()}
+  {:else}
+    <Icon svg={fallbackMarkup} />
+  {/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}
+    </span>
+  {/if}
+{/snippet}
+
+<div class="gallery {view} {classes ?? ''}" data-pw={testId} role="list">
+  {#each images as image, index (index)}
+    <div class="gallery-item" role="listitem">
+      {#if itemsAreInteractive}
+        <button
+          class="gallery-item-content"
+          onclick={(event) => handleImageClick(index, event)}
+          aria-label={enableLightbox
+            ? `View image ${index + 1} of ${images.length}: ${image.alt}`
+            : image.alt}
+        >
+          {@render itemContent(image)}
+        </button>
+      {:else}
+        <div class="gallery-item-content">
+          {@render itemContent(image)}
+        </div>
+      {/if}
+      {#if showItemActions}
+        <div class="gallery-item-actions">
+          {#if showEditButton}
+            <div class="gallery-item-action">
+              <Button
+                ariaLabel={`Edit image ${index + 1}: ${image.alt}`}
+                onclick={(event) => handleEditClick(index, event)}
+              >
+                {@render controlIcon(editSvg, editIcon)}
+              </Button>
+            </div>
+          {/if}
+          {#if showDeleteButton}
+            <div class="gallery-item-action">
+              <Button
+                ariaLabel={`Delete image ${index + 1}: ${image.alt}`}
+                onclick={(event) => handleDeleteClick(index, event)}
+              >
+                {@render controlIcon(deleteSvg, deleteIcon)}
+              </Button>
+            </div>
+          {/if}
+        </div>
+      {/if}
+    </div>
+  {/each}
+</div>
+
+{#if open}
+  <div
+    class="lightbox {classes ?? ''}"
+    role="dialog"
+    aria-modal="true"
+    aria-label={typeof activeImage === 'object' ? activeImage.alt : 'Image gallery'}
+    tabindex="-1"
+    bind:this={lightboxDiv}
+    use:lightboxAction
+    onclick={handleBackdropClick}
+    onkeydown={handleLightboxKeydown}
+    transition:fade={{ duration: 200 }}
+  >
+    <div class="lightbox-close">
+      <Button ariaLabel="Close gallery" onclick={closeLightbox} bind:this={closeButtonRef}>
+        {@render controlIcon(closeSvg, closeIcon)}
+      </Button>
+    </div>
+    {#if hasPrevious}
+      <div class="lightbox-previous">
+        <Button ariaLabel="Previous image" onclick={showPrevious} bind:this={previousButtonRef}>
+          {@render controlIcon(chevronLeftSvg, previousIcon)}
+        </Button>
+      </div>
+    {/if}
+    {#if typeof activeImage === 'object'}
+      <figure class="lightbox-figure">
+        <Img src={activeImage.src} alt={activeImage.alt} fallback={activeImage.fallback} />
+        {#if showCaption && typeof activeImage.caption === 'string' && activeImage.caption.length > 0}
+          <figcaption class="lightbox-caption">{activeImage.caption}</figcaption>
+        {/if}
+      </figure>
+    {/if}
+    {#if hasNext}
+      <div class="lightbox-next">
+        <Button ariaLabel="Next image" onclick={showNext} bind:this={nextButtonRef}>
+          {@render controlIcon(chevronRightSvg, nextIcon)}
+        </Button>
+      </div>
+    {/if}
+    {#if showCounter && typeof activeImage === 'object'}
+      <div class="lightbox-counter" aria-live="polite">
+        {activeIndex + 1} / {images.length}
+      </div>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .gallery {
+    width: var(--gallery-width, 100%);
+    padding: var(--gallery-padding, 0px);
+    margin: var(--gallery-margin, 0px);
+    background: var(--gallery-background, transparent);
+  }
+
+  .gallery.grid {
+    display: grid;
+    grid-template-columns: repeat(var(--gallery-columns, 3), 1fr);
+    gap: var(--gallery-gap, 8px);
+  }
+
+  .gallery.list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gallery-gap, 8px);
+  }
+
+  .gallery-item {
+    position: relative;
+  }
+
+  .grid .gallery-item {
+    aspect-ratio: var(--gallery-item-aspect-ratio, 1);
+    border-radius: var(--gallery-item-border-radius, 0px);
+    overflow: hidden;
+    --image-width: 100%;
+    --image-height: 100%;
+    --image-object-fit: var(--gallery-item-image-fit, cover);
+    --image-border-radius: var(--gallery-item-border-radius, 0px);
+    --image-transition: var(--gallery-item-image-transition);
+  }
+
+  .list .gallery-item {
+    display: flex;
+    align-items: center;
+    border-radius: var(--gallery-list-item-border-radius, 0px);
+    background: var(--gallery-list-item-background, transparent);
+    --image-width: var(--gallery-list-thumbnail-width, 56px);
+    --image-height: var(--gallery-list-thumbnail-height, 56px);
+    --image-object-fit: var(--gallery-list-thumbnail-fit, cover);
+    --image-border-radius: var(--gallery-list-thumbnail-border-radius, 0px);
+    --image-transition: var(--gallery-item-image-transition);
+    --image-flex-shrink: 0;
+  }
+
+  .gallery-item-content {
+    font: inherit;
+    color: inherit;
+    border: var(--gallery-item-border, none);
+    background: transparent;
+  }
+
+  button.gallery-item-content {
+    cursor: var(--gallery-item-cursor, pointer);
+    transition: var(--gallery-item-transition);
+  }
+
+  .grid .gallery-item-content {
+    display: block;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    border-radius: var(--gallery-item-border-radius, 0px);
+  }
+
+  .list .gallery-item-content {
+    display: flex;
+    align-items: center;
+    text-align: left;
+    flex: 1;
+    min-width: 0;
+    gap: var(--gallery-list-item-gap, 12px);
+    padding: var(--gallery-list-item-padding, 8px);
+  }
+
+  .grid button.gallery-item-content:hover {
+    opacity: var(--gallery-item-hover-opacity, 1);
+    transform: var(--gallery-item-hover-transform);
+  }
+
+  .grid button.gallery-item-content:focus-visible {
+    outline: var(--gallery-item-focus-outline, 2px solid currentColor);
+    outline-offset: var(--gallery-item-focus-outline-offset, 2px);
+  }
+
+  .list button.gallery-item-content:focus-visible {
+    outline: none;
+  }
+
+  .list .gallery-item:has(button.gallery-item-content):hover {
+    background: var(--gallery-list-item-hover-background, transparent);
+  }
+
+  .list .gallery-item:has(button.gallery-item-content:focus-visible) {
+    outline: var(--gallery-item-focus-outline, 2px solid currentColor);
+    outline-offset: var(--gallery-item-focus-outline-offset, 2px);
+  }
+
+  .list-text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gallery-list-text-gap, 2px);
+    min-width: 0;
+  }
+
+  .list-title,
+  .list-caption {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .list-title {
+    color: var(--gallery-list-title-color, inherit);
+    font-size: var(--gallery-list-title-font-size, 14px);
+    font-weight: var(--gallery-list-title-font-weight, 500);
+    font-family: var(--gallery-list-title-font-family);
+  }
+
+  .list-caption {
+    color: var(--gallery-list-caption-color, inherit);
+    font-size: var(--gallery-list-caption-font-size, 12px);
+    font-family: var(--gallery-list-caption-font-family);
+  }
+
+  .gallery-item-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--gallery-item-actions-gap, 4px);
+  }
+
+  .grid .gallery-item-actions {
+    position: absolute;
+    top: var(--gallery-item-actions-top, 8px);
+    right: var(--gallery-item-actions-right, 8px);
+  }
+
+  .list .gallery-item-actions {
+    flex-shrink: 0;
+    padding-right: var(--gallery-item-actions-right, 8px);
+  }
+
+  .gallery-item-action {
+    border-radius: var(--gallery-item-action-border-radius, 8px);
+    --button-color: transparent;
+    --button-hover-color: transparent;
+    --button-padding: var(--gallery-item-action-padding, 6px);
+    --button-border-radius: var(--gallery-item-action-border-radius, 8px);
+    --icon-container-padding: 0px;
+    --icon-padding: 0px;
+    --icon-width: var(--gallery-item-action-icon-size, 16px);
+    --icon-height: var(--gallery-item-action-icon-size, 16px);
+  }
+
+  .grid .gallery-item-action {
+    background: var(--gallery-item-action-background, #00000066);
+    -webkit-backdrop-filter: var(--gallery-item-action-backdrop-filter, blur(8px));
+    backdrop-filter: var(--gallery-item-action-backdrop-filter, blur(8px));
+    --button-text-color: var(--gallery-item-action-color, #ffffff);
+  }
+
+  .grid .gallery-item-action:hover {
+    background: var(--gallery-item-action-hover-background, #00000099);
+  }
+
+  .list .gallery-item-action {
+    background: var(--gallery-item-action-background, transparent);
+    --button-text-color: var(--gallery-item-action-color, currentColor);
+  }
+
+  .list .gallery-item-action:hover {
+    background: var(--gallery-item-action-hover-background, #80808026);
+  }
+
+  .lightbox {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: var(--gallery-lightbox-z-index, 15);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: var(--gallery-lightbox-background, #000000e6);
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .lightbox:focus {
+    outline: none;
+  }
+
+  .lightbox-figure {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--gallery-lightbox-caption-gap, 12px);
+    margin: 0;
+    pointer-events: none;
+    --image-width: var(--gallery-lightbox-image-width, 85vw);
+    --image-height: var(--gallery-lightbox-image-height, 75vh);
+    --image-object-fit: var(--gallery-lightbox-image-fit, contain);
+    --image-border-radius: var(--gallery-lightbox-image-border-radius, 0px);
+  }
+
+  .lightbox-caption {
+    color: var(--gallery-lightbox-caption-color, #ffffff);
+    font-size: var(--gallery-lightbox-caption-font-size, 14px);
+    font-family: var(--gallery-lightbox-caption-font-family);
+    text-align: center;
+    max-width: var(--gallery-lightbox-image-width, 85vw);
+  }
+
+  .lightbox-counter {
+    position: absolute;
+    bottom: var(--gallery-lightbox-counter-bottom, 16px);
+    left: 50%;
+    transform: translateX(-50%);
+    color: var(--gallery-lightbox-counter-color, #ffffff);
+    font-size: var(--gallery-lightbox-counter-font-size, 13px);
+    font-family: var(--gallery-lightbox-counter-font-family);
+  }
+
+  .lightbox-close,
+  .lightbox-previous,
+  .lightbox-next {
+    position: absolute;
+    --button-color: var(--gallery-lightbox-control-background, transparent);
+    --button-text-color: var(--gallery-lightbox-control-color, #ffffff);
+    --button-hover-color: var(--gallery-lightbox-control-hover-background, #ffffff1f);
+    --button-padding: var(--gallery-lightbox-control-padding, 8px);
+    --button-border-radius: var(--gallery-lightbox-control-border-radius, 50%);
+    --icon-container-padding: 0px;
+    --icon-padding: 0px;
+    --icon-width: var(--gallery-lightbox-control-icon-size, 24px);
+    --icon-height: var(--gallery-lightbox-control-icon-size, 24px);
+  }
+
+  .lightbox-close {
+    top: var(--gallery-lightbox-close-top, 16px);
+    right: var(--gallery-lightbox-close-right, 16px);
+  }
+
+  .lightbox-previous,
+  .lightbox-next {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .lightbox-previous {
+    left: var(--gallery-lightbox-nav-inset, 16px);
+  }
+
+  .lightbox-next {
+    right: var(--gallery-lightbox-nav-inset, 16px);
+  }
+</style>

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

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

package/dist/Gallery/properties.d.ts

@@ -0,0 +1,38 @@
+import type { Snippet } from 'svelte';
+export type GalleryView = 'grid' | 'list';
+export type GalleryImage = {
+    src: string;
+    alt: string;
+    thumbnail?: string;
+    fallback?: string;
+    caption?: string;
+};
+export type GalleryProperties = MandatoryGalleryProperties & OptionalGalleryProperties & GalleryEventProperties;
+export type MandatoryGalleryProperties = {
+    images: GalleryImage[];
+};
+export type OptionalGalleryProperties = {
+    view?: GalleryView;
+    open?: boolean;
+    activeIndex?: number;
+    enableLightbox?: boolean;
+    loop?: boolean;
+    showCounter?: boolean;
+    showCaption?: boolean;
+    previousIcon?: Snippet;
+    nextIcon?: Snippet;
+    closeIcon?: Snippet;
+    editIcon?: Snippet;
+    deleteIcon?: Snippet;
+    testId?: string;
+    classes?: string;
+};
+export type GalleryEventProperties = {
+    onimageclick?: (index: number, event: MouseEvent) => void;
+    oneditclick?: (index: number, event: MouseEvent) => void;
+    ondeleteclick?: (index: number, event: MouseEvent) => void;
+    onopen?: (index: number) => void;
+    onclose?: () => void;
+    onchange?: (index: number) => void;
+    onkeydown?: (event: KeyboardEvent) => void;
+};

package/dist/Gallery/properties.js

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

package/dist/Icon/Icon.svelte

@@ -2,14 +2,28 @@
   import type { IconProperties } from './properties';
 
   let { icon, svg, text, onclick, onkeydown, testId, classes }: IconProperties = $props();
+
+  let interactive = $derived(typeof onclick === 'function');
+
+  function handleKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      if (event.currentTarget instanceof HTMLElement) {
+        event.currentTarget.click();
+      }
+    }
+    onkeydown?.(event);
+  }
 </script>
 
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <div
   class="icon-container {classes ?? ''}"
-  {onclick}
-  {onkeydown}
-  role="button"
-  tabindex="0"
+  class:interactive
+  onclick={interactive ? onclick : null}
+  onkeydown={interactive ? handleKeydown : onkeydown}
+  role={interactive ? 'button' : null}
+  tabindex={interactive ? 0 : null}
   data-pw={testId}
 >
   {#if typeof svg === 'string' && svg.length > 0}
@@ -29,8 +43,12 @@
     padding: var(--icon-container-padding, 4px);
     flex-direction: var(--icon-container-direction, column);
     align-items: center;
-    cursor: pointer;
   }
+
+  .icon-container.interactive {
+    cursor: var(--icon-cursor, pointer);
+  }
+
   .icon-container img {
     height: var(--icon-height, 20px);
     width: var(--icon-width, 20px);

package/dist/Img/Img.svelte

@@ -25,6 +25,7 @@
     border-radius: var(--image-border-radius, 0px);
     margin: var(--image-margin, 0px);
     filter: var(--image-filter, none);
+    flex-shrink: var(--image-flex-shrink);
     background: var(--image-background);
     border: var(--image-border);
     transition: var(--image-transition);

package/dist/Modal/Modal.svelte

@@ -8,11 +8,14 @@
 
   let overlayDiv: HTMLDivElement | null = $state(null);
   let backPressed = false;
+  let dismissTimer: ReturnType<typeof setTimeout> | null = null;
 
   let {
     size = 'fit-content',
     align = 'center',
     showOverlay = true,
+    lockScroll = true,
+    autoDismissAfter = null,
     supportHardwareBackPress = false,
     enableTransition = true,
     transitionType = 'ALL',
@@ -75,7 +78,12 @@
   }
 
   onMount(() => {
-    document.body.style.overflow = 'hidden';
+    if (lockScroll) {
+      document.body.style.overflow = 'hidden';
+    }
+    if (typeof autoDismissAfter === 'number') {
+      dismissTimer = setTimeout(() => onclose?.(), autoDismissAfter);
+    }
     if (supportHardwareBackPress) {
       history.pushState(null, '', window.location.href);
       window.addEventListener('popstate', handlePopstate);
@@ -83,8 +91,13 @@
   });
 
   onDestroy(() => {
+    if (dismissTimer !== null) {
+      clearTimeout(dismissTimer);
+    }
     if (typeof window !== 'undefined') {
-      document.body.style.overflow = '';
+      if (lockScroll) {
+        document.body.style.overflow = '';
+      }
       if (supportHardwareBackPress) {
         if (!backPressed) {
           history.back();
@@ -172,7 +185,7 @@
 
 <style>
   .modal {
-    position: fixed;
+    position: var(--modal-position, fixed);
     top: 0;
     bottom: 0;
     left: 0;

package/dist/Modal/properties.d.ts

@@ -7,6 +7,8 @@ export type ModalProperties = ModalEventProperties & {
     size?: ModalSize;
     align?: ModalAlign;
     showOverlay?: boolean;
+    lockScroll?: boolean;
+    autoDismissAfter?: number | null;
     supportHardwareBackPress?: boolean;
     enableTransition?: boolean;
     transitionType?: ModalTransition;

package/dist/assets/delete.svg

@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3 6h18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <line x1="10" y1="11" x2="10" y2="17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <line x1="14" y1="11" x2="14" y2="17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/assets/edit.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="m15 5 4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/index.d.ts

@@ -64,6 +64,7 @@ export { default as ChatSuggestions } from './ChatSuggestions/ChatSuggestions.sv
 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 { ChatController } from './Chat/controller.svelte';
 export { partyOf } from './Chat/roles';
 export type * from './Button/properties';
@@ -127,4 +128,5 @@ export type * from './ChatSuggestions/properties';
 export type * from './Resizable/properties';
 export type * from './Draggable/properties';
 export type * from './ChatBubble/properties';
+export type * from './Gallery/properties';
 export { validateInput } from './utils';

package/dist/index.js

@@ -64,6 +64,7 @@ export { default as ChatSuggestions } from './ChatSuggestions/ChatSuggestions.sv
 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 { ChatController } from './Chat/controller.svelte';
 export { partyOf } from './Chat/roles';
 export { validateInput } from './utils';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polymorph-ui-components",
-  "version": "0.4.0",
+  "version": "0.6.1",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",
@@ -14,6 +14,15 @@
     "svelte-components"
   ],
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sinha-sahil/polymorph-ui-components.git"
+  },
+  "bugs": {
+    "url": "https://github.com/sinha-sahil/polymorph-ui-components/issues"
+  },
+  "homepage": "https://github.com/sinha-sahil/polymorph-ui-components#readme",
+  "author": "Sahil Sinha",
   "scripts": {
     "prepare": "husky",
     "dev": "vite dev --host",