@brightspot/ui 6.8.0 → 6.8.2
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/CHANGELOG.md +661 -0
- package/README.md +18 -2
- package/dist/storybook/CHANGELOG.md +661 -0
- package/dist/storybook/README.md +195 -0
- package/dist/storybook/assets/{ActionBar.stories-CJBn-mku.js → ActionBar.stories-TlhuCumU.js} +31 -28
- package/dist/storybook/assets/ActionItem-CjtyGLd5.js +16 -0
- package/dist/storybook/assets/{ActionItem.stories-DXzC9C1u.js → ActionItem.stories-BVlNQvfP.js} +2 -2
- package/dist/storybook/assets/AiSparkle.stories-DMzc8JUe.js +73 -0
- package/dist/storybook/assets/Avatar-C6Li1sPI.js +4 -0
- package/dist/storybook/assets/Avatar.stories-COj6XrPn.js +213 -0
- package/dist/storybook/assets/AvatarGroup-DgxRTZBe.js +1 -0
- package/dist/storybook/assets/AvatarGroup.stories-Dh3e7iN2.js +225 -0
- package/dist/storybook/assets/Badge-bWrvpEgX.js +1 -0
- package/dist/storybook/assets/{Badge.stories-DEpoJpUZ.js → Badge.stories-KXpmEXpt.js} +4 -4
- package/dist/storybook/assets/Banner-FSFX1AIb.css +1 -0
- package/dist/storybook/assets/{Banner.stories--jeU6fKq.js → Banner.stories-Cnhm3dXK.js} +14 -14
- package/dist/storybook/assets/Button-DE0s-gat.js +10 -0
- package/dist/storybook/assets/Button.stories-Cwg1YZEb.js +54 -0
- package/dist/storybook/assets/ButtonGroup-CoLI5nGO.js +1 -0
- package/dist/storybook/assets/{ButtonGroup.stories-CerE_0AC.js → ButtonGroup.stories-VhnKPP1n.js} +7 -7
- package/dist/storybook/assets/Card-DyntwdY-.css +1 -0
- package/dist/storybook/assets/{Card.stories-5SxHtU3Y.js → Card.stories-BgpL90zB.js} +60 -29
- package/dist/storybook/assets/{Celebrate.stories-COS789GX.js → Celebrate.stories-D3NJgYcX.js} +5 -5
- package/dist/storybook/assets/Checkbox-BC1T_KxW.js +30 -0
- package/dist/storybook/assets/{Checkbox.stories-DuQu38Gv.js → Checkbox.stories-AFQNz7dQ.js} +10 -10
- package/dist/storybook/assets/CircularProgress-eqVb2jUD.js +42 -0
- package/dist/storybook/assets/{CircularProgress.stories-Lf2Ws46Y.js → CircularProgress.stories-B6t8VhmJ.js} +2 -2
- package/dist/storybook/assets/ClipboardMixin-DcxrOy5B.js +1 -0
- package/dist/storybook/assets/{ClipboardMixin.stories-BT5KfLZ_.js → ClipboardMixin.stories-BqtQMjmS.js} +6 -6
- package/dist/storybook/assets/{Color-6BZIO3FS-BNBxjqrS.js → Color-6BZIO3FS-CDluohEc.js} +1 -1
- package/dist/storybook/assets/{Colors.stories-Ck6bXbd0.js → Colors.stories-CqTniDIa.js} +1 -1
- package/dist/storybook/assets/{CombinedEffects.stories-DLELdAMr.js → CombinedEffects.stories-FwW0chy5.js} +2 -2
- package/dist/storybook/assets/{ComponentStatesMixin-B6uJL_2c.js → ComponentStatesMixin-hUqOL2aW.js} +1 -1
- package/dist/storybook/assets/{ComponentStatesMixin.stories-fiyrALkY.js → ComponentStatesMixin.stories-CwGoq685.js} +1 -1
- package/dist/storybook/assets/{CopyToClipboard.stories-2OfBH19_.js → CopyToClipboard.stories-DUGjgtQx.js} +18 -10
- package/dist/storybook/assets/{Debounce.stories-C9qo3lIN.js → Debounce.stories-CrWfXhKS.js} +1 -1
- package/dist/storybook/assets/{DocsRenderer-LL677BLK-CBVYZYjR.js → DocsRenderer-LL677BLK-9e51z9Xc.js} +3 -3
- package/dist/storybook/assets/{Dropdown.stories-15ZDMkRz.js → Dropdown.stories-BsBxV0wp.js} +2 -2
- package/dist/storybook/assets/DropdownMenu-B-LvOIGj.js +42 -0
- package/dist/storybook/assets/EmptyState-h0A4Qpiu.css +1 -0
- package/dist/storybook/assets/{EmptyState.stories-Bjb8hzYj.js → EmptyState.stories-CJ1w8Tp2.js} +33 -21
- package/dist/storybook/assets/EscaAvatar.stories-BoLLSj9q.js +140 -0
- package/dist/storybook/assets/{Events.stories-BV0vMF2I.js → Events.stories-C3sTBwPJ.js} +2 -2
- package/dist/storybook/assets/{Heading.stories-CEUJqUbQ.js → Heading.stories-jmXDRBmM.js} +1 -1
- package/dist/storybook/assets/{HueRipple.stories-CwvtcOM_.js → HueRipple.stories-BPx5aSYd.js} +2 -2
- package/dist/storybook/assets/Icon-CWyJRQf7.js +34409 -0
- package/dist/storybook/assets/{Icon.stories-AB_v-61c.js → Icon.stories-iYBxmv2x.js} +10 -10
- package/dist/storybook/assets/IconButton-Di5Rgs7F.js +12 -0
- package/dist/storybook/assets/{IconButton.stories-BHuHsM3k.js → IconButton.stories-DENLoxVk.js} +2 -2
- package/dist/storybook/assets/LinearProgress-D9ngIVlv.js +25 -0
- package/dist/storybook/assets/{LinearProgress.stories-BNN5SXe3.js → LinearProgress.stories-u90B_VJR.js} +2 -2
- package/dist/storybook/assets/Message-CM3eexdu.css +1 -0
- package/dist/storybook/assets/Message-nFAa55c_.js +28 -0
- package/dist/storybook/assets/{Message.stories-DdLhMXnb.js → Message.stories-B4rpz5rI.js} +2 -2
- package/dist/storybook/assets/OnFindMixin-oL1bvTFj.js +1 -0
- package/dist/storybook/assets/{OnFindMixin.stories-B-5TeBOF.js → OnFindMixin.stories-CdeS5sFA.js} +9 -9
- package/dist/storybook/assets/Pagination-CSWcjuDU.js +88 -0
- package/dist/storybook/assets/{Pagination.stories-C9zsOdb2.js → Pagination.stories-Da2WzJkv.js} +33 -33
- package/dist/storybook/assets/{Popover.stories-BiqIwebU.js → Popover.stories-CVljlVHc.js} +16 -16
- package/dist/storybook/assets/ProgressMixin-CeSrn0_P.js +1 -0
- package/dist/storybook/assets/Radio-rvfGhZwK.js +25 -0
- package/dist/storybook/assets/{Radio.stories-BmrEdPkm.js → Radio.stories-B0wHdJuc.js} +6 -6
- package/dist/storybook/assets/{RadioGroup.stories-ChARVXs3.js → RadioGroup.stories-D8krOSlP.js} +22 -22
- package/dist/storybook/assets/{ReadyMixin-BbuzH3uO.js → ReadyMixin-CvX_eidU.js} +1 -1
- package/dist/storybook/assets/RovingTabindexMixin-9z8lwaM9.js +1 -0
- package/dist/storybook/assets/{RovingTabindexMixin.stories-xm4b394_.js → RovingTabindexMixin.stories-Y8vBWjJp.js} +5 -5
- package/dist/storybook/assets/{Rtc.stories-DdcMaELA.js → Rtc.stories-D3Y-z8y_.js} +1 -1
- package/dist/storybook/assets/{ScrollShadow.stories-CI67Ougx.js → ScrollShadow.stories-1KD0lWHX.js} +1 -1
- package/dist/storybook/assets/{Switch.stories-DOqrRkxc.js → Switch.stories-Bsqvm_HE.js} +60 -27
- package/dist/storybook/assets/{Tab.stories-DN8o4cf_.js → Tab.stories-CzcTisNs.js} +7 -7
- package/dist/storybook/assets/Tabs-DdpYNZSW.js +17 -0
- package/dist/storybook/assets/{Tabs.stories-BEowfCcl.js → Tabs.stories-UOS3V0J4.js} +6 -6
- package/dist/storybook/assets/{Throttle.stories-BZ_nsuw1.js → Throttle.stories-C8jgzh6e.js} +1 -1
- package/dist/storybook/assets/Tooltip.stories-B5BoI0cH.js +143 -0
- package/dist/storybook/assets/TooltipMixin-CVKslCDt.js +1 -0
- package/dist/storybook/assets/{Upload.stories-sAEiabwq.js → Upload.stories-BsQDCDqo.js} +102 -52
- package/dist/storybook/assets/UploadItem-CYQqNwUF.js +54 -0
- package/dist/storybook/assets/{UploadItem.stories-C19JMfmB.js → UploadItem.stories-_le7XBTV.js} +4 -4
- package/dist/storybook/assets/{Welcome.stories-C30jg0r1.js → Welcome.stories-rramKkhd.js} +38 -8
- package/dist/storybook/assets/Widget-elBzGg8w.css +1 -0
- package/dist/storybook/assets/Widget.stories-DtbAaklk.js +279 -0
- package/dist/storybook/assets/{WithTooltip-65CFNBJE-PFRy5maL.js → WithTooltip-65CFNBJE-DK6GcBuR.js} +1 -1
- package/dist/storybook/assets/ai-sparkle-BZMJJAxY.js +1 -0
- package/dist/storybook/assets/aria-D5THOgos.js +1 -0
- package/dist/storybook/assets/{blocks-DLjjvsFT.js → blocks-DHnzPh43.js} +5 -5
- package/dist/storybook/assets/esca-glow-BwdhBvIX.js +2 -0
- package/dist/storybook/assets/esca-idle-B-fumiIb.js +1 -0
- package/dist/storybook/assets/esca-search-rwNfo19I.js +1 -0
- package/dist/storybook/assets/esca-task-complete-BAJP2dY2.js +1 -0
- package/dist/storybook/assets/esca-wave-Bjs4CUR7.js +1 -0
- package/dist/storybook/assets/{formatter-EIJCOSYU-D39uscG_.js → formatter-EIJCOSYU-qig-qWlG.js} +1 -1
- package/dist/storybook/assets/i18n-BQ-Uj-0B.js +1 -0
- package/dist/storybook/assets/if-defined-DerKRcyC.js +1 -0
- package/dist/storybook/assets/{iframe-B9buZjP7.js → iframe-DlBK9Drk.js} +24 -24
- package/dist/storybook/assets/{index-BdEHup-4.js → index-CItQyB37.js} +1 -1
- package/dist/storybook/assets/lottie_svg-C3v6xdng.js +2 -0
- package/dist/storybook/assets/{onFind-CGzSFqNN.js → onFind-Ci35eu2y.js} +1 -1
- package/dist/storybook/assets/{onFind.stories-Dq71qO14.js → onFind.stories-BmbwWWo1.js} +1 -1
- package/dist/storybook/assets/{onRemove.stories-B1GqLH_U.js → onRemove.stories-DFWCIgE4.js} +1 -1
- package/dist/storybook/assets/{onVisible.stories-BNKxOfLw.js → onVisible.stories-B-onpgE-.js} +1 -1
- package/dist/storybook/assets/property-Bmq4RTSP.js +1 -0
- package/dist/storybook/assets/ref-BhKk4SDh.js +1 -0
- package/dist/storybook/assets/state-DVIUS0Gf.js +1 -0
- package/dist/storybook/assets/{style-map-qCiIYcp5.js → style-map-DE4G47KD.js} +1 -1
- package/dist/storybook/assets/{syntaxhighlighter-ED5Y7EFY-CUM-CaRF.js → syntaxhighlighter-ED5Y7EFY-Dfgnal1d.js} +1 -1
- package/dist/storybook/custom-elements.json +11835 -0
- package/dist/storybook/docs/components/ActionBar.md +55 -0
- package/dist/storybook/docs/components/ActionItem.md +50 -0
- package/dist/storybook/docs/components/AiSparkle.md +33 -0
- package/dist/storybook/docs/components/Avatar.md +45 -0
- package/dist/storybook/docs/components/AvatarGroup.md +34 -0
- package/dist/storybook/docs/components/Badge.md +47 -0
- package/dist/storybook/docs/components/Banner.md +35 -0
- package/dist/storybook/docs/components/ButtonGroup.md +65 -0
- package/dist/storybook/docs/components/Card.md +67 -0
- package/dist/storybook/docs/components/Checkbox.md +49 -0
- package/dist/storybook/docs/components/CircularProgress.md +40 -0
- package/dist/storybook/docs/components/CopyToClipboard.md +51 -0
- package/dist/storybook/docs/components/Dropdown.md +74 -0
- package/dist/storybook/docs/components/DropdownItem.md +45 -0
- package/dist/storybook/docs/components/DropdownMenu.md +41 -0
- package/dist/storybook/docs/components/EmptyState.md +62 -0
- package/dist/storybook/docs/components/EscaAvatar.md +40 -0
- package/dist/storybook/docs/components/Icon.md +40 -0
- package/dist/storybook/docs/components/IconButton.md +36 -0
- package/dist/storybook/docs/components/LinearProgress.md +37 -0
- package/dist/storybook/docs/components/Message.md +50 -0
- package/dist/storybook/docs/components/Pagination.md +70 -0
- package/dist/storybook/docs/components/Popover.md +59 -0
- package/dist/storybook/docs/components/README.md +48 -0
- package/dist/storybook/docs/components/Radio.md +55 -0
- package/dist/storybook/docs/components/RadioGroup.md +34 -0
- package/dist/storybook/docs/components/Switch.md +48 -0
- package/dist/storybook/docs/components/Tab.md +40 -0
- package/dist/storybook/docs/components/Tabs.md +49 -0
- package/dist/storybook/docs/components/Upload.md +63 -0
- package/dist/storybook/docs/components/UploadItem.md +30 -0
- package/dist/storybook/docs/components/Widget.md +88 -0
- package/dist/storybook/docs/dari-elements.md +55 -0
- package/dist/storybook/iframe.html +1 -1
- package/dist/storybook/index.html +29 -2
- package/dist/storybook/llms-full.txt +1721 -0
- package/dist/storybook/llms.txt +65 -0
- package/dist/storybook/project.json +1 -1
- package/dist/storybook/robots.txt +7 -0
- package/dist/storybook/sb-addons/storybook-3/manager-bundle.js +1 -1
- package/dist/storybook/sitemap.xml +90 -0
- package/docs/components/ActionBar.md +41 -64
- package/docs/components/ActionItem.md +50 -96
- package/docs/components/AiSparkle.md +23 -60
- package/docs/components/Avatar.md +45 -88
- package/docs/components/AvatarGroup.md +24 -44
- package/docs/components/Badge.md +34 -62
- package/docs/components/Banner.md +25 -39
- package/docs/components/ButtonGroup.md +65 -99
- package/docs/components/Card.md +67 -83
- package/docs/components/Checkbox.md +49 -91
- package/docs/components/CircularProgress.md +40 -84
- package/docs/components/CopyToClipboard.md +35 -40
- package/docs/components/Dropdown.md +74 -120
- package/docs/components/DropdownItem.md +45 -81
- package/docs/components/DropdownMenu.md +30 -70
- package/docs/components/EmptyState.md +45 -62
- package/docs/components/EscaAvatar.md +30 -61
- package/docs/components/Icon.md +29 -62
- package/docs/components/IconButton.md +36 -83
- package/docs/components/LinearProgress.md +28 -70
- package/docs/components/Message.md +38 -63
- package/docs/components/Pagination.md +70 -100
- package/docs/components/Popover.md +46 -79
- package/docs/components/README.md +34 -40
- package/docs/components/Radio.md +55 -105
- package/docs/components/RadioGroup.md +26 -55
- package/docs/components/Switch.md +48 -84
- package/docs/components/Tab.md +30 -70
- package/docs/components/Tabs.md +49 -86
- package/docs/components/Upload.md +63 -112
- package/docs/components/UploadItem.md +22 -53
- package/docs/components/Widget.md +66 -67
- package/llms.txt +63 -0
- package/package.json +9 -6
- package/dist/storybook/assets/AiSparkle.stories-BfjT5jrJ.js +0 -72
- package/dist/storybook/assets/Avatar.stories-D8lnIZaY.js +0 -213
- package/dist/storybook/assets/AvatarGroup.stories-Cz9oVah0.js +0 -225
- package/dist/storybook/assets/Button-2ucj5lUP.js +0 -10
- package/dist/storybook/assets/Button.stories-ndl1RJd7.js +0 -54
- package/dist/storybook/assets/EscaAvatar.stories-Rc2MSzCX.js +0 -139
- package/dist/storybook/assets/LucideDynamicLoader-BuoNL33C.js +0 -1
- package/dist/storybook/assets/Tooltip.stories-3bar43ZN.js +0 -143
- package/dist/storybook/assets/Widget.stories-9-1XpZNl.js +0 -233
- package/dist/storybook/assets/if-defined-BwWBCoAU.js +0 -1
|
@@ -1,112 +1,63 @@
|
|
|
1
|
-
#
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
|
21
|
-
|
|
|
22
|
-
| `
|
|
23
|
-
| `
|
|
24
|
-
| `
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
|
29
|
-
|
|
|
30
|
-
| `
|
|
31
|
-
| `
|
|
32
|
-
| `
|
|
33
|
-
| `
|
|
34
|
-
| `
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
|
40
|
-
|
|
|
41
|
-
| `
|
|
42
|
-
| `
|
|
43
|
-
| `
|
|
44
|
-
| `
|
|
45
|
-
| `
|
|
46
|
-
| `
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
|
51
|
-
|
|
|
52
|
-
| `
|
|
53
|
-
| `
|
|
54
|
-
| `
|
|
55
|
-
| `
|
|
56
|
-
| `
|
|
57
|
-
| `
|
|
58
|
-
| `
|
|
59
|
-
| `
|
|
60
|
-
| `
|
|
61
|
-
| `
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
| Name | Type | Description | Inherited From |
|
|
66
|
-
| --------------------------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | -------------- |
|
|
67
|
-
| `btu-upload-ready` | `CustomEvent<unknown>` | Fired when the component has completed first render | |
|
|
68
|
-
| `btu-upload-file-added` | `CustomEvent<{id: string, file: File}>` | Fired when a file passes validation and is added | |
|
|
69
|
-
| `btu-upload-file-removed` | `CustomEvent<{id: string, file: File}>` | Fired when a file is removed (user action, programmatic, or on disconnect for in-flight uploads) | |
|
|
70
|
-
| `btu-upload-file-retry` | `CustomEvent<{id: string, file: File}>` | Fired when user clicks "Try again" on a failed upload | |
|
|
71
|
-
| `btu-upload-file-rejected` | `CustomEvent<{file: File, reason: 'type' \| 'size' \| 'count'}>` | Fired when a file fails client-side validation or the queue is full | |
|
|
72
|
-
| `btu-upload-file-completed` | `CustomEvent<{id: string, file: File}>` | Fired when a file's status transitions into 'complete' | |
|
|
73
|
-
| `btu-upload-api-error` | `CustomEvent<{method: string, id: string, reason: 'unknown-id' \| 'invalid-transition', message: string}>` | Fired when an imperative API call references an unknown id or an illegal status transition | |
|
|
74
|
-
|
|
75
|
-
### Attributes
|
|
76
|
-
|
|
77
|
-
| Name | Field | Inherited From |
|
|
78
|
-
| --------------- | ----------- | -------------- |
|
|
79
|
-
| `accept` | accept | |
|
|
80
|
-
| `max-file-size` | maxFileSize | |
|
|
81
|
-
| `max-files` | maxFiles | |
|
|
82
|
-
| `disabled` | disabled | |
|
|
83
|
-
| `no-drag` | noDrag | |
|
|
84
|
-
|
|
85
|
-
### CSS Properties
|
|
86
|
-
|
|
87
|
-
| Name | Default | Description |
|
|
88
|
-
| -------------------------------------- | ------- | --------------------------------------------------------------------------------------------- |
|
|
89
|
-
| `--upload-dropzone-bg` | | Drop zone background color (default: gray-25) |
|
|
90
|
-
| `--upload-dropzone-border-color` | | Drop zone border color (default: gray-300; gray-200 when disabled, gray-400 in high-contrast) |
|
|
91
|
-
| `--upload-dropzone-border-radius` | | Drop zone border radius (default: borderRadius.lg) |
|
|
92
|
-
| `--upload-dropzone-hover-bg` | | Drop zone hover background (hover default: gray-50; drag-over default: primary-25) |
|
|
93
|
-
| `--upload-dropzone-hover-border-color` | | Drop zone hover/focus border color (default: primary-300; drag-over uses primary-400) |
|
|
94
|
-
| `--upload-dropzone-focus-ring-color` | | Drop zone focus ring color (default: primary-100) |
|
|
95
|
-
| `--upload-item-bg` | | Item background color (default: white) |
|
|
96
|
-
| `--upload-item-border-color` | | Item border color (default: gray-200) |
|
|
97
|
-
| `--upload-item-active-border-color` | | Item active/in-progress border (default: gray-300) |
|
|
98
|
-
| `--upload-item-complete-border-color` | | Item completed border color (default: primary-500) |
|
|
99
|
-
| `--upload-item-error-bg` | | Item error background (default: error-25) |
|
|
100
|
-
| `--upload-item-error-border-color` | | Item error border color (default: error-300) |
|
|
101
|
-
|
|
102
|
-
<hr/>
|
|
103
|
-
|
|
104
|
-
## Exports
|
|
105
|
-
|
|
106
|
-
| Kind | Name | Declaration | Module | Package |
|
|
107
|
-
| --------------------------- | -------------------- | ------------------ | ------------------------------- | ------- |
|
|
108
|
-
| `js` | `FileState` | FileState | src/components/upload/Upload.ts | |
|
|
109
|
-
| `js` | `FileStatus` | FileStatus | src/components/upload/Upload.ts | |
|
|
110
|
-
| `js` | `FileStatusSettable` | FileStatusSettable | src/components/upload/Upload.ts | |
|
|
111
|
-
| `js` | `default` | Upload | src/components/upload/Upload.ts | |
|
|
112
|
-
| `custom-element-definition` | `btu-upload` | Upload | src/components/upload/Upload.ts | |
|
|
1
|
+
# `<btu-upload>`
|
|
2
|
+
|
|
3
|
+
A file upload component with drop zone and file list.
|
|
4
|
+
|
|
5
|
+
The component is presentation + file-selection only. It handles file browsing,
|
|
6
|
+
drag-and-drop reception, client-side validation, and rendering the file list
|
|
7
|
+
with progress bars. It does not perform network requests — the consumer listens
|
|
8
|
+
for events, performs their own upload, and drives state back via imperative methods.
|
|
9
|
+
|
|
10
|
+
```js
|
|
11
|
+
import '@brightspot/ui/components/upload/Upload.js'
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
Interactive examples: https://ui.brightspot.com/?path=/docs/components-upload--docs
|
|
15
|
+
|
|
16
|
+
## Attributes
|
|
17
|
+
|
|
18
|
+
| Attribute | Property | Type | Default | Description |
|
|
19
|
+
| --- | --- | --- | --- | --- |
|
|
20
|
+
| `accept` | `accept` | `string` | `''` | Accepted file types, matching the HTML `<input accept>` attribute format. Client-side filter only — the browser's file picker uses this as a hint, and drag-drop is enforced by this component. Server-side validation is still required. Supported forms (comma-separated, any combination): - `image/*` — MIME wildcard (any image) - `application/pdf` — exact MIME type - `.pdf`, `.docx` — file extension (case-insensitive) Examples: - `accept="image/*"` — any image - `accept="image/*,application/pdf"` — images and PDFs - `accept=".jpg,.jpeg,.png,.heic"` — specific extensions - `accept=""` (or omitted) — allow all Note: users can bypass the file picker's filter (most browsers offer an "All Files" option), so this attribute is a UX filter, not a security boundary. |
|
|
21
|
+
| `max-file-size` | `maxFileSize` | `number` | `0` | Maximum file size in bytes. Files exceeding this are rejected. 0 means unlimited. |
|
|
22
|
+
| `max-files` | `maxFiles` | `number` | `Infinity` | Maximum number of files allowed. When omitted, uploads are unlimited. `max-files="1"` enters single-file mode (selecting a new file replaces the existing one). `max-files="0"` allows zero files. Values above 1 cap the queue at that many files. |
|
|
23
|
+
| `disabled` | `disabled` | `boolean` | `false` | Disables all interaction — file selection, drag-and-drop, and action buttons. |
|
|
24
|
+
| `no-drag` | `noDrag` | `boolean` | `false` | Disables drag-and-drop. File selection via click still works. |
|
|
25
|
+
|
|
26
|
+
## Methods
|
|
27
|
+
|
|
28
|
+
| Method | Description |
|
|
29
|
+
| --- | --- |
|
|
30
|
+
| `setFileProgress(id: string, percent: number): void` | Update the progress of a file upload. Clamps value to 0-100 and coerces non-finite inputs to 0. Announces milestones (25%, 50%, 75%) to screen readers; 100% completion is announced by setFileStatus('complete'). Status transitions: - `pending` → `uploading` (auto — first progress report starts the upload) - `uploading` → `uploading` (progress updates) - `error` → `error` (progress updates only; status is preserved so a stale late callback can't wipe the error UI. To recover from error, call `setFileStatus(id, 'uploading')` first, then report progress.) - `complete` → ignored (terminal state) |
|
|
31
|
+
| `setFileStatus(id: string, status: FileStatusSettable, message?: string): void` | Set the status of a file. Valid statuses: 'uploading', 'complete', 'error'. For 'error' status, an optional message can be provided. Transitions from 'complete' are rejected (terminal state) — a late-resolving XHR cannot overwrite a prior success. Rejected calls emit `btu-upload-api-error` with reason: 'invalid-transition'. |
|
|
32
|
+
| `setFileSymbol(id: string, symbol: string): void` | Override the icon symbol for a file. |
|
|
33
|
+
| `removeFile(id: string): void` | Remove a file programmatically. Fires `btu-upload-file-removed`. |
|
|
34
|
+
| `getFiles(): readonly FileState[]` | Get a snapshot of all current files and their states. States are readonly; mutations on the returned array's elements are ineffective. |
|
|
35
|
+
|
|
36
|
+
## Events
|
|
37
|
+
|
|
38
|
+
| Event | Detail | Description |
|
|
39
|
+
| --- | --- | --- |
|
|
40
|
+
| `btu-upload-ready` | `unknown` | Fired when the component has completed first render |
|
|
41
|
+
| `btu-upload-file-added` | `{id: string, file: File}` | Fired when a file passes validation and is added |
|
|
42
|
+
| `btu-upload-file-removed` | `{id: string, file: File}` | Fired when a file is removed (user action, programmatic, or on disconnect for in-flight uploads) |
|
|
43
|
+
| `btu-upload-file-retry` | `{id: string, file: File}` | Fired when user clicks "Try again" on a failed upload |
|
|
44
|
+
| `btu-upload-file-rejected` | `{file: File, reason: 'type' \| 'size' \| 'count'}` | Fired when a file fails client-side validation or the queue is full |
|
|
45
|
+
| `btu-upload-file-completed` | `{id: string, file: File}` | Fired when a file's status transitions into 'complete' |
|
|
46
|
+
| `btu-upload-api-error` | `{method: string, id: string, reason: 'unknown-id' \| 'invalid-transition', message: string}` | Fired when an imperative API call references an unknown id or an illegal status transition |
|
|
47
|
+
|
|
48
|
+
## CSS custom properties
|
|
49
|
+
|
|
50
|
+
| Property | Description |
|
|
51
|
+
| --- | --- |
|
|
52
|
+
| `--upload-dropzone-bg` | Drop zone background color (default: gray-25) |
|
|
53
|
+
| `--upload-dropzone-border-color` | Drop zone border color (default: gray-300; gray-200 when disabled, gray-400 in high-contrast) |
|
|
54
|
+
| `--upload-dropzone-border-radius` | Drop zone border radius (default: borderRadius.lg) |
|
|
55
|
+
| `--upload-dropzone-hover-bg` | Drop zone hover background (hover default: gray-50; drag-over default: primary-25) |
|
|
56
|
+
| `--upload-dropzone-hover-border-color` | Drop zone hover/focus border color (default: primary-300; drag-over uses primary-400) |
|
|
57
|
+
| `--upload-dropzone-focus-ring-color` | Drop zone focus ring color (default: primary-100) |
|
|
58
|
+
| `--upload-item-bg` | Item background color (default: white) |
|
|
59
|
+
| `--upload-item-border-color` | Item border color (default: gray-200) |
|
|
60
|
+
| `--upload-item-active-border-color` | Item active/in-progress border (default: gray-300) |
|
|
61
|
+
| `--upload-item-complete-border-color` | Item completed border color (default: primary-500) |
|
|
62
|
+
| `--upload-item-error-bg` | Item error background (default: error-25) |
|
|
63
|
+
| `--upload-item-error-border-color` | Item error border color (default: error-300) |
|
|
@@ -1,61 +1,30 @@
|
|
|
1
|
-
#
|
|
1
|
+
# `<btu-upload-item>`
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Internal upload item sub-component for displaying individual file upload state.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
This component is not part of the public API — consumers should not create,
|
|
6
|
+
query, or modify items directly. All interaction goes through `btu-upload` methods.
|
|
6
7
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
```js
|
|
9
|
+
import '@brightspot/ui/components/upload/UploadItem.js'
|
|
10
|
+
```
|
|
10
11
|
|
|
11
|
-
|
|
12
|
+
Interactive examples: https://ui.brightspot.com/?path=/docs/components-upload-upload-item--docs
|
|
12
13
|
|
|
13
|
-
|
|
14
|
-
| ------------------- | ------------------------------ | ------- |
|
|
15
|
-
| `EventEmitterMixin` | /src/util/EventEmitterMixin.js | |
|
|
16
|
-
| `ReadyMixin` | /src/util/ReadyMixin.js | |
|
|
14
|
+
## Events
|
|
17
15
|
|
|
18
|
-
|
|
16
|
+
| Event | Detail | Description |
|
|
17
|
+
| --- | --- | --- |
|
|
18
|
+
| `btu-upload-item-remove` | `{id: string}` | Fired when remove button is clicked |
|
|
19
|
+
| `btu-upload-item-retry` | `{id: string}` | Fired when retry link is clicked |
|
|
19
20
|
|
|
20
|
-
|
|
21
|
-
| ----------------------- | ------- | -------------------- | ------- | ----------- | -------------- |
|
|
22
|
-
| `_state` | private | `FileState \| null` | `null` | | |
|
|
23
|
-
| `_baseClasses` | private | `string` | `''` | | |
|
|
24
|
-
| `_previousStatus` | private | `FileStatus \| null` | `null` | | |
|
|
25
|
-
| `_stopProgressComplete` | private | | | | |
|
|
21
|
+
## CSS custom properties
|
|
26
22
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
|
30
|
-
|
|
|
31
|
-
| `
|
|
32
|
-
| `
|
|
33
|
-
| `
|
|
34
|
-
| `
|
|
35
|
-
|
|
36
|
-
### Events
|
|
37
|
-
|
|
38
|
-
| Name | Type | Description | Inherited From |
|
|
39
|
-
| ------------------------ | --------------------------- | ----------------------------------- | -------------- |
|
|
40
|
-
| `btu-upload-item-remove` | `CustomEvent<{id: string}>` | Fired when remove button is clicked | |
|
|
41
|
-
| `btu-upload-item-retry` | `CustomEvent<{id: string}>` | Fired when retry link is clicked | |
|
|
42
|
-
|
|
43
|
-
### CSS Properties
|
|
44
|
-
|
|
45
|
-
| Name | Default | Description |
|
|
46
|
-
| ------------------------------------- | ------- | -------------------------------------------------- |
|
|
47
|
-
| `--upload-item-bg` | | Item background color (default: white) |
|
|
48
|
-
| `--upload-item-border-color` | | Item border color (default: gray-200) |
|
|
49
|
-
| `--upload-item-active-border-color` | | Item active/in-progress border (default: gray-300) |
|
|
50
|
-
| `--upload-item-complete-border-color` | | Item completed border color (default: primary-500) |
|
|
51
|
-
| `--upload-item-error-bg` | | Item error background (default: error-25) |
|
|
52
|
-
| `--upload-item-error-border-color` | | Item error border color (default: error-300) |
|
|
53
|
-
|
|
54
|
-
<hr/>
|
|
55
|
-
|
|
56
|
-
## Exports
|
|
57
|
-
|
|
58
|
-
| Kind | Name | Declaration | Module | Package |
|
|
59
|
-
| --------------------------- | ----------------- | ----------- | ----------------------------------- | ------- |
|
|
60
|
-
| `js` | `default` | UploadItem | src/components/upload/UploadItem.ts | |
|
|
61
|
-
| `custom-element-definition` | `btu-upload-item` | UploadItem | src/components/upload/UploadItem.ts | |
|
|
23
|
+
| Property | Description |
|
|
24
|
+
| --- | --- |
|
|
25
|
+
| `--upload-item-bg` | Item background color (default: white) |
|
|
26
|
+
| `--upload-item-border-color` | Item border color (default: gray-200) |
|
|
27
|
+
| `--upload-item-active-border-color` | Item active/in-progress border (default: gray-300) |
|
|
28
|
+
| `--upload-item-complete-border-color` | Item completed border color (default: primary-500) |
|
|
29
|
+
| `--upload-item-error-bg` | Item error background (default: error-25) |
|
|
30
|
+
| `--upload-item-error-border-color` | Item error border color (default: error-300) |
|
|
@@ -1,89 +1,88 @@
|
|
|
1
|
-
#
|
|
1
|
+
# `<btu-widget>`
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A widget component for displaying content with header, body, and footer sections.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
## Architecture: Light DOM + Manager Pattern
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
This component uses **Light DOM** (no Shadow Root) with the **Manager Pattern**:
|
|
8
|
+
- User-provided children are physically moved into internal containers
|
|
9
|
+
- Movement is based on `slot` attributes (pseudo-slots)
|
|
10
|
+
- The `onFind` utility automatically redistributes dynamically-added content
|
|
10
11
|
|
|
11
|
-
###
|
|
12
|
+
### Node Redistribution Rules
|
|
13
|
+
- `slot="controls"` → Moved to header actions area (before system buttons)
|
|
14
|
+
- `slot="footer"` → Moved to footer container
|
|
15
|
+
- *(no slot)* → Moved to body container (default)
|
|
12
16
|
|
|
13
|
-
|
|
14
|
-
| ------------------- | ------------------------------ | ------- |
|
|
15
|
-
| `EventEmitterMixin` | /src/util/EventEmitterMixin.js | |
|
|
16
|
-
| `OnFindMixin` | /src/util/OnFindMixin.js | |
|
|
17
|
-
| `ReadyMixin` | /src/util/ReadyMixin.js | |
|
|
17
|
+
## Features
|
|
18
18
|
|
|
19
|
-
|
|
19
|
+
- **Collapsible**: Optional chevron toggle to hide/show body and footer
|
|
20
|
+
- **Fullscreen**: Optional maximize button for fullscreen mode via `:state(fullscreen)` custom state
|
|
21
|
+
- **Dynamic Content**: `onFind` handles content added after initialization
|
|
22
|
+
- **Accessible**: Full ARIA support and keyboard navigation
|
|
23
|
+
- **Themeable**: CSS custom properties for colors and spacing
|
|
20
24
|
|
|
21
|
-
|
|
22
|
-
| ------------ | ------- | -------- | ------- | ----------- | -------------- |
|
|
23
|
-
| `_idCounter` | private | `number` | `0` | | |
|
|
25
|
+
## Accessibility
|
|
24
26
|
|
|
25
|
-
|
|
27
|
+
- **Collapse toggle**: `aria-expanded`, `aria-controls`, `aria-label`
|
|
28
|
+
- **Fullscreen toggle**: `aria-pressed`, `aria-label`
|
|
29
|
+
- **Body region**: `role="region"`, `aria-labelledby` linking to heading
|
|
30
|
+
- **Tab order**: Natural flow via physical DOM placement
|
|
31
|
+
- **Collapsed content**: Hidden via `inert` attribute and CSS grid collapse
|
|
26
32
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
| `heading` | | `string` | `''` | Heading text displayed in the header. | |
|
|
31
|
-
| `collapsible` | | `boolean` | `false` | Whether the widget can be collapsed/expanded.
When true, a chevron toggle button appears in the header. | |
|
|
32
|
-
| `collapsed` | | `boolean` | `false` | Whether the widget is currently collapsed.
When true, body and footer are hidden. Implies collapsible. | |
|
|
33
|
-
| `fullscreenable` | | `boolean` | `false` | Whether the widget can enter fullscreen mode.
When true, a fullscreen toggle button appears in the header. | |
|
|
34
|
-
| `_isFullscreen` | private | `boolean` | `false` | | |
|
|
35
|
-
| `_collapseTooltip` | private | | `new TooltipController(this, { target: 'button[data-tooltip="collapse"]', text: () => (this.collapsed ? 'Expand' : 'Collapse'), position: 'bottom', noArrow: true, offset: 'sm', })` | | |
|
|
36
|
-
| `_fullscreenTooltip` | private | | `new TooltipController(this, { target: 'button[data-tooltip="fullscreen"]', text: () => (this._isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'), position: 'bottom', noArrow: true, offset: 'sm', })` | | |
|
|
37
|
-
| `isFullscreen` | | `boolean` | | Whether the widget is currently in fullscreen mode (read-only).
Use \`btu-widget-fullscreen-changed\` event to react to changes. | |
|
|
38
|
-
| `#stopFns` | private | `Array<() => void>` | `[]` | | OnFindMixin |
|
|
33
|
+
```js
|
|
34
|
+
import '@brightspot/ui/components/widget/Widget.js'
|
|
35
|
+
```
|
|
39
36
|
|
|
40
|
-
|
|
37
|
+
The CMS page defines this element itself, so a plugin can use it there without the import.
|
|
41
38
|
|
|
42
|
-
|
|
43
|
-
| -------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ---------------------------------------------------- | ----------------- |
|
|
44
|
-
| `emit` | | Dispatches a type-safe CustomEvent with standardized configuration.

All events are configured with:
- bubbles: true (event propagates up the DOM tree)
- cancelable: false (event cannot be cancelled)
- composed: true (event crosses shadow DOM boundaries) | `type: K, detail: UnpackCustomEvent<CustomEventMap[K]>` | `boolean` | EventEmitterMixin |
|
|
45
|
-
| `onFindRegistration` | | | | `OnFindRegistration \| OnFindRegistration[] \| null` | OnFindMixin |
|
|
46
|
-
| `#armFind` | private | | | | OnFindMixin |
|
|
39
|
+
Interactive examples: https://ui.brightspot.com/?path=/docs/components-widget--docs
|
|
47
40
|
|
|
48
|
-
|
|
41
|
+
## Attributes
|
|
49
42
|
|
|
50
|
-
|
|
|
51
|
-
|
|
|
52
|
-
| `
|
|
53
|
-
| `
|
|
54
|
-
| `
|
|
43
|
+
| Attribute | Property | Type | Default | Description |
|
|
44
|
+
| --- | --- | --- | --- | --- |
|
|
45
|
+
| `heading` | `heading` | `string` | `''` | Heading text displayed in the header. |
|
|
46
|
+
| `collapsible` | `collapsible` | `boolean` | `false` | Whether the widget can be collapsed/expanded. When true, a chevron toggle button appears in the header. |
|
|
47
|
+
| `collapsed` | `collapsed` | `boolean` | `false` | Whether the widget is currently collapsed. When true, body and footer are hidden. Implies collapsible. |
|
|
48
|
+
| `fullscreenable` | `fullscreenable` | `boolean` | `false` | Whether the widget can enter fullscreen mode. When true, a fullscreen toggle button appears in the header. |
|
|
55
49
|
|
|
56
|
-
|
|
50
|
+
## Properties
|
|
57
51
|
|
|
58
|
-
|
|
59
|
-
| ---------------- | -------------- | -------------- |
|
|
60
|
-
| `heading` | heading | |
|
|
61
|
-
| `collapsible` | collapsible | |
|
|
62
|
-
| `collapsed` | collapsed | |
|
|
63
|
-
| `fullscreenable` | fullscreenable | |
|
|
52
|
+
These have no attribute; set them from JavaScript.
|
|
64
53
|
|
|
65
|
-
|
|
54
|
+
| Property | Type | Default | Description |
|
|
55
|
+
| --- | --- | --- | --- |
|
|
56
|
+
| `isFullscreen` (read-only) | `boolean` | | Whether the widget is currently in fullscreen mode (read-only). Use `btu-widget-fullscreen-changed` event to react to changes. |
|
|
66
57
|
|
|
67
|
-
|
|
68
|
-
| ----------------------- | ------- | ------------------------------------------------------------- |
|
|
69
|
-
| `--widget-background` | | Body and footer background color (default: --btu-theme-white) |
|
|
70
|
-
| `--widget-border` | | Widget border and dividers (default: 1px solid gray-200) |
|
|
71
|
-
| `--widget-border-color` | | Color of header bottom divider (default: gray-200) |
|
|
72
|
-
| `--header-background` | | Header background color (default: transparent) |
|
|
58
|
+
## Events
|
|
73
59
|
|
|
74
|
-
|
|
60
|
+
| Event | Detail | Description |
|
|
61
|
+
| --- | --- | --- |
|
|
62
|
+
| `btu-widget-ready` | | Fired after first render and redistribution |
|
|
63
|
+
| `btu-widget-collapse-changed` | `{collapsed: boolean}` | Fired when collapsed state changes |
|
|
64
|
+
| `btu-widget-fullscreen-changed` | `{fullscreen: boolean}` | Fired when fullscreen state changes |
|
|
75
65
|
|
|
76
|
-
|
|
77
|
-
| ---------- | ---------------------------------------------------------------------- |
|
|
78
|
-
| | Default pseudo-slot: elements without slot attribute are moved to body |
|
|
79
|
-
| `controls` | Pseudo-slot: buttons/actions moved to header actions area |
|
|
80
|
-
| `footer` | Pseudo-slot: content moved to footer container |
|
|
66
|
+
## Slots
|
|
81
67
|
|
|
82
|
-
|
|
68
|
+
| Slot | Description |
|
|
69
|
+
| --- | --- |
|
|
70
|
+
| (default) | Default pseudo-slot: elements without slot attribute are moved to body |
|
|
71
|
+
| `controls` | Pseudo-slot: buttons/actions moved to header actions area |
|
|
72
|
+
| `footer` | Pseudo-slot: content moved to footer container |
|
|
83
73
|
|
|
84
|
-
##
|
|
74
|
+
## CSS custom properties
|
|
85
75
|
|
|
86
|
-
|
|
|
87
|
-
|
|
|
88
|
-
| `
|
|
89
|
-
|
|
|
76
|
+
| Property | Description |
|
|
77
|
+
| --- | --- |
|
|
78
|
+
| `--widget-background` | Body and footer background color (default: --btu-theme-white) |
|
|
79
|
+
| `--widget-border` | Widget border and dividers (default: 1px solid gray-200) |
|
|
80
|
+
| `--widget-border-color` | Color of header bottom divider (default: gray-200) |
|
|
81
|
+
| `--header-background` | Header background color (default: transparent) |
|
|
82
|
+
|
|
83
|
+
## CSS states
|
|
84
|
+
|
|
85
|
+
| State | Description |
|
|
86
|
+
| --- | --- |
|
|
87
|
+
| `:state(collapsed)` | Applied when the widget is collapsed, targetable via :state(collapsed) |
|
|
88
|
+
| `:state(fullscreen)` | Applied when the widget is in fullscreen mode, targetable via :state(fullscreen) |
|
package/llms.txt
ADDED
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
# Brightspot UI
|
|
2
|
+
|
|
3
|
+
> `@brightspot/ui`: Lit web components (`btu-*` tags) and a TailwindCSS v3 preset for building Brightspot CMS screens and plugins.
|
|
4
|
+
|
|
5
|
+
This file describes the version in the `package.json` next to it. Prefer these docs over what you remember about this library, because component APIs change between minor versions.
|
|
6
|
+
|
|
7
|
+
Components render in the light DOM, not a shadow root. In HTML, use the attribute names from each component page: many differ from the JavaScript property names, for example `heading-level` for `headingLevel`.
|
|
8
|
+
|
|
9
|
+
The guide and component pages linked below are markdown.
|
|
10
|
+
|
|
11
|
+
## Getting started
|
|
12
|
+
|
|
13
|
+
- [README](README.md): install, the Tailwind preset and importing components
|
|
14
|
+
- [Using components in a CMS plugin](docs/components/README.md): the CMS defines only `btu-badge`, `btu-copy-to-clipboard`, `btu-icon` and `btu-widget`; import every other element you use
|
|
15
|
+
- [Rendering components from Java](docs/dari-elements.md): the generated `com.brightspot.ui.dari` classes
|
|
16
|
+
|
|
17
|
+
## Components
|
|
18
|
+
|
|
19
|
+
- [`<btu-action-bar>`](docs/components/ActionBar.md): A persistent container for primary, secondary, tertiary, and destructive actions within an interface, typically anchored to the bottom of a view
|
|
20
|
+
- [`<btu-action-item>`](docs/components/ActionItem.md): An action item button for use within `btu-action-bar`
|
|
21
|
+
- [`<btu-ai-sparkle>`](docs/components/AiSparkle.md): The animated AI-branding sparkle
|
|
22
|
+
- [`<btu-avatar>`](docs/components/Avatar.md): An avatar component for displaying user profile images with fallback support
|
|
23
|
+
- [`<btu-avatar-group>`](docs/components/AvatarGroup.md): A container component for grouping multiple avatars with consistent styling
|
|
24
|
+
- [`<btu-badge>`](docs/components/Badge.md): A badge component for highlighting important information
|
|
25
|
+
- [`<btu-banner>`](docs/components/Banner.md): A full-width container that pins a `<btu-message>` to the top of the CMS or a content edit page
|
|
26
|
+
- [`<btu-button-group>`](docs/components/ButtonGroup.md): A semantic container for grouping related buttons together
|
|
27
|
+
- [`<btu-card>`](docs/components/Card.md): A flexible content container for presenting and organizing information
|
|
28
|
+
- [`<btu-checkbox>`](docs/components/Checkbox.md): A checkbox component for selecting one or more options from a set
|
|
29
|
+
- [`<btu-circular-progress>`](docs/components/CircularProgress.md): A circular progress indicator for showing loading states or progress
|
|
30
|
+
- [`<btu-copy-to-clipboard>`](docs/components/CopyToClipboard.md): A button component that copies text to the system clipboard
|
|
31
|
+
- [`<btu-dropdown>`](docs/components/Dropdown.md): A dropdown component that renders a trigger button and manages a floating panel containing a `btu-dropdown-menu`
|
|
32
|
+
- [`<btu-dropdown-item>`](docs/components/DropdownItem.md): A menu item component for use inside `btu-dropdown-menu`
|
|
33
|
+
- [`<btu-dropdown-menu>`](docs/components/DropdownMenu.md): A menu container component that provides keyboard navigation and ARIA menu semantics
|
|
34
|
+
- [`<btu-empty-state>`](docs/components/EmptyState.md): An empty state component for displaying placeholder content when no data is available
|
|
35
|
+
- [`<btu-esca-avatar>`](docs/components/EscaAvatar.md): The animated avatar for the Esca AI assistant, driven entirely by its `state` attribute so the same element works wherever the assistant appears
|
|
36
|
+
- [`<btu-icon>`](docs/components/Icon.md): An icon component for displaying Lucide icons
|
|
37
|
+
- [`<btu-icon-button>`](docs/components/IconButton.md): Surfaces the different actions someone can perform in an interface where space is limited
|
|
38
|
+
- [`<btu-linear-progress>`](docs/components/LinearProgress.md): A horizontal linear progress bar for showing task completion
|
|
39
|
+
- [`<btu-message>`](docs/components/Message.md): A message for communicating high-visibility content that is not tied to the user's current task — alerts, breaking news, and persistent status
|
|
40
|
+
- [`<btu-pagination>`](docs/components/Pagination.md): A pagination component for navigating through paged content
|
|
41
|
+
- [`<btu-popover>`](docs/components/Popover.md): A popover component for displaying rich interactive content anchored to a trigger element
|
|
42
|
+
- [`<btu-radio>`](docs/components/Radio.md): A single radio option, selectable from a set of mutually exclusive choices
|
|
43
|
+
- [`<btu-radio-group>`](docs/components/RadioGroup.md): A container that groups `btu-radio` options into a single-select control
|
|
44
|
+
- [`<btu-switch>`](docs/components/Switch.md): A toggle switch component for binary on/off states
|
|
45
|
+
- [`<btu-tab>`](docs/components/Tab.md): An individual tab within a tab group
|
|
46
|
+
- [`<btu-tabs>`](docs/components/Tabs.md): A container component for managing a group of tabs
|
|
47
|
+
- [`<btu-upload>`](docs/components/Upload.md): A file upload component with drop zone and file list
|
|
48
|
+
- [`<btu-upload-item>`](docs/components/UploadItem.md): Internal upload item sub-component for displaying individual file upload state
|
|
49
|
+
- [`<btu-widget>`](docs/components/Widget.md): A widget component for displaying content with header, body, and footer sections
|
|
50
|
+
|
|
51
|
+
## Tailwind classes
|
|
52
|
+
|
|
53
|
+
Each link is a plugin source file; its header comment lists the classes.
|
|
54
|
+
|
|
55
|
+
- [Button](dist/tailwind-plugin-button.ts): Buttons communicate actions that users can take such as submit a form, begin a new task, trigger a new UI element to appear or take a new or next step in some process
|
|
56
|
+
- [Heading](dist/tailwind-plugin-heading.ts): Headings are a combination of font-size, line-height and weight
|
|
57
|
+
- [Scroll Shadow](dist/tailwind-plugin-scroll-shadow.ts): This plugin adds shadows to the edges of a scrollable container when the content of the container overflows
|
|
58
|
+
- [Icon](dist/tailwind-plugin-icon.ts): Lucide icons as classes, for example `before:btu-icon before:btu-icon-heart`, plus size and gradient modifiers
|
|
59
|
+
|
|
60
|
+
## Optional
|
|
61
|
+
|
|
62
|
+
- [Custom Elements Manifest](dist/custom-elements.json): the machine-readable API of every element
|
|
63
|
+
- [Changelog](CHANGELOG.md): what changed in each release
|