polymorph-ui-components 0.3.0 → 0.5.0

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}

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

@@ -24,6 +24,9 @@
     panelHeight = $bindable(600),
     minPanelWidth = 280,
     minPanelHeight = 360,
+    expanded = $bindable(false),
+    expandedPanelWidth = $bindable(600),
+    expandedPanelHeight = $bindable(760),
     onopen,
     onclose,
     ontoggle,
@@ -61,6 +64,25 @@
   );
   let resizeHandles = $derived(handlesFor(verticalSide, effectiveSide));
 
+  let liveWidth = $derived(expanded ? expandedPanelWidth : panelWidth);
+  let liveHeight = $derived(expanded ? expandedPanelHeight : panelHeight);
+
+  function setLiveWidth(value: number): void {
+    if (expanded) {
+      expandedPanelWidth = value;
+    } else {
+      panelWidth = value;
+    }
+  }
+
+  function setLiveHeight(value: number): void {
+    if (expanded) {
+      expandedPanelHeight = value;
+    } else {
+      panelHeight = value;
+    }
+  }
+
   function snapMargin(): number {
     if (root === null) {
       return 24;
@@ -235,6 +257,7 @@
   data-position={position}
   data-effective-side={effectiveSide}
   data-effective-vertical={verticalSide}
+  data-expanded={expanded}
   data-pw={testId}
   bind:this={root}
   style:transform={draggable ? `translate(${dragX}px, ${dragY}px)` : null}
@@ -247,8 +270,8 @@
     >
       <Resizable
         disabled={!resizable}
-        bind:width={panelWidth}
-        bind:height={panelHeight}
+        bind:width={() => liveWidth, setLiveWidth}
+        bind:height={() => liveHeight, setLiveHeight}
         minWidth={minPanelWidth}
         minHeight={minPanelHeight}
         maxWidth={availWidth ?? Number.POSITIVE_INFINITY}
@@ -325,6 +348,11 @@
   .panel-anchor {
     position: absolute;
     --resizable-handle-color: var(--chat-bubble-resize-handle-color, transparent);
+    --resizable-transition: var(
+      --chat-bubble-expand-transition,
+      width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
+      height 0.32s cubic-bezier(0.22, 1, 0.36, 1)
+    );
   }
 
   .chat-bubble[data-effective-vertical='bottom'] .panel-anchor {

package/dist/ChatBubble/ChatBubble.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { ChatBubbleProperties } from './properties';
-declare const ChatBubble: import("svelte").Component<ChatBubbleProperties, {}, "open" | "dragX" | "dragY" | "panelWidth" | "panelHeight">;
+declare const ChatBubble: import("svelte").Component<ChatBubbleProperties, {}, "open" | "dragX" | "dragY" | "panelWidth" | "panelHeight" | "expanded" | "expandedPanelWidth" | "expandedPanelHeight">;
 type ChatBubble = ReturnType<typeof ChatBubble>;
 export default ChatBubble;

package/dist/ChatBubble/properties.d.ts

@@ -30,6 +30,9 @@ export type OptionalChatBubbleProperties = {
     panelHeight?: number;
     minPanelWidth?: number;
     minPanelHeight?: number;
+    expanded?: boolean;
+    expandedPanelWidth?: number;
+    expandedPanelHeight?: number;
     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/Resizable/Resizable.svelte

@@ -210,10 +210,18 @@
     box-sizing: border-box;
     max-width: var(--resizable-max-width, none);
     max-height: var(--resizable-max-height, none);
+    transition: var(--resizable-transition, none);
   }
 
   .resizable.resizing {
     user-select: none;
+    transition: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .resizable {
+      transition: none;
+    }
   }
 
   .handle {

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.3.0",
+  "version": "0.5.0",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",