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,45 @@
|
|
|
1
|
+
# Accordion
|
|
2
|
+
|
|
3
|
+
An expandable/collapsible container that uses CSS grid row animation for smooth open/close transitions. When `expand` is true, the content is visible (grid-template-rows: 1fr); when false, it collapses to 0fr. Transition takes 0.2s ease-out. Render children content using the default `children` snippet.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```svelte
|
|
8
|
+
<script>
|
|
9
|
+
import { Accordion } from 'polymorph-ui-components';
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<Accordion />
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Props
|
|
16
|
+
|
|
17
|
+
| Prop | Type | Required | Default | Description |
|
|
18
|
+
| ------- | --------- | -------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
19
|
+
| expand | `boolean` | No | `false` | Controls whether the accordion content is expanded (visible) or collapsed (hidden). Uses CSS grid animation. |
|
|
20
|
+
| testId | `string` | No | `-` | Value applied to the `data-pw` attribute for Playwright test selectors. |
|
|
21
|
+
| 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. |
|
|
22
|
+
|
|
23
|
+
## Snippets
|
|
24
|
+
|
|
25
|
+
Svelte 5 Snippet props — pass content blocks to the component.
|
|
26
|
+
|
|
27
|
+
| Snippet | Type | Description |
|
|
28
|
+
| -------- | --------- | ----------------------------------------------- |
|
|
29
|
+
| children | `Snippet` | Content rendered inside the accordion panel. |
|
|
30
|
+
|
|
31
|
+
## Web Component
|
|
32
|
+
|
|
33
|
+
Tag: `<pui-accordion>`
|
|
34
|
+
|
|
35
|
+
```html
|
|
36
|
+
<pui-accordion expand>
|
|
37
|
+
<p>Expandable content here</p>
|
|
38
|
+
</pui-accordion>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### Slots
|
|
42
|
+
|
|
43
|
+
| Slot Name | Maps to Snippet | Description |
|
|
44
|
+
| ----------- | --------------- | ------------------------------------------- |
|
|
45
|
+
| _(default)_ | `children` | Content rendered inside the accordion body. |
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
# Avatar
|
|
2
|
+
|
|
3
|
+
A circular avatar component that displays a user's profile image or falls back to generated initials when no image is available or the image fails to load. Commonly used in user profiles, comment sections, and contact lists.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```svelte
|
|
8
|
+
<script>
|
|
9
|
+
import { Avatar } from 'polymorph-ui-components';
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<!-- With image -->
|
|
13
|
+
<Avatar src="https://example.com/photo.jpg" alt="Jane Doe" name="Jane Doe" />
|
|
14
|
+
|
|
15
|
+
<!-- Initials fallback (no src provided) -->
|
|
16
|
+
<Avatar alt="Jane Doe" name="Jane Doe" size="large" />
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Props
|
|
20
|
+
|
|
21
|
+
| Prop | Type | Required | Default | Description |
|
|
22
|
+
| ------- | ------------ | -------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
23
|
+
| alt | `string` | Yes | `-` | Alt text for the avatar image. Used for accessibility. |
|
|
24
|
+
| src | `string` | No | `-` | URL of the avatar image. When omitted or when the image fails to load, initials derived from `name` are displayed instead. |
|
|
25
|
+
| name | `string` | No | `-` | Full name used to generate initials for the fallback display. Initials are formed from the first letter of the first word and the first letter of the last word. |
|
|
26
|
+
| size | `AvatarSize` | No | `'medium'` | Controls the avatar dimensions. One of `'small'`, `'medium'`, or `'large'`. Actual pixel sizes are controlled via CSS variables. |
|
|
27
|
+
| testId | `string` | No | `-` | Value applied to the `data-pw` attribute for Playwright test selectors. |
|
|
28
|
+
| 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. |
|
|
29
|
+
|
|
30
|
+
## Events
|
|
31
|
+
|
|
32
|
+
| Event | Type | Description |
|
|
33
|
+
| ------- | ----------------------------- | -------------------------------------------------------------------------------------------- |
|
|
34
|
+
| onclick | `(event: MouseEvent) => void` | Fires when the avatar is clicked. Useful for opening a profile view or triggering an action. |
|
|
35
|
+
|
|
36
|
+
## CSS Variables
|
|
37
|
+
|
|
38
|
+
Override these custom properties to theme the component.
|
|
39
|
+
|
|
40
|
+
| Variable | Default | CSS Property | Description |
|
|
41
|
+
| --------------------------- | --------- | ---------------- | ------------------------------------------------------------------------------ |
|
|
42
|
+
| `--avatar-small-width` | `32px` | width | Width of the avatar when size is `'small'`. |
|
|
43
|
+
| `--avatar-small-height` | `32px` | height | Height of the avatar when size is `'small'`. |
|
|
44
|
+
| `--avatar-medium-width` | `40px` | width | Width of the avatar when size is `'medium'`. |
|
|
45
|
+
| `--avatar-medium-height` | `40px` | height | Height of the avatar when size is `'medium'`. |
|
|
46
|
+
| `--avatar-large-width` | `56px` | width | Width of the avatar when size is `'large'`. |
|
|
47
|
+
| `--avatar-large-height` | `56px` | height | Height of the avatar when size is `'large'`. |
|
|
48
|
+
| `--avatar-border-radius` | `50%` | border-radius | Corner rounding of the avatar. Defaults to a full circle. |
|
|
49
|
+
| `--avatar-border` | `none` | border | Border around the avatar container. |
|
|
50
|
+
| `--avatar-box-shadow` | `none` | box-shadow | Shadow effect around the avatar container. |
|
|
51
|
+
| `--avatar-cursor` | `default` | cursor | Cursor style when hovering over the avatar. |
|
|
52
|
+
| `--avatar-object-fit` | `cover` | object-fit | How the avatar image fills its container. |
|
|
53
|
+
| `--avatar-background` | `#a1a1aa` | background-color | Background color shown behind initials when no image is displayed. |
|
|
54
|
+
| `--avatar-text-color` | `#18181b` | color | Text color of the initials. |
|
|
55
|
+
| `--avatar-small-font-size` | `12px` | font-size | Font size of initials when size is `'small'`. |
|
|
56
|
+
| `--avatar-medium-font-size` | `14px` | font-size | Font size of initials when size is `'medium'`. |
|
|
57
|
+
| `--avatar-large-font-size` | `20px` | font-size | Font size of initials when size is `'large'`. |
|
|
58
|
+
| `--avatar-font-weight` | `600` | font-weight | Font weight of the initials text. |
|
|
59
|
+
| `--avatar-font-family` | `inherit` | font-family | Font family of the initials text. |
|
|
60
|
+
| `--avatar-hover-opacity` | `1` | opacity | Opacity of the avatar on hover. Set below 1 to create a hover feedback effect. |
|
|
61
|
+
|
|
62
|
+
## Type Reference
|
|
63
|
+
|
|
64
|
+
```typescript
|
|
65
|
+
type AvatarSize = 'small' | 'medium' | 'large';
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
## Internal Dependencies
|
|
69
|
+
|
|
70
|
+
This component uses the following library components internally:
|
|
71
|
+
|
|
72
|
+
- Img (for image rendering with fallback support)
|
|
73
|
+
|
|
74
|
+
## Web Component
|
|
75
|
+
|
|
76
|
+
Tag: `<pui-avatar>`
|
|
77
|
+
|
|
78
|
+
```html
|
|
79
|
+
<pui-avatar src="/photo.jpg" alt="User" size="medium"></pui-avatar>
|
|
80
|
+
```
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
# Badge
|
|
2
|
+
|
|
3
|
+
An icon with a numeric/text badge overlay positioned in the top-right corner. Displays an image with a small badge bubble containing the `value` text. Commonly used for notification counts on icons.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```svelte
|
|
8
|
+
<script>
|
|
9
|
+
import { Badge } from 'polymorph-ui-components';
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<Badge />
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Props
|
|
16
|
+
|
|
17
|
+
| Prop | Type | Required | Default | Description |
|
|
18
|
+
| ------- | -------- | -------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
19
|
+
| image | `string` | Yes | `-` | URL of the main icon/image behind the badge. |
|
|
20
|
+
| value | `string` | Yes | `-` | Text displayed inside the badge bubble (e.g., notification count like '3' or '99+'). |
|
|
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 (e.g., `.btn-primary { --button-color: #0070f3; }`) and pass them to create variant styles. |
|
|
23
|
+
|
|
24
|
+
## CSS Variables
|
|
25
|
+
|
|
26
|
+
Override these custom properties to theme the component.
|
|
27
|
+
|
|
28
|
+
| Variable | Default | CSS Property | Description |
|
|
29
|
+
| ------------------------------ | ----------------------- | ---------------- | ------------------------------------------------- |
|
|
30
|
+
| `--badge-wrap-margin` | `0px 12px 10px 0px` | margin | Outer margin of the badge wrapper. |
|
|
31
|
+
| `--badge-wrap-padding` | `8px 8px 8px 8px` | padding | Inner padding of the badge wrapper. |
|
|
32
|
+
| `--badge-color` | `#fff` | color | Text color inside the badge bubble. |
|
|
33
|
+
| `--badge-background` | `#18181b` | background-color | Background color of the badge bubble. |
|
|
34
|
+
| `--badge-font-size` | `12px` | font-size | Font size of the badge text. |
|
|
35
|
+
| `--badge-font-family` | `inherit` | font-family | Font family of the badge text. |
|
|
36
|
+
| `--badge-padding` | `3px 8px` | padding | Padding inside the badge bubble. |
|
|
37
|
+
| `--badge-border-radius` | `100px` | border-radius | Corner rounding of the badge bubble. |
|
|
38
|
+
| `--badge-min-width` | `18px` | min-width | Minimum width of the badge bubble. |
|
|
39
|
+
| `--badge-min-height` | `18px` | min-height | Minimum height of the badge bubble. |
|
|
40
|
+
| `--badge-border` | `1px solid #fff` | border | Border of the badge bubble. |
|
|
41
|
+
| `--badge-top` | `0` | top | Top position of the badge relative to the icon. |
|
|
42
|
+
| `--badge-right` | `0` | right | Right position of the badge relative to the icon. |
|
|
43
|
+
| `--badge-bottom` | `-` | bottom | Bottom position of the badge. |
|
|
44
|
+
| `--badge-left` | `-` | left | Left position of the badge. |
|
|
45
|
+
| `--badge-img-border-radius` | `6px` | border-radius | Corner rounding of the main icon image. |
|
|
46
|
+
| `--badge-img-width` | `64px` | width | Width of the main icon image. |
|
|
47
|
+
| `--badge-img-height` | `64px` | height | Height of the main icon image. |
|
|
48
|
+
| `--badge-object-fit` | `contain` | object-fit | Object-fit of the main icon image. |
|
|
49
|
+
| `--badge-img-icon-shadow` | `0 0 0 0.5px currentColor` | box-shadow | Box shadow of the main icon image. |
|
|
50
|
+
| `--badge-img-background-color` | `-` | background-color | Background color behind the main icon image. |
|
|
51
|
+
|
|
52
|
+
## Web Component
|
|
53
|
+
|
|
54
|
+
Tag: `<pui-badge>`
|
|
55
|
+
|
|
56
|
+
```html
|
|
57
|
+
<pui-badge image="/icon.png" value="3"></pui-badge>
|
|
58
|
+
```
|
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
# Banner
|
|
2
|
+
|
|
3
|
+
A notification banner with optional icon snippet, text content, inline link text, right content slot, and a dismissible close button. Supports click interaction with keyboard accessibility (Enter/Space triggers click, `role="button"` + `tabindex` added automatically when `onclick` is provided). Uses a `slide` transition when showing/hiding. The `visible` prop is bindable for two-way dismiss state control. Good for promotional messages, alerts, or announcements.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```svelte
|
|
8
|
+
<script>
|
|
9
|
+
import { Banner } from 'polymorph-ui-components';
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<Banner
|
|
13
|
+
text="New version available"
|
|
14
|
+
linkText="Update now"
|
|
15
|
+
dismissible
|
|
16
|
+
onclick={() => console.log('banner clicked')}
|
|
17
|
+
ondismiss={() => console.log('dismissed')}
|
|
18
|
+
/>
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
### With Custom Icon
|
|
22
|
+
|
|
23
|
+
```svelte
|
|
24
|
+
<Banner text="Deployment successful">
|
|
25
|
+
{#snippet icon()}
|
|
26
|
+
<svg>...</svg>
|
|
27
|
+
{/snippet}
|
|
28
|
+
</Banner>
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
### With Right Content
|
|
32
|
+
|
|
33
|
+
```svelte
|
|
34
|
+
<Banner text="Trial ends in 3 days">
|
|
35
|
+
{#snippet rightContent()}
|
|
36
|
+
<button>Upgrade</button>
|
|
37
|
+
{/snippet}
|
|
38
|
+
</Banner>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## Props
|
|
42
|
+
|
|
43
|
+
| Prop | Type | Required | Default | Description |
|
|
44
|
+
| ----------- | --------- | -------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
45
|
+
| text | `string` | Yes | `-` | The main banner message text. |
|
|
46
|
+
| icon | `Snippet` | No | `-` | Svelte 5 Snippet for a custom icon displayed to the left of the text. Replaces the old `string` image URL prop. |
|
|
47
|
+
| linkText | `string` | No | `-` | Optional link text appended inline after the main text, styled via `--banner-link-color` (defaults to `currentColor`). |
|
|
48
|
+
| dismissible | `boolean` | No | `false` | Whether to show a close/dismiss button on the right side of the banner. |
|
|
49
|
+
| visible | `boolean` | No | `true` | Bindable. Controls whether the banner is visible. When `dismissible` is true, clicking the dismiss button sets this to `false`. Supports two-way binding via `bind:visible`. |
|
|
50
|
+
| testId | `string` | No | `-` | Value for the `data-pw` attribute on the banner container. The dismiss button gets `{testId}-dismiss`. Used for Playwright selectors. |
|
|
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` | Custom icon content displayed to the left of the text. Rendered inside a flex container with configurable size via `--banner-icon-size`. |
|
|
60
|
+
| rightContent | `Snippet` | Custom content on the right side of the banner, before the dismiss button. |
|
|
61
|
+
| dismissIcon | `Snippet` | Custom icon for the dismiss button. Defaults to a built-in close (X) SVG. |
|
|
62
|
+
|
|
63
|
+
## Events
|
|
64
|
+
|
|
65
|
+
| Event | Type | Description |
|
|
66
|
+
| --------- | ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
67
|
+
| onclick | `(event: MouseEvent) => void` | Fires when anywhere on the banner is clicked. When provided, the banner becomes interactive with `role="button"`, `tabindex="0"`, and keyboard support (Enter/Space). |
|
|
68
|
+
| ondismiss | `() => void` | Fires after the banner is dismissed (visible set to false). The click event is stopped from propagating to the banner's onclick handler. |
|
|
69
|
+
|
|
70
|
+
## CSS Variables
|
|
71
|
+
|
|
72
|
+
Override these custom properties to theme the component.
|
|
73
|
+
|
|
74
|
+
| Variable | Default | CSS Property | Description |
|
|
75
|
+
| ----------------------------------- | -------------------- | ---------------- | ------------------------------------------------------------------------- |
|
|
76
|
+
| `--banner-width` | `100%` | width | Width of the banner. |
|
|
77
|
+
| `--banner-height` | `-` | height | Height of the banner. |
|
|
78
|
+
| `--banner-padding` | `10px 12px` | padding | Inner padding of the banner. |
|
|
79
|
+
| `--banner-gap` | `8px` | gap | Gap between banner content elements (icon, text, right content, dismiss). |
|
|
80
|
+
| `--banner-justify-content` | `center` | justify-content | Horizontal alignment of banner content. |
|
|
81
|
+
| `--banner-background` | `transparent` | background-color | Background color of the banner. |
|
|
82
|
+
| `--banner-color` | `currentColor` | color | Text color of the banner. |
|
|
83
|
+
| `--banner-font-family` | `-` | font-family | Font family of the banner text. |
|
|
84
|
+
| `--banner-font-size` | `14px` | font-size | Font size of the banner text. |
|
|
85
|
+
| `--banner-font-weight` | `500` | font-weight | Font weight of the banner text. |
|
|
86
|
+
| `--banner-line-height` | `1.3` | line-height | Line height of the banner text. |
|
|
87
|
+
| `--banner-border-bottom` | `none` | border-bottom | Bottom border of the banner. |
|
|
88
|
+
| `--banner-cursor` | `pointer` | cursor | Cursor style when hovering the banner. |
|
|
89
|
+
| `--banner-position` | `sticky` | position | CSS position of the banner (sticky sticks to viewport on scroll). |
|
|
90
|
+
| `--banner-top` | `0` | top | Top position of the banner. |
|
|
91
|
+
| `--banner-z-index` | `100` | z-index | Z-index stacking order of the banner. |
|
|
92
|
+
| `--banner-text-overflow` | `hidden` | overflow | Overflow behavior of the banner text. |
|
|
93
|
+
| `--banner-text-ellipsis` | `ellipsis` | text-overflow | Text-overflow behavior of the banner text. |
|
|
94
|
+
| `--banner-white-space` | `nowrap` | white-space | White-space handling of the banner text. |
|
|
95
|
+
| `--banner-icon-color` | `currentColor` | color | Color of the icon container. |
|
|
96
|
+
| `--banner-icon-size` | `18px` | width, height | Width and height of SVGs inside the icon snippet. |
|
|
97
|
+
| `--banner-link-color` | `currentColor` | color | Color of the inline link text. |
|
|
98
|
+
| `--banner-link-gap` | `4px` | margin-left | Space between the main text and the link text. |
|
|
99
|
+
| `--banner-dismiss-border-radius` | `6px` | border-radius | Border radius of the dismiss button. |
|
|
100
|
+
| `--banner-dismiss-color` | `currentColor` | color | Color of the dismiss button icon. |
|
|
101
|
+
| `--banner-dismiss-hover-background` | `rgba(0, 0, 0, 0.1)` | background-color | Background color of the dismiss button on hover. |
|
|
102
|
+
| `--banner-dismiss-size` | `14px` | width, height | Width and height of the dismiss button icon SVG. |
|
|
103
|
+
|
|
104
|
+
## Accessibility
|
|
105
|
+
|
|
106
|
+
- When `onclick` is provided, the banner gets `role="button"` and `tabindex="0"` for keyboard interaction.
|
|
107
|
+
- Enter and Space keys trigger the banner's click handler.
|
|
108
|
+
- The dismiss button has `aria-label="Dismiss"`.
|
|
109
|
+
- Uses Svelte's `slide` transition for smooth show/hide animation.
|
|
110
|
+
|
|
111
|
+
## Internal Dependencies
|
|
112
|
+
|
|
113
|
+
This component uses the following library components internally:
|
|
114
|
+
|
|
115
|
+
- Button (for the dismiss button)
|
|
116
|
+
|
|
117
|
+
## Web Component
|
|
118
|
+
|
|
119
|
+
Tag: `<pui-banner>`
|
|
120
|
+
|
|
121
|
+
```html
|
|
122
|
+
<pui-banner text="Update available" dismissible>
|
|
123
|
+
<svg slot="icon">...</svg>
|
|
124
|
+
<a slot="right-content" href="/update">Update now</a>
|
|
125
|
+
</pui-banner>
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
### Slots
|
|
129
|
+
|
|
130
|
+
| Slot Name | Maps to Snippet | Description |
|
|
131
|
+
| --------------- | --------------- | ------------------------------------------------- |
|
|
132
|
+
| `icon` | `icon` | Icon content rendered at the start of the banner. |
|
|
133
|
+
| `right-content` | `rightContent` | Content rendered on the right side. |
|
|
134
|
+
| `dismiss-icon` | `dismissIcon` | Custom dismiss/close icon. |
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
# Book
|
|
2
|
+
|
|
3
|
+
A page-flip presentation component that displays content in a book-like format with page navigation. Pages are provided as an array of `BookPage` objects. Supports previous/next arrow navigation, clickable page indicator dots, keyboard navigation (ArrowLeft/ArrowRight), and optional swipe/drag gestures. The `currentPage` prop is bindable for two-way page tracking. Transitions between pages can be "slide" (default), "fade", or "none".
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```svelte
|
|
8
|
+
<script>
|
|
9
|
+
import { Book } from 'polymorph-ui-components';
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<Book
|
|
13
|
+
pages={[
|
|
14
|
+
{ content: myPageSnippet1, title: 'Introduction' },
|
|
15
|
+
{ content: myPageSnippet2, title: 'Details' }
|
|
16
|
+
]}
|
|
17
|
+
/>
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## Props
|
|
21
|
+
|
|
22
|
+
| Prop | Type | Required | Default | Description |
|
|
23
|
+
| ----------------- | ---------------- | -------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
24
|
+
| pages | `BookPage[]` | Yes | `-` | Array of BookPage objects. Each contains a Snippet for the page content and an optional title string. |
|
|
25
|
+
| currentPage | `number` | No | `0` | The 0-indexed page currently displayed. Bindable for two-way sync with parent. |
|
|
26
|
+
| transition | `BookTransition` | No | `'slide'` | Animation style when changing pages. "slide" translates horizontally, "fade" cross-fades, "none" switches instantly. |
|
|
27
|
+
| showNavigation | `boolean` | No | `true` | When true, shows previous/next arrow buttons on the left and right sides of the book. |
|
|
28
|
+
| showPageIndicator | `boolean` | No | `true` | When true, shows clickable dot indicators below the book for direct page navigation. |
|
|
29
|
+
| enableSwipe | `boolean` | No | `false` | When true, enables touch swipe and mouse drag gestures (20px threshold) to navigate between pages. |
|
|
30
|
+
| testId | `string` | No | `-` | Test identifier applied as `data-pw` on the root element. |
|
|
31
|
+
| 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. |
|
|
32
|
+
|
|
33
|
+
## Snippets
|
|
34
|
+
|
|
35
|
+
Svelte 5 Snippet props — pass content blocks to the component.
|
|
36
|
+
|
|
37
|
+
| Snippet | Type | Description |
|
|
38
|
+
| ------------ | --------- | -------------------------------------------------------------------------------------------- |
|
|
39
|
+
| previousIcon | `Snippet` | Custom icon rendered inside the previous-page navigation button. Defaults to a built-in SVG. |
|
|
40
|
+
| nextIcon | `Snippet` | Custom icon rendered inside the next-page navigation button. Defaults to a built-in SVG. |
|
|
41
|
+
|
|
42
|
+
## Events
|
|
43
|
+
|
|
44
|
+
| Event | Type | Description |
|
|
45
|
+
| ------------ | ------------------------ | ----------------------------------------------------------------------------- |
|
|
46
|
+
| onpagechange | `(page: number) => void` | Fires after the current page changes. Receives the new 0-indexed page number. |
|
|
47
|
+
|
|
48
|
+
## CSS Variables
|
|
49
|
+
|
|
50
|
+
Override these custom properties to theme the component.
|
|
51
|
+
|
|
52
|
+
| Variable | Default | CSS Property | Description |
|
|
53
|
+
| ----------------------------- | --------------------- | ------------------- | --------------------------------------------------------- |
|
|
54
|
+
| `--book-width` | `100%` | width | Width of the book container. |
|
|
55
|
+
| `--book-height` | `400px` | height | Height of the page content area. |
|
|
56
|
+
| `--book-background` | `#ffffff` | background-color | Background color of the book container. |
|
|
57
|
+
| `--book-border-radius` | `8px` | border-radius | Corner rounding of the book container. |
|
|
58
|
+
| `--book-border` | `1px solid #e4e4e7` | border | Border of the book container. |
|
|
59
|
+
| `--book-overflow` | `hidden` | overflow | Overflow behavior of the page content area. |
|
|
60
|
+
| `--book-transition-duration` | `0.3s` | transition-duration | Duration of the page transition animation. |
|
|
61
|
+
| `--book-nav-size` | `36px` | width/height | Size of the navigation arrow buttons. |
|
|
62
|
+
| `--book-nav-background` | `rgba(0, 0, 0, 0.05)` | --button-background | Background of navigation buttons. Maps to `--button-background` which may have no effect in the current Button implementation. |
|
|
63
|
+
| `--book-nav-hover-background` | `rgba(0, 0, 0, 0.1)` | --button-hover-background | Hover background of navigation buttons. Maps to `--button-hover-background` which may have no effect — Button uses `--button-hover-color` instead. |
|
|
64
|
+
| `--book-nav-color` | `currentColor` | --button-color | Maps to Button's `--button-color`, which controls `background-color` of navigation buttons. |
|
|
65
|
+
| `--book-nav-border-radius` | `50%` | border-radius | Corner rounding of the navigation arrow buttons. |
|
|
66
|
+
| `--book-nav-disabled-opacity` | `0.3` | opacity | Opacity of navigation arrows when at the first/last page. |
|
|
67
|
+
| `--book-dot-size` | `8px` | width/height | Size of each page indicator dot. |
|
|
68
|
+
| `--book-dot-gap` | `8px` | gap | Gap between page indicator dots. |
|
|
69
|
+
| `--book-dot-color` | `#a1a1aa` | background-color | Color of inactive page indicator dots. |
|
|
70
|
+
| `--book-dot-active-color` | `currentColor` | background-color | Color of the active page indicator dot. |
|
|
71
|
+
| `--book-dot-border-radius` | `50%` | border-radius | Corner rounding of page indicator dots. |
|
|
72
|
+
| `--book-indicator-padding` | `12px 0` | padding | Padding around the page indicator dots container. |
|
|
73
|
+
|
|
74
|
+
## Type Reference
|
|
75
|
+
|
|
76
|
+
Custom types used by this component's props and events:
|
|
77
|
+
|
|
78
|
+
### BookPage
|
|
79
|
+
|
|
80
|
+
```typescript
|
|
81
|
+
type BookPage = { content: Snippet; title?: string };
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
### BookTransition
|
|
85
|
+
|
|
86
|
+
```typescript
|
|
87
|
+
type BookTransition = 'slide' | 'fade' | 'none';
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
## Internal Dependencies
|
|
91
|
+
|
|
92
|
+
This component uses the following library components internally:
|
|
93
|
+
|
|
94
|
+
- Button (for navigation controls)
|
|
95
|
+
|
|
96
|
+
## Web Component
|
|
97
|
+
|
|
98
|
+
Tag: `<pui-book>`
|
|
99
|
+
|
|
100
|
+
```html
|
|
101
|
+
<pui-book show-navigation show-page-indicator></pui-book>
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
### Slots
|
|
105
|
+
|
|
106
|
+
| Slot Name | Maps to Snippet | Description |
|
|
107
|
+
| --------------- | --------------- | ----------------------------------------- |
|
|
108
|
+
| `previous-icon` | `previousIcon` | Custom icon for the previous page button. |
|
|
109
|
+
| `next-icon` | `nextIcon` | Custom icon for the next page button. |
|
|
110
|
+
|
|
111
|
+
> **Note:** The `pages` prop is an array of objects with Snippet content — set it via JavaScript property, not HTML attribute.
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
# Browser
|
|
2
|
+
|
|
3
|
+
A browser chrome wrapper that renders a realistic browser frame with traffic light buttons, an optional address bar with lock icon, and an optional tab bar. Use it to embed screenshots, iframes, or any HTML content inside a recognizable browser window. Purely decorative -- the address bar and buttons are non-interactive.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```svelte
|
|
8
|
+
<script>
|
|
9
|
+
import { Browser } from 'polymorph-ui-components';
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<Browser url={'https://example.com'} title={'Example'}>
|
|
13
|
+
<img src="/screenshot.png" alt="Screenshot" />
|
|
14
|
+
</Browser>
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Props
|
|
18
|
+
|
|
19
|
+
| Prop | Type | Required | Default | Description |
|
|
20
|
+
| -------------- | ------------------- | -------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
21
|
+
| url | `string` | No | `''` | URL text displayed in the address bar. Purely visual, does not navigate. |
|
|
22
|
+
| title | `string` | No | `''` | Text displayed in the tab when the tab bar is shown. |
|
|
23
|
+
| showAddressBar | `boolean` | No | `true` | Whether to show the address bar with lock icon and URL text. |
|
|
24
|
+
| showTabBar | `boolean` | No | `false` | Whether to show a simplified tab bar with a single tab above the address bar. |
|
|
25
|
+
| shadow | `boolean` | No | `true` | Whether to apply a drop shadow around the entire browser frame. |
|
|
26
|
+
| rounded | `boolean` | No | `true` | Whether to apply rounded corners to the browser frame. |
|
|
27
|
+
| testId | `string` | No | `-` | Test selector value applied as `data-pw` on the outermost element. |
|
|
28
|
+
| 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. |
|
|
29
|
+
|
|
30
|
+
## Snippets
|
|
31
|
+
|
|
32
|
+
Svelte 5 Snippet props -- pass content blocks to the component.
|
|
33
|
+
|
|
34
|
+
| Snippet | Type | Description |
|
|
35
|
+
| -------- | --------- | ----------------------------------------------------------------------------------------------------------- |
|
|
36
|
+
| children | `Snippet` | The content rendered inside the browser viewport area. Accepts any markup such as images, iframes, or HTML. |
|
|
37
|
+
| lockIcon | `Snippet` | Custom icon for the address bar lock indicator. |
|
|
38
|
+
|
|
39
|
+
## CSS Variables
|
|
40
|
+
|
|
41
|
+
Override these custom properties to theme the component.
|
|
42
|
+
|
|
43
|
+
| Variable | Default | CSS Property | Description |
|
|
44
|
+
| ------------------------------------ | -------------------------------------------------------- | ---------------- | ---------------------------------------------------------------------- |
|
|
45
|
+
| `--browser-width` | `100%` | width | Width of the entire browser frame. |
|
|
46
|
+
| `--browser-max-width` | `-` | max-width | Maximum width of the browser frame. |
|
|
47
|
+
| `--browser-border-radius` | `12px` | border-radius | Corner rounding of the browser frame (applied when `rounded` is true). |
|
|
48
|
+
| `--browser-shadow` | `0 8px 32px rgba(0, 0, 0, 0.12)` | box-shadow | Drop shadow of the browser frame (applied when `shadow` is true). |
|
|
49
|
+
| `--browser-border` | `1px solid #e4e4e7` | border | Border of the browser frame. |
|
|
50
|
+
| `--browser-chrome-bg` | `transparent` | background-color | Background color of the chrome area (title bar and address bar). |
|
|
51
|
+
| `--browser-chrome-color` | `currentColor` | color | Text color in the chrome area. |
|
|
52
|
+
| `--browser-titlebar-padding` | `12px 16px` | padding | Padding of the title bar containing traffic light buttons. |
|
|
53
|
+
| `--browser-dot-size` | `12px` | width/height | Size of each traffic light dot. |
|
|
54
|
+
| `--browser-dot-gap` | `8px` | gap | Gap between traffic light dots. |
|
|
55
|
+
| `--browser-dot-close-bg` | `#ef4444` | background-color | Background color of the close (red) dot. |
|
|
56
|
+
| `--browser-dot-minimize-bg` | `#f59e0b` | background-color | Background color of the minimize (yellow) dot. |
|
|
57
|
+
| `--browser-dot-maximize-bg` | `#22c55e` | background-color | Background color of the maximize (green) dot. |
|
|
58
|
+
| `--browser-tab-bg` | `#ffffff` | background-color | Background color of the active tab. |
|
|
59
|
+
| `--browser-tab-color` | `currentColor` | color | Text color of the active tab. |
|
|
60
|
+
| `--browser-tab-font-size` | `14px` | font-size | Font size of the tab text. |
|
|
61
|
+
| `--browser-tab-font-family` | `inherit` | font-family | Font family of the tab text. |
|
|
62
|
+
| `--browser-tab-padding` | `6px 16px` | padding | Padding inside the tab. |
|
|
63
|
+
| `--browser-tab-border-radius` | `8px 8px 0 0` | border-radius | Corner rounding of the tab (top corners only). |
|
|
64
|
+
| `--browser-addressbar-padding` | `8px 16px` | padding | Padding of the address bar row. |
|
|
65
|
+
| `--browser-addressbar-bg` | `#ffffff` | background-color | Background color of the address bar input area. |
|
|
66
|
+
| `--browser-addressbar-border` | `1px solid #e4e4e7` | border | Border of the address bar input area. |
|
|
67
|
+
| `--browser-addressbar-border-radius` | `6px` | border-radius | Corner rounding of the address bar input area. |
|
|
68
|
+
| `--browser-addressbar-font-size` | `14px` | font-size | Font size of the URL text. |
|
|
69
|
+
| `--browser-addressbar-font-family` | `inherit` | font-family | Font family of the URL text. |
|
|
70
|
+
| `--browser-addressbar-color` | `currentColor` | color | Text color of the URL in the address bar. |
|
|
71
|
+
| `--browser-addressbar-height` | `32px` | height | Height of the address bar input area. |
|
|
72
|
+
| `--browser-lock-color` | `currentColor` | color | Color of the lock icon in the address bar (SVG uses `fill="currentColor"`). |
|
|
73
|
+
| `--browser-content-bg` | `#ffffff` | background-color | Background color of the content viewport area. |
|
|
74
|
+
| `--browser-content-min-height` | `200px` | min-height | Minimum height of the content viewport area. |
|
|
75
|
+
| `--browser-content-overflow` | `hidden` | overflow | Overflow behavior of the content viewport area. |
|
|
76
|
+
|
|
77
|
+
## Web Component
|
|
78
|
+
|
|
79
|
+
Tag: `<pui-browser>`
|
|
80
|
+
|
|
81
|
+
```html
|
|
82
|
+
<pui-browser url="https://example.com" title="Demo">
|
|
83
|
+
<div>Page content here</div>
|
|
84
|
+
</pui-browser>
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
### Slots
|
|
88
|
+
|
|
89
|
+
| Slot Name | Maps to Snippet | Description |
|
|
90
|
+
| ----------- | --------------- | ----------------------------------------------- |
|
|
91
|
+
| _(default)_ | `children` | Content rendered inside the browser viewport. |
|
|
92
|
+
| `lock-icon` | `lockIcon` | Custom icon for the address bar lock indicator. |
|