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,117 @@
|
|
|
1
|
+
# Tabs
|
|
2
|
+
|
|
3
|
+
A horizontal tab bar with clickable tab items and an animated active indicator. The `activeIndex` prop controls which tab is selected, and the `onchange` event fires when the user selects a different tab. For advanced use cases (pills, dirty indicators, close buttons, per-tab menus), pass a `tab` snippet to render custom content inside each tab. All visual aspects are customizable via CSS custom properties.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```svelte
|
|
8
|
+
<script>
|
|
9
|
+
import { Tabs } from 'polymorph-ui-components';
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<Tabs items={['Tab 1', 'Tab 2', 'Tab 3']} />
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
### With Custom Tab Content
|
|
16
|
+
|
|
17
|
+
```svelte
|
|
18
|
+
<Tabs
|
|
19
|
+
items={['index.ts', 'App.svelte', 'styles.css']}
|
|
20
|
+
activeIndex={0}
|
|
21
|
+
onchange={(index) => (activeIndex = index)}
|
|
22
|
+
>
|
|
23
|
+
{#snippet tab({ label, index, active })}
|
|
24
|
+
<span>{label}</span>
|
|
25
|
+
{#if dirtyFiles.has(index)}
|
|
26
|
+
<span class="dirty-dot"></span>
|
|
27
|
+
{/if}
|
|
28
|
+
<button onclick={(e) => { e.stopPropagation(); closeTab(index); }}>×</button>
|
|
29
|
+
{/snippet}
|
|
30
|
+
</Tabs>
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## Props
|
|
34
|
+
|
|
35
|
+
| Prop | Type | Required | Default | Description |
|
|
36
|
+
| ----------- | ---------- | -------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
37
|
+
| items | `string[] \| TabItem[]` | Yes | - | Array of tab labels. Either plain strings, or `TabItem` objects (`{ key, label, testId?, subtitle? }`) for keyed/object mode. |
|
|
38
|
+
| activeIndex | `number` | No | `0` | The zero-based index of the currently active tab (string mode). |
|
|
39
|
+
| activeKey | `string` | No | `-` | The `key` of the currently active tab when using `TabItem[]` object mode. |
|
|
40
|
+
| disabled | `boolean` | No | `false` | When true, disables all tab interactions and applies disabled styling. |
|
|
41
|
+
| testId | `string` | No | `-` | Value applied to the `data-pw` attribute on the tab bar container for test selectors. |
|
|
42
|
+
| 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. |
|
|
43
|
+
|
|
44
|
+
## Snippets
|
|
45
|
+
|
|
46
|
+
Svelte 5 Snippet props — pass content blocks to the component.
|
|
47
|
+
|
|
48
|
+
| Snippet | Type | Description |
|
|
49
|
+
| --------------- | ----------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
50
|
+
| scrollLeftIcon | `Snippet` | Custom icon rendered inside the left scroll arrow button. Defaults to a built-in chevron SVG. |
|
|
51
|
+
| scrollRightIcon | `Snippet` | Custom icon rendered inside the right scroll arrow button. Defaults to a built-in chevron SVG. |
|
|
52
|
+
| tab | `Snippet<[{ label: string; index: number; active: boolean; subtitle?: string }]>` | Custom renderer for each tab item. Receives the tab's label string, zero-based index, whether it is currently active, and the optional subtitle. When provided, replaces the default text label. Supports interactive children such as close buttons or menus. |
|
|
53
|
+
|
|
54
|
+
## Events
|
|
55
|
+
|
|
56
|
+
| Event | Type | Description |
|
|
57
|
+
| -------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
58
|
+
| onchange | `(index: number, label: string) => void` | Fires in string mode when the user clicks a tab that is not the currently active one. Receives the new active index and the label string of the selected tab. |
|
|
59
|
+
| onkeychange | `(key: string) => void` | Fires in `TabItem[]` object mode when the user clicks a tab whose `key` differs from the current `activeKey`. Receives the selected tab's `key`. |
|
|
60
|
+
|
|
61
|
+
## CSS Variables
|
|
62
|
+
|
|
63
|
+
Override these custom properties to theme the component.
|
|
64
|
+
|
|
65
|
+
| Variable | Default | CSS Property | Description |
|
|
66
|
+
| -------------------------------- | --------------------------------------- | ---------------- | --------------------------------------------------------- |
|
|
67
|
+
| `--tabs-bar-background` | `#ffffff` | background | Background color of the tab bar container. |
|
|
68
|
+
| `--tabs-bar-padding` | `0px` | padding | Padding inside the tab bar container. |
|
|
69
|
+
| `--tabs-bar-gap` | `0px` | gap | Gap between individual tab items. |
|
|
70
|
+
| `--tabs-bar-border-bottom` | `1px solid #e4e4e7` | border-bottom | Bottom border of the tab bar container. |
|
|
71
|
+
| `--tabs-bar-border-radius` | `0` | border-radius | Corner rounding of the tab bar container. |
|
|
72
|
+
| `--tabs-item-padding` | `12px 16px` | padding | Padding inside each tab item. |
|
|
73
|
+
| `--tabs-item-font-size` | `14px` | font-size | Font size of tab label text. |
|
|
74
|
+
| `--tabs-item-font-weight` | `400` | font-weight | Font weight of inactive tab label text. |
|
|
75
|
+
| `--tabs-item-font-family` | `inherit` | font-family | Font family of tab label text. |
|
|
76
|
+
| `--tabs-item-color` | `currentColor` | color | Text color of inactive tab labels. |
|
|
77
|
+
| `--tabs-item-cursor` | `pointer` | cursor | Cursor style when hovering over a tab item. |
|
|
78
|
+
| `--tabs-item-background` | `transparent` | background | Background of inactive tab items. |
|
|
79
|
+
| `--tabs-item-border-radius` | `0` | border-radius | Corner rounding of individual tab items. |
|
|
80
|
+
| `--tabs-active-color` | `currentColor` | color | Text color of the active tab label. |
|
|
81
|
+
| `--tabs-active-font-weight` | `600` | font-weight | Font weight of the active tab label. |
|
|
82
|
+
| `--tabs-active-background` | `transparent` | background | Background color of the active tab item. |
|
|
83
|
+
| `--tabs-indicator-color` | `currentColor` | background-color | Color of the active tab indicator line. |
|
|
84
|
+
| `--tabs-indicator-height` | `2px` | height | Thickness of the active tab indicator line. |
|
|
85
|
+
| `--tabs-indicator-border-radius` | `2px 2px 0 0` | border-radius | Corner rounding of the active tab indicator. |
|
|
86
|
+
| `--tabs-hover-color` | `currentColor` | color | Text color of tab labels on hover. |
|
|
87
|
+
| `--tabs-hover-background` | `transparent` | background | Background color of tab items on hover. |
|
|
88
|
+
| `--tabs-disabled-opacity` | `0.5` | opacity | Opacity of the entire tab bar when disabled. |
|
|
89
|
+
| `--tabs-disabled-cursor` | `not-allowed` | cursor | Cursor style when the tab bar is disabled. |
|
|
90
|
+
| `--tabs-transition` | `color 0.2s ease, background 0.2s ease` | transition | Transition applied to tab items for smooth state changes. |
|
|
91
|
+
| `--tabs-fade-size` | `32px` | mask-image | Size of the fade-out gradient at scrollable edges. |
|
|
92
|
+
| `--tabs-arrow-size` | `28px` | width | Width of the scroll arrow buttons. |
|
|
93
|
+
| `--tabs-arrow-padding` | `0` | padding | Padding inside the scroll arrow buttons. |
|
|
94
|
+
| `--tabs-arrow-border` | `none` | border | Border of the scroll arrow buttons. |
|
|
95
|
+
| `--tabs-arrow-background` | `var(--tabs-bar-background, #ffffff)` | background | Background color of the scroll arrow buttons. |
|
|
96
|
+
| `--tabs-arrow-color` | `var(--tabs-item-color, currentColor)` | color | Icon color of the scroll arrow buttons. |
|
|
97
|
+
| `--tabs-arrow-transition` | `color 0.2s ease` | transition | Transition applied to scroll arrow buttons. |
|
|
98
|
+
| `--tabs-arrow-hover-color` | `var(--tabs-active-color, currentColor)` | color | Icon color of scroll arrow buttons on hover. |
|
|
99
|
+
| `--tabs-arrow-hover-background` | `var(--tabs-arrow-background, ...)` | background | Background of scroll arrow buttons on hover. |
|
|
100
|
+
|
|
101
|
+
## Web Component
|
|
102
|
+
|
|
103
|
+
Tag: `<pui-tabs>`
|
|
104
|
+
|
|
105
|
+
```html
|
|
106
|
+
<pui-tabs active-index="0"></pui-tabs>
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
### Slots
|
|
110
|
+
|
|
111
|
+
| Slot Name | Maps to Snippet | Description |
|
|
112
|
+
| ------------------- | ----------------- | ------------------------------------------------------------------------------------------------------- |
|
|
113
|
+
| `scroll-left-icon` | `scrollLeftIcon` | Custom icon for the left scroll arrow. |
|
|
114
|
+
| `scroll-right-icon` | `scrollRightIcon` | Custom icon for the right scroll arrow. |
|
|
115
|
+
| `tab` | `tab` | Custom tab content. Receives `label`, `index`, and `active` as slot props. Falls back to label text. |
|
|
116
|
+
|
|
117
|
+
> **Note:** The `items` prop is an array and `tab` is a parameterized Snippet — set them via JavaScript properties.
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
# ThemeSwitcher
|
|
2
|
+
|
|
3
|
+
A theme preference switcher that renders as either a single toggle button or a segmented control. Cycles through configurable options (default: light, dark, system) with animated icon transitions. Persists the user preference to localStorage. Built-in icons are provided for `light`, `dark`, and `system` values; custom options get a generic palette icon, or you can supply your own via the `icon` snippet on each option. This component does NOT apply the theme to the page — it only provides the toggle UI and preference management. The consumer is responsible for applying CSS classes or variables based on the selected value.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```svelte
|
|
8
|
+
<script>
|
|
9
|
+
import { ThemeSwitcher } from 'polymorph-ui-components';
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<!-- Simple toggle between light and dark -->
|
|
13
|
+
<ThemeSwitcher
|
|
14
|
+
options={[{ value: 'light' }, { value: 'dark' }]}
|
|
15
|
+
onchange={(value, resolved) => console.log(value, resolved)}
|
|
16
|
+
/>
|
|
17
|
+
|
|
18
|
+
<!-- Segmented control with light/dark/system (default options) -->
|
|
19
|
+
<ThemeSwitcher mode="segment" />
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
### With Custom Options
|
|
23
|
+
|
|
24
|
+
```svelte
|
|
25
|
+
<ThemeSwitcher
|
|
26
|
+
options={[
|
|
27
|
+
{ value: 'ocean', label: 'Ocean theme' },
|
|
28
|
+
{ value: 'forest', label: 'Forest theme' },
|
|
29
|
+
{ value: 'sunset', label: 'Sunset theme' }
|
|
30
|
+
]}
|
|
31
|
+
mode="segment"
|
|
32
|
+
onchange={(value, resolved) => applyTheme(resolved)}
|
|
33
|
+
/>
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
## Props
|
|
37
|
+
|
|
38
|
+
| Prop | Type | Required | Default | Description |
|
|
39
|
+
| ---------- | ----------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
40
|
+
| options | `ThemeSwitcherOption[]` | No | `[{ value: 'light', label: 'Light theme' }, { value: 'dark', label: 'Dark theme' }, { value: 'system', label: 'System theme' }]` | Array of theme options to display. Each option has a `value`, optional `label`, and optional `icon` snippet. Built-in icons are provided for `'light'`, `'dark'`, and `'system'` values. |
|
|
41
|
+
| value | `string` | No | `'system'` | The initially selected theme value. If not provided, defaults to `'system'`. On mount, a stored preference (if any) takes priority, and an explicit `value` prop overrides the stored preference. |
|
|
42
|
+
| mode | `'toggle' \| 'segment'` | No | (derived) | Controls the switcher variant. `'toggle'` renders a single icon button that cycles through options on click. `'segment'` renders a segmented control with one button per option. If not set, defaults to `'toggle'` when options has 2 or fewer items, `'segment'` otherwise. |
|
|
43
|
+
| storageKey | `string` | No | `'theme-preference'` | The localStorage key used to persist the theme preference. Set to an empty string `''` to disable persistence entirely. |
|
|
44
|
+
| testId | `string` | No | - | Value for the `data-pw` attribute on the root element, used for end-to-end testing selectors. |
|
|
45
|
+
| 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. |
|
|
46
|
+
|
|
47
|
+
## Events
|
|
48
|
+
|
|
49
|
+
| Event | Type | Description |
|
|
50
|
+
| -------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
51
|
+
| onchange | `(value: string, resolvedValue: string) => void` | Fires when the theme selection changes. Receives the selected `value` and the `resolvedValue` (when `value` is `'system'`, `resolvedValue` is the actual system preference; otherwise it mirrors `value`). Also fires on mount with the initial value. |
|
|
52
|
+
|
|
53
|
+
## CSS Variables
|
|
54
|
+
|
|
55
|
+
Override these custom properties to theme the component.
|
|
56
|
+
|
|
57
|
+
### Toggle Mode
|
|
58
|
+
|
|
59
|
+
| Variable | Default | CSS Property | Description |
|
|
60
|
+
| -------------------------------------- | ------------- | ---------------- | ------------------------------------------------------------------ |
|
|
61
|
+
| `--theme-switcher-size` | `36px` | width, height | Size of the toggle button. |
|
|
62
|
+
| `--theme-switcher-border-radius` | `6px` | border-radius | Border radius of the toggle button (also used by segment control). |
|
|
63
|
+
| `--theme-switcher-bg` | `transparent` | background-color | Background color of the toggle button. |
|
|
64
|
+
| `--theme-switcher-bg-hover` | `transparent` | background-color | Background color of the toggle button on hover. |
|
|
65
|
+
| `--theme-switcher-icon-color` | `currentColor` | color | Color of the icons (also used by segment buttons). |
|
|
66
|
+
| `--theme-switcher-transition-duration` | `0.3s` | transition | Duration of the icon animation and all transitions. |
|
|
67
|
+
|
|
68
|
+
### Icons
|
|
69
|
+
|
|
70
|
+
| Variable | Default | CSS Property | Description |
|
|
71
|
+
| ------------------------------------ | --------- | ------------- | --------------------------------------------------- |
|
|
72
|
+
| `--theme-switcher-icon-size` | `18px` | width, height | Size of the theme icons (sun, moon, monitor, etc.). |
|
|
73
|
+
| `--theme-switcher-icon-color-active` | `currentColor` | color | Color of the active/selected icon in segment mode. |
|
|
74
|
+
|
|
75
|
+
### Segment Mode
|
|
76
|
+
|
|
77
|
+
| Variable | Default | CSS Property | Description |
|
|
78
|
+
| ----------------------------------------- | ------------------------------ | ---------------- | ---------------------------------------------------------------------------------- |
|
|
79
|
+
| `--theme-switcher-segment-gap` | `2px` | gap | Gap between segment buttons. |
|
|
80
|
+
| `--theme-switcher-segment-padding` | `4px` | padding | Inner padding of the segmented control track. Also used to position the indicator. |
|
|
81
|
+
| `--theme-switcher-segment-bg` | `transparent` | background-color | Background color of the segmented control track. |
|
|
82
|
+
| `--theme-switcher-segment-border-radius` | `6px` | border-radius | Border radius of the active segment indicator and segment buttons. |
|
|
83
|
+
| `--theme-switcher-segment-active-bg` | `#ffffff` | background-color | Background color of the active segment indicator. |
|
|
84
|
+
| `--theme-switcher-segment-shadow` | `0 1px 2px rgba(0, 0, 0, 0.1)` | box-shadow | Shadow on the active segment indicator. |
|
|
85
|
+
| `--theme-switcher-segment-button-padding` | `6px 10px` | padding | Padding inside each segment button. |
|
|
86
|
+
|
|
87
|
+
## Type Reference
|
|
88
|
+
|
|
89
|
+
Custom types used by this component's props and events:
|
|
90
|
+
|
|
91
|
+
### ThemeSwitcherOption
|
|
92
|
+
|
|
93
|
+
```typescript
|
|
94
|
+
type ThemeSwitcherOption = {
|
|
95
|
+
value: string;
|
|
96
|
+
label?: string;
|
|
97
|
+
icon?: Snippet;
|
|
98
|
+
};
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
### ThemeSwitcherMode
|
|
102
|
+
|
|
103
|
+
```typescript
|
|
104
|
+
type ThemeSwitcherMode = 'toggle' | 'segment';
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
## Web Component
|
|
108
|
+
|
|
109
|
+
Tag: `<pui-theme-switcher>`
|
|
110
|
+
|
|
111
|
+
```html
|
|
112
|
+
<pui-theme-switcher storage-key="my-theme"></pui-theme-switcher>
|
|
113
|
+
|
|
114
|
+
<script>
|
|
115
|
+
const el = document.querySelector('pui-theme-switcher');
|
|
116
|
+
el.options = [
|
|
117
|
+
{ value: 'light', label: 'Light theme' },
|
|
118
|
+
{ value: 'dark', label: 'Dark theme' },
|
|
119
|
+
{ value: 'system', label: 'System theme' }
|
|
120
|
+
];
|
|
121
|
+
el.addEventListener('change', (e) => console.log(e.detail));
|
|
122
|
+
</script>
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
> **Note:** The `options` prop is an array of objects — set it via JavaScript properties, not HTML attributes.
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
# Toast
|
|
2
|
+
|
|
3
|
+
An animated notification that slides in from a configurable direction, stays visible for `duration` milliseconds, then slides out and fires `ontoasthide`. Ships with a neutral default look (dark surface, light text); restyle it via CSS variables like `--toast-background-color` and `--toast-color`, or define your own variant classes and pass them via `classes`. The toast can overlap the page (absolute positioning) or be inline (relative). Has optional left icon, right icon (acts as close button), subtext, and bottom content snippet.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```svelte
|
|
8
|
+
<script>
|
|
9
|
+
import { Toast } from 'polymorph-ui-components';
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<Toast />
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Props
|
|
16
|
+
|
|
17
|
+
| Prop | Type | Required | Default | Description |
|
|
18
|
+
| -------------------- | ------------------------------------------------------------------------------------------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
19
|
+
| duration | `number` | No | `2000` | Time in milliseconds the toast stays visible before automatically hiding. |
|
|
20
|
+
| leftIcon | `string \| null` | No | `-` | URL of an icon displayed on the left side of the toast (e.g., a status icon). |
|
|
21
|
+
| message | `string` | Yes | `''` | The main toast notification text. |
|
|
22
|
+
| subtext | `string \| null` | No | `-` | Optional secondary text displayed below the main message in smaller font. |
|
|
23
|
+
| rightIcon | `string \| null` | No | `-` | URL of an icon displayed on the right side. Acts as a close button — clicking it hides the toast immediately. |
|
|
24
|
+
| direction | `ToastDirection = 'left-to-right' \| 'right-to-left' \| 'top-to-bottom' \| 'bottom-to-top'` | No | `-` | The direction from which the toast slides in/out. Controls the fly animation axis and direction. |
|
|
25
|
+
| overlapPage | `boolean` | No | `true` | When true, the toast is absolutely positioned and overlaps page content. When false, it's relatively positioned and pushes content. |
|
|
26
|
+
| inAnimationOffset | `number \| null` | No | `-` | Pixel offset for the fly-in animation. Higher values mean the toast starts further away. |
|
|
27
|
+
| inAnimationDuration | `number \| null` | No | `-` | Duration in milliseconds for the fly-in animation. |
|
|
28
|
+
| outAnimationOffset | `number \| null` | No | `-` | Pixel offset for the fly-out animation. Higher values mean the toast exits further away. |
|
|
29
|
+
| outAnimationDuration | `number \| null` | No | `-` | Duration in milliseconds for the fly-out animation. |
|
|
30
|
+
| testId | `string \| null` | No | `-` | Value for data-pw on the toast container. |
|
|
31
|
+
| messageTestId | `string` | No | `-` | Value for data-pw on the message element. |
|
|
32
|
+
| subTextTestId | `string` | No | `-` | Value for data-pw on the subtext element. |
|
|
33
|
+
| closeIconTestId | `string` | No | `-` | Value for data-pw on the close (right icon) button. |
|
|
34
|
+
| 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. |
|
|
35
|
+
|
|
36
|
+
## Snippets
|
|
37
|
+
|
|
38
|
+
Svelte 5 Snippet props — pass content blocks to the component.
|
|
39
|
+
|
|
40
|
+
| Snippet | Type | Description |
|
|
41
|
+
| ------------- | --------- | -------------------------------------------------------------------- |
|
|
42
|
+
| bottomContent | `Snippet` | A Svelte 5 Snippet rendered below the message text inside the toast. |
|
|
43
|
+
|
|
44
|
+
## Events
|
|
45
|
+
|
|
46
|
+
| Event | Type | Description |
|
|
47
|
+
| ----------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------- |
|
|
48
|
+
| ontoasthide | `() => void` | Fires after the toast has fully animated out (outro animation complete). Use this to clean up or remove the toast from state. |
|
|
49
|
+
|
|
50
|
+
## CSS Variables
|
|
51
|
+
|
|
52
|
+
Override these custom properties to theme the component.
|
|
53
|
+
|
|
54
|
+
| Variable | Default | CSS Property | Description |
|
|
55
|
+
| -------------------------------------- | --------------------------------------- | ---------------- | ----------------------------------------------------------------------- |
|
|
56
|
+
| `--toast-padding` | `10px` | padding | Padding inside the toast container. |
|
|
57
|
+
| `--toast-font-size` | `14px` | font-size | Font size of the toast text. |
|
|
58
|
+
| `--toast-font-family` | `inherit` | font-family | Font family of the toast text. |
|
|
59
|
+
| `--toast-font-weight` | `-` | font-weight | Font weight of the toast text. |
|
|
60
|
+
| `--toast-height` | `fit-content` | height | Height of the toast container. |
|
|
61
|
+
| `--toast-border-radius` | `8px` | border-radius | Corner rounding of the toast. |
|
|
62
|
+
| `--toast-border` | `none` | border | Border of the toast. |
|
|
63
|
+
| `--toast-border-style` | `-` | border-style | |
|
|
64
|
+
| `--toast-width` | `fit-content` | width | Width of the toast container. |
|
|
65
|
+
| `--toast-align-items` | `center` | align-items | Vertical alignment of content inside the toast. |
|
|
66
|
+
| `--toast-margin` | `0px 10px 10px 10px` | margin | Outer margin of the toast. |
|
|
67
|
+
| `--toast-justify-content` | `space-between` | justify-content | Horizontal alignment of content inside the toast. |
|
|
68
|
+
| `--toast-z-index` | `1000` | z-index | Z-index stacking order of the toast. |
|
|
69
|
+
| `--toast-display` | `flex` | display | Display mode of the toast. |
|
|
70
|
+
| `--toast-position` | `absolute` | position | CSS position of the toast (absolute overlaps page, relative is inline). |
|
|
71
|
+
| `--toast-top` | `10px` | top | Top position of the toast. |
|
|
72
|
+
| `--toast-left` | `0` | left | Left position of the toast. |
|
|
73
|
+
| `--toast-right` | `0` | right | Right position of the toast. |
|
|
74
|
+
| `--toast-background-color` | `#18181b` | background-color | Background color of the toast. |
|
|
75
|
+
| `--toast-color` | `#fff` | color | Text color of the toast. |
|
|
76
|
+
| `--toast-box-shadow` | `0 4px 12px rgba(0, 0, 0, 0.15)` | box-shadow | Drop shadow of the toast. |
|
|
77
|
+
| `--toast-opacity` | `1` | opacity | Opacity of the toast. |
|
|
78
|
+
| `--toast-box-sizing` | `-` | box-sizing | |
|
|
79
|
+
| `--toast-icon-wrapper-width` | `20px` | width | |
|
|
80
|
+
| `--toast-icon-wrapper-height` | `20px` | height | |
|
|
81
|
+
| `--toast-icon-margin` | `0px 6px 0px 0px` | margin | Margin around the left icon. |
|
|
82
|
+
| `--toast-icon-wrapper-padding` | `1px` | padding | |
|
|
83
|
+
| `--toast-icon-height` | `100%` | height | Height of the toast icons. |
|
|
84
|
+
| `--toast-icon-filter` | `none` | filter | CSS filter applied to the toast icons. |
|
|
85
|
+
| `--toast-icon-border-radius` | `50%` | border-radius | Corner rounding of the toast icons. |
|
|
86
|
+
| `--toast-message-display` | `flex` | display | |
|
|
87
|
+
| `--toast-message-flex` | `1` | flex | |
|
|
88
|
+
| `--toast-message-padding` | `1px` | padding | |
|
|
89
|
+
| `--toast-subtext-color` | `inherit` | color | Color of the subtext. |
|
|
90
|
+
| `--toast-subtext-font-size` | `inherit` | font-size | Font size of the subtext. |
|
|
91
|
+
| `--toast-subtext-font-weight` | `inherit` | font-weight | Font weight of the subtext. |
|
|
92
|
+
| `--toast-subtext-margin` | `10px 0px 0px 0px` | margin | Margin around the subtext. |
|
|
93
|
+
| `--toast-close-button-width` | `20px` | width | Width of the close (right icon) button area. |
|
|
94
|
+
| `--toast-close-button-height` | `20px` | height | Height of the close button area. |
|
|
95
|
+
| `--toast-close-button-cursor` | `pointer` | cursor | Cursor of the close button. |
|
|
96
|
+
| `--toast-close-button-gap` | `6px` | gap | |
|
|
97
|
+
| `--toast-close-button-margin` | `0px 0px 0px 10px` | margin | Margin around the close button. |
|
|
98
|
+
| `--toast-close-button-display` | `flex` | display | |
|
|
99
|
+
| `--toast-close-button-align-items` | `center` | align-items | |
|
|
100
|
+
| `--toast-close-button-justify-content` | `center` | justify-content | |
|
|
101
|
+
| `--toast-close-button-padding` | `1px` | padding | |
|
|
102
|
+
|
|
103
|
+
> **Variants:** there are no built-in `type` presets. Define your own variant classes that set these CSS variables and pass them via `classes`:
|
|
104
|
+
>
|
|
105
|
+
> ```css
|
|
106
|
+
> .toast-success {
|
|
107
|
+
> --toast-background-color: #24aa5a;
|
|
108
|
+
> --toast-color: #fff;
|
|
109
|
+
> }
|
|
110
|
+
> ```
|
|
111
|
+
>
|
|
112
|
+
> ```svelte
|
|
113
|
+
> <Toast message="Saved!" classes="toast-success" />
|
|
114
|
+
> ```
|
|
115
|
+
|
|
116
|
+
## Type Reference
|
|
117
|
+
|
|
118
|
+
Custom types used by this component's props and events:
|
|
119
|
+
|
|
120
|
+
### ToastDirection
|
|
121
|
+
|
|
122
|
+
```typescript
|
|
123
|
+
type ToastDirection = 'left-to-right' | 'right-to-left' | 'top-to-bottom' | 'bottom-to-top';
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
## Web Component
|
|
127
|
+
|
|
128
|
+
Tag: `<pui-toast>`
|
|
129
|
+
|
|
130
|
+
```html
|
|
131
|
+
<pui-toast message="Saved!" class="toast-success" duration="3000">
|
|
132
|
+
<a slot="bottom-content" href="/undo">Undo</a>
|
|
133
|
+
</pui-toast>
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
### Slots
|
|
137
|
+
|
|
138
|
+
| Slot Name | Maps to Snippet | Description |
|
|
139
|
+
| ---------------- | --------------- | ----------------------------------------- |
|
|
140
|
+
| `bottom-content` | `bottomContent` | Content rendered below the toast message. |
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
# Toggle
|
|
2
|
+
|
|
3
|
+
A labeled on/off switch with sliding ball animation. The `checked` prop controls the toggle state and the `onclick` event returns the new boolean state after toggling. The text label can be positioned relative to the switch using CSS order.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```svelte
|
|
8
|
+
<script>
|
|
9
|
+
import { Toggle } from 'polymorph-ui-components';
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<Toggle />
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Props
|
|
16
|
+
|
|
17
|
+
| Prop | Type | Required | Default | Description |
|
|
18
|
+
| ------- | --------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
19
|
+
| checked | `boolean` | No | `false` | The current on/off state of the toggle switch. |
|
|
20
|
+
| text | `string` | Yes | `''` | Label text displayed next to the toggle switch. |
|
|
21
|
+
| testId | `string` | No | `-` | Test selector value applied as `data-pw` on the outermost element. |
|
|
22
|
+
| 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. |
|
|
23
|
+
|
|
24
|
+
## Events
|
|
25
|
+
|
|
26
|
+
| Event | Type | Description |
|
|
27
|
+
| ------- | ---------------------------- | ------------------------------------------------------------------------------------------------------ |
|
|
28
|
+
| onclick | `(checked: boolean) => void` | Fires after the toggle state changes. Receives the new boolean checked value (true = on, false = off). |
|
|
29
|
+
|
|
30
|
+
## CSS Variables
|
|
31
|
+
|
|
32
|
+
Override these custom properties to theme the component.
|
|
33
|
+
|
|
34
|
+
| Variable | Default | CSS Property | Description |
|
|
35
|
+
| ----------------------------------------- | ----------------- | ------------------ | ------------------------------------------------------------ |
|
|
36
|
+
| `--toggle-container-display` | `flex` | display | Display mode of the toggle container. |
|
|
37
|
+
| `--toggle-container-align-items` | `center` | align-items | Vertical alignment of switch and label. |
|
|
38
|
+
| `--toggle-container-gap` | `8px` | gap | Gap between the switch and label text. |
|
|
39
|
+
| `--toggle-text-font-size` | `14px` | font-size | Font size of the label text. |
|
|
40
|
+
| `--toggle-text-font-weight` | `400` | font-weight | Font weight of the label text. |
|
|
41
|
+
| `--toggle-text-color` | `inherit` | color | Color of the label text. |
|
|
42
|
+
| `--toggle-text-margin` | `0px 8px 0px 0px` | margin | Margin around the label text. |
|
|
43
|
+
| `--toggle-text-order` | `0` | order | Flex order of the label (0 = before switch, higher = after). |
|
|
44
|
+
| `--toggle-switch-width` | `46px` | width | Width of the toggle switch track. |
|
|
45
|
+
| `--toggle-switch-height` | `25px` | height | Height of the toggle switch track. |
|
|
46
|
+
| `--toggle-slider-top` | `0` | top | Top position of the slider track. |
|
|
47
|
+
| `--toggle-slider-left` | `0` | left | Left position of the slider track. |
|
|
48
|
+
| `--toggle-slider-right` | `0` | right | Right position of the slider track. |
|
|
49
|
+
| `--toggle-slider-bottom` | `0` | bottom | Bottom position of the slider track. |
|
|
50
|
+
| `--toggle-slider-unchecked-color` | `#e4e4e7` | background-color | Background color of the track when unchecked (off). |
|
|
51
|
+
| `--toggle-slider-border` | `none` | border | Border of the slider track. |
|
|
52
|
+
| `--toggle-slider-transition` | `0.4s` | -webkit-transition | Transition duration for the sliding animation. |
|
|
53
|
+
| `--toggle-ball-height` | `23px` | height | Height of the sliding ball/thumb. |
|
|
54
|
+
| `--toggle-ball-width` | `23px` | width | Width of the sliding ball/thumb. |
|
|
55
|
+
| `--toggle-slider-before-left` | `2px` | left | Left position of the ball when unchecked. |
|
|
56
|
+
| `--toggle-slider-before-bottom` | `1px` | bottom | Bottom position of the ball. |
|
|
57
|
+
| `--toggle-slider-before-top` | `1px` | top | Top position of the ball. |
|
|
58
|
+
| `--toggle-slider-before-background-color` | `#ffffff` | background-color | Background color of the ball/thumb. |
|
|
59
|
+
| `--toggle-slider-checked-color` | `#18181b` | background-color | Background color of the track when checked (on). |
|
|
60
|
+
| `--toggle-slider-focus-shadow` | `0 0 1px currentColor` | box-shadow | Focus ring shadow shown when the switch is focused. |
|
|
61
|
+
| `--toggle-slider-border-radius` | `23px` | border-radius | Corner rounding of the slider track. |
|
|
62
|
+
| `--toggle-slider-border-radius-before` | `50%` | border-radius | Corner rounding of the ball/thumb. |
|
|
63
|
+
|
|
64
|
+
## Web Component
|
|
65
|
+
|
|
66
|
+
Tag: `<pui-toggle>`
|
|
67
|
+
|
|
68
|
+
```html
|
|
69
|
+
<pui-toggle text="Dark mode" checked></pui-toggle>
|
|
70
|
+
```
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
# Toolbar
|
|
2
|
+
|
|
3
|
+
A sticky header bar with a back button (left), center title text, and customizable left/center/right content areas via Snippet slots. The `additionalContent` snippet renders a second row below the main toolbar content. If `leftContent` snippet is provided, it replaces the default back button. If `centerContent` snippet is provided, it replaces the `text` prop.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```svelte
|
|
8
|
+
<script>
|
|
9
|
+
import { Toolbar } from 'polymorph-ui-components';
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<Toolbar />
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Props
|
|
16
|
+
|
|
17
|
+
| Prop | Type | Required | Default | Description |
|
|
18
|
+
| -------------- | ---------------- | -------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
19
|
+
| showBackButton | `boolean` | No | `true` | Whether to show the default back button on the left side. Only shown when leftContent snippet is not provided. |
|
|
20
|
+
| text | `string \| null` | No | `-` | Title text displayed in the center of the toolbar. Only shown when centerContent snippet is not provided. |
|
|
21
|
+
| backIcon | `string \| null` | No | `-` | URL for a custom back-button icon image. When omitted, a bundled back-arrow SVG (themeable via `currentColor`) is rendered. |
|
|
22
|
+
| testId | `string` | No | `-` | Test selector value applied as `data-pw` on the outermost element. |
|
|
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
|
+
| leftContent | `Snippet` | A Svelte 5 Snippet that replaces the default back button with custom left-side content. |
|
|
32
|
+
| centerContent | `Snippet` | A Svelte 5 Snippet that replaces the text prop with custom center content. |
|
|
33
|
+
| rightContent | `Snippet` | A Svelte 5 Snippet for right-side content (e.g., action icons). |
|
|
34
|
+
| additionalContent | `Snippet` | A Svelte 5 Snippet for a second row of content below the main toolbar row (e.g., search bar, tabs). |
|
|
35
|
+
|
|
36
|
+
## Events
|
|
37
|
+
|
|
38
|
+
| Event | Type | Description |
|
|
39
|
+
| ----------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
|
|
40
|
+
| onbackclick | `() => void` | Fires when the default back button is clicked. Only relevant when showBackButton is true and leftContent snippet is not provided. |
|
|
41
|
+
| onkeydown | `(event: KeyboardEvent) => void` | Fires when a key is pressed while the back button has focus. |
|
|
42
|
+
|
|
43
|
+
## CSS Variables
|
|
44
|
+
|
|
45
|
+
Override these custom properties to theme the component.
|
|
46
|
+
|
|
47
|
+
| Variable | Default | CSS Property | Description |
|
|
48
|
+
| ----------------------------------------- | ------------------------ | --------------- | ---------------------------------------------------- |
|
|
49
|
+
| `--toolbar-padding` | `0px` | padding | Inner padding of the toolbar container. |
|
|
50
|
+
| `--toolbar-height` | `fit-content` | height | Height of the toolbar. |
|
|
51
|
+
| `--toolbar-width` | `100%` | width | Width of the toolbar. |
|
|
52
|
+
| `--toolbar-position` | `sticky` | position | CSS position (sticky by default; pins to the top of its scroll container). Override with `fixed` to pin to the viewport. |
|
|
53
|
+
| `--toolbar-top` | `0` | top | Top position of the toolbar. |
|
|
54
|
+
| `--toolbar-left` | `0` | left | Left position of the toolbar. |
|
|
55
|
+
| `--toolbar-right` | `0` | right | Right position of the toolbar. |
|
|
56
|
+
| `--toolbar-background` | `#ffffff` | background | Background color of the toolbar. |
|
|
57
|
+
| `--toolbar-box-shadow` | `0px 2px 12px rgba(0, 0, 0, 0.1)` | box-shadow | Box shadow of the toolbar. |
|
|
58
|
+
| `--toolbar-z-index` | `10` | z-index | Z-index stacking order of the toolbar. |
|
|
59
|
+
| `--toolbar-border-radius` | `0px` | border-radius | Corner rounding of the toolbar. |
|
|
60
|
+
| `--toolbar-content-padding` | `0px` | padding | Padding inside the main content row. |
|
|
61
|
+
| `--toolbar-justify-content` | `normal` | justify-content | Horizontal alignment of toolbar content. |
|
|
62
|
+
| `--toolbar-content-visibility` | `visible` | visibility | Visibility of the main content row. |
|
|
63
|
+
| `--toolbar-additional-content-padding` | `0px` | padding | Padding inside the additional content row. |
|
|
64
|
+
| `--toolbar-additional-content-height` | `fit-content` | height | Height of the additional content row. |
|
|
65
|
+
| `--toolbar-justify-additional-content` | `normal` | justify-content | Horizontal alignment of additional content. |
|
|
66
|
+
| `--toolbar-additional-content-visibility` | `visible` | visibility | Visibility of the additional content row. |
|
|
67
|
+
| `--toolbar-back-button-height` | `20px` | height | Height of the back button container. |
|
|
68
|
+
| `--toolbar-back-button-width` | `20px` | width | Width of the back button container. |
|
|
69
|
+
| `--toolbar-back-button-padding` | `20px 14px` | padding | Padding around the back button. |
|
|
70
|
+
| `--toolbar-back-button-cursor` | `pointer` | cursor | Cursor style for the back button. |
|
|
71
|
+
| `--toolbar-back-image-height` | `16px` | height | Height of the back button icon image. |
|
|
72
|
+
| `--toolbar-back-image-width` | `16px` | width | Width of the back button icon image. |
|
|
73
|
+
| `--toolbar-text-font-size` | `inherit` | font-size | Font size of the center title text. |
|
|
74
|
+
| `--toolbar-text-font-weight` | `normal` | font-weight | Font weight of the center title text. |
|
|
75
|
+
| `--toolbar-text-padding` | `0px` | padding | Padding around the center title text. |
|
|
76
|
+
| `--toolbar-text-margin` | `0px` | margin | Margin around the center title text. |
|
|
77
|
+
| `--toolbar-text-color` | `-` | color | Color of the center title text. |
|
|
78
|
+
| `--toolbar-text-flex` | `1` | flex | Flex value of the center title text. |
|
|
79
|
+
|
|
80
|
+
## Web Component
|
|
81
|
+
|
|
82
|
+
Tag: `<pui-toolbar>`
|
|
83
|
+
|
|
84
|
+
```html
|
|
85
|
+
<pui-toolbar text="Page Title" show-back-button>
|
|
86
|
+
<button slot="left-content">Menu</button>
|
|
87
|
+
<span slot="center-content">Title</span>
|
|
88
|
+
<button slot="right-content">Settings</button>
|
|
89
|
+
<div slot="additional-content">Breadcrumbs</div>
|
|
90
|
+
</pui-toolbar>
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
### Slots
|
|
94
|
+
|
|
95
|
+
| Slot Name | Maps to Snippet | Description |
|
|
96
|
+
| -------------------- | ------------------- | ---------------------------------------------- |
|
|
97
|
+
| `left-content` | `leftContent` | Content on the left side of the toolbar. |
|
|
98
|
+
| `center-content` | `centerContent` | Content in the center of the toolbar. |
|
|
99
|
+
| `right-content` | `rightContent` | Content on the right side of the toolbar. |
|
|
100
|
+
| `additional-content` | `additionalContent` | Additional content below the main toolbar row. |
|