@brightspot/ui 1.10.0 → 3.0.0
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/dist/components/action-bar/ActionBar.d.ts +163 -0
- package/dist/components/action-bar/ActionBar.d.ts.map +1 -0
- package/dist/components/action-bar/ActionBar.js +479 -0
- package/dist/components/action-bar/ActionBar.js.map +1 -0
- package/dist/components/action-bar/ActionItem.d.ts +103 -0
- package/dist/components/action-bar/ActionItem.d.ts.map +1 -0
- package/dist/components/action-bar/ActionItem.js +237 -0
- package/dist/components/action-bar/ActionItem.js.map +1 -0
- package/dist/components/avatar/AvatarGroup.d.ts +3 -0
- package/dist/components/avatar/AvatarGroup.d.ts.map +1 -1
- package/dist/components/avatar/AvatarGroup.js +3 -0
- package/dist/components/avatar/AvatarGroup.js.map +1 -1
- package/dist/components/badge/Badge.d.ts +3 -1
- package/dist/components/badge/Badge.d.ts.map +1 -1
- package/dist/components/badge/Badge.js +2 -0
- package/dist/components/badge/Badge.js.map +1 -1
- package/dist/components/button-group/ButtonGroup.d.ts +138 -0
- package/dist/components/button-group/ButtonGroup.d.ts.map +1 -0
- package/dist/components/button-group/ButtonGroup.js +436 -0
- package/dist/components/button-group/ButtonGroup.js.map +1 -0
- package/dist/components/checkbox/Checkbox.d.ts +107 -0
- package/dist/components/checkbox/Checkbox.d.ts.map +1 -0
- package/dist/components/checkbox/Checkbox.js +224 -0
- package/dist/components/checkbox/Checkbox.js.map +1 -0
- package/dist/components/circular-progress/CircularProgress.d.ts +2 -2
- package/dist/components/circular-progress/CircularProgress.js +2 -2
- package/dist/components/copy-to-clipboard/CopyToClipboard.d.ts +7 -2
- package/dist/components/copy-to-clipboard/CopyToClipboard.d.ts.map +1 -1
- package/dist/components/copy-to-clipboard/CopyToClipboard.js +10 -5
- package/dist/components/copy-to-clipboard/CopyToClipboard.js.map +1 -1
- package/dist/components/dropdown/Dropdown.d.ts +8 -6
- package/dist/components/dropdown/Dropdown.d.ts.map +1 -1
- package/dist/components/dropdown/Dropdown.js +33 -22
- package/dist/components/dropdown/Dropdown.js.map +1 -1
- package/dist/components/dropdown/DropdownItem.d.ts +28 -7
- package/dist/components/dropdown/DropdownItem.d.ts.map +1 -1
- package/dist/components/dropdown/DropdownItem.js +41 -16
- package/dist/components/dropdown/DropdownItem.js.map +1 -1
- package/dist/components/dropdown/DropdownMenu.d.ts +6 -8
- package/dist/components/dropdown/DropdownMenu.d.ts.map +1 -1
- package/dist/components/dropdown/DropdownMenu.js +22 -37
- package/dist/components/dropdown/DropdownMenu.js.map +1 -1
- package/dist/components/empty-state/EmptyState.css +4 -0
- package/dist/components/empty-state/EmptyState.d.ts +103 -0
- package/dist/components/empty-state/EmptyState.d.ts.map +1 -0
- package/dist/components/empty-state/EmptyState.js +209 -0
- package/dist/components/empty-state/EmptyState.js.map +1 -0
- package/dist/components/icon/Icon.d.ts +23 -10
- package/dist/components/icon/Icon.d.ts.map +1 -1
- package/dist/components/icon/Icon.js +40 -9
- package/dist/components/icon/Icon.js.map +1 -1
- package/dist/components/icon-button/IconButton.d.ts +7 -21
- package/dist/components/icon-button/IconButton.d.ts.map +1 -1
- package/dist/components/icon-button/IconButton.js +12 -18
- package/dist/components/icon-button/IconButton.js.map +1 -1
- package/dist/components/linear-progress/LinearProgress.d.ts +2 -2
- package/dist/components/linear-progress/LinearProgress.js +2 -2
- package/dist/components/pagination/Pagination.d.ts +33 -4
- package/dist/components/pagination/Pagination.d.ts.map +1 -1
- package/dist/components/pagination/Pagination.js +88 -24
- package/dist/components/pagination/Pagination.js.map +1 -1
- package/dist/components/popover/Popover.d.ts +6 -0
- package/dist/components/popover/Popover.d.ts.map +1 -1
- package/dist/components/popover/Popover.js +6 -0
- package/dist/components/popover/Popover.js.map +1 -1
- package/dist/components/switch/Switch.d.ts +5 -1
- package/dist/components/switch/Switch.d.ts.map +1 -1
- package/dist/components/switch/Switch.js +10 -6
- package/dist/components/switch/Switch.js.map +1 -1
- package/dist/components/tabs/Tab.d.ts +108 -0
- package/dist/components/tabs/Tab.d.ts.map +1 -0
- package/dist/components/tabs/Tab.js +152 -0
- package/dist/components/tabs/Tab.js.map +1 -0
- package/dist/components/tabs/Tabs.d.ts +126 -0
- package/dist/components/tabs/Tabs.d.ts.map +1 -0
- package/dist/components/tabs/Tabs.js +390 -0
- package/dist/components/tabs/Tabs.js.map +1 -0
- package/dist/components/upload/Upload.d.ts +157 -0
- package/dist/components/upload/Upload.d.ts.map +1 -0
- package/dist/components/upload/Upload.js +538 -0
- package/dist/components/upload/Upload.js.map +1 -0
- package/dist/components/upload/UploadItem.d.ts +73 -0
- package/dist/components/upload/UploadItem.d.ts.map +1 -0
- package/dist/components/upload/UploadItem.js +180 -0
- package/dist/components/upload/UploadItem.js.map +1 -0
- package/dist/components/widget/Widget.d.ts +1 -6
- package/dist/components/widget/Widget.d.ts.map +1 -1
- package/dist/components/widget/Widget.js +1 -6
- package/dist/components/widget/Widget.js.map +1 -1
- package/dist/custom-elements.json +8445 -1989
- package/dist/storybook/assets/ActionBar.stories-DRIVI-W2.js +408 -0
- package/dist/storybook/assets/ActionItem.stories-5qlgxYNB.js +203 -0
- package/dist/storybook/assets/{Avatar.stories-B26mRkkZ.js → Avatar.stories-B3VkhRhP.js} +2 -2
- package/dist/storybook/assets/{AvatarGroup.stories-J7lVGsMY.js → AvatarGroup.stories-DOfim2NY.js} +5 -5
- package/dist/storybook/assets/{Badge.stories-BpTIV61M.js → Badge.stories-B04VNAcc.js} +2 -2
- package/dist/storybook/assets/{Button-Dg-fIrzT.js → Button-CILTcGRT.js} +1 -1
- package/dist/storybook/assets/{Button.stories-gPKRVbxk.js → Button.stories-CzWAltrX.js} +1 -1
- package/dist/storybook/assets/ButtonGroup.stories-1uAJf79o.js +588 -0
- package/dist/storybook/assets/{Celebrate.stories-DbY-sKEe.js → Celebrate.stories-BEqj0VnW.js} +7 -7
- package/dist/storybook/assets/Checkbox.stories-DXAGFS0M.js +141 -0
- package/dist/storybook/assets/{CircularProgress.stories-DeH5JYX_.js → CircularProgress.stories-D4rftw22.js} +7 -7
- package/dist/storybook/assets/{ClipboardMixin.stories-C-lZ4uuw.js → ClipboardMixin.stories-z2n2HWt1.js} +31 -28
- package/dist/storybook/assets/{Color-6BZIO3FS-Cu6zVIuG.js → Color-6BZIO3FS-C6KyMgZz.js} +1 -1
- package/dist/storybook/assets/{Colors.stories-D6XYMrTD.js → Colors.stories-CX-Ny3B_.js} +1 -1
- package/dist/storybook/assets/{CombinedEffects.stories-jFekKTYg.js → CombinedEffects.stories-BkqtiVHp.js} +33 -33
- package/dist/storybook/assets/{ComponentStatesMixin-g50hRCPT.js → ComponentStatesMixin-DLd0feFg.js} +1 -1
- package/dist/storybook/assets/{ComponentStatesMixin.stories-D3Q5pR38.js → ComponentStatesMixin.stories-D6Yc5Jgl.js} +3 -3
- package/dist/storybook/assets/{CopyToClipboard.stories-COZZ1VC2.js → CopyToClipboard.stories-B-omwDDJ.js} +16 -16
- package/dist/storybook/assets/{Debounce.stories-Dl10LAnx.js → Debounce.stories-B2vE5QIx.js} +9 -9
- package/dist/storybook/assets/{DocsRenderer-LL677BLK-CFLtMbUx.js → DocsRenderer-LL677BLK-DNUlRvMg.js} +3 -3
- package/dist/storybook/assets/{Dropdown.stories-Drwq-0Z2.js → Dropdown.stories-_bx4WDLr.js} +95 -68
- package/dist/storybook/assets/EmptyState.stories-CGMbmo77.js +318 -0
- package/dist/storybook/assets/{Events.stories-dODeR-g-.js → Events.stories-CkQYKcoZ.js} +1 -1
- package/dist/storybook/assets/{Heading.stories-CH7_-_q3.js → Heading.stories-BU5Do_od.js} +1 -1
- package/dist/storybook/assets/{HueRipple.stories-CH1Y739k.js → HueRipple.stories-Di2zmxo3.js} +11 -11
- package/dist/storybook/assets/Icon.stories-Dk4ZXhhJ.js +441 -0
- package/dist/storybook/assets/{IconButton.stories-DuzqvcnN.js → IconButton.stories-BSCiXPXa.js} +126 -146
- package/dist/storybook/assets/{LinearProgress.stories-C7IdnJd3.js → LinearProgress.stories-BGxPZuni.js} +7 -7
- package/dist/storybook/assets/Pagination.stories-z3Zq8b4f.js +252 -0
- package/dist/storybook/assets/{Popover.stories-Ca1F-wrI.js → Popover.stories-C9GxWcax.js} +33 -62
- package/dist/storybook/assets/ReadyMixin-CQw8N6P9.js +1 -0
- package/dist/storybook/assets/RovingTabindexMixin.stories-ByxLBi6m.js +192 -0
- package/dist/storybook/assets/{Rtc.stories-BVJc1vCA.js → Rtc.stories-DQJlCXWR.js} +3 -3
- package/dist/storybook/assets/ScrollShadow.stories-gjTIAbUA.js +17 -0
- package/dist/storybook/assets/{Switch.stories-BEEHP8mD.js → Switch.stories-BEeqPZiP.js} +21 -21
- package/dist/storybook/assets/Tab.stories-DpB3I-WZ.js +218 -0
- package/dist/storybook/assets/Tabs.stories-C6mG6Xi7.js +211 -0
- package/dist/storybook/assets/{Throttle.stories-C4xsYeAb.js → Throttle.stories-x9tpGeQh.js} +10 -10
- package/dist/storybook/assets/{Tooltip.stories-Ccm4AnSv.js → Tooltip.stories-CqcLqdmc.js} +2 -2
- package/dist/storybook/assets/Upload.stories-CMaAbCSH.js +447 -0
- package/dist/storybook/assets/UploadItem.stories-GB98L3JQ.js +167 -0
- package/dist/storybook/assets/{Welcome.stories-Degjk-M0.js → Welcome.stories-6h9cUZ7v.js} +1 -1
- package/dist/storybook/assets/{Widget.stories-OKnZ9sDs.js → Widget.stories-DiA1PR6Y.js} +13 -13
- package/dist/storybook/assets/{WithTooltip-65CFNBJE-CXL3TyJ2.js → WithTooltip-65CFNBJE-DTsHhBb_.js} +2 -2
- package/dist/storybook/assets/{blocks-DLdUKG_W.js → blocks-IXdn9TGW.js} +5 -5
- package/dist/storybook/assets/{formatter-EIJCOSYU-29NCxjfM.js → formatter-EIJCOSYU-Cum4J6N4.js} +1 -1
- package/dist/storybook/assets/if-defined-CgfCxQoV.js +1 -0
- package/dist/storybook/assets/iframe-BgFj0b5u.css +1 -0
- package/dist/storybook/assets/{iframe-BqvwP3or.js → iframe-Sf9RHZFu.js} +200 -200
- package/dist/storybook/assets/{index-BIyTv1BF.js → index-D605PvQH.js} +1 -1
- package/dist/storybook/assets/onFind-C41m8c_a.js +1 -0
- package/dist/storybook/assets/{onFind.stories-D64-QZqf.js → onFind.stories-MOTfGlJd.js} +53 -77
- package/dist/storybook/assets/{onRemove.stories-BICsnIJL.js → onRemove.stories-DX58Bf6f.js} +6 -10
- package/dist/storybook/assets/{onVisible.stories-DpDZP9_5.js → onVisible.stories-NNFeFeD8.js} +3 -3
- package/dist/storybook/assets/style-map-B99QiqCo.js +1 -0
- package/dist/storybook/assets/{syntaxhighlighter-ED5Y7EFY-Bz_DuQj8.js → syntaxhighlighter-ED5Y7EFY-BqQ-o9mS.js} +1 -1
- package/dist/storybook/box-illustration.svg +51 -0
- package/dist/storybook/cloud-illustration.svg +49 -0
- package/dist/storybook/docs-illustration.svg +92 -0
- package/dist/storybook/iframe.html +2 -2
- package/dist/storybook/index.json +1 -1
- package/dist/storybook/project.json +1 -1
- package/dist/tailwind-plugin-action-bar.d.ts +2 -0
- package/dist/tailwind-plugin-action-bar.d.ts.map +1 -0
- package/dist/tailwind-plugin-action-bar.js +120 -0
- package/dist/tailwind-plugin-action-bar.js.map +1 -0
- package/dist/tailwind-plugin-action-bar.ts +134 -0
- package/dist/tailwind-plugin-badge.js +5 -6
- package/dist/tailwind-plugin-badge.js.map +1 -1
- package/dist/tailwind-plugin-badge.ts +5 -6
- package/dist/tailwind-plugin-button-group.d.ts +2 -0
- package/dist/tailwind-plugin-button-group.d.ts.map +1 -0
- package/dist/tailwind-plugin-button-group.js +215 -0
- package/dist/tailwind-plugin-button-group.js.map +1 -0
- package/dist/tailwind-plugin-button-group.ts +238 -0
- package/dist/tailwind-plugin-button.js +2 -1
- package/dist/tailwind-plugin-button.js.map +1 -1
- package/dist/tailwind-plugin-button.ts +2 -1
- package/dist/tailwind-plugin-checkbox.d.ts +2 -0
- package/dist/tailwind-plugin-checkbox.d.ts.map +1 -0
- package/dist/tailwind-plugin-checkbox.js +246 -0
- package/dist/tailwind-plugin-checkbox.js.map +1 -0
- package/dist/tailwind-plugin-checkbox.ts +281 -0
- package/dist/tailwind-plugin-empty-state.d.ts +2 -0
- package/dist/tailwind-plugin-empty-state.d.ts.map +1 -0
- package/dist/tailwind-plugin-empty-state.js +113 -0
- package/dist/tailwind-plugin-empty-state.js.map +1 -0
- package/dist/tailwind-plugin-empty-state.ts +124 -0
- package/dist/tailwind-plugin-icon.js +122 -18
- package/dist/tailwind-plugin-icon.js.map +1 -1
- package/dist/tailwind-plugin-icon.ts +131 -18
- package/dist/tailwind-plugin-loader.js +3 -3
- package/dist/tailwind-plugin-loader.ts +3 -3
- package/dist/tailwind-plugin-pagination.js +13 -23
- package/dist/tailwind-plugin-pagination.js.map +1 -1
- package/dist/tailwind-plugin-pagination.ts +15 -25
- package/dist/tailwind-plugin-tabs.d.ts +2 -0
- package/dist/tailwind-plugin-tabs.d.ts.map +1 -0
- package/dist/tailwind-plugin-tabs.js +158 -0
- package/dist/tailwind-plugin-tabs.js.map +1 -0
- package/dist/tailwind-plugin-tabs.ts +169 -0
- package/dist/tailwind-plugin-upload.d.ts +2 -0
- package/dist/tailwind-plugin-upload.d.ts.map +1 -0
- package/dist/tailwind-plugin-upload.js +322 -0
- package/dist/tailwind-plugin-upload.js.map +1 -0
- package/dist/tailwind-plugin-upload.ts +362 -0
- package/dist/tailwind.config.d.ts.map +1 -1
- package/dist/tailwind.config.js +1 -0
- package/dist/tailwind.config.js.map +1 -1
- package/dist/tailwind.config.ts +1 -0
- package/dist/util/ClipboardMixin.d.ts +7 -2
- package/dist/util/ClipboardMixin.d.ts.map +1 -1
- package/dist/util/ClipboardMixin.js +15 -13
- package/dist/util/ClipboardMixin.js.map +1 -1
- package/dist/util/ComponentStatesMixin.d.ts +2 -1
- package/dist/util/ComponentStatesMixin.d.ts.map +1 -1
- package/dist/util/ComponentStatesMixin.js +4 -0
- package/dist/util/ComponentStatesMixin.js.map +1 -1
- package/dist/util/EventEmitterMixin.d.ts +58 -4
- package/dist/util/EventEmitterMixin.d.ts.map +1 -1
- package/dist/util/EventEmitterMixin.js +5 -2
- package/dist/util/EventEmitterMixin.js.map +1 -1
- package/dist/util/ProgressMixin.d.ts +9 -2
- package/dist/util/ProgressMixin.d.ts.map +1 -1
- package/dist/util/ProgressMixin.js +22 -18
- package/dist/util/ProgressMixin.js.map +1 -1
- package/dist/util/RovingTabindexMixin.d.ts +46 -0
- package/dist/util/RovingTabindexMixin.d.ts.map +1 -0
- package/dist/util/RovingTabindexMixin.js +83 -0
- package/dist/util/RovingTabindexMixin.js.map +1 -0
- package/dist/util/TetherLayout.d.ts.map +1 -1
- package/dist/util/TetherLayout.js +3 -0
- package/dist/util/TetherLayout.js.map +1 -1
- package/dist/util/TooltipMixin.d.ts.map +1 -1
- package/dist/util/TooltipMixin.js +5 -4
- package/dist/util/TooltipMixin.js.map +1 -1
- package/dist/util/upload.d.ts +53 -0
- package/dist/util/upload.d.ts.map +1 -0
- package/dist/util/upload.js +113 -0
- package/dist/util/upload.js.map +1 -0
- package/docs/components/ActionBar.md +77 -0
- package/docs/components/ActionItem.md +101 -0
- package/docs/components/Avatar.md +42 -12
- package/docs/components/AvatarGroup.md +4 -3
- package/docs/components/Badge.md +13 -1
- package/docs/components/ButtonGroup.md +91 -0
- package/docs/components/Checkbox.md +91 -0
- package/docs/components/CircularProgress.md +41 -12
- package/docs/components/CopyToClipboard.md +13 -11
- package/docs/components/Dropdown.md +51 -26
- package/docs/components/DropdownItem.md +44 -27
- package/docs/components/DropdownMenu.md +14 -14
- package/docs/components/EmptyState.md +75 -0
- package/docs/components/Icon.md +22 -14
- package/docs/components/IconButton.md +46 -21
- package/docs/components/LinearProgress.md +43 -4
- package/docs/components/Pagination.md +38 -34
- package/docs/components/Popover.md +16 -0
- package/docs/components/README.md +9 -0
- package/docs/components/Switch.md +21 -16
- package/docs/components/Tab.md +79 -0
- package/docs/components/Tabs.md +85 -0
- package/docs/components/Upload.md +112 -0
- package/docs/components/UploadItem.md +61 -0
- package/docs/components/Widget.md +12 -6
- package/package.json +4 -2
- package/dist/storybook/assets/Icon.stories-CPjM-jTU.js +0 -264
- package/dist/storybook/assets/Pagination.stories-C4cLjS_9.js +0 -272
- package/dist/storybook/assets/ReadyMixin-DNZ5dCsZ.js +0 -1
- package/dist/storybook/assets/ScrollShadow.stories-C3W5o9ZW.js +0 -17
- package/dist/storybook/assets/if-defined-BZFPaJjl.js +0 -1
- package/dist/storybook/assets/iframe-C5bIZMJ5.css +0 -1
- package/dist/storybook/assets/onFind-1l3EPW-I.js +0 -1
- package/dist/storybook/assets/style-map-CBrSnxRe.js +0 -1
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
# `src/components/checkbox/Checkbox.ts`:
|
|
2
|
+
|
|
3
|
+
## class: `Checkbox`, `btu-checkbox`
|
|
4
|
+
|
|
5
|
+
### Superclass
|
|
6
|
+
|
|
7
|
+
| Name | Module | Package |
|
|
8
|
+
| ------------ | ------ | ------- |
|
|
9
|
+
| `LitElement` | | lit |
|
|
10
|
+
|
|
11
|
+
### Mixins
|
|
12
|
+
|
|
13
|
+
| Name | Module | Package |
|
|
14
|
+
| ------------------- | ------------------------------ | ------- |
|
|
15
|
+
| `EventEmitterMixin` | /src/util/EventEmitterMixin.js | |
|
|
16
|
+
| `ReadyMixin` | /src/util/ReadyMixin.js | |
|
|
17
|
+
|
|
18
|
+
### Fields
|
|
19
|
+
|
|
20
|
+
| Name | Privacy | Type | Default | Description | Inherited From |
|
|
21
|
+
| ------------------------- | ------- | --------------------- | --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
|
|
22
|
+
| `label` | | `string \| undefined` | | The text label displayed next to the checkbox. | |
|
|
23
|
+
| `description` | | `string \| undefined` | | Optional helper text displayed below the label. | |
|
|
24
|
+
| `size` | | `'sm' \| 'md'` | `'sm'` | Controls the scale of the checkbox and associated typography. | |
|
|
25
|
+
| `checked` | | `boolean` | `false` | Whether the checkbox is currently selected. | |
|
|
26
|
+
| `indeterminate` | | `boolean` | `false` | Whether the checkbox is in a partially selected state. Sets \`aria-checked='mixed'\`
and activates the native \`:indeterminate\` pseudo-class. Cleared automatically when
the user clicks the checkbox. | |
|
|
27
|
+
| `disabled` | | `boolean` | `false` | If true, the checkbox is non-interactive and visually muted. | |
|
|
28
|
+
| `invalid` | | `boolean` | `false` | If true, displays error styling on the checkbox. | |
|
|
29
|
+
| `error` | | `string \| undefined` | | Error message text displayed below the checkbox when validation fails.
Setting this also activates error styling without needing to set invalid. | |
|
|
30
|
+
| `required` | | `boolean` | `false` | Marks the field as mandatory for form submission. | |
|
|
31
|
+
| `name` | | `string \| undefined` | | Name of the form control submitted with the form data. | |
|
|
32
|
+
| `value` | | `string` | `'on'` | Value associated with the checkbox when submitted. | |
|
|
33
|
+
| `_userInitiated` | private | `boolean` | `false` | | |
|
|
34
|
+
| `_initialClasses` | private | `string[]` | `[]` | | |
|
|
35
|
+
| `_initialClassesCaptured` | private | `boolean` | `false` | | |
|
|
36
|
+
| `_descId` | private | | `` `checkbox-desc-${crypto.randomUUID()}` `` | | |
|
|
37
|
+
| `_errorId` | private | | `` `checkbox-error-${crypto.randomUUID()}` `` | | |
|
|
38
|
+
| `_handleClick` | private | | | | |
|
|
39
|
+
| `_describedBy` | private | `string \| undefined` | | | |
|
|
40
|
+
| `_iconSymbol` | private | `'minus' \| 'check'` | | | |
|
|
41
|
+
|
|
42
|
+
### Methods
|
|
43
|
+
|
|
44
|
+
| Name | Privacy | Description | Parameters | Return | Inherited From |
|
|
45
|
+
| ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | --------- | ----------------- |
|
|
46
|
+
| `_onInputChange` | private | | `e: Event` | `void` | |
|
|
47
|
+
| `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 |
|
|
48
|
+
|
|
49
|
+
### Events
|
|
50
|
+
|
|
51
|
+
| Name | Type | Description | Inherited From |
|
|
52
|
+
| --------------------- | ----------------------------------- | ---------------------------------------------------------- | -------------- |
|
|
53
|
+
| `btu-checkbox-ready` | `CustomEvent` | Fired after the checkbox is first rendered and initialized | |
|
|
54
|
+
| `btu-checkbox-change` | `CustomEvent<{ checked: boolean }>` | Fired when the user toggles the checked state | |
|
|
55
|
+
|
|
56
|
+
### Attributes
|
|
57
|
+
|
|
58
|
+
| Name | Field | Inherited From |
|
|
59
|
+
| --------------- | ------------- | -------------- |
|
|
60
|
+
| `label` | label | |
|
|
61
|
+
| `description` | description | |
|
|
62
|
+
| `size` | size | |
|
|
63
|
+
| `checked` | checked | |
|
|
64
|
+
| `indeterminate` | indeterminate | |
|
|
65
|
+
| `disabled` | disabled | |
|
|
66
|
+
| `invalid` | invalid | |
|
|
67
|
+
| `error` | error | |
|
|
68
|
+
| `required` | required | |
|
|
69
|
+
| `name` | name | |
|
|
70
|
+
| `value` | value | |
|
|
71
|
+
|
|
72
|
+
### CSS Properties
|
|
73
|
+
|
|
74
|
+
| Name | Default | Description |
|
|
75
|
+
| -------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
76
|
+
| `--checkbox-color-primary` | | Background and border color when checked or indeterminate, and tinted background/border on unchecked hover (default: oklch(var(--btu-theme-primary-700))) |
|
|
77
|
+
| `--checkbox-color-border` | | Border color in the unchecked state (default: oklch(var(--btu-theme-gray-300))) |
|
|
78
|
+
| `--checkbox-color-error` | | Border and text color in the error state (default: oklch(var(--btu-theme-error-600))) |
|
|
79
|
+
| `--checkbox-border-radius` | | Corner rounding of the checkbox square (default: 4px) |
|
|
80
|
+
| `--checkbox-label-spacing` | | Distance between the checkbox and the label (default: 0.75rem) |
|
|
81
|
+
| `--checkbox-box-size` | | \[Internal] Width and height of the checkbox square, set by the size variant (sm: 1rem, md: 1.25rem). Use the \`size\` attribute instead of overriding directly — the icon must scale in tandem. |
|
|
82
|
+
| `--checkbox-icon-size` | | \[Internal] Width and height of the icon inside the box, set by the size variant (sm: 0.75rem, md: 0.875rem). Use the \`size\` attribute instead of overriding directly. |
|
|
83
|
+
|
|
84
|
+
<hr/>
|
|
85
|
+
|
|
86
|
+
## Exports
|
|
87
|
+
|
|
88
|
+
| Kind | Name | Declaration | Module | Package |
|
|
89
|
+
| --------------------------- | -------------- | ----------- | ----------------------------------- | ------- |
|
|
90
|
+
| `js` | `default` | Checkbox | src/components/checkbox/Checkbox.ts | |
|
|
91
|
+
| `custom-element-definition` | `btu-checkbox` | Checkbox | src/components/checkbox/Checkbox.ts | |
|
|
@@ -18,24 +18,53 @@
|
|
|
18
18
|
|
|
19
19
|
### Fields
|
|
20
20
|
|
|
21
|
-
| Name
|
|
22
|
-
|
|
|
23
|
-
| `indeterminate`
|
|
24
|
-
| `size`
|
|
21
|
+
| Name | Privacy | Type | Default | Description | Inherited From |
|
|
22
|
+
| ------------------------- | ------- | -------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
|
|
23
|
+
| `indeterminate` | | `boolean` | `true` | Whether the progress indicator is indeterminate (animated spinner).
When false, shows determinate progress based on the progress value. | |
|
|
24
|
+
| `size` | | `'sm' \| 'md' \| 'lg'` | `'sm'` | Size variant.
- 'sm': Small (16px) - default
- 'md': Medium (32px)
- 'lg': Large (48px) | |
|
|
25
|
+
| `color` | | `ProgressColors` | `'primary'` | Color theme of the progress indicator.
Supports: black, white, primary, teal, gray, purple, rose, error, warning, success | ProgressMixin |
|
|
26
|
+
| `thickness` | | `number \| undefined` | | Stroke width of the progress indicator. | ProgressMixin |
|
|
27
|
+
| `_progress` | private | `number` | `0` | | ProgressMixin |
|
|
28
|
+
| `progress` | | | | Progress value for determinate variant. Clamped to 0–100. | ProgressMixin |
|
|
29
|
+
| `label` | | `string \| undefined` | | Optional label text to display with the progress indicator. | ProgressMixin |
|
|
30
|
+
| `initialAnimation` | | `boolean` | `true` | Whether to animate progress from 0 to target value when component first becomes visible. | ProgressMixin |
|
|
31
|
+
| `ariaLabel` | | `string \| null` | `null` | Optional aria-label attribute for screen readers.
Describes what the progress indicator represents. | ProgressMixin |
|
|
32
|
+
| `ariaLabelledBy` | | `string \| null` | `null` | Optional aria-labelledby attribute for screen readers.
References the ID of an element that labels the progress indicator. | ProgressMixin |
|
|
33
|
+
| `ariaValueText` | | `string \| null` | `null` | Optional aria-valuetext attribute for screen readers.
Provides human-readable text alternative for progress value. | ProgressMixin |
|
|
34
|
+
| `completionAnnouncement` | | `string \| undefined` | | Optional message to announce to screen readers when progress reaches 100%.
If not provided, no announcement will be made on completion. | ProgressMixin |
|
|
35
|
+
| `_isAnimationInitialized` | private | `boolean` | `false` | | ProgressMixin |
|
|
36
|
+
| `_intersectionObserver` | private | `IntersectionObserver \| undefined` | | | ProgressMixin |
|
|
37
|
+
| `_hasCompletedAt100` | private | `boolean` | `false` | | ProgressMixin |
|
|
38
|
+
| `_hostTag` | private | `'btu-linear-progress' \| 'btu-circular-progress'` | | | ProgressMixin |
|
|
39
|
+
|
|
40
|
+
### Methods
|
|
41
|
+
|
|
42
|
+
| Name | Privacy | Description | Parameters | Return | Inherited From |
|
|
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 |
|
|
25
45
|
|
|
26
46
|
### Events
|
|
27
47
|
|
|
28
|
-
| Name
|
|
29
|
-
|
|
|
30
|
-
| `btu-progress-ready` | `CustomEvent` | Fired after first render and initialization | |
|
|
31
|
-
| `btu-progress-complete` | `CustomEvent` | Fired when determinate progress reaches 100 | |
|
|
48
|
+
| Name | Type | Description | Inherited From |
|
|
49
|
+
| -------------------------------- | ------------- | ------------------------------------------- | -------------- |
|
|
50
|
+
| `btu-circular-progress-ready` | `CustomEvent` | Fired after first render and initialization | |
|
|
51
|
+
| `btu-circular-progress-complete` | `CustomEvent` | Fired when determinate progress reaches 100 | |
|
|
32
52
|
|
|
33
53
|
### Attributes
|
|
34
54
|
|
|
35
|
-
| Name
|
|
36
|
-
|
|
|
37
|
-
| `indeterminate`
|
|
38
|
-
| `size`
|
|
55
|
+
| Name | Field | Inherited From |
|
|
56
|
+
| ------------------------- | ---------------------- | -------------- |
|
|
57
|
+
| `indeterminate` | indeterminate | |
|
|
58
|
+
| `size` | size | |
|
|
59
|
+
| `color` | color | ProgressMixin |
|
|
60
|
+
| `thickness` | thickness | ProgressMixin |
|
|
61
|
+
| `progress` | progress | ProgressMixin |
|
|
62
|
+
| `label` | label | ProgressMixin |
|
|
63
|
+
| `initial-animation` | initialAnimation | ProgressMixin |
|
|
64
|
+
| `aria-label` | ariaLabel | ProgressMixin |
|
|
65
|
+
| `aria-labelledby` | ariaLabelledBy | ProgressMixin |
|
|
66
|
+
| `aria-valuetext` | ariaValueText | ProgressMixin |
|
|
67
|
+
| `completion-announcement` | completionAnnouncement | ProgressMixin |
|
|
39
68
|
|
|
40
69
|
### CSS Properties
|
|
41
70
|
|
|
@@ -19,23 +19,25 @@
|
|
|
19
19
|
|
|
20
20
|
### Fields
|
|
21
21
|
|
|
22
|
-
| Name
|
|
23
|
-
|
|
|
24
|
-
| `copydata`
|
|
25
|
-
| `buttonClasses`
|
|
22
|
+
| Name | Privacy | Type | Default | Description | Inherited From |
|
|
23
|
+
| ---------------- | ------- | -------------------------------- | ------- | ------------------------------------------------------------------------------- | -------------- |
|
|
24
|
+
| `copydata` | | `string \| undefined` | | The text to be copied to the system clipboard. | |
|
|
25
|
+
| `buttonClasses` | | `string \| undefined` | | Custom CSS classes for the button. If provided, replaces the default classes. | |
|
|
26
|
+
| `copiedStateKey` | | `'btu-copy-to-clipboard-copied'` | | Custom state applied briefly after a successful copy; also emitted as an event. | ClipboardMixin |
|
|
26
27
|
|
|
27
28
|
### Methods
|
|
28
29
|
|
|
29
|
-
| Name | Privacy | Description
|
|
30
|
-
| ------ | ------- |
|
|
31
|
-
| `copy` | | Copies the copydata to the system clipboard.
Displays a success state for 3 seconds after copying. |
|
|
30
|
+
| Name | Privacy | Description | Parameters | Return | Inherited From |
|
|
31
|
+
| ------ | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | --------- | ----------------- |
|
|
32
|
+
| `copy` | | Copies the copydata to the system clipboard.
Displays a success state for 3 seconds after copying. | `text: string, timeout` | | ClipboardMixin |
|
|
33
|
+
| `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 |
|
|
32
34
|
|
|
33
35
|
### Events
|
|
34
36
|
|
|
35
|
-
| Name
|
|
36
|
-
|
|
|
37
|
-
| `btu-clipboard-ready` | `CustomEvent` | Fired after first render and initialization | |
|
|
38
|
-
| `btu-clipboard-copied` | `CustomEvent` | Fired when text is successfully copied to clipboard | |
|
|
37
|
+
| Name | Type | Description | Inherited From |
|
|
38
|
+
| ------------------------------ | ------------- | --------------------------------------------------- | -------------- |
|
|
39
|
+
| `btu-copy-to-clipboard-ready` | `CustomEvent` | Fired after first render and initialization | |
|
|
40
|
+
| `btu-copy-to-clipboard-copied` | `CustomEvent` | Fired when text is successfully copied to clipboard | |
|
|
39
41
|
|
|
40
42
|
### Attributes
|
|
41
43
|
|
|
@@ -18,37 +18,51 @@
|
|
|
18
18
|
|
|
19
19
|
### Fields
|
|
20
20
|
|
|
21
|
-
| Name | Privacy | Type
|
|
22
|
-
| ------------------ | ------- |
|
|
23
|
-
| `label` | | `string`
|
|
24
|
-
| `open` | | `boolean`
|
|
25
|
-
| `placement` | | `Placement`
|
|
26
|
-
| `size` | | `Size`
|
|
27
|
-
| `disabled` | | `boolean`
|
|
28
|
-
| `variant` | | `Variant`
|
|
29
|
-
| `
|
|
30
|
-
| `iconPosition` | | `'leading' \| 'trailing'`
|
|
31
|
-
| `iconOnly` | | `boolean`
|
|
32
|
-
| `stayOpenOnSelect` | | `boolean`
|
|
33
|
-
| `noChevron` | | `boolean`
|
|
21
|
+
| Name | Privacy | Type | Default | Description | Inherited From |
|
|
22
|
+
| ------------------ | ------- | ---------------------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
|
|
23
|
+
| `label` | | `string` | `''` | Trigger button text. | |
|
|
24
|
+
| `open` | | `boolean` | `false` | Panel visibility state. Can be set programmatically (e.g., for tour UIs)
— syncs to \`showPopover()\`/\`hidePopover()\` in \`updated()\`. | |
|
|
25
|
+
| `placement` | | `Placement` | `'bottom-start'` | Panel placement: 'bottom-start', 'bottom-end', 'top-start', 'top-end'. | |
|
|
26
|
+
| `size` | | `Size` | `'md'` | Button size: 'sm', 'md', 'lg'. | |
|
|
27
|
+
| `disabled` | | `boolean` | `false` | Prevents opening. | |
|
|
28
|
+
| `variant` | | `Variant` | `'secondary'` | Button variant: 'primary', 'secondary', 'tertiary', 'primary-clear', 'secondary-clear', 'tertiary-clear'. | |
|
|
29
|
+
| `symbol` | | `string` | `''` | Lucide icon symbol for the trigger. | |
|
|
30
|
+
| `iconPosition` | | `'leading' \| 'trailing'` | `'leading'` | Icon position: 'leading' or 'trailing'. | |
|
|
31
|
+
| `iconOnly` | | `boolean` | `false` | Hides label, shows icon only. | |
|
|
32
|
+
| `stayOpenOnSelect` | | `boolean` | `false` | Keeps panel open on item click. | |
|
|
33
|
+
| `noChevron` | | `boolean` | `false` | Hides the chevron icon on the trigger button. | |
|
|
34
|
+
| `tooltip` | | `string` | `''` | Tooltip text content. Set to empty string to remove the tooltip. | TooltipMixin |
|
|
35
|
+
| `tooltipPosition` | | `'top' \| 'bottom' \| 'left' \| 'right'` | `'top'` | Position relative to the host element. Auto-flips when constrained by the viewport. | TooltipMixin |
|
|
36
|
+
| `tooltipDelay` | | `number` | `300` | Show delay in milliseconds (hover trigger only). | TooltipMixin |
|
|
37
|
+
| `tooltipOffset` | | `TooltipOffset \| null` | `null` | Gap between host and tooltip (sm=4px, md=8px, lg=12px, xl=16px). | TooltipMixin |
|
|
38
|
+
| `tooltipNoArrow` | | `boolean` | `false` | Hide the arrow pseudo-element. | TooltipMixin |
|
|
39
|
+
| `tooltipTrigger` | | `string` | `'hover focus'` | Space-separated trigger types: 'hover', 'focus', 'click'. | TooltipMixin |
|
|
40
|
+
| `_onMouseLeave` | private | | | | TooltipMixin |
|
|
41
|
+
| `_onFocusIn` | private | | | | TooltipMixin |
|
|
42
|
+
| `_onFocusOut` | private | | | | TooltipMixin |
|
|
43
|
+
| `_onClick` | private | | | | TooltipMixin |
|
|
44
|
+
| `_onNativeToggle` | private | | | | TooltipMixin |
|
|
45
|
+
| `_onKeyDown` | private | | | | TooltipMixin |
|
|
46
|
+
| `_onDocumentClick` | private | `((e: MouseEvent) => void) \| null` | `null` | | TooltipMixin |
|
|
34
47
|
|
|
35
48
|
### Methods
|
|
36
49
|
|
|
37
|
-
| Name | Privacy | Description
|
|
38
|
-
| ------------------- | ------- |
|
|
39
|
-
| `_getButtonClasses` | private | Build the button class string based on variant and size
|
|
40
|
-
| `_showPanel` | private | Show the dropdown panel
|
|
41
|
-
| `_hidePanel` | private | Hide the dropdown panel
|
|
50
|
+
| Name | Privacy | Description | Parameters | Return | Inherited From |
|
|
51
|
+
| ------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | --------- | ----------------- |
|
|
52
|
+
| `_getButtonClasses` | private | Build the button class string based on variant and size | | `string` | |
|
|
53
|
+
| `_showPanel` | private | Show the dropdown panel | | `void` | |
|
|
54
|
+
| `_hidePanel` | private | Hide the dropdown panel | | `void` | |
|
|
55
|
+
| `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 |
|
|
42
56
|
|
|
43
57
|
### Events
|
|
44
58
|
|
|
45
|
-
| Name | Type
|
|
46
|
-
| ---------------------------- |
|
|
47
|
-
| `btu-dropdown-ready` | `CustomEvent`
|
|
48
|
-
| `btu-dropdown-show` | `CustomEvent`
|
|
49
|
-
| `btu-dropdown-hide` | `CustomEvent`
|
|
50
|
-
| `btu-dropdown-item-select` | `CustomEvent<{label: string, selected: boolean}>`
|
|
51
|
-
| `btu-dropdown-item-favorite` | `CustomEvent<{label: string, favorited: boolean}>`
|
|
59
|
+
| Name | Type | Description | Inherited From |
|
|
60
|
+
| ---------------------------- | ---------------------------------------------------------------- | ----------------------------------------------------------------------------- | -------------- |
|
|
61
|
+
| `btu-dropdown-ready` | `CustomEvent` | Fired after first render and initialization | |
|
|
62
|
+
| `btu-dropdown-show` | `CustomEvent` | Fired when the dropdown panel opens | |
|
|
63
|
+
| `btu-dropdown-hide` | `CustomEvent` | Fired when the dropdown panel closes | |
|
|
64
|
+
| `btu-dropdown-item-select` | `CustomEvent<{label: string, value: string, selected: boolean}>` | Fired when a menu item is activated (bubbles from btu-dropdown-item) | |
|
|
65
|
+
| `btu-dropdown-item-favorite` | `CustomEvent<{label: string, favorited: boolean}>` | Fired when a menu item's favorite is toggled (bubbles from btu-dropdown-item) | |
|
|
52
66
|
|
|
53
67
|
### Attributes
|
|
54
68
|
|
|
@@ -60,11 +74,22 @@
|
|
|
60
74
|
| `size` | size | |
|
|
61
75
|
| `disabled` | disabled | |
|
|
62
76
|
| `variant` | variant | |
|
|
63
|
-
| `
|
|
77
|
+
| `symbol` | symbol | |
|
|
64
78
|
| `icon-position` | iconPosition | |
|
|
65
79
|
| `icon-only` | iconOnly | |
|
|
66
80
|
| `stay-open-on-select` | stayOpenOnSelect | |
|
|
67
81
|
| `no-chevron` | noChevron | |
|
|
82
|
+
| `tooltip` | tooltip | TooltipMixin |
|
|
83
|
+
| `tooltipPosition` | tooltipPosition | TooltipMixin |
|
|
84
|
+
| `tooltipDelay` | tooltipDelay | TooltipMixin |
|
|
85
|
+
| `tooltipOffset` | tooltipOffset | TooltipMixin |
|
|
86
|
+
| `tooltipNoArrow` | tooltipNoArrow | TooltipMixin |
|
|
87
|
+
| `tooltipTrigger` | tooltipTrigger | TooltipMixin |
|
|
88
|
+
| `tooltip-position` | tooltipPosition | TooltipMixin |
|
|
89
|
+
| `tooltip-delay` | tooltipDelay | TooltipMixin |
|
|
90
|
+
| `tooltip-offset` | tooltipOffset | TooltipMixin |
|
|
91
|
+
| `tooltip-no-arrow` | tooltipNoArrow | TooltipMixin |
|
|
92
|
+
| `tooltip-trigger` | tooltipTrigger | TooltipMixin |
|
|
68
93
|
|
|
69
94
|
### CSS Properties
|
|
70
95
|
|
|
@@ -17,42 +17,59 @@
|
|
|
17
17
|
|
|
18
18
|
### Fields
|
|
19
19
|
|
|
20
|
-
| Name
|
|
21
|
-
|
|
|
22
|
-
| `label`
|
|
23
|
-
| `type`
|
|
24
|
-
| `
|
|
25
|
-
| `shortcut`
|
|
26
|
-
| `
|
|
27
|
-
| `
|
|
28
|
-
| `
|
|
20
|
+
| Name | Privacy | Type | Default | Description | Inherited From |
|
|
21
|
+
| ----------- | ------- | ------------------------------------- | ----------- | ---------------------------------------------- | -------------- |
|
|
22
|
+
| `label` | | `string` | `''` | Display text for the item. | |
|
|
23
|
+
| `type` | | `'default' \| 'divider' \| 'subhead'` | `'default'` | Item type: 'default', 'divider', or 'subhead'. | |
|
|
24
|
+
| `symbol` | | `string` | `''` | Lucide icon symbol. | |
|
|
25
|
+
| `shortcut` | | `string` | `''` | Keyboard shortcut display text. | |
|
|
26
|
+
| `value` | | `string` | `''` | Optional data value associated with the item. | |
|
|
27
|
+
| `disabled` | | `boolean` | `false` | Whether the item is disabled. | |
|
|
28
|
+
| `selected` | | `boolean` | `false` | Whether the item is selected/checked. | |
|
|
29
|
+
| `favorited` | | `boolean` | `false` | Whether the item is favorited. | |
|
|
30
|
+
| `error` | | `boolean` | `false` | Whether the item has an error. | |
|
|
29
31
|
|
|
30
32
|
### Methods
|
|
31
33
|
|
|
32
|
-
| Name | Privacy | Description
|
|
33
|
-
| ----------------- | ------- |
|
|
34
|
-
| `_toggleFavorite` | private | Toggle favorite state
|
|
35
|
-
| `_handleClick` | private |
|
|
34
|
+
| Name | Privacy | Description | Parameters | Return | Inherited From |
|
|
35
|
+
| ----------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | --------- | ----------------- |
|
|
36
|
+
| `_toggleFavorite` | private | Toggle favorite state | `e: Event` | `void` | |
|
|
37
|
+
| `_handleClick` | private | | | `void` | |
|
|
38
|
+
| `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 |
|
|
36
39
|
|
|
37
40
|
### Events
|
|
38
41
|
|
|
39
|
-
| Name | Type
|
|
40
|
-
| ---------------------------- |
|
|
41
|
-
| `btu-dropdown-item-ready` | `CustomEvent`
|
|
42
|
-
| `btu-dropdown-item-select` | `CustomEvent<{label: string, selected: boolean}>`
|
|
43
|
-
| `btu-dropdown-item-favorite` | `CustomEvent<{label: string, favorited: boolean}>`
|
|
42
|
+
| Name | Type | Description | Inherited From |
|
|
43
|
+
| ---------------------------- | ---------------------------------------------------------------- | ------------------------------ | -------------- |
|
|
44
|
+
| `btu-dropdown-item-ready` | `CustomEvent` | Fired after first render | |
|
|
45
|
+
| `btu-dropdown-item-select` | `CustomEvent<{label: string, value: string, selected: boolean}>` | Fired when item is activated | |
|
|
46
|
+
| `btu-dropdown-item-favorite` | `CustomEvent<{label: string, favorited: boolean}>` | Fired when favorite is toggled | |
|
|
44
47
|
|
|
45
48
|
### Attributes
|
|
46
49
|
|
|
47
|
-
| Name
|
|
48
|
-
|
|
|
49
|
-
| `label`
|
|
50
|
-
| `type`
|
|
51
|
-
| `
|
|
52
|
-
| `shortcut`
|
|
53
|
-
| `
|
|
54
|
-
| `
|
|
55
|
-
| `
|
|
50
|
+
| Name | Field | Inherited From |
|
|
51
|
+
| ----------- | --------- | -------------- |
|
|
52
|
+
| `label` | label | |
|
|
53
|
+
| `type` | type | |
|
|
54
|
+
| `symbol` | symbol | |
|
|
55
|
+
| `shortcut` | shortcut | |
|
|
56
|
+
| `value` | value | |
|
|
57
|
+
| `disabled` | disabled | |
|
|
58
|
+
| `selected` | selected | |
|
|
59
|
+
| `favorited` | favorited | |
|
|
60
|
+
| `error` | error | |
|
|
61
|
+
|
|
62
|
+
### CSS Properties
|
|
63
|
+
|
|
64
|
+
| Name | Default | Description |
|
|
65
|
+
| ------------------------------------- | ------- | ----------------------------------------------- |
|
|
66
|
+
| `--dropdown-item-font-size` | | Item font size (default: theme fontSize.sm) |
|
|
67
|
+
| `--dropdown-item-color` | | Item text color (default: gray-700) |
|
|
68
|
+
| `--dropdown-item-background` | | Item background color (default: transparent) |
|
|
69
|
+
| `--dropdown-item-hover-background` | | Background on hover (default: gray-100) |
|
|
70
|
+
| `--dropdown-item-hover-color` | | Text color on hover (default: gray-900) |
|
|
71
|
+
| `--dropdown-item-selected-background` | | Background when selected (default: primary-50) |
|
|
72
|
+
| `--dropdown-item-selected-color` | | Text color when selected (default: primary-700) |
|
|
56
73
|
|
|
57
74
|
<hr/>
|
|
58
75
|
|
|
@@ -10,10 +10,11 @@
|
|
|
10
10
|
|
|
11
11
|
### Mixins
|
|
12
12
|
|
|
13
|
-
| Name
|
|
14
|
-
|
|
|
15
|
-
| `
|
|
16
|
-
| `
|
|
13
|
+
| Name | Module | Package |
|
|
14
|
+
| --------------------- | -------------------------------- | ------- |
|
|
15
|
+
| `RovingTabindexMixin` | /src/util/RovingTabindexMixin.js | |
|
|
16
|
+
| `EventEmitterMixin` | /src/util/EventEmitterMixin.js | |
|
|
17
|
+
| `ReadyMixin` | /src/util/ReadyMixin.js | |
|
|
17
18
|
|
|
18
19
|
### Fields
|
|
19
20
|
|
|
@@ -23,7 +24,7 @@
|
|
|
23
24
|
| `header` | | `boolean` | `false` | Show header bar with menu name. | |
|
|
24
25
|
| `checkbox` | | `boolean` | `false` | Enable checkbox mode for items (menuitemcheckbox role). | |
|
|
25
26
|
| `icon` | | `boolean` | `false` | Show icons before each item. | |
|
|
26
|
-
| `
|
|
27
|
+
| `symbol` | | `string` | `''` | Fallback Lucide icon symbol for items without their own. | |
|
|
27
28
|
| `favorites` | | `boolean` | `false` | Show favorite toggle on each item. | |
|
|
28
29
|
| `shortcuts` | | `boolean` | `false` | Show keyboard shortcut text on each item. | |
|
|
29
30
|
| `emptyMessage` | | `string` | `'No items available'` | Message displayed when the menu has no focusable items. | |
|
|
@@ -31,14 +32,13 @@
|
|
|
31
32
|
|
|
32
33
|
### Methods
|
|
33
34
|
|
|
34
|
-
| Name
|
|
35
|
-
|
|
|
36
|
-
| `_configureItems`
|
|
37
|
-
| `_getAllItems`
|
|
38
|
-
| `_getFocusableItems`
|
|
39
|
-
| `
|
|
40
|
-
| `
|
|
41
|
-
| `_handleTypeahead` | private | Typeahead character matching with 500ms accumulation | `char: string, focusable: DropdownItem[]` | `void` | |
|
|
35
|
+
| Name | Privacy | Description | Parameters | Return | Inherited From |
|
|
36
|
+
| -------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ---------------- | ----------------- |
|
|
37
|
+
| `_configureItems` | private | Configure all child items with menu-level settings | | `void` | |
|
|
38
|
+
| `_getAllItems` | private | Get all btu-dropdown-item children | | `DropdownItem[]` | |
|
|
39
|
+
| `_getFocusableItems` | private | Get only focusable items (default type, skip dividers/subheads) | | `DropdownItem[]` | |
|
|
40
|
+
| `_handleTypeahead` | private | Typeahead character matching with 500ms accumulation | `char: string, focusable: DropdownItem[]` | `void` | |
|
|
41
|
+
| `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 |
|
|
42
42
|
|
|
43
43
|
### Events
|
|
44
44
|
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
| `header` | header | |
|
|
55
55
|
| `checkbox` | checkbox | |
|
|
56
56
|
| `icon` | icon | |
|
|
57
|
-
| `
|
|
57
|
+
| `symbol` | symbol | |
|
|
58
58
|
| `favorites` | favorites | |
|
|
59
59
|
| `shortcuts` | shortcuts | |
|
|
60
60
|
| `empty-message` | emptyMessage | |
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
# `src/components/empty-state/EmptyState.ts`:
|
|
2
|
+
|
|
3
|
+
## class: `EmptyState`, `btu-empty-state`
|
|
4
|
+
|
|
5
|
+
### Superclass
|
|
6
|
+
|
|
7
|
+
| Name | Module | Package |
|
|
8
|
+
| ------------ | ------ | ------- |
|
|
9
|
+
| `LitElement` | | lit |
|
|
10
|
+
|
|
11
|
+
### Mixins
|
|
12
|
+
|
|
13
|
+
| Name | Module | Package |
|
|
14
|
+
| ------------------- | ------------------------------ | ------- |
|
|
15
|
+
| `EventEmitterMixin` | /src/util/EventEmitterMixin.js | |
|
|
16
|
+
| `ReadyMixin` | /src/util/ReadyMixin.js | |
|
|
17
|
+
|
|
18
|
+
### Fields
|
|
19
|
+
|
|
20
|
+
| Name | Privacy | Type | Default | Description | Inherited From |
|
|
21
|
+
| ---------------- | ------- | ---------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
|
|
22
|
+
| `heading` | | `string` | `''` | Heading text displayed in the empty state. | |
|
|
23
|
+
| `description` | | `string \| undefined` | | Description text displayed below the heading. | |
|
|
24
|
+
| `size` | | `'sm' \| 'md' \| 'lg'` | `'md'` | Size variant of the empty state. Affects spacing, description text, graphic size,
and — when \`heading-level\` is unset — the default heading level (sm→5, md→4, lg→3). | |
|
|
25
|
+
| `headingLevel` | | `number \| undefined` | | Heading level (1-6). When set to a valid integer 1-6, overrides the size-based
default and drives both the semantic h1-h6 tag and the visual heading size
(btu-heading-1 through btu-heading-6). Invalid values log a warning and fall
back to the size-based default. | |
|
|
26
|
+
| `initialClasses` | private | `string[]` | `[]` | | |
|
|
27
|
+
|
|
28
|
+
### Methods
|
|
29
|
+
|
|
30
|
+
| Name | Privacy | Description | Parameters | Return | Inherited From |
|
|
31
|
+
| --------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | -------------------------- | ----------------- |
|
|
32
|
+
| `syncGraphicIconSize` | private | | | `void` | |
|
|
33
|
+
| `resolveHeadingLevel` | private | | | `HeadingLevel` | |
|
|
34
|
+
| `renderHeading` | private | | `level: HeadingLevel, className: string` | `TemplateResult \| string` | |
|
|
35
|
+
| `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 |
|
|
36
|
+
|
|
37
|
+
### Events
|
|
38
|
+
|
|
39
|
+
| Name | Type | Description | Inherited From |
|
|
40
|
+
| ------------------------ | ------------- | ---------------------------------------------- | -------------- |
|
|
41
|
+
| `btu-empty-state-ready` | `CustomEvent` | Fired after first render and initialization | |
|
|
42
|
+
| `btu-button-group-ready` | `CustomEvent` | Bubbles from the internal actions button-group | |
|
|
43
|
+
|
|
44
|
+
### Attributes
|
|
45
|
+
|
|
46
|
+
| Name | Field | Inherited From |
|
|
47
|
+
| --------------- | ------------ | -------------- |
|
|
48
|
+
| `heading` | heading | |
|
|
49
|
+
| `description` | description | |
|
|
50
|
+
| `size` | size | |
|
|
51
|
+
| `heading-level` | headingLevel | |
|
|
52
|
+
|
|
53
|
+
### CSS Properties
|
|
54
|
+
|
|
55
|
+
| Name | Default | Description |
|
|
56
|
+
| --------------------------------- | ------- | --------------------------------------------------------------- |
|
|
57
|
+
| `--empty-state-max-width` | | Maximum width of the content block (default: min(75cqw, 360px)) |
|
|
58
|
+
| `--empty-state-color-heading` | | Heading text color (default: gray-900) |
|
|
59
|
+
| `--empty-state-color-description` | | Description text color (default: gray-500) |
|
|
60
|
+
|
|
61
|
+
### Slots
|
|
62
|
+
|
|
63
|
+
| Name | Description |
|
|
64
|
+
| --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
65
|
+
| `graphic` | Pseudo-slot for icon, image, picture, or SVG graphic. When the child is a \`btu-icon\`, the component overrides its \`size\` attribute based on the empty-state \`size\` prop (sm→md, md→lg, lg→xl). Use an \`img\`, \`picture\`, or inline \`svg\` for full size control. |
|
|
66
|
+
| `actions` | Pseudo-slot for action buttons. Children are moved into an internal \`btu-button-group\` (variant="spaced"), so size and disabled state are managed by the group. |
|
|
67
|
+
|
|
68
|
+
<hr/>
|
|
69
|
+
|
|
70
|
+
## Exports
|
|
71
|
+
|
|
72
|
+
| Kind | Name | Declaration | Module | Package |
|
|
73
|
+
| --------------------------- | ----------------- | ----------- | ---------------------------------------- | ------- |
|
|
74
|
+
| `js` | `default` | EmptyState | src/components/empty-state/EmptyState.ts | |
|
|
75
|
+
| `custom-element-definition` | `btu-empty-state` | EmptyState | src/components/empty-state/EmptyState.ts | |
|