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,133 @@
|
|
|
1
|
+
# Sheet
|
|
2
|
+
|
|
3
|
+
A panel component that slides in from any edge of the screen (left, right, top, or bottom). Designed for navigation menus, settings panels, detail views, or notification trays. Left/right sheets span the full viewport height; top/bottom sheets span the full viewport width. Includes a structured layout with a header (title and close button), scrollable content area, and an optional footer. The `open` prop is bindable for two-way state control. Body scroll is locked while the sheet is open, and focus is trapped within the panel for accessibility.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```svelte
|
|
8
|
+
<script>
|
|
9
|
+
import { Sheet } from 'polymorph-ui-components';
|
|
10
|
+
|
|
11
|
+
let sheetOpen = $state(false);
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<button onclick={() => (sheetOpen = true)}>Open Sheet</button>
|
|
15
|
+
|
|
16
|
+
<Sheet bind:open={sheetOpen} title="Settings" side="right" onclose={() => console.log('closed')}>
|
|
17
|
+
{#snippet content()}
|
|
18
|
+
<p>Sheet content goes here</p>
|
|
19
|
+
{/snippet}
|
|
20
|
+
{#snippet footer()}
|
|
21
|
+
<button onclick={() => (sheetOpen = false)}>Done</button>
|
|
22
|
+
{/snippet}
|
|
23
|
+
</Sheet>
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
## Props
|
|
27
|
+
|
|
28
|
+
| Prop | Type | Required | Default | Description |
|
|
29
|
+
| --------------- | ----------- | -------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
30
|
+
| content | `Snippet` | Yes | - | Snippet rendered inside the scrollable content area of the sheet panel. This is the main body of the sheet. |
|
|
31
|
+
| open | `boolean` | No | `false` | Bindable. Controls whether the sheet is visible. When true, the sheet panel slides in from the configured side and the overlay is shown. Supports two-way binding via `bind:open`. |
|
|
32
|
+
| side | `SheetSide` | No | `'right'` | The edge of the screen from which the sheet slides in. `'left'` and `'right'` panels span the full viewport height with configurable width. `'top'` and `'bottom'` panels span the full viewport width with configurable height. |
|
|
33
|
+
| title | `string` | No | `-` | Text displayed in the sheet header. When provided, a header bar is rendered at the top of the panel with this title. |
|
|
34
|
+
| showOverlay | `boolean` | No | `true` | When true, shows a dark semi-transparent overlay behind the sheet panel. When false, the overlay is transparent with pointer-events disabled on the backdrop. |
|
|
35
|
+
| showCloseButton | `boolean` | No | `true` | When true, renders a close button (X) in the sheet header. Clicking it closes the sheet and fires the onclose event. |
|
|
36
|
+
| testId | `string` | No | `-` | Value for data-pw on the overlay container element. The close button gets `{testId}-close` as its data-pw value. Used for Playwright test selectors. |
|
|
37
|
+
| 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. |
|
|
38
|
+
|
|
39
|
+
## Snippets
|
|
40
|
+
|
|
41
|
+
Svelte 5 Snippet props — pass content blocks to the component.
|
|
42
|
+
|
|
43
|
+
| Snippet | Type | Description |
|
|
44
|
+
| ------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
45
|
+
| content | `Snippet` | Required. The main body content rendered inside the scrollable area of the sheet panel. |
|
|
46
|
+
| footer | `Snippet` | Optional. Content rendered in a fixed footer area at the bottom of the sheet panel, separated from the content by a border. Useful for action buttons or summary information. |
|
|
47
|
+
|
|
48
|
+
## Events
|
|
49
|
+
|
|
50
|
+
| Event | Type | Description |
|
|
51
|
+
| ------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
52
|
+
| onclose | `() => void` | Fires when the sheet is dismissed by clicking the overlay backdrop, pressing the Escape key, or clicking the close button. The `open` prop is automatically set to `false` before this callback fires. |
|
|
53
|
+
|
|
54
|
+
## CSS Variables
|
|
55
|
+
|
|
56
|
+
Override these custom properties to theme the component.
|
|
57
|
+
|
|
58
|
+
| Variable | Default | CSS Property | Description |
|
|
59
|
+
| --------------------------------------- | -------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
60
|
+
| `--sheet-overlay-z-index` | `15` | z-index | Z-index stacking order of the overlay backdrop. |
|
|
61
|
+
| `--sheet-overlay-background` | `#00000066` | background-color | Background color of the semi-transparent overlay behind the sheet. |
|
|
62
|
+
| `--sheet-width` | `400px` | width | Width of the sheet panel (applies to left/right sides only). |
|
|
63
|
+
| `--sheet-max-width` | `100vw` | max-width | Maximum width of the sheet panel (left/right sides), prevents it from exceeding viewport width on small screens. |
|
|
64
|
+
| `--sheet-height` | `300px` | height | Height of the sheet panel (applies to top/bottom sides only). |
|
|
65
|
+
| `--sheet-max-height` | `100vh` | max-height | Maximum height of the sheet panel (top/bottom sides), prevents it from exceeding viewport height. |
|
|
66
|
+
| `--sheet-background` | `#ffffff` | background-color | Background color of the sheet panel. |
|
|
67
|
+
| `--sheet-box-shadow` | `-2px 0 8px rgba(0, 0, 0, 0.15)` | box-shadow | Shadow cast by the sheet panel. |
|
|
68
|
+
| `--sheet-z-index` | `16` | z-index | Z-index stacking order of the sheet panel itself. |
|
|
69
|
+
| `--sheet-border` | `none` | border | Border on the edge of the sheet panel facing the page content. Applied as border-left (right side), border-right (left side), border-bottom (top side), or border-top (bottom side). |
|
|
70
|
+
| `--sheet-header-padding` | `16px 20px` | padding | Inner padding of the header area. |
|
|
71
|
+
| `--sheet-header-background` | `inherit` | background-color | Background color of the header area. |
|
|
72
|
+
| `--sheet-header-border-bottom` | `1px solid #e4e4e7` | border-bottom | Bottom border of the header, visually separating it from the content area. |
|
|
73
|
+
| `--sheet-title-font-size` | `18px` | font-size | Font size of the title text in the header. |
|
|
74
|
+
| `--sheet-title-font-weight` | `600` | font-weight | Font weight of the title text in the header. |
|
|
75
|
+
| `--sheet-title-font-family` | `inherit` | font-family | Font family of the title text in the header. |
|
|
76
|
+
| `--sheet-title-color` | `currentColor` | color | Text color of the title in the header. |
|
|
77
|
+
| `--sheet-title-line-height` | `1.4` | line-height | Line height of the title text in the header. |
|
|
78
|
+
| `--sheet-close-button-size` | `32px` | width, height | Width and height of the close button in the header. |
|
|
79
|
+
| `--sheet-close-button-border-radius` | `6px` | border-radius | Border radius of the close button. |
|
|
80
|
+
| `--sheet-close-button-background` | `transparent` | background-color | Background color of the close button in its default state. |
|
|
81
|
+
| `--sheet-close-button-color` | `currentColor` | color | Color of the close button icon. |
|
|
82
|
+
| `--sheet-close-button-font-size` | `16px` | font-size | Font size of the close button icon. |
|
|
83
|
+
| `--sheet-close-button-hover-background` | `transparent` | background-color | Background color of the close button when hovered. |
|
|
84
|
+
| `--sheet-content-overflow-y` | `auto` | overflow-y | Vertical overflow behavior of the scrollable content area. |
|
|
85
|
+
| `--sheet-content-padding` | `20px` | padding | Inner padding of the content area. |
|
|
86
|
+
| `--sheet-scrollbar-width` | `none` | scrollbar-width | Controls the visibility of the scrollbar in the content area. Set to `auto` or `thin` to show scrollbar. |
|
|
87
|
+
| `--sheet-footer-padding` | `16px 20px` | padding | Inner padding of the footer area. |
|
|
88
|
+
| `--sheet-footer-background` | `inherit` | background-color | Background color of the footer area. |
|
|
89
|
+
| `--sheet-footer-border-top` | `1px solid #e4e4e7` | border-top | Top border of the footer, visually separating it from the content area. |
|
|
90
|
+
|
|
91
|
+
## Accessibility
|
|
92
|
+
|
|
93
|
+
- The sheet panel has `role="dialog"` and `aria-modal="true"` for screen reader support.
|
|
94
|
+
- Focus is automatically moved to the sheet panel when it opens.
|
|
95
|
+
- Focus is trapped within the sheet panel using Tab/Shift+Tab cycling.
|
|
96
|
+
- Pressing the Escape key closes the sheet.
|
|
97
|
+
- The close button has `aria-label="Close"` for screen reader identification.
|
|
98
|
+
|
|
99
|
+
## Type Reference
|
|
100
|
+
|
|
101
|
+
Custom types used by this component's props and events:
|
|
102
|
+
|
|
103
|
+
### SheetSide
|
|
104
|
+
|
|
105
|
+
```typescript
|
|
106
|
+
type SheetSide = 'left' | 'right' | 'top' | 'bottom';
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
## Internal Dependencies
|
|
110
|
+
|
|
111
|
+
This component uses the following library components internally:
|
|
112
|
+
|
|
113
|
+
- Button (for the close button)
|
|
114
|
+
|
|
115
|
+
## Web Component
|
|
116
|
+
|
|
117
|
+
Tag: `<pui-sheet>`
|
|
118
|
+
|
|
119
|
+
```html
|
|
120
|
+
<pui-sheet open side="right" title="Settings">
|
|
121
|
+
<p>Sheet body content</p>
|
|
122
|
+
<div slot="footer">
|
|
123
|
+
<button>Save</button>
|
|
124
|
+
</div>
|
|
125
|
+
</pui-sheet>
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
### Slots
|
|
129
|
+
|
|
130
|
+
| Slot Name | Maps to Snippet | Description |
|
|
131
|
+
| ----------- | --------------- | ------------------------------------- |
|
|
132
|
+
| _(default)_ | `content` | The main body content of the sheet. |
|
|
133
|
+
| `footer` | `footer` | Content rendered in the sheet footer. |
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
# Shimmer
|
|
2
|
+
|
|
3
|
+
A loading placeholder element with an animated shimmer/shine effect. Renders a single rectangle with a sweeping highlight gradient that moves left-to-right continuously. All visual properties (size, shape, colors, speed) are controlled entirely via CSS variables. Use multiple Shimmer elements with different CSS variable values to build skeleton loading layouts.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```svelte
|
|
8
|
+
<script>
|
|
9
|
+
import { Shimmer } from 'polymorph-ui-components';
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<Shimmer />
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
### Building a Skeleton Layout
|
|
16
|
+
|
|
17
|
+
```svelte
|
|
18
|
+
<div class="skeleton-card">
|
|
19
|
+
<Shimmer />
|
|
20
|
+
<Shimmer />
|
|
21
|
+
<Shimmer />
|
|
22
|
+
</div>
|
|
23
|
+
|
|
24
|
+
<style>
|
|
25
|
+
.skeleton-card {
|
|
26
|
+
display: flex;
|
|
27
|
+
flex-direction: column;
|
|
28
|
+
gap: 12px;
|
|
29
|
+
padding: 16px;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.skeleton-card :nth-child(1) {
|
|
33
|
+
--shimmer-height: 120px;
|
|
34
|
+
--shimmer-border-radius: 8px;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.skeleton-card :nth-child(2) {
|
|
38
|
+
--shimmer-width: 60%;
|
|
39
|
+
--shimmer-height: 20px;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.skeleton-card :nth-child(3) {
|
|
43
|
+
--shimmer-width: 40%;
|
|
44
|
+
--shimmer-height: 14px;
|
|
45
|
+
}
|
|
46
|
+
</style>
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
## Props
|
|
50
|
+
|
|
51
|
+
| Prop | Type | Required | Default | Description |
|
|
52
|
+
| ------- | -------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
53
|
+
| testId | `string` | No | `-` | Value for the `data-pw` attribute on the shimmer element, used for Playwright selectors. |
|
|
54
|
+
| 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. |
|
|
55
|
+
|
|
56
|
+
## CSS Variables
|
|
57
|
+
|
|
58
|
+
Override these custom properties to theme the component.
|
|
59
|
+
|
|
60
|
+
| Variable | Default | CSS Property | Description |
|
|
61
|
+
| ------------------------- | -------------------------- | ------------------ | --------------------------------------------------------- |
|
|
62
|
+
| `--shimmer-width` | `100%` | width | Width of the shimmer rectangle. |
|
|
63
|
+
| `--shimmer-height` | `16px` | height | Height of the shimmer rectangle. |
|
|
64
|
+
| `--shimmer-border-radius` | `4px` | border-radius | Corner rounding of the shimmer rectangle. |
|
|
65
|
+
| `--shimmer-background` | `#e4e4e7` | background-color | Base background color of the shimmer. |
|
|
66
|
+
| `--shimmer-highlight` | `rgba(255, 255, 255, 0.4)` | gradient color | Color of the sweeping highlight in the shimmer animation. |
|
|
67
|
+
| `--shimmer-duration` | `1.5s` | animation-duration | Duration of one complete shimmer animation cycle. |
|
|
68
|
+
| `--shimmer-opacity` | `1` | opacity | Opacity of the shimmer element. |
|
|
69
|
+
|
|
70
|
+
## Web Component
|
|
71
|
+
|
|
72
|
+
Tag: `<pui-shimmer>`
|
|
73
|
+
|
|
74
|
+
```html
|
|
75
|
+
<pui-shimmer></pui-shimmer>
|
|
76
|
+
```
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
# Slider
|
|
2
|
+
|
|
3
|
+
A range slider input for selecting a numeric value within min/max bounds. The `value` prop is bindable and represents the current position of the slider thumb. The track fills with an active color from the left edge to the thumb position. An optional value label displays the current numeric value beside the slider. Supports `step` for snapping to intervals and `disabled` to prevent interaction.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```svelte
|
|
8
|
+
<script>
|
|
9
|
+
import { Slider } from 'polymorph-ui-components';
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<Slider value={50} />
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Props
|
|
16
|
+
|
|
17
|
+
| Prop | Type | Required | Default | Description |
|
|
18
|
+
| --------- | --------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
19
|
+
| value | `number` | Yes | `0` | Bindable. The current numeric value of the slider. Must be between `min` and `max`. Two-way bound to the underlying range input. |
|
|
20
|
+
| min | `number` | No | `0` | The minimum allowed value. Defines the left edge of the slider track. |
|
|
21
|
+
| max | `number` | No | `100` | The maximum allowed value. Defines the right edge of the slider track. |
|
|
22
|
+
| step | `number` | No | `1` | The increment between selectable values. The slider snaps to multiples of this value between min and max. |
|
|
23
|
+
| disabled | `boolean` | No | `false` | Whether the slider is disabled. When true, the slider is visually dimmed, the thumb cannot be dragged, and no events fire. |
|
|
24
|
+
| showValue | `boolean` | No | `false` | Whether to display the current numeric value as a label next to the slider track. |
|
|
25
|
+
| testId | `string` | No | `-` | Value for the data-pw attribute on the range input, used for end-to-end testing selectors. |
|
|
26
|
+
| classes | `string` | No | `-` | CSS class string applied to the component's top-level element. Useful for theming — define classes with CSS variable overrides and pass them to create variant styles. |
|
|
27
|
+
|
|
28
|
+
## Events
|
|
29
|
+
|
|
30
|
+
| Event | Type | Description |
|
|
31
|
+
| -------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
32
|
+
| oninput | `(value: number) => void` | Fires continuously as the user drags the slider thumb. Receives the current numeric value at each position during the drag. Use this for live preview updates. |
|
|
33
|
+
| onchange | `(value: number) => void` | Fires when the user releases the slider thumb after dragging, or when a discrete value change completes (e.g., keyboard arrow keys). Receives the final selected numeric value. Use this for committing the value. |
|
|
34
|
+
|
|
35
|
+
## CSS Variables
|
|
36
|
+
|
|
37
|
+
Override these custom properties to theme the component.
|
|
38
|
+
|
|
39
|
+
| Variable | Default | CSS Property | Description |
|
|
40
|
+
| ------------------------------ | ------------------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
41
|
+
| `--slider-track` | (two-stop fill gradient) | background | Overrides the entire track background. Use for custom gradients (e.g., a rainbow hue gradient for color pickers). When set, `--slider-track-active-color` and `--slider-track-background` are ignored. |
|
|
42
|
+
| `--slider-container-width` | `100%` | width | Width of the slider container element. |
|
|
43
|
+
| `--slider-container-padding` | `4px 0` | padding | Padding around the slider container. |
|
|
44
|
+
| `--slider-track-height` | `6px` | height | Height (thickness) of the slider track. |
|
|
45
|
+
| `--slider-track-background` | `#e4e4e7` | background | Background color of the unfilled portion of the track (right of thumb). |
|
|
46
|
+
| `--slider-track-border-radius` | `3px` | border-radius | Corner rounding of the slider track. |
|
|
47
|
+
| `--slider-track-active-color` | `currentColor` | background | Color of the filled portion of the track (left of thumb). |
|
|
48
|
+
| `--slider-thumb-size` | `20px` | width, height | Width and height of the draggable thumb. |
|
|
49
|
+
| `--slider-thumb-background` | `#ffffff` | background | Background color of the thumb. |
|
|
50
|
+
| `--slider-thumb-border` | `2px solid currentColor` | border | Border of the thumb. |
|
|
51
|
+
| `--slider-thumb-border-radius` | `50%` | border-radius | Corner rounding of the thumb. Use 50% for a circle. |
|
|
52
|
+
| `--slider-thumb-shadow` | `0 1px 3px rgba(0, 0, 0, 0.2)` | box-shadow | Box shadow around the thumb for depth. |
|
|
53
|
+
| `--slider-thumb-hover-scale` | `1.15` | transform: scale() | Scale factor applied to the thumb on hover for visual feedback. |
|
|
54
|
+
| `--slider-focus-ring` | `2px solid currentColor` | outline | Outline shown around the thumb when it receives keyboard focus (focus-visible). |
|
|
55
|
+
| `--slider-disabled-opacity` | `0.5` | opacity | Opacity of the entire slider when disabled. |
|
|
56
|
+
| `--slider-disabled-cursor` | `not-allowed` | cursor | Cursor shown when hovering the disabled slider. |
|
|
57
|
+
| `--slider-value-font-size` | `14px` | font-size | Font size of the value label text. |
|
|
58
|
+
| `--slider-value-color` | `currentColor` | color | Color of the value label text. |
|
|
59
|
+
| `--slider-value-font-weight` | `500` | font-weight | Font weight of the value label text. |
|
|
60
|
+
| `--slider-transition` | `background 0.2s ease` | transition | Transition applied to the track background for smooth fill changes. |
|
|
61
|
+
|
|
62
|
+
## Web Component
|
|
63
|
+
|
|
64
|
+
Tag: `<pui-slider>`
|
|
65
|
+
|
|
66
|
+
```html
|
|
67
|
+
<pui-slider value="50" min="0" max="100" step="1" show-value></pui-slider>
|
|
68
|
+
```
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
# Snippet
|
|
2
|
+
|
|
3
|
+
A copyable command-line code snippet with a prompt prefix symbol and an inline copy-to-clipboard button. Displays a single-line command or code string in a monospace container. After copying, briefly shows "Copied!" feedback before reverting to the copy icon. Clipboard errors are silently caught (handles non-secure contexts and iframe restrictions). Ideal for CLI commands, install instructions, or any text the user needs to copy.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```svelte
|
|
8
|
+
<script>
|
|
9
|
+
import { Snippet } from 'polymorph-ui-components';
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<Snippet text="npm install polymorph-ui-components" />
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
### With Custom Copy Icon
|
|
16
|
+
|
|
17
|
+
```svelte
|
|
18
|
+
<Snippet text="pnpm dev">
|
|
19
|
+
{#snippet copyIcon()}
|
|
20
|
+
<svg>...</svg>
|
|
21
|
+
{/snippet}
|
|
22
|
+
</Snippet>
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## Props
|
|
26
|
+
|
|
27
|
+
| Prop | Type | Required | Default | Description |
|
|
28
|
+
| -------------- | --------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
29
|
+
| text | `string` | Yes | `-` | The code or command string displayed in the snippet. This is the value copied to the clipboard. |
|
|
30
|
+
| prompt | `string` | No | `$` | The prefix symbol shown before the text (e.g. '$', '>', '#'). Visually indicates a terminal prompt. |
|
|
31
|
+
| showCopyButton | `boolean` | No | `true` | Whether to show the copy-to-clipboard button on the right side. Set to false for display-only snippets. |
|
|
32
|
+
| testId | `string` | No | `-` | Test identifier applied as `data-pw` attribute on the container for Playwright selectors. |
|
|
33
|
+
| 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. |
|
|
34
|
+
|
|
35
|
+
## Snippets
|
|
36
|
+
|
|
37
|
+
Svelte 5 Snippet props — pass content blocks to the component.
|
|
38
|
+
|
|
39
|
+
| Snippet | Type | Description |
|
|
40
|
+
| -------- | --------- | --------------------------------------------------------------------------------------------------------------------- |
|
|
41
|
+
| copyIcon | `Snippet` | Custom icon for the copy button. Defaults to a built-in copy SVG. Replaced by "Copied!" text after a successful copy. |
|
|
42
|
+
|
|
43
|
+
## Events
|
|
44
|
+
|
|
45
|
+
| Event | Type | Description |
|
|
46
|
+
| ------ | ------------ | ------------------------------------------------------------------------------------------------------------------------------- |
|
|
47
|
+
| oncopy | `() => void` | Fires after the text has been successfully copied to the clipboard. Use this to show custom notifications or track copy events. |
|
|
48
|
+
|
|
49
|
+
## CSS Variables
|
|
50
|
+
|
|
51
|
+
Override these custom properties to theme the component.
|
|
52
|
+
|
|
53
|
+
| Variable | Default | CSS Property | Description |
|
|
54
|
+
| --------------------------------- | ---------------- | ------------- | --------------------------------------------------------------------- |
|
|
55
|
+
| `--snippet-gap` | `8px` | gap | Gap between the code text and the copy button. |
|
|
56
|
+
| `--snippet-background` | `transparent` | background | Background color of the snippet container. |
|
|
57
|
+
| `--snippet-border` | `1px solid currentColor` | border | Border of the snippet container. |
|
|
58
|
+
| `--snippet-border-radius` | `8px` | border-radius | Corner rounding of the snippet container. |
|
|
59
|
+
| `--snippet-padding` | `12px 16px` | padding | Inner padding of the snippet container. |
|
|
60
|
+
| `--snippet-font-family` | `monospace` | font-family | Font family for the overall snippet (prompt and text inherit this). |
|
|
61
|
+
| `--snippet-font-size` | `14px` | font-size | Font size for the snippet text. |
|
|
62
|
+
| `--snippet-color` | `currentColor` | color | Default text color for the snippet container. |
|
|
63
|
+
| `--snippet-margin` | `0` | margin | Outer margin of the snippet container. |
|
|
64
|
+
| `--snippet-prompt-color` | `currentColor` | color | Color of the prompt prefix symbol (e.g. '$'). |
|
|
65
|
+
| `--snippet-prompt-margin-right` | `8px` | margin-right | Space between the prompt symbol and the command text. |
|
|
66
|
+
| `--snippet-text-color` | `currentColor` | color | Color of the command/code text. |
|
|
67
|
+
| `--snippet-text-font-family` | `inherit` | font-family | Font family of the command text (inherits from container by default). |
|
|
68
|
+
| `--snippet-copy-background` | `transparent` | background | Background color of the copy button. |
|
|
69
|
+
| `--snippet-copy-color` | `currentColor` | color | Icon/text color of the copy button. |
|
|
70
|
+
| `--snippet-copy-border` | `none` | border | Border of the copy button. |
|
|
71
|
+
| `--snippet-copy-padding` | `4px` | padding | Inner padding of the copy button. |
|
|
72
|
+
| `--snippet-copy-border-radius` | `6px` | border-radius | Corner rounding of the copy button. |
|
|
73
|
+
| `--snippet-copy-cursor` | `pointer` | cursor | Cursor style when hovering the copy button. |
|
|
74
|
+
| `--snippet-copy-hover-background` | `transparent` | background | Background color of the copy button on hover. |
|
|
75
|
+
| `--snippet-copy-size` | `16px` | width, height | Width and height of the copy icon SVG. |
|
|
76
|
+
| `--snippet-copied-color` | `currentColor` | color | Text color of the "Copied!" feedback message. |
|
|
77
|
+
| `--snippet-copied-font-size` | `12px` | font-size | Font size of the "Copied!" feedback message. |
|
|
78
|
+
|
|
79
|
+
## Internal Dependencies
|
|
80
|
+
|
|
81
|
+
This component uses the following library components internally:
|
|
82
|
+
|
|
83
|
+
- Button (for the copy button)
|
|
84
|
+
|
|
85
|
+
## Web Component
|
|
86
|
+
|
|
87
|
+
Tag: `<pui-snippet>`
|
|
88
|
+
|
|
89
|
+
```html
|
|
90
|
+
<pui-snippet text="npm install polymorph-ui-components" show-copy-button>
|
|
91
|
+
<svg slot="copy-icon">...</svg>
|
|
92
|
+
</pui-snippet>
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
### Slots
|
|
96
|
+
|
|
97
|
+
| Slot Name | Maps to Snippet | Description |
|
|
98
|
+
| ----------- | --------------- | -------------------------------- |
|
|
99
|
+
| `copy-icon` | `copyIcon` | Custom icon for the copy button. |
|
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
# SplitButton
|
|
2
|
+
|
|
3
|
+
A primary action button paired with a dropdown arrow trigger that reveals a menu of secondary actions. Clicking the main button fires the primary action, while clicking the dropdown arrow opens a Menu component with full keyboard navigation, typeahead search, disabled/danger items, and focus management. The dropdown closes when an item is selected, when clicking outside, or when pressing Escape.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```svelte
|
|
8
|
+
<script>
|
|
9
|
+
import { SplitButton } from 'polymorph-ui-components';
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<SplitButton
|
|
13
|
+
text="Save"
|
|
14
|
+
items={[
|
|
15
|
+
{ label: 'Save as Draft', value: 'draft' },
|
|
16
|
+
{ label: 'Save & Close', value: 'save-close' },
|
|
17
|
+
{ label: 'Discard', value: 'discard', danger: true }
|
|
18
|
+
]}
|
|
19
|
+
onclick={(e) => console.log('Primary clicked', e)}
|
|
20
|
+
onselect={(item) => console.log('Selected:', item.value)}
|
|
21
|
+
/>
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Props
|
|
25
|
+
|
|
26
|
+
| Prop | Type | Required | Default | Description |
|
|
27
|
+
| -------- | ------------ | -------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
28
|
+
| text | `string` | Yes | `-` | The label displayed on the primary action button. |
|
|
29
|
+
| items | `MenuItem[]` | Yes | `-` | Array of menu items for the dropdown. Uses the same `MenuItem` type as the Menu component — supports `label`, `value`, `icon`, `disabled`, `danger`, and `separator` properties. |
|
|
30
|
+
| disabled | `boolean` | No | `false` | Whether the entire split button is disabled. When true, both the primary button and dropdown trigger appear dimmed and ignore clicks. |
|
|
31
|
+
| testId | `string` | No | `-` | Value for the `data-pw` attribute on the container, used for end-to-end testing selectors. |
|
|
32
|
+
| 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. |
|
|
33
|
+
|
|
34
|
+
## Snippets
|
|
35
|
+
|
|
36
|
+
Svelte 5 Snippet props — pass content blocks to the component.
|
|
37
|
+
|
|
38
|
+
| Snippet | Type | Description |
|
|
39
|
+
| ------------ | --------- | ------------------------------------------------------------------------------------ |
|
|
40
|
+
| dropdownIcon | `Snippet` | Custom icon for the dropdown trigger arrow. Defaults to a built-in chevron-down SVG. |
|
|
41
|
+
|
|
42
|
+
## Events
|
|
43
|
+
|
|
44
|
+
| Event | Type | Description |
|
|
45
|
+
| -------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
|
|
46
|
+
| onclick | `(event: MouseEvent) => void` | Fires when the primary action button is clicked. Does NOT fire when disabled is true. |
|
|
47
|
+
| onselect | `(item: MenuItem) => void` | Fires when a dropdown menu item is selected. Receives the full `MenuItem` object. The dropdown closes automatically after selection. |
|
|
48
|
+
|
|
49
|
+
## CSS Variables
|
|
50
|
+
|
|
51
|
+
Override these custom properties to theme the component.
|
|
52
|
+
|
|
53
|
+
### Container
|
|
54
|
+
|
|
55
|
+
| Variable | Default | CSS Property | Description |
|
|
56
|
+
| -------------------- | ------- | ------------ | -------------------------------------------------------- |
|
|
57
|
+
| `--split-button-gap` | `0px` | gap | Gap between the primary button and the dropdown trigger. |
|
|
58
|
+
|
|
59
|
+
### Primary Button
|
|
60
|
+
|
|
61
|
+
| Variable | Default | CSS Property | Description |
|
|
62
|
+
| ----------------------------------------- | -------------------------------------------- | ---------------- | ------------------------------------------------------------------------ |
|
|
63
|
+
| `--split-button-primary-background` | `#18181b` | background-color | Background color of the primary action button. |
|
|
64
|
+
| `--split-button-primary-color` | `white` | color | Text color of the primary action button label. |
|
|
65
|
+
| `--split-button-primary-padding` | `8px 16px` | padding | Inner padding of the primary action button. |
|
|
66
|
+
| `--split-button-primary-font-size` | `14px` | font-size | Font size of the primary action button text. |
|
|
67
|
+
| `--split-button-primary-font-weight` | `500` | font-weight | Font weight of the primary action button text. |
|
|
68
|
+
| `--split-button-primary-font-family` | `-` | font-family | Font family of the primary action button text. |
|
|
69
|
+
| `--split-button-primary-border` | `none` | border | Border style of the primary action button. |
|
|
70
|
+
| `--split-button-primary-border-radius` | `6px 0 0 6px` | border-radius | Corner rounding of the primary button (left corners rounded by default). |
|
|
71
|
+
| `--split-button-primary-hover-background` | inherits `--split-button-primary-background` | background-color | Background color of the primary button on hover. |
|
|
72
|
+
| `--split-button-primary-hover-color` | inherits `--split-button-primary-color` | color | Text color of the primary button on hover. |
|
|
73
|
+
|
|
74
|
+
### Dropdown Trigger
|
|
75
|
+
|
|
76
|
+
| Variable | Default | CSS Property | Description |
|
|
77
|
+
| ----------------------------------------- | -------------------------------------------- | ---------------- | ----------------------------------------------------------------------------------------- |
|
|
78
|
+
| `--split-button-trigger-background` | `#18181b` | background-color | Background color of the dropdown trigger area. |
|
|
79
|
+
| `--split-button-trigger-color` | `white` | color | Color of the dropdown arrow icon. |
|
|
80
|
+
| `--split-button-trigger-padding` | `8px` | padding | Inner padding of the dropdown trigger (applied to `.menu-trigger` via `:global`). |
|
|
81
|
+
| `--split-button-trigger-separator` | `1px solid rgba(255, 255, 255, 0.3)` | border-left | Left border acting as a visual separator between the primary button and dropdown trigger. |
|
|
82
|
+
| `--split-button-trigger-border-radius` | `0 6px 6px 0` | border-radius | Corner rounding of the dropdown trigger (right corners rounded by default). |
|
|
83
|
+
| `--split-button-trigger-hover-background` | inherits `--split-button-trigger-background` | background-color | Background color of the dropdown trigger on hover. |
|
|
84
|
+
| `--split-button-trigger-hover-color` | inherits `--split-button-trigger-color` | color | Arrow color of the dropdown trigger on hover. |
|
|
85
|
+
|
|
86
|
+
### Arrow Icon
|
|
87
|
+
|
|
88
|
+
| Variable | Default | CSS Property | Description |
|
|
89
|
+
| ----------------------------- | ------- | ------------ | ---------------------------------- |
|
|
90
|
+
| `--split-button-arrow-width` | `10px` | width | Width of the dropdown arrow icon. |
|
|
91
|
+
| `--split-button-arrow-height` | `6px` | height | Height of the dropdown arrow icon. |
|
|
92
|
+
|
|
93
|
+
### Disabled State
|
|
94
|
+
|
|
95
|
+
| Variable | Default | CSS Property | Description |
|
|
96
|
+
| --------------------------------- | ------------- | ------------ | ------------------------------------------------------------------------- |
|
|
97
|
+
| `--split-button-disabled-opacity` | `0.4` | opacity | Opacity applied to the primary button and dropdown trigger when disabled. |
|
|
98
|
+
| `--split-button-disabled-cursor` | `not-allowed` | cursor | Cursor shown when hovering over the disabled split button. |
|
|
99
|
+
|
|
100
|
+
### Dropdown Menu
|
|
101
|
+
|
|
102
|
+
The dropdown uses the Menu component internally. Style it with Menu's CSS variables (prefixed `--menu-*`). The SplitButton sets `--menu-container-position: static` so the dropdown positions relative to the `.split-button` container.
|
|
103
|
+
|
|
104
|
+
Because the trigger area uses light-on-dark colors for the arrow, SplitButton provides its own opaque, legible defaults for the dropdown menu (the menu would otherwise inherit the trigger's `color`). Override these to theme the dropdown:
|
|
105
|
+
|
|
106
|
+
| Variable | Default | CSS Property | Description |
|
|
107
|
+
| --------------------------------------------------- | ------------------- | ---------------- | ------------------------------------------------------ |
|
|
108
|
+
| `--split-button-menu-item-color` | `#18181b` | color | Text color of dropdown menu items. |
|
|
109
|
+
| `--split-button-menu-item-danger-color` | `#18181b` | color | Text color of danger menu items. |
|
|
110
|
+
| `--split-button-menu-item-hover-background` | `#f4f4f5` | background-color | Background of a menu item on hover. |
|
|
111
|
+
| `--split-button-menu-item-focus-background` | `#f4f4f5` | background-color | Background of a menu item on keyboard focus. |
|
|
112
|
+
| `--split-button-menu-item-danger-hover-background` | `#f4f4f5` | background-color | Background of a danger menu item on hover. |
|
|
113
|
+
| `--split-button-menu-item-danger-focus-background` | `#f4f4f5` | background-color | Background of a danger menu item on keyboard focus. |
|
|
114
|
+
| `--split-button-menu-border` | `1px solid #e4e4e7` | border | Border of the dropdown menu surface. |
|
|
115
|
+
| `--split-button-menu-separator-color` | `#e4e4e7` | background-color | Color of separators between menu items. |
|
|
116
|
+
|
|
117
|
+
## Type Reference
|
|
118
|
+
|
|
119
|
+
Custom types used by this component's props and events:
|
|
120
|
+
|
|
121
|
+
### MenuItem
|
|
122
|
+
|
|
123
|
+
```typescript
|
|
124
|
+
type MenuItem = {
|
|
125
|
+
label: string; // Display text for the menu item
|
|
126
|
+
value: string; // Unique identifier used in onselect callback
|
|
127
|
+
icon?: string; // URL/src for an icon image displayed before the label
|
|
128
|
+
disabled?: boolean; // When true, item is dimmed and non-interactive
|
|
129
|
+
danger?: boolean; // When true, item text is styled in a destructive/red color
|
|
130
|
+
separator?: boolean; // When true, renders a horizontal line instead of a clickable item
|
|
131
|
+
};
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
## Internal Dependencies
|
|
135
|
+
|
|
136
|
+
This component uses the following library components internally:
|
|
137
|
+
|
|
138
|
+
- Button (for the primary action button)
|
|
139
|
+
- Menu (for the dropdown with keyboard navigation, typeahead, and a11y)
|
|
140
|
+
|
|
141
|
+
## Web Component
|
|
142
|
+
|
|
143
|
+
Tag: `<pui-split-button>`
|
|
144
|
+
|
|
145
|
+
```html
|
|
146
|
+
<pui-split-button text="Save">
|
|
147
|
+
<svg slot="dropdown-icon">...</svg>
|
|
148
|
+
</pui-split-button>
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
### Slots
|
|
152
|
+
|
|
153
|
+
| Slot Name | Maps to Snippet | Description |
|
|
154
|
+
| --------------- | --------------- | ----------------------------------- |
|
|
155
|
+
| `dropdown-icon` | `dropdownIcon` | Custom icon for the dropdown arrow. |
|
|
156
|
+
|
|
157
|
+
> **Note:** The `items` prop is an array — set it via JavaScript property.
|