polymorph-ui-components 0.6.1 → 0.7.0

package/README.md

@@ -138,8 +138,15 @@ Each component documents its **complete** variable surface in [`docs/`](docs/).
 
 The same components compile to **framework-agnostic custom elements** — theming works identically because it's pure CSS.
 
+### From a CDN — no build step, no install
+
+The bundle is self-contained (the Svelte runtime is compiled in) and registers every `<pui-*>` element on import, so a single `<script>` tag in a plain `.html` file is enough:
+
 ```html
-<script type="module" src="polymorph-ui-components/wc"></script>
+<script
+  type="module"
+  src="https://cdn.jsdelivr.net/npm/polymorph-ui-components@latest/dist-wc/index.js"
+></script>
 
 <pui-button text="Save"></pui-button>
 <pui-input placeholder="Search…"></pui-input>
@@ -152,7 +159,24 @@ The same components compile to **framework-agnostic custom elements** — themin
 </style>
 ```
 
-Drop them into React, Vue, Angular, Astro, or a plain `.html` file — no build step required.
+Pin an exact version for production — `…/polymorph-ui-components@<version>/dist-wc/index.js` — so a release can never change your page underneath you. [unpkg](https://unpkg.com) serves the same path if you prefer it:
+
+```
+https://cdn.jsdelivr.net/npm/polymorph-ui-components@<version>/dist-wc/index.js
+https://unpkg.com/polymorph-ui-components@<version>/dist-wc/index.js
+```
+
+### From npm, through a bundler
+
+```bash
+npm install polymorph-ui-components
+```
+
+```js
+import 'polymorph-ui-components/wc';
+```
+
+Either way, drop them into React, Vue, Angular, Astro, or a plain `.html` file.
 
 ---
 

package/dist/Chat/Chat.svelte

@@ -30,6 +30,7 @@
     headerActions,
     headerContent,
     message,
+    messageAttachments,
     empty,
     composerLeading,
     sendIcon,
@@ -83,7 +84,16 @@
     />
   {/if}
 
-  <ChatMessageList {messages} {autoscroll} {message} {empty} {allowCopy} {onretry} {onfeedback} />
+  <ChatMessageList
+    {messages}
+    {autoscroll}
+    {message}
+    {messageAttachments}
+    {empty}
+    {allowCopy}
+    {onretry}
+    {onfeedback}
+  />
 
   <div class="footer">
     {#if showSuggestions}

package/dist/Chat/properties.d.ts

@@ -29,6 +29,7 @@ export type OptionalChatProperties = {
     headerActions?: Snippet;
     headerContent?: Snippet;
     message?: Snippet<[ChatMessageData]>;
+    messageAttachments?: Snippet<[ChatMessageData]>;
     empty?: Snippet;
     composerLeading?: Snippet;
     sendIcon?: Snippet;

package/dist/ChatMessage/ChatMessage.svelte

@@ -252,6 +252,10 @@
     margin: var(--chat-message-attachments-margin, 4px 0 0 0);
   }
 
+  .message-attachments:empty {
+    display: none;
+  }
+
   .actions {
     display: flex;
     align-items: center;

package/dist/ChatMessage/properties.d.ts

@@ -12,7 +12,7 @@ export type OptionalChatMessageProperties = {
     status?: ChatMessageStatus;
     avatar?: Snippet;
     header?: Snippet;
-    attachments?: Snippet;
+    attachments?: Snippet | null;
     allowCopy?: boolean;
     actions?: Snippet;
     copyLabel?: string;

package/dist/ChatMessageList/ChatMessageList.svelte

@@ -14,6 +14,7 @@
     messages,
     autoscroll = true,
     message,
+    messageAttachments,
     empty,
     jumpLabel = 'Jump to latest',
     jumpIcon,
@@ -105,6 +106,9 @@
     {#if typeof message === 'function'}
       {@render message(msg)}
     {:else}
+      {#snippet attachmentsFor()}
+        {@render messageAttachments?.(msg)}
+      {/snippet}
       <ChatMessage
         role={msg.role}
         content={msg.content}
@@ -112,6 +116,7 @@
         streaming={msg.streaming}
         status={msg.status}
         allowCopy={allowCopy && partyOf(msg.role) === 'responder'}
+        attachments={typeof messageAttachments === 'function' ? attachmentsFor : null}
         onretry={retryFor(msg)}
         onfeedback={feedbackFor(msg)}
       />

package/dist/ChatMessageList/properties.d.ts

@@ -8,6 +8,7 @@ export type MandatoryChatMessageListProperties = {
 export type OptionalChatMessageListProperties = {
     autoscroll?: boolean;
     message?: Snippet<[ChatMessageData]>;
+    messageAttachments?: Snippet<[ChatMessageData]>;
     empty?: Snippet;
     jumpLabel?: string;
     jumpIcon?: Snippet;

package/dist/Gallery/Gallery.svelte

@@ -26,6 +26,7 @@
     closeIcon,
     editIcon,
     deleteIcon,
+    itemFooter,
     testId,
     onimageclick,
     oneditclick,
@@ -47,6 +48,7 @@
   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);
@@ -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/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/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

@@ -221,6 +221,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);
   }