polymorph-ui-components-mcp 0.1.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/build/docs/Button.md +8 -0
  2. package/build/docs/CHANGELOG.md +9 -4
  3. package/build/docs/ChatBubble.md +15 -1
  4. package/build/docs/GUIDELINES.md +1 -0
  5. package/build/docs/Gallery.md +182 -0
  6. package/build/docs/Icon.md +3 -2
  7. package/build/docs/Img.md +1 -0
  8. package/build/docs/Resizable.md +1 -0
  9. package/build/docs/_index.json +5 -1
  10. package/package.json +1 -1
package/build/docs/Button.md CHANGED
@@ -59,6 +59,14 @@ Svelte 5 Snippet props — pass content blocks to the component.
59
59
  | icon | `Snippet` | A Svelte 5 Snippet for rendering custom icon content (e.g., an SVG) next to the button text. Rendered inside a flex container with configurable order. |
60
60
  | children | `Snippet` | A Svelte 5 Snippet for rendering arbitrary content inside the button. Use this instead of `text` when you need full control over the button's inner content. |
61
61
 
62
+ ## Methods
63
+
64
+ Exported methods that can be called via `bind:this` on the component instance.
65
+
66
+ | Method | Signature | Description |
67
+ | ---------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
68
+ | `getButtonRef()` | `() => HTMLButtonElement \| null` | Returns a reference to the underlying native `<button>` element. Use for custom focus management (e.g., focus traps) without querying the DOM. |
69
+
62
70
  ## Events
63
71
 
64
72
  | Event | Type | Description |
package/build/docs/CHANGELOG.md CHANGED
@@ -2,11 +2,16 @@
2
2
  based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to
3
3
  [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
4
4
 
5
- ## [Unreleased](https://github.com/sinha-sahil/polymorph-ui-components/compare/0.2.0...HEAD)
5
+ ## [Unreleased](https://github.com/sinha-sahil/polymorph-ui-components/compare/0.4.0...HEAD)
6
6
 
7
- - introducing modular chat components like bubble, message, headers, tools etc
8
- - new resiable and draggable component to easily add support for resize and drag to any componet
9
- - added extensive documentation for new available integrations
7
+ - added gallery component for list, grid view + fullscreen views
8
+ - updated icon, img for supporting new props and css styling
9
+ - added get element ref in button component
10
+ - updated docs, assets
11
+
12
+ ## [0.4.0](https://github.com/sinha-sahil/polymorph-ui-components/compare/0.3.0...0.4.0) - 1 July 2026
13
+
14
+ ## [0.3.0](https://github.com/sinha-sahil/polymorph-ui-components/compare/0.2.0...0.3.0) - 29 June 2026
10
15
 
11
16
  ## [0.2.0](https://github.com/sinha-sahil/polymorph-ui-components/compare/0.1.0...0.2.0) - 28 June 2026
12
17
 
package/build/docs/ChatBubble.md CHANGED
@@ -9,6 +9,16 @@ Set **`draggable`** to let the user grab the launcher and reposition the whole w
9
9
 
10
10
  The offset is the bindable `dragX`/`dragY`. Set **`resizable`** to let the user resize the panel from the edges nearest the screen center (via the `Resizable` component); the size is the bindable `panelWidth`/`panelHeight`. Both `draggable` and `resizable` are off by default.
11
11
 
12
+ **Expand / collapse.** Bind **`expanded`** to grow the panel to a larger preset (**`expandedPanelWidth`**/**`expandedPanelHeight`**) and toggle it back to the previous size — the panel size animates the change (a scale-up grow), so flipping `expanded` from anywhere in your app smoothly resizes the widget. The normal and expanded sizes are tracked independently, so collapsing restores the pre-expand size and the expanded size is capped to the available viewport space just like a manual resize (resizing while expanded updates `expandedPanelWidth`/`expandedPanelHeight`). The animation is suppressed while the user is actively drag-resizing and under `prefers-reduced-motion: reduce`.
13
+
14
+ ```svelte
15
+ <button onclick={() => (expanded = !expanded)}>Toggle size</button>
16
+
17
+ <ChatBubble bind:open bind:expanded expandedPanelWidth={680} expandedPanelHeight={820}>
18
+ <Chat {messages} bind:value {onsend} onclose={() => (open = false)} />
19
+ </ChatBubble>
20
+ ```
21
+
12
22
  **Adaptive placement.** However the launcher ends up positioned — by `position`, dragging, or snapping — the panel opens toward the side with the most room: it **drops down** when the bubble is in the top half of the viewport and opens upward when it's in the bottom half (and likewise left/right), so the panel never opens off-screen. The resize handles follow the chosen direction. The panel is also **capped to the available space** in that direction, so on small/short viewports it shrinks to fit (the conversation scrolls inside) rather than spilling past the screen edge.
13
23
 
14
24
  ## Usage
@@ -141,6 +151,9 @@ Both launcher icons are snippets; provide your own for closed (`icon`) and open
141
151
  | panelHeight | `number` | No | `600` | Bindable. Panel height in px. |
142
152
  | minPanelWidth | `number` | No | `280` | Minimum panel width when resizing. |
143
153
  | minPanelHeight | `number` | No | `360` | Minimum panel height when resizing. |
154
+ | expanded | `boolean` | No | `false` | Bindable. Toggle to grow the panel to the expanded preset (animated); restores the prior size on collapse. |
155
+ | expandedPanelWidth | `number` | No | `600` | Bindable. Panel width (px) when `expanded` (capped to available space). |
156
+ | expandedPanelHeight | `number` | No | `760` | Bindable. Panel height (px) when `expanded` (capped to available space).|
144
157
  | testId | `string` | No | `-` | `data-pw` on the root element. |
145
158
  | classes | `string` | No | `-` | Class string on the root element. |
146
159
 
@@ -178,6 +191,7 @@ Reuses `Button` (the launcher) and `Resizable` (panel resizing). Its content is
178
191
  | `--chat-bubble-hover-background-color`| `#27272a` | background | Launcher hover background. |
179
192
  | `--chat-bubble-box-shadow` | `0 8px 24px rgba(0,0,0,0.25)` | box-shadow | Launcher shadow. |
180
193
  | `--chat-bubble-snap-transition` | `transform 0.28s cubic-bezier(0.22,1,0.36,1)` | transition | Snap/reposition animation (disabled while dragging and under reduced-motion). |
194
+ | `--chat-bubble-expand-transition` | `width/height 0.32s cubic-bezier(0.22,1,0.36,1)` | transition | Expand/collapse size animation, applied via the panel's `Resizable` (`--resizable-transition`); disabled while drag-resizing and under reduced-motion. |
181
195
  | `--chat-bubble-panel-gap` | `16px` | bottom/top | Gap between launcher and panel. |
182
196
  | `--chat-bubble-panel-max-width` | `calc(100vw - 32px)` | max-width | Panel max width. |
183
197
  | `--chat-bubble-panel-max-height` | `calc(100dvh - 120px)` | max-height | Panel max height. |
@@ -196,4 +210,4 @@ Tag: `<pui-chat-bubble>`
196
210
  <pui-chat-bubble label="Open chat" draggable resizable></pui-chat-bubble>
197
211
  ```
198
212
 
199
- Put panel content in the default slot, and set object props (`icon`, `openIcon`, `onopen`, …) via JavaScript. Boolean/number/string props map to attributes: `draggable`, `resizable`, `drag-mode`, `drag-x`, `drag-y`, `panel-width`, `panel-height`, `min-panel-width`, `min-panel-height`, `position`, `label`, `close-label`.
213
+ Put panel content in the default slot, and set object props (`icon`, `openIcon`, `onopen`, …) via JavaScript. Boolean/number/string props map to attributes: `draggable`, `resizable`, `drag-mode`, `drag-x`, `drag-y`, `panel-width`, `panel-height`, `min-panel-width`, `min-panel-height`, `expanded`, `expanded-panel-width`, `expanded-panel-height`, `position`, `label`, `close-label`.
package/build/docs/GUIDELINES.md CHANGED
@@ -239,6 +239,7 @@ When replacing `<button>` with `<Button>`, wrap `<Button>` in a `<div>` with the
239
239
  - `onclick` / `onkeyup` — Event handlers
240
240
  - `type` — Button type (`'button'` / `'submit'` / `'reset'`)
241
241
  - `testId` — Maps to `data-pw` for test automation
242
+ - `getButtonRef()` — Exported method (call via `bind:this` on the instance) returning the native `<button>`, for focus management instead of DOM queries
242
243
 
243
244
  ---
244
245
 
package/build/docs/Gallery.md ADDED
@@ -0,0 +1,182 @@
1
+ # Gallery
2
+
3
+ An image gallery with grid and list views and a built-in lightbox viewer. Clicking an item (or pressing Enter/Space on it) opens the image full-screen in a modal lightbox with previous/next navigation, keyboard support (Escape closes, ArrowLeft/ArrowRight navigate, Home/End jump to first/last), a focus trap, a fade transition, and focus return to the originating item on close. Body scroll is locked for exactly as long as the lightbox is rendered. The lightbox state is also exposed as bindable `open` / `activeIndex` props, so consumers can observe it or open the lightbox programmatically. The `view` prop switches between a `grid` of image tiles and a `list` of rows showing the thumbnail, the `alt` text as title, and the `caption` as subtitle. When an `oneditclick` and/or `ondeleteclick` handler is provided, each item renders the corresponding edit/delete action buttons (grid: overlaid top-right; list: at the row end) that fire the handler without opening the lightbox. Items only become buttons when the lightbox is enabled or an `onimageclick` handler is provided; otherwise they render as plain content. Reuses the `Img` component for error-based fallback rendering, the `Button` component for lightbox and edit controls, and the `Icon` component for the built-in control icons.
4
+
5
+ ## Usage
6
+
7
+ ```svelte
8
+ <script>
9
+ import { Gallery } from 'polymorph-ui-components';
10
+
11
+ const images = [
12
+ { src: '/photos/1.jpg', alt: 'Mountain lake at dawn', caption: 'Lake Louise' },
13
+ { src: '/photos/2.jpg', alt: 'Forest trail', thumbnail: '/photos/2-thumb.jpg' },
14
+ { src: '/photos/3.jpg', alt: 'City skyline at night' }
15
+ ];
16
+ </script>
17
+
18
+ <Gallery {images} />
19
+
20
+ <!-- List view with edit and delete buttons -->
21
+ <Gallery
22
+ {images}
23
+ view="list"
24
+ oneditclick={(index) => openEditor(index)}
25
+ ondeleteclick={(index) => removeImage(index)}
26
+ />
27
+
28
+ <!-- Programmatic lightbox control via bindable props -->
29
+ <Gallery {images} bind:open={lightboxOpen} bind:activeIndex={lightboxIndex} />
30
+ <Button text="Show third image" onclick={() => { lightboxIndex = 2; lightboxOpen = true; }} />
31
+ ```
32
+
33
+ ## Props
34
+
35
+ | Prop | Type | Required | Default | Description |
36
+ | -------------- | ---------------- | -------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
37
+ | images | `GalleryImage[]` | Yes | `-` | Array of images to display. Each entry has a full-size `src`, required `alt` text, and optional `thumbnail` (shown in the grid/list), `fallback` (shown when the image fails to load), and `caption` (shown in the lightbox and as the list-row subtitle). |
38
+ | view | `GalleryView` | No | `grid` | Layout of the gallery items: `grid` renders image tiles; `list` renders rows with the thumbnail, `alt` text as title, and `caption` as subtitle. |
39
+ | open | `boolean` | No | `false` | Whether the lightbox is open. Bindable — the component sets it to `false` when the lightbox is closed, and consumers can set it to `true` (with `activeIndex`) to open the lightbox programmatically. |
40
+ | activeIndex | `number` | No | `0` | Index of the image shown in the lightbox. Bindable — updated by lightbox navigation; set it together with `open` for programmatic control. |
41
+ | enableLightbox | `boolean` | No | `true` | When true, clicking an item opens the image in the lightbox. When false, items are non-interactive unless `onimageclick` is provided. |
42
+ | loop | `boolean` | No | `false` | When true, lightbox navigation wraps around from the last image to the first and vice versa. |
43
+ | showCounter | `boolean` | No | `true` | When true, shows a "current / total" position counter at the bottom of the lightbox. |
44
+ | showCaption | `boolean` | No | `true` | When true, shows the active image's `caption` below it in the lightbox (only when the image has one). |
45
+ | previousIcon | `Snippet` | No | `-` | Snippet rendering a custom previous-navigation icon. Falls back to the built-in chevron asset when omitted. |
46
+ | nextIcon | `Snippet` | No | `-` | Snippet rendering a custom next-navigation icon. Falls back to the built-in chevron asset when omitted. |
47
+ | closeIcon | `Snippet` | No | `-` | Snippet rendering a custom close icon. Falls back to the built-in close asset when omitted. |
48
+ | editIcon | `Snippet` | No | `-` | Snippet rendering a custom edit icon. Falls back to the built-in pencil asset when omitted. Only rendered when `oneditclick` is provided. |
49
+ | deleteIcon | `Snippet` | No | `-` | Snippet rendering a custom delete icon. Falls back to the built-in trash asset when omitted. Only rendered when `ondeleteclick` is provided. |
50
+ | testId | `string` | No | `-` | Test selector value applied as `data-pw` on the grid container. |
51
+ | classes | `string` | No | `-` | CSS class string applied to the component's top-level element. Useful for theming — define classes with CSS variable overrides (e.g., `.btn-primary { --button-color: #0070f3; }`) and pass them to create variant styles. |
52
+
53
+ ## Events
54
+
55
+ | Event | Type | Description |
56
+ | ------------ | --------------------------------------- | ------------------------------------------------------------------------------------------- |
57
+ | onimageclick | `(index: number, event: MouseEvent) => void` | Fires when a gallery item is clicked, before the lightbox opens. |
58
+ | oneditclick | `(index: number, event: MouseEvent) => void` | Fires when an item's edit button is clicked. Providing this handler is what makes the edit buttons render; the click does not open the lightbox. |
59
+ | ondeleteclick | `(index: number, event: MouseEvent) => void` | Fires when an item's delete button is clicked. Providing this handler is what makes the delete buttons render; the click does not open the lightbox. |
60
+ | onopen | `(index: number) => void` | Fires when the lightbox opens, with the index of the opened image. |
61
+ | onclose | `() => void` | Fires when the component closes the lightbox (close button, Escape key, or backdrop click). Not fired when the consumer closes it by writing `open = false`. |
62
+ | onchange | `(index: number) => void` | Fires when the active lightbox image changes via navigation buttons or keyboard. |
63
+ | onkeydown | `(event: KeyboardEvent) => void` | Fires for key presses while the lightbox is open, before the built-in keyboard handling. |
64
+
65
+ ## Keyboard Interactions
66
+
67
+ | Key | Context | Action |
68
+ | --------------------- | -------------- | ---------------------------------------- |
69
+ | `Enter` / `Space` | Gallery item | Opens the lightbox for that image. |
70
+ | `Enter` / `Space` | Edit button | Fires `oneditclick` for that image. |
71
+ | `Enter` / `Space` | Delete button | Fires `ondeleteclick` for that image. |
72
+ | `Escape` | Lightbox open | Closes the lightbox. |
73
+ | `ArrowLeft` | Lightbox open | Shows the previous image. |
74
+ | `ArrowRight` | Lightbox open | Shows the next image. |
75
+ | `Home` / `End` | Lightbox open | Jumps to the first / last image. |
76
+ | `Tab` / `Shift+Tab` | Lightbox open | Cycles focus between lightbox controls (focus is trapped). |
77
+
78
+ ## CSS Variables
79
+
80
+ Override these custom properties to theme the component.
81
+
82
+ | Variable | Default | CSS Property | Description |
83
+ | -------------------------------------------- | -------------- | --------------------- | ------------------------------------------------------------------------------ |
84
+ | `--gallery-columns` | `3` | grid-template-columns | Number of columns in the grid (used as `repeat(N, 1fr)`). |
85
+ | `--gallery-gap` | `8px` | gap | Gap between grid tiles. |
86
+ | `--gallery-width` | `100%` | width | Width of the grid container. |
87
+ | `--gallery-padding` | `0px` | padding | Padding of the grid container. |
88
+ | `--gallery-margin` | `0px` | margin | Margin of the grid container. |
89
+ | `--gallery-background` | `transparent` | background | Background of the grid container. |
90
+ | `--gallery-item-aspect-ratio` | `1` | aspect-ratio | Aspect ratio of each grid tile. |
91
+ | `--gallery-item-border-radius` | `0px` | border-radius | Corner rounding of each grid tile and its image. |
92
+ | `--gallery-item-border` | `none` | border | Border of each interactive item (grid tile or list row open-button). |
93
+ | `--gallery-item-image-fit` | `cover` | object-fit | Object fit of the image inside each grid tile. |
94
+ | `--gallery-item-image-transition` | `-` | transition | Transition applied to the image inside each grid tile. |
95
+ | `--gallery-item-cursor` | `pointer` | cursor | Cursor over interactive items (grid tiles or list rows). |
96
+ | `--gallery-item-transition` | `-` | transition | Transition applied to interactive items (grid tiles or list rows). |
97
+ | `--gallery-item-hover-opacity` | `1` | opacity | Opacity of an interactive grid tile on hover. |
98
+ | `--gallery-item-hover-transform` | `-` | transform | Transform of an interactive grid tile on hover. |
99
+ | `--gallery-item-focus-outline` | `2px solid currentColor` | outline | Focus-visible outline of an interactive item. Wraps the grid tile, or the full list row including its action buttons. |
100
+ | `--gallery-item-focus-outline-offset` | `2px` | outline-offset | Focus-visible outline offset of an interactive item. |
101
+ | `--gallery-list-item-gap` | `12px` | gap | Gap between the thumbnail and text block in a list row. |
102
+ | `--gallery-list-item-padding` | `8px` | padding | Padding of each list row. |
103
+ | `--gallery-list-item-background` | `transparent` | background | Background of each list row. |
104
+ | `--gallery-list-item-hover-background` | `transparent` | background | Hover background of an interactive list row. Covers the full row, action buttons included; static rows are not highlighted. |
105
+ | `--gallery-list-item-border-radius` | `0px` | border-radius | Corner rounding of each list row. |
106
+ | `--gallery-list-thumbnail-width` | `56px` | width | Width of the thumbnail in a list row. |
107
+ | `--gallery-list-thumbnail-height` | `56px` | height | Height of the thumbnail in a list row. |
108
+ | `--gallery-list-thumbnail-fit` | `cover` | object-fit | Object fit of the thumbnail in a list row. |
109
+ | `--gallery-list-thumbnail-border-radius` | `0px` | border-radius | Corner rounding of the thumbnail in a list row. |
110
+ | `--gallery-list-text-gap` | `2px` | gap | Gap between the title and caption in a list row. |
111
+ | `--gallery-list-title-color` | `inherit` | color | Text color of the list-row title (the image `alt`). |
112
+ | `--gallery-list-title-font-size` | `14px` | font-size | Font size of the list-row title. |
113
+ | `--gallery-list-title-font-weight` | `500` | font-weight | Font weight of the list-row title. |
114
+ | `--gallery-list-title-font-family` | `-` | font-family | Font family of the list-row title. |
115
+ | `--gallery-list-caption-color` | `inherit` | color | Text color of the list-row caption. |
116
+ | `--gallery-list-caption-font-size` | `12px` | font-size | Font size of the list-row caption. |
117
+ | `--gallery-list-caption-font-family` | `-` | font-family | Font family of the list-row caption. |
118
+ | `--gallery-item-actions-top` | `8px` | top | Distance of the action-button cluster from the top of a grid tile. |
119
+ | `--gallery-item-actions-right` | `8px` | right / padding-right | Distance of the action-button cluster from the right edge of an item. |
120
+ | `--gallery-item-actions-gap` | `4px` | gap | Gap between the edit and delete buttons. |
121
+ | `--gallery-item-action-background` | grid: `#00000066`, list: `transparent` | background | Background of the edit/delete action buttons. Grid tiles get a frosted-glass scrim over the image; list rows stay transparent. |
122
+ | `--gallery-item-action-backdrop-filter` | grid: `blur(8px)` | backdrop-filter | Backdrop filter behind the action buttons in grid view (frosted-glass effect). |
123
+ | `--gallery-item-action-color` | grid: `#ffffff`, list: `currentColor` | color | Icon color of the action buttons. |
124
+ | `--gallery-item-action-hover-background` | grid: `#00000099`, list: `#80808026` | background | Hover background of the action buttons. |
125
+ | `--gallery-item-action-padding` | `6px` | padding | Padding of the action buttons. |
126
+ | `--gallery-item-action-border-radius` | `8px` | border-radius | Corner rounding of the action buttons. |
127
+ | `--gallery-item-action-icon-size` | `16px` | width / height | Size of the built-in icons inside the action buttons (bridged to the inner `Icon`'s `--icon-width`/`--icon-height`; custom icon snippets size themselves). |
128
+ | `--gallery-lightbox-z-index` | `15` | z-index | Stacking order of the lightbox overlay. |
129
+ | `--gallery-lightbox-background` | `#000000e6` | background | Backdrop color of the lightbox overlay. |
130
+ | `--gallery-lightbox-image-width` | `85vw` | width | Width of the lightbox image box (image letterboxes inside via object-fit). |
131
+ | `--gallery-lightbox-image-height` | `75vh` | height | Height of the lightbox image box. |
132
+ | `--gallery-lightbox-image-fit` | `contain` | object-fit | Object fit of the lightbox image. |
133
+ | `--gallery-lightbox-image-border-radius` | `0px` | border-radius | Corner rounding of the lightbox image. |
134
+ | `--gallery-lightbox-caption-gap` | `12px` | gap | Gap between the lightbox image and its caption. |
135
+ | `--gallery-lightbox-caption-color` | `#ffffff` | color | Text color of the lightbox caption. |
136
+ | `--gallery-lightbox-caption-font-size` | `14px` | font-size | Font size of the lightbox caption. |
137
+ | `--gallery-lightbox-caption-font-family` | `-` | font-family | Font family of the lightbox caption. |
138
+ | `--gallery-lightbox-counter-bottom` | `16px` | bottom | Distance of the position counter from the bottom of the lightbox. |
139
+ | `--gallery-lightbox-counter-color` | `#ffffff` | color | Text color of the position counter. |
140
+ | `--gallery-lightbox-counter-font-size` | `13px` | font-size | Font size of the position counter. |
141
+ | `--gallery-lightbox-counter-font-family` | `-` | font-family | Font family of the position counter. |
142
+ | `--gallery-lightbox-close-top` | `16px` | top | Distance of the close button from the top of the lightbox. |
143
+ | `--gallery-lightbox-close-right` | `16px` | right | Distance of the close button from the right of the lightbox. |
144
+ | `--gallery-lightbox-nav-inset` | `16px` | left / right | Distance of the previous/next buttons from the lightbox edges. |
145
+ | `--gallery-lightbox-control-background` | `transparent` | background-color | Background of the lightbox close and navigation buttons. |
146
+ | `--gallery-lightbox-control-color` | `#ffffff` | color | Icon color of the lightbox close and navigation buttons. |
147
+ | `--gallery-lightbox-control-hover-background`| `#ffffff1f` | background | Hover background of the lightbox close and navigation buttons. |
148
+ | `--gallery-lightbox-control-padding` | `8px` | padding | Padding of the lightbox close and navigation buttons. |
149
+ | `--gallery-lightbox-control-border-radius` | `50%` | border-radius | Corner rounding of the lightbox close and navigation buttons. |
150
+ | `--gallery-lightbox-control-icon-size` | `24px` | width / height | Size of the built-in icons inside the lightbox close and navigation buttons (bridged to the inner `Icon`'s `--icon-width`/`--icon-height`; custom icon snippets size themselves). |
151
+
152
+ ## Type Reference
153
+
154
+ Custom types used by this component's props and events:
155
+
156
+ ### GalleryImage
157
+
158
+ ```typescript
159
+ type GalleryImage = {
160
+ src: string;
161
+ alt: string;
162
+ thumbnail?: string;
163
+ fallback?: string;
164
+ caption?: string;
165
+ };
166
+ ```
167
+
168
+ ### GalleryView
169
+
170
+ ```typescript
171
+ type GalleryView = 'grid' | 'list';
172
+ ```
173
+
174
+ ## Web Component
175
+
176
+ Tag: `<pui-gallery>`
177
+
178
+ ```html
179
+ <pui-gallery view="list" loop show-counter active-index="2"></pui-gallery>
180
+ ```
181
+
182
+ > **Note:** The `images` prop is an array — set it via JavaScript property, as are the `onimageclick`/`oneditclick`/`ondeleteclick` handlers. Icon snippet props (`previousIcon`, `nextIcon`, `closeIcon`, `editIcon`, `deleteIcon`) are not attribute-serializable; custom-element consumers fall back to the built-in icon assets.
package/build/docs/Icon.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # Icon
2
2
 
3
- A clickable icon component that displays an image or inline SVG with an optional text label. The entire container is a button for accessibility. Layout direction (row or column) is controlled via CSS variable `--icon-container-direction`. Supports two rendering modes: image URL via `icon` prop, or raw SVG markup via `svg` prop.
3
+ An icon component that displays an image or inline SVG with an optional text label. Interactivity is per-state: the container only becomes a focusable `role="button"` with Enter/Space activation and a pointer cursor when an `onclick` handler is provided; otherwise it renders as a plain element. Layout direction (row or column) is controlled via CSS variable `--icon-container-direction`. Supports two rendering modes: image URL via `icon` prop, or raw SVG markup via `svg` prop.
4
4
 
5
5
  ## Usage
6
6
 
@@ -34,7 +34,7 @@ A clickable icon component that displays an image or inline SVG with an optional
34
34
 
35
35
  | Event | Type | Description |
36
36
  | --------- | -------------------------------- | --------------------------------------------------------------- |
37
- | onclick | `(event: MouseEvent) => void` | Fires when the icon container is clicked. |
37
+ | onclick | `(event: MouseEvent) => void` | Fires when the icon container is clicked. Providing this handler is what makes the container a focusable `role="button"` with Enter/Space activation. |
38
38
  | onkeydown | `(event: KeyboardEvent) => void` | Fires when a key is pressed while the icon container has focus. |
39
39
 
40
40
  ## CSS Variables
@@ -45,6 +45,7 @@ Override these custom properties to theme the component.
45
45
  | ---------------------------- | -------------- | -------------- | -------------------------------------------------------------------------- |
46
46
  | `--icon-container-padding` | `4px` | padding | Inner padding of the icon container. |
47
47
  | `--icon-container-direction` | `column` | flex-direction | Layout direction of icon + text (column for vertical, row for horizontal). |
48
+ | `--icon-cursor` | `pointer` | cursor | Cursor over the container when interactive (an `onclick` is provided). |
48
49
  | `--icon-height` | `20px` | height | Height of the icon image or SVG container. |
49
50
  | `--icon-width` | `20px` | width | Width of the icon image or SVG container. |
50
51
  | `--icon-padding` | `4px` | padding | Padding around the icon image or SVG container. |
package/build/docs/Img.md CHANGED
@@ -35,6 +35,7 @@ Override these custom properties to theme the component.
35
35
  | `--image-border-radius` | `0px` | border-radius | Corner rounding of the image. |
36
36
  | `--image-margin` | `0px` | margin | Margin around the image. |
37
37
  | `--image-filter` | `none` | filter | CSS filter applied to the image (e.g., grayscale, brightness). |
38
+ | `--image-flex-shrink` | `-` | flex-shrink | Flex shrink factor when the image is a flex item. |
38
39
  | `--image-background` | `-` | background | Background behind the image. |
39
40
  | `--image-border` | `-` | border | Border of the image. |
40
41
  | `--image-transition` | `-` | transition | Transition animation for hover effects. |
package/build/docs/Resizable.md CHANGED
@@ -74,6 +74,7 @@ type ResizeSize = { width: number; height: number };
74
74
  | ----------------------------------------- | -------------------- | ------------ | ---------------------------------------- |
75
75
  | `--resizable-max-width` | `none` | max-width | Caps the rendered width (e.g. to fit a container/viewport); the bound `width` is clamped to it visually. |
76
76
  | `--resizable-max-height` | `none` | max-height | Caps the rendered height regardless of `height`. |
77
+ | `--resizable-transition` | `none` | transition | Transition for programmatic size changes (e.g. an expand/collapse animation). Automatically suppressed while the user is actively drag-resizing and under `prefers-reduced-motion: reduce`. |
77
78
  | `--resizable-edge-size` | `8px` | width/height | Hit-area thickness of edge handles. |
78
79
  | `--resizable-corner-size` | `14px` | width/height | Hit-area size of corner handles. |
79
80
  | `--resizable-handle-color` | `transparent` | background | Handle fill (set to make handles visible).|
package/build/docs/_index.json CHANGED
@@ -99,6 +99,10 @@
99
99
  "name": "Draggable",
100
100
  "description": "A wrapper that lets the user drag its content to reposition it via `transform: translate(x, y)` (never affecting flow). Bindable `x`/`y` make the position observable/persistable; supports a `handle` selector, single-`axis` constraint, viewport `bounds`, and keyboard arrow-key movement by `step`, plus drag events. Layout-agnostic — layers on top of the element's existing positioning. Pair with a `fixed` element for a draggable floating panel."
101
101
  },
102
+ {
103
+ "name": "Gallery",
104
+ "description": "An image gallery with grid and list views and a built-in lightbox viewer. Items open a full-screen modal lightbox with previous/next navigation, keyboard support (Escape, ArrowLeft/ArrowRight, Home/End), a focus trap, fade transition, focus return to the originating item, and body scroll lock tied exactly to the lightbox lifecycle. Bindable open/activeIndex props allow observing or programmatically controlling the lightbox. The view prop switches between a grid of tiles and a list of rows (thumbnail + alt title + caption subtitle). Providing oneditclick / ondeleteclick handlers renders per-item edit / delete buttons that fire without opening the lightbox (frosted-glass scrim over grid tiles, transparent inline on list rows). Supports thumbnails, error fallbacks, and captions per image. Every visual property is themeable via --gallery-* CSS variables."
105
+ },
102
106
  {
103
107
  "name": "Gauge",
104
108
  "description": "A full-circle ring gauge that displays a `value` clamped to 0-100 as a single SVG arc. Has an animated stroke-dashoffset transition and an optional centered percentage label. Uses SVG stroke-dasharray for the arc rendering."
@@ -109,7 +113,7 @@
109
113
  },
110
114
  {
111
115
  "name": "Icon",
112
- "description": "A clickable icon component that displays an image with an optional text label below. The entire container is a button for accessibility."
116
+ "description": "An icon component that displays an image (via icon URL) or inline SVG markup (via svg prop, rendered with {@html}) with an optional text label. Interactivity is per-state: the container only becomes a focusable role=\"button\" with Enter/Space activation and pointer cursor when an onclick handler is provided; otherwise it renders as a plain element. Icon/text layout direction and sizing are themeable via --icon-* CSS variables."
113
117
  },
114
118
  {
115
119
  "name": "IconStack",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "polymorph-ui-components-mcp",
3
- "version": "0.1.0",
3
+ "version": "0.3.0",
4
4
  "description": "MCP server for polymorph-ui-components - provides structured access to component props, CSS variables, and usage patterns",
5
5
  "type": "module",
6
6
  "main": "build/index.js",