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,154 @@
|
|
|
1
|
+
# Button
|
|
2
|
+
|
|
3
|
+
An action button that supports two loader modes: a circular spinner overlay or a horizontal progress bar that fills over time. The button text supports HTML content. When `showLoader` is true with `loaderType='ProgressBar'`, clicking the button triggers a progress bar animation and prevents further clicks until complete. Includes icon and children snippet support for rendering custom content.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```svelte
|
|
8
|
+
<script>
|
|
9
|
+
import { Button } from 'polymorph-ui-components';
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<Button text="Submit" onclick={(e) => console.log('clicked', e)} />
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
### With Icon
|
|
16
|
+
|
|
17
|
+
```svelte
|
|
18
|
+
<Button text="Download" onclick={handleDownload}>
|
|
19
|
+
{#snippet icon()}
|
|
20
|
+
<svg>...</svg>
|
|
21
|
+
{/snippet}
|
|
22
|
+
</Button>
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
### With Children (Custom Content)
|
|
26
|
+
|
|
27
|
+
```svelte
|
|
28
|
+
<Button onclick={handleClick}>
|
|
29
|
+
{#snippet children()}
|
|
30
|
+
<span>Custom content with <strong>formatting</strong></span>
|
|
31
|
+
{/snippet}
|
|
32
|
+
</Button>
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Props
|
|
36
|
+
|
|
37
|
+
| Prop | Type | Required | Default | Description |
|
|
38
|
+
| --------------- | --------------------------------- | -------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
39
|
+
| text | `string` | No | `-` | The button label text. Supports HTML content (rendered via `{@html}`). |
|
|
40
|
+
| enable | `boolean` | No | `true` | Whether the button is clickable. When false, the button appears dimmed and ignores clicks. Equivalent to the inverse of `disabled`. |
|
|
41
|
+
| disabled | `boolean` | No | `false` | Whether the button is disabled. When true, the button appears dimmed (opacity 0.4) and ignores clicks. Takes effect alongside `enable` — either being falsy disables the button. |
|
|
42
|
+
| showProgressBar | `boolean` | No | `false` | Bindable. When true, a horizontal progress bar overlay animates across the button. Set automatically when `showLoader=true` and `loaderType='ProgressBar'` after first click. |
|
|
43
|
+
| showLoader | `boolean` | No | `false` | Whether to show a loading indicator. Combined with `loaderType` to determine the visual style. |
|
|
44
|
+
| loaderType | `'Circular' \| 'ProgressBar'` | No | `-` | The type of loader to display when `showLoader` is true. `'Circular'` shows a spinning ring inside the button; `'ProgressBar'` shows a horizontal fill animation across the button. |
|
|
45
|
+
| type | `'submit' \| 'reset' \| 'button'` | No | `'button'` | The HTML button `type` attribute. |
|
|
46
|
+
| testId | `string` | No | `-` | Value for the `data-pw` attribute, used for end-to-end testing selectors. |
|
|
47
|
+
| ariaLabel | `string` | No | `-` | Accessible label for the button. Used when the button has only an icon and no visible text. |
|
|
48
|
+
| ariaExpanded | `boolean` | No | `-` | Sets `aria-expanded` on the button element. Use when the button controls an expandable region (dropdown, accordion, etc.). |
|
|
49
|
+
| ariaSelected | `boolean` | No | `-` | Sets `aria-selected` on the button element. Use when the button represents a selectable option (e.g., inside an autocomplete dropdown or tab-like pattern). |
|
|
50
|
+
| role | `string` | No | `-` | Overrides the default ARIA role of the button element. Use `'option'` when the button represents a selectable item in a listbox pattern, or `'tab'` for tab-like navigation. |
|
|
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
|
+
## Snippets
|
|
54
|
+
|
|
55
|
+
Svelte 5 Snippet props — pass content blocks to the component.
|
|
56
|
+
|
|
57
|
+
| Snippet | Type | Description |
|
|
58
|
+
| -------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
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
|
+
| 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
|
+
|
|
62
|
+
## Events
|
|
63
|
+
|
|
64
|
+
| Event | Type | Description |
|
|
65
|
+
| ------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
|
|
66
|
+
| onclick | `(event: MouseEvent) => void` | Fires when the button is clicked. Does NOT fire when `showProgressBar` is active (clicks are silently ignored during progress). |
|
|
67
|
+
| onkeyup | `(event: KeyboardEvent) => void` | Fires when a key is released while the button has focus. Defaults to a no-op `() => {}` (always fires, unlike other events which default to undefined). |
|
|
68
|
+
|
|
69
|
+
## CSS Variables
|
|
70
|
+
|
|
71
|
+
Override these custom properties to theme the component.
|
|
72
|
+
|
|
73
|
+
| Variable | Default | CSS Property | Description |
|
|
74
|
+
| ------------------------------------------- | ------------------------------ | ------------------ | --------------------------------------------------------------------------------------------------------- |
|
|
75
|
+
| `--button-width` | `fit-content` | width | Width of the button container and button element. |
|
|
76
|
+
| `--button-max-height` | `-` | max-height | Maximum height of the button. |
|
|
77
|
+
| `--button-max-width` | `-` | max-width | Maximum width of the button. |
|
|
78
|
+
| `--button-font-family` | `-` | font-family | Font family for the button text. |
|
|
79
|
+
| `--button-font-weight` | `500` | font-weight | Font weight of the button text. |
|
|
80
|
+
| `--button-font-size` | `14px` | font-size | Font size of the button text. |
|
|
81
|
+
| `--button-color` | `#18181b` | background-color | **Background color** of the button (note: name is misleading — this controls background, not text color). |
|
|
82
|
+
| `--button-text-color` | `#ffffff` | color | Text/icon color of the button label. |
|
|
83
|
+
| `--button-height` | `fit-content` | height | Height of the button. |
|
|
84
|
+
| `--button-padding` | `16px` | padding | Inner padding of the button. |
|
|
85
|
+
| `--button-margin` | `-` | margin | Outer margin of the button. |
|
|
86
|
+
| `--button-border-radius` | `6px` | border-radius | Corner rounding of the button. |
|
|
87
|
+
| `--button-cursor` | `pointer` | cursor | Cursor style on hover. |
|
|
88
|
+
| `--button-opacity` | `1` | opacity | Opacity of the button. |
|
|
89
|
+
| `--button-border` | `none` | border | Border style of the button. |
|
|
90
|
+
| `--button-justify-content` | `center` | justify-content | Horizontal alignment of content inside the button (flex justify-content). |
|
|
91
|
+
| `--button-content-flex-direction` | `row` | flex-direction | Layout direction of icon/text inside the button (row or column). |
|
|
92
|
+
| `--button-content-gap` | `16px` | gap | Gap between icon and text inside the button. |
|
|
93
|
+
| `--button-visibility` | `visible` | visibility | Controls button visibility (visible/hidden). |
|
|
94
|
+
| `--button-box-shadow` | `none` | box-shadow | Box shadow of the button. |
|
|
95
|
+
| `--button-disabled-cursor` | `not-allowed` | cursor | Cursor shown when the button is disabled. |
|
|
96
|
+
| `--button-disabled-opacity` | `0.4` | opacity | Opacity when the button is disabled. |
|
|
97
|
+
| `--button-disabled-text-color` | `-` | color | Text color when the button is disabled. |
|
|
98
|
+
| `--button-disabled-font-size` | `-` | font-size | Font size when the button is disabled. |
|
|
99
|
+
| `--button-disabled-font-weight` | `-` | font-weight | Font weight when the button is disabled. |
|
|
100
|
+
| `--button-disabled-border` | `-` | border | Border when the button is disabled. |
|
|
101
|
+
| `--button-disabled-background-color` | `-` | background | Background color when the button is disabled. |
|
|
102
|
+
| `--button-loader-order` | `1` | order | Flex order of the circular loader relative to icon/text. |
|
|
103
|
+
| `--button-icon-order` | `2` | order | Flex order of the icon relative to loader/text. |
|
|
104
|
+
| `--button-icon-display` | `-` | display | Display property of the icon container. |
|
|
105
|
+
| `--button-text-order` | `3` | order | Flex order of the text relative to loader/icon. |
|
|
106
|
+
| `--button-text-display` | `-` | display | Display property of the text container. |
|
|
107
|
+
| `--button-hover-color` | inherits `--button-color` | background | Background color on hover. |
|
|
108
|
+
| `--button-hover-text-color` | inherits `--button-text-color` | color | Text color on hover. |
|
|
109
|
+
| `--button-hover-border` | inherits `--button-border` | border | Border style on hover. |
|
|
110
|
+
| `--button-hover-transform` | `-` | transform | CSS transform applied on hover (e.g., `scale(1.05)`). Allows hover scale effects without `:global()`. |
|
|
111
|
+
| `--button-active-transform` | `-` | transform | CSS transform applied on active/pressed state (e.g., `scale(0.95)`). Allows press-down effects without `:global()`. |
|
|
112
|
+
| `--button-progress-loader-background-color` | `#00000030` | background | Background color of the progress bar overlay. |
|
|
113
|
+
| `--button-progress-loader-duration` | `8s` | animation-duration | Duration of the progress bar fill animation. |
|
|
114
|
+
|
|
115
|
+
## Type Reference
|
|
116
|
+
|
|
117
|
+
Custom types used by this component's props and events:
|
|
118
|
+
|
|
119
|
+
### LoaderType
|
|
120
|
+
|
|
121
|
+
```typescript
|
|
122
|
+
type LoaderType = 'Circular' | 'ProgressBar';
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
## Internal Dependencies
|
|
126
|
+
|
|
127
|
+
This component uses the following library components internally:
|
|
128
|
+
|
|
129
|
+
- Loader (for the circular spinner mode)
|
|
130
|
+
|
|
131
|
+
## Web Component
|
|
132
|
+
|
|
133
|
+
Tag: `<pui-button>`
|
|
134
|
+
|
|
135
|
+
```html
|
|
136
|
+
<pui-button text="Submit"></pui-button>
|
|
137
|
+
|
|
138
|
+
<!-- With icon slot -->
|
|
139
|
+
<pui-button text="Download">
|
|
140
|
+
<svg slot="icon">...</svg>
|
|
141
|
+
</pui-button>
|
|
142
|
+
|
|
143
|
+
<!-- With custom content -->
|
|
144
|
+
<pui-button>
|
|
145
|
+
<span>Custom <strong>content</strong></span>
|
|
146
|
+
</pui-button>
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
### Slots
|
|
150
|
+
|
|
151
|
+
| Slot Name | Maps to Snippet | Description |
|
|
152
|
+
| ----------- | --------------- | ------------------------------------------------------------ |
|
|
153
|
+
| _(default)_ | `children` | Custom content rendered inside the button (replaces `text`). |
|
|
154
|
+
| `icon` | `icon` | Icon content rendered next to the button text. |
|
|
File without changes
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
# Calendar
|
|
2
|
+
|
|
3
|
+
A date or date-range picker that displays a monthly calendar grid with navigation and selection. Supports single-date and range selection modes, min/max date constraints, disabled dates, locale-aware formatting via Intl.DateTimeFormat, configurable week start day, keyboard navigation (Arrow keys to move focus, Enter to select), and full CSS theming.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```svelte
|
|
8
|
+
<script>
|
|
9
|
+
import { Calendar } from 'polymorph-ui-components';
|
|
10
|
+
|
|
11
|
+
let selectedDate = $state(null);
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<Calendar bind:value={selectedDate} />
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
### Range Selection
|
|
18
|
+
|
|
19
|
+
```svelte
|
|
20
|
+
<script>
|
|
21
|
+
import { Calendar } from 'polymorph-ui-components';
|
|
22
|
+
|
|
23
|
+
let rangeStart = $state(null);
|
|
24
|
+
let rangeEnd = $state(null);
|
|
25
|
+
</script>
|
|
26
|
+
|
|
27
|
+
<Calendar mode="range" bind:rangeStart bind:rangeEnd />
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## Props
|
|
31
|
+
|
|
32
|
+
| Prop | Type | Required | Default | Description |
|
|
33
|
+
| ------------- | ------------------------------------- | -------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
34
|
+
| value | `Date \| null` | No | `null` | Bindable. The currently selected date in single selection mode. Set to null to clear the selection. |
|
|
35
|
+
| rangeStart | `Date \| null` | No | `null` | Bindable. The start date of a range selection. Only used when mode is 'range'. |
|
|
36
|
+
| rangeEnd | `Date \| null` | No | `null` | Bindable. The end date of a range selection. Only used when mode is 'range'. |
|
|
37
|
+
| mode | `'single' \| 'range'` | No | `'single'` | Selection mode. 'single' allows picking one date, 'range' allows picking a start and end date. |
|
|
38
|
+
| minDate | `Date \| null` | No | `null` | The earliest selectable date. Dates before this are visually dimmed and cannot be clicked. |
|
|
39
|
+
| maxDate | `Date \| null` | No | `null` | The latest selectable date. Dates after this are visually dimmed and cannot be clicked. |
|
|
40
|
+
| disabledDates | `Date[] \| ((date: Date) => boolean)` | No | `[]` | Dates that cannot be selected. Pass an array of specific Date objects or a function that returns true for dates that should be disabled. |
|
|
41
|
+
| weekStartsOn | `0 \| 1` | No | `0` | Which day starts the week. 0 = Sunday, 1 = Monday. Affects the day names header and grid layout. |
|
|
42
|
+
| locale | `string` | No | `undefined` | BCP 47 locale string for formatting month/year header and day names (e.g., 'en-US', 'de-DE'). Defaults to the browser's locale when undefined. |
|
|
43
|
+
| testId | `string` | No | `undefined` | Value for the data-pw attribute on the root element, used for end-to-end testing selectors. |
|
|
44
|
+
| 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. |
|
|
45
|
+
|
|
46
|
+
## Snippets
|
|
47
|
+
|
|
48
|
+
Svelte 5 Snippet props — pass content blocks to the component.
|
|
49
|
+
|
|
50
|
+
| Snippet | Type | Description |
|
|
51
|
+
| ----------------- | --------- | --------------------------------------------------------------------------------------------------- |
|
|
52
|
+
| previousMonthIcon | `Snippet` | Custom content rendered inside the previous-month navigation button, replacing the default chevron. |
|
|
53
|
+
| nextMonthIcon | `Snippet` | Custom content rendered inside the next-month navigation button, replacing the default chevron. |
|
|
54
|
+
|
|
55
|
+
## Events
|
|
56
|
+
|
|
57
|
+
| Event | Type | Description |
|
|
58
|
+
| ------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
|
|
59
|
+
| onselect | `(event: { date: Date }) => void` | Fires when a date is selected in single mode, providing the chosen date. |
|
|
60
|
+
| onrangeselect | `(event: { rangeStart: Date; rangeEnd: Date }) => void` | Fires when a complete range is selected (both start and end dates are set) in range mode. |
|
|
61
|
+
| onmonthchange | `(event: { year: number; month: number }) => void` | Fires when the displayed month changes via navigation arrows, providing the new year and zero-indexed month. |
|
|
62
|
+
|
|
63
|
+
## CSS Variables
|
|
64
|
+
|
|
65
|
+
Override these custom properties to theme the component.
|
|
66
|
+
|
|
67
|
+
| Variable | Default | CSS Property | Description |
|
|
68
|
+
| ---------------------------------------- | ------------------- | ---------------- | --------------------------------------------------------------------------------------- |
|
|
69
|
+
| `--calendar-font-family` | `inherit` | font-family | Font family for the entire calendar. |
|
|
70
|
+
| `--calendar-width` | `280px` | width | Width of the calendar container. |
|
|
71
|
+
| `--calendar-padding` | `16px` | padding | Inner padding of the calendar container. |
|
|
72
|
+
| `--calendar-background` | `#ffffff` | background-color | Background color of the calendar container. |
|
|
73
|
+
| `--calendar-border` | `1px solid currentColor` | border | Border of the calendar container. |
|
|
74
|
+
| `--calendar-border-radius` | `8px` | border-radius | Corner rounding of the calendar container. |
|
|
75
|
+
| `--calendar-box-shadow` | `none` | box-shadow | Box shadow of the calendar container. |
|
|
76
|
+
| `--calendar-header-margin-bottom` | `12px` | margin-bottom | Space below the navigation header row. |
|
|
77
|
+
| `--calendar-header-font-size` | `16px` | font-size | Font size of the month/year label in the header. |
|
|
78
|
+
| `--calendar-header-font-weight` | `600` | font-weight | Font weight of the month/year label. |
|
|
79
|
+
| `--calendar-header-color` | `#18181b` | color | Text color of the month/year label. |
|
|
80
|
+
| `--calendar-nav-button-size` | `32px` | width, height | Size of the previous/next navigation arrow buttons. |
|
|
81
|
+
| `--calendar-nav-button-border-radius` | `6px` | border-radius | Corner rounding of the navigation arrow buttons. |
|
|
82
|
+
| `--calendar-nav-button-color` | `currentColor` | color | Color of the navigation arrow SVG icons. |
|
|
83
|
+
| `--calendar-nav-button-hover-background` | `transparent` | background-color | Background color of the navigation arrows on hover. |
|
|
84
|
+
| `--calendar-day-name-font-size` | `12px` | font-size | Font size of the day-of-week header labels (Sun, Mon, etc.). |
|
|
85
|
+
| `--calendar-day-name-font-weight` | `600` | font-weight | Font weight of the day-of-week header labels. |
|
|
86
|
+
| `--calendar-day-name-color` | `currentColor` | color | Text color of the day-of-week header labels. |
|
|
87
|
+
| `--calendar-day-name-padding` | `4px 0` | padding | Padding of each day-of-week header cell. |
|
|
88
|
+
| `--calendar-cell-size` | `36px` | width, height | Size of each day number cell in the grid. |
|
|
89
|
+
| `--calendar-cell-font-size` | `14px` | font-size | Font size of the day numbers. |
|
|
90
|
+
| `--calendar-cell-border-radius` | `50%` | border-radius | Corner rounding of day cells. Use 50% for circles, a smaller value for rounded squares. |
|
|
91
|
+
| `--calendar-cell-color` | `#18181b` | color | Text color of selectable day numbers. |
|
|
92
|
+
| `--calendar-cell-hover-background` | `transparent` | background-color | Background color of day cells on hover. |
|
|
93
|
+
| `--calendar-focus-ring-color` | `#18181b` | outline-color | Color of the focus ring shown on day cells when focused via keyboard. |
|
|
94
|
+
| `--calendar-today-border` | `1px solid #18181b` | border | Border applied to today's date cell to distinguish it. |
|
|
95
|
+
| `--calendar-today-font-weight` | `700` | font-weight | Font weight of today's date number. |
|
|
96
|
+
| `--calendar-selected-background` | `#18181b` | background-color | Background color of the selected date cell. |
|
|
97
|
+
| `--calendar-selected-color` | `#ffffff` | color | Text color of the selected date cell. |
|
|
98
|
+
| `--calendar-range-background` | `#f4f4f5` | background-color | Background tint of cells between range start and end dates. |
|
|
99
|
+
| `--calendar-range-color` | `#18181b` | color | Text color of cells between range start and end dates. |
|
|
100
|
+
| `--calendar-range-start-background` | `#18181b` | background-color | Background color of the range start date cell. |
|
|
101
|
+
| `--calendar-range-end-background` | `#18181b` | background-color | Background color of the range end date cell. |
|
|
102
|
+
| `--calendar-range-start-color` | `#ffffff` | color | Text color of the range start date cell. |
|
|
103
|
+
| `--calendar-range-end-color` | `#ffffff` | color | Text color of the range end date cell. |
|
|
104
|
+
| `--calendar-disabled-color` | `#a1a1aa` | color | Text color of disabled and out-of-range day numbers. |
|
|
105
|
+
| `--calendar-disabled-cursor` | `not-allowed` | cursor | Cursor shown when hovering over disabled day cells. |
|
|
106
|
+
| `--calendar-outside-month-color` | `#a1a1aa` | color | Text color of day numbers that belong to the previous or next month. |
|
|
107
|
+
|
|
108
|
+
## Internal Dependencies
|
|
109
|
+
|
|
110
|
+
This component uses the following library components internally:
|
|
111
|
+
|
|
112
|
+
- Button (for month navigation controls)
|
|
113
|
+
|
|
114
|
+
## Web Component
|
|
115
|
+
|
|
116
|
+
Tag: `<pui-calendar>`
|
|
117
|
+
|
|
118
|
+
```html
|
|
119
|
+
<pui-calendar mode="single" locale="en-US"></pui-calendar>
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
### Slots
|
|
123
|
+
|
|
124
|
+
| Slot Name | Maps to Snippet | Description |
|
|
125
|
+
| --------------------- | ------------------- | ------------------------------------------ |
|
|
126
|
+
| `previous-month-icon` | `previousMonthIcon` | Custom icon for the previous month button. |
|
|
127
|
+
| `next-month-icon` | `nextMonthIcon` | Custom icon for the next month button. |
|
|
128
|
+
|
|
129
|
+
> **Note:** `value`, `rangeStart`, `rangeEnd`, `minDate`, `maxDate`, and `disabledDates` are object props — set them via JavaScript properties.
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
# Carousel
|
|
2
|
+
|
|
3
|
+
An auto-playing slideshow that renders Svelte components as slides. Supports touch swipe (20px threshold) and mouse drag for navigation. Each slide is a `CarouselView` object containing a Svelte Component reference and optional properties. Shows optional dot indicators below the slides for direct navigation. The carousel width is read from the `--carousel-width` CSS variable at mount time.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```svelte
|
|
8
|
+
<script>
|
|
9
|
+
import { Carousel } from 'polymorph-ui-components';
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<Carousel
|
|
13
|
+
views={/* CarouselView[] */}
|
|
14
|
+
/>
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Props
|
|
18
|
+
|
|
19
|
+
| Prop | Type | Required | Default | Description |
|
|
20
|
+
| ---------------- | ---------------- | -------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
21
|
+
| views | `CarouselView[]` | Yes | `-` | Array of CarouselView objects. Each contains a Svelte Component reference and optional properties to pass to it. |
|
|
22
|
+
| autoplay | `boolean` | No | `false` | When true, the carousel automatically advances to the next slide at the autoplayInterval rate. |
|
|
23
|
+
| autoplayInterval | `number` | No | `1000` | Time in milliseconds between automatic slide transitions. Only used when autoplay is true. |
|
|
24
|
+
| showDots | `boolean` | No | `false` | When true, shows dot indicators below the carousel for direct slide navigation. |
|
|
25
|
+
| isScrollableLast | `boolean` | No | `false` | When true, allows scrolling past the last slide (wrapping to the first) and before the first slide (wrapping to the last). |
|
|
26
|
+
| testId | `string` | No | `-` | Test selector value applied as `data-pw` on the outermost element. |
|
|
27
|
+
| 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. |
|
|
28
|
+
|
|
29
|
+
## Events
|
|
30
|
+
|
|
31
|
+
| Event | Type | Description |
|
|
32
|
+
| --------- | -------------------------------- | ------------------------------------------------------------ |
|
|
33
|
+
| onkeydown | `(event: KeyboardEvent) => void` | Fires when a key is pressed while a dot indicator has focus. |
|
|
34
|
+
|
|
35
|
+
## CSS Variables
|
|
36
|
+
|
|
37
|
+
Override these custom properties to theme the component.
|
|
38
|
+
|
|
39
|
+
| Variable | Default | CSS Property | Description |
|
|
40
|
+
| -------------------------- | ------- | ------------- | -------------------------------------------------------------------------------- |
|
|
41
|
+
| `--carousel-width` | `300px` | width | Width of the carousel container. Read by JS at mount time for slide positioning. Note: `.carousel-container` uses this variable without a fallback; inner elements fall back to `300px`. |
|
|
42
|
+
| `--carousel-height` | `100px` | height | Height of the carousel slides. |
|
|
43
|
+
| `--carousel-shadow` | `-` | box-shadow | Box shadow of the carousel container. |
|
|
44
|
+
| `--carousel-border-radius` | `0%` | border-radius | Corner rounding of the carousel container. |
|
|
45
|
+
| `--carousel-dot-gap` | `10px` | gap | Gap between dot indicators. |
|
|
46
|
+
| `--carousel-dot-padding-top` | `10px` | padding-top | Top padding above the dot indicators. |
|
|
47
|
+
| `--carousel-dot-width` | `5px` | width | Width of each dot indicator. |
|
|
48
|
+
| `--carousel-dot-height` | `5px` | height | Height of each dot indicator. |
|
|
49
|
+
| `--carousel-dot-color` | `currentColor` | background | Background color of inactive dot indicators. |
|
|
50
|
+
| `--carousel-active-dot-color` | `currentColor` | background | Background color of the active dot indicator. |
|
|
51
|
+
|
|
52
|
+
## Type Reference
|
|
53
|
+
|
|
54
|
+
Custom types used by this component's props and events:
|
|
55
|
+
|
|
56
|
+
### CarouselView
|
|
57
|
+
|
|
58
|
+
```typescript
|
|
59
|
+
type CarouselView = {
|
|
60
|
+
properties?: Record<string, unknown>;
|
|
61
|
+
component: Component<Record<string, unknown>>;
|
|
62
|
+
};
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
## Web Component
|
|
66
|
+
|
|
67
|
+
Tag: `<pui-carousel>`
|
|
68
|
+
|
|
69
|
+
```html
|
|
70
|
+
<pui-carousel autoplay show-dots></pui-carousel>
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
> **Note:** The `views` prop is an array — set it via JavaScript property.
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
# CheckListItem
|
|
2
|
+
|
|
3
|
+
A checkbox list item with a text label. When clicked, toggles the `checked` state and fires `onclick` with the new boolean value. Supports a custom `checkboxLabel` snippet to replace the default text display. The checked state is bindable for two-way binding.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```svelte
|
|
8
|
+
<script>
|
|
9
|
+
import { CheckListItem } from 'polymorph-ui-components';
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<CheckListItem text={'...'} />
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Props
|
|
16
|
+
|
|
17
|
+
| Prop | Type | Required | Default | Description |
|
|
18
|
+
| -------- | --------- | -------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
19
|
+
| text | `string` | Yes | `-` | The label text for the checkbox item. |
|
|
20
|
+
| checked | `boolean` | No | `false` | Bindable. The current checked state of the checkbox. |
|
|
21
|
+
| disabled | `boolean` | No | `false` | When true, the checkbox item is non-interactive and visually dimmed. |
|
|
22
|
+
| testId | `string` | No | `undefined` | Value for the `data-pw` attribute used in Playwright test selectors. |
|
|
23
|
+
| 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. |
|
|
24
|
+
|
|
25
|
+
## Snippets
|
|
26
|
+
|
|
27
|
+
Svelte 5 Snippet props — pass content blocks to the component.
|
|
28
|
+
|
|
29
|
+
| Snippet | Type | Description |
|
|
30
|
+
| ------------- | --------- | ---------------------------------------------------------------------------- |
|
|
31
|
+
| checkboxLabel | `Snippet` | A Svelte 5 Snippet that replaces the default text label with custom content. |
|
|
32
|
+
|
|
33
|
+
## Events
|
|
34
|
+
|
|
35
|
+
| Event | Type | Description |
|
|
36
|
+
| ------- | ---------------------------- | ------------------------------------------------------------------------------- |
|
|
37
|
+
| onclick | `(checked: boolean) => void` | Fires after the checkbox state changes. Receives the new boolean checked value. |
|
|
38
|
+
|
|
39
|
+
## CSS Variables
|
|
40
|
+
|
|
41
|
+
Override these custom properties to theme the component.
|
|
42
|
+
|
|
43
|
+
| Variable | Default | CSS Property | Description |
|
|
44
|
+
| --------------------------------------- | -------- | ------------ | -------------------------------------------- |
|
|
45
|
+
| `--check-list-item-display` | `flex` | display | Display mode of the checkbox item container. |
|
|
46
|
+
| `--check-list-item-align-items` | `center` | align-items | Vertical alignment of checkbox and label. |
|
|
47
|
+
| `--check-list-item-width` | `100%` | width | Width of the checkbox item. |
|
|
48
|
+
| `--check-list-item-padding` | `-` | padding | Inner padding of the checkbox item. |
|
|
49
|
+
| `--check-list-item-gap` | `8px` | gap | Gap between the checkbox and the label. |
|
|
50
|
+
| `--check-list-item-disabled-opacity` | `0.4` | opacity | Opacity of the entire item when disabled. |
|
|
51
|
+
| `--check-list-item-text-size` | `14px` | font-size | Font size of the label text. |
|
|
52
|
+
| `--check-list-item-text-color` | `-` | color | Color of the label text when unchecked. |
|
|
53
|
+
| `--check-list-item-checked-text-color` | `-` | color | Color of the label text when checked. |
|
|
54
|
+
| `--check-list-item-checked-font-weight` | `-` | font-weight | Font weight of the label text when checked. |
|
|
55
|
+
|
|
56
|
+
## Internal Dependencies
|
|
57
|
+
|
|
58
|
+
This component uses the following library components internally:
|
|
59
|
+
|
|
60
|
+
- Checkbox (for the checkbox control)
|
|
61
|
+
|
|
62
|
+
## Web Component
|
|
63
|
+
|
|
64
|
+
Tag: `<pui-check-list-item>`
|
|
65
|
+
|
|
66
|
+
```html
|
|
67
|
+
<pui-check-list-item text="Task 1" checked>
|
|
68
|
+
<span slot="checkbox-label">Custom label</span>
|
|
69
|
+
</pui-check-list-item>
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
### Slots
|
|
73
|
+
|
|
74
|
+
| Slot Name | Maps to Snippet | Description |
|
|
75
|
+
| ---------------- | --------------- | -------------------------------------- |
|
|
76
|
+
| `checkbox-label` | `checkboxLabel` | Custom label content for the checkbox. |
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
# Checkbox
|
|
2
|
+
|
|
3
|
+
A customizable checkbox control with optional label text. Supports checked, unchecked, indeterminate, and disabled states. The `checked` prop is bindable and the `onclick` event fires with the new state after toggling. All visual aspects are controlled via CSS custom properties.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```svelte
|
|
8
|
+
<script>
|
|
9
|
+
import { Checkbox } from 'polymorph-ui-components';
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<Checkbox text="Accept terms" />
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Props
|
|
16
|
+
|
|
17
|
+
| Prop | Type | Required | Default | Description |
|
|
18
|
+
| ------------- | --------- | -------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
19
|
+
| text | `string` | Yes | - | Label text displayed next to the checkbox. |
|
|
20
|
+
| checked | `boolean` | No | `false` | The current checked state of the checkbox. Bindable. |
|
|
21
|
+
| disabled | `boolean` | No | `false` | When true, the checkbox is non-interactive and visually dimmed. |
|
|
22
|
+
| indeterminate | `boolean` | No | `false` | Bindable. When true, displays an indeterminate (dash) state instead of a checkmark. Typically used for "select all" patterns where only some children are selected. |
|
|
23
|
+
| testId | `string` | No | `undefined` | Value for the `data-pw` attribute used in Playwright test 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
|
+
## Snippets
|
|
27
|
+
|
|
28
|
+
Svelte 5 Snippet props — pass content blocks to the component.
|
|
29
|
+
|
|
30
|
+
| Snippet | Type | Description |
|
|
31
|
+
| ----------------- | --------- | ----------------------------------------------------------------------------------------------------- |
|
|
32
|
+
| checkedIcon | `Snippet` | Custom icon rendered inside the checkbox when in the checked state. Defaults to a built-in SVG. |
|
|
33
|
+
| indeterminateIcon | `Snippet` | Custom icon rendered inside the checkbox when in the indeterminate state. Defaults to a built-in SVG. |
|
|
34
|
+
|
|
35
|
+
## Events
|
|
36
|
+
|
|
37
|
+
| Event | Type | Description |
|
|
38
|
+
| ------- | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
39
|
+
| onclick | `(checked: boolean) => void` | Fires after the checkbox state changes. Receives the new boolean checked value (true = checked, false = unchecked). Does not fire when the checkbox is disabled. |
|
|
40
|
+
|
|
41
|
+
## CSS Variables
|
|
42
|
+
|
|
43
|
+
Override these custom properties to theme the component.
|
|
44
|
+
|
|
45
|
+
| Variable | Default | CSS Property | Description |
|
|
46
|
+
| ------------------------------------- | ----------------------------------- | ------------------ | --------------------------------------------------------------------- |
|
|
47
|
+
| `--checkbox-container-display` | `inline-flex` | display | Display mode of the checkbox container. |
|
|
48
|
+
| `--checkbox-container-align-items` | `center` | align-items | Vertical alignment of checkbox and label. |
|
|
49
|
+
| `--checkbox-container-gap` | `8px` | gap | Gap between the checkbox and label text. |
|
|
50
|
+
| `--checkbox-container-cursor` | `pointer` | cursor | Cursor when hovering the checkbox container. |
|
|
51
|
+
| `--checkbox-size` | `20px` | width, height | Width and height of the checkbox box. |
|
|
52
|
+
| `--checkbox-border` | `2px solid currentColor` | border | Border of the checkbox box in its unchecked state. |
|
|
53
|
+
| `--checkbox-border-radius` | `6px` | border-radius | Corner rounding of the checkbox box. |
|
|
54
|
+
| `--checkbox-background` | `transparent` | background-color | Background color of the checkbox box when unchecked. |
|
|
55
|
+
| `--checkbox-checked-background` | `currentColor` | background-color | Background color of the checkbox box when checked. |
|
|
56
|
+
| `--checkbox-checked-border` | `2px solid currentColor` | border | Border of the checkbox box when checked. |
|
|
57
|
+
| `--checkbox-indeterminate-background` | `currentColor` | background-color | Background color of the checkbox box when in the indeterminate state. |
|
|
58
|
+
| `--checkbox-indeterminate-border` | `2px solid currentColor` | border | Border of the checkbox box when in the indeterminate state. |
|
|
59
|
+
| `--checkbox-disabled-opacity` | `0.4` | opacity | Opacity of the entire checkbox when disabled. |
|
|
60
|
+
| `--checkbox-disabled-cursor` | `not-allowed` | cursor | Cursor when hovering a disabled checkbox. |
|
|
61
|
+
| `--checkbox-hover-border-color` | `currentColor` | border-color | Border color of the checkbox box on hover (unchecked state only). |
|
|
62
|
+
| `--checkbox-focus-ring` | `0 0 0 3px currentColor` | box-shadow | Focus ring shown when the checkbox receives keyboard focus. |
|
|
63
|
+
| `--checkbox-transition` | `0.2s` | transition | Transition duration for background and border changes. |
|
|
64
|
+
| `--checkbox-checkmark-color` | `white` | color (SVG stroke) | Color of the checkmark icon when checked. |
|
|
65
|
+
| `--checkbox-dash-color` | `white` | color (SVG stroke) | Color of the dash icon when in the indeterminate state. |
|
|
66
|
+
| `--checkbox-icon-size` | `14px` | width, height | Size of the checkmark/dash icon inside the checkbox. |
|
|
67
|
+
| `--checkbox-label-font-size` | `14px` | font-size | Font size of the label text. |
|
|
68
|
+
| `--checkbox-label-font-weight` | `400` | font-weight | Font weight of the label text. |
|
|
69
|
+
| `--checkbox-label-color` | `currentColor` | color | Color of the label text. |
|
|
70
|
+
|
|
71
|
+
## Web Component
|
|
72
|
+
|
|
73
|
+
Tag: `<pui-checkbox>`
|
|
74
|
+
|
|
75
|
+
```html
|
|
76
|
+
<pui-checkbox text="Accept terms" checked></pui-checkbox>
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
### Slots
|
|
80
|
+
|
|
81
|
+
| Slot Name | Maps to Snippet | Description |
|
|
82
|
+
| -------------------- | ------------------- | ---------------------------------------- |
|
|
83
|
+
| `checked-icon` | `checkedIcon` | Custom icon for the checked state. |
|
|
84
|
+
| `indeterminate-icon` | `indeterminateIcon` | Custom icon for the indeterminate state. |
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
# Choicebox
|
|
2
|
+
|
|
3
|
+
A large-target selection card used for prominent single or multi-choice selections. Renders a `children` snippet inside a clickable, keyboard-accessible card. The `selected` prop is bindable and the `onclick` event fires with the new selection state. Supports `radio` and `checkbox` modes, which set the element's ARIA role and selection behavior (in `radio` mode a selected card cannot be deselected by clicking it again).
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```svelte
|
|
8
|
+
<script>
|
|
9
|
+
import { Choicebox } from 'polymorph-ui-components';
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<Choicebox selected={false} mode="radio">
|
|
13
|
+
<span>Standard Delivery</span>
|
|
14
|
+
</Choicebox>
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Props
|
|
18
|
+
|
|
19
|
+
| Prop | Type | Required | Default | Description |
|
|
20
|
+
| -------- | ----------------------- | -------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
21
|
+
| selected | `boolean` | No | `false` | The current selection state of the choicebox. Bindable. |
|
|
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
|
+
| disabled | `boolean` | No | `false` | When true, the choicebox is non-interactive and visually dimmed. |
|
|
24
|
+
| testId | `string` | No | `undefined` | Value for the `data-pw` attribute used in Playwright test 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
|
+
| Snippet | Type | Description |
|
|
30
|
+
| -------- | --------- | -------------------------------------------------------------------------------------------------------------------------------- |
|
|
31
|
+
| children | `Snippet` | Optional. The content rendered inside the choicebox card. Use this to provide your own layout with title, description, icon etc. |
|
|
32
|
+
|
|
33
|
+
## Events
|
|
34
|
+
|
|
35
|
+
| Event | Type | Description |
|
|
36
|
+
| ------- | ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
37
|
+
| onclick | `(selected: boolean) => void` | Fires after the selection state changes. Receives the new boolean selected value (true = selected, false = deselected). Does not fire when the choicebox is disabled. |
|
|
38
|
+
|
|
39
|
+
## CSS Variables
|
|
40
|
+
|
|
41
|
+
Override these custom properties to theme the component.
|
|
42
|
+
|
|
43
|
+
| Variable | Default | CSS Property | Description |
|
|
44
|
+
| ----------------------------------- | -------------------------------------- | ------------- | ------------------------------------------------------------ |
|
|
45
|
+
| `--choicebox-display` | `flex` | display | Display mode of the choicebox container. |
|
|
46
|
+
| `--choicebox-align-items` | `center` | align-items | Vertical alignment of the choicebox contents. |
|
|
47
|
+
| `--choicebox-padding` | `16px` | padding | Inner padding of the choicebox card. |
|
|
48
|
+
| `--choicebox-border` | `2px solid currentColor` | border | Border of the choicebox in its default unselected state. |
|
|
49
|
+
| `--choicebox-border-radius` | `6px` | border-radius | Corner rounding of the choicebox card. |
|
|
50
|
+
| `--choicebox-background` | `#ffffff` | background | Background color of the choicebox in its default state. |
|
|
51
|
+
| `--choicebox-gap` | `12px` | gap | Gap between child elements inside the choicebox. |
|
|
52
|
+
| `--choicebox-cursor` | `pointer` | cursor | Cursor when hovering the choicebox. |
|
|
53
|
+
| `--choicebox-font-family` | `inherit` | font-family | Font family of the choicebox. |
|
|
54
|
+
| `--choicebox-transition` | `border-color 0.2s, background 0.2s` | transition | Transition for state changes (hover, selected). |
|
|
55
|
+
| `--choicebox-focus-ring` | `0 0 0 3px currentColor` | box-shadow | Focus ring shown when the choicebox receives keyboard focus. |
|
|
56
|
+
| `--choicebox-hover-border-color` | `currentColor` | border-color | Border color of the choicebox on hover. |
|
|
57
|
+
| `--choicebox-hover-background` | `var(--choicebox-background, #ffffff)` | background | Background color of the choicebox on hover. |
|
|
58
|
+
| `--choicebox-selected-border-color` | `currentColor` | border-color | Border color when the choicebox is selected. |
|
|
59
|
+
| `--choicebox-selected-background` | `var(--choicebox-background, #ffffff)` | background | Background color when the choicebox is selected. |
|
|
60
|
+
| `--choicebox-disabled-opacity` | `0.4` | opacity | Opacity of the entire choicebox when disabled. |
|
|
61
|
+
| `--choicebox-disabled-cursor` | `not-allowed` | cursor | Cursor when hovering a disabled choicebox. |
|
|
62
|
+
|
|
63
|
+
## Web Component
|
|
64
|
+
|
|
65
|
+
Tag: `<pui-choicebox>`
|
|
66
|
+
|
|
67
|
+
```html
|
|
68
|
+
<pui-choicebox mode="radio">
|
|
69
|
+
<span>Option A</span>
|
|
70
|
+
</pui-choicebox>
|
|
71
|
+
```
|