polymorph-ui-components-mcp 0.2.0 → 0.3.1

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 +12 -0
  2. package/build/docs/CHANGELOG.md +8 -2
  3. package/build/docs/Choicebox.md +34 -0
  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/Modal.md +3 -0
  9. package/build/docs/_index.json +5 -1
  10. package/package.json +11 -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 |
@@ -92,12 +100,15 @@ Override these custom properties to theme the component.
92
100
  | `--button-content-gap` | `16px` | gap | Gap between icon and text inside the button. |
93
101
  | `--button-visibility` | `visible` | visibility | Controls button visibility (visible/hidden). |
94
102
  | `--button-box-shadow` | `none` | box-shadow | Box shadow of the button. |
103
+ | `--button-text-decoration` | `none` | text-decoration | Text decoration of the label, e.g. `underline` for a link-styled button. |
104
+ | `--button-line-height` | `normal` | line-height | Line height of the label. Useful when a link-styled button must sit on a text baseline. |
95
105
  | `--button-disabled-cursor` | `not-allowed` | cursor | Cursor shown when the button is disabled. |
96
106
  | `--button-disabled-opacity` | `0.4` | opacity | Opacity when the button is disabled. |
97
107
  | `--button-disabled-text-color` | `-` | color | Text color when the button is disabled. |
98
108
  | `--button-disabled-font-size` | `-` | font-size | Font size when the button is disabled. |
99
109
  | `--button-disabled-font-weight` | `-` | font-weight | Font weight when the button is disabled. |
100
110
  | `--button-disabled-border` | `-` | border | Border when the button is disabled. |
111
+ | `--button-disabled-text-decoration` | `var(--button-text-decoration, none)` | text-decoration | Text decoration when disabled, e.g. `line-through` for an unavailable option. |
101
112
  | `--button-disabled-background-color` | `-` | background | Background color when the button is disabled. |
102
113
  | `--button-loader-order` | `1` | order | Flex order of the circular loader relative to icon/text. |
103
114
  | `--button-icon-order` | `2` | order | Flex order of the icon relative to loader/text. |
@@ -108,6 +119,7 @@ Override these custom properties to theme the component.
108
119
  | `--button-hover-text-color` | inherits `--button-text-color` | color | Text color on hover. |
109
120
  | `--button-hover-border` | inherits `--button-border` | border | Border style on hover. |
110
121
  | `--button-hover-transform` | `-` | transform | CSS transform applied on hover (e.g., `scale(1.05)`). Allows hover scale effects without `:global()`. |
122
+ | `--button-hover-opacity` | `var(--button-opacity, 1)` | opacity | Opacity on hover, for a fade effect without overriding the background colour. |
111
123
  | `--button-active-transform` | `-` | transform | CSS transform applied on active/pressed state (e.g., `scale(0.95)`). Allows press-down effects without `:global()`. |
112
124
  | `--button-progress-loader-background-color` | `#00000030` | background | Background color of the progress bar overlay. |
113
125
  | `--button-progress-loader-duration` | `8s` | animation-duration | Duration of the progress bar fill animation. |
package/build/docs/CHANGELOG.md CHANGED
@@ -2,9 +2,15 @@
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.3.0...HEAD)
5
+ ## [Unreleased](https://github.com/sinha-sahil/polymorph-ui-components/compare/0.6.0...HEAD)
6
6
 
7
- - chat bubble element now exposes interface to scale up chat widget
7
+ - Added repo url to run oidc
8
+
9
+ ## [0.6.0](https://github.com/sinha-sahil/polymorph-ui-components/compare/0.5.0...0.6.0) - 5 August 2026
10
+
11
+ ## [0.5.0](https://github.com/sinha-sahil/polymorph-ui-components/compare/0.4.0...0.5.0) - 5 July 2026
12
+
13
+ ## [0.4.0](https://github.com/sinha-sahil/polymorph-ui-components/compare/0.3.0...0.4.0) - 1 July 2026
8
14
 
9
15
  ## [0.3.0](https://github.com/sinha-sahil/polymorph-ui-components/compare/0.2.0...0.3.0) - 29 June 2026
10
16
 
package/build/docs/Choicebox.md CHANGED
@@ -21,6 +21,7 @@ A large-target selection card used for prominent single or multi-choice selectio
21
21
  | selected | `boolean` | No | `false` | The current selection state of the choicebox. Bindable. |
22
22
  | mode | `'radio' \| 'checkbox'` | No | `'radio'` | Sets the element's ARIA role and selection behavior. In `radio` mode a selected card cannot be deselected by clicking it again; `checkbox` mode toggles freely. |
23
23
  | disabled | `boolean` | No | `false` | When true, the choicebox is non-interactive and visually dimmed. |
24
+ | showIndicator | `boolean` | No | `false` | Draw the radio dot / checkbox tick inside the card. Off by default so cards that supply their own selected affordance are unaffected. |
24
25
  | testId | `string` | No | `undefined` | Value for the `data-pw` attribute used in Playwright test selectors. |
25
26
  | classes | `string` | No | `-` | CSS class string applied to the component's top-level element. Useful for theming — define classes with CSS variable overrides and pass them to create variant styles. |
26
27
 
@@ -69,3 +70,36 @@ Tag: `<pui-choicebox>`
69
70
  <span>Option A</span>
70
71
  </pui-choicebox>
71
72
  ```
73
+
74
+ ### Indicator
75
+
76
+ Set `showIndicator` to render a selection mark inside the card — a dot in `radio` mode, a tick in
77
+ `checkbox` mode. The mark is decorative: the card itself carries `role` and `aria-checked`, so the
78
+ indicator is `aria-hidden` and assistive tech reports one control, not two.
79
+
80
+ The slot content is wrapped in a growing element, so the indicator always sits at the card's
81
+ trailing edge whatever the slot contains. The wrapper's alignment and gap fall through to the
82
+ card's own values, so theming the card is enough — you only set these to make the inside of the
83
+ card differ from the card itself.
84
+
85
+ | Variable | Default | Description |
86
+ | ------------------------------ | -------------------------------- | --------------------------------------------------------------- |
87
+ | `--choicebox-body-flex` | `1` | Flex of the slot wrapper. `1` makes it fill, pushing the mark out. |
88
+ | `--choicebox-body-min-width` | `0` | Allows long slot content to ellipsis rather than overflow. |
89
+ | `--choicebox-body-display` | `flex` | Layout of the slot wrapper. |
90
+ | `--choicebox-body-align-items` | `var(--choicebox-align-items)` | Cross-axis alignment inside the wrapper. |
91
+ | `--choicebox-body-gap` | `var(--choicebox-gap)` | Gap between slot children. |
92
+
93
+ | Variable | Default | Description |
94
+ | ------------------------------------------- | -------------------- | ---------------------------------------------------- |
95
+ | `--choicebox-indicator-size` | `20px` | Width and height of the indicator. |
96
+ | `--choicebox-indicator-border` | `2px solid #757575` | Border when unselected. |
97
+ | `--choicebox-indicator-background` | `transparent` | Fill when unselected. |
98
+ | `--choicebox-indicator-selected-border` | `2px solid #2196f3` | Border when selected. |
99
+ | `--choicebox-indicator-selected-background` | `#2196f3` | Fill when selected. |
100
+ | `--choicebox-indicator-border-radius` | `var(--radius, 4px)` | Corner rounding in `checkbox` mode. |
101
+ | `--choicebox-indicator-dot-inset` | `4px` | Ring thickness that forms the dot in `radio` mode. |
102
+ | `--choicebox-indicator-dot-color` | `#ffffff` | Colour of the ring that punches out the dot. Set this to the card's real background when the choicebox itself is transparent. |
103
+ | `--choicebox-indicator-icon-size` | `14px` | Size of the tick in `checkbox` mode. |
104
+ | `--choicebox-indicator-icon-color` | `#ffffff` | Colour of the tick. |
105
+ | `--choicebox-indicator-transition` | `background 0.2s, border-color 0.2s` | Transition for selection changes. |
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/Modal.md CHANGED
@@ -18,6 +18,8 @@ A dialog overlay component that renders on top of the page with configurable siz
18
18
  | ------------------------ | --------------------------------------------------------------------------------------------------------------------------- | -------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
19
19
  | size | `ModalSize = 'large' \| 'medium' \| 'small' \| 'fit-content'` | No | `'fit-content'` | Controls the height of the modal content panel. 'small'=20vh, 'medium'=50vh, 'large'=80vh, 'fit-content'=auto with 80vh max. |
20
20
  | align | `ModalAlign = 'top' \| 'center' \| 'bottom'` | No | `'center'` | Vertical alignment of the modal within the viewport. 'top' aligns to the top (flex-start), 'center' centers vertically, 'bottom' aligns to the bottom (flex-end). |
21
+ | lockScroll | `boolean` | No | `true` | Whether the modal takes the page scroll lock. Set false when another element already owns it — otherwise this modal releases that lock when it unmounts. |
22
+ | autoDismissAfter | `number \| null` | No | `null` | Milliseconds after which the modal fires `onclose` itself. Null keeps it open until dismissed. The timer is cleared on unmount. |
21
23
  | showOverlay | `boolean` | No | `true` | When true, shows a dark semi-transparent overlay behind the modal. When false, the overlay is transparent with pointer-events disabled. |
22
24
  | supportHardwareBackPress | `boolean` | No | `false` | When true, pushes a history state on mount so that pressing the device back button triggers onclose instead of navigating away. Cleans up on destroy. |
23
25
  | enableTransition | `boolean` | No | `true` | When true, the modal content animates in/out using fly or fade transitions via ModalAnimation. |
@@ -58,6 +60,7 @@ Override these custom properties to theme the component.
58
60
  | -------------------------------------------------------- | ------------------ | ------------------------------- | ------------------------------------------------------------------ |
59
61
  | `--modal-width` | `100vw` | width | Width of the modal overlay container. |
60
62
  | `--modal-height` | `100vh` | height | Height of the modal overlay container. |
63
+ | `--modal-position` | `fixed` | position | Positioning of the overlay layer. Set `absolute` to scope the modal to a positioned ancestor — a drawer, sheet or embedded widget — instead of the viewport. Pair it with `--modal-width` / `--modal-height` (`auto` lets the insets size it). |
61
64
  | `--modal-z-index` | `15` | z-index | Z-index stacking order of the modal overlay. |
62
65
  | `--modal-margin` | `-` | margin | Outer margin of the modal overlay. |
63
66
  | `--modal-overlay-background-color` | `#00000066` | background-color | Background color of the semi-transparent overlay behind the modal. |
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,8 +1,18 @@
1
1
  {
2
2
  "name": "polymorph-ui-components-mcp",
3
- "version": "0.2.0",
3
+ "version": "0.3.1",
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
+ "repository": {
7
+ "type": "git",
8
+ "url": "git+https://github.com/sinha-sahil/polymorph-ui-components.git",
9
+ "directory": "mcp"
10
+ },
11
+ "bugs": {
12
+ "url": "https://github.com/sinha-sahil/polymorph-ui-components/issues"
13
+ },
14
+ "homepage": "https://github.com/sinha-sahil/polymorph-ui-components/tree/release/mcp#readme",
15
+ "author": "Sahil Sinha",
6
16
  "main": "build/index.js",
7
17
  "bin": {
8
18
  "polymorph-ui-components-mcp": "./build/index.js"