polymorph-ui-components-mcp 0.0.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.
- package/build/docs/Accordion.md +45 -0
- package/build/docs/Avatar.md +80 -0
- package/build/docs/Badge.md +58 -0
- package/build/docs/Banner.md +134 -0
- package/build/docs/Book.md +111 -0
- package/build/docs/Browser.md +92 -0
- package/build/docs/Button.md +154 -0
- package/build/docs/CHANGELOG.md +0 -0
- package/build/docs/Calendar.md +129 -0
- package/build/docs/Carousel.md +73 -0
- package/build/docs/CheckListItem.md +76 -0
- package/build/docs/Checkbox.md +84 -0
- package/build/docs/Choicebox.md +71 -0
- package/build/docs/ColorPicker.md +83 -0
- package/build/docs/Combobox.md +336 -0
- package/build/docs/CommandMenu.md +208 -0
- package/build/docs/ContextMenu.md +132 -0
- package/build/docs/GUIDELINES.md +380 -0
- package/build/docs/Gauge.md +46 -0
- package/build/docs/GridItem.md +78 -0
- package/build/docs/Icon.md +66 -0
- package/build/docs/IconStack.md +68 -0
- package/build/docs/Img.md +56 -0
- package/build/docs/Input.md +151 -0
- package/build/docs/InputButton.md +246 -0
- package/build/docs/KeyboardInput.md +104 -0
- package/build/docs/ListItem.md +156 -0
- package/build/docs/Loader.md +55 -0
- package/build/docs/LoadingDots.md +45 -0
- package/build/docs/Menu.md +139 -0
- package/build/docs/Modal.md +221 -0
- package/build/docs/ModalAnimation.md +29 -0
- package/build/docs/OverlayAnimation.md +21 -0
- package/build/docs/Pagination.md +102 -0
- package/build/docs/Phone.md +82 -0
- package/build/docs/Pill.md +122 -0
- package/build/docs/Progress.md +53 -0
- package/build/docs/Radio.md +75 -0
- package/build/docs/RelativeTime.md +76 -0
- package/build/docs/Scroller.md +194 -0
- package/build/docs/Select.md +177 -0
- package/build/docs/Sheet.md +133 -0
- package/build/docs/Shimmer.md +76 -0
- package/build/docs/Slider.md +68 -0
- package/build/docs/Snippet.md +99 -0
- package/build/docs/SplitButton.md +157 -0
- package/build/docs/SplitInput.md +157 -0
- package/build/docs/Step.md +52 -0
- package/build/docs/Stepper.md +85 -0
- package/build/docs/Table.md +252 -0
- package/build/docs/Tabs.md +117 -0
- package/build/docs/ThemeSwitcher.md +125 -0
- package/build/docs/Toast.md +140 -0
- package/build/docs/Toggle.md +70 -0
- package/build/docs/Toolbar.md +100 -0
- package/build/docs/Tooltip.md +86 -0
- package/build/docs/_index.json +218 -0
- package/build/docs/templates/changelog.hbs +36 -0
- package/build/index.d.ts +2 -0
- package/build/index.js +163 -0
- package/build/index.js.map +1 -0
- package/build/services/registry.d.ts +11 -0
- package/build/types.d.ts +4 -0
- package/package.json +34 -0
|
@@ -0,0 +1,221 @@
|
|
|
1
|
+
# Modal
|
|
2
|
+
|
|
3
|
+
A dialog overlay component that renders on top of the page with configurable size, alignment, header (with left/right images and text), footer (with primary/secondary Button components), and transition animations. It locks body scroll on mount and optionally handles hardware back-press navigation. The overlay supports click-to-dismiss (debounced) and Escape key handling.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```svelte
|
|
8
|
+
<script>
|
|
9
|
+
import { Modal } from 'polymorph-ui-components';
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<Modal />
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Props
|
|
16
|
+
|
|
17
|
+
| Prop | Type | Required | Default | Description |
|
|
18
|
+
| ------------------------ | --------------------------------------------------------------------------------------------------------------------------- | -------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
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
|
+
| 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
|
+
| 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
|
+
| 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
|
+
| enableTransition | `boolean` | No | `true` | When true, the modal content animates in/out using fly or fade transitions via ModalAnimation. |
|
|
24
|
+
| transitionType | `ModalTransition = 'IN' \| 'ALL'` | No | `'ALL'` | Controls transition behavior. 'ALL' animates both in and out transitions. 'IN' only animates the in-transition (content disappears instantly on close). |
|
|
25
|
+
| header | `{ leftImage?: string; rightImage?: string; text?: string; testId?: string; buttonTestId?: string; }` | No | `{}` | Object configuring the modal header bar. leftImage: URL for left icon (e.g., back arrow); rightImage: URL for right icon (e.g., close button); text: header title text; testId/buttonTestId: test selectors. |
|
|
26
|
+
| footer | `{ primaryButton?: ButtonProperties; secondaryButton?: ButtonProperties; }` | No | `-` | Object configuring footer action buttons. primaryButton: ButtonProperties for the main action button; secondaryButton: ButtonProperties for the alternate action button. |
|
|
27
|
+
| debounceTime | `number` | No | `700` | Debounce delay in milliseconds for overlay click handling. Prevents rapid repeated overlay dismissals. |
|
|
28
|
+
| leftImageTestId | `string` | No | `-` | Value for data-pw on the left header image wrapper. |
|
|
29
|
+
| testId | `string` | No | `-` | Value for data-pw on the modal overlay container. |
|
|
30
|
+
| 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. |
|
|
31
|
+
|
|
32
|
+
## Snippets
|
|
33
|
+
|
|
34
|
+
Svelte 5 Snippet props — pass content blocks to the component.
|
|
35
|
+
|
|
36
|
+
| Snippet | Type | Description |
|
|
37
|
+
| ------------- | --------- | ----------------------------------------------------------------------------------------------------------------------- |
|
|
38
|
+
| content | `Snippet` | A Svelte 5 Snippet for the main modal body content. The modal only renders when this snippet is provided. |
|
|
39
|
+
| footerSnippet | `Snippet` | A Svelte 5 Snippet that replaces the default footer buttons with custom content. Takes precedence over the footer prop. |
|
|
40
|
+
|
|
41
|
+
## Events
|
|
42
|
+
|
|
43
|
+
| Event | Type | Description |
|
|
44
|
+
| ----------------------- | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
45
|
+
| onclose | `() => void` | Fires when the hardware back button is pressed (only when `supportHardwareBackPress` is true). Does NOT fire on overlay click or Escape key — those trigger `onoverlayclick` instead. |
|
|
46
|
+
| onheaderrightimageclick | `(event: MouseEvent) => void` | Fires when the right image in the header is clicked (e.g., close button). |
|
|
47
|
+
| onheaderleftimageclick | `(event: MouseEvent) => void` | Fires when the left image in the header is clicked (e.g., back arrow). |
|
|
48
|
+
| onprimarybuttonclick | `(event: MouseEvent) => void` | Fires when the primary footer button is clicked. |
|
|
49
|
+
| onsecondarybuttonclick | `(event: MouseEvent) => void` | Fires when the secondary footer button is clicked. |
|
|
50
|
+
| onoverlayclick | `() => void` | Fires when the dark overlay background is clicked (outside the modal content). Also fires when the Escape key is pressed. Debounced by debounceTime milliseconds. |
|
|
51
|
+
| onkeydown | `(event: KeyboardEvent) => void` | Fires when any key is pressed while the modal is open (attached to the window). |
|
|
52
|
+
|
|
53
|
+
## CSS Variables
|
|
54
|
+
|
|
55
|
+
Override these custom properties to theme the component.
|
|
56
|
+
|
|
57
|
+
| Variable | Default | CSS Property | Description |
|
|
58
|
+
| -------------------------------------------------------- | ------------------ | ------------------------------- | ------------------------------------------------------------------ |
|
|
59
|
+
| `--modal-width` | `100vw` | width | Width of the modal overlay container. |
|
|
60
|
+
| `--modal-height` | `100vh` | height | Height of the modal overlay container. |
|
|
61
|
+
| `--modal-z-index` | `15` | z-index | Z-index stacking order of the modal overlay. |
|
|
62
|
+
| `--modal-margin` | `-` | margin | Outer margin of the modal overlay. |
|
|
63
|
+
| `--modal-overlay-background-color` | `#00000066` | background-color | Background color of the semi-transparent overlay behind the modal. |
|
|
64
|
+
| `--modal-content-background-color` | `#ffffff` | background-color | Background color of the modal content panel. |
|
|
65
|
+
| `--modal-border-radius` | `8px` | border-radius | Corner rounding of the modal content panel. |
|
|
66
|
+
| `--modal-content-overflow` | `auto` | overflow | Overflow behavior of the modal content panel. |
|
|
67
|
+
| `--modal-content-border-top` | `-` | border-top | Top border of the modal content panel. |
|
|
68
|
+
| `--modal-display` | `flex` | display | Display property of the scrollable content area. |
|
|
69
|
+
| `--modal-overflow-y` | `scroll` | overflow-y | Vertical overflow behavior of the content area. |
|
|
70
|
+
| `--modal-scrollbar-width` | `none` | scrollbar-width | Scrollbar width for the content area (set 'none' to hide). |
|
|
71
|
+
| `--modal-center-justify-content` | `center` | justify-content | Vertical positioning of the modal when align='center'. |
|
|
72
|
+
| `--modal-center-align-items` | `center` | align-items | Horizontal positioning of the modal when align='center'. |
|
|
73
|
+
| `--modal-bottom-justify-content` | `flex-end` | justify-content | Vertical positioning of the modal when align='bottom'. |
|
|
74
|
+
| `--modal-bottom-align-items` | `-` | align-items | Horizontal positioning of the modal when align='bottom'. |
|
|
75
|
+
| `--modal-top-justify-content` | `flex-start` | justify-content | Vertical positioning of the modal when align='top'. |
|
|
76
|
+
| `--modal-top-align-items` | `-` | align-items | Horizontal positioning of the modal when align='top'. |
|
|
77
|
+
| `--modal-small-height` | `20vh` | height | Height of the modal content when size='small'. |
|
|
78
|
+
| `--modal-small-width` | `-` | width | Width of the modal content when size='small'. |
|
|
79
|
+
| `--modal-medium-height` | `50vh` | height | Height of the modal content when size='medium'. |
|
|
80
|
+
| `--modal-medium-width` | `-` | width | Width of the modal content when size='medium'. |
|
|
81
|
+
| `--modal-large-height` | `80vh` | height | Height of the modal content when size='large'. |
|
|
82
|
+
| `--modal-large-width` | `-` | width | Width of the modal content when size='large'. |
|
|
83
|
+
| `--modal-fit-content-max-height` | `80vh` | max-height | Maximum height of the modal when size='fit-content'. |
|
|
84
|
+
| `--modal-header-background-color` | `transparent` | background-color | Background color of the modal header bar. |
|
|
85
|
+
| `--modal-header-padding` | `18px 20px` | padding | Padding inside the header bar. |
|
|
86
|
+
| `--modal-header-border-radius` | `0px` | border-radius | Corner rounding of the header bar. |
|
|
87
|
+
| `--modal-header-border-bottom` | `none` | border-bottom | Bottom border of the header bar. |
|
|
88
|
+
| `--modal-footer-background-color` | `transparent` | background-color | Background color of the footer area. |
|
|
89
|
+
| `--modal-footer-padding` | `18px 20px` | padding | Padding inside the footer area. |
|
|
90
|
+
| `--modal-footer-border-radius` | `0px` | border-radius | Corner rounding of the footer area. |
|
|
91
|
+
| `--modal-footer-border-top` | `none` | border-top | Top border of the footer area. |
|
|
92
|
+
| `--modal-footer-justify-content` | `none` | justify-content | Horizontal alignment of footer content. |
|
|
93
|
+
| `--modal-footer-gap` | `0px` | gap | Gap between primary and secondary footer buttons. |
|
|
94
|
+
| `--modal-footer-action-buttons-width` | `fit-content` | width | Width of the footer action buttons container. |
|
|
95
|
+
| `--modal-footer-secondary-button-max-height` | `-` | --button-max-height | Maximum height of the secondary footer button. |
|
|
96
|
+
| `--modal-footer-secondary-button-max-width` | `-` | --button-max-width | Maximum width of the secondary footer button. |
|
|
97
|
+
| `--modal-footer-secondary-button-font-family` | `-` | --button-font-family | Font family of the secondary footer button. |
|
|
98
|
+
| `--modal-footer-secondary-button-font-weight` | `500` | --button-font-weight | Font weight of the secondary footer button. |
|
|
99
|
+
| `--modal-footer-secondary-button-font-size` | `14px` | --button-font-size | Font size of the secondary footer button. |
|
|
100
|
+
| `--modal-footer-secondary-button-color` | `#e4e4e7` | --button-color | Background color of the secondary footer button. |
|
|
101
|
+
| `--modal-footer-secondary-button-text-color` | `#18181b` | --button-text-color | Text color of the secondary footer button. |
|
|
102
|
+
| `--modal-footer-secondary-button-height` | `fit-content` | --button-height | Height of the secondary footer button. |
|
|
103
|
+
| `--modal-footer-secondary-button-padding` | `16px` | --button-padding | Padding inside the secondary footer button. |
|
|
104
|
+
| `--modal-footer-secondary-button-margin` | `-` | --button-margin | Margin around the secondary footer button. |
|
|
105
|
+
| `--modal-footer-secondary-button-border-radius` | `6px` | --button-border-radius | Corner rounding of the secondary footer button. |
|
|
106
|
+
| `--modal-footer-secondary-button-width` | `fit-content` | --button-width | Width of the secondary footer button. |
|
|
107
|
+
| `--modal-footer-secondary-button-cursor` | `pointer` | --button-cursor | Cursor style of the secondary footer button. |
|
|
108
|
+
| `--modal-footer-secondary-button-opacity` | `1` | --button-opacity | Opacity of the secondary footer button. |
|
|
109
|
+
| `--modal-footer-secondary-button-border` | `none` | --button-border | Border of the secondary footer button. |
|
|
110
|
+
| `--modal-footer-secondary-button-justify-content` | `center` | --button-justify-content | Justify content of the secondary footer button. |
|
|
111
|
+
| `--modal-footer-secondary-button-content-gap` | `16px` | --button-content-gap | Gap between content elements in the secondary footer button. |
|
|
112
|
+
| `--modal-footer-secondary-button-visibility` | `visible` | --button-visibility | Visibility of the secondary footer button. |
|
|
113
|
+
| `--modal-footer-secondary-button-box-shadow` | `none` | --button-box-shadow | Box shadow of the secondary footer button. |
|
|
114
|
+
| `--modal-footer-secondary-button-content-flex-direction` | `row` | --button-content-flex-direction | Flex direction of the secondary footer button content. |
|
|
115
|
+
| `--modal-secondary-button-order` | `none` | order | Flex order of the secondary footer button. |
|
|
116
|
+
| `--modal-footer-secondary-button-flex-value` | `none` | flex | Flex value of the secondary footer button. |
|
|
117
|
+
| `--modal-footer-primary-button-max-height` | `-` | --button-max-height | Maximum height of the primary footer button. |
|
|
118
|
+
| `--modal-footer-primary-button-max-width` | `-` | --button-max-width | Maximum width of the primary footer button. |
|
|
119
|
+
| `--modal-footer-primary-button-font-family` | `-` | --button-font-family | Font family of the primary footer button. |
|
|
120
|
+
| `--modal-footer-primary-button-font-weight` | `500` | --button-font-weight | Font weight of the primary footer button. |
|
|
121
|
+
| `--modal-footer-primary-button-font-size` | `14px` | --button-font-size | Font size of the primary footer button. |
|
|
122
|
+
| `--modal-footer-primary-button-color` | `#18181b` | --button-color | Background color of the primary footer button. |
|
|
123
|
+
| `--modal-footer-primary-button-text-color` | `white` | --button-text-color | Text color of the primary footer button. |
|
|
124
|
+
| `--modal-footer-primary-button-height` | `fit-content` | --button-height | Height of the primary footer button. |
|
|
125
|
+
| `--modal-footer-primary-button-padding` | `16px` | --button-padding | Padding inside the primary footer button. |
|
|
126
|
+
| `--modal-footer-primary-button-margin` | `-` | --button-margin | Margin around the primary footer button. |
|
|
127
|
+
| `--modal-footer-primary-button-border-radius` | `6px` | --button-border-radius | Corner rounding of the primary footer button. |
|
|
128
|
+
| `--modal-footer-primary-button-width` | `fit-content` | --button-width | Width of the primary footer button. |
|
|
129
|
+
| `--modal-footer-primary-button-cursor` | `pointer` | --button-cursor | Cursor style of the primary footer button. |
|
|
130
|
+
| `--modal-footer-primary-button-opacity` | `1` | --button-opacity | Opacity of the primary footer button. |
|
|
131
|
+
| `--modal-footer-primary-button-border` | `none` | --button-border | Border of the primary footer button. |
|
|
132
|
+
| `--modal-footer-primary-button-justify-content` | `center` | --button-justify-content | Justify content of the primary footer button. |
|
|
133
|
+
| `--modal-footer-primary-button-content-flex-direction` | `row` | --button-content-flex-direction | Flex direction of the primary footer button content. |
|
|
134
|
+
| `--modal-footer-primary-button-content-gap` | `16px` | --button-content-gap | Gap between content elements in the primary footer button. |
|
|
135
|
+
| `--modal-footer-primary-button-visibility` | `visible` | --button-visibility | Visibility of the primary footer button. |
|
|
136
|
+
| `--modal-footer-primary-button-box-shadow` | `none` | --button-box-shadow | Box shadow of the primary footer button. |
|
|
137
|
+
| `--modal-primary-button-order` | `none` | order | Flex order of the primary footer button. |
|
|
138
|
+
| `--modal-footer-primary-button-flex-value` | `none` | flex | Flex value of the primary footer button. |
|
|
139
|
+
| `--modal-header-text-size` | `16px` | font-size | Font size of the header title text. |
|
|
140
|
+
| `--modal-header-text-weight` | `-` | font-weight | Font weight of the header title text. |
|
|
141
|
+
| `--modal-header-text-line-height` | `-` | line-height | Line height of the header title text. |
|
|
142
|
+
| `--modal-header-text-letter-spacing` | `-` | letter-spacing | Letter spacing of the header title text. |
|
|
143
|
+
| `--modal-header-img-top-padding` | `5px` | padding-top | Top padding on both header images. |
|
|
144
|
+
| `--modal-header-left-image-margin` | `0px 18px 0px 0px` | margin | Margin around the left header image. |
|
|
145
|
+
| `--modal-header-left-image-width` | `25px` | width | Width of the left header image. |
|
|
146
|
+
| `--modal-header-left-image-height` | `25px` | height | Height of the left header image. |
|
|
147
|
+
| `--modal-header-right-image-width` | `25px` | width | Width of the right header image. |
|
|
148
|
+
| `--modal-header-right-image-height` | `25px` | height | Height of the right header image. |
|
|
149
|
+
| `--modal-header-right-image-padding` | `-` | padding | Padding around the right header image. |
|
|
150
|
+
|
|
151
|
+
## Type Reference
|
|
152
|
+
|
|
153
|
+
Custom types used by this component's props and events:
|
|
154
|
+
|
|
155
|
+
### ModalSize
|
|
156
|
+
|
|
157
|
+
```typescript
|
|
158
|
+
type ModalSize = 'large' | 'medium' | 'small' | 'fit-content';
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
### ModalAlign
|
|
162
|
+
|
|
163
|
+
```typescript
|
|
164
|
+
type ModalAlign = 'top' | 'center' | 'bottom';
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
### ModalTransition
|
|
168
|
+
|
|
169
|
+
```typescript
|
|
170
|
+
type ModalTransition = 'IN' | 'ALL';
|
|
171
|
+
```
|
|
172
|
+
|
|
173
|
+
### ButtonProperties
|
|
174
|
+
|
|
175
|
+
```typescript
|
|
176
|
+
type ButtonProperties = {
|
|
177
|
+
text?: string;
|
|
178
|
+
enable?: boolean;
|
|
179
|
+
showProgressBar?: boolean;
|
|
180
|
+
showLoader?: boolean;
|
|
181
|
+
loaderType?: 'Circular' | 'ProgressBar';
|
|
182
|
+
type?: 'submit' | 'reset' | 'button';
|
|
183
|
+
testId?: string;
|
|
184
|
+
icon?: Snippet;
|
|
185
|
+
children?: Snippet;
|
|
186
|
+
ariaLabel?: string;
|
|
187
|
+
ariaExpanded?: boolean;
|
|
188
|
+
disabled?: boolean;
|
|
189
|
+
classes?: string;
|
|
190
|
+
onclick?: (event: MouseEvent) => void;
|
|
191
|
+
onkeyup?: (event: KeyboardEvent) => void;
|
|
192
|
+
};
|
|
193
|
+
```
|
|
194
|
+
|
|
195
|
+
## Internal Dependencies
|
|
196
|
+
|
|
197
|
+
This component uses the following library components internally:
|
|
198
|
+
|
|
199
|
+
- Animations
|
|
200
|
+
- Button
|
|
201
|
+
|
|
202
|
+
## Web Component
|
|
203
|
+
|
|
204
|
+
Tag: `<pui-modal>`
|
|
205
|
+
|
|
206
|
+
```html
|
|
207
|
+
<pui-modal size="medium" show-overlay>
|
|
208
|
+
<p>Modal body content</p>
|
|
209
|
+
<div slot="footer">
|
|
210
|
+
<button>Cancel</button>
|
|
211
|
+
<button>Confirm</button>
|
|
212
|
+
</div>
|
|
213
|
+
</pui-modal>
|
|
214
|
+
```
|
|
215
|
+
|
|
216
|
+
### Slots
|
|
217
|
+
|
|
218
|
+
| Slot Name | Maps to Snippet | Description |
|
|
219
|
+
| ----------- | --------------- | ------------------------------------------ |
|
|
220
|
+
| _(default)_ | `content` | The main body content of the modal. |
|
|
221
|
+
| `footer` | `footerSnippet` | Content rendered in the modal footer area. |
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
# ModalAnimation
|
|
2
|
+
|
|
3
|
+
A wrapper that applies fly or fade Svelte transitions to its children based on the modal's `align` prop. For `top` alignment, content flies in from above; for `bottom`, from below; for `center`, a fade transition is used. The `transitionType` controls whether the out-transition is also animated ('ALL') or only the in-transition ('IN').
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```svelte
|
|
8
|
+
<script>
|
|
9
|
+
import { ModalAnimation } from 'polymorph-ui-components';
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<ModalAnimation />
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Props
|
|
16
|
+
|
|
17
|
+
| Prop | Type | Required | Default | Description |
|
|
18
|
+
|------|------|----------|---------|-------------|
|
|
19
|
+
| enable | `boolean` | No | `true` | When true, applies transition animations. When false, renders children without any transitions. |
|
|
20
|
+
| align | `'top' \| 'center' \| 'bottom'` | No | `'bottom'` | Determines the transition type: 'top' and 'bottom' use fly transitions, 'center' uses fade. |
|
|
21
|
+
| transitionType | `'IN' \| 'ALL'` | No | `'ALL'` | Controls whether the out-transition is animated. 'ALL' animates both in and out. 'IN' only animates the in-transition. |
|
|
22
|
+
|
|
23
|
+
## Snippets
|
|
24
|
+
|
|
25
|
+
Svelte 5 Snippet props — pass content blocks to the component.
|
|
26
|
+
|
|
27
|
+
| Snippet | Type | Description |
|
|
28
|
+
| -------- | --------- | ---------------------------------------- |
|
|
29
|
+
| children | `Snippet` | Content to animate inside the modal. |
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
# OverlayAnimation
|
|
2
|
+
|
|
3
|
+
A wrapper that applies a fade-out transition (350ms) to its children when they are removed from the DOM. Used internally by Modal to animate the overlay background.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```svelte
|
|
8
|
+
<script>
|
|
9
|
+
import { OverlayAnimation } from 'polymorph-ui-components';
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<OverlayAnimation />
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Snippets
|
|
16
|
+
|
|
17
|
+
Svelte 5 Snippet props — pass content blocks to the component.
|
|
18
|
+
|
|
19
|
+
| Snippet | Type | Description |
|
|
20
|
+
| -------- | --------- | ------------------------------------------ |
|
|
21
|
+
| children | `Snippet` | Content to render inside the overlay. |
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
# Pagination
|
|
2
|
+
|
|
3
|
+
Page-level navigation with numbered page buttons, prev/next controls, and ellipsis for large page ranges. The `currentPage` prop is bindable and `siblingCount` controls how many pages are shown around the active page. Ellipsis indicators appear automatically when pages are truncated.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```svelte
|
|
8
|
+
<script>
|
|
9
|
+
import { Pagination } from 'polymorph-ui-components';
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<Pagination totalPages={10} />
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Props
|
|
16
|
+
|
|
17
|
+
| Prop | Type | Required | Default | Description |
|
|
18
|
+
| ------------ | --------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
19
|
+
| totalPages | `number` | Yes | `-` | The total number of pages available. Determines the range of page buttons rendered. |
|
|
20
|
+
| currentPage | `number` | No | `1` | Bindable. The currently active page number. Controls which page button is highlighted and determines prev/next button disabled states. |
|
|
21
|
+
| siblingCount | `number` | No | `1` | Number of page buttons to show on each side of the current page. For example, siblingCount=1 with currentPage=5 shows pages 4, 5, 6. Higher values show more surrounding pages. |
|
|
22
|
+
| disabled | `boolean` | No | `false` | Whether the entire pagination is disabled. When true, all buttons become non-interactive, the container dims (opacity 0.5), and the cursor changes to not-allowed. |
|
|
23
|
+
| testId | `string` | No | `-` | Value for the data-pw attribute on the nav container, used for end-to-end testing selectors. |
|
|
24
|
+
| 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. |
|
|
25
|
+
|
|
26
|
+
## Events
|
|
27
|
+
|
|
28
|
+
| Event | Type | Description |
|
|
29
|
+
| -------- | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
30
|
+
| onchange | `(page: number) => void` | Fires when a new page is selected via page button or prev/next click. Receives the new page number. Does NOT fire when clicking the already-active page, when disabled, or when clicking prev on page 1 / next on the last page. |
|
|
31
|
+
|
|
32
|
+
## CSS Variables
|
|
33
|
+
|
|
34
|
+
Override these custom properties to theme the component.
|
|
35
|
+
|
|
36
|
+
### Container
|
|
37
|
+
|
|
38
|
+
| Variable | Default | CSS Property | Description |
|
|
39
|
+
| -------------------------- | -------- | ------------ | ------------------------------------------------------------ |
|
|
40
|
+
| `--pagination-display` | `flex` | display | Display mode of the pagination container. |
|
|
41
|
+
| `--pagination-gap` | `4px` | gap | Gap between page buttons, ellipsis, and prev/next controls. |
|
|
42
|
+
| `--pagination-align-items` | `center` | align-items | Vertical alignment of items within the pagination container. |
|
|
43
|
+
|
|
44
|
+
### Page Buttons
|
|
45
|
+
|
|
46
|
+
| Variable | Default | CSS Property | Description |
|
|
47
|
+
| ----------------------------------- | ------------------- | ------------- | ---------------------------------- |
|
|
48
|
+
| `--pagination-button-padding` | `6px 10px` | padding | Inner padding of each page button. |
|
|
49
|
+
| `--pagination-button-font-size` | `14px` | font-size | Font size of page button labels. |
|
|
50
|
+
| `--pagination-button-font-weight` | `400` | font-weight | Font weight of page button labels. |
|
|
51
|
+
| `--pagination-button-font-family` | `inherit` | font-family | Font family of page button labels. |
|
|
52
|
+
| `--pagination-button-color` | `currentColor` | color | Text color of page buttons. |
|
|
53
|
+
| `--pagination-button-background` | `transparent` | background | Background color of page buttons. |
|
|
54
|
+
| `--pagination-button-border` | `1px solid currentColor` | border | Border style of page buttons. |
|
|
55
|
+
| `--pagination-button-border-radius` | `6px` | border-radius | Corner rounding of page buttons. |
|
|
56
|
+
| `--pagination-button-cursor` | `pointer` | cursor | Cursor style on page buttons. |
|
|
57
|
+
| `--pagination-button-min-width` | `36px` | min-width | Minimum width of each page button. |
|
|
58
|
+
| `--pagination-button-height` | `36px` | height | Height of each page button. |
|
|
59
|
+
|
|
60
|
+
### Active Page
|
|
61
|
+
|
|
62
|
+
| Variable | Default | CSS Property | Description |
|
|
63
|
+
| --------------------------------- | ------------------- | ------------ | ------------------------------------------------------ |
|
|
64
|
+
| `--pagination-active-color` | `#ffffff` | color | Text color of the currently active page button. |
|
|
65
|
+
| `--pagination-active-background` | `#18181b` | background | Background color of the currently active page button. |
|
|
66
|
+
| `--pagination-active-border` | `1px solid #18181b` | border | Border style of the currently active page button. |
|
|
67
|
+
| `--pagination-active-font-weight` | `600` | font-weight | Font weight of the currently active page button label. |
|
|
68
|
+
|
|
69
|
+
### Hover State
|
|
70
|
+
|
|
71
|
+
| Variable | Default | CSS Property | Description |
|
|
72
|
+
| -------------------------------------- | --------- | ------------ | --------------------------------------------------------------------- |
|
|
73
|
+
| `--pagination-button-hover-color` | `currentColor` | color | Text color of page buttons on hover (non-active, non-disabled). |
|
|
74
|
+
| `--pagination-button-hover-background` | `transparent` | background | Background color of page buttons on hover (non-active, non-disabled). |
|
|
75
|
+
|
|
76
|
+
### Disabled State
|
|
77
|
+
|
|
78
|
+
| Variable | Default | CSS Property | Description |
|
|
79
|
+
| ------------------------------- | ------------- | ------------ | ---------------------------------------------------------------------------------------------- |
|
|
80
|
+
| `--pagination-disabled-opacity` | `0.5` | opacity | Opacity applied to the pagination container when disabled, and to individual disabled buttons. |
|
|
81
|
+
| `--pagination-disabled-cursor` | `not-allowed` | cursor | Cursor shown on the pagination container when disabled, and on individual disabled buttons. |
|
|
82
|
+
|
|
83
|
+
### Ellipsis
|
|
84
|
+
|
|
85
|
+
| Variable | Default | CSS Property | Description |
|
|
86
|
+
| --------------------------------- | --------- | ------------ | --------------------------------------------------------- |
|
|
87
|
+
| `--pagination-ellipsis-color` | `currentColor` | color | Text color of the ellipsis indicator between page ranges. |
|
|
88
|
+
| `--pagination-ellipsis-font-size` | `14px` | font-size | Font size of the ellipsis indicator. |
|
|
89
|
+
|
|
90
|
+
### Transition
|
|
91
|
+
|
|
92
|
+
| Variable | Default | CSS Property | Description |
|
|
93
|
+
| ------------------------- | ----------------------------------------- | ------------ | ------------------------------------------------------------------ |
|
|
94
|
+
| `--pagination-transition` | `background 0.15s ease, color 0.15s ease` | transition | Transition applied to page buttons for hover/active state changes. |
|
|
95
|
+
|
|
96
|
+
## Web Component
|
|
97
|
+
|
|
98
|
+
Tag: `<pui-pagination>`
|
|
99
|
+
|
|
100
|
+
```html
|
|
101
|
+
<pui-pagination total-pages="10" current-page="1"></pui-pagination>
|
|
102
|
+
```
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
# Phone
|
|
2
|
+
|
|
3
|
+
A realistic phone device frame that wraps any content to showcase mobile UIs, app screenshots, or responsive designs. Supports modern (notch/dynamic island) and classic (home button) variants with decorative side buttons, status bar, and home indicator. Scale and rotation are controlled via `--phone-scale` and `--phone-rotation` CSS custom properties.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```svelte
|
|
8
|
+
<script>
|
|
9
|
+
import { Phone } from 'polymorph-ui-components';
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<Phone>
|
|
13
|
+
<div>Your mobile content here</div>
|
|
14
|
+
</Phone>
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Props
|
|
18
|
+
|
|
19
|
+
| Prop | Type | Required | Default | Description |
|
|
20
|
+
| ------------- | ----------------------- | -------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
21
|
+
| variant | `'modern' \| 'classic'` | No | `'modern'` | The phone style. 'modern' renders a notch/dynamic island at the top (iPhone-style). 'classic' renders a home button at the bottom. |
|
|
22
|
+
| showStatusBar | `boolean` | No | `true` | Whether to show a simplified status bar at the top of the screen with time, signal, and battery indicators. |
|
|
23
|
+
| showHomeBar | `boolean` | No | `true` | Whether to show the bottom home indicator bar. Only visible when variant is 'modern'. |
|
|
24
|
+
| testId | `string` | No | `-` | Value for the data-pw attribute, used for end-to-end testing selectors. |
|
|
25
|
+
| 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
|
+
## Snippets
|
|
28
|
+
|
|
29
|
+
Svelte 5 Snippet props — pass content blocks to the component.
|
|
30
|
+
|
|
31
|
+
| Snippet | Type | Description |
|
|
32
|
+
| -------- | --------- | -------------------------------------------------------------------------------------------- |
|
|
33
|
+
| children | `Snippet` | The screen content rendered inside the phone display area. Fills the available screen space. |
|
|
34
|
+
|
|
35
|
+
## CSS Variables
|
|
36
|
+
|
|
37
|
+
Override these custom properties to theme the component.
|
|
38
|
+
|
|
39
|
+
| Variable | Default | CSS Property | Description |
|
|
40
|
+
| ---------------------------------- | -------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------- |
|
|
41
|
+
| `--phone-scale` | `1` | transform | Uniform scale factor for the entire phone wrapper. |
|
|
42
|
+
| `--phone-rotation` | `0deg` | rotate | Rotation angle applied to the phone wrapper. |
|
|
43
|
+
| `--phone-frame-width` | `375px` | width | Base width of the phone frame in portrait mode. |
|
|
44
|
+
| `--phone-frame-border-radius` | `50px` | border-radius | Corner rounding of the outer phone frame. |
|
|
45
|
+
| `--phone-frame-padding` | `12px` | padding | Thickness of the bezel (space between frame edge and screen). |
|
|
46
|
+
| `--phone-frame-shadow` | `0 20px 60px rgba(0,0,0,0.3), 0 0 0 1px rgba(0,0,0,0.1)` | box-shadow | Drop shadow around the device frame. |
|
|
47
|
+
| `--phone-screen-border-radius` | `38px` | border-radius | Corner rounding of the inner screen area. |
|
|
48
|
+
| `--phone-screen-background` | `#18181b` | background | Background color of the screen area (visible when no content fills the screen). |
|
|
49
|
+
| `--phone-screen-aspect-ratio` | `9/19.5` (modern) or `9/16` (classic) | aspect-ratio | Aspect ratio of the screen area. Defaults depend on the variant. |
|
|
50
|
+
| `--phone-status-bar-height` | `44px` | height | Height of the status bar at the top of the screen. |
|
|
51
|
+
| `--phone-status-bar-color` | `#ffffff` | color | Text/icon color used in the status bar. |
|
|
52
|
+
| `--phone-status-bar-font-size` | `14px` | font-size | Font size of status bar text (time display). |
|
|
53
|
+
| `--phone-status-bar-background` | `transparent` | background | Background color of the status bar. |
|
|
54
|
+
| `--phone-notch-width` | `120px` | width | Width of the notch/dynamic island element (modern variant only). |
|
|
55
|
+
| `--phone-notch-height` | `32px` | height | Height of the notch/dynamic island element (modern variant only). |
|
|
56
|
+
| `--phone-notch-border-radius` | `20px` | border-radius | Corner rounding of the notch/dynamic island (modern variant only). |
|
|
57
|
+
| `--phone-notch-background` | `var(--phone-frame-color, #18181b)` | background | Background color of the notch/dynamic island (modern variant only). |
|
|
58
|
+
| `--phone-home-bar-width` | `134px` | width | Width of the bottom home indicator bar (modern variant only). |
|
|
59
|
+
| `--phone-home-bar-height` | `5px` | height | Height of the bottom home indicator bar (modern variant only). |
|
|
60
|
+
| `--phone-home-bar-color` | `currentColor` | background | Color of the home indicator bar (modern variant only). |
|
|
61
|
+
| `--phone-home-bar-radius` | `3px` | border-radius | Corner rounding of the home indicator bar (modern variant only). |
|
|
62
|
+
| `--phone-home-button-size` | `50px` | width, height | Diameter of the classic home button circle (classic variant only). |
|
|
63
|
+
| `--phone-home-button-border-color` | `currentColor` | border-color | Border color of the classic home button circle (classic variant only). |
|
|
64
|
+
| `--phone-side-button-color` | `var(--phone-frame-color, #18181b)` | background | Color of the decorative side buttons (volume and power). |
|
|
65
|
+
| `--phone-frame-color` | `#18181b` | background | Background color of the phone frame/bezel. |
|
|
66
|
+
| `--phone-content-overflow` | `hidden` | overflow | Overflow behavior of the content area inside the screen. |
|
|
67
|
+
|
|
68
|
+
## Web Component
|
|
69
|
+
|
|
70
|
+
Tag: `<pui-phone>`
|
|
71
|
+
|
|
72
|
+
```html
|
|
73
|
+
<pui-phone variant="modern">
|
|
74
|
+
<div>Screen content</div>
|
|
75
|
+
</pui-phone>
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
### Slots
|
|
79
|
+
|
|
80
|
+
| Slot Name | Maps to Snippet | Description |
|
|
81
|
+
| ----------- | --------------- | ----------------------------------------- |
|
|
82
|
+
| _(default)_ | `children` | Content rendered inside the phone screen. |
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
# Pill
|
|
2
|
+
|
|
3
|
+
A small rounded label used for categorization, tagging, or filtering. Supports an optional dismiss button that lets users remove the pill. Text is automatically truncated with an ellipsis when it exceeds the maximum width.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```svelte
|
|
8
|
+
<script>
|
|
9
|
+
import { Pill } from 'polymorph-ui-components';
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<Pill text={'...'} />
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
### Theming with Classes
|
|
16
|
+
|
|
17
|
+
Define variant classes in your app's CSS that set Pill CSS variables, then pass them via the `classes` prop:
|
|
18
|
+
|
|
19
|
+
```css
|
|
20
|
+
/* app.css */
|
|
21
|
+
.pill-success {
|
|
22
|
+
--pill-background: #d4edda;
|
|
23
|
+
--pill-color: #155724;
|
|
24
|
+
--pill-hover-background: #c3e6cb;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.pill-warning {
|
|
28
|
+
--pill-background: #fff3cd;
|
|
29
|
+
--pill-color: #856404;
|
|
30
|
+
--pill-hover-background: #ffeeba;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.pill-error {
|
|
34
|
+
--pill-background: #f8d7da;
|
|
35
|
+
--pill-color: #721c24;
|
|
36
|
+
--pill-hover-background: #f1b0b7;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.pill-info {
|
|
40
|
+
--pill-background: #d1ecf1;
|
|
41
|
+
--pill-color: #0c5460;
|
|
42
|
+
--pill-hover-background: #bee5eb;
|
|
43
|
+
}
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
```svelte
|
|
47
|
+
<Pill text="Active" classes="pill-success" />
|
|
48
|
+
<Pill text="Pending" classes="pill-warning" />
|
|
49
|
+
<Pill text="Failed" classes="pill-error" />
|
|
50
|
+
<Pill text="New" classes="pill-info" />
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
## Props
|
|
54
|
+
|
|
55
|
+
| Prop | Type | Required | Default | Description |
|
|
56
|
+
| ----------- | --------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
57
|
+
| text | `string` | Yes | `-` | The label text displayed inside the pill. Long text is truncated with an ellipsis when it exceeds the maximum width. |
|
|
58
|
+
| dismissible | `boolean` | No | `false` | When true, shows a small X button after the text that triggers the ondismiss event when clicked. |
|
|
59
|
+
| disabled | `boolean` | No | `false` | When true, the pill appears dimmed (opacity 0.4), shows a not-allowed cursor, and ignores all click and dismiss interactions. |
|
|
60
|
+
| testId | `string` | No | `-` | Value for the data-pw attribute, used for end-to-end testing selectors. The dismiss button receives `{testId}-dismiss`. |
|
|
61
|
+
| 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. |
|
|
62
|
+
|
|
63
|
+
## Snippets
|
|
64
|
+
|
|
65
|
+
Svelte 5 Snippet props — pass content blocks to the component.
|
|
66
|
+
|
|
67
|
+
| Snippet | Type | Description |
|
|
68
|
+
| ----------- | --------- | ----------------------------------------- |
|
|
69
|
+
| dismissIcon | `Snippet` | Custom icon for the dismiss/close button. |
|
|
70
|
+
|
|
71
|
+
## Events
|
|
72
|
+
|
|
73
|
+
| Event | Type | Description |
|
|
74
|
+
| --------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
75
|
+
| onclick | `(event: MouseEvent) => void` | Fires when the pill body is clicked. Does NOT fire when the pill is disabled. |
|
|
76
|
+
| ondismiss | `() => void` | Fires when the dismiss button (X) is clicked. Only available when dismissible is true. Does NOT fire when the pill is disabled. The click event does not propagate to the pill body. |
|
|
77
|
+
|
|
78
|
+
## CSS Variables
|
|
79
|
+
|
|
80
|
+
Override these custom properties to theme the component.
|
|
81
|
+
|
|
82
|
+
| Variable | Default | CSS Property | Description |
|
|
83
|
+
| ---------------------------- | ----------------------------------------- | ---------------- | ------------------------------------------------------------------------- |
|
|
84
|
+
| `--pill-background` | `#e4e4e7` | background-color | Background color of the pill. |
|
|
85
|
+
| `--pill-color` | `currentColor` | color | Text color of the pill label. |
|
|
86
|
+
| `--pill-font-size` | `14px` | font-size | Font size of the pill text. |
|
|
87
|
+
| `--pill-font-weight` | `500` | font-weight | Font weight of the pill text. |
|
|
88
|
+
| `--pill-font-family` | `-` | font-family | Font family of the pill text. |
|
|
89
|
+
| `--pill-padding` | `6px 10px` | padding | Inner padding of the pill. |
|
|
90
|
+
| `--pill-border-radius` | `999px` | border-radius | Corner rounding of the pill (999px creates a fully rounded shape). |
|
|
91
|
+
| `--pill-border` | `none` | border | Border style of the pill. |
|
|
92
|
+
| `--pill-gap` | `4px` | gap | Spacing between the text and the dismiss button. |
|
|
93
|
+
| `--pill-cursor` | `pointer` | cursor | Cursor style when hovering over the pill. |
|
|
94
|
+
| `--pill-max-width` | `-` | max-width | Maximum width of the pill. Text is truncated with ellipsis when exceeded. |
|
|
95
|
+
| `--pill-text-overflow` | `ellipsis` | text-overflow | How overflowing text is displayed (e.g., ellipsis or clip). |
|
|
96
|
+
| `--pill-hover-background` | `var(--pill-background, #e4e4e7)` | background-color | Background color when hovering over the pill. |
|
|
97
|
+
| `--pill-hover-color` | `var(--pill-color, currentColor)` | color | Text color when hovering over the pill. |
|
|
98
|
+
| `--pill-disabled-opacity` | `0.4` | opacity | Opacity of the pill when disabled. |
|
|
99
|
+
| `--pill-disabled-cursor` | `not-allowed` | cursor | Cursor style when the pill is disabled. |
|
|
100
|
+
| `--pill-dismiss-size` | `14px` | width, height | Size of the dismiss button icon (X). |
|
|
101
|
+
| `--pill-dismiss-color` | `currentColor` | color | Color of the dismiss button icon. |
|
|
102
|
+
| `--pill-dismiss-hover-color` | `var(--pill-dismiss-color, currentColor)` | color | Color of the dismiss button icon on hover. |
|
|
103
|
+
|
|
104
|
+
## Internal Dependencies
|
|
105
|
+
|
|
106
|
+
This component uses the following library components internally:
|
|
107
|
+
|
|
108
|
+
- Button (for the dismiss action)
|
|
109
|
+
|
|
110
|
+
## Web Component
|
|
111
|
+
|
|
112
|
+
Tag: `<pui-pill>`
|
|
113
|
+
|
|
114
|
+
```html
|
|
115
|
+
<pui-pill text="Active" dismissible></pui-pill>
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
### Slots
|
|
119
|
+
|
|
120
|
+
| Slot Name | Maps to Snippet | Description |
|
|
121
|
+
| -------------- | --------------- | ----------------------------------------- |
|
|
122
|
+
| `dismiss-icon` | `dismissIcon` | Custom icon for the dismiss/close button. |
|